source: Dev/branches/rest-dojo-ui/client/rft/ui/Selector.js @ 383

define([
    'dojo/_base/declare',
    'dojo/_base/array',
    'dijit/registry',
    'dojo/_base/lang',
    'dojo/_base/event',
    'dojo/fx',
    'dijit/_WidgetBase',
    'dijit/_TemplatedMixin',
    'dijit/_WidgetsInTemplateMixin',
    'dijit/_Container',
    './LineWithActionsWidget',
    'dojo/text!./templates/Selector.html',
    'dojo/dom-class',
    ],function(
        declare,
        baseArray,
        registry,
        lang,
        event,
        fx,
        _WidgetBase,
        _TemplatedMixin,
        _WidgetsInTemplateMixin,
        _Container,
        LineWithActionsWidget,
        templateString,
        domClass
        ){
        return declare('rft.ui.Selector',[_WidgetBase,_TemplatedMixin,_WidgetsInTemplateMixin,_Container],{
            templateString: templateString,
            baseClass: 'rftSelector',
            modifiers: 'blue',

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

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

            startup: function() {
                domClass.add(this.domNode, this.modifiers);
                domClass.add(this.selectedColorNode, "pending");

                this._createTitleLine();
                this._createSelectorLine();

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

                        };
                    }
                }

                this._titleLine = new LineWithActionsWidget({
                    title: this.title,
                    modifiers: this.modifiers,
                    actions: actions
                },this.titleNode);
                this._titleLine.startup();
            },
            _createSelectorLine: function() {
                this._selectorLine = new LineWithActionsWidget({
                    title: 'None',
                    modifiers: this.modifiers,
                    actions: {
                        "Toggle dropdown" : {
                            callback: lang.hitch(this, this.onToggle),
                            properties: {
                                blockButton: true,
                                modifiers: this.modifiers,
                                showLabel: false,
                                icon: "HalfArrowDown"
                            }
                        }
                    }
                },this.selectedItemNode);
                this._selectorLine.startup();
                this._selectorLine.on('click',lang.hitch(this, this.onToggle));
            },
            _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 = dojo.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 = dojo.query(".rftBlockButton .rftIconHalfArrowUp", this._selectorLine.buttonsNode)[0];
                    if (upArrowIcon){
                        domClass.replace(upArrowIcon, "rftIconHalfArrowDown", "rftIconHalfArrowUp");
                    }
                    fx.wipeOut({
                        node: this.optionsNode
                    }).play();
                    this._folded = true;
                }
                evt && event.stop(evt);
                return false;
            },

            addItem: function(item) {
                var actions = {};
                var action;
                if (this.itemActions) {
                    for (var actionName in this.itemActions) {
                        action = this.itemActions[actionName];
                        actions[actionName] = {
                            callback: function(){action.callback && action.callback(item);},
                            properties: {
                                blockButton: false,
                                showLabel: false,
                                icon: action.icon,
                                tooltip: action.description
                            }
                        }
                    }
                }
                var w = new LineWithActionsWidget({
                    title: item.title,
                    actions: actions
                }).placeAt(this.optionsNode);
                w.startup();
                w.on("click", lang.hitch(this, this._onSelect, item, w));
            },

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