source: Dev/trunk/src/client/qed-client/widgets/Selector.js @ 472

define([
    "./LineWithActionsWidget",
    "dijit/_Container",
    "dijit/_TemplatedMixin",
    "dijit/_WidgetBase",
    "dijit/_WidgetsInTemplateMixin",
    "dijit/registry",
    "dojo/_base/array",
    "dojo/_base/declare",
    "dojo/_base/event",
    "dojo/_base/lang",
    "dojo/dnd/Source",
    "dojo/dom-class",
    "dojo/dom-construct",
    "dojo/fx",
    "dojo/query",
    "dojo/text!./templates/Selector.html"
], function(LineWithActionsWidget, _Container, _TemplatedMixin, _WidgetBase, _WidgetsInTemplateMixin, registry, baseArray, declare, event, lang, Source, domClass, domConstruct, fx, query, templateString) {

    return declare([_WidgetBase,_TemplatedMixin,_WidgetsInTemplateMixin,_Container],{
        templateString: templateString,
        baseClass: 'rftSelector',

        title: "",
        selectedActions: null,
        itemActions: null,
        // main selector action: Object
        //    title:
        //    description:
        //    icon:
        dndType: null,

        _source: null,
        _folded: true,
        _titleLine: null,
        _selectorLine: null,
        _selectedItem: null,

        startup: function() {
            if ( this._started ){ return; }
            this.inherited(arguments);
            domClass.add(this.selectedColorNode, "pending");

            this._createTitleLine();
            this._createSelectorLine();
            if (this.dndType) {
                this._createSource();
            }

            fx.wipeOut({
                node: this.optionsNode
            }).play();
        },
        _createTitleLine: function() {
            var actions = {};
            var action = null;
            if ( this.selectedActions !== null ) {
                for (var actionName in this.selectedActions) {
                    if ( this.selectedActions.hasOwnProperty(actionName) ) {
                        action = this.selectedActions[actionName];
                        actions[actionName] = {
                            callback: action.callback &&
                                    lang.hitch(this,this._onSelectedAction,
                                            action.callback),
                            properties: {
                                blockButton: true,
                                label: action.title || actionName,
                                icon: action.icon,
                                tooltip: action.description
                            }

                        };
                    }
                }
            }

            this._titleLine = new LineWithActionsWidget({
                title: this.title,
                actions: actions
            },this.titleNode);
            this._titleLine.startup();
        },
        _createSelectorLine: function() {
            this._selectorLine = new LineWithActionsWidget({
                title: 'None',
                actions: {
                    "Toggle dropdown" : {
                        callback: lang.hitch(this, this.onToggle),
                        properties: {
                            blockButton: true,
                            showLabel: false,
                            icon: "HalfArrowDown"
                        }
                    }
                }
            },this.selectedItemNode);
            this._selectorLine.startup();
            this._selectorLine.on('click',lang.hitch(this, this.onToggle));
        },
        _createSource: function() {
            this._source = new Source(this.optionsNode, {
                singular: true,
                delay: 5,
                selfAccept: false,
                copyOnly: true,
                withHandles: this.withHandles,
                creator: lang.hitch(this, "_createNode")
            });
        },
        _onSelect: function(item, widget) {
            this._selectedItem = item;
            this.onToggle();
            this._selectorLine.set("title", item.title);
            baseArray.forEach(this.optionsNode.childNodes, function(node){
                var line = registry.byNode(node);
                if (line) {
                    if (line === widget) {
                        domClass.add(line.domNode, "inheritBgColor light");
                    } else {
                        domClass.remove(line.domNode, "inheritBgColor light");
                    }
                }
            }, this);
            this.onSelect(item);
        },
        _onSelectedAction: function(callback) {
            if (this._selectedItem && callback) {
                callback(this._selectedItem);
            }
        },

        onToggle: function(evt) {
            if (this._folded) {
                var downArrowIcon = query(".rftBlockButton .rftIconHalfArrowDown", this._selectorLine.buttonsNode)[0];
                if (downArrowIcon){
                    domClass.replace(downArrowIcon, "rftIconHalfArrowUp", "rftIconHalfArrowDown");
                }
                fx.wipeIn({
                    node: this.optionsNode
                }).play();
                this._folded = false;
            } else {
                var upArrowIcon = query(".rftBlockButton .rftIconHalfArrowUp", this._selectorLine.buttonsNode)[0];
                if (upArrowIcon){
                    domClass.replace(upArrowIcon, "rftIconHalfArrowDown", "rftIconHalfArrowUp");
                }
                fx.wipeOut({
                    node: this.optionsNode
                }).play();
                this._folded = true;
            }
            if ( evt ) { event.stop(evt); }
            return false;
        },

        addItem: function(item) {
            if ( this._source ) {
                this._source.insertNodes(false,[item]);
            } else {
                var node = this._createLineNode(item);
                domConstruct.place(node, this.optionsNode, "last");
            }
        },
        _createNode: function(item, hint) {
            var node = hint === "avatar" ?
                    this._createAvatarNode(item) : this._createLineNode(item);
            return node && {
                node: node,
                data: lang.clone(item),
                type: [this.dndType]
            };
        },
        _createAvatarNode: function(item) {
            return domConstruct.create("div",{
                'class': 'dragAvatar',
                innerHTML: item.title
            });
        },
        _createLineNode: function(item) {
            var actions = {};
            var action;
            if (this.itemActions) {
                for (var actionName in this.itemActions) {
                    if ( this.itemActions.hasOwnProperty(actionName) ) {
                        action = this.itemActions[actionName];
                        actions[actionName] = {
                            callback: action.callback && lang.partial(action.callback,item),
                            properties: {
                                blockButton: false,
                                showLabel: false,
                                icon: action.icon + " black",
                                tooltip: action.description
                            }
                        };
                    }
                }
            }
            var w = new LineWithActionsWidget({
                title: item.title,
                actions: actions
            });
            w.startup();
            w.on("click", lang.hitch(this, this._onSelect, item, w));
            return w.domNode;
        },

        onSelect: function(/*item*/) {}
    });
});