source: Dev/trunk/client/qed/widgets/Selector.js @ 426

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

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

        _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();

            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,
                            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));
        },
        _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,displayTitle) {
            var actions = {};
            var action;
            if (this.itemActions) {
                for (var actionName in this.itemActions) {
                    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: displayTitle || item.title,
                actions: actions
            }).placeAt(this.optionsNode);
            w.startup();
            w.on("click", lang.hitch(this, this._onSelect, item, w));
        },

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