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:
3 edited

Legend:

Unmodified
Added
Removed

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

    • Property svn:ignore set to

  • 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.