Changeset 360 for Dev/branches/rest-dojo-ui/client/rft/ui/Selector.js

Timestamp:

07/13/12 15:13:46 (13 years ago)

Author:

hendrikvanantwerpen

Message:

Removed controller dependency of Selector and SurveyList?.
Selector emits events now. No id's are used, pass objects around.
Fixed selector wipe in/out confusion for first click.
Read questions from db, no mockup data used anymore in survey page.
Added some sample question to db config, because they cannot be created yet.

Location:

Dev/branches/rest-dojo-ui/client

Files:

• . (modified) (1 prop)
• rft/ui/Selector.js (modified) (5 diffs)

Dev/branches/rest-dojo-ui/client/rft/ui/Selector.js

@@ -4 +4 @@
     'dijit/registry',
     'dojo/_base/lang',
+    'dojo/_base/event',
     'dojo/fx',
     'dijit/_WidgetBase',
@@ -17 +18 @@
         registry,
         lang,
+        event,
         fx,
         _WidgetBase,
@@ -28 +30 @@
         return declare('rft.ui.Selector',[_WidgetBase,_TemplatedMixin,_WidgetsInTemplateMixin,_Container],{
             templateString: templateString,
-            title: "ERROR: NULL_TOPIC",
+            title: "",
             baseClass: 'rftSelector',
             modifiers: 'blue',
-            currentlySelectedId: null,
-            controller: null,   // Use events/pubsub instead of a controller variable? Decoupling!
+            _folded: true,
+            _titleLine: null,
+            _selectorLine: null,
+            _selectedItem: null,
 
-            postCreate: function() {
+            startup: function() {
                 domClass.add(this.domNode, this.modifiers);
                 domClass.add(this.selectedColorNode, "pending");
-                this.domNode.dataset["topic"] = this.topic;
 
-                new LineWithActionsWidget({
-                    title: this.topic,
+                this._titleLine = new LineWithActionsWidget({
+                    title: this.title,
                     modifiers: this.modifiers,
                     actions: {
-                        "AddToSurvey" : {
-                            callback: lang.hitch(this, this.includeQuestion),
+                        "Include in survey" : {
+                            callback: lang.hitch(this, this._onInclude),
                             properties: {
                                 blockButton: true,
@@ -54 +57 @@
                     }
                 },this.titleNode);
+                this._titleLine.startup();
 
-                this.selectorLine = new LineWithActionsWidget({
+                this._selectorLine = new LineWithActionsWidget({
                     title: 'None',
                     modifiers: this.modifiers,
                     actions: {
-                        "ToggleDropdown" : {
-                            callback: lang.hitch(this, this._toggleDropdown()),
+                        "Toggle dropdown" : {
+                            callback: lang.hitch(this, this._onToggleDropdown),
                             properties: {
                                 blockButton: true,
@@ -70 +74 @@
                     }
                 },this.selectedItemNode);
+                this._selectorLine.startup();
+
+                fx.wipeOut({
+                    node: this.optionsNode
+                }).play();
             },
-            _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");
+            _onSelect: function(item, widget) {
+                this._selectedItem = item;
+                this._onToggleDropdown();
+                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");
                         }
-                        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();
-                };
+                }, this);
+                this.onSelect(item);
             },
-            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"
-                                }
+            _onInclude: function() {
+                if (this._selectedItem) {
+                    this.onInclude(this._selectedItem);
+                }
+            },
+            _onToggleDropdown: 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"
                             }
                         }
-                    });
-                    w.placeAt(this.optionsNode);
-                    w.on("click", lang.hitch(this, function(){
-                        this.selectQuestion(questionId);
-                        this._toggleDropdown();
-                    }, questionId));
-
-                }    
+                    }
+                }).placeAt(this.optionsNode);
+                w.startup();
+                w.on("click", lang.hitch(this, this._onSelect, item, w));
             },
-            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);
-                }
-            }
+            onSelect: function(item) {},
+            onInclude: function(item) {}
         });
 });