Proyectos de Subversion Moodle

YUI.add('gallery-sm-treeview', function (Y, NAME) {

var Micro = Y.Template.Micro;

Y.namespace('TreeView').Templates = {
    children: Micro.compile(
        '<ul class="<%= data.classNames.children %>" ' +

            '<% if (data.node.isRoot()) { %>' +
                'role="tree" tabindex="0"' +
            '<% } else { %>' +
                'role="group"' +
            '<% } %>' +

        '></ul>'
    ),

    node: Micro.compile(
        '<li id="<%= data.node.id %>" class="<%= data.nodeClassNames.join(" ") %>" role="treeitem" aria-labelled-by="<%= data.node.id %>-label">' +
            '<div class="<%= data.classNames.row %>" data-node-id="<%= data.node.id %>">' +
                '<span class="<%= data.classNames.indicator %>"><s></s></span>' +
                '<span class="<%= data.classNames.icon %>"></span>' +
                '<span id="<%= data.node.id %>-label" class="<%= data.classNames.label %>"><%== data.node.label %></span>' +
            '</div>' +
        '</li>'
    )
};
/*jshint expr:true, onevar:false */

/**
Provides the `Y.TreeView` widget.

@module gallery-sm-treeview
@main gallery-sm-treeview
**/

/**
TreeView widget.

@class TreeView
@constructor
@extends View
@uses Tree
@uses Tree.Labelable
@uses Tree.Openable
@uses Tree.Selectable
**/

var getClassName = Y.ClassNameManager.getClassName,

TreeView = Y.Base.create('treeView', Y.View, [
    Y.Tree,
    Y.Tree.Labelable,
    Y.Tree.Openable,
    Y.Tree.Selectable
], {
    // -- Public Properties ----------------------------------------------------

    /**
    CSS class names used by this treeview.

    @property {Object} classNames
    @param {String} canHaveChildren Class name indicating that a tree node can
        contain child nodes (whether or not it actually does).
    @param {String} children Class name for a list of child nodes.
    @param {String} hasChildren Class name indicating that a tree node has one
        or more child nodes.
    @param {String} icon Class name for a tree node's icon.
    @param {String} indicator Class name for an open/closed indicator.
    @param {String} label Class name for a tree node's user-visible label.
    @param {String} node Class name for a tree node item.
    @param {String} noTouch Class name added to the TreeView container when not
        using a touchscreen device.
    @param {String} open Class name indicating that a tree node is open.
    @param {String} row Class name for a row container encompassing the
        indicator and label within a tree node.
    @param {String} selected Class name for a tree node that's selected.
    @param {String} touch Class name added to the TreeView container when using
        a touchscreen device.
    @param {String} treeview Class name for the TreeView container.
    **/
    classNames: {
        canHaveChildren: getClassName('treeview-can-have-children'),
        children       : getClassName('treeview-children'),
        hasChildren    : getClassName('treeview-has-children'),
        icon           : getClassName('treeview-icon'),
        indicator      : getClassName('treeview-indicator'),
        label          : getClassName('treeview-label'),
        node           : getClassName('treeview-node'),
        noTouch        : getClassName('treeview-notouch'),
        open           : getClassName('treeview-open'),
        row            : getClassName('treeview-row'),
        selected       : getClassName('treeview-selected'),
        touch          : getClassName('treeview-touch'),
        treeview       : getClassName('treeview')
    },

    /**
    Whether or not this TreeView has been rendered.

    @property {Boolean} rendered
    @default false
    **/
    rendered: false,

    /**
    Default templates used to render this TreeView.

    @property {Object} templates
    **/
    templates: Y.TreeView.Templates,

    // -- Protected Properties -------------------------------------------------

    /**
    Simple way to type-check that this is a TreeView instance.

    @property {Boolean} _isYUITreeView
    @default true
    @protected
    **/
    _isYUITreeView: true,

    /**
    Cached value of the `lazyRender` attribute.

    @property {Boolean} _lazyRender
    @protected
    **/

    // -- Lifecycle Methods ----------------------------------------------------

    initializer: function (config) {
        if (config && config.templates) {
            this.templates = Y.merge(this.templates, config.templates);
        }

        this._renderQueue = {};
        this._attachTreeViewEvents();
    },

    destructor: function () {
        clearTimeout(this._renderTimeout);
        this._detachTreeViewEvents();

        this._renderQueue = null;
    },

    // -- Public Methods -------------------------------------------------------

    destroyNode: function (node, options) {
        node._htmlNode = null;
        return Y.Tree.prototype.destroyNode.call(this, node, options);
    },

    /**
    Returns the HTML node (as a `Y.Node` instance) associated with the specified
    `Tree.Node` instance, if any.

    @method getHTMLNode
    @param {Tree.Node} treeNode Tree node.
    @return {Node} `Y.Node` instance associated with the given tree node, or
        `undefined` if one was not found.
    **/
    getHTMLNode: function (treeNode) {
        if (!treeNode._htmlNode) {
            treeNode._htmlNode = this.get('container').one('#' + treeNode.id);
        }

        return treeNode._htmlNode;
    },

    /**
    Renders this TreeView into its container.

    If the container hasn't already been added to the current document, it will
    be appended to the `<body>` element.

    @method render
    @chainable
    **/
    render: function () {
        var container     = this.get('container'),
            isTouchDevice = 'ontouchstart' in Y.config.win;

        container.addClass(this.classNames.treeview);
        container.addClass(this.classNames[isTouchDevice ? 'touch' : 'noTouch']);

        this._childrenNode = this.renderChildren(this.rootNode, {
            container: container
        });

        if (!container.inDoc()) {
            Y.one('body').append(container);
        }

        this.rendered = true;

        return this;
    },

    /**
    Renders the children of the specified tree node.

    If a container is specified, it will be assumed to be an existing rendered
    tree node, and the children will be rendered (or re-rendered) inside it.

    @method renderChildren
    @param {Tree.Node} treeNode Tree node whose children should be rendered.
    @param {Object} [options] Options.
        @param {Node} [options.container] `Y.Node` instance of a container into
            which the children should be rendered. If the container already
            contains rendered children, they will be re-rendered in place.
    @return {Node} `Y.Node` instance containing the rendered children.
    **/
    renderChildren: function (treeNode, options) {
        options || (options = {});

        var container    = options.container,
            childrenNode = container && container.one('>.' + this.classNames.children),
            lazyRender   = this._lazyRender;

        if (!childrenNode) {
            childrenNode = Y.Node.create(this.templates.children({
                classNames: this.classNames,
                node      : treeNode,
                treeview  : this // not currently used, but may be useful for custom templates
            }));
        }

        if (treeNode.hasChildren()) {
            childrenNode.set('aria-expanded', treeNode.isOpen());

            for (var i = 0, len = treeNode.children.length; i < len; i++) {
                var child = treeNode.children[i];

                this.renderNode(child, {
                    container     : childrenNode,
                    renderChildren: !lazyRender || child.isOpen()
                });
            }
        }

        // Keep track of whether or not this node's children have been rendered
        // so we'll know whether we need to render them later if the node is
        // opened.
        treeNode.state.renderedChildren = true;

        if (container) {
            container.append(childrenNode);
        }

        return childrenNode;
    },

    /**
    Renders the specified tree node and its children (if any).

    If a container is specified, the rendered node will be appended to it.

    @method renderNode
    @param {Tree.Node} treeNode Tree node to render.
    @param {Object} [options] Options.
        @param {Node} [options.container] `Y.Node` instance of a container to
            which the rendered tree node should be appended.
        @param {Boolean} [options.renderChildren=false] Whether or not to render
            this node's children.
    @return {Node} `Y.Node` instance of the rendered tree node.
    **/
    renderNode: function (treeNode, options) {
        options || (options = {});

        var classNames     = this.classNames,
            hasChildren    = treeNode.hasChildren(),
            htmlNode       = treeNode._htmlNode,
            nodeClassNames = {},
            className;

        // Build the hash of CSS classes for this node.
        nodeClassNames[classNames.node]            = true;
        nodeClassNames[classNames.canHaveChildren] = !!treeNode.canHaveChildren;
        nodeClassNames[classNames.hasChildren]     = hasChildren;

        if (htmlNode) {
            // This node has already been rendered, so we just need to update
            // the DOM instead of re-rendering it from scratch.
            htmlNode.one('.' + classNames.label).setHTML(treeNode.label);

            for (className in nodeClassNames) {
                if (nodeClassNames.hasOwnProperty(className)) {
                    htmlNode.toggleClass(className, nodeClassNames[className]);
                }
            }
        } else {
            // This node hasn't been rendered yet, so render it from scratch.
            var enabledClassNames = [];

            for (className in nodeClassNames) {
                if (nodeClassNames.hasOwnProperty(className) && nodeClassNames[className]) {
                    enabledClassNames.push(className);
                }
            }

            htmlNode = treeNode._htmlNode = Y.Node.create(this.templates.node({
                classNames    : classNames,
                nodeClassNames: enabledClassNames,
                node          : treeNode,
                treeview      : this // not currently used, but may be useful for custom templates
            }));
        }

        this._syncNodeOpenState(treeNode, htmlNode);
        this._syncNodeSelectedState(treeNode, htmlNode);

        if (hasChildren) {
            if (options.renderChildren) {
                this.renderChildren(treeNode, {
                    container: htmlNode
                });
            }
        } else {
            // If children were previously rendered but this node no longer has
            // children, remove the empty child list.
            var childrenNode = htmlNode.one('>.' + classNames.children);

            if (childrenNode) {
                childrenNode.remove(true);
            }
        }

        treeNode.state.rendered = true;

        if (options.container) {
            options.container.append(htmlNode);
        }

        return htmlNode;
    },

    // -- Protected Methods ----------------------------------------------------

    _attachTreeViewEvents: function () {
        this._treeViewEvents || (this._treeViewEvents = []);

        var classNames = this.classNames,
            container  = this.get('container');

        this._treeViewEvents.push(
            // Custom events.
            this.after({
                add              : this._afterAdd,
                clear            : this._afterClear,
                close            : this._afterClose,
                multiSelectChange: this._afterTreeViewMultiSelectChange, // sheesh
                open             : this._afterOpen,
                remove           : this._afterRemove,
                select           : this._afterSelect,
                unselect         : this._afterUnselect
            }),

            // DOM events.
            container.on('mousedown', this._onMouseDown, this),

            container.delegate('click', this._onIndicatorClick,
                '.' + classNames.indicator, this),

            container.delegate('click', this._onRowClick,
                '.' + classNames.row, this),

            container.delegate('dblclick', this._onRowDoubleClick,
                '.' + classNames.canHaveChildren + ' > .' + classNames.row, this)
        );
    },

    _detachTreeViewEvents: function () {
        (new Y.EventHandle(this._treeViewEvents)).detach();
    },

    _processRenderQueue: function () {
        if (!this.rendered) {
            return;
        }

        var queue = this._renderQueue,
            node;

        for (var id in queue) {
            if (queue.hasOwnProperty(id)) {
                node = this.getNodeById(id);

                if (node) {
                    this.renderNode(node, queue[id]);
                }
            }
        }

        this._renderQueue = {};
    },

    _queueRender: function (node, options) {
        if (!this.rendered) {
            return;
        }

        var queue = this._renderQueue,
            self  = this;

        clearTimeout(this._renderTimeout);

        queue[node.id] = Y.merge(queue[node.id], options);

        this._renderTimeout = setTimeout(function () {
            self._processRenderQueue();
        }, 15);

        return this;
    },

    /**
    Setter for the `lazyRender` attribute.

    Just caches the value in a property for faster lookups.

    @method _setLazyRender
    @return {Boolean} Value.
    @protected
    **/
    _setLazyRender: function (value) {
        /*jshint boss:true */
        return this._lazyRender = value;
    },

    _syncNodeOpenState: function (node, htmlNode) {
        htmlNode || (htmlNode = this.getHTMLNode(node));

        if (!htmlNode) {
            return;
        }

        if (node.isOpen()) {
            htmlNode
                .addClass(this.classNames.open)
                .set('aria-expanded', true);
        } else {
            htmlNode
                .removeClass(this.classNames.open)
                .set('aria-expanded', false);
        }
    },

    _syncNodeSelectedState: function (node, htmlNode) {
        htmlNode || (htmlNode = this.getHTMLNode(node));

        if (!htmlNode) {
            return;
        }

        var multiSelect = this.get('multiSelect');

        if (node.isSelected()) {
            htmlNode.addClass(this.classNames.selected);

            if (multiSelect) {
                // It's only necessary to set aria-selected when multi-select is
                // enabled and focus can't be used to track the selection state.
                htmlNode.set('aria-selected', true);
            } else {
                htmlNode.set('tabIndex', 0);
            }
        } else {
            htmlNode
                .removeClass(this.classNames.selected)
                .removeAttribute('tabIndex');

            if (multiSelect) {
                htmlNode.set('aria-selected', false);
            }
        }
    },

    // -- Protected Event Handlers ---------------------------------------------

    _afterAdd: function (e) {
        // Nothing to do if the treeview hasn't been rendered yet.
        if (!this.rendered) {
            return;
        }

        var parent       = e.parent,
            parentIsRoot = parent.isRoot(),
            treeNode     = e.node,

            htmlChildren,
            htmlParent;

        if (parentIsRoot) {
            htmlChildren = this._childrenNode;
        } else {
            htmlParent   = this.getHTMLNode(parent),
            htmlChildren = htmlParent && htmlParent.one('>.' + this.classNames.children);
        }

        if (htmlChildren) {
            // Parent's children have already been rendered. Instead of
            // re-rendering all of them, just render the new node and insert it
            // at the correct position.
            htmlChildren.insert(this.renderNode(treeNode, {
                renderChildren: !this._lazyRender || treeNode.isOpen()
            }), e.index);

            // Schedule the parent node to be re-rendered in order to update its
            // state. This is done asynchronously and throttled in order to
            // avoid re-rendering the parent many times if multiple children are
            // added in quick succession.
            if (!parentIsRoot) {
                this._queueRender(parent);
            }
        } else if (!parentIsRoot) {
            // Either the parent hasn't been rendered yet, or its children
            // haven't been rendered yet. Schedule it to be rendered. This is
            // done asynchronously and throttled in order to avoid re-rendering
            // the parent many times if multiple children are added in quick
            // succession.
            this._queueRender(parent, {renderChildren: true});
        }
    },

    _afterClear: function () {
        // Nothing to do if the treeview hasn't been rendered yet.
        if (!this.rendered) {
            return;
        }

        clearTimeout(this._renderTimeout);
        this._renderQueue = {};

        delete this._childrenNode;
        this.rendered = false;

        this.get('container').empty();
        this.render();
    },

    _afterClose: function (e) {
        if (this.rendered) {
            this._syncNodeOpenState(e.node);
        }
    },

    _afterOpen: function (e) {
        if (!this.rendered) {
            return;
        }

        var treeNode = e.node,
            htmlNode = this.getHTMLNode(treeNode);

        // If this node's children haven't been rendered yet, render them.
        if (!treeNode.state.renderedChildren) {
            this.renderChildren(treeNode, {
                container: htmlNode
            });
        }

        this._syncNodeOpenState(treeNode, htmlNode);
    },

    _afterRemove: function (e) {
        if (!this.rendered) {
            return;
        }

        var treeNode = e.node,
            parent   = e.parent;

        // If this node is in the render queue, remove it from the queue.
        if (this._renderQueue[treeNode.id]) {
            delete this._renderQueue[treeNode.id];
        }

        // Remove DOM nodes associated with this node and any of its
        // descendants, and mark all nodes as unrendered so that they'll be
        // re-rendered if they're reinserted in the tree.
        var htmlNode = this.getHTMLNode(treeNode);

        if (htmlNode) {
            htmlNode
                .empty()
                .remove(true);

            treeNode._htmlNode = null;
        }

        if (!treeNode.state.destroyed) {
            treeNode.traverse(function (node) {
                node._htmlNode              = null;
                node.state.rendered         = false;
                node.state.renderedChildren = false;
            });
        }

        // Re-render the parent to update its state if this was its last child.
        if (parent && !parent.hasChildren()) {
            this.renderNode(parent);
        }
    },

    _afterSelect: function (e) {
        if (this.rendered) {
            this._syncNodeSelectedState(e.node);
        }
    },

    _afterTreeViewMultiSelectChange: function (e) {
        if (!this.rendered) {
            return;
        }

        var container = this.get('container'),
            rootList  = container.one('> .' + this.classNames.children),
            htmlNodes = container.all('.' + this.classNames.node);

        if (e.newVal) {
            rootList.set('aria-multiselectable', true);
            htmlNodes.set('aria-selected', false);
        } else {
            // When multiselect is disabled, aria-selected must not be set on
            // any nodes, since focus is used to indicate selection.
            rootList.removeAttribute('aria-multiselectable');
            htmlNodes.removeAttribute('aria-selected');
        }
    },

    _afterUnselect: function (e) {
        if (this.rendered) {
            this._syncNodeSelectedState(e.node);
        }
    },

    _onIndicatorClick: function (e) {
        var rowNode = e.currentTarget.ancestor('.' + this.classNames.row);

        // Indicator clicks shouldn't toggle selection state, so don't allow
        // this event to propagate to the _onRowClick() handler.
        e.stopImmediatePropagation();

        this.getNodeById(rowNode.getData('node-id')).toggleOpen();
    },

    _onMouseDown: function (e) {
        // This prevents the tree from momentarily grabbing focus before focus
        // is set on a node.
        e.preventDefault();
    },

    _onRowClick: function (e) {
        // Ignore buttons other than the left button.
        if (e.button > 1) {
            return;
        }

        var node = this.getNodeById(e.currentTarget.getData('node-id'));

        if (this.get('multiSelect')) {
            node[node.isSelected() ? 'unselect' : 'select']();
        } else {
            node.select();
        }
    },

    _onRowDoubleClick: function (e) {
        // Ignore buttons other than the left button.
        if (e.button > 1) {
            return;
        }

        this.getNodeById(e.currentTarget.getData('node-id')).toggleOpen();
    }
}, {
    ATTRS: {
        /**
        When `true`, a node's children won't be rendered until the first time
        that node is opened.

        This can significantly speed up the time it takes to render a large
        tree, but might not make sense if you're using CSS that doesn't hide the
        contents of closed nodes.

        @attribute {Boolean} lazyRender
        @default true
        **/
        lazyRender: {
            lazyAdd: false, // to ensure that the setter runs on init
            setter : '_setLazyRender',
            value  : true
        }
    }
});

Y.TreeView = Y.mix(TreeView, Y.TreeView);


}, 'gallery-2013.06.20-02-07', {
    "requires": [
        "base-build",
        "classnamemanager",
        "template-micro",
        "tree",
        "tree-labelable",
        "tree-openable",
        "tree-selectable",
        "view"
    ],
    "skinnable": true
});