source: Dev/branches/rest-dojo-ui/client/dijit/layout/StackController.js @ 256

Last change on this file since 256 was 256, checked in by hendrikvanantwerpen, 13 years ago

Reworked project structure based on REST interaction and Dojo library. As
soon as this is stable, the old jQueryUI branch can be removed (it's
kept for reference).
File size: 11.4 KB
Line 
1define([
2        "dojo/_base/array", // array.forEach array.indexOf array.map
3        "dojo/_base/declare", // declare
4        "dojo/_base/event", // event.stop
5        "dojo/keys", // keys
6        "dojo/_base/lang", // lang.getObject
7        "dojo/_base/sniff", // has("ie")
8        "../focus",             // focus.focus()
9        "../registry",  // registry.byId
10        "../_Widget",
11        "../_TemplatedMixin",
12        "../_Container",
13        "../form/ToggleButton",
14        "dojo/i18n!../nls/common"
15], function(array, declare, event, keys, lang, has,
16                        focus, registry, _Widget, _TemplatedMixin, _Container, ToggleButton){
17
18/*=====
19        var _Widget = dijit._Widget;
20        var _TemplatedMixin = dijit._TemplatedMixin;
21        var _Container = dijit._Container;
22        var ToggleButton = dijit.form.ToggleButton;
23=====*/
24
25        // module:
26        //              dijit/layout/StackController
27        // summary:
28        //              Set of buttons to select a page in a `dijit.layout.StackContainer`
29
30        var StackButton = declare("dijit.layout._StackButton", ToggleButton, {
31                // summary:
32                //              Internal widget used by StackContainer.
33                // description:
34                //              The button-like or tab-like object you click to select or delete a page
35                // tags:
36                //              private
37
38                // Override _FormWidget.tabIndex.
39                // StackContainer buttons are not in the tab order by default.
40                // Probably we should be calling this.startupKeyNavChildren() instead.
41                tabIndex: "-1",
42
43                // closeButton: Boolean
44                //              When true, display close button for this tab
45                closeButton: false,
46               
47                _setCheckedAttr: function(/*Boolean*/ value, /*Boolean?*/ priorityChange){
48                        this.inherited(arguments);
49                        this.focusNode.removeAttribute("aria-pressed");
50                },
51
52                buildRendering: function(/*Event*/ evt){
53                        this.inherited(arguments);
54                        (this.focusNode || this.domNode).setAttribute("role", "tab");
55                },
56
57                onClick: function(/*Event*/ /*===== evt =====*/){
58                        // summary:
59                        //              This is for TabContainer where the tabs are <span> rather than button,
60                        //              so need to set focus explicitly (on some browsers)
61                        //              Note that you shouldn't override this method, but you can connect to it.
62                        focus.focus(this.focusNode);
63
64                        // ... now let StackController catch the event and tell me what to do
65                },
66
67                onClickCloseButton: function(/*Event*/ evt){
68                        // summary:
69                        //              StackContainer connects to this function; if your widget contains a close button
70                        //              then clicking it should call this function.
71                        //              Note that you shouldn't override this method, but you can connect to it.
72                        evt.stopPropagation();
73                }
74        });
75
76
77        var StackController = declare("dijit.layout.StackController", [_Widget, _TemplatedMixin, _Container], {
78                // summary:
79                //              Set of buttons to select a page in a `dijit.layout.StackContainer`
80                // description:
81                //              Monitors the specified StackContainer, and whenever a page is
82                //              added, deleted, or selected, updates itself accordingly.
83
84                baseClass: "dijitStackController",
85
86                templateString: "<span role='tablist' data-dojo-attach-event='onkeypress'></span>",
87
88                // containerId: [const] String
89                //              The id of the page container that I point to
90                containerId: "",
91
92                // buttonWidget: [const] Constructor
93                //              The button widget to create to correspond to each page
94                buttonWidget: StackButton,
95
96                constructor: function(){
97                        this.pane2button = {};          // mapping from pane id to buttons
98                        this.pane2connects = {};        // mapping from pane id to this.connect() handles
99                        this.pane2watches = {};         // mapping from pane id to watch() handles
100                },
101
102                postCreate: function(){
103                        this.inherited(arguments);
104
105                        // Listen to notifications from StackContainer
106                        this.subscribe(this.containerId+"-startup", "onStartup");
107                        this.subscribe(this.containerId+"-addChild", "onAddChild");
108                        this.subscribe(this.containerId+"-removeChild", "onRemoveChild");
109                        this.subscribe(this.containerId+"-selectChild", "onSelectChild");
110                        this.subscribe(this.containerId+"-containerKeyPress", "onContainerKeyPress");
111                },
112
113                onStartup: function(/*Object*/ info){
114                        // summary:
115                        //              Called after StackContainer has finished initializing
116                        // tags:
117                        //              private
118                        array.forEach(info.children, this.onAddChild, this);
119                        if(info.selected){
120                                // Show button corresponding to selected pane (unless selected
121                                // is null because there are no panes)
122                                this.onSelectChild(info.selected);
123                        }
124                },
125
126                destroy: function(){
127                        for(var pane in this.pane2button){
128                                this.onRemoveChild(registry.byId(pane));
129                        }
130                        this.inherited(arguments);
131                },
132
133                onAddChild: function(/*dijit._Widget*/ page, /*Integer?*/ insertIndex){
134                        // summary:
135                        //              Called whenever a page is added to the container.
136                        //              Create button corresponding to the page.
137                        // tags:
138                        //              private
139
140                        // create an instance of the button widget
141                        // (remove typeof buttonWidget == string support in 2.0)
142                        var cls = lang.isString(this.buttonWidget) ? lang.getObject(this.buttonWidget) : this.buttonWidget;
143                        var button = new cls({
144                                id: this.id + "_" + page.id,
145                                label: page.title,
146                                dir: page.dir,
147                                lang: page.lang,
148                                textDir: page.textDir,
149                                showLabel: page.showTitle,
150                                iconClass: page.iconClass,
151                                closeButton: page.closable,
152                                title: page.tooltip
153                        });
154                        button.focusNode.setAttribute("aria-selected", "false");
155
156
157                        // map from page attribute to corresponding tab button attribute
158                        var pageAttrList = ["title", "showTitle", "iconClass", "closable", "tooltip"],
159                                buttonAttrList = ["label", "showLabel", "iconClass", "closeButton", "title"];
160
161                        // watch() so events like page title changes are reflected in tab button
162                        this.pane2watches[page.id] = array.map(pageAttrList, function(pageAttr, idx){
163                                return page.watch(pageAttr, function(name, oldVal, newVal){
164                                        button.set(buttonAttrList[idx], newVal);
165                                });
166                        });
167
168                        // connections so that clicking a tab button selects the corresponding page
169                        this.pane2connects[page.id] = [
170                                this.connect(button, 'onClick', lang.hitch(this,"onButtonClick", page)),
171                                this.connect(button, 'onClickCloseButton', lang.hitch(this,"onCloseButtonClick", page))
172                        ];
173
174                        this.addChild(button, insertIndex);
175                        this.pane2button[page.id] = button;
176                        page.controlButton = button;    // this value might be overwritten if two tabs point to same container
177                        if(!this._currentChild){ // put the first child into the tab order
178                                button.focusNode.setAttribute("tabIndex", "0");
179                                button.focusNode.setAttribute("aria-selected", "true");
180                                this._currentChild = page;
181                        }
182                        // make sure all tabs have the same length
183                        if(!this.isLeftToRight() && has("ie") && this._rectifyRtlTabList){
184                                this._rectifyRtlTabList();
185                        }
186                },
187
188                onRemoveChild: function(/*dijit._Widget*/ page){
189                        // summary:
190                        //              Called whenever a page is removed from the container.
191                        //              Remove the button corresponding to the page.
192                        // tags:
193                        //              private
194
195                        if(this._currentChild === page){ this._currentChild = null; }
196
197                        // disconnect/unwatch connections/watches related to page being removed
198                        array.forEach(this.pane2connects[page.id], lang.hitch(this, "disconnect"));
199                        delete this.pane2connects[page.id];
200                        array.forEach(this.pane2watches[page.id], function(w){ w.unwatch(); });
201                        delete this.pane2watches[page.id];
202
203                        var button = this.pane2button[page.id];
204                        if(button){
205                                this.removeChild(button);
206                                delete this.pane2button[page.id];
207                                button.destroy();
208                        }
209                        delete page.controlButton;
210                },
211
212                onSelectChild: function(/*dijit._Widget*/ page){
213                        // summary:
214                        //              Called when a page has been selected in the StackContainer, either by me or by another StackController
215                        // tags:
216                        //              private
217
218                        if(!page){ return; }
219
220                        if(this._currentChild){
221                                var oldButton=this.pane2button[this._currentChild.id];
222                                oldButton.set('checked', false);
223                                oldButton.focusNode.setAttribute("aria-selected", "false");
224                                oldButton.focusNode.setAttribute("tabIndex", "-1");
225                        }
226
227                        var newButton=this.pane2button[page.id];
228                        newButton.set('checked', true);
229                        newButton.focusNode.setAttribute("aria-selected", "true");
230                        this._currentChild = page;
231                        newButton.focusNode.setAttribute("tabIndex", "0");
232                        var container = registry.byId(this.containerId);
233                        container.containerNode.setAttribute("aria-labelledby", newButton.id);
234                },
235
236                onButtonClick: function(/*dijit._Widget*/ page){
237                        // summary:
238                        //              Called whenever one of my child buttons is pressed in an attempt to select a page
239                        // tags:
240                        //              private
241
242                        if(this._currentChild.id === page.id) {
243                                //In case the user clicked the checked button, keep it in the checked state because it remains to be the selected stack page.
244                                var button=this.pane2button[page.id];
245                                button.set('checked', true);
246                        }
247                        var container = registry.byId(this.containerId);
248                        container.selectChild(page);
249                },
250
251                onCloseButtonClick: function(/*dijit._Widget*/ page){
252                        // summary:
253                        //              Called whenever one of my child buttons [X] is pressed in an attempt to close a page
254                        // tags:
255                        //              private
256
257                        var container = registry.byId(this.containerId);
258                        container.closeChild(page);
259                        if(this._currentChild){
260                                var b = this.pane2button[this._currentChild.id];
261                                if(b){
262                                        focus.focus(b.focusNode || b.domNode);
263                                }
264                        }
265                },
266
267                // TODO: this is a bit redundant with forward, back api in StackContainer
268                adjacent: function(/*Boolean*/ forward){
269                        // summary:
270                        //              Helper for onkeypress to find next/previous button
271                        // tags:
272                        //              private
273
274                        if(!this.isLeftToRight() && (!this.tabPosition || /top|bottom/.test(this.tabPosition))){ forward = !forward; }
275                        // find currently focused button in children array
276                        var children = this.getChildren();
277                        var current = array.indexOf(children, this.pane2button[this._currentChild.id]);
278                        // pick next button to focus on
279                        var offset = forward ? 1 : children.length - 1;
280                        return children[ (current + offset) % children.length ]; // dijit._Widget
281                },
282
283                onkeypress: function(/*Event*/ e){
284                        // summary:
285                        //              Handle keystrokes on the page list, for advancing to next/previous button
286                        //              and closing the current page if the page is closable.
287                        // tags:
288                        //              private
289
290                        if(this.disabled || e.altKey ){ return; }
291                        var forward = null;
292                        if(e.ctrlKey || !e._djpage){
293                                switch(e.charOrCode){
294                                        case keys.LEFT_ARROW:
295                                        case keys.UP_ARROW:
296                                                if(!e._djpage){ forward = false; }
297                                                break;
298                                        case keys.PAGE_UP:
299                                                if(e.ctrlKey){ forward = false; }
300                                                break;
301                                        case keys.RIGHT_ARROW:
302                                        case keys.DOWN_ARROW:
303                                                if(!e._djpage){ forward = true; }
304                                                break;
305                                        case keys.PAGE_DOWN:
306                                                if(e.ctrlKey){ forward = true; }
307                                                break;
308                                        case keys.HOME:
309                                        case keys.END:
310                                                var children = this.getChildren();
311                                                if(children && children.length){
312                                                        children[e.charOrCode == keys.HOME ? 0 : children.length-1].onClick();
313                                                }
314                                                event.stop(e);
315                                                break;
316                                        case keys.DELETE:
317                                                if(this._currentChild.closable){
318                                                        this.onCloseButtonClick(this._currentChild);
319                                                }
320                                                event.stop(e);
321                                                break;
322                                        default:
323                                                if(e.ctrlKey){
324                                                        if(e.charOrCode === keys.TAB){
325                                                                this.adjacent(!e.shiftKey).onClick();
326                                                                event.stop(e);
327                                                        }else if(e.charOrCode == "w"){
328                                                                if(this._currentChild.closable){
329                                                                        this.onCloseButtonClick(this._currentChild);
330                                                                }
331                                                                event.stop(e); // avoid browser tab closing.
332                                                        }
333                                                }
334                                }
335                                // handle next/previous page navigation (left/right arrow, etc.)
336                                if(forward !== null){
337                                        this.adjacent(forward).onClick();
338                                        event.stop(e);
339                                }
340                        }
341                },
342
343                onContainerKeyPress: function(/*Object*/ info){
344                        // summary:
345                        //              Called when there was a keypress on the container
346                        // tags:
347                        //              private
348                        info.e._djpage = info.page;
349                        this.onkeypress(info.e);
350                }
351        });
352
353        StackController.StackButton = StackButton;      // for monkey patching
354
355        return StackController;
356});
Note: See TracBrowser for help on using the repository browser.