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