/* Ace syntax-highlighting code editor extension for wikiEditor */
( function( $ ) {
$.wikiEditor.modules.codeEditor = {
/**
* Core Requirements
*/
'req': [ 'codeEditor' ],
/**
* Configuration
*/
cfg: {
//
},
/**
* API accessible functions
*/
api: {
//
},
/**
* Event handlers
*/
evt: {
//
},
/**
* Internally used functions
*/
fn: {
}
};
$.wikiEditor.extensions.codeEditor = function( context ) {
/*
* Event Handlers
*
* These act as filters returning false if the event should be ignored or returning true if it should be passed
* on to all modules. This is also where we can attach some extra information to the events.
*/
context.evt = $.extend( context.evt, {
/**
* Filters change events, which occur when the user interacts with the contents of the iframe. The goal of this
* function is to both classify the scope of changes as 'division' or 'character' and to prevent further
* processing of events which did not actually change the content of the iframe.
*/
'keydown': function( event ) {
},
'change': function( event ) {
},
'delayedChange': function( event ) {
},
'cut': function( event ) {
},
'paste': function( event ) {
},
'ready': function( event ) {
}
} );
var cookieEnabled = $.cookie('wikiEditor-' + context.instance + '-codeEditor-enabled');
context.codeEditorActive = (cookieEnabled != '0');
/**
* Internally used functions
*/
context.fn = $.extend( context.fn, {
'codeEditorToolbarIcon': function() {
// When loaded as a gadget, one may need to override the wiki's own assets path.
var iconPath = mw.config.get('wgCodeEditorAssetsPath', mw.config.get('wgExtensionAssetsPath')) + '/CodeEditor/images/';
return iconPath + (context.codeEditorActive ? 'code-selected.png' : 'code.png');
},
'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
}
}
}
} );
},
'toggleCodeEditorToolbar': function() {
var target = 'img.tool[rel=codeEditor]';
var $img = context.modules.toolbar.$toolbar.find( target );
$img.attr('src', context.fn.codeEditorToolbarIcon());
},
/**
* Sets up the iframe in place of the textarea to allow more advanced operations
*/
'setupCodeEditor': function() {
var box = context.$textarea;
var matches = /\.(js|css)$/.exec(wgTitle);
if (matches && (wgNamespaceNumber == 2 /* User: */ || wgNamespaceNumber == 8 /* MediaWiki: */)) {
var ext = matches[1];
var map = {js: 'javascript', css: 'css'};
var lang = map[ext];
// Disable some annoying commands
// This doesn't seem to work; filed as https://github.com/ajaxorg/ace/issues/294
var canon = require('pilot/canon');
//console.log(canon.getCommandNames());
canon.removeCommand('replace'); // ctrl+R
canon.removeCommand('transposeletters'); // ctrl+T
canon.removeCommand('gotoline'); // ctrl+L
//console.log(canon.getCommandNames());
// 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 = context.$codeEditorContainer = $('
').insertAfter(box);
var editdiv = container.find('.editor');
box.css('display', 'none');
container.width(box.width())
.height(box.height());
editdiv.text(box.val());
context.codeEditor = ace.edit(editdiv[0]);
// fakeout for bug 29328
context.$iframe = [
{
contentWindow: {
focus: function() {
context.codeEditor.focus();
}
}
}
];
box.closest('form').submit(function(event) {
box.val(context.fn.getContents());
});
context.codeEditor.getSession().setMode(new (require("ace/mode/" + lang).Mode));
// Force the box to resize horizontally to match in future :D
var resize = function() {
container.width(box.width());
};
$(window).resize(resize);
// Use jquery.ui.resizable so user can make the box taller too
container.resizable({
handles: 's',
minHeight: box.height(),
resize: function() {
context.codeEditor.resize();
}
});
var summary = $('#wpSummary');
if (summary.val() == '') {
summary.val('/* using [[mw:CodeEditor|CodeEditor]] */ ');
}
// Let modules know we're ready to start working with the content
context.fn.trigger( 'ready' );
}
},
/*
* 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 doesn't handle objects in jQuery < 1.6; need this for compat with MW 1.17
var map = function( obj, callback ) {
for (var key in extended ) {
if ( obj.hasOwnProperty( key ) ) {
callback( obj[key], key );
}
}
};
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 if (orig) {
return orig.apply(this, arguments);
} else {
throw new Error('CodeEditor: no original function to call for ' + name);
}
}
} else {
base[name] = func;
}
});
};
saveAndExtend( context.fn, {
'saveCursorAndScrollTop': function() {
// Stub out textarea behavior
return;
},
'restoreCursorAndScrollTop': function() {
// Stub out textarea behavior
return;
},
'saveSelection': function() {
mw.log('codeEditor stub function saveSelection called');
},
'restoreSelection': function() {
mw.log('codeEditor stub function restoreSelection called');
},
/* Needed for search/replace */
'getContents': function() {
return context.codeEditor.getSession().getValue();
},
/*
* Compatibility with the $.textSelection jQuery plug-in. When the iframe is in use, these functions provide
* equivilant functionality to the otherwise textarea-based functionality.
*/
'getElementAtCursor': function() {
mw.log('codeEditor stub function getElementAtCursor called');
},
/**
* Gets the currently selected text in the content
* DO NOT CALL THIS DIRECTLY, use $.textSelection( 'functionname', options ) instead
*/
'getSelection': function() {
return context.codeEditor.getCopyText();
},
/**
* Inserts text at the begining and end of a text selection, optionally inserting text at the caret when
* selection is empty.
* DO NOT CALL THIS DIRECTLY, use $.textSelection( 'functionname', options ) instead
*/
'encapsulateSelection': function( options ) {
// Does not yet handle 'ownline', 'splitlines' option
var sel = context.codeEditor.getSelection();
var range = sel.getRange();
var selText = context.fn.getSelection();
var isSample = false;
if ( !selText ) {
selText = options.peri;
isSample = true;
} else if ( options.replace ) {
selText = options.peri;
}
var text = options.pre;
text += selText;
text += options.post;
context.codeEditor.insert( text );
if ( isSample && options.selectPeri && !options.splitlines ) {
// May esplode if anything has newlines, be warned. :)
range.setStart( range.start.row, range.start.column + options.pre.length );
range.setEnd( range.start.row, range.start.column + selText.length );
sel.setSelectionRange(range);
}
return context.$textarea;
},
/**
* Gets the position (in resolution of bytes not nessecarily characters) in a textarea
* DO NOT CALL THIS DIRECTLY, use $.textSelection( 'functionname', options ) instead
*/
'getCaretPosition': function( options ) {
mw.log('codeEditor stub function getCaretPosition called');
},
/**
* Sets the selection of the content
* DO NOT CALL THIS DIRECTLY, use $.textSelection( 'functionname', options ) instead
*
* @param start Character offset of selection start
* @param end Character offset of selection end
* @param startContainer Element in iframe to start selection in. If not set, start is a character offset
* @param endContainer Element in iframe to end selection in. If not set, end is a character offset
*/
'setSelection': function( options ) {
// Ace stores positions for ranges as row/column pairs.
// To convert from character offsets, we'll need to iterate through the document
var doc = context.codeEditor.getSession().getDocument();
var lines = doc.getAllLines();
var offsetToPos = function( offset ) {
var row = 0, col = 0;
var pos = 0;
while ( row < lines.length && pos + lines[row].length < offset) {
pos += lines[row].length;
pos++; // for the newline
row++;
}
col = offset - pos;
return {row: row, column: col};
}
var start = offsetToPos( options.start ),
end = offsetToPos( options.end );
var sel = context.codeEditor.getSelection();
var range = sel.getRange();
range.setStart( start.row, start.column );
range.setEnd( end.row, end.column );
sel.setSelectionRange( range );
return context.$textarea;
},
/**
* Scroll a textarea to the current cursor position. You can set the cursor position with setSelection()
* DO NOT CALL THIS DIRECTLY, use $.textSelection( 'functionname', options ) instead
*/
'scrollToCaretPosition': function( options ) {
mw.log('codeEditor stub function scrollToCaretPosition called');
return context.$textarea;
},
/**
* Scroll an element to the top of the iframe
* DO NOT CALL THIS DIRECTLY, use $.textSelection( 'functionname', options ) instead
*
* @param $element jQuery object containing an element in the iframe
* @param force If true, scroll the element even if it's already visible
*/
'scrollToTop': function( $element, force ) {
mw.log('codeEditor stub function scrollToTop called');
}
} );
/* Setup the editor */
context.fn.setupCodeEditorToolbar();
if (context.codeEditorActive) {
context.fn.setupCodeEditor();
}
} } )( jQuery );