source: Dev/trunk/src/client/dojox/mobile/TabBar.js @ 529

Last change on this file since 529 was 483, checked in by hendrikvanantwerpen, 11 years ago

Added Dojo 1.9.3 release.
File size: 6.9 KB
Line 
1define([
2        "dojo/_base/array",
3        "dojo/_base/declare",
4        "dojo/_base/window",
5        "dojo/dom-class",
6        "dojo/dom-construct",
7        "dojo/dom-geometry",
8        "dojo/dom-style",
9        "dojo/dom-attr",
10        "dijit/_Contained",
11        "dijit/_Container",
12        "dijit/_WidgetBase",
13        "./TabBarButton",// to load TabBarButton for you (no direct references)
14        "dojo/has",
15        "dojo/has!dojo-bidi?dojox/mobile/bidi/TabBar"   
16], function(array, declare, win, domClass, domConstruct, domGeometry, domStyle, domAttr, Contained, Container, WidgetBase, TabBarButton, has, BidiTabBar){
17
18        // module:
19        //              dojox/mobile/TabBar
20
21        var TabBar =  declare(has("dojo-bidi") ? "dojox.mobile.NonBidiTabBar" : "dojox.mobile.TabBar", [WidgetBase, Container, Contained],{
22                // summary:
23                //              A bar widget that has buttons to control visibility of views.
24                // description:
25                //              TabBar is a container widget that has typically multiple
26                //              TabBarButtons which controls visibility of views. It can be used
27                //              as a tab container.
28
29                // iconBase: String
30                //              The default icon path for child items.
31                iconBase: "",
32
33                // iconPos: String
34                //              The default icon position for child items.
35                iconPos: "",
36
37                // barType: String
38                //              "tabBar", "segmentedControl", "standardTab", "slimTab", "flatTab",
39                //              or "tallTab"
40                barType: "tabBar",
41
42                // closable: Boolean
43                //              If true, user can close (destroy) a child tab by clicking the X on the tab.
44                //              This property is NOT effective for "tabBar" and "tallBar".
45                closable: false,
46
47                // center: Boolean
48                //              If true, place the tabs in the center of the bar.
49                //              This property is NOT effective for "tabBar".
50                center: true,
51
52                // syncWithViews: Boolean
53                //              If true, this widget listens to view transition events to be
54                //              synchronized with view's visibility.
55                syncWithViews: false,
56
57                // tag: String
58                //              A name of html tag to create as domNode.
59                tag: "ul",
60
61                // fill: String
62                //              Define if the TabBar should resize its children so that they evenly fill all the available space in the bar.
63                //
64                //              Allowed values:
65                //
66                //              1. "auto" is the default behavior from version 1.8: bar buttons are resized to evenly fill the entire bar only on small devices (width < 500px) and when barType is "tabBar"
67                //              2. "always": bar buttons are always resized to evenly fill the entire bar
68                //              3. "never": bar buttons are never resized to evenly fill the entire bar
69                fill: "auto",
70
71                /* internal properties */
72                // selectOne: [private] Boolean
73                //              Specifies that only one item can be selected.
74                selectOne: true,
75                baseClass: "mblTabBar",
76                _fixedButtonWidth: 76,
77                _fixedButtonMargin: 17,
78                _largeScreenWidth: 500,
79
80                buildRendering: function(){
81                        this.domNode = this.srcNodeRef || domConstruct.create(this.tag);
82                        domAttr.set(this.domNode, "role", "tablist");
83                        this.reset();
84                        this.inherited(arguments);
85                },
86
87                postCreate: function(){
88                        if(this.syncWithViews){ // see also RoundRect#postCreate
89                                var f = function(view, moveTo, dir, transition, context, method){
90                                        var child = array.filter(this.getChildren(), function(w){
91                                                return w.moveTo === "#" + view.id || w.moveTo === view.id; })[0];
92                                        if(child){ child.set("selected", true); }
93                                };
94                                this.subscribe("/dojox/mobile/afterTransitionIn", f);
95                                this.subscribe("/dojox/mobile/startView", f);
96                        }
97                },
98
99                startup: function(){
100                        if(this._started){ return; }
101                        this.inherited(arguments);
102                        this.resize();
103                },
104
105                reset: function(){
106                        // summary:
107                        //              Resets the widget to its initial state.
108                        var prev = this._barType;
109                        if(typeof this.barType === "object"){
110                                this._barType = this.barType["*"];
111                                for(var c in this.barType){
112                                        if(domClass.contains(win.doc.documentElement, c)){
113                                                this._barType = this.barType[c];
114                                                break;
115                                        }
116                                }
117                        }else{
118                                this._barType = this.barType;
119                        }
120                        var cap = function(s){
121                                return s.charAt(0).toUpperCase() + s.substring(1);
122                        };
123                        if(prev){
124                                domClass.remove(this.domNode, this.baseClass + cap(prev));
125                        }
126                        domClass.add(this.domNode, this.baseClass + cap(this._barType));
127                },
128
129                resize: function(size){
130                        var i, w;
131                        if(size && size.w){
132                                w = size.w;
133                        }else{
134                                w = domGeometry.getMarginBox(this.domNode).w;
135                        }
136                        var bw = this._fixedButtonWidth;
137                        var bm = this._fixedButtonMargin;
138                        var arr = array.map(this.getChildren(), function(w){ return w.domNode; });
139
140                        domClass.toggle(this.domNode, "mblTabBarNoIcons",
141                                                        !array.some(this.getChildren(), function(w){ return w.iconNode1; }));
142                        domClass.toggle(this.domNode, "mblTabBarNoText",
143                                                        !array.some(this.getChildren(), function(w){ return w.label; }));
144
145                        var margin = 0;
146                        if(this._barType == "tabBar"){
147                                this.containerNode.style.paddingLeft = "";
148                                margin = Math.floor((w - (bw + bm * 2) * arr.length) / 2);
149                                if(this.fill == "always" || (this.fill == "auto" && (w < this._largeScreenWidth || margin < 0))){
150                                        domClass.add(this.domNode, "mblTabBarFill");
151                                        for(i = 0; i < arr.length; i++){
152                                                arr[i].style.width = (100/arr.length) + "%";
153                                                arr[i].style.margin = "0";
154                                        }
155                                }else{
156                                        // Fixed width buttons. Mainly for larger screen such as iPad.
157                                        for(i = 0; i < arr.length; i++){
158                                                arr[i].style.width = bw + "px";
159                                                arr[i].style.margin = "0 " + bm + "px";
160                                        }
161                                        if(arr.length > 0){
162                                                if(has("dojo-bidi") && !this.isLeftToRight()){
163                                                        arr[0].style.marginLeft = "0px";
164                                                        arr[0].style.marginRight = margin + bm + "px";
165                                                }else{
166                                                        arr[0].style.marginLeft = margin + bm + "px";
167                                                }
168                                        }
169                                        this.containerNode.style.padding = "0px";
170                                }
171                        }else{
172                                for(i = 0; i < arr.length; i++){
173                                        arr[i].style.width = arr[i].style.margin = "";
174                                }
175                                var parent = this.getParent();
176                                if(this.fill == "always"){
177                                        domClass.add(this.domNode, "mblTabBarFill");
178                                        for(i = 0; i < arr.length; i++){
179                                                arr[i].style.width = (100/arr.length) + "%";
180                                                if(this._barType != "segmentedControl" && this._barType != "standardTab") {
181                                                        arr[i].style.margin = "0";
182                                                }
183                                        }
184                                }else{
185                                        if(this.center && (!parent || !domClass.contains(parent.domNode, "mblHeading"))){
186                                                margin = w;
187                                                for(i = 0; i < arr.length; i++){
188                                                        margin -= domGeometry.getMarginBox(arr[i]).w;
189                                                }
190                                                margin = Math.floor(margin/2);
191                                        }
192                                        if(has("dojo-bidi") && !this.isLeftToRight()){
193                                                this.containerNode.style.paddingLeft = "0px";
194                                                this.containerNode.style.paddingRight = margin ? margin + "px" : "";
195                                        }else{
196                                                this.containerNode.style.paddingLeft = margin ? margin + "px" : "";
197                                        }
198                                }
199                        }
200                        if(size && size.w){
201                                domGeometry.setMarginBox(this.domNode, size);
202                        }
203                },
204                getSelectedTab: function(){
205                        // summary:
206                        //              Returns the first selected child.
207                        return array.filter(this.getChildren(), function(w){ return w.selected; })[0];
208                },
209
210                onCloseButtonClick: function(/*TabBarButton*/tab){
211                        // summary:
212                        //              Called whenever the close button [X] of a child tab is clicked.
213                        return true;
214                }
215        });
216       
217        return has("dojo-bidi")?declare("dojox.mobile.TabBar", [TabBar, BidiTabBar]):TabBar;   
218});
Note: See TracBrowser for help on using the repository browser.