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

define([
    'dojo/_base/declare',
    'dojo/_base/array',
    'dijit/registry',
    'dojo/_base/lang',
    'dojo/fx',
    'dijit/_WidgetBase',
    'dijit/_TemplatedMixin',
    'dijit/_WidgetsInTemplateMixin',
    'dijit/_Container',
    './LineWithActionsWidget',
    'dojo/text!./templates/Selector.html',
    'dojo/dom-class'
    ],function(
        declare,
        baseArray,
        registry,
        lang,
        fx,
        _WidgetBase,
        _TemplatedMixin,
        _WidgetsInTemplateMixin,
        _Container,
        LineWithActionsWidget,
        templateString,
        domClass
        ){
        return declare('rft.ui.Selector',[_WidgetBase,_TemplatedMixin,_WidgetsInTemplateMixin,_Container],{
            templateString: templateString,
            title: "ERROR: NULL_TOPIC",
            baseClass: 'rftSelector',
            modifiers: 'blue',
            currentlySelectedId: null,
            controller: null,   // Use events/pubsub instead of a controller variable? Decoupling!

            postCreate: function() {
                domClass.add(this.domNode, this.modifiers);
                domClass.add(this.selectedColorNode, "pending");
                this.domNode.dataset["topic"] = this.topic;

                new LineWithActionsWidget({
                    title: this.topic,
                    modifiers: this.modifiers,
                    actions: {
                        "AddToSurvey" : {
                            callback: lang.hitch(this, this.includeQuestion),
                            properties: {
                                blockButton: true,
                                modifiers: this.modifiers,
                                icon: "Accept",
                                label: "Include"
                            }
                        }
                    }
                },this.titleNode);

                this.selectorLine = new LineWithActionsWidget({
                    title: 'None',
                    modifiers: this.modifiers,
                    actions: {
                        "ToggleDropdown" : {
                            callback: lang.hitch(this, this._toggleDropdown()),
                            properties: {
                                blockButton: true,
                                modifiers: this.modifiers,
                                showLabel: false,
                                icon: "HalfArrowDown"
                            }
                        }
                    }
                },this.selectedItemNode);
            },
            _toggleDropdown: function() {
                var node = this.optionsNode;
                var show = fx.wipeIn({
                    node: node
                });
                var hide = fx.wipeOut({
                    node: node
                });
                hide.play();
                var folded = true;
                return function(e) {
                    if ( folded ) {
                        var downArrowIcon = dojo.query(".rftBlockButton .rftIconHalfArrowDown", this.selectorLine.buttonsNode)[0];
                        if (downArrowIcon){
                            domClass.replace(downArrowIcon, "rftIconHalfArrowUp", "rftIconHalfArrowDown");
                        }
                        show.play();
                        folded = false;
                    } else {
                        var upArrowIcon = dojo.query(".rftBlockButton .rftIconHalfArrowUp", this.selectorLine.buttonsNode)[0];
                        if (upArrowIcon){
                            domClass.replace(upArrowIcon, "rftIconHalfArrowDown", "rftIconHalfArrowUp");
                        }
                        hide.play();
                        folded = true;

                    }
                    e.preventDefault();
                    e.stopPropagation();
                };
            },
            addQuestion: function(questionId) {
                var question = this.controller.getQuestion(questionId);
                if (question) {
                    var w = new LineWithActionsWidget({
                        title: question.title,
                        questionId: questionId,
                        actions: {
                            "InfoHover" : {
                                callback: dojo.partial(this.infoFunction, this),
                                properties: {
                                    blockButton: false,
                                    showLabel: false,
                                    icon: "Inspect"
                                }
                            }
                        }
                    });
                    w.placeAt(this.optionsNode);
                    w.on("click", lang.hitch(this, function(){
                        this.selectQuestion(questionId);
                        this._toggleDropdown();
                    }, questionId));

                }    
            },
            infoFunction: function(selector) {
                var question = selector.controller.getQuestion(this.questionId);
                console.log(question);
                alert("Some info here!");
            },
            includeQuestion: function() {
                if (this.currentlySelectedId) {
                    this.controller.IncludeQuestion(this.currentlySelectedId)
                } else {
                    return false;
                }
            },
            selectQuestion: function(questionId) {
                /* TODO: TEST THOROUGHLY! */
                var question = this.controller.getQuestion(questionId);
                if (question) {
                    this.currentlySelectedId = questionId;
                    this.selectorLine.questionId = questionId;
                    this.selectorLine.set("title", question.title);
                    // Iterate through optionsNode, add "selected" class to currently selected node
                    baseArray.forEach(this.optionsNode.childNodes, function(node, index){
                        var line = registry.byNode(node);
                        if (line) {
                            if (line.questionId == this.currentlySelectedId) {
                                domClass.add(line.domNode, "inheritBgColor light");
                            } else {
                                domClass.remove(line.domNode, "inheritBgColor light");
                            }
                        }
                    }, this);
                }
            }
        });
});