moodle/lib/yuilib/3.17.2/content-editable/content-editable.js

/*
YUI 3.17.2 (build 9c3c78e)
Copyright 2014 Yahoo! Inc. All rights reserved.
Licensed under the BSD License.
http://yuilibrary.com/license/
*/

YUI.add('content-editable', function (Y, NAME) {

    /*jshint maxlen: 500 */
    /**
    * Creates a component to work with an elemment.
    * @class ContentEditable
    * @for ContentEditable
    * @extends Y.Plugin.Base
    * @constructor
    * @module editor
    * @submodule content-editable
    */

    var Lang = Y.Lang,
        YNode = Y.Node,

        EVENT_CONTENT_READY = 'contentready',
        EVENT_READY = 'ready',

        TAG_PARAGRAPH = 'p',

        BLUR = 'blur',
        CONTAINER = 'container',
        CONTENT_EDITABLE = 'contentEditable',
        EMPTY = '',
        FOCUS = 'focus',
        HOST = 'host',
        INNER_HTML = 'innerHTML',
        KEY = 'key',
        PARENT_NODE = 'parentNode',
        PASTE = 'paste',
        TEXT = 'Text',
        USE = 'use',

    ContentEditable = function() {
        ContentEditable.superclass.constructor.apply(this, arguments);
    };

    Y.extend(ContentEditable, Y.Plugin.Base, {

        /**
        * Internal reference set when render is called.
        * @private
        * @property _rendered
        * @type Boolean
        */
        _rendered: null,

        /**
        * Internal reference to the YUI instance bound to the element
        * @private
        * @property _instance
        * @type YUI
        */
        _instance: null,

        /**
        * Initializes the ContentEditable instance
        * @protected
        * @method initializer
        */
        initializer: function() {
            var host = this.get(HOST);

            if (host) {
                host.frame = this;
            }

            this._eventHandles = [];

            this.publish(EVENT_READY, {
                emitFacade: true,
                defaultFn: this._defReadyFn
            });
        },

        /**
        * Destroys the instance.
        * @protected
        * @method destructor
        */
        destructor: function() {
            new Y.EventHandle(this._eventHandles).detach();

            this._container.removeAttribute(CONTENT_EDITABLE);
        },

        /**
        * Generic handler for all DOM events fired by the Editor container. This handler
        * takes the current EventFacade and augments it to fire on the ContentEditable host. It adds two new properties
        * to the EventFacade called frameX and frameY which adds the scroll and xy position of the ContentEditable element
        * to the original pageX and pageY of the event so external nodes can be positioned over the element.
        * In case of ContentEditable element these will be equal to pageX and pageY of the container.
        * @private
        * @method _onDomEvent
        * @param {EventFacade} e
        */
        _onDomEvent: function(e) {
            var xy;

            e.frameX = e.frameY = 0;

            if (e.pageX > 0 || e.pageY > 0) {
                if (e.type.substring(0, 3) !== KEY) {
                    xy = this._container.getXY();

                    e.frameX = xy[0];
                    e.frameY = xy[1];
                }
            }

            e.frameTarget = e.target;
            e.frameCurrentTarget = e.currentTarget;
            e.frameEvent = e;

            this.fire('dom:' + e.type, e);
        },

        /**
        * Simple pass thru handler for the paste event so we can do content cleanup
        * @private
        * @method _DOMPaste
        * @param {EventFacade} e
        */
        _DOMPaste: function(e) {
            var inst = this.getInstance(),
                data = EMPTY, win = inst.config.win;

            if (e._event.originalTarget) {
                data = e._event.originalTarget;
            }

            if (e._event.clipboardData) {
                data = e._event.clipboardData.getData(TEXT);
            }

            if (win.clipboardData) {
                data = win.clipboardData.getData(TEXT);

                if (data === EMPTY) { // Could be empty, or failed
                    // Verify failure
                    if (!win.clipboardData.setData(TEXT, data)) {
                        data = null;
                    }
                }
            }

            e.frameTarget = e.target;
            e.frameCurrentTarget = e.currentTarget;
            e.frameEvent = e;

            if (data) {
                e.clipboardData = {
                    data: data,
                    getData: function() {
                        return data;
                    }
                };
            } else {

                e.clipboardData = null;
            }

            this.fire('dom:paste', e);
        },

        /**
        * Binds DOM events and fires the ready event
        * @private
        * @method _defReadyFn
        */
        _defReadyFn: function() {
            var inst = this.getInstance(),
                container = this.get(CONTAINER);

            Y.each(
                ContentEditable.DOM_EVENTS,
                function(value, key) {
                    var fn = Y.bind(this._onDomEvent, this),
                        kfn = ((Y.UA.ie && ContentEditable.THROTTLE_TIME > 0) ? Y.throttle(fn, ContentEditable.THROTTLE_TIME) : fn);

                    if (!inst.Node.DOM_EVENTS[key]) {
                        inst.Node.DOM_EVENTS[key] = 1;
                    }

                    if (value === 1) {
                        if (key !== FOCUS && key !== BLUR && key !== PASTE) {
                            if (key.substring(0, 3) === KEY) {
                                //Throttle key events in IE
                                this._eventHandles.push(container.on(key, kfn, container));
                            } else {
                                this._eventHandles.push(container.on(key, fn, container));
                            }
                        }
                    }
                },
                this
            );

            inst.Node.DOM_EVENTS.paste = 1;

            this._eventHandles.push(
                container.on(PASTE, Y.bind(this._DOMPaste, this), container),
                container.on(FOCUS, Y.bind(this._onDomEvent, this), container),
                container.on(BLUR, Y.bind(this._onDomEvent, this), container)
            );

            inst.__use = inst.use;

            inst.use = Y.bind(this.use, this);
        },

        /**
        * Called once the content is available in the ContentEditable element and calls the final use call
        * @private
        * @method _onContentReady
        * on the internal instance so that the modules are loaded properly.
        */
        _onContentReady: function(event) {
            if (!this._ready) {
                this._ready = true;

                var inst = this.getInstance(),
                    args = Y.clone(this.get(USE));

                this.fire(EVENT_CONTENT_READY);


                if (event) {
                    inst.config.doc = YNode.getDOMNode(event.target);
                }

                args.push(Y.bind(function() {

                    if (inst.EditorSelection) {
                        inst.EditorSelection.DEFAULT_BLOCK_TAG = this.get('defaultblock');

                        inst.EditorSelection.ROOT = this.get(CONTAINER);
                    }

                    this.fire(EVENT_READY);
                }, this));


                inst.use.apply(inst, args);
            }
        },

        /**
        * Retrieves defaultblock value from host attribute
        * @private
        * @method _getDefaultBlock
        * @return {String}
        */
        _getDefaultBlock: function() {
            return this._getHostValue('defaultblock');
        },

        /**
        * Retrieves dir value from host attribute
        * @private
        * @method _getDir
        * @return {String}
        */
        _getDir: function() {
            return this._getHostValue('dir');
        },

        /**
        * Retrieves extracss value from host attribute
        * @private
        * @method _getExtraCSS
        * @return {String}
        */
        _getExtraCSS: function() {
            return this._getHostValue('extracss');
        },

        /**
        * Get the content from the container
        * @private
        * @method _getHTML
        * @param {String} html The raw HTML from the container.
        * @return {String}
        */
        _getHTML: function() {
            var html, container;

            if (this._ready) {
                container = this.get(CONTAINER);

                html = container.get(INNER_HTML);
            }

            return html;
        },

        /**
        * Retrieves a value from host attribute
        * @private
        * @method _getHostValue
        * @param {attr} The attribute which value should be returned from the host
        * @return {String|Object}
        */
        _getHostValue: function(attr) {
            var host = this.get(HOST);

            if (host) {
                return host.get(attr);
            }
        },

        /**
        * Set the content of the container
        * @private
        * @method _setHTML
        * @param {String} html The raw HTML to set to the container.
        * @return {String}
        */
        _setHTML: function(html) {
            if (this._ready) {
                var container = this.get(CONTAINER);

                container.set(INNER_HTML, html);
            } else {
                //This needs to be wrapped in a contentready callback for the !_ready state
                this.once(EVENT_CONTENT_READY, Y.bind(this._setHTML, this, html));
            }

            return html;
        },

        /**
        * Sets the linked CSS on the instance.
        * @private
        * @method _setLinkedCSS
        * @param {String} css The linkedcss value
        * @return {String}
        */
        _setLinkedCSS: function(css) {
            if (this._ready) {
                var inst = this.getInstance();
                inst.Get.css(css);
            } else {
                //This needs to be wrapped in a contentready callback for the !_ready state
                this.once(EVENT_CONTENT_READY, Y.bind(this._setLinkedCSS, this, css));
            }

            return css;
        },

        /**
        * Sets the dir (language direction) attribute on the container.
        * @private
        * @method _setDir
        * @param {String} value The language direction
        * @return {String}
        */
        _setDir: function(value) {
            var container;

            if (this._ready) {
                container = this.get(CONTAINER);

                container.setAttribute('dir', value);
            } else {
                //This needs to be wrapped in a contentready callback for the !_ready state
                this.once(EVENT_CONTENT_READY, Y.bind(this._setDir, this, value));
            }

            return value;
        },

        /**
        * Set's the extra CSS on the instance.
        * @private
        * @method _setExtraCSS
        * @param {String} css The CSS style to be set as extra css
        * @return {String}
        */
        _setExtraCSS: function(css) {
            if (this._ready) {
                if (css) {
                    var inst = this.getInstance(),
                        head = inst.one('head');

                    if (this._extraCSSNode) {
                        this._extraCSSNode.remove();
                    }

                    this._extraCSSNode = YNode.create('<style>' + css + '</style>');

                    head.append(this._extraCSSNode);
                }
            } else {
                //This needs to be wrapped in a contentready callback for the !_ready state
                this.once(EVENT_CONTENT_READY, Y.bind(this._setExtraCSS, this, css));
            }

            return css;
        },

        /**
        * Sets the language value on the instance.
        * @private
        * @method _setLang
        * @param {String} value The language to be set
        * @return {String}
        */
        _setLang: function(value) {
            var container;

            if (this._ready) {
                container = this.get(CONTAINER);

                container.setAttribute('lang', value);
            } else {
                //This needs to be wrapped in a contentready callback for the !_ready state
                this.once(EVENT_CONTENT_READY, Y.bind(this._setLang, this, value));
            }

            return value;
        },

        /**
        * Called from the first YUI instance that sets up the internal instance.
        * This loads the content into the ContentEditable element and attaches the contentready event.
        * @private
        * @method _instanceLoaded
        * @param {YUI} inst The internal YUI instance bound to the ContentEditable element
        */
        _instanceLoaded: function(inst) {
            this._instance = inst;

            this._onContentReady();

            var doc = this._instance.config.doc;

            if (!Y.UA.ie) {
                try {
                    //Force other browsers into non CSS styling
                    doc.execCommand('styleWithCSS', false, false);
                    doc.execCommand('insertbronreturn', false, false);
                } catch (err) {}
            }
        },


        /**
        * Validates linkedcss property
        *
        * @method _validateLinkedCSS
        * @private
        */
        _validateLinkedCSS: function(value) {
            return Lang.isString(value) || Lang.isArray(value);
        },

        //BEGIN PUBLIC METHODS
        /**
        * This is a scoped version of the normal YUI.use method & is bound to the ContentEditable element
        * At setup, the inst.use method is mapped to this method.
        * @method use
        */
        use: function() {

            var inst = this.getInstance(),
                args = Y.Array(arguments),
                callback = false;

            if (Lang.isFunction(args[args.length - 1])) {
                callback = args.pop();
            }

            if (callback) {
                args.push(function() {

                    callback.apply(inst, arguments);
                });
            }

            return inst.__use.apply(inst, args);
        },

        /**
        * A delegate method passed to the instance's delegate method
        * @method delegate
        * @param {String} type The type of event to listen for
        * @param {Function} fn The method to attach
        * @param {String, Node} cont The container to act as a delegate, if no "sel" passed, the container is assumed.
        * @param {String} sel The selector to match in the event (optional)
        * @return {EventHandle} The Event handle returned from Y.delegate
        */
        delegate: function(type, fn, cont, sel) {
            var inst = this.getInstance();

            if (!inst) {

                return false;
            }

            if (!sel) {
                sel = cont;

                cont = this.get(CONTAINER);
            }

            return inst.delegate(type, fn, cont, sel);
        },

        /**
        * Get a reference to the internal YUI instance.
        * @method getInstance
        * @return {YUI} The internal YUI instance
        */
        getInstance: function() {
            return this._instance;
        },

        /**
        * @method render
        * @param {String/HTMLElement/Node} node The node to render to
        * @return {ContentEditable}
        * @chainable
        */
        render: function(node) {
            var args, inst, fn;

            if (this._rendered) {

                return this;
            }

            if (node) {
                this.set(CONTAINER, node);
            }

            container = this.get(CONTAINER);

            if (!container) {
                container = YNode.create(ContentEditable.HTML);

                Y.one('body').prepend(container);

                this.set(CONTAINER, container);
            }

            this._rendered = true;

            this._container.setAttribute(CONTENT_EDITABLE, true);

            args = Y.clone(this.get(USE));

            fn = Y.bind(function() {
                inst = YUI();

                inst.host = this.get(HOST); //Cross reference to Editor


                inst.use('node-base', Y.bind(this._instanceLoaded, this));
            }, this);

            args.push(fn);

            Y.use.apply(Y, args);

            return this;
        },

        /**
        * Set the focus to the container
        * @method focus
        * @param {Function} fn Callback function to execute after focus happens
        * @return {ContentEditable}
        * @chainable
        */
        focus: function() {
            this._container.focus();

            return this;
        },
        /**
        * Show the iframe instance
        * @method show
        * @return {ContentEditable}
        * @chainable
        */
        show: function() {
            this._container.show();

            this.focus();

            return this;
        },

        /**
        * Hide the iframe instance
        * @method hide
        * @return {ContentEditable}
        * @chainable
        */
        hide: function() {
            this._container.hide();

            return this;
        }
    },
    {
        /**
        * The throttle time for key events in IE
        * @static
        * @property THROTTLE_TIME
        * @type Number
        * @default 100
        */
        THROTTLE_TIME: 100,

        /**
        * The DomEvents that the frame automatically attaches and bubbles
        * @static
        * @property DOM_EVENTS
        * @type Object
        */
        DOM_EVENTS: {
            click: 1,
            dblclick: 1,
            focusin: 1,
            focusout: 1,
            keydown: 1,
            keypress: 1,
            keyup: 1,
            mousedown: 1,
            mouseup: 1,
            paste: 1
        },

        /**
        * The template string used to create the ContentEditable element
        * @static
        * @property HTML
        * @type String
        */
        HTML: '<div></div>',

        /**
        * The name of the class (contentEditable)
        * @static
        * @property NAME
        * @type String
        */
        NAME: 'contentEditable',

        /**
        * The namespace on which ContentEditable plugin will reside.
        *
        * @property NS
        * @type String
        * @default 'contentEditable'
        * @static
        */
        NS: CONTENT_EDITABLE,

        ATTRS: {
            /**
            * The default text direction for this ContentEditable element. Default: ltr
            * @attribute dir
            * @type String
            */
            dir: {
                lazyAdd: false,
                validator: Lang.isString,
                setter: '_setDir',
                valueFn: '_getDir'
            },

            /**
            * The container to set contentEditable=true or to create on render.
            * @attribute container
            * @type String/HTMLElement/Node
            */
            container: {
                setter: function(n) {
                    this._container = Y.one(n);

                    return this._container;
                }
            },

            /**
            * The string to inject as Editor content. Default '<br>'
            * @attribute content
            * @type String
            */
            content: {
                getter: '_getHTML',
                lazyAdd: false,
                setter: '_setHTML',
                validator: Lang.isString,
                value: '<br>'
            },

            /**
            * The default tag to use for block level items, defaults to: p
            * @attribute defaultblock
            * @type String
            */
            defaultblock: {
                validator: Lang.isString,
                value: TAG_PARAGRAPH,
                valueFn: '_getDefaultBlock'
            },

            /**
            * A string of CSS to add to the Head of the Editor
            * @attribute extracss
            * @type String
            */
            extracss: {
                lazyAdd: false,
                setter: '_setExtraCSS',
                validator: Lang.isString,
                valueFn: '_getExtraCSS'
            },

            /**
            * Set the id of the new Node. (optional)
            * @attribute id
            * @type String
            * @writeonce
            */
            id: {
                writeOnce: true,
                getter: function(id) {
                    if (!id) {
                        id = 'inlineedit-' + Y.guid();
                    }

                    return id;
                }
            },

            /**
            * The default language. Default: en-US
            * @attribute lang
            * @type String
            */
            lang: {
                validator: Lang.isString,
                setter: '_setLang',
                lazyAdd: false,
                value: 'en-US'
            },

            /**
            * An array of url's to external linked style sheets
            * @attribute linkedcss
            * @type String|Array
            */
            linkedcss: {
                setter: '_setLinkedCSS',
                validator: '_validateLinkedCSS'
                //value: ''
            },

            /**
            * The Node instance of the container.
            * @attribute node
            * @type Node
            */
            node: {
                readOnly: true,
                value: null,
                getter: function() {
                    return this._container;
                }
            },

            /**
            * Array of modules to include in the scoped YUI instance at render time. Default: ['node-base', 'editor-selection', 'stylesheet']
            * @attribute use
            * @writeonce
            * @type Array
            */
            use: {
                validator: Lang.isArray,
                writeOnce: true,
                value: ['node-base', 'editor-selection', 'stylesheet']
            }
        }
    });

    Y.namespace('Plugin');

    Y.Plugin.ContentEditable = ContentEditable;

}, '3.17.2', {"requires": ["node-base", "editor-selection", "stylesheet", "plugin"]});