2 'url:dijit/layout/templates/ScrollingTabController.html':"<div class=\"dijitTabListContainer-${tabPosition}\" style=\"visibility:hidden\">\n\t<div data-dojo-type=\"dijit.layout._ScrollingTabControllerMenuButton\"\n\t\t\tclass=\"tabStripButton-${tabPosition}\"\n\t\t\tid=\"${id}_menuBtn\"\n\t\t\tdata-dojo-props=\"containerId: '${containerId}', iconClass: 'dijitTabStripMenuIcon',\n\t\t\t\t\tdropDownPosition: ['below-alt', 'above-alt']\"\n\t\t\tdata-dojo-attach-point=\"_menuBtn\" showLabel=\"false\" title=\"\">▼</div>\n\t<div data-dojo-type=\"dijit.layout._ScrollingTabControllerButton\"\n\t\t\tclass=\"tabStripButton-${tabPosition}\"\n\t\t\tid=\"${id}_leftBtn\"\n\t\t\tdata-dojo-props=\"iconClass:'dijitTabStripSlideLeftIcon', showLabel:false, title:''\"\n\t\t\tdata-dojo-attach-point=\"_leftBtn\" data-dojo-attach-event=\"onClick: doSlideLeft\">◀</div>\n\t<div data-dojo-type=\"dijit.layout._ScrollingTabControllerButton\"\n\t\t\tclass=\"tabStripButton-${tabPosition}\"\n\t\t\tid=\"${id}_rightBtn\"\n\t\t\tdata-dojo-props=\"iconClass:'dijitTabStripSlideRightIcon', showLabel:false, title:''\"\n\t\t\tdata-dojo-attach-point=\"_rightBtn\" data-dojo-attach-event=\"onClick: doSlideRight\">▶</div>\n\t<div class='dijitTabListWrapper' data-dojo-attach-point='tablistWrapper'>\n\t\t<div role='tablist' data-dojo-attach-event='onkeypress:onkeypress'\n\t\t\t\tdata-dojo-attach-point='containerNode' class='nowrapTabStrip'></div>\n\t</div>\n</div>",
3 'url:dijit/layout/templates/_ScrollingTabControllerButton.html':"<div data-dojo-attach-event=\"onclick:_onClick\">\n\t<div role=\"presentation\" class=\"dijitTabInnerDiv\" data-dojo-attach-point=\"innerDiv,focusNode\">\n\t\t<div role=\"presentation\" class=\"dijitTabContent dijitButtonContents\" data-dojo-attach-point=\"tabContent\">\n\t\t\t<img role=\"presentation\" alt=\"\" src=\"${_blankGif}\" class=\"dijitTabStripIcon\" data-dojo-attach-point=\"iconNode\"/>\n\t\t\t<span data-dojo-attach-point=\"containerNode,titleNode\" class=\"dijitButtonText\"></span>\n\t\t</div>\n\t</div>\n</div>"}});
4 define("dijit/layout/ScrollingTabController", [
5 "dojo/_base/array", // array.forEach
6 "dojo/_base/declare", // declare
7 "dojo/dom-class", // domClass.add domClass.contains
8 "dojo/dom-geometry", // domGeometry.contentBox
9 "dojo/dom-style", // domStyle.style
10 "dojo/_base/fx", // Animation
11 "dojo/_base/lang", // lang.hitch
12 "dojo/query", // query
13 "dojo/_base/sniff", // has("ie"), has("webkit"), has("quirks")
14 "../registry", // registry.byId()
15 "dojo/text!./templates/ScrollingTabController.html",
16 "dojo/text!./templates/_ScrollingTabControllerButton.html",
18 "./utils", // marginBox2contextBox, layoutChildren
19 "../_WidgetsInTemplateMixin",
24 "dojo/NodeList-dom" // NodeList.style
25 ], function(array
, declare
, domClass
, domGeometry
, domStyle
, fx
, lang
, query
, has
,
26 registry
, tabControllerTemplate
, buttonTemplate
, TabController
, layoutUtils
, _WidgetsInTemplateMixin
,
27 Menu
, MenuItem
, Button
, _HasDropDown
){
30 var _WidgetsInTemplateMixin = dijit._WidgetsInTemplateMixin;
31 var Menu = dijit.Menu;
32 var _HasDropDown = dijit._HasDropDown;
33 var TabController = dijit.layout.TabController;
38 // dijit/layout/ScrollingTabController
40 // Set of tabs with left/right arrow keys and a menu to switch between tabs not
41 // all fitting on a single row.
44 var ScrollingTabController
= declare("dijit.layout.ScrollingTabController", [TabController
, _WidgetsInTemplateMixin
], {
46 // Set of tabs with left/right arrow keys and a menu to switch between tabs not
47 // all fitting on a single row.
48 // Works only for horizontal tabs (either above or below the content, not to the left
53 baseClass
: "dijitTabController dijitScrollingTabController",
55 templateString
: tabControllerTemplate
,
57 // useMenu: [const] Boolean
58 // True if a menu should be used to select tabs when they are too
59 // wide to fit the TabContainer, false otherwise.
62 // useSlider: [const] Boolean
63 // True if a slider should be used to select tabs when they are too
64 // wide to fit the TabContainer, false otherwise.
67 // tabStripClass: [const] String
68 // The css class to apply to the tab strip, if it is visible.
71 widgetsInTemplate
: true,
74 // The distance in pixels from the edge of the tab strip which,
75 // if a scroll animation is less than, forces the scroll to
76 // go all the way to the left/right.
79 // Override default behavior mapping class to DOMNode
80 _setClassAttr
: { node
: "containerNode", type
: "class" },
82 buildRendering: function(){
83 this.inherited(arguments
);
86 this.scrollNode
= this.tablistWrapper
;
89 if(!this.tabStripClass
){
90 this.tabStripClass
= "dijitTabContainer" +
91 this.tabPosition
.charAt(0).toUpperCase() +
92 this.tabPosition
.substr(1).replace(/-.*/, "") +
94 domClass
.add(n
, "tabStrip-disabled")
97 domClass
.add(this.tablistWrapper
, this.tabStripClass
);
100 onStartup: function(){
101 this.inherited(arguments
);
103 // TabController is hidden until it finishes drawing, to give
104 // a less visually jumpy instantiation. When it's finished, set visibility to ""
105 // to that the tabs are hidden/shown depending on the container's visibility setting.
106 domStyle
.set(this.domNode
, "visibility", "");
107 this._postStartup
= true;
110 onAddChild: function(page
, insertIndex
){
111 this.inherited(arguments
);
113 // changes to the tab button label or iconClass will have changed the width of the
114 // buttons, so do a resize
115 array
.forEach(["label", "iconClass"], function(attr
){
116 this.pane2watches
[page
.id
].push(
117 this.pane2button
[page
.id
].watch(attr
, lang
.hitch(this, function(){
118 if(this._postStartup
&& this._dim
){
119 this.resize(this._dim
);
125 // Increment the width of the wrapper when a tab is added
126 // This makes sure that the buttons never wrap.
127 // The value 200 is chosen as it should be bigger than most
128 // Tab button widths.
129 domStyle
.set(this.containerNode
, "width",
130 (domStyle
.get(this.containerNode
, "width") + 200) + "px");
133 onRemoveChild: function(page
, insertIndex
){
134 // null out _selectedTab because we are about to delete that dom node
135 var button
= this.pane2button
[page
.id
];
136 if(this._selectedTab
=== button
.domNode
){
137 this._selectedTab
= null;
140 this.inherited(arguments
);
143 _initButtons: function(){
145 // Creates the buttons used to scroll to view tabs that
146 // may not be visible if the TabContainer is too narrow.
148 // Make a list of the buttons to display when the tab labels become
149 // wider than the TabContainer, and hide the other buttons.
150 // Also gets the total width of the displayed buttons.
152 this._buttons
= query("> .tabStripButton", this.domNode
).filter(function(btn
){
153 if((this.useMenu
&& btn
== this._menuBtn
.domNode
) ||
154 (this.useSlider
&& (btn
== this._rightBtn
.domNode
|| btn
== this._leftBtn
.domNode
))){
155 this._btnWidth
+= domGeometry
.getMarginSize(btn
).w
;
158 domStyle
.set(btn
, "display", "none");
164 _getTabsWidth: function(){
165 var children
= this.getChildren();
167 var leftTab
= children
[this.isLeftToRight() ? 0 : children
.length
- 1].domNode
,
168 rightTab
= children
[this.isLeftToRight() ? children
.length
- 1 : 0].domNode
;
169 return rightTab
.offsetLeft
+ domStyle
.get(rightTab
, "width") - leftTab
.offsetLeft
;
175 _enableBtn: function(width
){
177 // Determines if the tabs are wider than the width of the TabContainer, and
178 // thus that we need to display left/right/menu navigation buttons.
179 var tabsWidth
= this._getTabsWidth();
180 width
= width
|| domStyle
.get(this.scrollNode
, "width");
181 return tabsWidth
> 0 && width
< tabsWidth
;
184 resize: function(dim
){
186 // Hides or displays the buttons used to scroll the tab list and launch the menu
187 // that selects tabs.
189 // Save the dimensions to be used when a child is renamed.
192 // Set my height to be my natural height (tall enough for one row of tab labels),
193 // and my content-box width based on margin-box width specified in dim parameter.
194 // But first reset scrollNode.height in case it was set by layoutChildren() call
195 // in a previous run of this method.
196 this.scrollNode
.style
.height
= "auto";
197 var cb
= this._contentBox
= layoutUtils
.marginBox2contentBox(this.domNode
, {h
: 0, w
: dim
.w
});
198 cb
.h
= this.scrollNode
.offsetHeight
;
199 domGeometry
.setContentSize(this.domNode
, cb
);
201 // Show/hide the left/right/menu navigation buttons depending on whether or not they
203 var enable
= this._enableBtn(this._contentBox
.w
);
204 this._buttons
.style("display", enable
? "" : "none");
206 // Position and size the navigation buttons and the tablist
207 this._leftBtn
.layoutAlign
= "left";
208 this._rightBtn
.layoutAlign
= "right";
209 this._menuBtn
.layoutAlign
= this.isLeftToRight() ? "right" : "left";
210 layoutUtils
.layoutChildren(this.domNode
, this._contentBox
,
211 [this._menuBtn
, this._leftBtn
, this._rightBtn
, {domNode
: this.scrollNode
, layoutAlign
: "client"}]);
213 // set proper scroll so that selected tab is visible
214 if(this._selectedTab
){
215 if(this._anim
&& this._anim
.status() == "playing"){
218 this.scrollNode
.scrollLeft
= this._convertToScrollLeft(this._getScrollForSelectedTab());
221 // Enable/disabled left right buttons depending on whether or not user can scroll to left or right
222 this._setButtonClass(this._getScroll());
224 this._postResize
= true;
226 // Return my size so layoutChildren() can use it.
227 // Also avoids IE9 layout glitch on browser resize when scroll buttons present
228 return {h
: this._contentBox
.h
, w
: dim
.w
};
231 _getScroll: function(){
233 // Returns the current scroll of the tabs where 0 means
234 // "scrolled all the way to the left" and some positive number, based on #
235 // of pixels of possible scroll (ex: 1000) means "scrolled all the way to the right"
236 return (this.isLeftToRight() || has("ie") < 8 || (has("ie") && has("quirks")) || has("webkit")) ? this.scrollNode
.scrollLeft
:
237 domStyle
.get(this.containerNode
, "width") - domStyle
.get(this.scrollNode
, "width")
238 + (has("ie") == 8 ? -1 : 1) * this.scrollNode
.scrollLeft
;
241 _convertToScrollLeft: function(val
){
243 // Given a scroll value where 0 means "scrolled all the way to the left"
244 // and some positive number, based on # of pixels of possible scroll (ex: 1000)
245 // means "scrolled all the way to the right", return value to set this.scrollNode.scrollLeft
246 // to achieve that scroll.
248 // This method is to adjust for RTL funniness in various browsers and versions.
249 if(this.isLeftToRight() || has("ie") < 8 || (has("ie") && has("quirks")) || has("webkit")){
252 var maxScroll
= domStyle
.get(this.containerNode
, "width") - domStyle
.get(this.scrollNode
, "width");
253 return (has("ie") == 8 ? -1 : 1) * (val
- maxScroll
);
257 onSelectChild: function(/*dijit._Widget*/ page
){
259 // Smoothly scrolls to a tab when it is selected.
261 var tab
= this.pane2button
[page
.id
];
262 if(!tab
|| !page
){return;}
264 var node
= tab
.domNode
;
266 // Save the selection
267 if(node
!= this._selectedTab
){
268 this._selectedTab
= node
;
270 // Scroll to the selected tab, except on startup, when scrolling is handled in resize()
271 if(this._postResize
){
272 var sl
= this._getScroll();
274 if(sl
> node
.offsetLeft
||
275 sl
+ domStyle
.get(this.scrollNode
, "width") <
276 node
.offsetLeft
+ domStyle
.get(node
, "width")){
277 this.createSmoothScroll().play();
282 this.inherited(arguments
);
285 _getScrollBounds: function(){
287 // Returns the minimum and maximum scroll setting to show the leftmost and rightmost
288 // tabs (respectively)
289 var children
= this.getChildren(),
290 scrollNodeWidth
= domStyle
.get(this.scrollNode
, "width"), // about 500px
291 containerWidth
= domStyle
.get(this.containerNode
, "width"), // 50,000px
292 maxPossibleScroll
= containerWidth
- scrollNodeWidth
, // scrolling until right edge of containerNode visible
293 tabsWidth
= this._getTabsWidth();
295 if(children
.length
&& tabsWidth
> scrollNodeWidth
){
296 // Scrolling should happen
298 min
: this.isLeftToRight() ? 0 : children
[children
.length
-1].domNode
.offsetLeft
,
299 max
: this.isLeftToRight() ?
300 (children
[children
.length
-1].domNode
.offsetLeft
+ domStyle
.get(children
[children
.length
-1].domNode
, "width")) - scrollNodeWidth
:
304 // No scrolling needed, all tabs visible, we stay either scrolled to far left or far right (depending on dir)
305 var onlyScrollPosition
= this.isLeftToRight() ? 0 : maxPossibleScroll
;
307 min
: onlyScrollPosition
,
308 max
: onlyScrollPosition
313 _getScrollForSelectedTab: function(){
315 // Returns the scroll value setting so that the selected tab
316 // will appear in the center
317 var w
= this.scrollNode
,
318 n
= this._selectedTab
,
319 scrollNodeWidth
= domStyle
.get(this.scrollNode
, "width"),
320 scrollBounds
= this._getScrollBounds();
322 // TODO: scroll minimal amount (to either right or left) so that
323 // selected tab is fully visible, and just return if it's already visible?
324 var pos
= (n
.offsetLeft
+ domStyle
.get(n
, "width")/2) - scrollNodeWidth/2;
325 pos
= Math
.min(Math
.max(pos
, scrollBounds
.min
), scrollBounds
.max
);
328 // If scrolling close to the left side or right side, scroll
329 // all the way to the left or right. See this._minScroll.
330 // (But need to make sure that doesn't scroll the tab out of view...)
334 createSmoothScroll: function(x
){
336 // Creates a dojo._Animation object that smoothly scrolls the tab list
337 // either to a fixed horizontal pixel value, or to the selected tab.
339 // If an number argument is passed to the function, that horizontal
340 // pixel position is scrolled to. Otherwise the currently selected
341 // tab is scrolled to.
343 // An optional pixel value to scroll to, indicating distance from left.
345 // Calculate position to scroll to
346 if(arguments
.length
> 0){
347 // position specified by caller, just make sure it's within bounds
348 var scrollBounds
= this._getScrollBounds();
349 x
= Math
.min(Math
.max(x
, scrollBounds
.min
), scrollBounds
.max
);
351 // scroll to center the current tab
352 x
= this._getScrollForSelectedTab();
355 if(this._anim
&& this._anim
.status() == "playing"){
361 anim
= new fx
.Animation({
362 beforeBegin: function(){
363 if(this.curve
){ delete this.curve
; }
364 var oldS
= w
.scrollLeft
,
365 newS
= self
._convertToScrollLeft(x
);
366 anim
.curve
= new fx
._Line(oldS
, newS
);
368 onAnimate: function(val
){
374 // Disable/enable left/right buttons according to new scroll position
375 this._setButtonClass(x
);
377 return anim
; // dojo._Animation
380 _getBtnNode: function(/*Event*/ e
){
382 // Gets a button DOM node from a mouse click event.
384 // The mouse click event.
386 while(n
&& !domClass
.contains(n
, "tabStripButton")){
392 doSlideRight: function(/*Event*/ e
){
394 // Scrolls the menu to the right.
396 // The mouse click event.
397 this.doSlide(1, this._getBtnNode(e
));
400 doSlideLeft: function(/*Event*/ e
){
402 // Scrolls the menu to the left.
404 // The mouse click event.
405 this.doSlide(-1,this._getBtnNode(e
));
408 doSlide: function(/*Number*/ direction
, /*DomNode*/ node
){
410 // Scrolls the tab list to the left or right by 75% of the widget width.
412 // If the direction is 1, the widget scrolls to the right, if it is
413 // -1, it scrolls to the left.
415 if(node
&& domClass
.contains(node
, "dijitTabDisabled")){return;}
417 var sWidth
= domStyle
.get(this.scrollNode
, "width");
418 var d
= (sWidth
* 0.75) * direction
;
420 var to
= this._getScroll() + d
;
422 this._setButtonClass(to
);
424 this.createSmoothScroll(to
).play();
427 _setButtonClass: function(/*Number*/ scroll
){
429 // Disables the left scroll button if the tabs are scrolled all the way to the left,
430 // or the right scroll button in the opposite case.
432 // amount of horizontal scroll
434 var scrollBounds
= this._getScrollBounds();
435 this._leftBtn
.set("disabled", scroll
<= scrollBounds
.min
);
436 this._rightBtn
.set("disabled", scroll
>= scrollBounds
.max
);
441 var ScrollingTabControllerButtonMixin
= declare("dijit.layout._ScrollingTabControllerButtonMixin", null, {
442 baseClass
: "dijitTab tabStripButton",
444 templateString
: buttonTemplate
,
446 // Override inherited tabIndex: 0 from dijit.form.Button, because user shouldn't be
447 // able to tab to the left/right/menu buttons
450 // Similarly, override FormWidget.isFocusable() because clicking a button shouldn't focus it
451 // either (this override avoids focus() call in FormWidget.js)
452 isFocusable: function(){ return false; }
455 ScrollingTabControllerButtonMixin = dijit.layout._ScrollingTabControllerButtonMixin;
458 // Class used in template
459 declare("dijit.layout._ScrollingTabControllerButton",
460 [Button
, ScrollingTabControllerButtonMixin
]);
462 // Class used in template
464 "dijit.layout._ScrollingTabControllerMenuButton",
465 [Button
, _HasDropDown
, ScrollingTabControllerButtonMixin
],
467 // id of the TabContainer itself
470 // -1 so user can't tab into the button, but so that button can still be focused programatically.
471 // Because need to move focus to the button (or somewhere) before the menu is hidden or IE6 will crash.
474 isLoaded: function(){
475 // recreate menu every time, in case the TabContainer's list of children (or their icons/labels) have changed
479 loadDropDown: function(callback
){
480 this.dropDown
= new Menu({
481 id
: this.containerId
+ "_menu",
484 textDir
: this.textDir
486 var container
= registry
.byId(this.containerId
);
487 array
.forEach(container
.getChildren(), function(page
){
488 var menuItem
= new MenuItem({
489 id
: page
.id
+ "_stcMi",
491 iconClass
: page
.iconClass
,
494 textDir
: page
.textDir
,
496 container
.selectChild(page
);
499 this.dropDown
.addChild(menuItem
);
504 closeDropDown: function(/*Boolean*/ focus
){
505 this.inherited(arguments
);
507 this.dropDown
.destroyRecursive();
508 delete this.dropDown
;
513 return ScrollingTabController
;