Changeset 355

Timestamp:

07/11/12 18:45:51 (13 years ago)

Author:

tjcschipper

Message:

• surveyEditor more or less works! Only needed change is addition of "topic" property in question objects (database-side), and the change from "category"(string) to "categories"(string[]).
• surveyEditor still needs removal function and infofunction to be written properly!
• Added all files belonging to SurveyAdvanced?. Most do not work properly yet, but at least there will not be a 404 page when you click btnPreview on survey.html.

Location:

Dev/branches/rest-dojo-ui/client/rft

Files:

• css/layout.css (modified) (13 diffs)
• css/rftLineWithButtons.css (modified) (1 diff)
• css/rftSelector.css (modified) (1 diff)
• css/surveyEditor.css (added)
• pages/survey.html (modified) (2 diffs)
• pages/survey.js (modified) (1 diff)
• pages/surveyAdvanced.html (added)
• pages/surveyAdvanced.js (added)
• ui/LineWithActionsWidget.js (modified) (1 diff)
• ui/Selector.js (modified) (6 diffs)
• ui/SurveyEditor.js (added)
• ui/SurveyEditorPreview.js (added)
• ui/SurveyEditorPreviewItem.js (added)
• ui/SurveyEditorToolkit.js (added)
• ui/SurveyListView.js (added)
• ui/templates/LineWithActionsWidget.html (modified) (1 diff)
• ui/templates/SurveyEditorPreview.html (added)
• ui/templates/SurveyEditorPreviewItem.html (added)
• ui/templates/SurveyListView.html (added)

Dev/branches/rest-dojo-ui/client/rft/css/layout.css

@@ -343 +343 @@
 .claro.blue .inheritBgColor {
     background-color: #0072bc;
+    color: #ffffff;
 }
 .claro div.green.inheritBgColor,
@@ -348 +349 @@
 .claro.green .inheritBgColor {
     background-color: #3aa605;
+    color: #ffffff;
 }
 .claro div.orange.inheritBgColor,
@@ -353 +355 @@
 .claro.orange .inheritBgColor {
     background-color: #ff5b12;
+    color: #ffffff;
 }
 .claro div.purple.inheritBgColor,
@@ -358 +361 @@
 .claro.purple .inheritBgColor {
     background-color: #6529b7;
+    color: #ffffff;
 }
 .claro div.red.inheritBgColor,
@@ -363 +367 @@
 .claro.red .inheritBgColor {
     background-color: #8c0310;
+    color: #ffffff;
 }
 .claro div.trans.inheritBgColor,
@@ -368 +373 @@
 .claro.trans .inheritBgColor {
     background-color: transparent;
+    color: #ffffff;
 }
 .claro div.blue.inheritBgColor.light,
@@ -373 +379 @@
 .claro.blue .inheritBgColor.light {
     background-color: #0794d1;
+    color: #ffffff;
 }
 .claro div.green.inheritBgColor.light,
@@ -378 +385 @@
 .claro.green .inheritBgColor.light {
     background-color: #79ca0a;
+    color: #ffffff;
 }
 .claro div.orange.inheritBgColor.light,
@@ -383 +391 @@
 .claro.orange .inheritBgColor.light {
     background-color: #ff9140;
+    color: #ffffff;
 }
 .claro div.purple.inheritBgColor.light,
@@ -388 +397 @@
 .claro.purple .inheritBgColor.light {
     background-color: #993dec;
+    color: #ffffff;
 }
 .claro div.red.inheritBgColor.light,
@@ -393 +403 @@
 .claro.red .inheritBgColor.light {
     background-color: #bd0013;
+    color: #ffffff;
 }
 
@@ -453 +464 @@
 
 
-
-
 /* Alignment */
 .claro .floatRight {
@@ -461 +470 @@
     padding: 0;
 }
+
+
+/* SurveyListView */
+.claro .rftSurveyListView {
+}
+.claro .rftSurveyListView .rftSurveyListViewContent {
+    height: 300px;
+    background: #444444;
+    overflow: auto;
+}
+.claro .rftSurveyListView .rftLineWithButtons .rftLineWithButtonsTitle {
+    max-width: 200px;
+    overflow: hidden;
+}

Dev/branches/rest-dojo-ui/client/rft/css/rftLineWithButtons.css

@@ -22 +22 @@
 }
 
-/* Colour settings */
-.claro div.blue.rftLineWithButtons,
-.claro .blue .rftLineWithButtons {
-    background-color: #0072bc;
+/* SurveyListView stuff */
+.claro div.blue.inheritBgColor.dojoDndItemAnchor,
+.claro .blue .inheritBgColor.dojoDndItemAnchor,
+.claro.blue .inheritBgColor.dojoDndItemAnchor {
+    background-color: #0794d1;
     color: #ffffff;
 }
-.claro div.red.rftLineWithButtons,
-.claro .red .rftLineWithButtons {
-    background-color: #8c0310;
+.claro div.green.inheritBgColor.dojoDndItemAnchor,
+.claro .green .inheritBgColor.dojoDndItemAnchor,
+.claro.green .inheritBgColor.dojoDndItemAnchor {
+    background-color: #79ca0a;
     color: #ffffff;
 }
-.claro div.green.rftLineWithButtons,
-.claro .green .rftLineWithButtons {
-    background-color: #3aa605;
+.claro div.orange.inheritBgColor.dojoDndItemAnchor,
+.claro .orange .inheritBgColor.dojoDndItemAnchor,
+.claro.orange .inheritBgColor.dojoDndItemAnchor {
+    background-color: #ff9140;
     color: #ffffff;
 }
-.claro div.purple.rftLineWithButtons,
-.claro .purple .rftLineWithButtons {
-    background-color: #6529b7;
+.claro div.purple.inheritBgColor.dojoDndItemAnchor,
+.claro .purple .inheritBgColor.dojoDndItemAnchor,
+.claro.purple .inheritBgColor.dojoDndItemAnchor {
+    background-color: #993dec;
     color: #ffffff;
 }
-.claro div.orange.rftLineWithButtons,
-.claro *.orange .rftLineWithButtons {
-    background-color: #ff5b12;
+.claro div.red.inheritBgColor.dojoDndItemAnchor,
+.claro .red .inheritBgColor.dojoDndItemAnchor,
+.claro.red .inheritBgColor.dojoDndItemAnchor {
+    background-color: #bd0013;
     color: #ffffff;
 }
-.claro div.trans.rftLineWithButtons,
-.claro .trans .rftLineWithButtons {
-    background-color: transparent;
-    color: #ffffff;
+
+.claro .rftLineWithButtons.dojoDndItem {
+    transition: all 0.2s;
+    -moz-transition: all 0.2s;
+    -webkit-transition: all 0.2s;
+    -o-transition: all 0.2s;
 }
+.claro .rftLineWithButtons.dojoDndItem.dojoDndItemBefore {
+    margin-top: 6px;
+    border-top: 6px solid #ffffff;
+}
+.claro .rftLineWithButtons.dojoDndItem.dojoDndItemAfter {
+    margin-bottom: 6px;
+    border-bottom: 6px solid #ffffff;
+}
+.claro .dojoDndAvatar {
+    color: #000000;
+}
+.claro .dojoDndSourceMoved .rftLineWithButtons.dojoDndItemAnchor {
+    height: 0;
+    overflow: hidden;
+}

Dev/branches/rest-dojo-ui/client/rft/css/rftSelector.css

@@ -39 +39 @@
     background-color: #00ff00;
 }
+
+.claro .rftSelector .rftSelectorOptions .rftLineWithButtons.selected {
+    
+}

Dev/branches/rest-dojo-ui/client/rft/pages/survey.html

@@ -1 @@
-<div data-dojo-type="rft.pages.survey" id="survey">
+<div data-dojo-type="rft.pages.survey" id="survey" class="blue">
     <div data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="region:'center'" style="height: 500px;">
+
         <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'top'">
             <h2>
@@ -7 +8 @@
             </h2>
         </div>
+        
         <div data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="region:'center'">
-            <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'top'">
-                Presets
-            </div>
             <div id="tabList" data-dojo-type="dijit.layout.TabContainer" class="blue" data-dojo-props="tabPosition:'left-h',region:'center'">
                 <!-- tabs go here -->
             </div>
         </div>
-        <!-- "Shopping cart" -->
+        
         <div data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="region:'right'" style="width: 300px">
-            <div data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="region:'top'">
-                <h3>Included questions</h3>
+            <div id="SurveyListViewNode" class="rftSurveyListView">
             </div>
-            <div data-dojo-type="rft.ui.List" data-dojo-props="region:'center'">
-                <!-- These would have to be dynamically generated instead of declared here! -->
-                <div data-dojo-type="rft.ui.LineWithActionsWidget" data-dojo-props="title:'Question one', actions: {'Cancel':{callback: function(){}, properties: {blockButton: false, icon: 'Delete', modifiers:'white'}}}"></div>
-                <div data-dojo-type="rft.ui.LineWithActionsWidget" data-dojo-props="title:'Question two', actions: {'Cancel':{callback: function(){}, properties: {blockButton: false, icon: 'Delete', modifiers:'white'}}}"></div>
-            </div>
+
             <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region: 'bottom'">
                 <button id="btnProperties" data-dojo-type="dijit.form.Button" data-dojo-props="baseClass: 'rftLargeButton', iconClass: 'rftIcon rftIconProperties'">Properties</button>

Dev/branches/rest-dojo-ui/client/rft/pages/survey.js

@@ -1 +1 @@
 define(['dojo/_base/declare',
-    'dojo/_base/lang',
-    'dojo/_base/event',
-    'dojo/_base/Deferred',
-    'rft/ui/AccordionList',
-    'rft/ui/LineWithActionsWidget',
-    'rft/store',
-    'rft/ui/_Page',
-    'rft/api',
-    'dijit/registry',
-    'rft/content',
-    'dojo/on',
-    'dojo/query'],
-    function(declare,lang,event,Deferred,AccordionList,LineWithActionsWidget,store,_Page,api,registry,content, on, query){
-        return declare('rft.pages.survey',[_Page],{
-            object: null,
-            onVisit: function() {
-                if ( this.pageArgs.uid ) {
-                    Deferred.when(store.get(this.pageArgs.uid))
-                    .then(lang.hitch(this,function(obj){
-                       this.object = obj;
-                       return Deferred.when( obj.creator && store.dereference(obj.creator) );
-                   }));
-                    this._createQuestionBrowser();
-                } else {
-                    //this.header.innerHTML = "Error: no uid for survey!"
-                }
-                this._setupButtons(this);
-                this._insertQuestion({title: "This is the question title!", sorting: {categories: ['CategoryOne', 'CategoryB123'], topic: 'The first question topic'}});
-                this._insertQuestion({title: "BLablabla question text!", sorting: {categories: ['CategoryOne'], topic: 'The first question topic'}});
-                this._insertQuestion({title: "Yaddayaddayaddaa ... sigh", sorting: {categories: ['CategoryThree', 'CategoryB123'], topic: 'Another topic'}});
-            },
-            onLeave: function() {
-                this.inherited(arguments);
-            },
-            onReset: function() {
-                this.setFields(this.object);
-            },
-            onSave: function(evt) {
-                /*lang.mixin(this.object,this.form.get('value'));
-                Deferred.when( store.put(this.object) )
-                .then(lang.hitch(this,function(obj){
-                    this.object = obj;
-                    this.setFields(obj);
-                    api.notify("Object saved");
-                }),lang.hitch(this,function(){
-                    api.notify("Object save failed",'error');
-                }));
-                event.stop(evt);
-                evt.stopPropagation();
-                return false;
-                */
-            },
-            _goToPreview: function() {
-                content.goTo('surveyAdvanced', {uid: this.object._id});
-                /* 
-                * TODO: How to prevent widgets with identical id's on different pages clashing?
-                * For example: btnSave clashes when going from survey to surveyAdvanced, since both contain one. survey.btnSave is not destroyed when loading surveyAdvanced.btnSave!
-                * Since there is no page reload, only a contentPane content swap!
-                * Talk to Hendrik about this! 
-                * TEMPORARY FIX IN THIS.ONLEAVE!
-                */
-            },
-            _setupButtons: function() {
-                // Setup button events
-                registry.byId("btnSave").on("click", lang.hitch(this, function(){
-                    this.onSave(arguments);
-                }));
-                registry.byId("btnPreview").on("click", lang.hitch(this, function(){
-                    this._goToPreview();
-                }));
-            },
-            _createQuestionBrowser: function() {
-                Deferred.when(store.query('_design/default/_view/by_type',{key:'Question'}))
-                .then(lang.hitch(this,function(questions){
-                 questions.forEach(function(question) {
-                    this._insertQuestion(question);
-                }, this);
-             }));
-            },
-            _insertQuestion: function(question) {
-                // MASSIVE TODO: The question categories cannot have spaces currently, due to the way we append them to the ID property of the container. ID's cannot have spaces.
-                // Easy fix: Replace spaces with underscores for the time being? The alternative is to make these containers have an actual "questioncategory" property in the governing widget. Not fun.
-                var tabs = registry.byId("tabList");
-                for (var c in question.sorting.categories) {
-                    var cat = question.sorting.categories[c];
-                    var catPane = query("#tab"+cat, tabs.containerNode)[0];
-                    if (catPane) {
-                        this._insertIntoCategory(question, catPane);
-                    } else {
-                        catPane = this._createCategoryTab(cat);
-                        if (catPane) {
-                            this._insertIntoCategory(question, catPane);
-                        } else {
-                            throw "Error: could not find or create category pane!";
-                        }
-                    }
-                }
-            },
-            _createCategoryTab: function(category) {
-                var tabs = registry.byId("tabList");
-                var newCat = new dijit.layout.ContentPane({
-                    title: category
-                });
-                newCat.domNode.id = "tab"+category;
-                tabs.addChild(newCat);
-                var pane = query("#tab"+category, tabs.containerNode)[0];
-                return (pane) ? pane : false;
-            },
-            _insertIntoCategory: function(question, container) {
-                debugger;
-                var selector = query(".rftSelector[title='"+question.sorting.topic+"']", container)[0];
-                var selectorWidget;
-                if (selector) {
-                    selectorWidget = registry.byNode(selector);
-                    
-                } else {
-                    selectorWidget = new rft.ui.Selector({
-                        title: question.sorting.topic
-                    });
-                    selectorWidget.placeAt(container);
-                }
-                selectorWidget.addQuestion(question);
-            },
+        'dojo/_base/lang',
+        'dojo/_base/event',
+        'dojo/_base/Deferred',
+        'rft/ui/AccordionList',
+        'rft/ui/LineWithActionsWidget',
+        'rft/ui/SurveyListView',
+        'rft/store',
+        'rft/ui/_Page',
+        'rft/api',
+        'dijit/registry',
+        'rft/content',
+        'dojo/on',
+        'dojo/query'],
+        function(declare,lang,event,Deferred,AccordionList,LineWithActionsWidget,SurveyListView,store,_Page,api,registry,content, on, query){
+                return declare('rft.pages.survey',[_Page],{
+                        object: null,
+                        questions: null,
+                        listView: null,
+                        
+                        onVisit: function() {
+                                if ( this.pageArgs.uid ) {      // Load survey
+                                        Deferred.when(store.get(this.pageArgs.uid))
+                                        .then(lang.hitch(this,function(obj){
+                                                this.object = obj;
+                                                return Deferred.when( obj.creator && store.dereference(obj.creator) );
+                                        }));
 
+                                        //this._createQuestionBrowser();        // Load questions database and create browser
+                                        this.questions = new dojo.store.Memory({        // Create local copy store of questions database
+                                                data: [],
+                                                idProperty: "_id"
+                                        });
+                                } else {
+                                        throw "No valid uid or survey passed!";
+                                }
+                                this._setupButtons(this);
+                                var testQuestion1 = {_id: "123", title: "How long have you worked here?", categories: ['Professional background'], topic: 'Work experience'};
+                                this.questions.add(testQuestion1);
+                                this._insertQuestion(testQuestion1);
+                                var testQuestion2 = {_id: "234", title: "How many years have you been employed here?", categories: ['Respondent personals','Professional background'], topic: 'Work experience'};
+                                this.questions.add(testQuestion2);
+                                this._insertQuestion(testQuestion2);
+                                var testQuestion3 = {_id: "345", title: "Have you worked here longer than 10 years?", categories: ['Respondent personals','Professional background'], topic: 'Work experience'};
+                                this.questions.add(testQuestion3);
+                                this._insertQuestion(testQuestion3);
+                                var testQuestion4 = {_id: "456", title: "Rate your experience at your current employer from 1 to 10.", categories: ['Respondent personals','Professional background'], topic: 'Work experience'};
+                                this.questions.add(testQuestion4);
+                                this._insertQuestion(testQuestion4);
+                                
+                                this._createListView(this.questions);
+                        },
+                        onLeave: function() {
+                                this.inherited(arguments);
+                        },
+                        onReset: function() {
+                                this.setFields(this.object);
+                        },
+                        onSave: function(evt) {
+                                /*lang.mixin(this.object,this.form.get('value'));
+                                Deferred.when( store.put(this.object) )
+                                .then(lang.hitch(this,function(obj){
+                                this.object = obj;
+                                this.setFields(obj);
+                                api.notify("Object saved");
+                                }),lang.hitch(this,function(){
+                                api.notify("Object save failed",'error');
+                                }));
+                                event.stop(evt);
+                                evt.stopPropagation();
+                                return false;
+                                */
+                        },
+                        _goToPreview: function() {
+                                content.goTo('surveyAdvanced', {uid: this.object._id});
+                        },
+                        _setupButtons: function() {
+                                // Setup button events
+                                registry.byId("btnSave").on("click", lang.hitch(this, function(){
+                                        this.onSave(arguments);
+                                }));
+                                registry.byId("btnPreview").on("click", lang.hitch(this, function(){
+                                        this._goToPreview();
+                                }));
+                        },
+                        /* Store code */
+                        GetQuestion: function(_id) {
+                                return this.questions.get(_id);
+                        },
+                        SetQuestion: function(question) {
+                                return this.questions.put(question);
+                        },
+                        SyncStore: function() {
+                        },
+                        /* Browser code */
+                        _createQuestionBrowser: function() { // TODO: Do all operations from the local store. Put querying routine in SyncStore()!
+                                var getQuestions = function(self){
+                                        return questions = Deferred.when(store.query('_design/default/_view/by_type', {key:'Question'}), function(res){
+                                                self.questions.setData(res);    // Store queried questions in this.questions MemoryStore
+                                                return res;
+                                        });
+                                };
 
+                                Deferred.when(getQuestions(this), lang.hitch(this, function(questions){
+                                        questions.forEach(function(question){
+                                                this._insertQuestion(question)
+                                        }, this);
+                                }), function(err){
+                                        throw "Questions could not be fetched. No connection or null query!";
+                                });
+                        },
+                        _insertQuestion: function(question) {
+                                var tabs = registry.byId("tabList");
+                                for (var c in question.categories) {
+                                        var cat = question.categories[c];
+                                        var q = "div[data-category='"+cat+"']";
+                                        var catPane = query(q, tabs.containerNode)[0];
+                                        if (catPane) {
+                                                this._insertIntoCategory(question, catPane);
+                                        } else {
+                                                catPane = this._createCategoryTab(cat);
+                                                if (catPane) {
+                                                        this._insertIntoCategory(question, catPane);
+                                                } else {
+                                                        throw "Error: could not find or create category pane!";
+                                                }
+                                        }
+                                }
+                        },
+                        _createCategoryTab: function(category) {
+                                var tabs = registry.byId("tabList");
+                                var newCat = new dijit.layout.ContentPane({
+                                        title: category,
+                                        postCreate: function(){
+                                                this.domNode.dataset["category"] = category;
+                                        }
+                                });
+                                newCat.domNode.id = "tab"+category;
+                                tabs.addChild(newCat);
+                                var q = "div[data-category='"+category+"']";
+                                var pane = query(q, tabs.containerNode)[0];
+                                return (pane) ? pane : false;
+                        },
+                        _insertIntoCategory: function(question, container) {
+                                var selector = query(".rftSelector[data-topic='"+question.topic+"']", container)[0];
+                                var selectorWidget;
+                                if (selector) {
+                                        selectorWidget = registry.byNode(selector);
 
+                                } else {
+                                        selectorWidget = new rft.ui.Selector({
+                                                topic: question.topic,
+                                                controller: this
+                                        });
+                                        selectorWidget.placeAt(container);
+                                }
+                                selectorWidget.addQuestion(question._id);
+                        },
+                        /* ListView code */
+                        _createListView: function() {
+                                this.listView = new SurveyListView({
+                                        controller: this
+                                }).placeAt("SurveyListViewNode");
+                        },
+                        IncludeQuestion: function(_id) {
+                                this.listView.insertItem(_id);
+                        },
 
-        });
+                });
 });
 

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

@@ -1 @@
-define(['dojo/_base/declare','dojo/_base/lang','dojo/on','dojo/dom', 'dojo/dom-class', 'dijit/form/Button',
-    'dijit/_WidgetBase','dijit/_TemplatedMixin','dijit/_WidgetsInTemplateMixin',
-    'dojo/text!./templates/LineWithActionsWidget.html'
-    ],
-    function(declare,lang,on,dom,domClass,Button,_WidgetBase,_TemplatedMixin,_WidgetsInTemplateMixin,templateString){
-        return declare('rft.ui.LineWithActionsWidget',[_WidgetBase,_TemplatedMixin,_WidgetsInTemplateMixin],{
-            templateString: templateString,
-            baseClass: 'rftLineWithButtons',
-            title: '',
-            modifiers: "blue",
-            userObject: null,
-            actions: {},
-            postCreate: function() {
-                dom.setSelectable(this.domNode, false);
-                on(this.titleNode,'click',lang.hitch(this,'_onClick'));
-            },
-            startup: function() {
-                this.inherited(arguments);
-                this._setupActions();
-                domClass.add(this.domNode, this.modifiers);
-                this.refresh();
-            },
-            _setupActions: function() {
-                for (var action in this.actions) {
-                    var properties;
-                    if (this.actions[action].properties.blockButton == true) {  // BlockButton
-                        properties = lang.mixin({
-                            baseClass: 'rftBlockButton',
-                            modifiers: this.modifiers,
-                            label: "Default",
-                            iconClass: 'rftIcon rftIcon'+this.actions[action].properties.icon,
-                            title: action,
-                            onClick: lang.hitch(this, this.actions[action].callback)
-                        }, this.actions[action].properties);
-                        properties["class"] = properties.modifiers;
-                        new Button(properties).placeAt(this.buttonsNode);
-                    } else {    //InlineButton
-                        properties = lang.mixin({
-                            baseClass: 'rftInlineButton',
-                            modifiers: 'black',
-                            label: "Default",
-                            showLabel: false,
-                            iconClass: 'rftIcon rftIcon'+this.actions[action].properties.icon,
-                            title: action,
-                            onClick: lang.hitch(this, this.actions[action].callback)
-                        }, this.actions[action].properties);
-                        properties["class"] = properties.modifiers;
-                        new Button(properties).placeAt(this.buttonsNode);
-                    }
-                }
-            },
-            refresh: function() {
-                this.titleNode.innerHTML = this.title;
-            },
-            _onClick: function(e){
-                var preventDefault = this.onClick(e) === false;
-                if(preventDefault){
-                    e.preventDefault();
-                }
-                return !preventDefault;
-            },
-            onClick: function(e) {},
-            _setTitleAttr: function(value){
-                this.title = value;
-                this.refresh();
-            }
-        });
-    });
+define(['dojo/_base/declare',
+        'dojo/_base/lang',
+        'dojo/on',
+        'dojo/dom',
+        'dojo/_base/event',
+        'dojo/dom-class',
+        'dijit/form/Button',
+        'dijit/_WidgetBase',
+        'dijit/_TemplatedMixin',
+        'dijit/_WidgetsInTemplateMixin',
+        'dojo/text!./templates/LineWithActionsWidget.html'
+        ],
+        function(declare,lang,on,dom,event,domClass,Button,_WidgetBase,_TemplatedMixin,_WidgetsInTemplateMixin,templateString){
+                return declare('rft.ui.LineWithActionsWidget',[_WidgetBase,_TemplatedMixin,_WidgetsInTemplateMixin],{
+                        templateString: templateString,
+                        baseClass: 'rftLineWithButtons',
+                        title: '',
+                        modifiers: "blue",
+                        selectable: false,
+                        userObject: null,
+
+                        actions: {},
+                        postCreate: function() {
+                                dom.setSelectable(this.domNode, false); // Text selection, has nothing to do with object selection!
+                                on(this.domNode,'click',lang.hitch(this,'_onClick'));
+                        },
+                        startup: function() {
+                                this.inherited(arguments);
+                                this._setupActions();
+                                domClass.add(this.domNode, this.modifiers);
+                                this.refresh();
+                        },
+                        _setupActions: function() {
+                                for (var action in this.actions) {
+                                        var properties;
+                                        if (this.actions[action].properties.blockButton == true) {
+                                                properties = lang.mixin({
+                                                        baseClass: 'rftBlockButton',
+                                                        modifiers: this.modifiers,
+                                                        label: "Default",
+                                                        iconClass: 'rftIcon rftIcon'+this.actions[action].properties.icon,
+                                                        title: action,
+                                                        onClick: lang.hitch(this, function(e){
+                                                                lang.hitch(this, this.actions[action].callback )(e);
+                                                                event.stop(e);
+                                                                return false;
+                                                        })
+                                                }, this.actions[action].properties);
+                                                properties["class"] = properties.modifiers;
+                                                new Button(properties).placeAt(this.buttonsNode);
+                                        } else {
+                                                properties = lang.mixin({
+                                                        baseClass: 'rftInlineButton',
+                                                        modifiers: 'black',
+                                                        label: "Default",
+                                                        showLabel: false,
+                                                        iconClass: 'rftIcon rftIcon'+this.actions[action].properties.icon,
+                                                        title: action,
+                                                        onClick: lang.hitch(this, function(e){
+                                                                lang.hitch(this, this.actions[action].callback)(e);
+                                                                event.stop(e);
+                                                                return false;
+                                                        })
+                                                }, this.actions[action].properties);
+                                                properties["class"] = properties.modifiers;
+                                                new Button(properties).placeAt(this.buttonsNode);
+                                        }
+                                }
+                        },
+                        refresh: function() {
+                                this.titleNode.innerHTML = this.title;
+                        },
+                        _onClick: function(e){
+                                var preventDefault = this.onClick(e) === false;
+                                if (preventDefault) {
+                                        event.stop(e);
+                                }
+                                return !preventDefault;
+                        },
+                        onClick: function(e) {
+                        },
+                        _setTitleAttr: function(value){
+                                this.title = value;
+                                this.refresh();
+                        }
+                });
+});

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

@@ -1 +1 @@
 define([
     'dojo/_base/declare',
+    'dojo/_base/array',
+    'dijit/registry',
     'dojo/_base/lang',
     'dojo/fx',
@@ -12 +14 @@
     ],function(
         declare,
+        baseArray,
+        registry,
         lang,
         fx,
@@ -24 +28 @@
         return declare('rft.ui.Selector',[_WidgetBase,_TemplatedMixin,_WidgetsInTemplateMixin,_Container],{
             templateString: templateString,
-            title: "The professional as a participant",
+            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.title,
+                    title: this.topic,
                     modifiers: this.modifiers,
                     actions: {
                         "AddToSurvey" : {
-                            callback: function(arg){},
+                            callback: lang.hitch(this, this.includeQuestion),
                             properties: {
                                 blockButton: true,
@@ -46 +54 @@
                     }
                 },this.titleNode);
-                
+
                 this.selectorLine = new LineWithActionsWidget({
                     title: 'None',
@@ -63 +71 @@
                 },this.selectedItemNode);
             },
-            _toggleDropdown: function(selectorLine) {
+            _toggleDropdown: function() {
+
                 var node = this.optionsNode;
                 var show = fx.wipeIn({
@@ -94 +103 @@
                 };
             },
-            addQuestion: function(question) {
-                new LineWithActionsWidget({
-                    title: question.title,
-                    question: question,
-                    actions: {
-                        "InfoHover" : {
-                            callback: this.infoFunction,
-                            properties: {
-                                blockButton: false,
-                                showLabel: false,
-                                icon: "Inspect"
+            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"
+                                }
                             }
                         }
-                    }
-                }).placeAt(this.optionsNode);
+                    });
+                    w.placeAt(this.optionsNode);
+                    w.on("Click", lang.hitch(this, function(){
+                        this.selectQuestion(questionId);
+                        this._toggleDropdown();
+                    }, questionId));
+
+                }    
             },
-            infoFunction: function(){
-                alert("Some info here!");text
+            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);
+                }
             }
         });

Dev/branches/rest-dojo-ui/client/rft/ui/templates/LineWithActionsWidget.html

@@ -1 @@
-<div class="${baseClass}">
+<div class="${baseClass} inheritBgColor">
     <span class="${baseClass}Title" data-dojo-attach-point="titleNode"></span>
     <span class="${baseClass}Buttons" data-dojo-attach-point="buttonsNode"></span>