]> git.wh0rd.org - tt-rss.git/blame - lib/dijit/layout/ScrollingTabController.js.uncompressed.js
modify dojo rebuild script to remove uncompressed files
[tt-rss.git] / lib / dijit / layout / ScrollingTabController.js.uncompressed.js
CommitLineData
f0cfe83e
AD
1require({cache:{
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=\"\">&#9660;</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\">&#9664;</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\">&#9654;</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>"}});
4define("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/on",
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",
18 "./TabController",
19 "./utils", // marginBox2contextBox, layoutChildren
20 "../_WidgetsInTemplateMixin",
21 "../Menu",
22 "../MenuItem",
23 "../form/Button",
24 "../_HasDropDown",
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){
29
30// module:
31// dijit/layout/ScrollingTabController
32
33
34var ScrollingTabController = declare("dijit.layout.ScrollingTabController", [TabController, _WidgetsInTemplateMixin], {
35 // summary:
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
39 // or right).
40 // tags:
41 // private
42
43 baseClass: "dijitTabController dijitScrollingTabController",
44
45 templateString: tabControllerTemplate,
46
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.
50 useMenu: true,
51
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.
55 useSlider: true,
56
57 // tabStripClass: [const] String
58 // The css class to apply to the tab strip, if it is visible.
59 tabStripClass: "",
60
61 widgetsInTemplate: true,
62
63 // _minScroll: Number
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.
67 _minScroll: 5,
68
69 // Override default behavior mapping class to DOMNode
70 _setClassAttr: { node: "containerNode", type: "class" },
71
72 buildRendering: function(){
73 this.inherited(arguments);
74 var n = this.domNode;
75
76 this.scrollNode = this.tablistWrapper;
77 this._initButtons();
78
79 if(!this.tabStripClass){
80 this.tabStripClass = "dijitTabContainer" +
81 this.tabPosition.charAt(0).toUpperCase() +
82 this.tabPosition.substr(1).replace(/-.*/, "") +
83 "None";
84 domClass.add(n, "tabStrip-disabled")
85 }
86
87 domClass.add(this.tablistWrapper, this.tabStripClass);
88 },
89
90 onStartup: function(){
91 this.inherited(arguments);
92
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;
98
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){
102 if(this._dim){
103 this.resize(this._dim);
104 }
105 })));
106 },
107
108 onAddChild: function(page, insertIndex){
109 this.inherited(arguments);
110
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");
117 },
118
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;
124 }
125
126 this.inherited(arguments);
127 },
128
129 _initButtons: function(){
130 // summary:
131 // Creates the buttons used to scroll to view tabs that
132 // may not be visible if the TabContainer is too narrow.
133
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.
137 this._btnWidth = 0;
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;
142 return true;
143 }else{
144 domStyle.set(btn, "display", "none");
145 return false;
146 }
147 }, this);
148 },
149
150 _getTabsWidth: function(){
151 var children = this.getChildren();
152 if(children.length){
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;
156 }else{
157 return 0;
158 }
159 },
160
161 _enableBtn: function(width){
162 // summary:
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;
168 },
169
170 resize: function(dim){
171 // summary:
172 // Hides or displays the buttons used to scroll the tab list and launch the menu
173 // that selects tabs.
174
175 // Save the dimensions to be used when a child is renamed.
176 this._dim = dim;
177
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);
186
187 // Show/hide the left/right/menu navigation buttons depending on whether or not they
188 // are needed.
189 var enable = this._enableBtn(this._contentBox.w);
190 this._buttons.style("display", enable ? "" : "none");
191
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"}]);
198
199 // set proper scroll so that selected tab is visible
200 if(this._selectedTab){
201 if(this._anim && this._anim.status() == "playing"){
202 this._anim.stop();
203 }
204 this.scrollNode.scrollLeft = this._convertToScrollLeft(this._getScrollForSelectedTab());
205 }
206
207 // Enable/disabled left right buttons depending on whether or not user can scroll to left or right
208 this._setButtonClass(this._getScroll());
209
210 this._postResize = true;
211
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};
215 },
216
217 _getScroll: function(){
218 // summary:
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;
225 },
226
227 _convertToScrollLeft: function(val){
228 // summary:
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.
233 //
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")){
236 return val;
237 }else{
238 var maxScroll = domStyle.get(this.containerNode, "width") - domStyle.get(this.scrollNode, "width");
239 return (has("ie") >= 8 ? -1 : 1) * (val - maxScroll);
240 }
241 },
242
243 onSelectChild: function(/*dijit/_WidgetBase*/ page){
244 // summary:
245 // Smoothly scrolls to a tab when it is selected.
246
247 var tab = this.pane2button[page.id];
248 if(!tab || !page){return;}
249
250 var node = tab.domNode;
251
252 // Save the selection
253 if(node != this._selectedTab){
254 this._selectedTab = node;
255
256 // Scroll to the selected tab, except on startup, when scrolling is handled in resize()
257 if(this._postResize){
258 var sl = this._getScroll();
259
260 if(sl > node.offsetLeft ||
261 sl + domStyle.get(this.scrollNode, "width") <
262 node.offsetLeft + domStyle.get(node, "width")){
263 this.createSmoothScroll().play();
264 }
265 }
266 }
267
268 this.inherited(arguments);
269 },
270
271 _getScrollBounds: function(){
272 // summary:
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();
280
281 if(children.length && tabsWidth > scrollNodeWidth){
282 // Scrolling should happen
283 return {
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 :
287 maxPossibleScroll
288 };
289 }else{
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;
292 return {
293 min: onlyScrollPosition,
294 max: onlyScrollPosition
295 };
296 }
297 },
298
299 _getScrollForSelectedTab: function(){
300 // summary:
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();
307
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);
312
313 // TODO:
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...)
317 return pos;
318 },
319
320 createSmoothScroll: function(x){
321 // summary:
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.
324 // description:
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.
328 // x: Integer?
329 // An optional pixel value to scroll to, indicating distance from left.
330
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);
336 }else{
337 // scroll to center the current tab
338 x = this._getScrollForSelectedTab();
339 }
340
341 if(this._anim && this._anim.status() == "playing"){
342 this._anim.stop();
343 }
344
345 var self = this,
346 w = this.scrollNode,
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);
353 },
354 onAnimate: function(val){
355 w.scrollLeft = val;
356 }
357 });
358 this._anim = anim;
359
360 // Disable/enable left/right buttons according to new scroll position
361 this._setButtonClass(x);
362
363 return anim; // dojo/_base/fx/Animation
364 },
365
366 _getBtnNode: function(/*Event*/ e){
367 // summary:
368 // Gets a button DOM node from a mouse click event.
369 // e:
370 // The mouse click event.
371 var n = e.target;
372 while(n && !domClass.contains(n, "tabStripButton")){
373 n = n.parentNode;
374 }
375 return n;
376 },
377
378 doSlideRight: function(/*Event*/ e){
379 // summary:
380 // Scrolls the menu to the right.
381 // e:
382 // The mouse click event.
383 this.doSlide(1, this._getBtnNode(e));
384 },
385
386 doSlideLeft: function(/*Event*/ e){
387 // summary:
388 // Scrolls the menu to the left.
389 // e:
390 // The mouse click event.
391 this.doSlide(-1,this._getBtnNode(e));
392 },
393
394 doSlide: function(/*Number*/ direction, /*DomNode*/ node){
395 // summary:
396 // Scrolls the tab list to the left or right by 75% of the widget width.
397 // direction:
398 // If the direction is 1, the widget scrolls to the right, if it is -1,
399 // it scrolls to the left.
400
401 if(node && domClass.contains(node, "dijitTabDisabled")){return;}
402
403 var sWidth = domStyle.get(this.scrollNode, "width");
404 var d = (sWidth * 0.75) * direction;
405
406 var to = this._getScroll() + d;
407
408 this._setButtonClass(to);
409
410 this.createSmoothScroll(to).play();
411 },
412
413 _setButtonClass: function(/*Number*/ scroll){
414 // summary:
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.
417 // scroll: Integer
418 // amount of horizontal scroll
419
420 var scrollBounds = this._getScrollBounds();
421 this._leftBtn.set("disabled", scroll <= scrollBounds.min);
422 this._rightBtn.set("disabled", scroll >= scrollBounds.max);
423 }
424});
425
426
427var ScrollingTabControllerButtonMixin = declare("dijit.layout._ScrollingTabControllerButtonMixin", null, {
428 baseClass: "dijitTab tabStripButton",
429
430 templateString: buttonTemplate,
431
432 // Override inherited tabIndex: 0 from dijit/form/Button, because user shouldn't be
433 // able to tab to the left/right/menu buttons
434 tabIndex: "",
435
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; }
439});
440
441// Class used in template
442declare("dijit.layout._ScrollingTabControllerButton",
443 [Button, ScrollingTabControllerButtonMixin]);
444
445// Class used in template
446declare(
447 "dijit.layout._ScrollingTabControllerMenuButton",
448 [Button, _HasDropDown, ScrollingTabControllerButtonMixin],
449{
450 // id of the TabContainer itself
451 containerId: "",
452
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.
455 tabIndex: "-1",
456
457 isLoaded: function(){
458 // recreate menu every time, in case the TabContainer's list of children (or their icons/labels) have changed
459 return false;
460 },
461
462 loadDropDown: function(callback){
463 this.dropDown = new Menu({
464 id: this.containerId + "_menu",
465 ownerDocument: this.ownerDocument,
466 dir: this.dir,
467 lang: this.lang,
468 textDir: this.textDir
469 });
470 var container = registry.byId(this.containerId);
471 array.forEach(container.getChildren(), function(page){
472 var menuItem = new MenuItem({
473 id: page.id + "_stcMi",
474 label: page.title,
475 iconClass: page.iconClass,
476 disabled: page.disabled,
477 ownerDocument: this.ownerDocument,
478 dir: page.dir,
479 lang: page.lang,
480 textDir: page.textDir,
481 onClick: function(){
482 container.selectChild(page);
483 }
484 });
485 this.dropDown.addChild(menuItem);
486 }, this);
487 callback();
488 },
489
490 closeDropDown: function(/*Boolean*/ focus){
491 this.inherited(arguments);
492 if(this.dropDown){
493 this.dropDown.destroyRecursive();
494 delete this.dropDown;
495 }
496 }
497});
498
499return ScrollingTabController;
500});