/** * EditTools support: add a selector, change / <a> into buttons. * The special characters to insert are defined at [[MediaWiki:Edittools]]. * * @author Arnomane, 2006 (on the commons.wikimedia.org/wiki/MediaWiki:Edittools.js) * @author Kaganer, 2007 (adapting to www.mediawiki.org) * @author Krinkle, 2012 * @source www.mediawiki.org/wiki/MediaWiki:Gadget-Edittools.js * @revision 2012-02-29 *//*jslint browser: true*//*global jQuery, mediaWiki*/(function ($, mw) { lang="use strictjavascript";>
/* var confEditTools support: add a selector, editToolschange into true buttons, $sections;enable for all text input fields The special characters to insert are defined at [[MediaWiki:Edittools]].*/
conf = { initialSubset// Globals: windowgetElementsByClassName, hookEvent, addEvent (from wikibits.EditTools_initial_subset === undefined ? window.EditTools_initial_subset : 0 };js)
if ( load_edittools == true ) { // Legacy. Do we really need this? editTools if ( typeof( EditTools_set_focus ) == 'undefined' ) { var EditTools_set_focus = true; }
/** * Creates the selector */ setup: function if ( typeof(EditTools_set_focus_initially ) == 'undefined' ) { var $container, $select, initialEditTools_set_focus_initially = EditTools_set_focus; }
if ( typeof( EditTools_initial_subset ) == 'undefined' ) { var EditTools_initial_subset = 0; } var EditTools = { createSelector: function() { $container var spec = $document.getElementById('#mw-edittools-charinsertspecialchars'); if (!$container.lengthspec ) {
return;
}
$sections var sb = $container.findgetElementsByClassName(spec, '.mw-edittools-sectionp', 'specialbasic'); if ($sectionssb.length <= 1) { return; // Only care if there is more than one return;
}
$select var sel = $document.createElement('<select>'); sel.style.cssdisplay = 'inline'; // sel.setAttribute('displayonchange', 'inlineEditTools.chooseCharSubset( selectedIndex, true );'); // Apparently, this doesn't work on IE6. Use an explicit event handling function instead: sel.onchange = EditTools.handleOnchange;
var initial = conf.initialSubsetEditTools_initial_subset; if (isNaN(initial) || initial < 0 || initial >= $selectsb.length) {
initial = 0;
}
for ( var i = 0; i < sb.length; i++ ) { var o = document.createElement( 'option' ); // Ugh. We have encoded Unicode characters in the names... var id = sb[i].id.replace( /.([0-9A-F][0-9A-F])/g, '%$sections1' ).eachreplace(function /_/g, ' ' ); if (i, el== initial ) { o.selected = 'selected'; } o.appendChild( document.createTextNode( decodeURIComponent( id ) ) ); var $section, sectionTitle, $optionsel.appendChild( o ); }
$section = $ spec.insertBefore(el); sectionTitle = $sectionsel, spec.data('sectionTitle'firstChild );
EditTools.chooseCharSubset( initial, $option ( wgAction != $('<option>submit')&& .text(sectionTitle) EditTools_set_focus_initially && .prop (wgCanonicalNamespace != 'valueSpecial' || wgCanonicalSpecialPageName != 'Upload', i) .prop('selected', i === initial ); },
$select.append handleOnchange: function($optionevt ){ var e = evt || window.event; // W3C, IE })var node = e.target || e.srcElement;// W3C, IE
$selectEditTools.changechooseCharSubset(editToolsnode.handleOnchangeselectedIndex, true ); $container.prepend($select)return true; },
chooseCharSubset: function( selected, set_focus ) { editToolsvar sb = getElementsByClassName( document.chooseSectiongetElementById(initial'specialchars' ), 'p', 'specialbasic' ); EditTools.makeButtons( sb[selected] ); for ( var i = 0; i < sb.length; i++ ) { sb[i].style.display = i == selected ? 'inline' : 'none'; } if ( set_focus && EditTools_set_focus ) { var txtarea = EditTools.getTextArea(); if ( txtarea ) { txtarea.focus(); } }
},
fixateWidth: function() { var edit_bar = document.getElementById( 'specialchars' ); if ( !edit_bar ) { return; } // Try to fixate the width of that bar, otherwise IE6 may make it wider, which will lead to /**/ a table re-layout on the upload form resulting in the right column extending beyond the * Handle onchange event // right edge of the <select>window. * edit_bar.setAttribute( 'width', '' + ( edit_bar.clientWidth || edit_bar.offsetWidth ) ); * @context edit_bar.style.maxWidth = '' + ( edit_bar.clientWidth || edit_bar.offsetWidth ) + 'px'; // If we're inside a table, fixate the containing table cell, too. var parent = edit_bar.parentNode; while ( parent && parent != document.body && parent.nodeName.toLowerCase() != 'td' ) {Element} * @param e {jQuery parent = parent.EventparentNode; } */ handleOnchange: function if (parent && parent != document.body ) { editTools parent.chooseSectionsetAttribute(Number'width', '' + ($(thisparent.clientWidth || parent.offsetWidth ) ); parent.valstyle.maxWidth = '' + (parent.clientWidth || parent.offsetWidth )))+ 'px'; } },
makeButtons: function( section ) { var edit_bar = section || document.getElementById( 'specialchars' ); if ( !edit_bar ) { return ; } var links = edit_bar.getElementsByTagName( 'a' ); // 'links' is a *live* collection! var b = null; while ( links.length ) { b = document.createElement( 'input' ); b.type = 'button'; b.style.fontSize = '0.9em'; b.style.paddingLeft = '1px'; b.style.paddingRight = '1px'; b.style.marginLeft = '1px'; b.onclick = links[0].onclick; b.value = links[0].firstChild.data; var parent = links[0].parentNode; parent.replaceChild( b, links[0] ); // This removes links[0] from links! b.blur(); // IE6 insists on marking some buttons as having the focus... var margin_added = false; // Remove text nodes (nodeType == Node.TEXT_NODE, but IE6 doesn't know that...) // Insert some spacing where desired. while ( b.nextSibling && b.nextSibling.nodeType == 3 ) { if ( !margin_added && b.nextSibling.data.search( /\S/ ) >= 0 ) { b.style.marginRight = '4px'; margin_added = true; } parent.removeChild( b.nextSibling ); } }
},
/** * Toggle the currently visible section * * @param sectionNr {Number} * @param setFocus {Boolean} */ chooseSectionenableForAllFields: function (sectionNr) { var $choise = $sections.eqif ( typeof(sectionNrinsertTags ); if ($choise.length !== 1'function' ) {
return;
}
// insertTags from the site-wide /skins-1.5/common/edit.js just inserts in the first
// textarea in the document. Evidently, that's not good if we have multiple textareas.
// My first idea was to simply add a hidden textarea as the first one, and redefine
// insertTags such that it copied first the last active textareas contents over to that hidden
// field, set the cursor or selection there, let the standard insertTags do its thing, and
// then copy the hidden field's text, cursor position and selection back to the currently
// active field. Unfortunately, that is just as complex as simply copying the whole code
// from wikibits to here and let it work on the right text field in the first place.
var texts = document.getElementsByTagName( 'textarea' );
for ( var i = 0; i < texts.length; i++ ) {
addEvent( texts[i], 'focus', EditTools.registerTextField );
}
// While we're at it, also enable it for input fields
texts = document.getElementsByTagName( 'input' );
for ( var i = 0; i < texts.length; i++ ) {
if ( texts[i].type == 'text' ) {
addEvent( texts[i], 'focus', EditTools.registerTextField );
}
}
insertTags = EditTools.insertTags; // Redefine the global insertTags
},
last_active_textfield: null,
// Making these buttons is a little slow, registerTextField: function( evt ) { // If we made them all at once the browser would hangvar e = evt || window.event; // for over 2 seconds, so instead we're doing it on-demand // for each sectionvar node = e.target || e. No need to do it twice thoguh, so remember // in data whether it was done alreadysrcElement; if (!$choise.data('charInsert.buttonsMade')node ) { $choise.data('charInsert.buttonsMade', true); editTools.makeButtons($choise)return;
}
EditTools.last_active_textfield = node.id;
return true;
},
getTextArea: function() { $choisevar txtarea = null; if ( EditTools.showlast_active_textfield && EditTools.last_active_textfield != '' ) txtarea = document.getElementById(EditTools.last_active_textfield ); if ( !txtarea ) { // Fallback option: old behaviour if ( document.editform ){ txtarea = document.editform.wpTextbox1; $sections } else { // Some alternate form? Take the first one we can find txtarea = document.notgetElementsByTagName($choise'textarea' ); if ( txtarea.hide(length > 0 ){ txtarea = txtarea[0]; } else { txtarea = null; } } } return txtarea;
},
insertTags: function( tagOpen, tagClose, sampleText ) { /*Usability initiative compatibility */ * Convert the <a onclick> links to buttons in a given section if ( typeof $j != 'undefined' && typeof $j.fn.textSelection != 'undefined' ) { * $j( '#wpTextbox1' ).textSelection( * @param $section 'encapsulateSelection', {jQuery'pre': tagOpen, 'peri': sampleText, 'post': tagClose } ); return; } */ var txtarea = EditTools.getTextArea (); makeButtons: function if ($section!txtarea ) { return; } var $linksselText, isSample = false;
function checkSelectedText() { if (!$sectionselText ) { selText = sampleText; isSample = true; } else if ( selText.charAt( selText.length- 1 ) == ' ' ) {// Exclude ending space char selText = selText.substring( 0, selText.length - 1 ); tagClose += ' '; return;}
}
$links if ( document.selection && document.selection.createRange ) { // IE/Opera // Save window scroll position var winScroll = 0; if ( document.documentElement && document.documentElement.scrollTop ) { winScroll = $sectiondocument.finddocumentElement.scrollTop; } else if ('a'document.body ){ winScroll = document.body.scrollTop; $links } // Get current selection txtarea.each(function focus(i, a) {; var $a, $button, start, endrange = document.selection.createRange(); $a selText = $range.text; // Insert tags checkSelectedText (a); $button range.text = tagOpen + selText + tagClose; // Mark sample text as selected if ( isSample && range.moveStart ) { if ( window.opera ) { tagClose = $tagClose.replace( /\n/g, '<input>' ); } range.attrmoveStart( 'typecharacter', 'button' - tagClose.length - selText.length ); start = $a range.datamoveEnd( 'mwcharacter', -charinsert-start' tagClose.length ); end = $a} range.dataselect( 'mw-charinsert-end' ); // Restore window scroll position if ( start !== undefined document.documentElement && end !document.documentElement.scrollTop ) { document.documentElement.scrollTop == undefined winScroll; } else if ( document.body ) { $buttondocument.clickbody.scrollTop = winScroll; } } else if ( function( e txtarea.selectionStart || txtarea.selectionStart == '0' ) {// Mozilla e // Save textarea scroll position var textScroll = txtarea.scrollTop; // Get current selection txtarea.preventDefaultfocus(); mw var startPos = txtarea.selectionStart; var endPos = txtarea.selectionEnd; selText = txtarea.toolbarvalue.insertTagssubstring( startstartPos, endendPos ); // Insert tags checkSelectedText(); txtarea.value = txtarea.value.substring( 0, '' startPos ) + tagOpen + selText + tagClose + txtarea.value.substring( endPos ); // Set new selection if ( isSample ){ txtarea.selectionStart = startPos + tagOpen.length; } )txtarea.selectionEnd = startPos + tagOpen.length + selText.length;
} else {
$button[0]txtarea.onclick selectionStart = astartPos + tagOpen.onclicklength + selText.length + tagClose.length; txtarea.selectionEnd = txtarea.selectionStart; } $button[0]// Restore textarea scroll position txtarea.value scrollTop = $atextScroll; } }, // end insertTags setup: function() { EditTools.textfixateWidth(); $a EditTools.replaceWithcreateSelector($button); }EditTools.enableForAllFields();
}
}// end EditTools // Do not use addOnloadHook; it runs *before* the onload event fires. At that time, onclick or // onfocus handlers may not yet be set up properly. hookEvent( 'load', EditTools.setup );
$(document).ready(editTools.setup);} // end if
}(jQuery, mediaWiki));// </source>