lib/dijit/layout/StackController.js.uncompressed.js

   1 define("dijit/layout/StackController", [
   2         "dojo/_base/array", // array.forEach array.indexOf array.map
   3         "dojo/_base/declare", // declare
   4         "dojo/_base/event", // event.stop
   5         "dojo/keys", // keys
   6         "dojo/_base/lang", // lang.getObject
   7         "dojo/_base/sniff", // has("ie")
   8         "../focus",             // focus.focus()
   9         "../registry",  // registry.byId
  10         "../_Widget",
  11         "../_TemplatedMixin",
  12         "../_Container",
  13         "../form/ToggleButton",
  14         "dojo/i18n!../nls/common"
  15 ], function(array, declare, event, keys, lang, has,
  16                         focus, registry, _Widget, _TemplatedMixin, _Container, ToggleButton){
  17
  18 /*=====
  19         var _Widget = dijit._Widget;
  20         var _TemplatedMixin = dijit._TemplatedMixin;
  21         var _Container = dijit._Container;
  22         var ToggleButton = dijit.form.ToggleButton;
  23 =====*/
  24
  25         // module:
  26         //              dijit/layout/StackController
  27         // summary:
  28         //              Set of buttons to select a page in a `dijit.layout.StackContainer`
  29
  30         var StackButton = declare("dijit.layout._StackButton", ToggleButton, {
  31                 // summary:
  32                 //              Internal widget used by StackContainer.
  33                 // description:
  34                 //              The button-like or tab-like object you click to select or delete a page
  35                 // tags:
  36                 //              private
  37
  38                 // Override _FormWidget.tabIndex.
  39                 // StackContainer buttons are not in the tab order by default.
  40                 // Probably we should be calling this.startupKeyNavChildren() instead.
  41                 tabIndex: "-1",
  42
  43                 // closeButton: Boolean
  44                 //              When true, display close button for this tab
  45                 closeButton: false,
  46
  47                 _setCheckedAttr: function(/*Boolean*/ value, /*Boolean?*/ priorityChange){
  48                         this.inherited(arguments);
  49                         this.focusNode.removeAttribute("aria-pressed");
  50                 },
  51
  52                 buildRendering: function(/*Event*/ evt){
  53                         this.inherited(arguments);
  54                         (this.focusNode || this.domNode).setAttribute("role", "tab");
  55                 },
  56
  57                 onClick: function(/*Event*/ /*===== evt =====*/){
  58                         // summary:
  59                         //              This is for TabContainer where the tabs are <span> rather than button,
  60                         //              so need to set focus explicitly (on some browsers)
  61                         //              Note that you shouldn't override this method, but you can connect to it.
  62                         focus.focus(this.focusNode);
  63
  64                         // ... now let StackController catch the event and tell me what to do
  65                 },
  66
  67                 onClickCloseButton: function(/*Event*/ evt){
  68                         // summary:
  69                         //              StackContainer connects to this function; if your widget contains a close button
  70                         //              then clicking it should call this function.
  71                         //              Note that you shouldn't override this method, but you can connect to it.
  72                         evt.stopPropagation();
  73                 }
  74         });
  75
  76
  77         var StackController = declare("dijit.layout.StackController", [_Widget, _TemplatedMixin, _Container], {
  78                 // summary:
  79                 //              Set of buttons to select a page in a `dijit.layout.StackContainer`
  80                 // description:
  81                 //              Monitors the specified StackContainer, and whenever a page is
  82                 //              added, deleted, or selected, updates itself accordingly.
  83
  84                 baseClass: "dijitStackController",
  85
  86                 templateString: "<span role='tablist' data-dojo-attach-event='onkeypress'></span>",
  87
  88                 // containerId: [const] String
  89                 //              The id of the page container that I point to
  90                 containerId: "",
  91
  92                 // buttonWidget: [const] Constructor
  93                 //              The button widget to create to correspond to each page
  94                 buttonWidget: StackButton,
  95
  96                 constructor: function(){
  97                         this.pane2button = {};          // mapping from pane id to buttons
  98                         this.pane2connects = {};        // mapping from pane id to this.connect() handles
  99                         this.pane2watches = {};         // mapping from pane id to watch() handles
 100                 },
 101
 102                 postCreate: function(){
 103                         this.inherited(arguments);
 104
 105                         // Listen to notifications from StackContainer
 106                         this.subscribe(this.containerId+"-startup", "onStartup");
 107                         this.subscribe(this.containerId+"-addChild", "onAddChild");
 108                         this.subscribe(this.containerId+"-removeChild", "onRemoveChild");
 109                         this.subscribe(this.containerId+"-selectChild", "onSelectChild");
 110                         this.subscribe(this.containerId+"-containerKeyPress", "onContainerKeyPress");
 111                 },
 112
 113                 onStartup: function(/*Object*/ info){
 114                         // summary:
 115                         //              Called after StackContainer has finished initializing
 116                         // tags:
 117                         //              private
 118                         array.forEach(info.children, this.onAddChild, this);
 119                         if(info.selected){
 120                                 // Show button corresponding to selected pane (unless selected
 121                                 // is null because there are no panes)
 122                                 this.onSelectChild(info.selected);
 123                         }
 124                 },
 125
 126                 destroy: function(){
 127                         for(var pane in this.pane2button){
 128                                 this.onRemoveChild(registry.byId(pane));
 129                         }
 130                         this.inherited(arguments);
 131                 },
 132
 133                 onAddChild: function(/*dijit._Widget*/ page, /*Integer?*/ insertIndex){
 134                         // summary:
 135                         //              Called whenever a page is added to the container.
 136                         //              Create button corresponding to the page.
 137                         // tags:
 138                         //              private
 139
 140                         // create an instance of the button widget
 141                         // (remove typeof buttonWidget == string support in 2.0)
 142                         var cls = lang.isString(this.buttonWidget) ? lang.getObject(this.buttonWidget) : this.buttonWidget;
 143                         var button = new cls({
 144                                 id: this.id + "_" + page.id,
 145                                 label: page.title,
 146                                 dir: page.dir,
 147                                 lang: page.lang,
 148                                 textDir: page.textDir,
 149                                 showLabel: page.showTitle,
 150                                 iconClass: page.iconClass,
 151                                 closeButton: page.closable,
 152                                 title: page.tooltip
 153                         });
 154                         button.focusNode.setAttribute("aria-selected", "false");
 155
 156
 157                         // map from page attribute to corresponding tab button attribute
 158                         var pageAttrList = ["title", "showTitle", "iconClass", "closable", "tooltip"],
 159                                 buttonAttrList = ["label", "showLabel", "iconClass", "closeButton", "title"];
 160
 161                         // watch() so events like page title changes are reflected in tab button
 162                         this.pane2watches[page.id] = array.map(pageAttrList, function(pageAttr, idx){
 163                                 return page.watch(pageAttr, function(name, oldVal, newVal){
 164                                         button.set(buttonAttrList[idx], newVal);
 165                                 });
 166                         });
 167
 168                         // connections so that clicking a tab button selects the corresponding page
 169                         this.pane2connects[page.id] = [
 170                                 this.connect(button, 'onClick', lang.hitch(this,"onButtonClick", page)),
 171                                 this.connect(button, 'onClickCloseButton', lang.hitch(this,"onCloseButtonClick", page))
 172                         ];
 173
 174                         this.addChild(button, insertIndex);
 175                         this.pane2button[page.id] = button;
 176                         page.controlButton = button;    // this value might be overwritten if two tabs point to same container
 177                         if(!this._currentChild){ // put the first child into the tab order
 178                                 button.focusNode.setAttribute("tabIndex", "0");
 179                                 button.focusNode.setAttribute("aria-selected", "true");
 180                                 this._currentChild = page;
 181                         }
 182                         // make sure all tabs have the same length
 183                         if(!this.isLeftToRight() && has("ie") && this._rectifyRtlTabList){
 184                                 this._rectifyRtlTabList();
 185                         }
 186                 },
 187
 188                 onRemoveChild: function(/*dijit._Widget*/ page){
 189                         // summary:
 190                         //              Called whenever a page is removed from the container.
 191                         //              Remove the button corresponding to the page.
 192                         // tags:
 193                         //              private
 194
 195                         if(this._currentChild === page){ this._currentChild = null; }
 196
 197                         // disconnect/unwatch connections/watches related to page being removed
 198                         array.forEach(this.pane2connects[page.id], lang.hitch(this, "disconnect"));
 199                         delete this.pane2connects[page.id];
 200                         array.forEach(this.pane2watches[page.id], function(w){ w.unwatch(); });
 201                         delete this.pane2watches[page.id];
 202
 203                         var button = this.pane2button[page.id];
 204                         if(button){
 205                                 this.removeChild(button);
 206                                 delete this.pane2button[page.id];
 207                                 button.destroy();
 208                         }
 209                         delete page.controlButton;
 210                 },
 211
 212                 onSelectChild: function(/*dijit._Widget*/ page){
 213                         // summary:
 214                         //              Called when a page has been selected in the StackContainer, either by me or by another StackController
 215                         // tags:
 216                         //              private
 217
 218                         if(!page){ return; }
 219
 220                         if(this._currentChild){
 221                                 var oldButton=this.pane2button[this._currentChild.id];
 222                                 oldButton.set('checked', false);
 223                                 oldButton.focusNode.setAttribute("aria-selected", "false");
 224                                 oldButton.focusNode.setAttribute("tabIndex", "-1");
 225                         }
 226
 227                         var newButton=this.pane2button[page.id];
 228                         newButton.set('checked', true);
 229                         newButton.focusNode.setAttribute("aria-selected", "true");
 230                         this._currentChild = page;
 231                         newButton.focusNode.setAttribute("tabIndex", "0");
 232                         var container = registry.byId(this.containerId);
 233                         container.containerNode.setAttribute("aria-labelledby", newButton.id);
 234                 },
 235
 236                 onButtonClick: function(/*dijit._Widget*/ page){
 237                         // summary:
 238                         //              Called whenever one of my child buttons is pressed in an attempt to select a page
 239                         // tags:
 240                         //              private
 241
 242                         if(this._currentChild.id === page.id) {
 243                                 //In case the user clicked the checked button, keep it in the checked state because it remains to be the selected stack page.
 244                                 var button=this.pane2button[page.id];
 245                                 button.set('checked', true);
 246                         }
 247                         var container = registry.byId(this.containerId);
 248                         container.selectChild(page);
 249                 },
 250
 251                 onCloseButtonClick: function(/*dijit._Widget*/ page){
 252                         // summary:
 253                         //              Called whenever one of my child buttons [X] is pressed in an attempt to close a page
 254                         // tags:
 255                         //              private
 256
 257                         var container = registry.byId(this.containerId);
 258                         container.closeChild(page);
 259                         if(this._currentChild){
 260                                 var b = this.pane2button[this._currentChild.id];
 261                                 if(b){
 262                                         focus.focus(b.focusNode || b.domNode);
 263                                 }
 264                         }
 265                 },
 266
 267                 // TODO: this is a bit redundant with forward, back api in StackContainer
 268                 adjacent: function(/*Boolean*/ forward){
 269                         // summary:
 270                         //              Helper for onkeypress to find next/previous button
 271                         // tags:
 272                         //              private
 273
 274                         if(!this.isLeftToRight() && (!this.tabPosition || /top|bottom/.test(this.tabPosition))){ forward = !forward; }
 275                         // find currently focused button in children array
 276                         var children = this.getChildren();
 277                         var current = array.indexOf(children, this.pane2button[this._currentChild.id]);
 278                         // pick next button to focus on
 279                         var offset = forward ? 1 : children.length - 1;
 280                         return children[ (current + offset) % children.length ]; // dijit._Widget
 281                 },
 282
 283                 onkeypress: function(/*Event*/ e){
 284                         // summary:
 285                         //              Handle keystrokes on the page list, for advancing to next/previous button
 286                         //              and closing the current page if the page is closable.
 287                         // tags:
 288                         //              private
 289
 290                         if(this.disabled || e.altKey ){ return; }
 291                         var forward = null;
 292                         if(e.ctrlKey || !e._djpage){
 293                                 switch(e.charOrCode){
 294                                         case keys.LEFT_ARROW:
 295                                         case keys.UP_ARROW:
 296                                                 if(!e._djpage){ forward = false; }
 297                                                 break;
 298                                         case keys.PAGE_UP:
 299                                                 if(e.ctrlKey){ forward = false; }
 300                                                 break;
 301                                         case keys.RIGHT_ARROW:
 302                                         case keys.DOWN_ARROW:
 303                                                 if(!e._djpage){ forward = true; }
 304                                                 break;
 305                                         case keys.PAGE_DOWN:
 306                                                 if(e.ctrlKey){ forward = true; }
 307                                                 break;
 308                                         case keys.HOME:
 309                                         case keys.END:
 310                                                 var children = this.getChildren();
 311                                                 if(children && children.length){
 312                                                         children[e.charOrCode == keys.HOME ? 0 : children.length-1].onClick();
 313                                                 }
 314                                                 event.stop(e);
 315                                                 break;
 316                                         case keys.DELETE:
 317                                                 if(this._currentChild.closable){
 318                                                         this.onCloseButtonClick(this._currentChild);
 319                                                 }
 320                                                 event.stop(e);
 321                                                 break;
 322                                         default:
 323                                                 if(e.ctrlKey){
 324                                                         if(e.charOrCode === keys.TAB){
 325                                                                 this.adjacent(!e.shiftKey).onClick();
 326                                                                 event.stop(e);
 327                                                         }else if(e.charOrCode == "w"){
 328                                                                 if(this._currentChild.closable){
 329                                                                         this.onCloseButtonClick(this._currentChild);
 330                                                                 }
 331                                                                 event.stop(e); // avoid browser tab closing.
 332                                                         }
 333                                                 }
 334                                 }
 335                                 // handle next/previous page navigation (left/right arrow, etc.)
 336                                 if(forward !== null){
 337                                         this.adjacent(forward).onClick();
 338                                         event.stop(e);
 339                                 }
 340                         }
 341                 },
 342
 343                 onContainerKeyPress: function(/*Object*/ info){
 344                         // summary:
 345                         //              Called when there was a keypress on the container
 346                         // tags:
 347                         //              private
 348                         info.e._djpage = info.page;
 349                         this.onkeypress(info.e);
 350                 }
 351         });
 352
 353         StackController.StackButton = StackButton;      // for monkey patching
 354
 355         return StackController;
 356 });