skins/common/edit.js

   1 var currentFocused;
   2
   3 // this function generates the actual toolbar buttons with localized text
   4 // we use it to avoid creating the toolbar where javascript is not enabled
   5 function addButton( imageFile, speedTip, tagOpen, tagClose, sampleText, imageId ) {
   6         // Don't generate buttons for browsers which don't fully
   7         // support it.
   8         mwEditButtons.push({
   9                 'imageId': imageId,
  10                 'imageFile': imageFile,
  11                 'speedTip': speedTip,
  12                 'tagOpen': tagOpen,
  13                 'tagClose': tagClose,
  14                 'sampleText': sampleText
  15         });
  16 }
  17
  18 // this function generates the actual toolbar buttons with localized text
  19 // we use it to avoid creating the toolbar where JavaScript is not enabled
  20 function mwInsertEditButton( parent, item ) {
  21         var image = document.createElement( 'img' );
  22         image.width = 23;
  23         image.height = 22;
  24         image.className = 'mw-toolbar-editbutton';
  25         if ( item.imageId ) {
  26                 image.id = item.imageId;
  27         }
  28         image.src = item.imageFile;
  29         image.border = 0;
  30         image.alt = item.speedTip;
  31         image.title = item.speedTip;
  32         image.style.cursor = 'pointer';
  33         image.onclick = function() {
  34                 insertTags( item.tagOpen, item.tagClose, item.sampleText );
  35                 // click tracking
  36                 if ( ( typeof $j != 'undefined' )  && ( typeof $j.trackAction != 'undefined' ) ) {
  37                         $j.trackAction( 'oldedit.' + item.speedTip.replace(/ /g, "-") );
  38                 }
  39                 return false;
  40         };
  41
  42         parent.appendChild( image );
  43         return true;
  44 }
  45
  46 function mwSetupToolbar() {
  47         var toolbar = document.getElementById( 'toolbar' );
  48         if ( !toolbar ) {
  49                 return false;
  50         }
  51
  52         // Don't generate buttons for browsers which don't fully
  53         // support it.
  54         // but don't assume wpTextbox1 is always here
  55         var textboxes = document.getElementsByTagName( 'textarea' );
  56         if ( !textboxes.length ) {
  57                 // No toolbar if we can't find any textarea
  58                 return false;
  59         }
  60         // Only check for selection capability if the textarea is visible - errors will occur otherwise - just because
  61         // the textarea is not visible, doesn't mean we shouldn't build out the toolbar though - it might have been replaced
  62         // with some other kind of control
  63         if ( textboxes[0].style.display != 'none' ) {
  64                 if ( !( document.selection && document.selection.createRange )
  65                         && textboxes[0].selectionStart === null ) {
  66                         return false;
  67                 }
  68         }
  69         for ( var i = 0; i < mwEditButtons.length; i++ ) {
  70                 mwInsertEditButton( toolbar, mwEditButtons[i] );
  71         }
  72         for ( var i = 0; i < mwCustomEditButtons.length; i++ ) {
  73                 mwInsertEditButton( toolbar, mwCustomEditButtons[i] );
  74         }
  75         return true;
  76 }
  77
  78 // apply tagOpen/tagClose to selection in textarea,
  79 // use sampleText instead of selection if there is none
  80 function insertTags( tagOpen, tagClose, sampleText ) {
  81         if ( typeof $j != 'undefined' && typeof $j.fn.textSelection != 'undefined' &&
  82                         ( currentFocused.nodeName.toLowerCase() == 'iframe' || currentFocused.id == 'wpTextbox1' ) ) {
  83                 $j( '#wpTextbox1' ).textSelection(
  84                         'encapsulateSelection', { 'pre': tagOpen, 'peri': sampleText, 'post': tagClose }
  85                 );
  86                 return;
  87         }
  88         var txtarea;
  89         if ( document.editform ) {
  90                 txtarea = currentFocused;
  91         } else {
  92                 // some alternate form? take the first one we can find
  93                 var areas = document.getElementsByTagName( 'textarea' );
  94                 txtarea = areas[0];
  95         }
  96         var selText, isSample = false;
  97
  98         if ( document.selection  && document.selection.createRange ) { // IE/Opera
  99                 // save window scroll position
 100                 if ( document.documentElement && document.documentElement.scrollTop ) {
 101                         var winScroll = document.documentElement.scrollTop
 102                 } else if ( document.body ) {
 103                         var winScroll = document.body.scrollTop;
 104                 }
 105                 // get current selection
 106                 txtarea.focus();
 107                 var range = document.selection.createRange();
 108                 selText = range.text;
 109                 // insert tags
 110                 checkSelectedText();
 111                 range.text = tagOpen + selText + tagClose;
 112                 // mark sample text as selected
 113                 if ( isSample && range.moveStart ) {
 114                         if ( window.opera ) {
 115                                 tagClose = tagClose.replace(/\n/g,'');
 116                         }
 117                         range.moveStart('character', - tagClose.length - selText.length);
 118                         range.moveEnd('character', - tagClose.length);
 119                 }
 120                 range.select();
 121                 // restore window scroll position
 122                 if ( document.documentElement && document.documentElement.scrollTop ) {
 123                         document.documentElement.scrollTop = winScroll;
 124                 } else if ( document.body ) {
 125                         document.body.scrollTop = winScroll;
 126                 }
 127
 128         } else if ( txtarea.selectionStart || txtarea.selectionStart == '0' ) { // Mozilla
 129                 // save textarea scroll position
 130                 var textScroll = txtarea.scrollTop;
 131                 // get current selection
 132                 txtarea.focus();
 133                 var startPos = txtarea.selectionStart;
 134                 var endPos = txtarea.selectionEnd;
 135                 selText = txtarea.value.substring( startPos, endPos );
 136                 // insert tags
 137                 checkSelectedText();
 138                 txtarea.value = txtarea.value.substring(0, startPos)
 139                         + tagOpen + selText + tagClose
 140                         + txtarea.value.substring(endPos, txtarea.value.length);
 141                 // set new selection
 142                 if ( isSample ) {
 143                         txtarea.selectionStart = startPos + tagOpen.length;
 144                         txtarea.selectionEnd = startPos + tagOpen.length + selText.length;
 145                 } else {
 146                         txtarea.selectionStart = startPos + tagOpen.length + selText.length + tagClose.length;
 147                         txtarea.selectionEnd = txtarea.selectionStart;
 148                 }
 149                 // restore textarea scroll position
 150                 txtarea.scrollTop = textScroll;
 151         }
 152
 153         function checkSelectedText() {
 154                 if ( !selText ) {
 155                         selText = sampleText;
 156                         isSample = true;
 157                 } else if ( selText.charAt(selText.length - 1) == ' ' ) { // exclude ending space char
 158                         selText = selText.substring(0, selText.length - 1);
 159                         tagClose += ' ';
 160                 }
 161         }
 162
 163 }
 164
 165 /**
 166  * Restore the edit box scroll state following a preview operation,
 167  * and set up a form submission handler to remember this state
 168  */
 169 function scrollEditBox() {
 170         var editBox = document.getElementById( 'wpTextbox1' );
 171         var scrollTop = document.getElementById( 'wpScrolltop' );
 172         var editForm = document.getElementById( 'editform' );
 173         if( editForm && editBox && scrollTop ) {
 174                 if( scrollTop.value ) {
 175                         editBox.scrollTop = scrollTop.value;
 176                 }
 177                 addHandler( editForm, 'submit', function() {
 178                         scrollTop.value = editBox.scrollTop;
 179                 } );
 180         }
 181 }
 182 hookEvent( 'load', scrollEditBox );
 183 hookEvent( 'load', mwSetupToolbar );
 184 hookEvent( 'load', function() {
 185         currentFocused = document.getElementById( 'wpTextbox1' );
 186         // http://www.quirksmode.org/blog/archives/2008/04/delegating_the.html
 187         // focus does not bubble normally, but using a trick we can do event delegation
 188         // on the focus event on all text inputs to make the toolbox usable on all of them
 189         var editForm = document.getElementById( 'editform' );
 190         if ( !editForm ) {
 191                 return;
 192         }
 193         function onfocus( e ) {
 194                 var elm = e.target || e.srcElement;
 195                 if ( !elm ) {
 196                         return;
 197                 }
 198                 var tagName = elm.tagName.toLowerCase();
 199                 var type = elm.type || '';
 200                 if ( tagName !== 'textarea' && tagName !== 'input' ) {
 201                         return;
 202                 }
 203                 if ( tagName === 'input' && type.toLowerCase() !== 'text' ) {
 204                         return;
 205                 }
 206
 207                 currentFocused = elm;
 208         }
 209
 210         if ( editForm.addEventListener ) {
 211                 // Gecko, WebKit, Opera, etc... (all standards compliant browsers)
 212                 editForm.addEventListener( 'focus', onfocus, true ); // This MUST be true to work
 213         } else if ( editForm.attachEvent ) {
 214                 // IE needs a specific trick here since it doesn't support the standard
 215                 editForm.attachEvent( 'onfocusin', function() { onfocus( event ); } );
 216         }
 217
 218         // HACK: make currentFocused work with the usability iframe
 219         // With proper focus detection support (HTML 5!) this'll be much cleaner
 220         if ( typeof $j != 'undefined' ) {
 221                 var iframe = $j( '.wikiEditor-ui-text iframe' );
 222                 if ( iframe.length > 0 ) {
 223                         $j( iframe.get( 0 ).contentWindow.document )
 224                                 .add( iframe.get( 0 ).contentWindow.document.body ) // for IE
 225                                 .focus( function() { currentFocused = iframe.get( 0 ); } );
 226                 }
 227         }
 228
 229         editForm
 230 } );
 231