lib/dijit/layout/ScrollingTabController.js.uncompressed.js

   1 require({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\">\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",
  17         "./TabController",
  18         "./utils",      // marginBox2contextBox, layoutChildren
  19         "../_WidgetsInTemplateMixin",
  20         "../Menu",
  21         "../MenuItem",
  22         "../form/Button",
  23         "../_HasDropDown",
  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){
  28
  29 /*=====
  30 var _WidgetsInTemplateMixin = dijit._WidgetsInTemplateMixin;
  31 var Menu = dijit.Menu;
  32 var _HasDropDown = dijit._HasDropDown;
  33 var TabController = dijit.layout.TabController;
  34 =====*/
  35
  36
  37 // module:
  38 //              dijit/layout/ScrollingTabController
  39 // summary:
  40 //              Set of tabs with left/right arrow keys and a menu to switch between tabs not
  41 //              all fitting on a single row.
  42
  43
  44 var ScrollingTabController = declare("dijit.layout.ScrollingTabController", [TabController, _WidgetsInTemplateMixin], {
  45         // summary:
  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
  49         //              or right).
  50         // tags:
  51         //              private
  52
  53         baseClass: "dijitTabController dijitScrollingTabController",
  54
  55         templateString: tabControllerTemplate,
  56
  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.
  60         useMenu: true,
  61
  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.
  65         useSlider: true,
  66
  67         // tabStripClass: [const] String
  68         //              The css class to apply to the tab strip, if it is visible.
  69         tabStripClass: "",
  70
  71         widgetsInTemplate: true,
  72
  73         // _minScroll: Number
  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.
  77         _minScroll: 5,
  78
  79         // Override default behavior mapping class to DOMNode
  80         _setClassAttr: { node: "containerNode", type: "class" },
  81
  82         buildRendering: function(){
  83                 this.inherited(arguments);
  84                 var n = this.domNode;
  85
  86                 this.scrollNode = this.tablistWrapper;
  87                 this._initButtons();
  88
  89                 if(!this.tabStripClass){
  90                         this.tabStripClass = "dijitTabContainer" +
  91                                 this.tabPosition.charAt(0).toUpperCase() +
  92                                 this.tabPosition.substr(1).replace(/-.*/, "") +
  93                                 "None";
  94                         domClass.add(n, "tabStrip-disabled")
  95                 }
  96
  97                 domClass.add(this.tablistWrapper, this.tabStripClass);
  98         },
  99
 100         onStartup: function(){
 101                 this.inherited(arguments);
 102
 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;
 108         },
 109
 110         onAddChild: function(page, insertIndex){
 111                 this.inherited(arguments);
 112
 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);
 120                                         }
 121                                 }))
 122                         );
 123                 }, this);
 124
 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");
 131         },
 132
 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;
 138                 }
 139
 140                 this.inherited(arguments);
 141         },
 142
 143         _initButtons: function(){
 144                 // summary:
 145                 //              Creates the buttons used to scroll to view tabs that
 146                 //              may not be visible if the TabContainer is too narrow.
 147
 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.
 151                 this._btnWidth = 0;
 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;
 156                                 return true;
 157                         }else{
 158                                 domStyle.set(btn, "display", "none");
 159                                 return false;
 160                         }
 161                 }, this);
 162         },
 163
 164         _getTabsWidth: function(){
 165                 var children = this.getChildren();
 166                 if(children.length){
 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;
 170                 }else{
 171                         return 0;
 172                 }
 173         },
 174
 175         _enableBtn: function(width){
 176                 // summary:
 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;
 182         },
 183
 184         resize: function(dim){
 185                 // summary:
 186                 //              Hides or displays the buttons used to scroll the tab list and launch the menu
 187                 //              that selects tabs.
 188
 189                 // Save the dimensions to be used when a child is renamed.
 190                 this._dim = dim;
 191
 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);
 200
 201                 // Show/hide the left/right/menu navigation buttons depending on whether or not they
 202                 // are needed.
 203                 var enable = this._enableBtn(this._contentBox.w);
 204                 this._buttons.style("display", enable ? "" : "none");
 205
 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"}]);
 212
 213                 // set proper scroll so that selected tab is visible
 214                 if(this._selectedTab){
 215                         if(this._anim && this._anim.status() == "playing"){
 216                                 this._anim.stop();
 217                         }
 218                         this.scrollNode.scrollLeft = this._convertToScrollLeft(this._getScrollForSelectedTab());
 219                 }
 220
 221                 // Enable/disabled left right buttons depending on whether or not user can scroll to left or right
 222                 this._setButtonClass(this._getScroll());
 223
 224                 this._postResize = true;
 225
 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};
 229         },
 230
 231         _getScroll: function(){
 232                 // summary:
 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;
 239         },
 240
 241         _convertToScrollLeft: function(val){
 242                 // summary:
 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.
 247                 //
 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")){
 250                         return val;
 251                 }else{
 252                         var maxScroll = domStyle.get(this.containerNode, "width") - domStyle.get(this.scrollNode, "width");
 253                         return (has("ie") == 8 ? -1 : 1) * (val - maxScroll);
 254                 }
 255         },
 256
 257         onSelectChild: function(/*dijit._Widget*/ page){
 258                 // summary:
 259                 //              Smoothly scrolls to a tab when it is selected.
 260
 261                 var tab = this.pane2button[page.id];
 262                 if(!tab || !page){return;}
 263
 264                 var node = tab.domNode;
 265
 266                 // Save the selection
 267                 if(node != this._selectedTab){
 268                         this._selectedTab = node;
 269
 270                         // Scroll to the selected tab, except on startup, when scrolling is handled in resize()
 271                         if(this._postResize){
 272                                 var sl = this._getScroll();
 273
 274                                 if(sl > node.offsetLeft ||
 275                                                 sl + domStyle.get(this.scrollNode, "width") <
 276                                                 node.offsetLeft + domStyle.get(node, "width")){
 277                                         this.createSmoothScroll().play();
 278                                 }
 279                         }
 280                 }
 281
 282                 this.inherited(arguments);
 283         },
 284
 285         _getScrollBounds: function(){
 286                 // summary:
 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();
 294
 295                 if(children.length && tabsWidth > scrollNodeWidth){
 296                         // Scrolling should happen
 297                         return {
 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 :
 301                                         maxPossibleScroll
 302                         };
 303                 }else{
 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;
 306                         return {
 307                                 min: onlyScrollPosition,
 308                                 max: onlyScrollPosition
 309                         };
 310                 }
 311         },
 312
 313         _getScrollForSelectedTab: function(){
 314                 // summary:
 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();
 321
 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);
 326
 327                 // TODO:
 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...)
 331                 return pos;
 332         },
 333
 334         createSmoothScroll: function(x){
 335                 // summary:
 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.
 338                 // description:
 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.
 342                 // x: Integer?
 343                 //              An optional pixel value to scroll to, indicating distance from left.
 344
 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);
 350                 }else{
 351                         // scroll to center the current tab
 352                         x = this._getScrollForSelectedTab();
 353                 }
 354
 355                 if(this._anim && this._anim.status() == "playing"){
 356                         this._anim.stop();
 357                 }
 358
 359                 var self = this,
 360                         w = this.scrollNode,
 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);
 367                                 },
 368                                 onAnimate: function(val){
 369                                         w.scrollLeft = val;
 370                                 }
 371                         });
 372                 this._anim = anim;
 373
 374                 // Disable/enable left/right buttons according to new scroll position
 375                 this._setButtonClass(x);
 376
 377                 return anim; // dojo._Animation
 378         },
 379
 380         _getBtnNode: function(/*Event*/ e){
 381                 // summary:
 382                 //              Gets a button DOM node from a mouse click event.
 383                 // e:
 384                 //              The mouse click event.
 385                 var n = e.target;
 386                 while(n && !domClass.contains(n, "tabStripButton")){
 387                         n = n.parentNode;
 388                 }
 389                 return n;
 390         },
 391
 392         doSlideRight: function(/*Event*/ e){
 393                 // summary:
 394                 //              Scrolls the menu to the right.
 395                 // e:
 396                 //              The mouse click event.
 397                 this.doSlide(1, this._getBtnNode(e));
 398         },
 399
 400         doSlideLeft: function(/*Event*/ e){
 401                 // summary:
 402                 //              Scrolls the menu to the left.
 403                 // e:
 404                 //              The mouse click event.
 405                 this.doSlide(-1,this._getBtnNode(e));
 406         },
 407
 408         doSlide: function(/*Number*/ direction, /*DomNode*/ node){
 409                 // summary:
 410                 //              Scrolls the tab list to the left or right by 75% of the widget width.
 411                 // direction:
 412                 //              If the direction is 1, the widget scrolls to the right, if it is
 413                 //              -1, it scrolls to the left.
 414
 415                 if(node && domClass.contains(node, "dijitTabDisabled")){return;}
 416
 417                 var sWidth = domStyle.get(this.scrollNode, "width");
 418                 var d = (sWidth * 0.75) * direction;
 419
 420                 var to = this._getScroll() + d;
 421
 422                 this._setButtonClass(to);
 423
 424                 this.createSmoothScroll(to).play();
 425         },
 426
 427         _setButtonClass: function(/*Number*/ scroll){
 428                 // summary:
 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.
 431                 // scroll: Integer
 432                 //              amount of horizontal scroll
 433
 434                 var scrollBounds = this._getScrollBounds();
 435                 this._leftBtn.set("disabled", scroll <= scrollBounds.min);
 436                 this._rightBtn.set("disabled", scroll >= scrollBounds.max);
 437         }
 438 });
 439
 440
 441 var ScrollingTabControllerButtonMixin = declare("dijit.layout._ScrollingTabControllerButtonMixin", null, {
 442         baseClass: "dijitTab tabStripButton",
 443
 444         templateString: buttonTemplate,
 445
 446                 // Override inherited tabIndex: 0 from dijit.form.Button, because user shouldn't be
 447                 // able to tab to the left/right/menu buttons
 448         tabIndex: "",
 449
 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; }
 453 });
 454 /*=====
 455 ScrollingTabControllerButtonMixin = dijit.layout._ScrollingTabControllerButtonMixin;
 456 =====*/
 457
 458 // Class used in template
 459 declare("dijit.layout._ScrollingTabControllerButton",
 460         [Button, ScrollingTabControllerButtonMixin]);
 461
 462 // Class used in template
 463 declare(
 464         "dijit.layout._ScrollingTabControllerMenuButton",
 465         [Button, _HasDropDown, ScrollingTabControllerButtonMixin],
 466 {
 467         // id of the TabContainer itself
 468         containerId: "",
 469
 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.
 472         tabIndex: "-1",
 473
 474         isLoaded: function(){
 475                 // recreate menu every time, in case the TabContainer's list of children (or their icons/labels) have changed
 476                 return false;
 477         },
 478
 479         loadDropDown: function(callback){
 480                 this.dropDown = new Menu({
 481                         id: this.containerId + "_menu",
 482                         dir: this.dir,
 483                         lang: this.lang,
 484                         textDir: this.textDir
 485                 });
 486                 var container = registry.byId(this.containerId);
 487                 array.forEach(container.getChildren(), function(page){
 488                         var menuItem = new MenuItem({
 489                                 id: page.id + "_stcMi",
 490                                 label: page.title,
 491                                 iconClass: page.iconClass,
 492                                 dir: page.dir,
 493                                 lang: page.lang,
 494                                 textDir: page.textDir,
 495                                 onClick: function(){
 496                                         container.selectChild(page);
 497                                 }
 498                         });
 499                         this.dropDown.addChild(menuItem);
 500                 }, this);
 501                 callback();
 502         },
 503
 504         closeDropDown: function(/*Boolean*/ focus){
 505                 this.inherited(arguments);
 506                 if(this.dropDown){
 507                         this.dropDown.destroyRecursive();
 508                         delete this.dropDown;
 509                 }
 510         }
 511 });
 512
 513 return ScrollingTabController;
 514 });