Nest hover/click function, better code folding plus error catching

You can now hover mouse over nest positions to have them selected Can also click to set cursor position to within that nest Removed old code folding function in favour of lib that comes with CodeMirror Errors catched so clicking on a blank area of the file manager doesn't attempt anything
Overwrite permission prompt plus better display & error catching
2026-03-16 05:17:01 +01:00 · 2012-04-07 21:17:33 +01:00 · 2012-04-07 21:14:24 +01:00 · 2012-04-07 21:11:45 +01:00 · 2012-04-07 20:27:40 +01:00
4 changed files with 84 additions and 63 deletions
--- a/editor.php
+++ b/editor.php
@@ -13,6 +13,7 @@
 <script src="<?php echo $codeMirrorDir; ?>/mode/php/php.js"></script>
 <script src="<?php echo $codeMirrorDir; ?>/lib/util/searchcursor.js"></script>
 <script src="<?php echo $codeMirrorDir; ?>/lib/util/match-highlighter.js"></script>
+<script src="<?php echo $codeMirrorDir; ?>/lib/util/foldcode.js"></script>
 <link rel="stylesheet" href="lib/editor.css">
 <style type="text/css">
 .CodeMirror {position: absolute; width: 0px; background-color: #ffffff}
@@ -26,7 +27,12 @@
 <body onKeyDown="return top.ICEcoder.interceptKeys('content', event);" onKeyUp="top.ICEcoder.resetKeys(event);">

 <script>
-function createNewCMInstance(num) {window['cM'+num] = CodeMirror(document.body, {
+function createNewCMInstance(num) {
+	var fileName = top.ICEcoder.openFiles[top.ICEcoder.selectedTab-1];
+	var codeFold = CodeMirror.newFoldFunction(CodeMirror.tagRangeFinder,'<span style=\"display: inline-block; width: 13px; height: 13px; background-color: #bb0000; color: #ffffff; text-align: center; cursor: pointer\"><span style="position: relative; top: -1px">+</span></span> %N%');
+	var codeFold_JS_PHP = CodeMirror.newFoldFunction(CodeMirror.braceRangeFinder,'<span style=\"display: inline-block; width: 13px; height: 13px; background-color: #bb0000; color: #ffffff; text-align: center; cursor: pointer\"><span style="position: relative; top: -1px">+</span></span> %N%');
+
+	window['cM'+num] = CodeMirror(document.body, {
        mode: "application/x-httpd-php",
 	theme: "icecoder",
        lineNumbers: true,
@@ -52,6 +58,7 @@ function createNewCMInstance(num) {window['cM'+num] = CodeMirror(document.body,
 			top.ICEcoder.redoTabHighlight(top.ICEcoder.selectedTab);
 		}
 		top.ICEcoder.getCaretPosition();
+		top.ICEcoder.dontUpdateNest = false;
 		top.ICEcoder.updateCharDisplay();
 		top.ICEcoder.updateNestingIndicator();
 		if (top.ICEcoder.findMode) {
@@ -77,7 +84,6 @@ function createNewCMInstance(num) {window['cM'+num] = CodeMirror(document.body,
 			if(top.ICEcoder.tagString.slice(0,1)=="/"||top.ICEcoder.tagString.slice(0,1)=="?") {
 				canDoEndTag=false;
 			}
-			fileName = top.ICEcoder.openFiles[top.ICEcoder.selectedTab-1];
 			if (!top.ICEcoder.codeAssist||fileName.indexOf(".js")>0||fileName.indexOf(".css")>0) {
 				canDoEndTag=false;
 			}
@@ -106,7 +112,7 @@ function createNewCMInstance(num) {window['cM'+num] = CodeMirror(document.body,
 		};
 		lastKeyCode = e.keyCode;
 	},
-	onGutterClick: top.ICEcoder.foldCode,
+	onGutterClick: !fileName || (fileName && fileName.indexOf(".js") == -1 && fileName.indexOf(".php") == -1) ? codeFold : codeFold_JS_PHP,
 	extraKeys: {"Tab": "indentMore", "Shift-Tab": "indentLess"}
 	});

--- a/lib/coder.js
+++ b/lib/coder.js
@@ -167,7 +167,7 @@ var ICEcoder = {
 		}

 		// Now we've built up our nest depth array, if we're due to show it in the display
-		if (updateNestDisplay) {
+		if (updateNestDisplay && !top.ICEcoder.dontUpdateNest) {

 			// Clear the display
 			ICEcoder.nestDisplay.innerHTML = "";
@@ -177,7 +177,7 @@ var ICEcoder = {

 					// Then for all the array items, output as the nest display
 					for (var i=0;i<ICEcoder.htmlTagArray.length;i++) {
-						ICEcoder.nestDisplay.innerHTML += ICEcoder.htmlTagArray[i];
+						ICEcoder.nestDisplay.innerHTML += '<a onMouseover="top.ICEcoder.highlightBlock('+i+')" onMouseout="top.ICEcoder.highlightBlock('+i+',\'hide\')" onClick="top.ICEcoder.setPosition('+i+',top.ICEcoder.startPosLine,\''+ICEcoder.htmlTagArray[i]+'\')" style="cursor: pointer">'+ICEcoder.htmlTagArray[i]+'</a>';
 						if(i<ICEcoder.htmlTagArray.length-1) {ICEcoder.nestDisplay.innerHTML += " &gt; "};
 					}
 				}
@@ -604,7 +604,7 @@ var ICEcoder = {
 				// Set our array to contain 0 items
 				top.ICEcoder.selectedFiles.length = 0;
 			}
-		} else {
+		} else if (top.ICEcoder.thisFileFolderLink) {
 			// We clicked a file/folder. Work out a shortened URL for the file, with pipes instead of slashes
 			shortURL = top.ICEcoder.thisFileFolderLink.substr((top.ICEcoder.thisFileFolderLink.indexOf(shortURLStarts)+top.shortURLStarts.length),top.ICEcoder.thisFileFolderLink.length).replace(/\//g,"|");
 		
@@ -733,6 +733,7 @@ var ICEcoder = {
 		var saveType;

 		saveAs ? saveType = "saveAs" : saveType = "save";
+		
 		top.ICEcoder.serverQueue("add","lib/file-control.php?action=save&file="+ICEcoder.openFiles[ICEcoder.selectedTab-1].replace(/\//g,"|")+"&saveType="+saveType);
 		top.ICEcoder.serverMessage('<b>Saving</b><br>'+ICEcoder.openFiles[ICEcoder.selectedTab-1]);
 	},
@@ -1239,62 +1240,65 @@ var ICEcoder = {
 		setTimeout(function() {top.ICEcoder.serverMessage();},2000);
 	},

-	// Fold or show code by clicking line nos in the gutter
-	foldCode: function(instance,lineNo,mouseEvt) {
-		var cM, string, origLine, origChar, collapseTag, nestDepth, cursor, lastLine;
+	// Highlight or hide block upon roll over/out of nest positions
+	highlightBlock: function(nestPos,hide) {
+		var cM;

-		cM = top.ICEcoder.getcMInstance();
+		cM = ICEcoder.getcMInstance();
+		// Hiding the block
+		if (hide) {
+			// Either set our cursor back to the orig position if we have't clicked or redo the nest display if we have
+			top.ICEcoder.dontUpdateNest ? cM.setCursor(top.ICEcoder.cursorOrigLine,top.ICEcoder.cursorOrigCh) : top.ICEcoder.getNestLocation('updateNestDisplay');
+			top.ICEcoder.dontUpdateNest = false;
+		} else {
+			// Showing the block, get orig cursor position
+			top.ICEcoder.cursorOrigCh = cM.getCursor().ch;
+			top.ICEcoder.cursorOrigLine = cM.getCursor().line;
+			top.ICEcoder.dontUpdateNest = true;
+		
+			// Set a cursor position object to begin with
+			searchPos = new Object();
+			searchPos.ch = cM.getCursor().ch;
+			searchPos.line = cM.getCursor().line;
+			// Then find our cursor position for our target nest depth
+			for (var i=top.ICEcoder.htmlTagArray.length-1;i>=nestPos;i--) {
+				cursor = cM.getSearchCursor("<"+top.ICEcoder.htmlTagArray[i],searchPos);
+				cursor.findPrevious();
+				searchPos.ch = cursor.from().ch;
+				searchPos.line = cursor.from().line;
+			}
+			// Once we've found our tag
+			if (cursor.from()) {
+				// Set our vars to match the start position
+				startPos = new Object();
+				top.ICEcoder.startPosCh = startPos.ch = cursor.from().ch;
+				top.ICEcoder.startPosLine = startPos.line = cursor.from().line;
+				// Now set an end position object that matches this start tag
+				endPos = new Object();
+				endPos.line = top.ICEcoder.content.contentWindow.CodeMirror.tagRangeFinder(cM,startPos.line)-1 || startPos.line;
+				endPos.ch = cM.getLine(endPos.line).indexOf("</"+top.ICEcoder.htmlTagArray[nestPos]+">")+top.ICEcoder.htmlTagArray[nestPos].length+3;
+				// Set the selection or escape out of not selecting
+				!top.ICEcoder.dontSelect ? cM.setSelection(startPos,endPos) : top.ICEcoder.dontSelect = false;
+			}
+		}
+	},

-		setTimeout(function() {
-			// If the next line is hidden, unhide lines until we reach a line that isn't hidden
-			if (cM.lineInfo(lineNo+1).handle.hidden) {
-				for (var i=lineNo;i<=1000000;i++) {
-					cM.lineInfo(i+1).handle.hidden ? cM.showLine(i+1) : i=1000000;
-					if (!cM.lineInfo(i+1).handle.hidden) {
-						cM.clearMarker(i);
-					}
-				}
-				// Clear the gutter marker
-				cM.clearMarker(lineNo);
-			} else {
-				// Get the line of text, plus set our original (current) line & char position
-				string = cM.getLine(lineNo);
-				origLine = cM.getCursor().line;
-				origChar = cM.getCursor().ch;
+	// Set our cursor position upon mouse click of the nest position
+	setPosition: function(nestPos,line,tag) {
+		var cM;

-				// Then shoft the cursor to just after the first > char
-				cM.setCursor(lineNo,string.indexOf(">")+1);
-
-				setTimeout(function() {
-					// Get the tag we're collapsing on and it's nest depth
-					collapseTag = top.ICEcoder.htmlTagArray[top.ICEcoder.htmlTagArray.length-1];
-					nestDepth = top.ICEcoder.htmlTagArray.length;
-
-					setTimeout(function() {
-						// If we don't have the end tag on the same line
-						if (string.indexOf("</"+collapseTag+">",string.indexOf("<"+collapseTag+">"))==-1) {
-							// Find each matching end tag in turn and if it's the same nest depth, we have the correct one
-							cursor = cM.getSearchCursor("</"+collapseTag+">",cM.getCursor());
-							for (var i=0;i<=1000000;i++) {
-								lastLine = cursor.findNext();
-								lastLine = cursor.to().line;
-								cM.setCursor(cursor.to().line,cursor.to().ch);
-								if (top.ICEcoder.htmlTagArray.length==nestDepth-1) {
-									i=1000000;
-								}
-							}
-							// Now we can hide lines in that range
-							for (i=lineNo+1;i<lastLine;i++) {
-								cM.hideLine(i);
-							}
-						}
-						// Finally, set the marker in the gutter and return our cursor to the original position
-						cM.setMarker(lineNo, "<span style=\"color: #ffffff; cursor: pointer\">+</span> %N%")
-						cM.setCursor(origLine,origChar);
-					},1);
-
-				},1);
-			};
-		},1);
+		cM = ICEcoder.getcMInstance();
+		// Set out char position just after the tag, and refocus on the editor
+		char = cM.getLine(line).indexOf(">",cM.getLine(line).indexOf("<"+tag))+1;
+		cM.setCursor(line,char);
+		cM.focus();
+		// Now update the nest display up to this nest depth & without any HTML tags to kill further interactivity
+		charPos = 0;
+		for (i=0;i<=nestPos;i++) {
+			charPos = ICEcoder.nestDisplay.innerHTML.indexOf("&gt;",charPos+1);
+		}
+		ICEcoder.nestDisplay.innerHTML = ICEcoder.nestDisplay.innerHTML.substr(0,charPos).replace(/<(?:.|\n)*?>/gm, '');
+		top.ICEcoder.dontUpdateNest = false;
+		top.ICEcoder.dontSelect = true;
 	}
 };
--- a/lib/file-control.php
+++ b/lib/file-control.php
@@ -219,10 +219,21 @@ if (action=="save") {
 		} else {
 			newFileName = prompt('Enter Filename','/');
 		}
+		if (newFileName && top.document.getElementById('filesFrame').contentWindow.document.getElementById(newFileName.replace(/\//g,"|"))) {
+			overwriteOK = confirm('That file exists already, overwrite?');
+		}
 		document.saveFile.newFileName.value = newFileName;
 	<?php ;};?>
-	document.saveFile.contents.innerHTML = top.document.getElementById('saveTemp1').value;
-	document.saveFile.submit();
+	if ("undefined" == typeof newFileName || (newFileName && "undefined" == typeof overwriteOK) || ("undefined" != typeof overwriteOK && overwriteOK)) {
+		if ("undefined" != typeof newFileName) {
+			top.ICEcoder.serverMessage('<b>Saving</b><br>'+newFileName);
+		}
+		document.saveFile.contents.innerHTML = top.document.getElementById('saveTemp1').value;
+		document.saveFile.submit();
+	} else {
+		top.ICEcoder.serverMessage();top.ICEcoder.serverQueue("del",0);
+		action=="nothing";
+	}
 }
 </script>

--- a/lib/settings.php
+++ b/lib/settings.php
@@ -1,5 +1,5 @@
 <?php
-$versionNo		= "v 0.6.1";
+$versionNo		= "v 0.6.2";
 $codeMirrorDir		= "CodeMirror-2.23";
 $cMThisVer		= 2.23;
 $testcMVersion		= false; // test if we're using the latest CodeMirror version
Author	SHA1	Message	Date
Matt Pass	ef9d8ed5de	Nest hover/click function, better code folding plus error catching You can now hover mouse over nest positions to have them selected Can also click to set cursor position to within that nest Removed old code folding function in favour of lib that comes with CodeMirror Errors catched so clicking on a blank area of the file manager doesn't attempt anything	2012-04-07 21:17:33 +01:00
Matt Pass	07e44ecfb5	Overwrite permission prompt plus better display & error catching Now asks for overwrite permission if saving new file or save as over another file Server message now shows your new filename when saving Error catching so if not saving it clears server message	2012-04-07 21:14:24 +01:00
Matt Pass	fee53144d9	Code folding upon gutter click New fileName var CodeMirror lib used to allow folding of code on clicking gutter HTML folds on <tags> and JS & PHP fold on {braces} + in gutter indicates folded area	2012-04-07 21:11:45 +01:00
Matt Pass	e899c2f1bd	Version no. update to v0.6.2	2012-04-07 20:27:40 +01:00