Ignore:
Timestamp:
09/03/12 18:14:37 (13 years ago)
Author:
hendrikvanantwerpen
Message:

Lots of small fixes.

Make it possible to read survey answers (when a question code is
provided), it is now displayed in place of the survey. More to come.

Some whitespace fixes.

Location:
Dev/branches/rest-dojo-ui/client/rft/ui
Files:
8 edited

Legend:

Unmodified
Added
Removed

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

    r405 r406  
    66    'dojo/topic',
    77    'dijit/_WidgetBase'
    8     ], function(declare, baseArray, Button, domClass, topic, _WidgetBase){
    9         return declare('rft.ui.Breadcrumbs', [_WidgetBase], {
    10             _crumbs: [],
    11            
    12             _last: function(){
    13                 return this._crumbs[this._crumbs.length-1];
    14             },
    15             _getIndexOf: function(label) {
    16                 dojo.forEach(this._crumbs, function(crumb, index){
    17                     if (crumb.label == label) {
    18                         return index;
    19                     }
    20                 }, this);
    21                 return -1;
    22             },
    23            
    24             addCrumb: function(label, path) {
    25                 this._crumbs.push({
    26                     label: label,
    27                     path:path
    28                 });
    29             },
    30             _removeAfter: function(index) {
    31                 var removals = this._crumbs.slice(index+1);
    32                 this._crumbs = this._crumbs.slice(0, index+1);
    33                 dojo.forEach(removals, function(removal){
    34                     removal.widget.destroyRecursive(false); // boolean "keepDOMnode"
    35                 }, this);
    36                 this._highlightLast();
    37             },
    38            
    39             _highlightLast: function() {
    40                 domClass.add(this._last().widget, "breadcrumbCurrent");
    41             },
    42             _unhighlightLast: function() {
    43                 domClass.remove(this._last(), "breadcrumbCurrent");
    44             },
    45            
    46             _changeTo: function(label, path) {
    47                 // TODO: Differentiate between navigating backwards and sideways/forward!
    48                 var index = baseArray.indexOf({label:label , path:path});
    49                 //var index = this._getIndexOf(label);  // Use this if passing path as an argument is not possible!
    50                 if (index >= 0) this._removeAfter(index);
    51                 this._addCrumb(label, path);
    52                 this._createBreadcrumbs();
    53             },
    54            
    55             _createBreadcrumb: function(label, path) {
    56                 return new Button({
    57                     baseClass: "breadcrumb",
    58                     label: label,
    59                     showlabel: true,
    60                     iconClass: "dijitNoIcon",
    61                     onClick: lang.hitch(this, function(){
    62                         rft.api.loadPage(path);  // TODO: fix this call!
    63                     })
    64                 });
    65             },
    66             _createBreadcrumbs: function() {
    67                 dojo.forEach(this._crumbs, function(crumb, index){
    68                     if (!crumb.widget) {
    69                         crumb.widget = this._createBreadcrumb(crumb.label, crumb.path);
    70                     }
    71                 }, this);
    72                 this._highlightLast();
    73             },
    74             startup: function() {
    75                 if ( this._started ){ return; }
    76                                 this.inherited(arguments);
    77                 // TODO: start page crumb creation?
    78                 this._createBreadCrumbs();
    79                 this._setupEvents();
    80                 this.inherited(arguments);
    81             },
    82             _setupEvents: function() {
    83             // TODO: Bind changeTo() listener to an "onLoadPage" event exposed by rft.api!
    84             topic.subscribe("rft/content/goTo", this._changeTo(label, path));
    85             }
    86         });
     8], function(declare, baseArray, Button, domClass, topic, _WidgetBase){
     9    return declare('rft.ui.Breadcrumbs', [_WidgetBase], {
     10        _crumbs: [],
     11       
     12        _last: function(){
     13            return this._crumbs[this._crumbs.length-1];
     14        },
     15        _getIndexOf: function(label) {
     16            dojo.forEach(this._crumbs, function(crumb, index){
     17                if (crumb.label == label) {
     18                    return index;
     19                }
     20            }, this);
     21            return -1;
     22        },
     23       
     24        addCrumb: function(label, path) {
     25            this._crumbs.push({
     26                label: label,
     27                path:path
     28            });
     29        },
     30        _removeAfter: function(index) {
     31            var removals = this._crumbs.slice(index+1);
     32            this._crumbs = this._crumbs.slice(0, index+1);
     33            dojo.forEach(removals, function(removal){
     34                removal.widget.destroyRecursive(false); // boolean "keepDOMnode"
     35            }, this);
     36            this._highlightLast();
     37        },
     38       
     39        _highlightLast: function() {
     40            domClass.add(this._last().widget, "breadcrumbCurrent");
     41        },
     42        _unhighlightLast: function() {
     43            domClass.remove(this._last(), "breadcrumbCurrent");
     44        },
     45       
     46        _changeTo: function(label, path) {
     47            // TODO: Differentiate between navigating backwards and sideways/forward!
     48            var index = baseArray.indexOf({label:label , path:path});
     49            //var index = this._getIndexOf(label);  // Use this if passing path as an argument is not possible!
     50            if (index >= 0) this._removeAfter(index);
     51            this._addCrumb(label, path);
     52            this._createBreadcrumbs();
     53        },
     54       
     55        _createBreadcrumb: function(label, path) {
     56            return new Button({
     57                baseClass: "breadcrumb",
     58                label: label,
     59                showlabel: true,
     60                iconClass: "dijitNoIcon",
     61                onClick: lang.hitch(this, function(){
     62                    rft.api.loadPage(path);  // TODO: fix this call!
     63                })
     64            });
     65        },
     66        _createBreadcrumbs: function() {
     67            dojo.forEach(this._crumbs, function(crumb, index){
     68                if (!crumb.widget) {
     69                    crumb.widget = this._createBreadcrumb(crumb.label, crumb.path);
     70                }
     71            }, this);
     72            this._highlightLast();
     73        },
     74        startup: function() {
     75            if ( this._started ){ return; }
     76            this.inherited(arguments);
     77            // TODO: start page crumb creation?
     78            this._createBreadCrumbs();
     79            this._setupEvents();
     80            this.inherited(arguments);
     81        },
     82        _setupEvents: function() {
     83        // TODO: Bind changeTo() listener to an "onLoadPage" event exposed by rft.api!
     84        topic.subscribe("rft/content/goTo", this._changeTo(label, path));
     85        }
    8786    });
    88    
    89     /*  Breadcrumbs system, which automatically generates styled buttons in the topBar.
    90      *  Updates are triggered through a "changePage" subscription to "rft/connect/goTo" (method that loads pages in rft.connect.js)
    91      *
    92      * Todo: Startup() does not handle initial creation well. No initial breadcrumb is created on page load. What happens when I refresh the page, do all previous crumbs disappear?
    93      * Todo: Pages should have a label/name besides the path, for display in the breadcrumbs bar. Perhaps the page main title? (Generate this header dynamically?)
    94      * Todo: Put connect.publish("rft/content/goTo", args); call in rft/content, to trigger breadcrumbs updates
    95      *      This method uses path and 'args'(?) instead of label and path, change terminology accordingly?
    96      * Todo: breadcrumbs do not have context yet, unless we can somehow create that context from the path. Split path at "/" char, lookup label/title for each step?
    97      *      (See before!)
    98      *
    99      */
     87});
     88
     89/*  Breadcrumbs system, which automatically generates styled buttons in the topBar.
     90 *  Updates are triggered through a "changePage" subscription to "rft/connect/goTo" (method that loads pages in rft.connect.js)
     91 *
     92 * Todo: Startup() does not handle initial creation well. No initial breadcrumb is created on page load. What happens when I refresh the page, do all previous crumbs disappear?
     93 * Todo: Pages should have a label/name besides the path, for display in the breadcrumbs bar. Perhaps the page main title? (Generate this header dynamically?)
     94 * Todo: Put connect.publish("rft/content/goTo", args); call in rft/content, to trigger breadcrumbs updates
     95 *      This method uses path and 'args'(?) instead of label and path, change terminology accordingly?
     96 * Todo: breadcrumbs do not have context yet, unless we can somehow create that context from the path. Split path at "/" char, lookup label/title for each step?
     97 *      (See before!)
     98 *
     99 */

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

    r405 r406  
    11define(['dojo/_base/declare',
    2         'dojo/_base/lang',
    3         'dojo/on',
    4         'dojo/dom',
    5         'dojo/_base/event',
    6         'dojo/dom-class',
    7         'dijit/form/Button',
    8         'dijit/_WidgetBase',
    9         'dijit/_TemplatedMixin',
    10         'dijit/_WidgetsInTemplateMixin',
    11         'dojo/text!./templates/LineWithActionsWidget.html'
    12         ],
    13         function(declare,lang,on,dom,event,domClass,Button,_WidgetBase,_TemplatedMixin,_WidgetsInTemplateMixin,templateString){
    14                 return declare('rft.ui.LineWithActionsWidget',[_WidgetBase,_TemplatedMixin,_WidgetsInTemplateMixin],{
    15                         templateString: templateString,
    16                         baseClass: 'rftLineWithButtons',
    17                         title: '',
    18                         selectable: false,
    19                         userObject: null,
     2    'dojo/_base/lang',
     3    'dojo/on',
     4    'dojo/dom',
     5    'dojo/_base/event',
     6    'dojo/dom-class',
     7    'dijit/form/Button',
     8    'dijit/_WidgetBase',
     9    'dijit/_TemplatedMixin',
     10    'dijit/_WidgetsInTemplateMixin',
     11    'dojo/text!./templates/LineWithActionsWidget.html'
     12],function(declare,lang,on,dom,event,domClass,Button,_WidgetBase,_TemplatedMixin,_WidgetsInTemplateMixin,templateString){
     13    return declare('rft.ui.LineWithActionsWidget',[_WidgetBase,_TemplatedMixin,_WidgetsInTemplateMixin],{
     14        templateString: templateString,
     15        baseClass: 'rftLineWithButtons',
     16        title: '',
     17        selectable: false,
     18        userObject: null,
    2019
    21                         actions: null,
    22                         postCreate: function() {
    23                                 dom.setSelectable(this.domNode, false); // Text selection, has nothing to do with object selection!
    24                                 on(this.domNode,'click',lang.hitch(this,'_onClick'));
    25                         },
    26                         startup: function() {
    27                 if ( this._started ){ return; }
    28                                 this.inherited(arguments);
    29                                 this._setupActions();
    30                                 domClass.add(this.domNode, "inheritBgColor bg");
    31                                 this.refresh();
    32                         },
    33                         _setupActions: function() {
    34                 if ( this.actions === null ) {
    35                     return;
     20        actions: null,
     21        postCreate: function() {
     22            dom.setSelectable(this.domNode, false); // Text selection, has nothing to do with object selection!
     23            on(this.domNode,'click',lang.hitch(this,'_onClick'));
     24        },
     25        startup: function() {
     26            if ( this._started ){ return; }
     27            this.inherited(arguments);
     28            this._setupActions();
     29            domClass.add(this.domNode, "inheritBgColor bg");
     30            this.refresh();
     31        },
     32        _setupActions: function() {
     33            if ( this.actions === null ) {
     34                return;
     35            }
     36            for (var action in this.actions) {
     37                var properties;
     38                if (this.actions[action].properties.blockButton === true) {
     39                    properties = lang.mixin({
     40                        baseClass: 'rftBlockButton',
     41                        "class": "inheritBgColor light",
     42                        label: "Default",
     43                        iconClass: 'rftIcon rftIcon'+this.actions[action].properties.icon,
     44                        title: this.actions[action].properties.tooltip,
     45                        onClick: lang.hitch(this, function(action, e){
     46                            action.callback && action.callback(e);
     47                            event.stop(e);
     48                            return false;
     49                        }, this.actions[action])
     50                    }, this.actions[action].properties);
     51                    new Button(properties).placeAt(this.buttonsNode);
     52                } else {
     53                    properties = lang.mixin({
     54                        baseClass: 'rftInlineButton',
     55                        label: "Default",
     56                        showLabel: false,
     57                        iconClass: 'rftIcon rftIcon'+this.actions[action].properties.icon,
     58                        title: this.actions[action].properties.tooltip,
     59                        onClick: lang.hitch(this, function(action, e){
     60                            action.callback && action.callback(e);
     61                            event.stop(e);
     62                            return false;
     63                        }, this.actions[action])
     64                    }, this.actions[action].properties);
     65                    new Button(properties).placeAt(this.buttonsNode);
    3666                }
    37                                 for (var action in this.actions) {
    38                                         var properties;
    39                                         if (this.actions[action].properties.blockButton == true) {
    40                                                 properties = lang.mixin({
    41                                                         baseClass: 'rftBlockButton',
    42                             "class": "inheritBgColor light",
    43                                                         label: "Default",
    44                                                         iconClass: 'rftIcon rftIcon'+this.actions[action].properties.icon,
    45                                                         title: this.actions[action].properties.tooltip,
    46                             onClick: lang.hitch(this, function(action, e){
    47                                 action.callback && action.callback(e);
    48                                 event.stop(e);
    49                                 return false;
    50                             }, this.actions[action])
    51                                                 }, this.actions[action].properties);
    52                         new Button(properties).placeAt(this.buttonsNode);
    53                     } else {
    54                         properties = lang.mixin({
    55                             baseClass: 'rftInlineButton',
    56                             label: "Default",
    57                             showLabel: false,
    58                             iconClass: 'rftIcon rftIcon'+this.actions[action].properties.icon,
    59                             title: this.actions[action].properties.tooltip,
    60                             onClick: lang.hitch(this, function(action, e){
    61                                 action.callback && action.callback(e);
    62                                 event.stop(e);
    63                                 return false;
    64                             }, this.actions[action])
    65                         }, this.actions[action].properties);
    66                         new Button(properties).placeAt(this.buttonsNode);
    67                     }
    68                 }
    69             },
    70             refresh: function() {
    71                 this.titleNode.innerHTML = this.title;
    72             },
    73             _onClick: function(e){
    74                 var preventDefault = this.onClick(e) === false;
    75                 if (preventDefault) {
    76                     event.stop(e);
    77                 }
    78                 return !preventDefault;
    79             },
    80             onClick: function(e) {
    81             },
    82             _setTitleAttr: function(value){
    83                 this.title = value;
    84                 this.refresh();
    8567            }
    86         });
     68        },
     69        refresh: function() {
     70            this.titleNode.innerHTML = this.title;
     71        },
     72        _onClick: function(e){
     73            var preventDefault = this.onClick(e) === false;
     74            if (preventDefault) {
     75                event.stop(e);
     76            }
     77            return !preventDefault;
     78        },
     79        onClick: function(e) {
     80        },
     81        _setTitleAttr: function(value){
     82            this.title = value;
     83            this.refresh();
     84        }
    8785    });
     86});

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

    r405 r406  
    77    'rft/ui/LineWithActionsWidget',
    88    'dojo/text!./templates/ObjectBox.html',
    9     ], function(declare, lang, _WidgetBase, _TemplatedMixin, _WidgetsInTemplateMixin, LineWithActionsWidget, template){
    10         return declare('rft.ui.ObjectBox', [_WidgetBase, _TemplatedMixin, _WidgetsInTemplateMixin], {
    11             baseClass: "rftObjectBox",
    12             templateString: template,
    13             value: null,
    14             actions: null,
    15             startup: function() {
    16                 if ( this._started ){ return; }
    17                                 this.inherited(arguments);
    18                 this.line1 = new LineWithActionsWidget({
    19                     actions: {
    20                         "inspectIcon": {
    21                             callback: lang.hitch(this, this._showInfoBox),
    22                             properties: {
    23                                 blockButton: false,
    24                                 icon: "Inspect"
    25                             }
     9], function(declare, lang, _WidgetBase, _TemplatedMixin, _WidgetsInTemplateMixin, LineWithActionsWidget, template){
     10    return declare('rft.ui.ObjectBox', [_WidgetBase, _TemplatedMixin, _WidgetsInTemplateMixin], {
     11        baseClass: "rftObjectBox",
     12        templateString: template,
     13        value: null,
     14        actions: null,
     15        startup: function() {
     16            if ( this._started ){ return; }
     17            this.inherited(arguments);
     18            this.line1 = new LineWithActionsWidget({
     19                actions: {
     20                    "inspectIcon": {
     21                        callback: lang.hitch(this, this._showInfoBox),
     22                        properties: {
     23                            blockButton: false,
     24                            icon: "Inspect"
    2625                        }
    2726                    }
    28                 }).placeAt(this.line1Node);
    29                 this.line2 = new LineWithActionsWidget({
    30                 }).placeAt(this.line1Node);
    31                 var line3Actions = this._createLine3Actions();
    32                 this.line3 = new LineWithActionsWidget({
    33                     actions: line3Actions
    34                 }).placeAt(this.line1Node);
    35                 this.line1.startup();
    36                 this.line2.startup();
    37                 this.line3.startup();
    38                 this.inherited(arguments);
    39             },
    40             _createLine3Actions: function() {
    41                 var line3Actions = {};
    42                 for (var action in this.actions) {
    43                     line3Actions[action] = {
    44                         callback: lang.hitch(this, function(callback){
    45                             this.value && callback(this.value);
    46                         }, this.actions[action]),
    47                         properties: {
    48                             blockButton: true,
    49                             label: action,
    50                             icon: action.charAt(0).toUpperCase()+action.slice(1)
    51                         }
    52                     };
    5327                }
    54                 return line3Actions;
    55             },
    56             _showInfoBox: function() {
    57                 alert(this.value.description);
    58             },
    59             _setValueAttr: function(value) {
    60                 this.value = value;
    61                 this._refresh();
    62             },
    63             _getValueAttr: function(value) {
    64                 this.value = value;
    65             },
    66             _refresh: function() {
    67                 if ( this.value !== null ) {
    68                     this.iconNode.className = "rftIcon typeIcon rftIcon"+(this.value.type || '');
    69                     this.line1.set('title', this.value.title || '');
    70                     this.line2.set('title', this.value.subTitle || '');
    71                     this.line3.set('title', this.value.lowerTitle || '');
    72                 }
     28            }).placeAt(this.line1Node);
     29            this.line2 = new LineWithActionsWidget({
     30            }).placeAt(this.line1Node);
     31            var line3Actions = this._createLine3Actions();
     32            this.line3 = new LineWithActionsWidget({
     33                actions: line3Actions
     34            }).placeAt(this.line1Node);
     35            this.line1.startup();
     36            this.line2.startup();
     37            this.line3.startup();
     38            this.inherited(arguments);
     39        },
     40        _createLine3Actions: function() {
     41            var line3Actions = {};
     42            for (var action in this.actions) {
     43                line3Actions[action] = {
     44                    callback: lang.hitch(this, function(callback){
     45                        this.value && callback(this.value);
     46                    }, this.actions[action]),
     47                    properties: {
     48                        blockButton: true,
     49                        label: action,
     50                        icon: action.charAt(0).toUpperCase()+action.slice(1)
     51                    }
     52                };
    7353            }
    74         });
     54            return line3Actions;
     55        },
     56        _showInfoBox: function() {
     57            alert(this.value.description);
     58        },
     59        _setValueAttr: function(value) {
     60            this.value = value;
     61            this._refresh();
     62        },
     63        _getValueAttr: function(value) {
     64            this.value = value;
     65        },
     66        _refresh: function() {
     67            if ( this.value !== null ) {
     68                this.iconNode.className = "rftIcon typeIcon rftIcon"+(this.value.type || '');
     69                this.line1.set('title', this.value.title || '');
     70                this.line2.set('title', this.value.subTitle || '');
     71                this.line3.set('title', this.value.lowerTitle || '');
     72            }
     73        }
     74    });
    7575});

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

    r405 r406  
    1313    'dojo/text!./templates/Selector.html',
    1414    'dojo/dom-class',
    15     ],function(
    16         declare,
    17         baseArray,
    18         registry,
    19         lang,
    20         event,
    21         fx,
    22         _WidgetBase,
    23         _TemplatedMixin,
    24         _WidgetsInTemplateMixin,
    25         _Container,
    26         LineWithActionsWidget,
    27         templateString,
    28         domClass
    29         ){
    30         return declare('rft.ui.Selector',[_WidgetBase,_TemplatedMixin,_WidgetsInTemplateMixin,_Container],{
    31             templateString: templateString,
    32             baseClass: 'rftSelector',
     15],function(
     16    declare,
     17    baseArray,
     18    registry,
     19    lang,
     20    event,
     21    fx,
     22    _WidgetBase,
     23    _TemplatedMixin,
     24    _WidgetsInTemplateMixin,
     25    _Container,
     26    LineWithActionsWidget,
     27    templateString,
     28    domClass
     29    ){
     30    return declare('rft.ui.Selector',[_WidgetBase,_TemplatedMixin,_WidgetsInTemplateMixin,_Container],{
     31        templateString: templateString,
     32        baseClass: 'rftSelector',
    3333
    34             title: "",
    35             selectedActions: null,
    36             itemActions: null,
    37             // main selector action: Object
    38             //    title:
    39             //    description:
    40             //    icon:
     34        title: "",
     35        selectedActions: null,
     36        itemActions: null,
     37        // main selector action: Object
     38        //    title:
     39        //    description:
     40        //    icon:
    4141
    42             _folded: true,
    43             _titleLine: null,
    44             _selectorLine: null,
    45             _selectedItem: null,
     42        _folded: true,
     43        _titleLine: null,
     44        _selectorLine: null,
     45        _selectedItem: null,
    4646
    47             startup: function() {
    48                 if ( this._started ){ return; }
    49                                 this.inherited(arguments);
    50                 domClass.add(this.selectedColorNode, "pending");
     47        startup: function() {
     48            if ( this._started ){ return; }
     49            this.inherited(arguments);
     50            domClass.add(this.selectedColorNode, "pending");
    5151
    52                 this._createTitleLine();
    53                 this._createSelectorLine();
     52            this._createTitleLine();
     53            this._createSelectorLine();
    5454
     55            fx.wipeOut({
     56                node: this.optionsNode
     57            }).play();
     58        },
     59        _createTitleLine: function() {
     60            var actions = {};
     61            var action = null;
     62            if ( this.selectedActions !== null ) {
     63                for (var actionName in this.selectedActions) {
     64                    action = this.selectedActions[actionName];
     65                    actions[actionName] = {
     66                        callback: action.callback &&
     67                                lang.hitch(this,this._onSelectedAction,
     68                                        action.callback),
     69                        properties: {
     70                             blockButton: true,
     71                             label: action.title || actionName,
     72                             icon: action.icon,
     73                             tooltip: action.description
     74                         }
     75
     76                    };
     77                }
     78            }
     79
     80            this._titleLine = new LineWithActionsWidget({
     81                title: this.title,
     82                actions: actions
     83            },this.titleNode);
     84            this._titleLine.startup();
     85        },
     86        _createSelectorLine: function() {
     87            this._selectorLine = new LineWithActionsWidget({
     88                title: 'None',
     89                actions: {
     90                    "Toggle dropdown" : {
     91                        callback: lang.hitch(this, this.onToggle),
     92                        properties: {
     93                            blockButton: true,
     94                            showLabel: false,
     95                            icon: "HalfArrowDown"
     96                        }
     97                    }
     98                }
     99            },this.selectedItemNode);
     100            this._selectorLine.startup();
     101            this._selectorLine.on('click',lang.hitch(this, this.onToggle));
     102        },
     103        _onSelect: function(item, widget) {
     104            this._selectedItem = item;
     105            this.onToggle();
     106            this._selectorLine.set("title", item.title);
     107            baseArray.forEach(this.optionsNode.childNodes, function(node){
     108                var line = registry.byNode(node);
     109                if (line) {
     110                    if (line === widget) {
     111                        domClass.add(line.domNode, "inheritBgColor light");
     112                    } else {
     113                        domClass.remove(line.domNode, "inheritBgColor light");
     114                    }
     115                }
     116            }, this);
     117            this.onSelect(item);
     118        },
     119        _onSelectedAction: function(callback) {
     120            if (this._selectedItem && callback) {
     121                callback(this._selectedItem);
     122            }
     123        },
     124
     125        onToggle: function(evt) {
     126            if (this._folded) {
     127                var downArrowIcon = dojo.query(".rftBlockButton .rftIconHalfArrowDown", this._selectorLine.buttonsNode)[0];
     128                if (downArrowIcon){
     129                    domClass.replace(downArrowIcon, "rftIconHalfArrowUp", "rftIconHalfArrowDown");
     130                }
     131                fx.wipeIn({
     132                    node: this.optionsNode
     133                }).play();
     134                this._folded = false;
     135            } else {
     136                var upArrowIcon = dojo.query(".rftBlockButton .rftIconHalfArrowUp", this._selectorLine.buttonsNode)[0];
     137                if (upArrowIcon){
     138                    domClass.replace(upArrowIcon, "rftIconHalfArrowDown", "rftIconHalfArrowUp");
     139                }
    55140                fx.wipeOut({
    56141                    node: this.optionsNode
    57142                }).play();
    58             },
    59             _createTitleLine: function() {
    60                 var actions = {};
    61                 var action = null;
    62                 if ( this.selectedActions !== null ) {
    63                     for (var actionName in this.selectedActions) {
    64                         action = this.selectedActions[actionName];
    65                         actions[actionName] = {
    66                             callback: action.callback &&
    67                                     lang.hitch(this,this._onSelectedAction,
    68                                             action.callback),
    69                             properties: {
    70                                  blockButton: true,
    71                                  label: action.title || actionName,
    72                                  icon: action.icon,
    73                                  tooltip: action.description
    74                              }
     143                this._folded = true;
     144            }
     145            evt && event.stop(evt);
     146            return false;
     147        },
    75148
    76                         };
    77                     }
    78                 }
    79 
    80                 this._titleLine = new LineWithActionsWidget({
    81                     title: this.title,
    82                     actions: actions
    83                 },this.titleNode);
    84                 this._titleLine.startup();
    85             },
    86             _createSelectorLine: function() {
    87                 this._selectorLine = new LineWithActionsWidget({
    88                     title: 'None',
    89                     actions: {
    90                         "Toggle dropdown" : {
    91                             callback: lang.hitch(this, this.onToggle),
    92                             properties: {
    93                                 blockButton: true,
    94                                 showLabel: false,
    95                                 icon: "HalfArrowDown"
    96                             }
    97                         }
    98                     }
    99                 },this.selectedItemNode);
    100                 this._selectorLine.startup();
    101                 this._selectorLine.on('click',lang.hitch(this, this.onToggle));
    102             },
    103             _onSelect: function(item, widget) {
    104                 this._selectedItem = item;
    105                 this.onToggle();
    106                 this._selectorLine.set("title", item.title);
    107                 baseArray.forEach(this.optionsNode.childNodes, function(node){
    108                     var line = registry.byNode(node);
    109                     if (line) {
    110                         if (line === widget) {
    111                             domClass.add(line.domNode, "inheritBgColor light");
    112                         } else {
    113                             domClass.remove(line.domNode, "inheritBgColor light");
    114                         }
    115                     }
    116                 }, this);
    117                 this.onSelect(item);
    118             },
    119             _onSelectedAction: function(callback) {
    120                 if (this._selectedItem && callback) {
    121                     callback(this._selectedItem);
    122                 }
    123             },
    124 
    125             onToggle: function(evt) {
    126                 if (this._folded) {
    127                     var downArrowIcon = dojo.query(".rftBlockButton .rftIconHalfArrowDown", this._selectorLine.buttonsNode)[0];
    128                     if (downArrowIcon){
    129                         domClass.replace(downArrowIcon, "rftIconHalfArrowUp", "rftIconHalfArrowDown");
    130                     }
    131                     fx.wipeIn({
    132                         node: this.optionsNode
    133                     }).play();
    134                     this._folded = false;
    135                 } else {
    136                     var upArrowIcon = dojo.query(".rftBlockButton .rftIconHalfArrowUp", this._selectorLine.buttonsNode)[0];
    137                     if (upArrowIcon){
    138                         domClass.replace(upArrowIcon, "rftIconHalfArrowDown", "rftIconHalfArrowUp");
    139                     }
    140                     fx.wipeOut({
    141                         node: this.optionsNode
    142                     }).play();
    143                     this._folded = true;
    144                 }
    145                 evt && event.stop(evt);
    146                 return false;
    147             },
    148 
    149             addItem: function(item) {
    150                 var actions = {};
    151                 var action;
    152                 if (this.itemActions) {
    153                     for (var actionName in this.itemActions) {
    154                         action = this.itemActions[actionName];
    155                         actions[actionName] = {
    156                             callback: function(){
    157                                 action.callback && action.callback(item);
    158                             },
    159                             properties: {
    160                                 blockButton: false,
    161                                 showLabel: false,
    162                                 icon: action.icon + " black",
    163                                 tooltip: action.description
    164                             }
     149        addItem: function(item) {
     150            var actions = {};
     151            var action;
     152            if (this.itemActions) {
     153                for (var actionName in this.itemActions) {
     154                    action = this.itemActions[actionName];
     155                    actions[actionName] = {
     156                        callback: function(){
     157                            action.callback && action.callback(item);
     158                        },
     159                        properties: {
     160                            blockButton: false,
     161                            showLabel: false,
     162                            icon: action.icon + " black",
     163                            tooltip: action.description
    165164                        }
    166165                    }
    167166                }
    168                 var w = new LineWithActionsWidget({
    169                     title: item.title,
    170                     actions: actions
    171                 }).placeAt(this.optionsNode);
    172                 w.startup();
    173                 w.on("click", lang.hitch(this, this._onSelect, item, w));
    174             },
     167            }
     168            var w = new LineWithActionsWidget({
     169                title: item.title,
     170                actions: actions
     171            }).placeAt(this.optionsNode);
     172            w.startup();
     173            w.on("click", lang.hitch(this, this._onSelect, item, w));
     174        },
    175175
    176             onSelect: function(item) {}
    177         });
     176        onSelect: function(item) {}
     177    });
    178178});

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

    r404 r406  
    1818],function(array, declare, lang, domConstruct, _TemplatedMixin, _WidgetBase, _Container, Button, CheckBox, NumberSpinner, RadioButton, Textarea, TextBox, TableContainer, _EditableListMixin, OrderedList) {
    1919    var factory = declare('rft.ui.content.ContentWidgetFactory', [], {
    20         /* No default type, all should be valid */
    2120        createViewWidget: function(/*Object*/options) {
    2221            // options: Object
    … …  
    151150        _textBox: null,
    152151        postCreate: function() {
    153             this._textBox = new TextBox();
     152            this._textBox = new TextBox({
     153                name: this.options.code || ''
     154            });
    154155            this.addChild(this._textBox);
    155156            this._textBox.startup();
    … …  
    197198        _textArea: null,
    198199        postCreate: function() {
    199             this._textArea = new Textarea();
     200            this._textArea = new Textarea({
     201                name: this.options.code
     202            });
    200203            this._textArea.set('maxLength', this.options.maxLength || 1000);
    201204            this._textArea.set('value', this.options.defaultValue || "");
    … …  
    256259        postCreate: function() {
    257260            this._numberInput = new NumberSpinner({
     261                name: this.options.code || '',
    258262                constraints: {
    259263                    min: this.options.min,
    … …  
    333337
    334338            var ctor = this.options.multiple === true ? CheckBox : RadioButton;
    335             array.forEach(this.options.items ,function(item){
     339            array.forEach(this.options.items || [],function(item){
    336340                table.addChild(new ctor({
     341                        name: this.options.code || '',
    337342                        title: item
    338343                }));

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

    r396 r406  
    11define([
    22    'dojo/_base/declare',
    3         'dojo/_base/lang',
     3       'dojo/_base/lang',
    44    'dojo/dom-construct',
    55    '../LineWithActionsWidget',
    66    './OrderedList'
    7         ],function(
    8         declare,
    9         lang,
    10         domConstruct,
    11         LineWithActionsWidget,
    12         OrderedList
    13                 ) {
    14         return declare('rft.ui.lists.AccountListView',[OrderedList],{
    15             baseClass: 'rftAccountListView',
    16             type: 'account',
     7],function(
     8    declare,
     9    lang,
     10    domConstruct,
     11    LineWithActionsWidget,
     12    OrderedList
     13) {
     14    return declare('rft.ui.lists.AccountListView',[OrderedList],{
     15        baseClass: 'rftAccountListView',
     16        type: 'account',
    1717
    18             _createAvatarNode: function(item){
    19                 return domConstruct.create("div",{
    20                     'class': 'dragAvatar',
    21                     innerHTML: item.title
    22                 });
    23             },
    24             _createListNode: function(item) {
    25                         var w = new LineWithActionsWidget({
    26                                 title: item.title,
    27                                 'class': "green",
    28                                 actions: {
    29                                         "Remove" : {
    30                                                 callback: lang.hitch(this, 'removeItem', item),
    31                                                 properties: {
    32                                                         blockButton: false,
    33                                                         icon: "Delete"
    34                                                 }
    35                                         }
    36                                 }
    37                         });
    38                         w.startup();
    39                         return w.domNode;
    40                 }
    41         });
     18        _createAvatarNode: function(item){
     19            return domConstruct.create("div",{
     20                'class': 'dragAvatar',
     21                innerHTML: item.title
     22            });
     23        },
     24        _createListNode: function(item) {
     25            var w = new LineWithActionsWidget({
     26                title: item.title,
     27                'class': "green",
     28                actions: {
     29                    "Remove" : {
     30                        callback: lang.hitch(this, 'removeItem', item),
     31                        properties: {
     32                            blockButton: false,
     33                            icon: "Delete"
     34                        }
     35                    }
     36                }
     37            });
     38            w.startup();
     39            return w.domNode;
     40        }
    4241    });
     42});

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

    r396 r406  
    55    '../LineWithActionsWidget',
    66    './OrderedList'
    7     ],function(
    8         declare,
    9         lang,
    10         domConstruct,
    11         LineWithActionsWidget,
    12         OrderedList
    13         ) {
    14         return declare('rft.ui.lists.MultipleChoiceListView',[OrderedList],{
    15             baseClass: 'rftMultipleChoiceListView',
    16             type: 'multipleChoiceOption',
     7],function(
     8    declare,
     9    lang,
     10    domConstruct,
     11    LineWithActionsWidget,
     12    OrderedList
     13    ) {
     14    return declare('rft.ui.lists.MultipleChoiceListView',[OrderedList],{
     15        baseClass: 'rftMultipleChoiceListView',
     16        type: 'multipleChoiceOption',
    1717
    18             _createAvatarNode: function(item){
    19                 return domConstruct.create("div",{
    20                     'class': 'dragAvatar',
    21                     innerHTML: item.title
    22                 });
    23             },
    24             _createListNode: function(item) {
    25                 var w = new LineWithActionsWidget({
    26                     title: item.title,
    27                     'class': "orange",
    28                     actions: {
    29                         "Remove" : {
    30                                                 callback: lang.hitch(this, 'removeItem', item),
    31                             properties: {
    32                                 blockButton: false,
    33                                 icon: "Delete"
    34                             }
     18        _createAvatarNode: function(item){
     19            return domConstruct.create("div",{
     20                'class': 'dragAvatar',
     21                innerHTML: item.title
     22            });
     23        },
     24        _createListNode: function(item) {
     25            var w = new LineWithActionsWidget({
     26                title: item.title,
     27                'class': "orange",
     28                actions: {
     29                    "Remove" : {
     30                        callback: lang.hitch(this, 'removeItem', item),
     31                        properties: {
     32                            blockButton: false,
     33                            icon: "Delete"
    3534                        }
    3635                    }
    37                 });
    38                 w.startup();
    39                 return w.domNode;
    40             }
    41         });
     36                }
     37            });
     38            w.startup();
     39            return w.domNode;
     40        }
    4241    });
     42});

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

    r396 r406  
    55    '../LineWithActionsWidget',
    66    './OrderedList'
    7     ],function(
    8         declare,
    9         lang,
    10         domConstruct,
    11         LineWithActionsWidget,
    12         OrderedList
    13     ){
    14         return declare('rft.ui.lists.QuestionListView',[OrderedList],{
    15             baseClass: 'rftSurveyListView',
    16             type: 'question',
     7],function(
     8    declare,
     9    lang,
     10    domConstruct,
     11    LineWithActionsWidget,
     12    OrderedList
     13){
     14    return declare('rft.ui.lists.QuestionListView',[OrderedList],{
     15        baseClass: 'rftSurveyListView',
     16        type: 'question',
    1717
    18             _createAvatarNode: function(item){
    19                 return domConstruct.create("div",{
    20                     'class': 'dragAvatar',
    21                     innerHTML: item.title
    22                 });
    23             },
    24             _createListNode: function(item) {
    25                 var w = new LineWithActionsWidget({
    26                     title: item.title,
    27                     'class': "inheritBgColor",
    28                     actions: {
    29                         "Remove" : {
    30                                                 callback: lang.hitch(this, 'removeItem', item),
    31                             properties: {
    32                                 blockButton: false,
    33                                 icon: "Delete",
    34                                 label: "Remove"
    35                             }
    36                         },
    37                         "Info" : {
    38                             callback: function(){ item.description && alert(item.description); },
    39                             properties: {
    40                                 blockButton: false,
    41                                 icon: "Inspect",
    42                                 label: "Show info"
    43                             }
     18        _createAvatarNode: function(item){
     19            return domConstruct.create("div",{
     20                'class': 'dragAvatar',
     21                innerHTML: item.title
     22            });
     23        },
     24        _createListNode: function(item) {
     25            var w = new LineWithActionsWidget({
     26                title: item.title,
     27                'class': "inheritBgColor",
     28                actions: {
     29                    "Remove" : {
     30                        callback: lang.hitch(this, 'removeItem', item),
     31                        properties: {
     32                            blockButton: false,
     33                            icon: "Delete",
     34                            label: "Remove"
     35                        }
     36                    },
     37                    "Info" : {
     38                        callback: function(){ item.description && alert(item.description); },
     39                        properties: {
     40                            blockButton: false,
     41                            icon: "Inspect",
     42                            label: "Show info"
    4443                        }
    4544                    }
    46                 });
    47                 w.startup();
    48                 return w.domNode;
    49             }
    50         });
     45                }
     46            });
     47            w.startup();
     48            return w.domNode;
     49        }
    5150    });
     51});
Note: See TracChangeset for help on using the changeset viewer.