]> scripts.mit.edu Git - autoinstalls/wordpress.git/blob - wp-includes/js/quicktags.js
WordPress 3.8.1-scripts
[autoinstalls/wordpress.git] / wp-includes / js / quicktags.js
1 /* global adminpage, wpActiveEditor, quicktagsL10n, wpLink, fullscreen, prompt */
2 /*
3  * Quicktags
4  *
5  * This is the HTML editor in WordPress. It can be attached to any textarea and will
6  * append a toolbar above it. This script is self-contained (does not require external libraries).
7  *
8  * Run quicktags(settings) to initialize it, where settings is an object containing up to 3 properties:
9  * settings = {
10  *   id : 'my_id',          the HTML ID of the textarea, required
11  *   buttons: ''            Comma separated list of the names of the default buttons to show. Optional.
12  *                          Current list of default button names: 'strong,em,link,block,del,ins,img,ul,ol,li,code,more,close';
13  * }
14  *
15  * The settings can also be a string quicktags_id.
16  *
17  * quicktags_id string The ID of the textarea that will be the editor canvas
18  * buttons string Comma separated list of the default buttons names that will be shown in that instance.
19  */
20
21 // new edit toolbar used with permission
22 // by Alex King
23 // http://www.alexking.org/
24
25 var QTags, edCanvas,
26         edButtons = [];
27
28 /* jshint ignore:start */
29
30 /**
31  * Back-compat
32  *
33  * Define all former global functions so plugins that hack quicktags.js directly don't cause fatal errors.
34  */
35 var edAddTag = function(){},
36 edCheckOpenTags = function(){},
37 edCloseAllTags = function(){},
38 edInsertImage = function(){},
39 edInsertLink = function(){},
40 edInsertTag = function(){},
41 edLink = function(){},
42 edQuickLink = function(){},
43 edRemoveTag = function(){},
44 edShowButton = function(){},
45 edShowLinks = function(){},
46 edSpell = function(){},
47 edToolbar = function(){};
48
49 /**
50  * Initialize new instance of the Quicktags editor
51  */
52 function quicktags(settings) {
53         return new QTags(settings);
54 }
55
56 /**
57  * Inserts content at the caret in the active editor (textarea)
58  *
59  * Added for back compatibility
60  * @see QTags.insertContent()
61  */
62 function edInsertContent(bah, txt) {
63         return QTags.insertContent(txt);
64 }
65
66 /**
67  * Adds a button to all instances of the editor
68  *
69  * Added for back compatibility, use QTags.addButton() as it gives more flexibility like type of button, button placement, etc.
70  * @see QTags.addButton()
71  */
72 function edButton(id, display, tagStart, tagEnd, access) {
73         return QTags.addButton( id, display, tagStart, tagEnd, access, '', -1 );
74 }
75
76 /* jshint ignore:end */
77
78 (function(){
79         // private stuff is prefixed with an underscore
80         var _domReady = function(func) {
81                 var t, i, DOMContentLoaded, _tryReady;
82
83                 if ( typeof jQuery !== 'undefined' ) {
84                         jQuery(document).ready(func);
85                 } else {
86                         t = _domReady;
87                         t.funcs = [];
88
89                         t.ready = function() {
90                                 if ( ! t.isReady ) {
91                                         t.isReady = true;
92                                         for ( i = 0; i < t.funcs.length; i++ ) {
93                                                 t.funcs[i]();
94                                         }
95                                 }
96                         };
97
98                         if ( t.isReady ) {
99                                 func();
100                         } else {
101                                 t.funcs.push(func);
102                         }
103
104                         if ( ! t.eventAttached ) {
105                                 if ( document.addEventListener ) {
106                                         DOMContentLoaded = function(){document.removeEventListener('DOMContentLoaded', DOMContentLoaded, false);t.ready();};
107                                         document.addEventListener('DOMContentLoaded', DOMContentLoaded, false);
108                                         window.addEventListener('load', t.ready, false);
109                                 } else if ( document.attachEvent ) {
110                                         DOMContentLoaded = function(){if (document.readyState === 'complete'){ document.detachEvent('onreadystatechange', DOMContentLoaded);t.ready();}};
111                                         document.attachEvent('onreadystatechange', DOMContentLoaded);
112                                         window.attachEvent('onload', t.ready);
113
114                                         _tryReady = function() {
115                                                 try {
116                                                         document.documentElement.doScroll('left');
117                                                 } catch(e) {
118                                                         setTimeout(_tryReady, 50);
119                                                         return;
120                                                 }
121
122                                                 t.ready();
123                                         };
124                                         _tryReady();
125                                 }
126
127                                 t.eventAttached = true;
128                         }
129                 }
130         },
131
132         _datetime = (function() {
133                 var now = new Date(), zeroise;
134
135                 zeroise = function(number) {
136                         var str = number.toString();
137
138                         if ( str.length < 2 ) {
139                                 str = '0' + str;
140                         }
141
142                         return str;
143                 };
144
145                 return now.getUTCFullYear() + '-' +
146                         zeroise( now.getUTCMonth() + 1 ) + '-' +
147                         zeroise( now.getUTCDate() ) + 'T' +
148                         zeroise( now.getUTCHours() ) + ':' +
149                         zeroise( now.getUTCMinutes() ) + ':' +
150                         zeroise( now.getUTCSeconds() ) +
151                         '+00:00';
152         })(),
153         qt;
154
155         qt = QTags = function(settings) {
156                 if ( typeof(settings) === 'string' ) {
157                         settings = {id: settings};
158                 } else if ( typeof(settings) !== 'object' ) {
159                         return false;
160                 }
161
162                 var t = this,
163                         id = settings.id,
164                         canvas = document.getElementById(id),
165                         name = 'qt_' + id,
166                         tb, onclick, toolbar_id;
167
168                 if ( !id || !canvas ) {
169                         return false;
170                 }
171
172                 t.name = name;
173                 t.id = id;
174                 t.canvas = canvas;
175                 t.settings = settings;
176
177                 if ( id === 'content' && typeof(adminpage) === 'string' && ( adminpage === 'post-new-php' || adminpage === 'post-php' ) ) {
178                         // back compat hack :-(
179                         edCanvas = canvas;
180                         toolbar_id = 'ed_toolbar';
181                 } else {
182                         toolbar_id = name + '_toolbar';
183                 }
184
185                 tb = document.createElement('div');
186                 tb.id = toolbar_id;
187                 tb.className = 'quicktags-toolbar';
188
189                 canvas.parentNode.insertBefore(tb, canvas);
190                 t.toolbar = tb;
191
192                 // listen for click events
193                 onclick = function(e) {
194                         e = e || window.event;
195                         var target = e.target || e.srcElement, visible = target.clientWidth || target.offsetWidth, i;
196
197                         // don't call the callback on pressing the accesskey when the button is not visible
198                         if ( !visible ) {
199                                 return;
200                         }
201
202                         // as long as it has the class ed_button, execute the callback
203                         if ( / ed_button /.test(' ' + target.className + ' ') ) {
204                                 // we have to reassign canvas here
205                                 t.canvas = canvas = document.getElementById(id);
206                                 i = target.id.replace(name + '_', '');
207
208                                 if ( t.theButtons[i] ) {
209                                         t.theButtons[i].callback.call(t.theButtons[i], target, canvas, t);
210                                 }
211                         }
212                 };
213
214                 if ( tb.addEventListener ) {
215                         tb.addEventListener('click', onclick, false);
216                 } else if ( tb.attachEvent ) {
217                         tb.attachEvent('onclick', onclick);
218                 }
219
220                 t.getButton = function(id) {
221                         return t.theButtons[id];
222                 };
223
224                 t.getButtonElement = function(id) {
225                         return document.getElementById(name + '_' + id);
226                 };
227
228                 qt.instances[id] = t;
229
230                 if ( !qt.instances[0] ) {
231                         qt.instances[0] = qt.instances[id];
232                         _domReady( function(){ qt._buttonsInit(); } );
233                 }
234         };
235
236         qt.instances = {};
237
238         qt.getInstance = function(id) {
239                 return qt.instances[id];
240         };
241
242         qt._buttonsInit = function() {
243                 var t = this, canvas, name, settings, theButtons, html, inst, ed, id, i, use,
244                         defaults = ',strong,em,link,block,del,ins,img,ul,ol,li,code,more,close,';
245
246                 for ( inst in t.instances ) {
247                         if ( inst === 0 ) {
248                                 continue;
249                         }
250
251                         ed = t.instances[inst];
252                         canvas = ed.canvas;
253                         name = ed.name;
254                         settings = ed.settings;
255                         html = '';
256                         theButtons = {};
257                         use = '';
258
259                         // set buttons
260                         if ( settings.buttons ) {
261                                 use = ','+settings.buttons+',';
262                         }
263
264                         for ( i in edButtons ) {
265                                 if ( !edButtons[i] ) {
266                                         continue;
267                                 }
268
269                                 id = edButtons[i].id;
270                                 if ( use && defaults.indexOf( ',' + id + ',' ) !== -1 && use.indexOf( ',' + id + ',' ) === -1 ) {
271                                         continue;
272                                 }
273
274                                 if ( !edButtons[i].instance || edButtons[i].instance === inst ) {
275                                         theButtons[id] = edButtons[i];
276
277                                         if ( edButtons[i].html ) {
278                                                 html += edButtons[i].html(name + '_');
279                                         }
280                                 }
281                         }
282
283                         if ( use && use.indexOf(',fullscreen,') !== -1 ) {
284                                 theButtons.fullscreen = new qt.FullscreenButton();
285                                 html += theButtons.fullscreen.html(name + '_');
286                         }
287
288
289                         if ( 'rtl' === document.getElementsByTagName('html')[0].dir ) {
290                                 theButtons.textdirection = new qt.TextDirectionButton();
291                                 html += theButtons.textdirection.html(name + '_');
292                         }
293
294                         ed.toolbar.innerHTML = html;
295                         ed.theButtons = theButtons;
296                 }
297                 t.buttonsInitDone = true;
298         };
299
300         /**
301          * Main API function for adding a button to Quicktags
302          *
303          * Adds qt.Button or qt.TagButton depending on the args. The first three args are always required.
304          * To be able to add button(s) to Quicktags, your script should be enqueued as dependent
305          * on "quicktags" and outputted in the footer. If you are echoing JS directly from PHP,
306          * use add_action( 'admin_print_footer_scripts', 'output_my_js', 100 ) or add_action( 'wp_footer', 'output_my_js', 100 )
307          *
308          * Minimum required to add a button that calls an external function:
309          *     QTags.addButton( 'my_id', 'my button', my_callback );
310          *     function my_callback() { alert('yeah!'); }
311          *
312          * Minimum required to add a button that inserts a tag:
313          *     QTags.addButton( 'my_id', 'my button', '<span>', '</span>' );
314          *     QTags.addButton( 'my_id2', 'my button', '<br />' );
315          *
316          * @param string id Required. Button HTML ID
317          * @param string display Required. Button's value="..."
318          * @param string|function arg1 Required. Either a starting tag to be inserted like "<span>" or a callback that is executed when the button is clicked.
319          * @param string arg2 Optional. Ending tag like "</span>"
320          * @param string access_key Optional. Access key for the button.
321          * @param string title Optional. Button's title="..."
322          * @param int priority Optional. Number representing the desired position of the button in the toolbar. 1 - 9 = first, 11 - 19 = second, 21 - 29 = third, etc.
323          * @param string instance Optional. Limit the button to a specifric instance of Quicktags, add to all instances if not present.
324          * @return mixed null or the button object that is needed for back-compat.
325          */
326         qt.addButton = function( id, display, arg1, arg2, access_key, title, priority, instance ) {
327                 var btn;
328
329                 if ( !id || !display ) {
330                         return;
331                 }
332
333                 priority = priority || 0;
334                 arg2 = arg2 || '';
335
336                 if ( typeof(arg1) === 'function' ) {
337                         btn = new qt.Button(id, display, access_key, title, instance);
338                         btn.callback = arg1;
339                 } else if ( typeof(arg1) === 'string' ) {
340                         btn = new qt.TagButton(id, display, arg1, arg2, access_key, title, instance);
341                 } else {
342                         return;
343                 }
344
345                 if ( priority === -1 ) { // back-compat
346                         return btn;
347                 }
348
349                 if ( priority > 0 ) {
350                         while ( typeof(edButtons[priority]) !== 'undefined' ) {
351                                 priority++;
352                         }
353
354                         edButtons[priority] = btn;
355                 } else {
356                         edButtons[edButtons.length] = btn;
357                 }
358
359                 if ( this.buttonsInitDone ) {
360                         this._buttonsInit(); // add the button HTML to all instances toolbars if addButton() was called too late
361                 }
362         };
363
364         qt.insertContent = function(content) {
365                 var sel, startPos, endPos, scrollTop, text, canvas = document.getElementById(wpActiveEditor);
366
367                 if ( !canvas ) {
368                         return false;
369                 }
370
371                 if ( document.selection ) { //IE
372                         canvas.focus();
373                         sel = document.selection.createRange();
374                         sel.text = content;
375                         canvas.focus();
376                 } else if ( canvas.selectionStart || canvas.selectionStart === 0 ) { // FF, WebKit, Opera
377                         text = canvas.value;
378                         startPos = canvas.selectionStart;
379                         endPos = canvas.selectionEnd;
380                         scrollTop = canvas.scrollTop;
381
382                         canvas.value = text.substring(0, startPos) + content + text.substring(endPos, text.length);
383
384                         canvas.focus();
385                         canvas.selectionStart = startPos + content.length;
386                         canvas.selectionEnd = startPos + content.length;
387                         canvas.scrollTop = scrollTop;
388                 } else {
389                         canvas.value += content;
390                         canvas.focus();
391                 }
392                 return true;
393         };
394
395         // a plain, dumb button
396         qt.Button = function(id, display, access, title, instance) {
397                 var t = this;
398                 t.id = id;
399                 t.display = display;
400                 t.access = access;
401                 t.title = title || '';
402                 t.instance = instance || '';
403         };
404         qt.Button.prototype.html = function(idPrefix) {
405                 var access = this.access ? ' accesskey="' + this.access + '"' : '';
406                 return '<input type="button" id="' + idPrefix + this.id + '"' + access + ' class="ed_button" title="' + this.title + '" value="' + this.display + '" />';
407         };
408         qt.Button.prototype.callback = function(){};
409
410         // a button that inserts HTML tag
411         qt.TagButton = function(id, display, tagStart, tagEnd, access, title, instance) {
412                 var t = this;
413                 qt.Button.call(t, id, display, access, title, instance);
414                 t.tagStart = tagStart;
415                 t.tagEnd = tagEnd;
416         };
417         qt.TagButton.prototype = new qt.Button();
418         qt.TagButton.prototype.openTag = function(e, ed) {
419                 var t = this;
420
421                 if ( ! ed.openTags ) {
422                         ed.openTags = [];
423                 }
424                 if ( t.tagEnd ) {
425                         ed.openTags.push(t.id);
426                         e.value = '/' + e.value;
427                 }
428         };
429         qt.TagButton.prototype.closeTag = function(e, ed) {
430                 var t = this, i = t.isOpen(ed);
431
432                 if ( i !== false ) {
433                         ed.openTags.splice(i, 1);
434                 }
435
436                 e.value = t.display;
437         };
438         // whether a tag is open or not. Returns false if not open, or current open depth of the tag
439         qt.TagButton.prototype.isOpen = function (ed) {
440                 var t = this, i = 0, ret = false;
441                 if ( ed.openTags ) {
442                         while ( ret === false && i < ed.openTags.length ) {
443                                 ret = ed.openTags[i] === t.id ? i : false;
444                                 i ++;
445                         }
446                 } else {
447                         ret = false;
448                 }
449                 return ret;
450         };
451         qt.TagButton.prototype.callback = function(element, canvas, ed) {
452                 var t = this, startPos, endPos, cursorPos, scrollTop, v = canvas.value, l, r, i, sel, endTag = v ? t.tagEnd : '';
453
454                 if ( document.selection ) { // IE
455                         canvas.focus();
456                         sel = document.selection.createRange();
457                         if ( sel.text.length > 0 ) {
458                                 if ( !t.tagEnd ) {
459                                         sel.text = sel.text + t.tagStart;
460                                 } else {
461                                         sel.text = t.tagStart + sel.text + endTag;
462                                 }
463                         } else {
464                                 if ( !t.tagEnd ) {
465                                         sel.text = t.tagStart;
466                                 } else if ( t.isOpen(ed) === false ) {
467                                         sel.text = t.tagStart;
468                                         t.openTag(element, ed);
469                                 } else {
470                                         sel.text = endTag;
471                                         t.closeTag(element, ed);
472                                 }
473                         }
474                         canvas.focus();
475                 } else if ( canvas.selectionStart || canvas.selectionStart === 0 ) { // FF, WebKit, Opera
476                         startPos = canvas.selectionStart;
477                         endPos = canvas.selectionEnd;
478                         cursorPos = endPos;
479                         scrollTop = canvas.scrollTop;
480                         l = v.substring(0, startPos); // left of the selection
481                         r = v.substring(endPos, v.length); // right of the selection
482                         i = v.substring(startPos, endPos); // inside the selection
483                         if ( startPos !== endPos ) {
484                                 if ( !t.tagEnd ) {
485                                         canvas.value = l + i + t.tagStart + r; // insert self closing tags after the selection
486                                         cursorPos += t.tagStart.length;
487                                 } else {
488                                         canvas.value = l + t.tagStart + i + endTag + r;
489                                         cursorPos += t.tagStart.length + endTag.length;
490                                 }
491                         } else {
492                                 if ( !t.tagEnd ) {
493                                         canvas.value = l + t.tagStart + r;
494                                         cursorPos = startPos + t.tagStart.length;
495                                 } else if ( t.isOpen(ed) === false ) {
496                                         canvas.value = l + t.tagStart + r;
497                                         t.openTag(element, ed);
498                                         cursorPos = startPos + t.tagStart.length;
499                                 } else {
500                                         canvas.value = l + endTag + r;
501                                         cursorPos = startPos + endTag.length;
502                                         t.closeTag(element, ed);
503                                 }
504                         }
505
506                         canvas.focus();
507                         canvas.selectionStart = cursorPos;
508                         canvas.selectionEnd = cursorPos;
509                         canvas.scrollTop = scrollTop;
510                 } else { // other browsers?
511                         if ( !endTag ) {
512                                 canvas.value += t.tagStart;
513                         } else if ( t.isOpen(ed) !== false ) {
514                                 canvas.value += t.tagStart;
515                                 t.openTag(element, ed);
516                         } else {
517                                 canvas.value += endTag;
518                                 t.closeTag(element, ed);
519                         }
520                         canvas.focus();
521                 }
522         };
523
524         // removed
525         qt.SpellButton = function() {};
526
527         // the close tags button
528         qt.CloseButton = function() {
529                 qt.Button.call(this, 'close', quicktagsL10n.closeTags, '', quicktagsL10n.closeAllOpenTags);
530         };
531
532         qt.CloseButton.prototype = new qt.Button();
533
534         qt._close = function(e, c, ed) {
535                 var button, element, tbo = ed.openTags;
536
537                 if ( tbo ) {
538                         while ( tbo.length > 0 ) {
539                                 button = ed.getButton(tbo[tbo.length - 1]);
540                                 element = document.getElementById(ed.name + '_' + button.id);
541
542                                 if ( e ) {
543                                         button.callback.call(button, element, c, ed);
544                                 } else {
545                                         button.closeTag(element, ed);
546                                 }
547                         }
548                 }
549         };
550
551         qt.CloseButton.prototype.callback = qt._close;
552
553         qt.closeAllTags = function(editor_id) {
554                 var ed = this.getInstance(editor_id);
555                 qt._close('', ed.canvas, ed);
556         };
557
558         // the link button
559         qt.LinkButton = function() {
560                 qt.TagButton.call(this, 'link', 'link', '', '</a>', 'a');
561         };
562         qt.LinkButton.prototype = new qt.TagButton();
563         qt.LinkButton.prototype.callback = function(e, c, ed, defaultValue) {
564                 var URL, t = this;
565
566                 if ( typeof(wpLink) !== 'undefined' ) {
567                         wpLink.open();
568                         return;
569                 }
570
571                 if ( ! defaultValue ) {
572                         defaultValue = 'http://';
573                 }
574
575                 if ( t.isOpen(ed) === false ) {
576                         URL = prompt(quicktagsL10n.enterURL, defaultValue);
577                         if ( URL ) {
578                                 t.tagStart = '<a href="' + URL + '">';
579                                 qt.TagButton.prototype.callback.call(t, e, c, ed);
580                         }
581                 } else {
582                         qt.TagButton.prototype.callback.call(t, e, c, ed);
583                 }
584         };
585
586         // the img button
587         qt.ImgButton = function() {
588                 qt.TagButton.call(this, 'img', 'img', '', '', 'm');
589         };
590         qt.ImgButton.prototype = new qt.TagButton();
591         qt.ImgButton.prototype.callback = function(e, c, ed, defaultValue) {
592                 if ( ! defaultValue ) {
593                         defaultValue = 'http://';
594                 }
595                 var src = prompt(quicktagsL10n.enterImageURL, defaultValue), alt;
596                 if ( src ) {
597                         alt = prompt(quicktagsL10n.enterImageDescription, '');
598                         this.tagStart = '<img src="' + src + '" alt="' + alt + '" />';
599                         qt.TagButton.prototype.callback.call(this, e, c, ed);
600                 }
601         };
602
603         qt.FullscreenButton = function() {
604                 qt.Button.call(this, 'fullscreen', quicktagsL10n.fullscreen, 'f', quicktagsL10n.toggleFullscreen);
605         };
606         qt.FullscreenButton.prototype = new qt.Button();
607         qt.FullscreenButton.prototype.callback = function(e, c) {
608                 if ( !c.id || typeof(fullscreen) === 'undefined' ) {
609                         return;
610                 }
611
612                 fullscreen.on();
613         };
614
615         qt.TextDirectionButton = function() {
616                 qt.Button.call(this, 'textdirection', quicktagsL10n.textdirection, '', quicktagsL10n.toggleTextdirection);
617         };
618         qt.TextDirectionButton.prototype = new qt.Button();
619         qt.TextDirectionButton.prototype.callback = function(e, c) {
620                 var isRTL = ( 'rtl' === document.getElementsByTagName('html')[0].dir ),
621                         currentDirection = c.style.direction;
622
623                 if ( ! currentDirection ) {
624                         currentDirection = ( isRTL ) ? 'rtl' : 'ltr';
625                 }
626
627                 c.style.direction = ( 'rtl' === currentDirection ) ? 'ltr' : 'rtl';
628                 c.focus();
629         };
630
631         // ensure backward compatibility
632         edButtons[10] = new qt.TagButton('strong','b','<strong>','</strong>','b');
633         edButtons[20] = new qt.TagButton('em','i','<em>','</em>','i'),
634         edButtons[30] = new qt.LinkButton(), // special case
635         edButtons[40] = new qt.TagButton('block','b-quote','\n\n<blockquote>','</blockquote>\n\n','q'),
636         edButtons[50] = new qt.TagButton('del','del','<del datetime="' + _datetime + '">','</del>','d'),
637         edButtons[60] = new qt.TagButton('ins','ins','<ins datetime="' + _datetime + '">','</ins>','s'),
638         edButtons[70] = new qt.ImgButton(), // special case
639         edButtons[80] = new qt.TagButton('ul','ul','<ul>\n','</ul>\n\n','u'),
640         edButtons[90] = new qt.TagButton('ol','ol','<ol>\n','</ol>\n\n','o'),
641         edButtons[100] = new qt.TagButton('li','li','\t<li>','</li>\n','l'),
642         edButtons[110] = new qt.TagButton('code','code','<code>','</code>','c'),
643         edButtons[120] = new qt.TagButton('more','more','<!--more-->','','t'),
644         edButtons[140] = new qt.CloseButton();
645
646 })();