Changeset 360


Ignore:
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:
4 added
8 edited

Legend:

Unmodified
Added
Removed

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

    • Property svn:ignore set to

  • Dev/branches/rest-dojo-ui/client/config

    • Property svn:ignore

      •  

        old new  
        11.htaccess.swp
        22.index.html.swp
         3.db.js.swp

  • Dev/branches/rest-dojo-ui/client/config/db.js

    r352 r360  
    1010         'dojo/text!./docs/_users/rft_admin.json',
    1111         'dojo/text!./docs/rft/_design/default.json',
     12         'dojo/text!./docs/rft/q1.json',
     13         'dojo/text!./docs/rft/q2.json',
     14         'dojo/text!./docs/rft/q3.json',
     15         'dojo/text!./docs/rft/q4.json',
    1216         'dojo/domReady!',
    1317         'dijit/form/TextBox',
    … …  
    1620         ],
    1721    function(json,lang,xhr,parser,query,registry,xhrPlugins,
    18         securityDoc,rft_adminDoc,design_defaultDoc){
     22        securityDoc,rft_adminDoc,design_defaultDoc,q1Doc,q2Doc,q3Doc,q4Doc){
    1923    parser.parse();
    2024
    … …  
    112116        req('PUT','/rft/_design/default', newDoc);
    113117
     118        log("Uploading sample question documents");
     119        req('PUT','/rft/q1', json.fromJson(q1Doc));
     120        req('PUT','/rft/q2', json.fromJson(q2Doc));
     121        req('PUT','/rft/q3', json.fromJson(q3Doc));
     122        req('PUT','/rft/q4', json.fromJson(q4Doc));
     123
    114124        log("Done!");
    115125    });

  • Dev/branches/rest-dojo-ui/client/config/docs/rft

    • Property svn:ignore set to
      .q1.json.swp
      .q2.json.swp
      .q3.json.swp
      .q4.json.swp

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

    r355 r360  
    1 <div data-dojo-type="rft.pages.survey" id="survey" class="blue">
     1<div data-dojo-type="rft.pages.survey" class="blue">
    22    <div data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="region:'center'" style="height: 500px;">
    33
    … …  
    1010       
    1111        <div data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="region:'center'">
    12             <div id="tabList" data-dojo-type="dijit.layout.TabContainer" class="blue" data-dojo-props="tabPosition:'left-h',region:'center'">
     12            <div data-rft-attach-point="tabList" data-dojo-type="dijit.layout.TabContainer" class="blue" data-dojo-props="tabPosition:'left-h',region:'center'">
    1313                <!-- tabs go here -->
    1414            </div>
    … …  
    1616       
    1717        <div data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="region:'right'" style="width: 300px">
    18             <div id="SurveyListViewNode" class="rftSurveyListView">
     18            <div data-rft-attach-point="surveyListViewNode" class="rftSurveyListView">
    1919            </div>
    2020
    2121            <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region: 'bottom'">
    22                 <button id="btnProperties" data-dojo-type="dijit.form.Button" data-dojo-props="baseClass: 'rftLargeButton', iconClass: 'rftIcon rftIconProperties'">Properties</button>
    23                 <button id="btnSave" data-dojo-type="dijit.form.Button" data-dojo-props="baseClass: 'rftLargeButton', iconClass: 'rftIcon rftIconAccept'">Save Changes</button>
    24                 <button id="btnDiscard" data-dojo-type="dijit.form.Button" data-dojo-props="baseClass: 'rftLargeButton', iconClass: 'rftIcon rftIconCancel'">Discard changes</button>
    25                 <button id="btnPreview" data-dojo-type="dijit.form.Button" data-dojo-props="baseClass: 'rftLargeButton', iconClass: 'rftIcon rftIconPreview'">Preview</button>
     22                <button data-rft-attach-point="btnProperties" data-dojo-type="dijit.form.Button" data-dojo-props="baseClass: 'rftLargeButton', iconClass: 'rftIcon rftIconProperties'">Properties</button>
     23                <button data-rft-attach-point="btnSave" data-dojo-type="dijit.form.Button" data-dojo-props="baseClass: 'rftLargeButton', iconClass: 'rftIcon rftIconAccept'">Save Changes</button>
     24                <button data-rft-attach-point="btnDiscard" data-dojo-type="dijit.form.Button" data-dojo-props="baseClass: 'rftLargeButton', iconClass: 'rftIcon rftIconCancel'">Discard changes</button>
     25                <button data-rft-attach-point="btnPreview" data-dojo-type="dijit.form.Button" data-dojo-props="baseClass: 'rftLargeButton', iconClass: 'rftIcon rftIconPreview'">Preview</button>
    2626            </div>
    2727        </div>

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

    r358 r360  
    11define(['dojo/_base/declare',
    2         'dojo/_base/lang',
    3         'dojo/_base/event',
    4         'dojo/_base/Deferred',
    5         'rft/ui/AccordionList',
    6         'rft/ui/LineWithActionsWidget',
    7         'rft/ui/SurveyListView',
    8         'rft/store',
    9         'rft/ui/_Page',
    10         'rft/api',
    11         'dijit/registry',
    12         'rft/content',
    13         'dojo/on',
    14         'dojo/query'],
    15         function(declare,lang,event,Deferred,AccordionList,LineWithActionsWidget,SurveyListView,store,_Page,api,registry,content, on, query){
    16                 return declare('rft.pages.survey',[_Page],{
    17                         object: null,
    18                         questions: null,
    19                         listView: null,
    20                        
    21                         onVisit: function() {
    22                                 if ( this.pageArgs.uid ) {      // Load survey
    23                                         Deferred.when(store.get(this.pageArgs.uid))
    24                                         .then(lang.hitch(this,function(obj){
    25                                                 this.object = obj;
    26                                                 return Deferred.when( obj.creator && store.dereference(obj.creator) );
    27                                         }));
    28 
    29                                         //this._createQuestionBrowser();        // Load questions database and create browser
    30                                         this.questions = new dojo.store.Memory({        // Create local copy store of questions database
    31                                                 data: [],
    32                                                 idProperty: "_id"
    33                                         });
    34                                 } else {
    35                                         throw "No valid uid or survey passed!";
    36                                 }
    37                                 this._setupButtons(this);
    38                                 var testQuestion1 = {_id: "123", title: "How long have you worked here?", categories: ['Professional background'], topic: 'Work experience'};
    39                                 this.questions.add(testQuestion1);
    40                                 this._insertQuestion(testQuestion1);
    41                                 var testQuestion2 = {_id: "234", title: "How many years have you been employed here?", categories: ['Respondent personals','Professional background'], topic: 'Work experience'};
    42                                 this.questions.add(testQuestion2);
    43                                 this._insertQuestion(testQuestion2);
    44                                 var testQuestion3 = {_id: "345", title: "Have you worked here longer than 10 years?", categories: ['Respondent personals','Professional background'], topic: 'Work experience'};
    45                                 this.questions.add(testQuestion3);
    46                                 this._insertQuestion(testQuestion3);
    47                                 var testQuestion4 = {_id: "456", title: "Rate your experience at your current employer from 1 to 10.", categories: ['Respondent personals','Professional background'], topic: 'Work experience'};
    48                                 this.questions.add(testQuestion4);
    49                                 this._insertQuestion(testQuestion4);
    50                                
    51                                 this._createListView(this.questions);
    52                         },
    53                         onLeave: function() {
    54                                 this.inherited(arguments);
    55                         },
    56                         onReset: function() {
    57                                 this.setFields(this.object);
    58                         },
    59                         onSave: function(evt) {
    60                                 /*lang.mixin(this.object,this.form.get('value'));
    61                                 Deferred.when( store.put(this.object) )
    62                                 .then(lang.hitch(this,function(obj){
    63                                 this.object = obj;
    64                                 this.setFields(obj);
    65                                 api.notify("Object saved");
    66                                 }),lang.hitch(this,function(){
    67                                 api.notify("Object save failed",'error');
    68                                 }));
    69                                 event.stop(evt);
    70                                 evt.stopPropagation();
    71                                 return false;
    72                                 */
    73                         },
    74                         _goToPreview: function() {
    75                                 content.goTo('surveyAdvanced', {uid: this.object._id});
    76                         },
    77                         _setupButtons: function() {
    78                                 // Setup button events
    79                                 registry.byId("btnSave").on("click", lang.hitch(this, function(){
    80                                         this.onSave(arguments);
    81                                 }));
    82                                 registry.byId("btnPreview").on("click", lang.hitch(this, function(){
    83                                         this._goToPreview();
    84                                 }));
    85                         },
    86                         /* Store code */
    87                         getQuestion: function(_id) {
    88                                 return this.questions.get(_id);
    89                         },
    90                         setQuestion: function(question) {
    91                                 return this.questions.put(question);
    92                         },
    93                         /* Browser code */
    94                         _createQuestionBrowser: function() { // TODO: Do all operations from the local store. Put querying routine in SyncStore()!
    95                                 var getQuestions = function(self){
    96                                         return questions = Deferred.when(store.query('_design/default/_view/by_type', {key:'Question'}), function(res){
    97                                                 self.questions.setData(res);    // Store queried questions in this.questions MemoryStore
    98                                                 return res;
    99                                         });
    100                                 };
    101 
    102                                 Deferred.when(getQuestions(this), lang.hitch(this, function(questions){
    103                                         questions.forEach(function(question){
    104                                                 this._insertQuestion(question)
    105                                         }, this);
    106                                 }), function(err){
    107                                         throw "Questions could not be fetched. No connection or null query!";
    108                                 });
    109                         },
    110                         _insertQuestion: function(question) {
    111                                 var tabs = registry.byId("tabList");
    112                                 for (var c in question.categories) {
    113                                         var cat = question.categories[c];
    114                                         var q = "div[data-category='"+cat+"']";
    115                                         var catPane = query(q, tabs.containerNode)[0];
    116                                         if (catPane) {
    117                                                 this._insertIntoCategory(question, catPane);
    118                                         } else {
    119                                                 catPane = this._createCategoryTab(cat);
    120                                                 if (catPane) {
    121                                                         this._insertIntoCategory(question, catPane);
    122                                                 } else {
    123                                                         throw "Error: could not find or create category pane!";
    124                                                 }
    125                                         }
    126                                 }
    127                         },
    128                         _createCategoryTab: function(category) {
    129                                 var tabs = registry.byId("tabList");
    130                                 var newCat = new dijit.layout.ContentPane({
    131                                         title: category,
    132                                         postCreate: function(){
    133                                                 this.domNode.dataset["category"] = category;
    134                                         }
    135                                 });
    136                                 newCat.domNode.id = "tab"+category;
    137                                 tabs.addChild(newCat);
    138                                 var q = "div[data-category='"+category+"']";
    139                                 var pane = query(q, tabs.containerNode)[0];
    140                                 return (pane) ? pane : false;
    141                         },
    142                         _insertIntoCategory: function(question, container) {
    143                                 var selector = query(".rftSelector[data-topic='"+question.topic+"']", container)[0];
    144                                 var selectorWidget;
    145                                 if (selector) {
    146                                         selectorWidget = registry.byNode(selector);
    147 
    148                                 } else {
    149                                         selectorWidget = new rft.ui.Selector({
    150                                                 topic: question.topic,
    151                                                 controller: this
    152                                         });
    153                                         selectorWidget.placeAt(container);
    154                                 }
    155                                 selectorWidget.addQuestion(question._id);
    156                         },
    157                         /* ListView code */
    158                         _createListView: function() {
    159                                 this.listView = new SurveyListView({
    160                                         controller: this
    161                                 }).placeAt("SurveyListViewNode");
    162                         },
    163                         IncludeQuestion: function(_id) {
    164                                 this.listView.insertItem(_id);
    165                         },
    166 
    167                 });
     2    'dojo/_base/lang',
     3    'dojo/_base/event',
     4    'dojo/_base/Deferred',
     5    'rft/ui/Selector',
     6    'rft/ui/SurveyListView',
     7    'dijit/layout/ContentPane',
     8    'rft/store',
     9    'rft/ui/_Page',
     10    'rft/content',
     11    'dojo/store/Cache',
     12    'dojo/store/Memory' ],
     13    function(declare,lang,event,Deferred,Selector,SurveyListView,ContentPane,store,_Page,content,Cache,Memory){
     14        return declare('rft.pages.survey',[_Page],{
     15            object: null,
     16            listView: null,
     17            _dataMap: null,
     18            constructor: function(){
     19                this._dataMap = {};
     20            },
     21            onVisit: function() {
     22                if ( this.pageArgs.uid ) {
     23                    Deferred.when(store.get(this.pageArgs.uid))
     24                    .then(lang.hitch(this,function(obj){
     25                        this.object = obj;
     26                        return Deferred.when( obj.creator && store.dereference(obj.creator) );
     27                    }));
     28                    this._createListView();
     29                    this._createQuestionBrowser();
     30                    this._setupButtons();
     31                } else {
     32                    throw "No valid uid or survey passed!";
     33                }
     34            },
     35            _goToPreview: function() {
     36                content.goTo('surveyAdvanced', {uid: this.object._id});
     37            },
     38            _setupButtons: function() {
     39                this.btnSave.on("click", lang.hitch(this, this.onSave));
     40                this.btnPreview.on("click", lang.hitch(this, this._goToPreview));
     41            },
     42            _createQuestionBrowser: function() {
     43                store.query('_design/default/_view/by_type', {key:'Question'})
     44                .forEach(function(question){
     45                    this._insertQuestion(question);
     46                },this);
     47            },
     48            _insertQuestion: function(question) {
     49                for (var c in question.categories) {
     50                    var cat = question.categories[c];
     51                    if (this._dataMap[cat] === undefined) {
     52                        this._dataMap[cat] = {
     53                            widget: this._createCategoryTab(cat),
     54                            topics: {}
     55                        }
     56                    }
     57                    this._insertIntoCategory(question,this._dataMap[cat]);
     58                }
     59            },
     60            _createCategoryTab: function(category) {
     61                var categoryTab = new ContentPane({
     62                    title: category
     63                });
     64                categoryTab.startup();
     65                this.tabList.addChild(categoryTab);
     66                return categoryTab;
     67            },
     68            _insertIntoCategory: function(question, categoryMap) {
     69                if (categoryMap[question.topic] === undefined) {
     70                    var w = new Selector({
     71                        title: question.topic
     72                    }).placeAt(categoryMap.widget.containerNode);
     73                    w.startup();
     74                    w.on('include',lang.hitch(this,this.includeQuestion));
     75                    categoryMap[question.topic] = {
     76                        widget: w
     77                    };
     78                }
     79                categoryMap[question.topic].widget.addItem(question);
     80            },
     81            /* ListView code */
     82            _createListView: function() {
     83                this.listView = new SurveyListView({
     84                    controller: this
     85                }).placeAt(this.surveyListViewNode);
     86                this.listView.startup();
     87            },
     88            includeQuestion: function(question) {
     89                this.listView.insertItem(question);
     90            }
     91        });
    16892});
    16993

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

    r358 r360  
    44    'dijit/registry',
    55    'dojo/_base/lang',
     6    'dojo/_base/event',
    67    'dojo/fx',
    78    'dijit/_WidgetBase',
    … …  
    1718        registry,
    1819        lang,
     20        event,
    1921        fx,
    2022        _WidgetBase,
    … …  
    2830        return declare('rft.ui.Selector',[_WidgetBase,_TemplatedMixin,_WidgetsInTemplateMixin,_Container],{
    2931            templateString: templateString,
    30             title: "ERROR: NULL_TOPIC",
     32            title: "",
    3133            baseClass: 'rftSelector',
    3234            modifiers: 'blue',
    33             currentlySelectedId: null,
    34             controller: null,   // Use events/pubsub instead of a controller variable? Decoupling!
     35            _folded: true,
     36            _titleLine: null,
     37            _selectorLine: null,
     38            _selectedItem: null,
    3539
    36             postCreate: function() {
     40            startup: function() {
    3741                domClass.add(this.domNode, this.modifiers);
    3842                domClass.add(this.selectedColorNode, "pending");
    39                 this.domNode.dataset["topic"] = this.topic;
    4043
    41                 new LineWithActionsWidget({
    42                     title: this.topic,
     44                this._titleLine = new LineWithActionsWidget({
     45                    title: this.title,
    4346                    modifiers: this.modifiers,
    4447                    actions: {
    45                         "AddToSurvey" : {
    46                             callback: lang.hitch(this, this.includeQuestion),
     48                        "Include in survey" : {
     49                            callback: lang.hitch(this, this._onInclude),
    4750                            properties: {
    4851                                blockButton: true,
    … …  
    5457                    }
    5558                },this.titleNode);
     59                this._titleLine.startup();
    5660
    57                 this.selectorLine = new LineWithActionsWidget({
     61                this._selectorLine = new LineWithActionsWidget({
    5862                    title: 'None',
    5963                    modifiers: this.modifiers,
    6064                    actions: {
    61                         "ToggleDropdown" : {
    62                             callback: lang.hitch(this, this._toggleDropdown()),
     65                        "Toggle dropdown" : {
     66                            callback: lang.hitch(this, this._onToggleDropdown),
    6367                            properties: {
    6468                                blockButton: true,
    … …  
    7074                    }
    7175                },this.selectedItemNode);
     76                this._selectorLine.startup();
     77
     78                fx.wipeOut({
     79                    node: this.optionsNode
     80                }).play();
    7281            },
    73             _toggleDropdown: function() {
    74                 var node = this.optionsNode;
    75                 var show = fx.wipeIn({
    76                     node: node
    77                 });
    78                 var hide = fx.wipeOut({
    79                     node: node
    80                 });
    81                 hide.play();
    82                 var folded = true;
    83                 return function(e) {
    84                     if ( folded ) {
    85                         var downArrowIcon = dojo.query(".rftBlockButton .rftIconHalfArrowDown", this.selectorLine.buttonsNode)[0];
    86                         if (downArrowIcon){
    87                             domClass.replace(downArrowIcon, "rftIconHalfArrowUp", "rftIconHalfArrowDown");
     82            _onSelect: function(item, widget) {
     83                this._selectedItem = item;
     84                this._onToggleDropdown();
     85                this._selectorLine.set("title", item.title);
     86                baseArray.forEach(this.optionsNode.childNodes, function(node){
     87                    var line = registry.byNode(node);
     88                    if (line) {
     89                        if (line === widget) {
     90                            domClass.add(line.domNode, "inheritBgColor light");
     91                        } else {
     92                            domClass.remove(line.domNode, "inheritBgColor light");
    8893                        }
    89                         show.play();
    90                         folded = false;
    91                     } else {
    92                         var upArrowIcon = dojo.query(".rftBlockButton .rftIconHalfArrowUp", this.selectorLine.buttonsNode)[0];
    93                         if (upArrowIcon){
    94                             domClass.replace(upArrowIcon, "rftIconHalfArrowDown", "rftIconHalfArrowUp");
    95                         }
    96                         hide.play();
    97                         folded = true;
    98 
    9994                    }
    100                     e.preventDefault();
    101                     e.stopPropagation();
    102                 };
     95                }, this);
     96                this.onSelect(item);
    10397            },
    104             addQuestion: function(questionId) {
    105                 var question = this.controller.getQuestion(questionId);
    106                 if (question) {
    107                     var w = new LineWithActionsWidget({
    108                         title: question.title,
    109                         questionId: questionId,
    110                         actions: {
    111                             "InfoHover" : {
    112                                 callback: dojo.partial(this.infoFunction, this),
    113                                 properties: {
    114                                     blockButton: false,
    115                                     showLabel: false,
    116                                     icon: "Inspect"
    117                                 }
     98            _onInclude: function() {
     99                if (this._selectedItem) {
     100                    this.onInclude(this._selectedItem);
     101                }
     102            },
     103            _onToggleDropdown: function(evt) {
     104                if (this._folded) {
     105                    var downArrowIcon = dojo.query(".rftBlockButton .rftIconHalfArrowDown", this._selectorLine.buttonsNode)[0];
     106                    if (downArrowIcon){
     107                        domClass.replace(downArrowIcon, "rftIconHalfArrowUp", "rftIconHalfArrowDown");
     108                    }
     109                    fx.wipeIn({
     110                        node: this.optionsNode
     111                    }).play();
     112                    this._folded = false;
     113                } else {
     114                    var upArrowIcon = dojo.query(".rftBlockButton .rftIconHalfArrowUp", this._selectorLine.buttonsNode)[0];
     115                    if (upArrowIcon){
     116                        domClass.replace(upArrowIcon, "rftIconHalfArrowDown", "rftIconHalfArrowUp");
     117                    }
     118                    fx.wipeOut({
     119                        node: this.optionsNode
     120                    }).play();
     121                    this._folded = true;
     122                }
     123                evt && event.stop(evt);
     124                return false;
     125            },
     126            addItem: function(item) {
     127                var w = new LineWithActionsWidget({
     128                    title: item.title,
     129                    actions: {
     130                        "Info" : {
     131                            callback: function() {
     132                                item.description && alert(item.description);
     133                            },
     134                            properties: {
     135                                blockButton: false,
     136                                showLabel: false,
     137                                icon: "Inspect"
    118138                            }
    119139                        }
    120                     });
    121                     w.placeAt(this.optionsNode);
    122                     w.on("click", lang.hitch(this, function(){
    123                         this.selectQuestion(questionId);
    124                         this._toggleDropdown();
    125                     }, questionId));
    126 
    127                 }   
     140                    }
     141                }).placeAt(this.optionsNode);
     142                w.startup();
     143                w.on("click", lang.hitch(this, this._onSelect, item, w));
    128144            },
    129             infoFunction: function(selector) {
    130                 var question = selector.controller.getQuestion(this.questionId);
    131                 console.log(question);
    132                 alert("Some info here!");
    133             },
    134             includeQuestion: function() {
    135                 if (this.currentlySelectedId) {
    136                     this.controller.IncludeQuestion(this.currentlySelectedId)
    137                 } else {
    138                     return false;
    139                 }
    140             },
    141             selectQuestion: function(questionId) {
    142                 /* TODO: TEST THOROUGHLY! */
    143                 var question = this.controller.getQuestion(questionId);
    144                 if (question) {
    145                     this.currentlySelectedId = questionId;
    146                     this.selectorLine.questionId = questionId;
    147                     this.selectorLine.set("title", question.title);
    148                     // Iterate through optionsNode, add "selected" class to currently selected node
    149                     baseArray.forEach(this.optionsNode.childNodes, function(node, index){
    150                         var line = registry.byNode(node);
    151                         if (line) {
    152                             if (line.questionId == this.currentlySelectedId) {
    153                                 domClass.add(line.domNode, "inheritBgColor light");
    154                             } else {
    155                                 domClass.remove(line.domNode, "inheritBgColor light");
    156                             }
    157                         }
    158                     }, this);
    159                 }
    160             }
     145            onSelect: function(item) {},
     146            onInclude: function(item) {}
    161147        });
    162148});

  • Dev/branches/rest-dojo-ui/client/rft/ui/SurveyListView.js

    r358 r360  
    11define([
    2         'dojo/_base/declare',
    3         'dijit/_WidgetBase',
    4         'dijit/_TemplatedMixin',
    5         'dojo/_base/lang',
    6         'dojo/fx',
    7         'dojo/_base/fx',
    8         'dijit/_WidgetsInTemplateMixin',
    9         'dijit/_Container',
    10         'rft/ui/LineWithActionsWidget',
    11         'dojo/text!./templates/SurveyListView.html'
    12         ],function(
    13                 declare,
    14                 _WidgetBase,
    15                 _TemplatedMixin,
    16                 lang,
    17                 fx,
    18                 baseFx,
    19                 _WidgetsInTemplateMixin,
    20                 _Container,
    21                 LineWithActionsWidget,
    22                 templateString
    23                 ){
    24                 return declare('rft.ui.SurveyListView',[_WidgetBase,_TemplatedMixin,_WidgetsInTemplateMixin,_Container],{
    25                         templateString: templateString,
    26                         baseClass: 'rftSurveyListView',
    27                         source: null,
    28                         controller: null,
    29                         region: 'center',
     2    'dojo/_base/declare',
     3    'dijit/_WidgetBase',
     4    'dijit/_TemplatedMixin',
     5    'dojo/_base/lang',
     6    'dojo/fx',
     7    'dojo/_base/fx',
     8    'dijit/_WidgetsInTemplateMixin',
     9    'dijit/_Container',
     10    'rft/ui/LineWithActionsWidget',
     11    'dojo/text!./templates/SurveyListView.html'
     12    ],function(
     13        declare,
     14        _WidgetBase,
     15        _TemplatedMixin,
     16        lang,
     17        fx,
     18        baseFx,
     19        _WidgetsInTemplateMixin,
     20        _Container,
     21        LineWithActionsWidget,
     22        templateString
     23        ){
     24        return declare('rft.ui.SurveyListView',[_WidgetBase,_TemplatedMixin,_WidgetsInTemplateMixin,_Container],{
     25            templateString: templateString,
     26            baseClass: 'rftSurveyListView',
     27            source: null,
     28            region: 'center',
    3029
    31                         postCreate: function() {
    32                                 if (this.title) {
    33                                         this.titleNode.innerHTML = this.title;
    34                                 } else {
    35                                         this.domNode.removeChild(this.titleNode);
    36                                 }
     30            postCreate: function() {
     31                if (this.title) {
     32                    this.titleNode.innerHTML = this.title;
     33                } else {
     34                    this.domNode.removeChild(this.titleNode);
     35                }
    3736
    38                                 this.source = new dojo.dnd.Source(this.sourceNode, {
    39                                         isSource: true,
    40                                         accept: ["SurveyListViewItem"],
    41                                         horizontal: false,
    42                                         withHandles: false,
    43                                         copyOnly: false,
    44                                         selfCopy: false,
    45                                         selfAccept: true,
    46                                         delay: 0,
    47                                         singular: true,
    48                                         creator: dojo.partial(this.creatorMethod, this.controller, this)
    49                                 });
     37                this.source = new dojo.dnd.Source(this.sourceNode, {
     38                    isSource: true,
     39                    accept: ["SurveyListViewItem"],
     40                    horizontal: false,
     41                    withHandles: false,
     42                    copyOnly: false,
     43                    selfCopy: false,
     44                    selfAccept: true,
     45                    delay: 0,
     46                    singular: true,
     47                    creator: lang.hitch(this, this.creatorMethod)
     48                });
    5049
    51                                 new dijit.form.Button({
    52                                         label: "Move up",
    53                                         showLabel: false,
    54                                         iconClass: "rftIcon rftIconFullArrowUp",
    55                                         baseClass: "rftBlockButton",
    56                                         class: "trans",
    57                                         onClick: lang.hitch(this, function() {
    58                                                 this.moveItem("up");
    59                                         })
    60                                 }, this.btnListMoveUp);
     50                new dijit.form.Button({
     51                    label: "Move up",
     52                    showLabel: false,
     53                    iconClass: "rftIcon rftIconFullArrowUp",
     54                    baseClass: "rftBlockButton",
     55                    'class': "trans",
     56                    onClick: lang.hitch(this, function() {
     57                        this.moveItem("up");
     58                    })
     59                }, this.btnListMoveUp);
    6160
    62                                 new dijit.form.Button({
    63                                         label: "Move down",
    64                                         showLabel: false,
    65                                         iconClass: "rftIcon rftIconFullArrowDown",
    66                                         baseClass: "rftBlockButton",
    67                                         class: "trans",
    68                                         onClick: lang.hitch(this, function() {
    69                                                 this.moveItem("down");
    70                                         })
    71                                 }, this.btnListMoveDown);
    72                         },
    73                         creatorMethod: function(controller, listView, item, hint) {
    74                                 var node,
    75                                 object = controller.getQuestion(item);
    76                                 if (!object) {
    77                                         return false;
    78                                 }
     61                new dijit.form.Button({
     62                    label: "Move down",
     63                    showLabel: false,
     64                    iconClass: "rftIcon rftIconFullArrowDown",
     65                    baseClass: "rftBlockButton",
     66                    'class': "trans",
     67                    onClick: lang.hitch(this, function() {
     68                        this.moveItem("down");
     69                    })
     70                }, this.btnListMoveDown);
     71            },
     72            creatorMethod: function(item, hint) {
     73                var node;
    7974
    80                                 if (hint == "avatar") {
    81                                         node = document.createElement("div");
    82                                         node.className = "dragAvatar";
    83                                         node.innerHTML = object.title;
    84                                 } else {
    85                                         var w = new LineWithActionsWidget({
    86                                                 title: object.title,
    87                                                 class: "inheritBgColor",
    88                                                 actions: {
    89                                                         "Remove" : {
    90                                                                 callback: lang.hitch(listView, function(evt){
    91                                                                         this.removeItem(evt);
    92                                                                 }),
    93                                                                 properties: {
    94                                                                         blockButton: false,
    95                                                                         icon: "Delete",
    96                                                                         modifiers: "white",
    97                                                                         label: "Remove"
    98                                                                 }
    99                                                         },
    100                                                         "Info" : {
    101                                                                 callback: function(){
    102                                                                         var question = controller.getQuestion(item);
    103                                                                         console.log(question);
    104                                                                         alert("info goes here yo!");
    105                                                                 },
    106                                                                 properties: {
    107                                                                         blockButton: false,
    108                                                                         icon: "Inspect",
    109                                                                         modifiers: "white",
    110                                                                         label: "Show info"
    111                                                                 }
    112                                                         }
    113                                                 }
    114                                         });
    115                                         w.startup();
    116                                         node = w.domNode;
    117                                 }
    118                                 var fullItem = {node: node, data: item, type: "SurveyListviewItem"}
    119                                 return fullItem;
    120                         },
    121                         moveItem: function(dir) {
    122                                 var node = this.source.getSelectedNodes()[0];
    123                                 if (node) {
    124                                         if (dir == "up") {
    125                                                 if (node.previousSibling) {
    126                                                         return node.parentNode.insertBefore(node, node.previousSibling);
    127                                                 } else {
    128                                                         return false;
    129                                                 }
     75                if (hint == "avatar") {
     76                    node = document.createElement("div");
     77                    node.className = "dragAvatar";
     78                    node.innerHTML = item.title;
     79                } else {
     80                    var w = new LineWithActionsWidget({
     81                        title: item.title,
     82                        'class': "inheritBgColor",
     83                        actions: {
     84                            "Remove" : {
     85                                callback: lang.hitch(this, function(){
     86                                    this.removeItem(item, w);
     87                                }),
     88                                properties: {
     89                                    blockButton: false,
     90                                    icon: "Delete",
     91                                    modifiers: "white",
     92                                    label: "Remove"
     93                                }
     94                            },
     95                            "Info" : {
     96                                callback: function(){ item.description && alert(item.description); },
     97                                properties: {
     98                                    blockButton: false,
     99                                    icon: "Inspect",
     100                                    modifiers: "white",
     101                                    label: "Show info"
     102                                }
     103                            }
     104                        }
     105                    });
     106                    w.startup();
     107                    node = w.domNode;
     108                }
     109                var fullItem = {
     110                    node: node,
     111                    data: item,
     112                    type: "SurveyListviewItem"
     113                };
     114                return fullItem;
     115            },
     116            moveItem: function(dir) {
     117                var node = this.source.getSelectedNodes()[0];
     118                if (node) {
     119                    if (dir == "up") {
     120                        if (node.previousSibling) {
     121                            return node.parentNode.insertBefore(node, node.previousSibling);
     122                        } else {
     123                            return false;
     124                        }
    130125
    131                                         } else if (dir == "down") {
    132                                                 if (node.nextSibling) {
    133                                                         return node.parentNode.insertBefore(node.nextSibling, node);
    134                                                 } else {
    135                                                         return false;
    136                                                 }
    137                                         } else {
    138                                                 throw "Invalid move direction passed!";
    139                                         }
    140                                 } else {
    141                                         return false;
    142                                 }
    143                         },
    144                         insertItem: function(objectId) {
    145                                 var anchor = this.source.getSelectedNodes()[0];
    146                                 if (anchor) {
    147                                         this.source.insertNodes(false, [objectId], false, anchor);
    148                                 } else {
    149                                         this.source.insertNodes(false, [objectId]);
    150                                 }
    151                         },
    152                         removeItem: function(evt){
    153                                 debugger;
    154                         }
    155                 });
     126                    } else if (dir == "down") {
     127                        if (node.nextSibling) {
     128                            return node.parentNode.insertBefore(node.nextSibling, node);
     129                        } else {
     130                            return false;
     131                        }
     132                    } else {
     133                        throw "Invalid move direction passed!";
     134                    }
     135                } else {
     136                    return false;
     137                }
     138            },
     139            insertItem: function(item) {
     140                var anchor = this.source.getSelectedNodes()[0];
     141                if (anchor) {
     142                    this.source.insertNodes(false,[item], false, anchor);
     143                } else {
     144                    this.source.insertNodes(false,[item]);
     145                }
     146            },
     147            removeItem: function(item,widget){
     148                widget.destroy();
     149            }
     150        });
    156151});
Note: See TracChangeset for help on using the changeset viewer.