editor/js/exec-command.js

	exec-command.js revision a2621d519886de7d60c30c5a0850f5c17fd2fb36
dbf2c770f8178b12e8fe3c36bfa29df58ef13959Dav Glass
e6abb8a9590d9f4058669f9d3d90a3d22b5449e6Dav Glass    /**
dbf2c770f8178b12e8fe3c36bfa29df58ef13959Dav Glass     * Plugin for the frame module to handle execCommands for Editor
dbf2c770f8178b12e8fe3c36bfa29df58ef13959Dav Glass     * @module editor
dbf2c770f8178b12e8fe3c36bfa29df58ef13959Dav Glass     * @submodule exec-command
dbf2c770f8178b12e8fe3c36bfa29df58ef13959Dav Glass     */
dbf2c770f8178b12e8fe3c36bfa29df58ef13959Dav Glass    /**
daeb6d531149c45a2ceb543ae2cf1e56e5235bbeDav Glass     * Plugin for the frame module to handle execCommands for Editor
dbf2c770f8178b12e8fe3c36bfa29df58ef13959Dav Glass     * @class Plugin.ExecCommand
dbf2c770f8178b12e8fe3c36bfa29df58ef13959Dav Glass     * @extends Base
dbf2c770f8178b12e8fe3c36bfa29df58ef13959Dav Glass     * @constructor
dbf2c770f8178b12e8fe3c36bfa29df58ef13959Dav Glass     */
dbf2c770f8178b12e8fe3c36bfa29df58ef13959Dav Glass        var ExecCommand = function() {
dbf2c770f8178b12e8fe3c36bfa29df58ef13959Dav Glass            ExecCommand.superclass.constructor.apply(this, arguments);
dbf2c770f8178b12e8fe3c36bfa29df58ef13959Dav Glass        };
dbf2c770f8178b12e8fe3c36bfa29df58ef13959Dav Glass
dbf2c770f8178b12e8fe3c36bfa29df58ef13959Dav Glass        Y.extend(ExecCommand, Y.Base, {
dbf2c770f8178b12e8fe3c36bfa29df58ef13959Dav Glass            /**
dbf2c770f8178b12e8fe3c36bfa29df58ef13959Dav Glass            * An internal reference to the instance of the frame plugged into.
dbf2c770f8178b12e8fe3c36bfa29df58ef13959Dav Glass            * @private
dbf2c770f8178b12e8fe3c36bfa29df58ef13959Dav Glass            * @property _inst
dbf2c770f8178b12e8fe3c36bfa29df58ef13959Dav Glass            */
dbf2c770f8178b12e8fe3c36bfa29df58ef13959Dav Glass            _inst: null,
dbf2c770f8178b12e8fe3c36bfa29df58ef13959Dav Glass            /**
dbf2c770f8178b12e8fe3c36bfa29df58ef13959Dav Glass            * Execute a command on the frame's document.
dbf2c770f8178b12e8fe3c36bfa29df58ef13959Dav Glass            * @method command
dbf2c770f8178b12e8fe3c36bfa29df58ef13959Dav Glass            * @param {String} action The action to perform (bold, italic, fontname)
dbf2c770f8178b12e8fe3c36bfa29df58ef13959Dav Glass            * @param {String} value The optional value (helvetica)
dbf2c770f8178b12e8fe3c36bfa29df58ef13959Dav Glass            * @return {Node/NodeList} Should return the Node/Nodelist affected
dbf2c770f8178b12e8fe3c36bfa29df58ef13959Dav Glass            */
dbf2c770f8178b12e8fe3c36bfa29df58ef13959Dav Glass            command: function(action, value) {
dbf2c770f8178b12e8fe3c36bfa29df58ef13959Dav Glass                var fn = ExecCommand.COMMANDS[action];
dbf2c770f8178b12e8fe3c36bfa29df58ef13959Dav Glass
dbf2c770f8178b12e8fe3c36bfa29df58ef13959Dav Glass                Y.log('execCommand(' + action + '): "' + value + '"', 'info', 'exec-command');
dbf2c770f8178b12e8fe3c36bfa29df58ef13959Dav Glass                if (fn) {
dbf2c770f8178b12e8fe3c36bfa29df58ef13959Dav Glass                    return fn.call(this, action, value);
dbf2c770f8178b12e8fe3c36bfa29df58ef13959Dav Glass                } else {
dbf2c770f8178b12e8fe3c36bfa29df58ef13959Dav Glass                    return this._command(action, value);
dbf2c770f8178b12e8fe3c36bfa29df58ef13959Dav Glass                }
dbf2c770f8178b12e8fe3c36bfa29df58ef13959Dav Glass            },
dbf2c770f8178b12e8fe3c36bfa29df58ef13959Dav Glass            /**
dbf2c770f8178b12e8fe3c36bfa29df58ef13959Dav Glass            * The private version of execCommand that doesn't filter for overrides.
dbf2c770f8178b12e8fe3c36bfa29df58ef13959Dav Glass            * @private
dbf2c770f8178b12e8fe3c36bfa29df58ef13959Dav Glass            * @method _command
dbf2c770f8178b12e8fe3c36bfa29df58ef13959Dav Glass            * @param {String} action The action to perform (bold, italic, fontname)
b357b56da58949fa86ab8e56983972e0db5cbffbDav Glass            * @param {String} value The optional value (helvetica)
dbf2c770f8178b12e8fe3c36bfa29df58ef13959Dav Glass            */
dbf2c770f8178b12e8fe3c36bfa29df58ef13959Dav Glass            _command: function(action, value) {
dbf2c770f8178b12e8fe3c36bfa29df58ef13959Dav Glass                var inst = this.getInstance();
b357b56da58949fa86ab8e56983972e0db5cbffbDav Glass                try {
b357b56da58949fa86ab8e56983972e0db5cbffbDav Glass                    Y.log('Internal execCommand(' + action + '): "' + value + '"', 'info', 'exec-command');
b357b56da58949fa86ab8e56983972e0db5cbffbDav Glass                    inst.config.doc.execCommand(action, false, value);
b357b56da58949fa86ab8e56983972e0db5cbffbDav Glass                } catch (e) {
b357b56da58949fa86ab8e56983972e0db5cbffbDav Glass                    Y.log(e.message, 'error', 'exec-command');
dbf2c770f8178b12e8fe3c36bfa29df58ef13959Dav Glass                }
b9bc793332c43ca5a4d2c836f912781c5d3974f7Dav Glass            },
dbf2c770f8178b12e8fe3c36bfa29df58ef13959Dav Glass            /**
5cbdc947eb0c9c5e840d59ff8e1dd49a0e2a1887Dav Glass            * Get's the instance of YUI bound to the parent frame
5cbdc947eb0c9c5e840d59ff8e1dd49a0e2a1887Dav Glass            * @method getInstance
5cbdc947eb0c9c5e840d59ff8e1dd49a0e2a1887Dav Glass            * @return {YUI} The YUI instance bound to the parent frame
5cbdc947eb0c9c5e840d59ff8e1dd49a0e2a1887Dav Glass            */
5cbdc947eb0c9c5e840d59ff8e1dd49a0e2a1887Dav Glass            getInstance: function() {
1e44d35dd310d594ecc977ee4ed7cf6ef3746045Dav Glass                if (!this._inst) {
1e44d35dd310d594ecc977ee4ed7cf6ef3746045Dav Glass                    this._inst = this.get('host').getInstance();
1e44d35dd310d594ecc977ee4ed7cf6ef3746045Dav Glass                }
6e43f558138d36538a82459ec79e0279ffae22e0Dav Glass                return this._inst;
6e43f558138d36538a82459ec79e0279ffae22e0Dav Glass            },
6e43f558138d36538a82459ec79e0279ffae22e0Dav Glass            initializer: function() {
6e43f558138d36538a82459ec79e0279ffae22e0Dav Glass                Y.mix(this.get('host'), {
6e43f558138d36538a82459ec79e0279ffae22e0Dav Glass                    execCommand: function(action, value) {
6e43f558138d36538a82459ec79e0279ffae22e0Dav Glass                        return this.exec.command(action, value);
6e43f558138d36538a82459ec79e0279ffae22e0Dav Glass                    },
5cbdc947eb0c9c5e840d59ff8e1dd49a0e2a1887Dav Glass                    _execCommand: function(action, value) {
5cbdc947eb0c9c5e840d59ff8e1dd49a0e2a1887Dav Glass                        return this.exec._command(action, value);
5cbdc947eb0c9c5e840d59ff8e1dd49a0e2a1887Dav Glass                    }
5cbdc947eb0c9c5e840d59ff8e1dd49a0e2a1887Dav Glass                });
dbf2c770f8178b12e8fe3c36bfa29df58ef13959Dav Glass            }
dbf2c770f8178b12e8fe3c36bfa29df58ef13959Dav Glass        }, {
dbf2c770f8178b12e8fe3c36bfa29df58ef13959Dav Glass            /**
dbf2c770f8178b12e8fe3c36bfa29df58ef13959Dav Glass            * execCommand
dbf2c770f8178b12e8fe3c36bfa29df58ef13959Dav Glass            * @property NAME
            * @static
            */
            NAME: 'execCommand',
            /**
            * exec
            * @property NS
            * @static
            */
            NS: 'exec',
            ATTRS: {
                host: {
                    value: false
                }
            },
            /**
            * Static object literal of execCommand overrides
            * @property COMMANDS
            * @static
            */
            COMMANDS: {
                /**
                * Wraps the content with a new element of type (tag)
                * @method COMMANDS.wrap
                * @static
                * @param {String} cmd The command executed: wrap
                * @param {String} tag The tag to wrap the selection with
                * @return {NodeList} NodeList of the items touched by this command.
                */
                wrap: function(cmd, tag) {
                    var inst = this.getInstance();
                    return (new inst.Selection()).wrapContent(tag);
                },
                /**
                * Inserts the provided HTML at the cursor, should be a single element.
                * @method COMMANDS.inserthtml
                * @static
                * @param {String} cmd The command executed: inserthtml
                * @param {String} html The html to insert
                * @return {Node} Node instance of the item touched by this command.
                */
                inserthtml: function(cmd, html) {
                    var inst = this.getInstance();
                    return (new inst.Selection()).insertContent(html);
                },
                /**
                * Inserts the provided HTML at the cursor, and focuses the cursor afterwards.
                * @method COMMANDS.insertandfocus
                * @static
                * @param {String} cmd The command executed: insertandfocus
                * @param {String} html The html to insert
                * @return {Node} Node instance of the item touched by this command.
                */
                insertandfocus: function(cmd, html) {
                    var inst = this.getInstance(), out, sel;
                    html += inst.Selection.CURSOR;
                    out = this.command('inserthtml', html);
                    sel = new inst.Selection();
                    sel.focusCursor();
                    return out;
                },
                /**
                * Inserts an image at the cursor position
                * @method COMMANDS.insertimage
                * @static
                * @param {String} cmd The command executed: insertimage
                * @param {String} img The url of the image to be inserted
                * @return {Node} Node instance of the item touched by this command.
                */
                insertimage: function(cmd, img) {
                    return this.command('inserthtml', '<img src="' + img + '">');
                },
                /**
                * Add a class to all of the elements in the selection
                * @method COMMANDS.addclass
                * @static
                * @param {String} cmd The command executed: addclass
                * @param {String} cls The className to add
                * @return {NodeList} NodeList of the items touched by this command.
                */
                addclass: function(cmd, cls) {
                    var inst = this.getInstance();
                    return (new inst.Selection()).getSelected().addClass(cls);
                },
                /**
                * Remove a class from all of the elements in the selection
                * @method COMMANDS.removeclass
                * @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 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('styleWithCSS', 'true');
                    }
                    if (sel.isCollapsed) {
                        n = this.command('inserthtml', '<span style="background-color: ' + val + '"><span>&nbsp;</span>&nbsp;</span>');
                        inst.Selection.filterBlocks();
                        sel.selectNode(n.get('firstChild'));
                        return n;
                    } else {
                        return this._command(cmd, val);
                    }
                    if (!Y.UA.ie) {
                        this._command('styleWithCSS', false);
                    }
                },
                /**
                * 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.fontname
                * @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.
                */
                fontname: function(cmd, val) {
                    var inst = this.getInstance(),
                        sel = new inst.Selection(), n;

                    if (sel.isCollapsed) {
                        n = this.command('inserthtml', '<span style="font-family: ' + val + '">&nbsp;</span>');
                        sel.selectNode(n.get('firstChild'), true);
                        return n;
                    } else {
                        return this._command('fontname', val);
                    }
                },
                /**
                * Adds a fontsize to the current selection, or creates a new element and applies it
                * @method COMMANDS.fontsize
                * @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.
                */
                fontsize: function(cmd, val) {
                    var inst = this.getInstance(),
                        sel = new inst.Selection(), n;

                    if (sel.isCollapsed) {
                        n = this.command('inserthtml', '<font size="' + val + '">&nbsp;</font>');
                        sel.selectNode(n.get('firstChild'), true);
                        return n;
                    } else {
                        return this._command('fontsize', val);
                    }
                }
            }
        });

        Y.namespace('Plugin');
        Y.Plugin.ExecCommand = ExecCommand;