[livejournal] r20330: LJSUP-10083: Add syntax highlighting to ...

U   trunk/cgi-bin/LJ/Widget/LayerEditor.pm
U   trunk/htdocs/js/s2edit/s2edit.js
U   trunk/htdocs/js/s2edit/s2gui.js
U   trunk/htdocs/js/s2edit/s2sense.js
U   trunk/htdocs/stc/s2edit.css

Modified: trunk/cgi-bin/LJ/Widget/LayerEditor.pm
===================================================================
--- trunk/cgi-bin/LJ/Widget/LayerEditor.pm	2011-10-14 14:25:15 UTC (rev 20329)
+++ trunk/cgi-bin/LJ/Widget/LayerEditor.pm	2011-10-14 14:39:00 UTC (rev 20330)
@@ -5,7 +5,7 @@
 use Carp qw(croak);
 sub ajax { 1 }
 sub authas { 1 }
-sub need_res { qw( stc/s2edit.css stc/widgets/layereditor.css js/s2edit/xlib.js js/s2edit/s2edit.js js/s2edit/s2gui.js js/s2edit/s2parser.js js/s2edit/s2sense.js js/s2edit/s2library.js) }
+sub need_res { qw( js/jquery/jquery.storage.js js/ace/ace.js js/ace/theme-textmate.js js/ace/mode-perl.js js/ace/mode-s2.js stc/s2edit.css stc/widgets/layereditor.css js/s2edit/xlib.js js/s2edit/s2edit.js js/s2edit/s2gui.js js/s2edit/s2parser.js js/s2edit/s2sense.js js/s2edit/s2library.js) }
 
 =head2 template_filename
 # path to template file,

Modified: trunk/htdocs/js/s2edit/s2edit.js
===================================================================
--- trunk/htdocs/js/s2edit/s2edit.js	2011-10-14 14:25:15 UTC (rev 20329)
+++ trunk/htdocs/js/s2edit/s2edit.js	2011-10-14 14:39:00 UTC (rev 20330)
@@ -8,6 +8,7 @@
 
 var s2dirty;
 var s2lineCount;
+var s2settings;
 
 var s2edit = function() {
 	return {
@@ -18,6 +19,8 @@
 			s2dirty = 1;
 			s2lineCount = 0;
 
+			this.initSettings();
+
 			s2initIndex();
 			s2initParser();
 			s2initSense();
@@ -28,8 +31,81 @@
 
 			// Disable selection in the document (IE only - prevents wacky dragging bugs)
 			document.onselectstart = function () { return false; };
+
+			if (jQuery.browser.opera || (jQuery.browser.msie && jQuery.browser.version)) { return; }
+
+			this.aceInit();
 		},
 
+		initSettings: function() {
+			var settings = jQuery.storage.getItem('s2edit') || {};
+
+			s2settings = {
+				load: function(item) {
+					return settings[item] || void 0;
+				},
+
+				save: function(item, val) {
+					//do nothing if option has the same value
+					if (settings.hasOwnProperty(item) && settings[item] === val) { return; }
+
+					settings[item] = val;
+					jQuery.storage.setItem('s2edit', settings);
+				}
+			};
+		},
+
+		aceInit: function() {
+			jQuery('<input type="button" id="toggleEditor" class="compilelink"/>')
+				.click(this.toggleEditor.bind(this))
+				.val('Toggle source view')
+				.insertAfter('.header .compilelink');
+
+			var textarea = jQuery('#main'),
+				pre = jQuery('<pre id="editor"/>')
+					.addClass('maintext')
+					.hide()
+					.insertAfter(textarea);
+
+			if (!s2settings.load('useAce')) { return; }
+
+			this.toggleEditor();
+		},
+
+		toggleEditor: function() {
+			var textarea = jQuery('#main'),
+				editorEl = jQuery('#editor');
+
+			if (!s2isAceActive()) {
+				textarea.hide();
+				editorEl.show();
+
+				if (!window.aceEditor) {
+					var editor = window.aceEditor = ace.edit("editor");
+					editor.setTheme("ace/theme/textmate");
+					require('ace/commands/autocompletion');
+
+					var S2Mode = require("ace/mode/s2").Mode;
+					editor.getSession().setMode(new S2Mode());
+					editor.getSession().addEventListener("change", function(e) {
+						s2dirty = 1;
+
+						if (e.data.action === 'insertText' && e.data.text.length === 1) {
+							s2sense(e.data.text.charCodeAt(0));
+						}
+					});
+				}
+
+				aceEditor.getSession().setValue(textarea.val());
+				s2settings.save('useAce', true);
+			} else {
+				textarea.val(aceEditor.getSession().getValue());
+				textarea.show();
+				editorEl.hide();
+				s2settings.save('useAce', false);
+			}
+		},
+
 		save: function(text) {
 			s2output.add('Compiling..', true);
 			this.widget.saveContent(text);

Modified: trunk/htdocs/js/s2edit/s2gui.js
===================================================================
--- trunk/htdocs/js/s2edit/s2gui.js	2011-10-14 14:25:15 UTC (rev 20329)
+++ trunk/htdocs/js/s2edit/s2gui.js	2011-10-14 14:39:00 UTC (rev 20330)
@@ -78,9 +78,13 @@
 
 function s2getCode()
 {
-	return xGetElementById('main').value;
+	return s2isAceActive() ? aceEditor.getSession().getValue() : xGetElementById('main').value;
 }
 
+function s2isAceActive() {
+	return !jQuery('#main').is(':visible');
+}
+
 function s2setCode(to)
 {
 	xGetElementById('main').innerHTML = to;
@@ -154,6 +158,11 @@
 }
 
 function s2jumpTo(line, column) {
+	if (s2isAceActive()) {
+		aceEditor.gotoLine(line, column - 1);
+		return;
+	}
+
 	var main = s2getCodeArea(),
 		text = main.value,
 		pos = text.split('\n').slice(0, line - 1).join('\n').length + column;
@@ -167,8 +176,6 @@
 
 function s2jumpToPos(pos, line)
 {
-	var main = s2getCodeArea();
-
 	nxpositionCursor(main, pos);
 	nxscrollObject(main, line, s2lineCount);
 }
@@ -385,6 +392,10 @@
 		main.style.width = "50px";
 		main.style.width = oldwidth;
 	}
+
+	if (window.aceEditor) {
+		aceEditor.resize();
+	}
 }
 
 function s2resizeReference(force)
@@ -412,6 +423,10 @@
 	divider.style.left = (rWidth + 204 - 174) + 'px';
 	output.style.left = (rWidth + 204 - 174) + 'px';
 	xGetElementById('outputtabs').style.left = (rWidth + 204 - 174) + 'px';
+
+	if (window.aceEditor) {
+		aceEditor.resize();
+	}
 }
 
 function s2processDrag(e)
@@ -518,6 +533,10 @@
 {
 	// save position textarea, where reload page
 	var textarea = s2getCodeArea();
+	if (s2isAceActive()) {
+		textarea.value = aceEditor.getSession().getValue();
+	}
+
 	s2edit.save(textarea.value);
 	return false;
 }

Modified: trunk/htdocs/js/s2edit/s2sense.js
===================================================================
--- trunk/htdocs/js/s2edit/s2sense.js	2011-10-14 14:25:15 UTC (rev 20329)
+++ trunk/htdocs/js/s2edit/s2sense.js	2011-10-14 14:39:00 UTC (rev 20330)
@@ -60,7 +60,13 @@
 	if (!(s2completions.length))
 		return false;
 
-	nxinsertText(area, s2completions[0].substring(s2compText.length));
+	var insertText = s2completions[0].substring(s2compText.length);
+
+	if (s2isAceActive()) {
+		aceEditor.insert(insertText);
+	} else {
+		nxinsertText(area, insertText);
+	}
 	s2printStatus('Autocompleted: ' + s2completions[0]);
 	s2completions = new Array();
 	
@@ -104,27 +110,36 @@
 				s2completionUpdated();
 		} else {
 			s2acceptCompletion();
+			return true;
 		}
-	} else
+	} else {
+		var currentLine;
+		if (s2isAceActive()) {
+			var position = aceEditor.getCursorPosition();
+			currentLine = aceEditor.getSession().getLine(position.row).substr(0,position.column);
+		} else {
+			currentLine = nxgetLastChars(area, 64);
+		}
 		switch (ch) {
 			case 58:	// :
-				var m = nxgetLastChars(area, 64).match(/([A-Za-z0-9_]+):$/);
+				var m = currentLine.match(/([A-Za-z0-9_]+):$/);
 				if (m)
 					s2startClassMethodCompletion(m[1]);
 				break;
 				
 			case 0x3e:	// >
-				var m = nxgetLastChars(area, 64).match(/\$[^-]+-$/);
+				var m = currentLine.match(/\$[^-]+-$/);
 				if (m)
 					s2startMethodCompletion();
 				break;
 				
 			case 0x2e:	// .
-				var m = nxgetLastChars(area, 64).match(/\$[^.]+$/);
+				var m = currentLine.match(/\$[^.]+$/);
 				if (m)
 					s2startMemberCompletion();
 				break;
 		}
+    }
 }
 
 // Create the completion caches - initialization routine

Modified: trunk/htdocs/stc/s2edit.css
===================================================================
--- trunk/htdocs/stc/s2edit.css	2011-10-14 14:25:15 UTC (rev 20329)
+++ trunk/htdocs/stc/s2edit.css	2011-10-14 14:39:00 UTC (rev 20330)
@@ -122,6 +122,7 @@
 
 .maintext {
 	position: absolute;
+	margin: 0;
 	border: solid #808080 1px;
 	font-family: monospace;
 	font-size: 8pt;
@@ -131,6 +132,7 @@
 	left: 0px;
 	height: 100%;
 	width: 100%;
+	background: #fff;
 }
 
 div.output {