source: Dev/branches/rest-dojo-ui/client/rft/ui/Selector.js @ 402

Last change on this file since 402 was 396, checked in by tjcschipper, 13 years ago
  • Modifiers property on LineWithActions? and selectors is gone! Yay! Colour handling now happens through a combination of up to four CSS classes.

    "red/blue/orange/green/purple/etc": These do not do anything in themselves, they just mark a certain element as being of that colour.
    "inheritBgColor": Any element that has this class assigned will adjust its color to the color class of their parents. A 'div.blue' has no colour itself, but a 'div.inheritBgColor' within that div will turn blue. It also adjusts text colour to white.
    "bg": Any element with this property will also take on any colour class assigned to itself. This overrides 'inheritBgColor' if the element has both classes, so you could still make an orange button in a 'blue' container if you wanted. If the element itself does not have a colour class, it will stay transparent. This also adjusts text colour to white.
    "light": This class modifies the inherited/set colour to its lighter version (see RFT Design Sheet). For example, it can be used when placing a blue BlockButton? on an already blue LineWithActions?: adding the light class will differentiate the button from the background.

For examples of how to implement/derive more specific style rules using these classes, see rftButtons.css.

  • Changed all widgets still using the 'modifiers' to assign proper colour classes where necessary. (For instance, changed Selector.js to always set its main buttons to "light".)
File size: 6.3 KB
Line 
1define([
2    'dojo/_base/declare',
3    'dojo/_base/array',
4    'dijit/registry',
5    'dojo/_base/lang',
6    'dojo/_base/event',
7    'dojo/fx',
8    'dijit/_WidgetBase',
9    'dijit/_TemplatedMixin',
10    'dijit/_WidgetsInTemplateMixin',
11    'dijit/_Container',
12    './LineWithActionsWidget',
13    'dojo/text!./templates/Selector.html',
14    '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',
33
34            title: "",
35            selectedActions: null,
36            itemActions: null,
37            // main selector action: Object
38            //    title:
39            //    description:
40            //    icon:
41
42            _folded: true,
43            _titleLine: null,
44            _selectorLine: null,
45            _selectedItem: null,
46
47            startup: function() {
48                domClass.add(this.selectedColorNode, "pending");
49
50                this._createTitleLine();
51                this._createSelectorLine();
52
53                fx.wipeOut({
54                    node: this.optionsNode
55                }).play();
56            },
57            _createTitleLine: function() {
58                var actions = {};
59                var action = null;
60                if ( this.selectedActions !== null ) {
61                    for (var actionName in this.selectedActions) {
62                        action = this.selectedActions[actionName];
63                        actions[actionName] = {
64                            callback: action.callback &&
65                                    lang.hitch(this,this._onSelectedAction,
66                                            action.callback),
67                            properties: {
68                                 blockButton: true,
69                                 label: action.title || actionName,
70                                 icon: action.icon,
71                                 tooltip: action.description
72                             }
73
74                        };
75                    }
76                }
77
78                this._titleLine = new LineWithActionsWidget({
79                    title: this.title,
80                    actions: actions
81                },this.titleNode);
82                this._titleLine.startup();
83            },
84            _createSelectorLine: function() {
85                this._selectorLine = new LineWithActionsWidget({
86                    title: 'None',
87                    actions: {
88                        "Toggle dropdown" : {
89                            callback: lang.hitch(this, this.onToggle),
90                            properties: {
91                                blockButton: true,
92                                showLabel: false,
93                                icon: "HalfArrowDown"
94                            }
95                        }
96                    }
97                },this.selectedItemNode);
98                this._selectorLine.startup();
99                this._selectorLine.on('click',lang.hitch(this, this.onToggle));
100            },
101            _onSelect: function(item, widget) {
102                this._selectedItem = item;
103                this.onToggle();
104                this._selectorLine.set("title", item.title);
105                baseArray.forEach(this.optionsNode.childNodes, function(node){
106                    var line = registry.byNode(node);
107                    if (line) {
108                        if (line === widget) {
109                            domClass.add(line.domNode, "inheritBgColor light");
110                        } else {
111                            domClass.remove(line.domNode, "inheritBgColor light");
112                        }
113                    }
114                }, this);
115                this.onSelect(item);
116            },
117            _onSelectedAction: function(callback) {
118                if (this._selectedItem && callback) {
119                    callback(this._selectedItem);
120                }
121            },
122
123            onToggle: function(evt) {
124                if (this._folded) {
125                    var downArrowIcon = dojo.query(".rftBlockButton .rftIconHalfArrowDown", this._selectorLine.buttonsNode)[0];
126                    if (downArrowIcon){
127                        domClass.replace(downArrowIcon, "rftIconHalfArrowUp", "rftIconHalfArrowDown");
128                    }
129                    fx.wipeIn({
130                        node: this.optionsNode
131                    }).play();
132                    this._folded = false;
133                } else {
134                    var upArrowIcon = dojo.query(".rftBlockButton .rftIconHalfArrowUp", this._selectorLine.buttonsNode)[0];
135                    if (upArrowIcon){
136                        domClass.replace(upArrowIcon, "rftIconHalfArrowDown", "rftIconHalfArrowUp");
137                    }
138                    fx.wipeOut({
139                        node: this.optionsNode
140                    }).play();
141                    this._folded = true;
142                }
143                evt && event.stop(evt);
144                return false;
145            },
146
147            addItem: function(item) {
148                var actions = {};
149                var action;
150                if (this.itemActions) {
151                    for (var actionName in this.itemActions) {
152                        action = this.itemActions[actionName];
153                        actions[actionName] = {
154                            callback: function(){action.callback && action.callback(item);},
155                            properties: {
156                                blockButton: false,
157                                showLabel: false,
158                                icon: action.icon + " black",
159                                tooltip: action.description
160                            }
161                        }
162                    }
163                }
164                var w = new LineWithActionsWidget({
165                    title: item.title,
166                    actions: actions
167                }).placeAt(this.optionsNode);
168                w.startup();
169                w.on("click", lang.hitch(this, this._onSelect, item, w));
170            },
171
172            onSelect: function(item) {}
173        });
174});
Note: See TracBrowser for help on using the repository browser.