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

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,
            title: "",
            baseClass: 'rftSelector',
            modifiers: 'blue',
            _folded: true,
            _titleLine: null,
            _selectorLine: null,
            _selectedItem: null,

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

                this._titleLine = new LineWithActionsWidget({
                    title: this.title,
                    modifiers: this.modifiers,
                    actions: {
                        "Include in survey" : {
                            callback: lang.hitch(this, this._onInclude),
                            properties: {
                                blockButton: true,
                                modifiers: this.modifiers,
                                icon: "Accept",
                                label: "Include"
                            }
                        }
                    }
                },this.titleNode);
                this._titleLine.startup();

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

                fx.wipeOut({
                    node: this.optionsNode
                }).play();
            },
            _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);
            },
            _onInclude: function() {
                if (this._selectedItem) {
                    this.onInclude(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 w = new LineWithActionsWidget({
                    title: item.title,
                    actions: {
                        "Info" : {
                            callback: function() {
                                item.description && alert(item.description);
                            },
                            properties: {
                                blockButton: false,
                                showLabel: false,
                                icon: "Inspect"
                            }
                        }
                    }
                }).placeAt(this.optionsNode);
                w.startup();
                w.on("click", lang.hitch(this, this._onSelect, item, w));
            },
            onSelect: function(item) {},
            onInclude: function(item) {}
        });
});