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

define([
    "../lib/object",
    "./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(objectFuns, LineWithActionsWidget, _Container, _TemplatedMixin, _WidgetBase, _WidgetsInTemplateMixin, registry, baseArray, declare, event, lang, Source, domClass, domConstruct, fx, query, templateString) {

    function get(selector, item) {
        if ( lang.isFunction(selector) ) {
            return selector(item);
        } else {
            return item[selector || 'title'];
        }
    }
    
    return declare([_WidgetBase,_TemplatedMixin,_WidgetsInTemplateMixin,_Container],{
        templateString: templateString,
        baseClass: 'rftSelector',

        title: "",
        selectedActions: null,
        itemActions: null,
        itemTitle: 'title',
        // 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 userActions =
                    lang.isFunction(this.selectedActions) ?
                    this.selectedActions() :
                    this.selectedActions;

            var actions = objectFuns.map(userActions||{},function(action,actionName){
                return {
                    callback: action.callback &&
                              lang.hitch(this,this._onSelectedAction,
                                         action.callback),
                    properties: {
                        blockButton: true,
                        label: action.title || actionName,
                        icon: action.icon,
                        tooltip: action.description
                    }

                };
            }, this);
            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.own(this._selectorLine.on('click',lang.hitch(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", get(this.itemTitle,item));
            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,this);
            }
        },

        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");
            }
        },
        removeItem: function(item) {
            var nodes = this._source ?
                        this._source.getAllNodes() :
                        this.optionsNode.childNodes;
            baseArray.forEach(nodes, function(node) {
                var widget = registry.byNode(node);
                if ( widget && this.itemEquals ?
                               this.itemEquals(widget.__item,item) :
                               widget.__item === item ) {
                    widget.destroyRecursive();
                    if ( this._source ) { this._source.delItem(widget.id); }
                }
            }, this);
        },
        _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: get(this.itemTitle,item)
            });
        },
        _createLineNode: function(item) {
            var userActions =
                    lang.isFunction(this.itemActions) ?
                    this.itemActions(item) :
                    this.itemActions;
            var actions = objectFuns.map(userActions||{},function(action,actionName){
                return {
                    callback: action.callback &&
                              lang.partial(action.callback,item,this),
                    properties: {
                        blockButton: false,
                        showLabel: false,
                        icon: action.icon + " black",
                        tooltip: action.description
                    }
                };
            }, this);
            var w = new LineWithActionsWidget({
                title: get(this.itemTitle,item),
                actions: actions,
                __item: item
            });
            w.startup();
            this.own(w.on("click", lang.hitch(this, '_onSelect', item, w)));
            return w.domNode;
        },

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

        destroy: function() {
            if ( this._source ) { this._source.destroy(); }
            this.inherited(arguments);
        }
    });
});