+/* global adminpage, wpActiveEditor, quicktagsL10n, wpLink, prompt */
/*
* Quicktags
*
// by Alex King
// http://www.alexking.org/
-var QTags, edButtons = [], edCanvas,
+var QTags, edCanvas,
+ edButtons = [];
+
+/* jshint ignore:start */
/**
* Back-compat
*
* Define all former global functions so plugins that hack quicktags.js directly don't cause fatal errors.
*/
-edAddTag = function(){},
+var edAddTag = function(){},
edCheckOpenTags = function(){},
edCloseAllTags = function(){},
edInsertImage = function(){},
* Added for back compatibility, use QTags.addButton() as it gives more flexibility like type of button, button placement, etc.
* @see QTags.addButton()
*/
-function edButton(id, display, tagStart, tagEnd, access, open) {
+function edButton(id, display, tagStart, tagEnd, access) {
return QTags.addButton( id, display, tagStart, tagEnd, access, '', -1 );
}
+/* jshint ignore:end */
+
(function(){
// private stuff is prefixed with an underscore
var _domReady = function(func) {
- var t, i, DOMContentLoaded;
+ var t, i, DOMContentLoaded, _tryReady;
- if ( typeof jQuery != 'undefined' ) {
+ if ( typeof jQuery !== 'undefined' ) {
jQuery(document).ready(func);
} else {
t = _domReady;
document.attachEvent('onreadystatechange', DOMContentLoaded);
window.attachEvent('onload', t.ready);
- (function(){
+ _tryReady = function() {
try {
- document.documentElement.doScroll("left");
+ document.documentElement.doScroll('left');
} catch(e) {
- setTimeout(arguments.callee, 50);
+ setTimeout(_tryReady, 50);
return;
}
t.ready();
- })();
+ };
+ _tryReady();
}
t.eventAttached = true;
zeroise = function(number) {
var str = number.toString();
- if ( str.length < 2 )
- str = "0" + str;
+ if ( str.length < 2 ) {
+ str = '0' + str;
+ }
return str;
- }
+ };
return now.getUTCFullYear() + '-' +
zeroise( now.getUTCMonth() + 1 ) + '-' +
qt;
qt = QTags = function(settings) {
- if ( typeof(settings) == 'string' )
+ if ( typeof(settings) === 'string' ) {
settings = {id: settings};
- else if ( typeof(settings) != 'object' )
+ } else if ( typeof(settings) !== 'object' ) {
return false;
+ }
var t = this,
id = settings.id,
canvas = document.getElementById(id),
name = 'qt_' + id,
- tb, onclick, toolbar_id;
+ tb, onclick, toolbar_id, wrap, setActiveEditor;
- if ( !id || !canvas )
+ if ( !id || !canvas ) {
return false;
+ }
t.name = name;
t.id = id;
t.canvas = canvas;
t.settings = settings;
- if ( id == 'content' && typeof(adminpage) == 'string' && ( adminpage == 'post-new-php' || adminpage == 'post-php' ) ) {
+ if ( id === 'content' && typeof(adminpage) === 'string' && ( adminpage === 'post-new-php' || adminpage === 'post-php' ) ) {
// back compat hack :-(
edCanvas = canvas;
toolbar_id = 'ed_toolbar';
toolbar_id = name + '_toolbar';
}
- tb = document.createElement('div');
- tb.id = toolbar_id;
- tb.className = 'quicktags-toolbar';
+ tb = document.getElementById( toolbar_id );
+
+ if ( ! tb ) {
+ tb = document.createElement('div');
+ tb.id = toolbar_id;
+ tb.className = 'quicktags-toolbar';
+ }
canvas.parentNode.insertBefore(tb, canvas);
t.toolbar = tb;
var target = e.target || e.srcElement, visible = target.clientWidth || target.offsetWidth, i;
// don't call the callback on pressing the accesskey when the button is not visible
- if ( !visible )
+ if ( !visible ) {
return;
+ }
// as long as it has the class ed_button, execute the callback
if ( / ed_button /.test(' ' + target.className + ' ') ) {
t.canvas = canvas = document.getElementById(id);
i = target.id.replace(name + '_', '');
- if ( t.theButtons[i] )
+ if ( t.theButtons[i] ) {
t.theButtons[i].callback.call(t.theButtons[i], target, canvas, t);
+ }
}
};
+ setActiveEditor = function() {
+ window.wpActiveEditor = id;
+ };
+
+ wrap = document.getElementById( 'wp-' + id + '-wrap' );
+
if ( tb.addEventListener ) {
- tb.addEventListener('click', onclick, false);
+ tb.addEventListener( 'click', onclick, false );
+
+ if ( wrap ) {
+ wrap.addEventListener( 'click', setActiveEditor, false );
+ }
} else if ( tb.attachEvent ) {
- tb.attachEvent('onclick', onclick);
+ tb.attachEvent( 'onclick', onclick );
+
+ if ( wrap ) {
+ wrap.attachEvent( 'onclick', setActiveEditor );
+ }
}
t.getButton = function(id) {
qt.instances[id] = t;
- if ( !qt.instances[0] ) {
- qt.instances[0] = qt.instances[id];
+ if ( ! qt.instances['0'] ) {
+ qt.instances['0'] = qt.instances[id];
_domReady( function(){ qt._buttonsInit(); } );
}
};
+ function _escape( text ) {
+ text = text || '';
+ text = text.replace( /&([^#])(?![a-z1-4]{1,8};)/gi, '&$1' );
+ return text.replace( /</g, '<' ).replace( />/g, '>' ).replace( /"/g, '"' ).replace( /'/g, ''' );
+ }
+
qt.instances = {};
qt.getInstance = function(id) {
defaults = ',strong,em,link,block,del,ins,img,ul,ol,li,code,more,close,';
for ( inst in t.instances ) {
- if ( inst == 0 )
+ if ( '0' === inst ) {
continue;
+ }
ed = t.instances[inst];
canvas = ed.canvas;
use = '';
// set buttons
- if ( settings.buttons )
+ if ( settings.buttons ) {
use = ','+settings.buttons+',';
+ }
for ( i in edButtons ) {
- if ( !edButtons[i] )
+ if ( !edButtons[i] ) {
continue;
+ }
id = edButtons[i].id;
- if ( use && defaults.indexOf(','+id+',') != -1 && use.indexOf(','+id+',') == -1 )
+ if ( use && defaults.indexOf( ',' + id + ',' ) !== -1 && use.indexOf( ',' + id + ',' ) === -1 ) {
continue;
+ }
- if ( !edButtons[i].instance || edButtons[i].instance == inst ) {
+ if ( !edButtons[i].instance || edButtons[i].instance === inst ) {
theButtons[id] = edButtons[i];
- if ( edButtons[i].html )
+ if ( edButtons[i].html ) {
html += edButtons[i].html(name + '_');
+ }
}
}
- if ( use && use.indexOf(',fullscreen,') != -1 ) {
- theButtons['fullscreen'] = new qt.FullscreenButton();
- html += theButtons['fullscreen'].html(name + '_');
+ if ( use && use.indexOf(',dfw,') !== -1 ) {
+ theButtons.dfw = new qt.DFWButton();
+ html += theButtons.dfw.html( name + '_' );
}
-
- if ( 'rtl' == document.getElementsByTagName('html')[0].dir ) {
- theButtons['textdirection'] = new qt.TextDirectionButton();
- html += theButtons['textdirection'].html(name + '_');
+ if ( 'rtl' === document.getElementsByTagName('html')[0].dir ) {
+ theButtons.textdirection = new qt.TextDirectionButton();
+ html += theButtons.textdirection.html(name + '_');
}
ed.toolbar.innerHTML = html;
ed.theButtons = theButtons;
+
+ if ( typeof jQuery !== 'undefined' ) {
+ jQuery( document ).triggerHandler( 'quicktags-init', [ ed ] );
+ }
}
t.buttonsInitDone = true;
};
* @param string display Required. Button's value="..."
* @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.
* @param string arg2 Optional. Ending tag like "</span>"
- * @param string access_key Optional. Access key for the button.
+ * @param string access_key Deprecated Not used
* @param string title Optional. Button's title="..."
* @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.
- * @param string instance Optional. Limit the button to a specifric instance of Quicktags, add to all instances if not present.
+ * @param string instance Optional. Limit the button to a specific instance of Quicktags, add to all instances if not present.
+ * @param attr object Optional. Used to pass additional attributes. Currently supports `ariaLabel` and `ariaLabelClose` (for "close tag" state)
* @return mixed null or the button object that is needed for back-compat.
*/
- qt.addButton = function( id, display, arg1, arg2, access_key, title, priority, instance ) {
+ qt.addButton = function( id, display, arg1, arg2, access_key, title, priority, instance, attr ) {
var btn;
- if ( !id || !display )
+ if ( !id || !display ) {
return;
+ }
priority = priority || 0;
arg2 = arg2 || '';
+ attr = attr || {};
if ( typeof(arg1) === 'function' ) {
- btn = new qt.Button(id, display, access_key, title, instance);
+ btn = new qt.Button( id, display, access_key, title, instance, attr );
btn.callback = arg1;
} else if ( typeof(arg1) === 'string' ) {
- btn = new qt.TagButton(id, display, arg1, arg2, access_key, title, instance);
+ btn = new qt.TagButton( id, display, arg1, arg2, access_key, title, instance, attr );
} else {
return;
}
- if ( priority == -1 ) // back-compat
+ if ( priority === -1 ) { // back-compat
return btn;
+ }
if ( priority > 0 ) {
- while ( typeof(edButtons[priority]) != 'undefined' ) {
- priority++
+ while ( typeof(edButtons[priority]) !== 'undefined' ) {
+ priority++;
}
edButtons[priority] = btn;
edButtons[edButtons.length] = btn;
}
- if ( this.buttonsInitDone )
+ if ( this.buttonsInitDone ) {
this._buttonsInit(); // add the button HTML to all instances toolbars if addButton() was called too late
+ }
};
qt.insertContent = function(content) {
var sel, startPos, endPos, scrollTop, text, canvas = document.getElementById(wpActiveEditor);
- if ( !canvas )
+ if ( !canvas ) {
return false;
+ }
if ( document.selection ) { //IE
canvas.focus();
sel = document.selection.createRange();
sel.text = content;
canvas.focus();
- } else if ( canvas.selectionStart || canvas.selectionStart == '0' ) { // FF, WebKit, Opera
+ } else if ( canvas.selectionStart || canvas.selectionStart === 0 ) { // FF, WebKit, Opera
text = canvas.value;
startPos = canvas.selectionStart;
endPos = canvas.selectionEnd;
canvas.value = text.substring(0, startPos) + content + text.substring(endPos, text.length);
- canvas.focus();
canvas.selectionStart = startPos + content.length;
canvas.selectionEnd = startPos + content.length;
canvas.scrollTop = scrollTop;
+ canvas.focus();
} else {
canvas.value += content;
canvas.focus();
};
// a plain, dumb button
- qt.Button = function(id, display, access, title, instance) {
- var t = this;
- t.id = id;
- t.display = display;
- t.access = access;
- t.title = title || '';
- t.instance = instance || '';
+ qt.Button = function( id, display, access, title, instance, attr ) {
+ this.id = id;
+ this.display = display;
+ this.access = '';
+ this.title = title || '';
+ this.instance = instance || '';
+ this.attr = attr || {};
};
qt.Button.prototype.html = function(idPrefix) {
- var access = this.access ? ' accesskey="' + this.access + '"' : '';
- return '<input type="button" id="' + idPrefix + this.id + '"' + access + ' class="ed_button" title="' + this.title + '" value="' + this.display + '" />';
+ var active, on, wp,
+ title = this.title ? ' title="' + _escape( this.title ) + '"' : '',
+ ariaLabel = this.attr && this.attr.ariaLabel ? ' aria-label="' + _escape( this.attr.ariaLabel ) + '"' : '',
+ val = this.display ? ' value="' + _escape( this.display ) + '"' : '',
+ id = this.id ? ' id="' + _escape( idPrefix + this.id ) + '"' : '',
+ dfw = ( wp = window.wp ) && wp.editor && wp.editor.dfw;
+
+ if ( this.id === 'fullscreen' ) {
+ return '<button type="button"' + id + ' class="ed_button qt-dfw qt-fullscreen"' + title + ariaLabel + '></button>';
+ } else if ( this.id === 'dfw' ) {
+ active = dfw && dfw.isActive() ? '' : ' disabled="disabled"';
+ on = dfw && dfw.isOn() ? ' active' : '';
+
+ return '<button type="button"' + id + ' class="ed_button qt-dfw' + on + '"' + title + ariaLabel + active + '></button>';
+ }
+
+ return '<input type="button"' + id + ' class="ed_button button button-small"' + title + ariaLabel + val + ' />';
};
qt.Button.prototype.callback = function(){};
// a button that inserts HTML tag
- qt.TagButton = function(id, display, tagStart, tagEnd, access, title, instance) {
+ qt.TagButton = function( id, display, tagStart, tagEnd, access, title, instance, attr ) {
var t = this;
- qt.Button.call(t, id, display, access, title, instance);
+ qt.Button.call( t, id, display, access, title, instance, attr );
t.tagStart = tagStart;
t.tagEnd = tagEnd;
};
qt.TagButton.prototype = new qt.Button();
- qt.TagButton.prototype.openTag = function(e, ed) {
- var t = this;
-
+ qt.TagButton.prototype.openTag = function( element, ed ) {
if ( ! ed.openTags ) {
ed.openTags = [];
}
- if ( t.tagEnd ) {
- ed.openTags.push(t.id);
- e.value = '/' + e.value;
+
+ if ( this.tagEnd ) {
+ ed.openTags.push( this.id );
+ element.value = '/' + element.value;
+
+ if ( this.attr.ariaLabelClose ) {
+ element.setAttribute( 'aria-label', this.attr.ariaLabelClose );
+ }
}
};
- qt.TagButton.prototype.closeTag = function(e, ed) {
- var t = this, i = t.isOpen(ed);
+ qt.TagButton.prototype.closeTag = function( element, ed ) {
+ var i = this.isOpen(ed);
if ( i !== false ) {
- ed.openTags.splice(i, 1);
+ ed.openTags.splice( i, 1 );
}
- e.value = t.display;
+ element.value = this.display;
+
+ if ( this.attr.ariaLabel ) {
+ element.setAttribute( 'aria-label', this.attr.ariaLabel );
+ }
};
// whether a tag is open or not. Returns false if not open, or current open depth of the tag
qt.TagButton.prototype.isOpen = function (ed) {
var t = this, i = 0, ret = false;
if ( ed.openTags ) {
while ( ret === false && i < ed.openTags.length ) {
- ret = ed.openTags[i] == t.id ? i : false;
+ ret = ed.openTags[i] === t.id ? i : false;
i ++;
}
} else {
canvas.focus();
sel = document.selection.createRange();
if ( sel.text.length > 0 ) {
- if ( !t.tagEnd )
+ if ( !t.tagEnd ) {
sel.text = sel.text + t.tagStart;
- else
+ } else {
sel.text = t.tagStart + sel.text + endTag;
+ }
} else {
if ( !t.tagEnd ) {
sel.text = t.tagStart;
}
}
canvas.focus();
- } else if ( canvas.selectionStart || canvas.selectionStart == '0' ) { // FF, WebKit, Opera
+ } else if ( canvas.selectionStart || canvas.selectionStart === 0 ) { // FF, WebKit, Opera
startPos = canvas.selectionStart;
endPos = canvas.selectionEnd;
cursorPos = endPos;
l = v.substring(0, startPos); // left of the selection
r = v.substring(endPos, v.length); // right of the selection
i = v.substring(startPos, endPos); // inside the selection
- if ( startPos != endPos ) {
+ if ( startPos !== endPos ) {
if ( !t.tagEnd ) {
canvas.value = l + i + t.tagStart + r; // insert self closing tags after the selection
cursorPos += t.tagStart.length;
}
}
- canvas.focus();
canvas.selectionStart = cursorPos;
canvas.selectionEnd = cursorPos;
canvas.scrollTop = scrollTop;
+ canvas.focus();
} else { // other browsers?
if ( !endTag ) {
canvas.value += t.tagStart;
// the close tags button
qt.CloseButton = function() {
- qt.Button.call(this, 'close', quicktagsL10n.closeTags, '', quicktagsL10n.closeAllOpenTags);
+ qt.Button.call( this, 'close', quicktagsL10n.closeTags, '', quicktagsL10n.closeAllOpenTags );
};
qt.CloseButton.prototype = new qt.Button();
button = ed.getButton(tbo[tbo.length - 1]);
element = document.getElementById(ed.name + '_' + button.id);
- if ( e )
+ if ( e ) {
button.callback.call(button, element, c, ed);
- else
+ } else {
button.closeTag(element, ed);
+ }
}
}
};
// the link button
qt.LinkButton = function() {
- qt.TagButton.call(this, 'link', 'link', '', '</a>', 'a');
+ var attr = {
+ ariaLabel: quicktagsL10n.link
+ };
+
+ qt.TagButton.call( this, 'link', 'link', '', '</a>', '', '', '', attr );
};
qt.LinkButton.prototype = new qt.TagButton();
qt.LinkButton.prototype.callback = function(e, c, ed, defaultValue) {
var URL, t = this;
- if ( typeof(wpLink) != 'undefined' ) {
- wpLink.open();
+ if ( typeof wpLink !== 'undefined' ) {
+ wpLink.open( ed.id );
return;
}
- if ( ! defaultValue )
+ if ( ! defaultValue ) {
defaultValue = 'http://';
+ }
if ( t.isOpen(ed) === false ) {
- URL = prompt(quicktagsL10n.enterURL, defaultValue);
+ URL = prompt( quicktagsL10n.enterURL, defaultValue );
if ( URL ) {
t.tagStart = '<a href="' + URL + '">';
qt.TagButton.prototype.callback.call(t, e, c, ed);
// the img button
qt.ImgButton = function() {
- qt.TagButton.call(this, 'img', 'img', '', '', 'm');
+ var attr = {
+ ariaLabel: quicktagsL10n.image
+ };
+
+ qt.TagButton.call( this, 'img', 'img', '', '', '', '', '', attr );
};
qt.ImgButton.prototype = new qt.TagButton();
qt.ImgButton.prototype.callback = function(e, c, ed, defaultValue) {
}
};
- qt.FullscreenButton = function() {
- qt.Button.call(this, 'fullscreen', quicktagsL10n.fullscreen, 'f', quicktagsL10n.toggleFullscreen);
+ qt.DFWButton = function() {
+ qt.Button.call( this, 'dfw', '', 'f', quicktagsL10n.dfw );
};
- qt.FullscreenButton.prototype = new qt.Button();
- qt.FullscreenButton.prototype.callback = function(e, c) {
- if ( !c.id || typeof(fullscreen) == 'undefined' )
+ qt.DFWButton.prototype = new qt.Button();
+ qt.DFWButton.prototype.callback = function() {
+ var wp;
+
+ if ( ! ( wp = window.wp ) || ! wp.editor || ! wp.editor.dfw ) {
return;
+ }
- fullscreen.on();
+ window.wp.editor.dfw.toggle();
};
qt.TextDirectionButton = function() {
- qt.Button.call(this, 'textdirection', quicktagsL10n.textdirection, '', quicktagsL10n.toggleTextdirection)
+ qt.Button.call( this, 'textdirection', quicktagsL10n.textdirection, '', quicktagsL10n.toggleTextdirection );
};
qt.TextDirectionButton.prototype = new qt.Button();
qt.TextDirectionButton.prototype.callback = function(e, c) {
- var isRTL = ( 'rtl' == document.getElementsByTagName('html')[0].dir ),
+ var isRTL = ( 'rtl' === document.getElementsByTagName('html')[0].dir ),
currentDirection = c.style.direction;
- if ( ! currentDirection )
+ if ( ! currentDirection ) {
currentDirection = ( isRTL ) ? 'rtl' : 'ltr';
+ }
- c.style.direction = ( 'rtl' == currentDirection ) ? 'ltr' : 'rtl';
+ c.style.direction = ( 'rtl' === currentDirection ) ? 'ltr' : 'rtl';
c.focus();
- }
+ };
// ensure backward compatibility
- edButtons[10] = new qt.TagButton('strong','b','<strong>','</strong>','b');
- edButtons[20] = new qt.TagButton('em','i','<em>','</em>','i'),
- edButtons[30] = new qt.LinkButton(), // special case
- edButtons[40] = new qt.TagButton('block','b-quote','\n\n<blockquote>','</blockquote>\n\n','q'),
- edButtons[50] = new qt.TagButton('del','del','<del datetime="' + _datetime + '">','</del>','d'),
- edButtons[60] = new qt.TagButton('ins','ins','<ins datetime="' + _datetime + '">','</ins>','s'),
- edButtons[70] = new qt.ImgButton(), // special case
- edButtons[80] = new qt.TagButton('ul','ul','<ul>\n','</ul>\n\n','u'),
- edButtons[90] = new qt.TagButton('ol','ol','<ol>\n','</ol>\n\n','o'),
- edButtons[100] = new qt.TagButton('li','li','\t<li>','</li>\n','l'),
- edButtons[110] = new qt.TagButton('code','code','<code>','</code>','c'),
- edButtons[120] = new qt.TagButton('more','more','<!--more-->','','t'),
- edButtons[140] = new qt.CloseButton()
+ edButtons[10] = new qt.TagButton( 'strong', 'b', '<strong>', '</strong>', '', '', '', { ariaLabel: quicktagsL10n.strong, ariaLabelClose: quicktagsL10n.strongClose } );
+ edButtons[20] = new qt.TagButton( 'em', 'i', '<em>', '</em>', '', '', '', { ariaLabel: quicktagsL10n.em, ariaLabelClose: quicktagsL10n.emClose } );
+ edButtons[30] = new qt.LinkButton(); // special case
+ edButtons[40] = new qt.TagButton( 'block', 'b-quote', '\n\n<blockquote>', '</blockquote>\n\n', '', '', '', { ariaLabel: quicktagsL10n.blockquote, ariaLabelClose: quicktagsL10n.blockquoteClose } );
+ edButtons[50] = new qt.TagButton( 'del', 'del', '<del datetime="' + _datetime + '">', '</del>', '', '', '', { ariaLabel: quicktagsL10n.del, ariaLabelClose: quicktagsL10n.delClose } );
+ edButtons[60] = new qt.TagButton( 'ins', 'ins', '<ins datetime="' + _datetime + '">', '</ins>', '', '', '', { ariaLabel: quicktagsL10n.ins, ariaLabelClose: quicktagsL10n.insClose } );
+ edButtons[70] = new qt.ImgButton(); // special case
+ edButtons[80] = new qt.TagButton( 'ul', 'ul', '<ul>\n', '</ul>\n\n', '', '', '', { ariaLabel: quicktagsL10n.ul, ariaLabelClose: quicktagsL10n.ulClose } );
+ edButtons[90] = new qt.TagButton( 'ol', 'ol', '<ol>\n', '</ol>\n\n', '', '', '', { ariaLabel: quicktagsL10n.ol, ariaLabelClose: quicktagsL10n.olClose } );
+ edButtons[100] = new qt.TagButton( 'li', 'li', '\t<li>', '</li>\n', '', '', '', { ariaLabel: quicktagsL10n.li, ariaLabelClose: quicktagsL10n.liClose } );
+ edButtons[110] = new qt.TagButton( 'code', 'code', '<code>', '</code>', '', '', '', { ariaLabel: quicktagsL10n.code, ariaLabelClose: quicktagsL10n.codeClose } );
+ edButtons[120] = new qt.TagButton( 'more', 'more', '<!--more-->\n\n', '', '', '', '', { ariaLabel: quicktagsL10n.more } );
+ edButtons[140] = new qt.CloseButton();
})();