id = settings.id,
canvas = document.getElementById(id),
name = 'qt_' + id,
- tb, onclick, toolbar_id;
+ tb, onclick, toolbar_id, wrap, setActiveEditor;
if ( !id || !canvas ) {
return false;
toolbar_id = name + '_toolbar';
}
- tb = document.createElement('div');
- tb.id = toolbar_id;
- tb.className = 'quicktags-toolbar';
- tb.onclick = function() {
- window.wpActiveEditor = id;
- };
+ 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;
}
};
+ 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) {
}
};
+ 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) {
}
}
- 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 + '_' );
* @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 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 ) {
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;
}
};
// a plain, dumb button
- qt.Button = function(id, display, access, title, instance) {
- var t = this;
- t.id = id;
- t.display = display;
- t.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 title = this.title ? ' title="' + this.title + '"' : '',
- active, on, wp,
+ 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="' + idPrefix + this.id + '" class="ed_button qt-dfw qt-fullscreen"' + title + '></button>';
+ 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="' + idPrefix + this.id + '" class="ed_button qt-dfw' + on + '"' + title + active + '></button>';
+ return '<button type="button"' + id + ' class="ed_button qt-dfw' + on + '"' + title + ariaLabel + active + '></button>';
}
- return '<input type="button" id="' + idPrefix + this.id + '" class="ed_button button button-small"' + title + ' value="' + this.display + '" />';
+ 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) {
// 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();
// the link button
qt.LinkButton = function() {
- qt.TagButton.call(this, 'link', 'link', '', '</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) {
}
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', '', '');
+ 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.FullscreenButton.prototype = new qt.Button();
- qt.FullscreenButton.prototype.callback = function(e, c) {
- if ( ! c.id || typeof wp === 'undefined' || ! wp.editor || ! wp.editor.fullscreen ) {
- return;
- }
-
- wp.editor.fullscreen.on();
- };
-
qt.DFWButton = function() {
qt.Button.call( this, 'dfw', '', 'f', quicktagsL10n.dfw );
};
};
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) {
};
// ensure backward compatibility
- edButtons[10] = new qt.TagButton('strong','b','<strong>','</strong>');
- edButtons[20] = new qt.TagButton('em','i','<em>','</em>'),
- edButtons[30] = new qt.LinkButton(), // special case
- edButtons[40] = new qt.TagButton('block','b-quote','\n\n<blockquote>','</blockquote>\n\n'),
- edButtons[50] = new qt.TagButton('del','del','<del datetime="' + _datetime + '">','</del>'),
- edButtons[60] = new qt.TagButton('ins','ins','<ins datetime="' + _datetime + '">','</ins>'),
- edButtons[70] = new qt.ImgButton(), // special case
- edButtons[80] = new qt.TagButton('ul','ul','<ul>\n','</ul>\n\n'),
- edButtons[90] = new qt.TagButton('ol','ol','<ol>\n','</ol>\n\n'),
- edButtons[100] = new qt.TagButton('li','li','\t<li>','</li>\n'),
- edButtons[110] = new qt.TagButton('code','code','<code>','</code>'),
- edButtons[120] = new qt.TagButton('more','more','<!--more-->\n\n',''),
+ 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();
})();