exec-command-debug.js revision 0849f3ba6df9f9aaf5677409f2b00d9f2ad9af32
5852N/AYUI.add('exec-command', function(Y) {
5852N/A
5852N/A
5852N/A /**
5852N/A * Plugin for the frame module to handle execCommands for Editor
5852N/A * @module editor
5852N/A * @submodule exec-command
5852N/A */
5852N/A /**
5852N/A * Plugin for the frame module to handle execCommands for Editor
5852N/A * @class Plugin.ExecCommand
5852N/A * @extends Base
5852N/A * @constructor
5852N/A */
5852N/A var ExecCommand = function() {
5852N/A ExecCommand.superclass.constructor.apply(this, arguments);
5852N/A };
5852N/A
5852N/A Y.extend(ExecCommand, Y.Base, {
5852N/A /**
5852N/A * An internal reference to the keyCode of the last key that was pressed.
5852N/A * @private
5852N/A * @property _lastKey
5852N/A */
5852N/A _lastKey: null,
5852N/A /**
5852N/A * An internal reference to the instance of the frame plugged into.
5852N/A * @private
5852N/A * @property _inst
5852N/A */
5852N/A _inst: null,
5852N/A /**
5852N/A * Execute a command on the frame's document.
5852N/A * @method command
5852N/A * @param {String} action The action to perform (bold, italic, fontname)
5852N/A * @param {String} value The optional value (helvetica)
5852N/A * @return {Node/NodeList} Should return the Node/Nodelist affected
5852N/A */
5852N/A command: function(action, value) {
5852N/A var fn = ExecCommand.COMMANDS[action];
5852N/A
5852N/A Y.log('execCommand(' + action + '): "' + value + '"', 'info', 'exec-command');
5852N/A if (fn) {
5852N/A return fn.call(this, action, value);
5852N/A } else {
5852N/A return this._command(action, value);
5852N/A }
5852N/A },
5852N/A /**
5852N/A * The private version of execCommand that doesn't filter for overrides.
5852N/A * @private
5852N/A * @method _command
5852N/A * @param {String} action The action to perform (bold, italic, fontname)
5852N/A * @param {String} value The optional value (helvetica)
5852N/A */
5852N/A _command: function(action, value) {
5852N/A var inst = this.getInstance();
5852N/A try {
5852N/A try {
5852N/A inst.config.doc.execCommand('styleWithCSS', null, 1);
5852N/A } catch (e1) {
5852N/A try {
5852N/A inst.config.doc.execCommand('useCSS', null, 0);
5852N/A } catch (e2) {
5852N/A }
5852N/A }
5852N/A Y.log('Internal execCommand(' + action + '): "' + value + '"', 'info', 'exec-command');
5852N/A inst.config.doc.execCommand(action, null, value);
5852N/A } catch (e) {
5852N/A Y.log(e.message, 'error', 'exec-command');
5852N/A }
5852N/A },
5852N/A /**
5852N/A * Get's the instance of YUI bound to the parent frame
5852N/A * @method getInstance
5852N/A * @return {YUI} The YUI instance bound to the parent frame
5852N/A */
5852N/A getInstance: function() {
5852N/A if (!this._inst) {
5852N/A this._inst = this.get('host').getInstance();
5852N/A }
5852N/A return this._inst;
5852N/A },
5852N/A initializer: function() {
5852N/A Y.mix(this.get('host'), {
5852N/A execCommand: function(action, value) {
5852N/A return this.exec.command(action, value);
5852N/A },
5852N/A _execCommand: function(action, value) {
5852N/A return this.exec._command(action, value);
5852N/A }
5852N/A });
5852N/A
5852N/A this.get('host').on('dom:keypress', Y.bind(function(e) {
5852N/A this._lastKey = e.keyCode;
5852N/A }, this));
5852N/A }
5852N/A }, {
5852N/A /**
5852N/A * execCommand
5852N/A * @property NAME
5852N/A * @static
5852N/A */
5852N/A NAME: 'execCommand',
5852N/A /**
5852N/A * exec
5852N/A * @property NS
5852N/A * @static
5852N/A */
4203N/A NS: 'exec',
4203N/A ATTRS: {
5852N/A host: {
5852N/A value: false
5852N/A }
5852N/A },
5852N/A /**
5852N/A * Static object literal of execCommand overrides
5852N/A * @property COMMANDS
5852N/A * @static
5852N/A */
5852N/A COMMANDS: {
5852N/A /**
5852N/A * Wraps the content with a new element of type (tag)
5852N/A * @method COMMANDS.wrap
5852N/A * @static
4203N/A * @param {String} cmd The command executed: wrap
4203N/A * @param {String} tag The tag to wrap the selection with
4203N/A * @return {NodeList} NodeList of the items touched by this command.
4203N/A */
4203N/A wrap: function(cmd, tag) {
4203N/A var inst = this.getInstance();
4203N/A return (new inst.Selection()).wrapContent(tag);
4203N/A },
4203N/A /**
4203N/A * Inserts the provided HTML at the cursor, should be a single element.
4203N/A * @method COMMANDS.inserthtml
4203N/A * @static
4203N/A * @param {String} cmd The command executed: inserthtml
4203N/A * @param {String} html The html to insert
4203N/A * @return {Node} Node instance of the item touched by this command.
4203N/A */
4203N/A inserthtml: function(cmd, html) {
4203N/A var inst = this.getInstance();
4203N/A if (inst.Selection.hasCursor() || Y.UA.ie) {
4203N/A return (new inst.Selection()).insertContent(html);
5852N/A } else {
4203N/A this._command('inserthtml', html);
4203N/A }
4203N/A },
4203N/A /**
5852N/A * Inserts the provided HTML at the cursor, and focuses the cursor afterwards.
5852N/A * @method COMMANDS.insertandfocus
5852N/A * @static
5852N/A * @param {String} cmd The command executed: insertandfocus
5852N/A * @param {String} html The html to insert
5852N/A * @return {Node} Node instance of the item touched by this command.
5852N/A */
4203N/A insertandfocus: function(cmd, html) {
5852N/A var inst = this.getInstance(), out, sel;
5852N/A if (inst.Selection.hasCursor()) {
5852N/A html += inst.Selection.CURSOR;
5852N/A out = this.command('inserthtml', html);
4203N/A sel = new inst.Selection();
4203N/A sel.focusCursor(true, true);
5852N/A } else {
5852N/A this.command('inserthtml', html);
5852N/A }
5852N/A return out;
5852N/A },
5852N/A /**
5852N/A * Inserts a BR at the current cursor position
5852N/A * @method COMMANDS.insertbr
5852N/A * @static
4203N/A * @param {String} cmd The command executed: insertbr
4203N/A */
4203N/A insertbr: function(cmd) {
5852N/A var inst = this.getInstance(),
5852N/A sel = new inst.Selection(),
5852N/A html = '<var>|</var>', last = null,
5852N/A q = (Y.UA.webkit) ? 'span.Apple-style-span,var' : 'var';
5852N/A
5852N/A if (sel._selection.pasteHTML) {
5852N/A sel._selection.pasteHTML(html);
5852N/A } else {
5852N/A this._command('inserthtml', html);
5852N/A }
5852N/A
5852N/A var insert = function(n) {
5852N/A var c = inst.Node.create('<br>');
5852N/A n.insert(c, 'before');
5852N/A return c;
5852N/A };
5852N/A
5852N/A inst.all(q).each(function(n) {
5852N/A var g = true;
5852N/A if (Y.UA.webkit) {
5852N/A g = false;
5852N/A if (n.get('innerHTML') === '|') {
5852N/A g = true;
5852N/A }
5852N/A }
5852N/A if (g) {
5852N/A last = insert(n);
5852N/A if ((!last.previous() || !last.previous().test('br')) && Y.UA.gecko) {
5852N/A var s = last.cloneNode();
5852N/A last.insert(s, 'after');
5852N/A last = s;
5852N/A }
4203N/A n.remove();
5852N/A }
4203N/A });
5852N/A if (Y.UA.webkit && last) {
4203N/A insert(last);
5852N/A sel.selectNode(last);
5852N/A }
5852N/A },
4203N/A /**
4203N/A * Inserts an image at the cursor position
4203N/A * @method COMMANDS.insertimage
4203N/A * @static
5852N/A * @param {String} cmd The command executed: insertimage
5852N/A * @param {String} img The url of the image to be inserted
4203N/A * @return {Node} Node instance of the item touched by this command.
4203N/A */
5852N/A insertimage: function(cmd, img) {
5852N/A return this.command('inserthtml', '<img src="' + img + '">');
5852N/A },
5852N/A /**
4203N/A * Add a class to all of the elements in the selection
5852N/A * @method COMMANDS.addclass
5852N/A * @static
5852N/A * @param {String} cmd The command executed: addclass
5852N/A * @param {String} cls The className to add
5852N/A * @return {NodeList} NodeList of the items touched by this command.
5852N/A */
5852N/A addclass: function(cmd, cls) {
5852N/A var inst = this.getInstance();
4203N/A return (new inst.Selection()).getSelected().addClass(cls);
5852N/A },
5852N/A /**
5852N/A * Remove a class from all of the elements in the selection
4203N/A * @method COMMANDS.removeclass
4203N/A * @static
* @param {String} cmd The command executed: removeclass
* @param {String} cls The className to remove
* @return {NodeList} NodeList of the items touched by this command.
*/
removeclass: function(cmd, cls) {
var inst = this.getInstance();
return (new inst.Selection()).getSelected().removeClass(cls);
},
/**
* Adds a forecolor to the current selection, or creates a new element and applies it
* @method COMMANDS.forecolor
* @static
* @param {String} cmd The command executed: forecolor
* @param {String} val The color value to apply
* @return {NodeList} NodeList of the items touched by this command.
*/
forecolor: function(cmd, val) {
var inst = this.getInstance(),
sel = new inst.Selection(), n;
if (!Y.UA.ie) {
this._command('useCSS', false);
}
if (inst.Selection.hasCursor()) {
if (sel.isCollapsed) {
if (sel.anchorNode && (sel.anchorNode.get('innerHTML') === '&nbsp;')) {
sel.anchorNode.setStyle('color', val);
n = sel.anchorNode;
} else {
n = this.command('inserthtml', '<span style="color: ' + val + '">' + inst.Selection.CURSOR + '</span>');
sel.focusCursor(true, true);
}
return n;
} else {
return this._command(cmd, val);
}
} else {
this._command(cmd, val);
}
},
/**
* Adds a background color to the current selection, or creates a new element and applies it
* @method COMMANDS.backcolor
* @static
* @param {String} cmd The command executed: backcolor
* @param {String} val The color value to apply
* @return {NodeList} NodeList of the items touched by this command.
*/
backcolor: function(cmd, val) {
var inst = this.getInstance(),
sel = new inst.Selection(), n;
if (Y.UA.gecko || Y.UA.opera) {
cmd = 'hilitecolor';
}
if (!Y.UA.ie) {
this._command('useCSS', false);
}
if (inst.Selection.hasCursor()) {
if (sel.isCollapsed) {
if (sel.anchorNode && (sel.anchorNode.get('innerHTML') === '&nbsp;')) {
sel.anchorNode.setStyle('backgroundColor', val);
n = sel.anchorNode;
} else {
n = this.command('inserthtml', '<span style="background-color: ' + val + '">' + inst.Selection.CURSOR + '</span>');
sel.focusCursor(true, true);
}
return n;
} else {
return this._command(cmd, val);
}
} else {
this._command(cmd, val);
}
},
/**
* Sugar method, calles backcolor
* @method COMMANDS.hilitecolor
* @static
* @param {String} cmd The command executed: backcolor
* @param {String} val The color value to apply
* @return {NodeList} NodeList of the items touched by this command.
*/
hilitecolor: function() {
return ExecCommand.COMMANDS.backcolor.apply(this, arguments);
},
/**
* Adds a font name to the current selection, or creates a new element and applies it
* @method COMMANDS.fontname2
* @deprecated
* @static
* @param {String} cmd The command executed: fontname
* @param {String} val The font name to apply
* @return {NodeList} NodeList of the items touched by this command.
*/
fontname2: function(cmd, val) {
this._command('fontname', val);
var inst = this.getInstance(),
sel = new inst.Selection();
if (sel.isCollapsed && (this._lastKey != 32)) {
if (sel.anchorNode.test('font')) {
sel.anchorNode.set('face', val);
}
}
},
/**
* Adds a fontsize to the current selection, or creates a new element and applies it
* @method COMMANDS.fontsize2
* @deprecated
* @static
* @param {String} cmd The command executed: fontsize
* @param {String} val The font size to apply
* @return {NodeList} NodeList of the items touched by this command.
*/
fontsize2: function(cmd, val) {
this._command('fontsize', val);
var inst = this.getInstance(),
sel = new inst.Selection();
if (sel.isCollapsed && sel.anchorNode && (this._lastKey != 32)) {
if (Y.UA.webkit) {
if (sel.anchorNode.getStyle('lineHeight')) {
sel.anchorNode.setStyle('lineHeight', '');
}
}
if (sel.anchorNode.test('font')) {
sel.anchorNode.set('size', val);
} else if (Y.UA.gecko) {
var p = sel.anchorNode.ancestor(inst.Selection.DEFAULT_BLOCK_TAG);
if (p) {
p.setStyle('fontSize', '');
}
}
}
},
/**
* Overload for COMMANDS.list
* @method COMMANDS.insertorderedlist
* @static
* @param {String} cmd The command executed: list, ul
*/
insertunorderedlist: function(cmd) {
this.command('list', 'ul');
},
/**
* Overload for COMMANDS.list
* @method COMMANDS.insertunorderedlist
* @static
* @param {String} cmd The command executed: list, ol
*/
insertorderedlist: function(cmd) {
this.command('list', 'ol');
},
/**
* Noramlizes lists creation/destruction for IE. All others pass through to native calls
* @method COMMANDS.list
* @static
* @param {String} cmd The command executed: list (not used)
* @param {String} tag The tag to deal with
*/
list: function(cmd, tag) {
var inst = this.getInstance(), html,
DIR = 'dir', cls = 'yui3-touched',
dir, range, div, elm, n, str, s, par, list, lis,
sel = new inst.Selection();
cmd = 'insert' + ((tag === 'ul') ? 'un' : '') + 'orderedlist';
if (Y.UA.ie && !sel.isCollapsed) {
range = sel._selection;
html = range.htmlText;
div = inst.Node.create(html);
if (div.test('li') || div.one('li')) {
this._command(cmd, null);
return;
}
if (div.test(tag)) {
elm = range.item ? range.item(0) : range.parentElement();
n = inst.one(elm);
lis = n.all('li');
str = '<div>';
lis.each(function(l) {
str += l.get('innerHTML') + '<br>';
});
str += '</div>';
s = inst.Node.create(str);
if (n.get('parentNode').test('div')) {
n = n.get('parentNode');
}
if (n && n.hasAttribute(DIR)) {
s.setAttribute(DIR, n.getAttribute(DIR));
}
n.replace(s);
if (range.moveToElementText) {
range.moveToElementText(s._node);
}
range.select();
} else {
par = Y.one(range.parentElement());
if (!par.test(inst.Selection.BLOCKS)) {
par = par.ancestor(inst.Selection.BLOCKS);
}
if (par) {
if (par.hasAttribute(DIR)) {
dir = par.getAttribute(DIR);
}
}
if (html.indexOf('<br>') > -1) {
html = html.split(/<br>/i);
} else {
var tmp = inst.Node.create(html),
ps = tmp.all('p');
if (ps.size()) {
html = [];
ps.each(function(n) {
html.push(n.get('innerHTML'));
});
} else {
html = [html];
}
}
list = '<' + tag + ' id="ie-list">';
Y.each(html, function(v) {
var a = inst.Node.create(v);
if (a.test('p')) {
if (a.hasAttribute(DIR)) {
dir = a.getAttribute(DIR);
}
v = a.get('innerHTML');
}
list += '<li>' + v + '</li>';
});
list += '</' + tag + '>';
range.pasteHTML(list);
elm = inst.config.doc.getElementById('ie-list');
elm.id = '';
if (dir) {
elm.setAttribute(DIR, dir);
}
if (range.moveToElementText) {
range.moveToElementText(elm);
}
range.select();
}
} else if (Y.UA.ie) {
par = inst.one(sel._selection.parentElement());
if (par.test('p')) {
if (par && par.hasAttribute(DIR)) {
dir = par.getAttribute(DIR);
}
html = Y.Selection.getText(par);
if (html === '') {
var sdir = '';
if (dir) {
sdir = ' dir="' + dir + '"';
}
list = inst.Node.create(Y.Lang.sub('<{tag}{dir}><li></li></{tag}>', { tag: tag, dir: sdir }));
par.replace(list);
sel.selectNode(list.one('li'));
} else {
this._command(cmd, null);
}
} else {
this._command(cmd, null);
}
} else {
inst.all(tag).addClass(cls);
if (sel.anchorNode.test(inst.Selection.BLOCKS)) {
par = sel.anchorNode;
} else {
par = sel.anchorNode.ancestor(inst.Selection.BLOCKS);
}
if (par && par.hasAttribute(DIR)) {
dir = par.getAttribute(DIR);
}
this._command(cmd, null);
list = inst.all(tag);
if (dir) {
list.each(function(n) {
if (!n.hasClass(cls)) {
n.setAttribute(DIR, dir);
}
});
}
list.removeClass(cls);
}
},
/**
* Noramlizes alignment for Webkit Browsers
* @method COMMANDS.justify
* @static
* @param {String} cmd The command executed: justify (not used)
* @param {String} val The actual command from the justify{center,all,left,right} stubs
*/
justify: function(cmd, val) {
if (Y.UA.webkit) {
var inst = this.getInstance(),
sel = new inst.Selection(),
aNode = sel.anchorNode;
var bgColor = aNode.getStyle('backgroundColor');
this._command(val);
sel = new inst.Selection();
if (sel.anchorNode.test('div')) {
var html = '<span>' + sel.anchorNode.get('innerHTML') + '</span>';
sel.anchorNode.set('innerHTML', html);
sel.anchorNode.one('span').setStyle('backgroundColor', bgColor);
sel.selectNode(sel.anchorNode.one('span'));
}
} else {
this._command(val);
}
},
/**
* Override method for COMMANDS.justify
* @method COMMANDS.justifycenter
* @static
*/
justifycenter: function(cmd) {
this.command('justify', 'justifycenter');
},
/**
* Override method for COMMANDS.justify
* @method COMMANDS.justifyleft
* @static
*/
justifyleft: function(cmd) {
this.command('justify', 'justifyleft');
},
/**
* Override method for COMMANDS.justify
* @method COMMANDS.justifyright
* @static
*/
justifyright: function(cmd) {
this.command('justify', 'justifyright');
},
/**
* Override method for COMMANDS.justify
* @method COMMANDS.justifyfull
* @static
*/
justifyfull: function(cmd) {
this.command('justify', 'justifyfull');
}
}
});
/**
* This method is meant to normalize IE's in ability to exec the proper command on elements with CSS styling.
* @method fixIETags
* @protected
* @param {String} cmd The command to execute
* @param {String} tag The tag to create
* @param {String} rule The rule that we are looking for.
*/
var fixIETags = function(cmd, tag, rule) {
var inst = this.getInstance(),
doc = inst.config.doc,
sel = doc.selection.createRange(),
o = doc.queryCommandValue(cmd),
html, reg, m, p, d, s, c;
if (o) {
html = sel.htmlText;
reg = new RegExp(rule, 'g');
m = html.match(reg);
if (m) {
html = html.replace(rule + ';', '').replace(rule, '');
sel.pasteHTML('<var id="yui-ie-bs">');
p = doc.getElementById('yui-ie-bs');
d = doc.createElement('div');
s = doc.createElement(tag);
d.innerHTML = html;
if (p.parentNode !== inst.config.doc.body) {
p = p.parentNode;
}
c = d.childNodes;
p.parentNode.replaceChild(s, p);
Y.each(c, function(f) {
s.appendChild(f);
});
sel.collapse();
if (sel.moveToElementText) {
sel.moveToElementText(s);
}
sel.select();
}
}
this._command(cmd);
};
if (Y.UA.ie) {
ExecCommand.COMMANDS.bold = function() {
fixIETags.call(this, 'bold', 'b', 'FONT-WEIGHT: bold');
};
ExecCommand.COMMANDS.italic = function() {
fixIETags.call(this, 'italic', 'i', 'FONT-STYLE: italic');
};
ExecCommand.COMMANDS.underline = function() {
fixIETags.call(this, 'underline', 'u', 'TEXT-DECORATION: underline');
};
}
Y.namespace('Plugin');
Y.Plugin.ExecCommand = ExecCommand;
}, '@VERSION@' ,{requires:['frame'], skinnable:false});