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\" class=\"dijitTabInnerDiv dijitTabContent dijitButtonContents\" data-dojo-attach-point=\"focusNode\">\n\t<img role=\"presentation\" alt=\"\" src=\"${_blankGif}\" class=\"dijitTabStripIcon\" data-dojo-attach-point=\"iconNode\"/>\n\t<span data-dojo-attach-point=\"containerNode,titleNode\" class=\"dijitButtonText\"></span>\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
13 "dojo/query", // query
14 "dojo/sniff", // has("ie"), has("webkit"), has("quirks")
15 "../registry", // registry.byId()
16 "dojo/text!./templates/ScrollingTabController.html",
17 "dojo/text!./templates/_ScrollingTabControllerButton.html",
19 "./utils", // marginBox2contextBox, layoutChildren
20 "../_WidgetsInTemplateMixin",
25 "dojo/NodeList-dom" // NodeList.style
26 ], function(array
, declare
, domClass
, domGeometry
, domStyle
, fx
, lang
, on
, query
, has
,
27 registry
, tabControllerTemplate
, buttonTemplate
, TabController
, layoutUtils
, _WidgetsInTemplateMixin
,
28 Menu
, MenuItem
, Button
, _HasDropDown
){
31 // dijit/layout/ScrollingTabController
34 var ScrollingTabController
= declare("dijit.layout.ScrollingTabController", [TabController
, _WidgetsInTemplateMixin
], {
36 // Set of tabs with left/right arrow keys and a menu to switch between tabs not
37 // all fitting on a single row.
38 // Works only for horizontal tabs (either above or below the content, not to the left
43 baseClass
: "dijitTabController dijitScrollingTabController",
45 templateString
: tabControllerTemplate
,
47 // useMenu: [const] Boolean
48 // True if a menu should be used to select tabs when they are too
49 // wide to fit the TabContainer, false otherwise.
52 // useSlider: [const] Boolean
53 // True if a slider should be used to select tabs when they are too
54 // wide to fit the TabContainer, false otherwise.
57 // tabStripClass: [const] String
58 // The css class to apply to the tab strip, if it is visible.
61 widgetsInTemplate
: true,
64 // The distance in pixels from the edge of the tab strip which,
65 // if a scroll animation is less than, forces the scroll to
66 // go all the way to the left/right.
69 // Override default behavior mapping class to DOMNode
70 _setClassAttr
: { node
: "containerNode", type
: "class" },
72 buildRendering: function(){
73 this.inherited(arguments
);
76 this.scrollNode
= this.tablistWrapper
;
79 if(!this.tabStripClass
){
80 this.tabStripClass
= "dijitTabContainer" +
81 this.tabPosition
.charAt(0).toUpperCase() +
82 this.tabPosition
.substr(1).replace(/-.*/, "") +
84 domClass
.add(n
, "tabStrip-disabled")
87 domClass
.add(this.tablistWrapper
, this.tabStripClass
);
90 onStartup: function(){
91 this.inherited(arguments
);
93 // TabController is hidden until it finishes drawing, to give
94 // a less visually jumpy instantiation. When it's finished, set visibility to ""
95 // to that the tabs are hidden/shown depending on the container's visibility setting.
96 domStyle
.set(this.domNode
, "visibility", "");
97 this._postStartup
= true;
99 // changes to the tab button label or iconClass will have changed the width of the
100 // buttons, so do a resize
101 this.own(on(this.containerNode
, "attrmodified-label, attrmodified-iconclass", lang
.hitch(this, function(evt
){
103 this.resize(this._dim
);
108 onAddChild: function(page
, insertIndex
){
109 this.inherited(arguments
);
111 // Increment the width of the wrapper when a tab is added
112 // This makes sure that the buttons never wrap.
113 // The value 200 is chosen as it should be bigger than most
114 // Tab button widths.
115 domStyle
.set(this.containerNode
, "width",
116 (domStyle
.get(this.containerNode
, "width") + 200) + "px");
119 onRemoveChild: function(page
, insertIndex
){
120 // null out _selectedTab because we are about to delete that dom node
121 var button
= this.pane2button
[page
.id
];
122 if(this._selectedTab
=== button
.domNode
){
123 this._selectedTab
= null;
126 this.inherited(arguments
);
129 _initButtons: function(){
131 // Creates the buttons used to scroll to view tabs that
132 // may not be visible if the TabContainer is too narrow.
134 // Make a list of the buttons to display when the tab labels become
135 // wider than the TabContainer, and hide the other buttons.
136 // Also gets the total width of the displayed buttons.
138 this._buttons
= query("> .tabStripButton", this.domNode
).filter(function(btn
){
139 if((this.useMenu
&& btn
== this._menuBtn
.domNode
) ||
140 (this.useSlider
&& (btn
== this._rightBtn
.domNode
|| btn
== this._leftBtn
.domNode
))){
141 this._btnWidth
+= domGeometry
.getMarginSize(btn
).w
;
144 domStyle
.set(btn
, "display", "none");
150 _getTabsWidth: function(){
151 var children
= this.getChildren();
153 var leftTab
= children
[this.isLeftToRight() ? 0 : children
.length
- 1].domNode
,
154 rightTab
= children
[this.isLeftToRight() ? children
.length
- 1 : 0].domNode
;
155 return rightTab
.offsetLeft
+ rightTab
.offsetWidth
- leftTab
.offsetLeft
;
161 _enableBtn: function(width
){
163 // Determines if the tabs are wider than the width of the TabContainer, and
164 // thus that we need to display left/right/menu navigation buttons.
165 var tabsWidth
= this._getTabsWidth();
166 width
= width
|| domStyle
.get(this.scrollNode
, "width");
167 return tabsWidth
> 0 && width
< tabsWidth
;
170 resize: function(dim
){
172 // Hides or displays the buttons used to scroll the tab list and launch the menu
173 // that selects tabs.
175 // Save the dimensions to be used when a child is renamed.
178 // Set my height to be my natural height (tall enough for one row of tab labels),
179 // and my content-box width based on margin-box width specified in dim parameter.
180 // But first reset scrollNode.height in case it was set by layoutChildren() call
181 // in a previous run of this method.
182 this.scrollNode
.style
.height
= "auto";
183 var cb
= this._contentBox
= layoutUtils
.marginBox2contentBox(this.domNode
, {h
: 0, w
: dim
.w
});
184 cb
.h
= this.scrollNode
.offsetHeight
;
185 domGeometry
.setContentSize(this.domNode
, cb
);
187 // Show/hide the left/right/menu navigation buttons depending on whether or not they
189 var enable
= this._enableBtn(this._contentBox
.w
);
190 this._buttons
.style("display", enable
? "" : "none");
192 // Position and size the navigation buttons and the tablist
193 this._leftBtn
.layoutAlign
= "left";
194 this._rightBtn
.layoutAlign
= "right";
195 this._menuBtn
.layoutAlign
= this.isLeftToRight() ? "right" : "left";
196 layoutUtils
.layoutChildren(this.domNode
, this._contentBox
,
197 [this._menuBtn
, this._leftBtn
, this._rightBtn
, {domNode
: this.scrollNode
, layoutAlign
: "client"}]);
199 // set proper scroll so that selected tab is visible
200 if(this._selectedTab
){
201 if(this._anim
&& this._anim
.status() == "playing"){
204 this.scrollNode
.scrollLeft
= this._convertToScrollLeft(this._getScrollForSelectedTab());
207 // Enable/disabled left right buttons depending on whether or not user can scroll to left or right
208 this._setButtonClass(this._getScroll());
210 this._postResize
= true;
212 // Return my size so layoutChildren() can use it.
213 // Also avoids IE9 layout glitch on browser resize when scroll buttons present
214 return {h
: this._contentBox
.h
, w
: dim
.w
};
217 _getScroll: function(){
219 // Returns the current scroll of the tabs where 0 means
220 // "scrolled all the way to the left" and some positive number, based on #
221 // of pixels of possible scroll (ex: 1000) means "scrolled all the way to the right"
222 return (this.isLeftToRight() || has("ie") < 8 || (has("ie") && has("quirks")) || has("webkit")) ? this.scrollNode
.scrollLeft
:
223 domStyle
.get(this.containerNode
, "width") - domStyle
.get(this.scrollNode
, "width")
224 + (has("ie") >= 8 ? -1 : 1) * this.scrollNode
.scrollLeft
;
227 _convertToScrollLeft: function(val
){
229 // Given a scroll value where 0 means "scrolled all the way to the left"
230 // and some positive number, based on # of pixels of possible scroll (ex: 1000)
231 // means "scrolled all the way to the right", return value to set this.scrollNode.scrollLeft
232 // to achieve that scroll.
234 // This method is to adjust for RTL funniness in various browsers and versions.
235 if(this.isLeftToRight() || has("ie") < 8 || (has("ie") && has("quirks")) || has("webkit")){
238 var maxScroll
= domStyle
.get(this.containerNode
, "width") - domStyle
.get(this.scrollNode
, "width");
239 return (has("ie") >= 8 ? -1 : 1) * (val
- maxScroll
);
243 onSelectChild: function(/*dijit/_WidgetBase*/ page){
245 // Smoothly scrolls to a tab when it is selected.
247 var tab = this.pane2button[page.id];
248 if(!tab || !page){return;}
250 var node = tab.domNode;
252 // Save the selection
253 if(node != this._selectedTab){
254 this._selectedTab = node;
256 // Scroll to the selected tab, except on startup, when scrolling is handled in resize()
257 if(this._postResize){
258 var sl = this._getScroll();
260 if(sl > node.offsetLeft ||
261 sl + domStyle.get(this.scrollNode, "width") <
262 node.offsetLeft + domStyle.get(node, "width")){
263 this.createSmoothScroll().play();
268 this.inherited(arguments);
271 _getScrollBounds: function(){
273 // Returns the minimum and maximum scroll setting to show the leftmost and rightmost
274 // tabs (respectively)
275 var children = this.getChildren(),
276 scrollNodeWidth = domStyle.get(this.scrollNode, "width"), // about 500px
277 containerWidth = domStyle.get(this.containerNode, "width"), // 50,000px
278 maxPossibleScroll = containerWidth - scrollNodeWidth, // scrolling until right edge of containerNode visible
279 tabsWidth = this._getTabsWidth();
281 if(children.length && tabsWidth > scrollNodeWidth){
282 // Scrolling should happen
284 min: this.isLeftToRight() ? 0 : children[children.length-1].domNode.offsetLeft,
285 max: this.isLeftToRight() ?
286 (children[children.length-1].domNode.offsetLeft + children[children.length-1].domNode.offsetWidth) - scrollNodeWidth :
290 // No scrolling needed, all tabs visible, we stay either scrolled to far left or far right (depending on dir)
291 var onlyScrollPosition = this.isLeftToRight() ? 0 : maxPossibleScroll;
293 min: onlyScrollPosition,
294 max: onlyScrollPosition
299 _getScrollForSelectedTab: function(){
301 // Returns the scroll value setting so that the selected tab
302 // will appear in the center
303 var w = this.scrollNode,
304 n = this._selectedTab,
305 scrollNodeWidth = domStyle.get(this.scrollNode, "width"),
306 scrollBounds = this._getScrollBounds();
308 // TODO: scroll minimal amount (to either right or left) so that
309 // selected tab is fully visible, and just return if it's already visible?
310 var pos = (n.offsetLeft + domStyle.get(n, "width")/2) - scrollNodeWidth/2;
311 pos = Math.min(Math.max(pos, scrollBounds.min), scrollBounds.max);
314 // If scrolling close to the left side or right side, scroll
315 // all the way to the left or right. See this._minScroll.
316 // (But need to make sure that doesn't scroll the tab out of view...)
320 createSmoothScroll: function(x){
322 // Creates a dojo._Animation object that smoothly scrolls the tab list
323 // either to a fixed horizontal pixel value, or to the selected tab.
325 // If an number argument is passed to the function, that horizontal
326 // pixel position is scrolled to. Otherwise the currently selected
327 // tab is scrolled to.
329 // An optional pixel value to scroll to, indicating distance from left.
331 // Calculate position to scroll to
332 if(arguments.length > 0){
333 // position specified by caller, just make sure it's within bounds
334 var scrollBounds = this._getScrollBounds();
335 x = Math.min(Math.max(x, scrollBounds.min), scrollBounds.max);
337 // scroll to center the current tab
338 x = this._getScrollForSelectedTab();
341 if(this._anim && this._anim.status() == "playing"){
347 anim = new fx.Animation({
348 beforeBegin: function(){
349 if(this.curve){ delete this.curve; }
350 var oldS = w.scrollLeft,
351 newS = self._convertToScrollLeft(x);
352 anim.curve = new fx._Line(oldS, newS);
354 onAnimate: function(val){
360 // Disable/enable left/right buttons according to new scroll position
361 this._setButtonClass(x);
363 return anim; // dojo/_base/fx/Animation
366 _getBtnNode: function(/*Event*/ e
){
368 // Gets a button DOM node from a mouse click event.
370 // The mouse click event.
372 while(n
&& !domClass
.contains(n
, "tabStripButton")){
378 doSlideRight: function(/*Event*/ e
){
380 // Scrolls the menu to the right.
382 // The mouse click event.
383 this.doSlide(1, this._getBtnNode(e
));
386 doSlideLeft: function(/*Event*/ e
){
388 // Scrolls the menu to the left.
390 // The mouse click event.
391 this.doSlide(-1,this._getBtnNode(e
));
394 doSlide: function(/*Number*/ direction
, /*DomNode*/ node
){
396 // Scrolls the tab list to the left or right by 75% of the widget width.
398 // If the direction is 1, the widget scrolls to the right, if it is -1,
399 // it scrolls to the left.
401 if(node
&& domClass
.contains(node
, "dijitTabDisabled")){return;}
403 var sWidth
= domStyle
.get(this.scrollNode
, "width");
404 var d
= (sWidth
* 0.75) * direction
;
406 var to
= this._getScroll() + d
;
408 this._setButtonClass(to
);
410 this.createSmoothScroll(to
).play();
413 _setButtonClass: function(/*Number*/ scroll
){
415 // Disables the left scroll button if the tabs are scrolled all the way to the left,
416 // or the right scroll button in the opposite case.
418 // amount of horizontal scroll
420 var scrollBounds
= this._getScrollBounds();
421 this._leftBtn
.set("disabled", scroll
<= scrollBounds
.min
);
422 this._rightBtn
.set("disabled", scroll
>= scrollBounds
.max
);
427 var ScrollingTabControllerButtonMixin
= declare("dijit.layout._ScrollingTabControllerButtonMixin", null, {
428 baseClass
: "dijitTab tabStripButton",
430 templateString
: buttonTemplate
,
432 // Override inherited tabIndex: 0 from dijit/form/Button, because user shouldn't be
433 // able to tab to the left/right/menu buttons
436 // Similarly, override FormWidget.isFocusable() because clicking a button shouldn't focus it
437 // either (this override avoids focus() call in FormWidget.js)
438 isFocusable: function(){ return false; }
441 // Class used in template
442 declare("dijit.layout._ScrollingTabControllerButton",
443 [Button
, ScrollingTabControllerButtonMixin
]);
445 // Class used in template
447 "dijit.layout._ScrollingTabControllerMenuButton",
448 [Button
, _HasDropDown
, ScrollingTabControllerButtonMixin
],
450 // id of the TabContainer itself
453 // -1 so user can't tab into the button, but so that button can still be focused programatically.
454 // Because need to move focus to the button (or somewhere) before the menu is hidden or IE6 will crash.
457 isLoaded: function(){
458 // recreate menu every time, in case the TabContainer's list of children (or their icons/labels) have changed
462 loadDropDown: function(callback
){
463 this.dropDown
= new Menu({
464 id
: this.containerId
+ "_menu",
465 ownerDocument
: this.ownerDocument
,
468 textDir
: this.textDir
470 var container
= registry
.byId(this.containerId
);
471 array
.forEach(container
.getChildren(), function(page
){
472 var menuItem
= new MenuItem({
473 id
: page
.id
+ "_stcMi",
475 iconClass
: page
.iconClass
,
476 disabled
: page
.disabled
,
477 ownerDocument
: this.ownerDocument
,
480 textDir
: page
.textDir
,
482 container
.selectChild(page
);
485 this.dropDown
.addChild(menuItem
);
490 closeDropDown: function(/*Boolean*/ focus
){
491 this.inherited(arguments
);
493 this.dropDown
.destroyRecursive();
494 delete this.dropDown
;
499 return ScrollingTabController
;