http://www.mediawiki.org/wiki/Special:Code/MediaWiki/90240
Revision: 90240
Author: brion
Date: 2011-06-16 22:30:01 +0000 (Thu, 16 Jun 2011)
Log Message:
-----------
CodeEditor ext: basic ability to toggle the syntax-highlighting editor on/off.
When off, we restore the regular textarea and its behavior.
State is saved as a cookie, like other WikiEditor settings.
Modified Paths:
--------------
trunk/extensions/CodeEditor/CodeEditor.i18n.php
trunk/extensions/CodeEditor/CodeEditor.php
trunk/extensions/CodeEditor/modules/ext.codeEditor.js
trunk/extensions/CodeEditor/modules/jquery.codeEditor.js
Added Paths:
-----------
trunk/extensions/CodeEditor/images/
trunk/extensions/CodeEditor/images/code-selected.png
trunk/extensions/CodeEditor/images/code.png
trunk/extensions/CodeEditor/images/comment-off.svg
trunk/extensions/CodeEditor/images/comment.svg
Modified: trunk/extensions/CodeEditor/CodeEditor.i18n.php
===================================================================
--- trunk/extensions/CodeEditor/CodeEditor.i18n.php 2011-06-16 22:27:22 UTC
(rev 90239)
+++ trunk/extensions/CodeEditor/CodeEditor.i18n.php 2011-06-16 22:30:01 UTC
(rev 90240)
@@ -12,7 +12,8 @@
* @author Brion Vibber
*/
$messages['en'] = array(
- 'codeeditor-desc' => 'Syntax-highlighted editing for JavaScript and CSS
pages using [http://ace.ajax.org/ Ace editor]'
+ 'codeeditor-desc' => 'Syntax-highlighted editing for JavaScript and CSS
pages using [http://ace.ajax.org/ Ace editor]',
+ 'codeeditor-toolbar-toggle' => 'Toggle syntax highlighting',
);
/** Afrikaans (Afrikaans)
Modified: trunk/extensions/CodeEditor/CodeEditor.php
===================================================================
--- trunk/extensions/CodeEditor/CodeEditor.php 2011-06-16 22:27:22 UTC (rev
90239)
+++ trunk/extensions/CodeEditor/CodeEditor.php 2011-06-16 22:30:01 UTC (rev
90240)
@@ -44,6 +44,9 @@
'jquery.wikiEditor',
'ext.codeEditor.ace',
),
+ 'messages' => array(
+ 'codeeditor-toolbar-toggle'
+ )
) + $tpl;
// Minimal bundling of a couple bits of Ace
Added: trunk/extensions/CodeEditor/images/code-selected.png
===================================================================
(Binary files differ)
Property changes on: trunk/extensions/CodeEditor/images/code-selected.png
___________________________________________________________________
Added: svn:mime-type
+ image/png
Added: trunk/extensions/CodeEditor/images/code.png
===================================================================
(Binary files differ)
Property changes on: trunk/extensions/CodeEditor/images/code.png
___________________________________________________________________
Added: svn:mime-type
+ image/png
Added: trunk/extensions/CodeEditor/images/comment-off.svg
===================================================================
--- trunk/extensions/CodeEditor/images/comment-off.svg
(rev 0)
+++ trunk/extensions/CodeEditor/images/comment-off.svg 2011-06-16 22:30:01 UTC
(rev 90240)
@@ -0,0 +1,72 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+ xmlns:dc="http://purl.org/dc/elements/1.1/";
+ xmlns:cc="http://creativecommons.org/ns#";
+ xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#";
+ xmlns:svg="http://www.w3.org/2000/svg";
+ xmlns="http://www.w3.org/2000/svg";
+ xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd";
+ xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape";
+ width="22"
+ height="22"
+ id="svg2985"
+ version="1.1"
+ inkscape:version="0.48.1 r9760"
+ sodipodi:docname="comment.svg"
+
inkscape:export-filename="/var/www/trunk/extensions/CodeEditor/images/code-selected.png"
+ inkscape:export-xdpi="90"
+ inkscape:export-ydpi="90">
+ <defs
+ id="defs2987" />
+ <sodipodi:namedview
+ id="base"
+ pagecolor="#ffffff"
+ bordercolor="#666666"
+ borderopacity="1.0"
+ inkscape:pageopacity="0.0"
+ inkscape:pageshadow="2"
+ inkscape:zoom="11.197802"
+ inkscape:cx="-0.29784131"
+ inkscape:cy="19.57213"
+ inkscape:current-layer="layer1"
+ showgrid="true"
+ inkscape:grid-bbox="true"
+ inkscape:document-units="px"
+ inkscape:window-width="1920"
+ inkscape:window-height="1056"
+ inkscape:window-x="1920"
+ inkscape:window-y="24"
+ inkscape:window-maximized="1" />
+ <metadata
+ id="metadata2990">
+ <rdf:RDF>
+ <cc:Work
+ rdf:about="">
+ <dc:format>image/svg+xml</dc:format>
+ <dc:type
+ rdf:resource="http://purl.org/dc/dcmitype/StillImage"; />
+ <dc:title></dc:title>
+ </cc:Work>
+ </rdf:RDF>
+ </metadata>
+ <g
+ id="layer1"
+ inkscape:label="Layer 1"
+ inkscape:groupmode="layer"
+ transform="translate(0,-10)">
+ <text
+ xml:space="preserve"
+
style="font-size:12px;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;font-family:Monospace;-inkscape-font-specification:Monospace"
+ x="3.393523"
+ y="26.73111"
+ id="text2993"
+ sodipodi:linespacing="125%"><tspan
+ sodipodi:role="line"
+ x="3.393523"
+ y="26.73111"
+ id="tspan2997"
+
style="font-size:18px;font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-family:Sans;-inkscape-font-specification:Sans
Bold;fill:#000000">/*</tspan></text>
+ </g>
+</svg>
Added: trunk/extensions/CodeEditor/images/comment.svg
===================================================================
--- trunk/extensions/CodeEditor/images/comment.svg
(rev 0)
+++ trunk/extensions/CodeEditor/images/comment.svg 2011-06-16 22:30:01 UTC
(rev 90240)
@@ -0,0 +1,80 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+ xmlns:dc="http://purl.org/dc/elements/1.1/";
+ xmlns:cc="http://creativecommons.org/ns#";
+ xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#";
+ xmlns:svg="http://www.w3.org/2000/svg";
+ xmlns="http://www.w3.org/2000/svg";
+ xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd";
+ xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape";
+ width="22"
+ height="22"
+ id="svg2985"
+ version="1.1"
+ inkscape:version="0.48.1 r9760"
+ sodipodi:docname="comment.svg"
+
inkscape:export-filename="/var/www/trunk/extensions/CodeEditor/images/code-selected.png"
+ inkscape:export-xdpi="90"
+ inkscape:export-ydpi="90">
+ <defs
+ id="defs2987" />
+ <sodipodi:namedview
+ id="base"
+ pagecolor="#ffffff"
+ bordercolor="#666666"
+ borderopacity="1.0"
+ inkscape:pageopacity="0.0"
+ inkscape:pageshadow="2"
+ inkscape:zoom="11.197802"
+ inkscape:cx="-0.29784131"
+ inkscape:cy="19.57213"
+ inkscape:current-layer="layer1"
+ showgrid="true"
+ inkscape:grid-bbox="true"
+ inkscape:document-units="px"
+ inkscape:window-width="1920"
+ inkscape:window-height="1056"
+ inkscape:window-x="1920"
+ inkscape:window-y="24"
+ inkscape:window-maximized="1" />
+ <metadata
+ id="metadata2990">
+ <rdf:RDF>
+ <cc:Work
+ rdf:about="">
+ <dc:format>image/svg+xml</dc:format>
+ <dc:type
+ rdf:resource="http://purl.org/dc/dcmitype/StillImage"; />
+ <dc:title></dc:title>
+ </cc:Work>
+ </rdf:RDF>
+ </metadata>
+ <g
+ id="layer1"
+ inkscape:label="Layer 1"
+ inkscape:groupmode="layer"
+ transform="translate(0,-10)">
+ <rect
+
style="opacity:0.50000000000000000;fill:#ffffff;fill-opacity:1;stroke:#808080;stroke-opacity:1"
+ id="rect3188"
+ width="21"
+ height="21"
+ x="0.53581941"
+ y="10.567223"
+ rx="3" />
+ <text
+ xml:space="preserve"
+
style="font-size:12px;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:#2a7fff;fill-opacity:1;stroke:none;font-family:Monospace;-inkscape-font-specification:Monospace"
+ x="3.393523"
+ y="26.73111"
+ id="text2993"
+ sodipodi:linespacing="125%"><tspan
+ sodipodi:role="line"
+ x="3.393523"
+ y="26.73111"
+ id="tspan2997"
+
style="font-size:18px;font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-family:Sans;-inkscape-font-specification:Sans
Bold">/*</tspan></text>
+ </g>
+</svg>
Modified: trunk/extensions/CodeEditor/modules/ext.codeEditor.js
===================================================================
--- trunk/extensions/CodeEditor/modules/ext.codeEditor.js 2011-06-16
22:27:22 UTC (rev 90239)
+++ trunk/extensions/CodeEditor/modules/ext.codeEditor.js 2011-06-16
22:30:01 UTC (rev 90240)
@@ -19,12 +19,10 @@
* https://github.com/ajaxorg/ace/issues/37
*
* Known issues:
- * - with both classic & enhanced toolbar, toolbar buttons have no effect.
- * - do we need an interface for regular actions to work on custom editors,
or should it replace the toolbar too?
- * - something keeps trying to load a background worker thread from wrong URL,
but seems to fail gracefully.
+ * - extension version doesn't have optional bits correct
+ * - ties into WikiEditor, so doesn't work on classic toolbar
+ * - background worker for JS syntax check doesn't load in non-debug mode
(probably also fails if extension assets are offsite)
* - copy/paste not available from context menu (Firefox, Chrome on Linux --
kbd & main menu commands ok)
- * - libs are loaded from toolserver over HTTP; should at least check for
HTTPS (toolserver.org's cert is for *.toolserver.org, so fails on
https://toolserver.org)
- * - unlike the textarea in many browsers, the widget isn't automatically
resizable; jquery.ui.resizable on the container should fix that
* - accessibility: tab/shift-tab are overridden. is there a consistent
alternative for keyboard-reliant users?
* - accessibility: accesskey on the original textarea needs to be moved over
or otherwise handled
* - 'discard your changes?' check on tab close doesn't trigger
Modified: trunk/extensions/CodeEditor/modules/jquery.codeEditor.js
===================================================================
--- trunk/extensions/CodeEditor/modules/jquery.codeEditor.js 2011-06-16
22:27:22 UTC (rev 90239)
+++ trunk/extensions/CodeEditor/modules/jquery.codeEditor.js 2011-06-16
22:30:01 UTC (rev 90240)
@@ -62,24 +62,66 @@
}
} );
+var cookieEnabled = $.cookie('wikiEditor-' + context.instance +
'-codeEditor-enabled');
+context.codeEditorActive = (cookieEnabled != '0');
+
/**
* Internally used functions
*/
context.fn = $.extend( context.fn, {
- 'saveCursorAndScrollTop': function() {
- // Stub out textarea behavior
- return;
+ 'codeEditorToolbarIcon': function() {
+ var iconPath = wgExtensionAssetsPath + '/CodeEditor/images/';
+ return iconPath + (context.codeEditorActive ?
'code-selected.png' : 'code.png');
},
- 'restoreCursorAndScrollTop': function() {
- // Stub out textarea behavior
- return;
+ 'setupCodeEditorToolbar': function() {
+ // Drop out some formatting that isn't relevant on these
pages...
+ context.api.removeFromToolbar(context, {
+ 'section': 'main',
+ 'group': 'format',
+ 'tool': 'bold'
+ });
+ context.api.removeFromToolbar(context, {
+ 'section': 'main',
+ 'group': 'format',
+ 'tool': 'italic'
+ });
+ var callback = function( context ) {
+ context.codeEditorActive = !context.codeEditorActive;
+ $.cookie(
+ 'wikiEditor-' + context.instance +
'-codeEditor-enabled',
+ context.codeEditorActive ? 1 : 0,
+ { expires: 30, path: '/' }
+ );
+ context.fn.toggleCodeEditorToolbar();
+
+ if (context.codeEditorActive) {
+ // set it back up!
+ context.fn.setupCodeEditor();
+ } else {
+ context.fn.disableCodeEditor();
+ }
+ }
+ context.api.addToToolbar( context, {
+ 'section': 'main',
+ 'group': 'format',
+ 'tools': {
+ 'codeEditor': {
+ 'labelMsg': 'codeeditor-toolbar-toggle',
+ 'type': 'button',
+ 'icon':
context.fn.codeEditorToolbarIcon(),
+ 'action': {
+ 'type': 'callback',
+ 'execute': callback
+ }
+ }
+ }
+ } );
},
- 'saveSelection': function() {
- mw.log('codeEditor stub function saveSelection called');
+ 'toggleCodeEditorToolbar': function() {
+ var target = 'img.tool[rel=codeEditor]';
+ var $img = context.modules.toolbar.$toolbar.find( target );
+ $img.attr('src', context.fn.codeEditorToolbarIcon());
},
- 'restoreSelection': function() {
- mw.log('codeEditor stub function restoreSelection called');
- },
/**
* Sets up the iframe in place of the textarea to allow more advanced
operations
*/
@@ -104,7 +146,7 @@
// Ace doesn't like replacing a textarea directly.
// We'll stub this out to sit on top of it...
// line-height is needed to compensate for oddity in
WikiEditor extension, which zeroes the line-height on a parent container
- var container = $('<div style="position: relative"><div
class="editor" style="line-height: 1.5em; top: 0px; left: 0px; right: 0px;
bottom: 0px; border: 1px solid gray"></div></div>').insertAfter(box);
+ var container = context.$codeEditorContainer = $('<div
style="position: relative"><div class="editor" style="line-height: 1.5em; top:
0px; left: 0px; right: 0px; bottom: 0px; border: 1px solid
gray"></div></div>').insertAfter(box);
var editdiv = container.find('.editor');
box.css('display', 'none');
@@ -152,6 +194,85 @@
}
},
+ /*
+ * Turn off the code editor view and return to the plain textarea.
+ * May be needed by some folks with funky browsers, or just to compare.
+ */
+ 'disableCodeEditor': function() {
+ // Kills it!
+
+ // Save contents
+ context.$textarea.val(context.fn.getContents());
+
+ // @todo fetch cursor, scroll position
+
+ // Drop the fancy editor widget...
+ context.$codeEditorContainer.remove();
+ context.$codeEditorContainer = undefined;
+ context.$iframe = undefined;
+ context.codeEditor = undefined;
+
+ // Restore textarea
+ context.$textarea.show();
+
+ // @todo restore cursor, scroll position
+ }
+});
+
+/**
+ * Override the base functions in a way that lets
+ * us fall back to the originals when we turn off.
+ */
+var saveAndExtend = function( base, extended ) {
+ var saved = {};
+ $.map( extended, function( func, name ) {
+ if ( name in base ) {
+ var orig = base[name];
+ base[name] = function() {
+ if (context.codeEditorActive) {
+ return func.apply(this, arguments);
+ } else {
+ return orig.apply(this, arguments);
+ }
+ }
+ } else {
+ base[name] = func;
+ }
+ });
+};
+
+saveAndExtend( context.fn, {
+ 'saveCursorAndScrollTop': function() {
+ if ( context.codeEditor ) {
+ // Stub out textarea behavior
+ return;
+ } else {
+
context.codeEditorStubs.saveCursorAndScrollTop.apply(this);
+ }
+ },
+ 'restoreCursorAndScrollTop': function() {
+ if ( context.codeEditor ) {
+ // Stub out textarea behavior
+ return;
+ } else {
+
context.codeEditorStubs.saveCursorAndScrollTop.apply(this);
+ }
+ },
+ 'saveSelection': function() {
+ if ( context.codeEditor ) {
+ mw.log('codeEditor stub function saveSelection called');
+ } else {
+
context.codeEditorStubs.saveCursorAndScrollTop.apply(this);
+ }
+ },
+ 'restoreSelection': function() {
+ if ( context.codeEditor ) {
+ mw.log('codeEditor stub function restoreSelection
called');
+ } else {
+
context.codeEditorStubs.saveCursorAndScrollTop.apply(this);
+ }
+ },
+
/* Needed for search/replace */
'getContents': function() {
return context.codeEditor.getSession().getValue();
@@ -266,6 +387,9 @@
} );
/* Setup the editor */
-context.fn.setupCodeEditor();
+context.fn.setupCodeEditorToolbar();
+if (context.codeEditorActive) {
+ context.fn.setupCodeEditor();
+}
} } )( jQuery );
_______________________________________________
MediaWiki-CVS mailing list
MediaWiki-CVS@lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/mediawiki-cvs
