Context Navigation

source: Dev/trunk/src/client/dijit/layout/ScrollingTabController.js

Last change on this file was 483, checked in by hendrikvanantwerpen, 11 years ago
Added Dojo 1.9.3 release.
File size: 16.7 KB

Rev	Line
[483]	1	define([
	2	"dojo/_base/array", // array.forEach
	3	"dojo/_base/declare", // declare
	4	"dojo/dom-class", // domClass.add domClass.contains
	5	"dojo/dom-geometry", // domGeometry.contentBox
	6	"dojo/dom-style", // domStyle.style
	7	"dojo/_base/fx", // Animation
	8	"dojo/_base/lang", // lang.hitch
	9	"dojo/on",
	10	"dojo/query", // query
	11	"dojo/sniff", // has("ie"), has("webkit"), has("quirks")
	12	"../registry", // registry.byId()
	13	"dojo/text!./templates/ScrollingTabController.html",
	14	"dojo/text!./templates/_ScrollingTabControllerButton.html",
	15	"./TabController",
	16	"./utils", // marginBox2contextBox, layoutChildren
	17	"../_WidgetsInTemplateMixin",
	18	"../Menu",
	19	"../MenuItem",
	20	"../form/Button",
	21	"../_HasDropDown",
	22	"dojo/NodeList-dom", // NodeList.style
	23	"../a11yclick" // template uses ondijitclick (not for keyboard support, but for responsive touch support)
	24	], function(array, declare, domClass, domGeometry, domStyle, fx, lang, on, query, has,
	25	registry, tabControllerTemplate, buttonTemplate, TabController, layoutUtils, _WidgetsInTemplateMixin,
	26	Menu, MenuItem, Button, _HasDropDown){
	27
	28	// module:
	29	// dijit/layout/ScrollingTabController
	30
	31	var ScrollingTabController = declare("dijit.layout.ScrollingTabController", [TabController, _WidgetsInTemplateMixin], {
	32	// summary:
	33	// Set of tabs with left/right arrow keys and a menu to switch between tabs not
	34	// all fitting on a single row.
	35	// Works only for horizontal tabs (either above or below the content, not to the left
	36	// or right).
	37	// tags:
	38	// private
	39
	40	baseClass: "dijitTabController dijitScrollingTabController",
	41
	42	templateString: tabControllerTemplate,
	43
	44	// useMenu: [const] Boolean
	45	// True if a menu should be used to select tabs when they are too
	46	// wide to fit the TabContainer, false otherwise.
	47	useMenu: true,
	48
	49	// useSlider: [const] Boolean
	50	// True if a slider should be used to select tabs when they are too
	51	// wide to fit the TabContainer, false otherwise.
	52	useSlider: true,
	53
	54	// tabStripClass: [const] String
	55	// The css class to apply to the tab strip, if it is visible.
	56	tabStripClass: "",
	57
	58	// _minScroll: Number
	59	// The distance in pixels from the edge of the tab strip which,
	60	// if a scroll animation is less than, forces the scroll to
	61	// go all the way to the left/right.
	62	_minScroll: 5,
	63
	64	// Override default behavior mapping class to DOMNode
	65	_setClassAttr: { node: "containerNode", type: "class" },
	66
	67	buildRendering: function(){
	68	this.inherited(arguments);
	69	var n = this.domNode;
	70
	71	this.scrollNode = this.tablistWrapper;
	72	this._initButtons();
	73
	74	if(!this.tabStripClass){
	75	this.tabStripClass = "dijitTabContainer" +
	76	this.tabPosition.charAt(0).toUpperCase() +
	77	this.tabPosition.substr(1).replace(/-.*/, "") +
	78	"None";
	79	domClass.add(n, "tabStrip-disabled")
	80	}
	81
	82	domClass.add(this.tablistWrapper, this.tabStripClass);
	83	},
	84
	85	onStartup: function(){
	86	this.inherited(arguments);
	87
	88	// TabController is hidden until it finishes drawing, to give
	89	// a less visually jumpy instantiation. When it's finished, set visibility to ""
	90	// to that the tabs are hidden/shown depending on the container's visibility setting.
	91	domStyle.set(this.domNode, "visibility", "");
	92	this._postStartup = true;
	93
	94	// changes to the tab button label or iconClass will have changed the width of the
	95	// buttons, so do a resize
	96	this.own(on(this.containerNode, "attrmodified-label, attrmodified-iconclass", lang.hitch(this, function(evt){
	97	if(this._dim){
	98	this.resize(this._dim);
	99	}
	100	})));
	101	},
	102
	103	onAddChild: function(page, insertIndex){
	104	this.inherited(arguments);
	105
	106	// Increment the width of the wrapper when a tab is added
	107	// This makes sure that the buttons never wrap.
	108	// The value 200 is chosen as it should be bigger than most
	109	// Tab button widths.
	110	domStyle.set(this.containerNode, "width",
	111	(domStyle.get(this.containerNode, "width") + 200) + "px");
	112	},
	113
	114	onRemoveChild: function(page, insertIndex){
	115	// null out _selectedTab because we are about to delete that dom node
	116	var button = this.pane2button(page.id);
	117	if(this._selectedTab === button.domNode){
	118	this._selectedTab = null;
	119	}
	120
	121	this.inherited(arguments);
	122	},
	123
	124	_initButtons: function(){
	125	// summary:
	126	// Creates the buttons used to scroll to view tabs that
	127	// may not be visible if the TabContainer is too narrow.
	128
	129	// Make a list of the buttons to display when the tab labels become
	130	// wider than the TabContainer, and hide the other buttons.
	131	// Also gets the total width of the displayed buttons.
	132	this._btnWidth = 0;
	133	this._buttons = query("> .tabStripButton", this.domNode).filter(function(btn){
	134	if((this.useMenu && btn == this._menuBtn.domNode) \|\|
	135	(this.useSlider && (btn == this._rightBtn.domNode \|\| btn == this._leftBtn.domNode))){
	136	this._btnWidth += domGeometry.getMarginSize(btn).w;
	137	return true;
	138	}else{
	139	domStyle.set(btn, "display", "none");
	140	return false;
	141	}
	142	}, this);
	143	},
	144
	145	_getTabsWidth: function(){
	146	var children = this.getChildren();
	147	if(children.length){
	148	var leftTab = children[this.isLeftToRight() ? 0 : children.length - 1].domNode,
	149	rightTab = children[this.isLeftToRight() ? children.length - 1 : 0].domNode;
	150	return rightTab.offsetLeft + rightTab.offsetWidth - leftTab.offsetLeft;
	151	}else{
	152	return 0;
	153	}
	154	},
	155
	156	_enableBtn: function(width){
	157	// summary:
	158	// Determines if the tabs are wider than the width of the TabContainer, and
	159	// thus that we need to display left/right/menu navigation buttons.
	160	var tabsWidth = this._getTabsWidth();
	161	width = width \|\| domStyle.get(this.scrollNode, "width");
	162	return tabsWidth > 0 && width < tabsWidth;
	163	},
	164
	165	resize: function(dim){
	166	// summary:
	167	// Hides or displays the buttons used to scroll the tab list and launch the menu
	168	// that selects tabs.
	169
	170	// Save the dimensions to be used when a child is renamed.
	171	this._dim = dim;
	172
	173	// Set my height to be my natural height (tall enough for one row of tab labels),
	174	// and my content-box width based on margin-box width specified in dim parameter.
	175	// But first reset scrollNode.height in case it was set by layoutChildren() call
	176	// in a previous run of this method.
	177	this.scrollNode.style.height = "auto";
	178	var cb = this._contentBox = layoutUtils.marginBox2contentBox(this.domNode, {h: 0, w: dim.w});
	179	cb.h = this.scrollNode.offsetHeight;
	180	domGeometry.setContentSize(this.domNode, cb);
	181
	182	// Show/hide the left/right/menu navigation buttons depending on whether or not they
	183	// are needed.
	184	var enable = this._enableBtn(this._contentBox.w);
	185	this._buttons.style("display", enable ? "" : "none");
	186
	187	// Position and size the navigation buttons and the tablist
	188	this._leftBtn.region = "left";
	189	this._rightBtn.region = "right";
	190	this._menuBtn.region = this.isLeftToRight() ? "right" : "left";
	191	layoutUtils.layoutChildren(this.domNode, this._contentBox,
	192	[this._menuBtn, this._leftBtn, this._rightBtn, {domNode: this.scrollNode, region: "center"}]);
	193
	194	// set proper scroll so that selected tab is visible
	195	if(this._selectedTab){
	196	if(this._anim && this._anim.status() == "playing"){
	197	this._anim.stop();
	198	}
	199	this.scrollNode.scrollLeft = this._convertToScrollLeft(this._getScrollForSelectedTab());
	200	}
	201
	202	// Enable/disabled left right buttons depending on whether or not user can scroll to left or right
	203	this._setButtonClass(this._getScroll());
	204
	205	this._postResize = true;
	206
	207	// Return my size so layoutChildren() can use it.
	208	// Also avoids IE9 layout glitch on browser resize when scroll buttons present
	209	return {h: this._contentBox.h, w: dim.w};
	210	},
	211
	212	_getScroll: function(){
	213	// summary:
	214	// Returns the current scroll of the tabs where 0 means
	215	// "scrolled all the way to the left" and some positive number, based on #
	216	// of pixels of possible scroll (ex: 1000) means "scrolled all the way to the right"
	217	return (this.isLeftToRight() \|\| has("ie") < 8 \|\| (has("ie") && has("quirks")) \|\| has("webkit")) ? this.scrollNode.scrollLeft :
	218	domStyle.get(this.containerNode, "width") - domStyle.get(this.scrollNode, "width")
	219	+ (has("ie") >= 8 ? -1 : 1) * this.scrollNode.scrollLeft;
	220	},
	221
	222	_convertToScrollLeft: function(val){
	223	// summary:
	224	// Given a scroll value where 0 means "scrolled all the way to the left"
	225	// and some positive number, based on # of pixels of possible scroll (ex: 1000)
	226	// means "scrolled all the way to the right", return value to set this.scrollNode.scrollLeft
	227	// to achieve that scroll.
	228	//
	229	// This method is to adjust for RTL funniness in various browsers and versions.
	230	if(this.isLeftToRight() \|\| has("ie") < 8 \|\| (has("ie") && has("quirks")) \|\| has("webkit")){
	231	return val;
	232	}else{
	233	var maxScroll = domStyle.get(this.containerNode, "width") - domStyle.get(this.scrollNode, "width");
	234	return (has("ie") >= 8 ? -1 : 1) * (val - maxScroll);
	235	}
	236	},
	237
	238	onSelectChild: function(/dijit/_WidgetBase/ page){
	239	// summary:
	240	// Smoothly scrolls to a tab when it is selected.
	241
	242	var tab = this.pane2button(page.id);
	243	if(!tab){
	244	return;
	245	}
	246
	247	var node = tab.domNode;
	248
	249	// Save the selection
	250	if(node != this._selectedTab){
	251	this._selectedTab = node;
	252
	253	// Scroll to the selected tab, except on startup, when scrolling is handled in resize()
	254	if(this._postResize){
	255	var sl = this._getScroll();
	256
	257	if(sl > node.offsetLeft \|\|
	258	sl + domStyle.get(this.scrollNode, "width") <
	259	node.offsetLeft + domStyle.get(node, "width")){
	260	this.createSmoothScroll().play();
	261	}
	262	}
	263	}
	264
	265	this.inherited(arguments);
	266	},
	267
	268	_getScrollBounds: function(){
	269	// summary:
	270	// Returns the minimum and maximum scroll setting to show the leftmost and rightmost
	271	// tabs (respectively)
	272	var children = this.getChildren(),
	273	scrollNodeWidth = domStyle.get(this.scrollNode, "width"), // about 500px
	274	containerWidth = domStyle.get(this.containerNode, "width"), // 50,000px
	275	maxPossibleScroll = containerWidth - scrollNodeWidth, // scrolling until right edge of containerNode visible
	276	tabsWidth = this._getTabsWidth();
	277
	278	if(children.length && tabsWidth > scrollNodeWidth){
	279	// Scrolling should happen
	280	return {
	281	min: this.isLeftToRight() ? 0 : children[children.length - 1].domNode.offsetLeft,
	282	max: this.isLeftToRight() ?
	283	(children[children.length - 1].domNode.offsetLeft + children[children.length - 1].domNode.offsetWidth) - scrollNodeWidth :
	284	maxPossibleScroll
	285	};
	286	}else{
	287	// No scrolling needed, all tabs visible, we stay either scrolled to far left or far right (depending on dir)
	288	var onlyScrollPosition = this.isLeftToRight() ? 0 : maxPossibleScroll;
	289	return {
	290	min: onlyScrollPosition,
	291	max: onlyScrollPosition
	292	};
	293	}
	294	},
	295
	296	_getScrollForSelectedTab: function(){
	297	// summary:
	298	// Returns the scroll value setting so that the selected tab
	299	// will appear in the center
	300	var w = this.scrollNode,
	301	n = this._selectedTab,
	302	scrollNodeWidth = domStyle.get(this.scrollNode, "width"),
	303	scrollBounds = this._getScrollBounds();
	304
	305	// TODO: scroll minimal amount (to either right or left) so that
	306	// selected tab is fully visible, and just return if it's already visible?
	307	var pos = (n.offsetLeft + domStyle.get(n, "width") / 2) - scrollNodeWidth / 2;
	308	pos = Math.min(Math.max(pos, scrollBounds.min), scrollBounds.max);
	309
	310	// TODO:
	311	// If scrolling close to the left side or right side, scroll
	312	// all the way to the left or right. See this._minScroll.
	313	// (But need to make sure that doesn't scroll the tab out of view...)
	314	return pos;
	315	},
	316
	317	createSmoothScroll: function(x){
	318	// summary:
	319	// Creates a dojo._Animation object that smoothly scrolls the tab list
	320	// either to a fixed horizontal pixel value, or to the selected tab.
	321	// description:
	322	// If an number argument is passed to the function, that horizontal
	323	// pixel position is scrolled to. Otherwise the currently selected
	324	// tab is scrolled to.
	325	// x: Integer?
	326	// An optional pixel value to scroll to, indicating distance from left.
	327
	328	// Calculate position to scroll to
	329	if(arguments.length > 0){
	330	// position specified by caller, just make sure it's within bounds
	331	var scrollBounds = this._getScrollBounds();
	332	x = Math.min(Math.max(x, scrollBounds.min), scrollBounds.max);
	333	}else{
	334	// scroll to center the current tab
	335	x = this._getScrollForSelectedTab();
	336	}
	337
	338	if(this._anim && this._anim.status() == "playing"){
	339	this._anim.stop();
	340	}
	341
	342	var self = this,
	343	w = this.scrollNode,
	344	anim = new fx.Animation({
	345	beforeBegin: function(){
	346	if(this.curve){
	347	delete this.curve;
	348	}
	349	var oldS = w.scrollLeft,
	350	newS = self._convertToScrollLeft(x);
	351	anim.curve = new fx._Line(oldS, newS);
	352	},
	353	onAnimate: function(val){
	354	w.scrollLeft = val;
	355	}
	356	});
	357	this._anim = anim;
	358
	359	// Disable/enable left/right buttons according to new scroll position
	360	this._setButtonClass(x);
	361
	362	return anim; // dojo/_base/fx/Animation
	363	},
	364
	365	_getBtnNode: function(/Event/ e){
	366	// summary:
	367	// Gets a button DOM node from a mouse click event.
	368	// e:
	369	// The mouse click event.
	370	var n = e.target;
	371	while(n && !domClass.contains(n, "tabStripButton")){
	372	n = n.parentNode;
	373	}
	374	return n;
	375	},
	376
	377	doSlideRight: function(/Event/ e){
	378	// summary:
	379	// Scrolls the menu to the right.
	380	// e:
	381	// The mouse click event.
	382	this.doSlide(1, this._getBtnNode(e));
	383	},
	384
	385	doSlideLeft: function(/Event/ e){
	386	// summary:
	387	// Scrolls the menu to the left.
	388	// e:
	389	// The mouse click event.
	390	this.doSlide(-1, this._getBtnNode(e));
	391	},
	392
	393	doSlide: function(/Number/ direction, /DomNode/ node){
	394	// summary:
	395	// Scrolls the tab list to the left or right by 75% of the widget width.
	396	// direction:
	397	// If the direction is 1, the widget scrolls to the right, if it is -1,
	398	// it scrolls to the left.
	399
	400	if(node && domClass.contains(node, "dijitTabDisabled")){
	401	return;
	402	}
	403
	404	var sWidth = domStyle.get(this.scrollNode, "width");
	405	var d = (sWidth * 0.75) * direction;
	406
	407	var to = this._getScroll() + d;
	408
	409	this._setButtonClass(to);
	410
	411	this.createSmoothScroll(to).play();
	412	},
	413
	414	_setButtonClass: function(/Number/ scroll){
	415	// summary:
	416	// Disables the left scroll button if the tabs are scrolled all the way to the left,
	417	// or the right scroll button in the opposite case.
	418	// scroll: Integer
	419	// amount of horizontal scroll
	420
	421	var scrollBounds = this._getScrollBounds();
	422	this._leftBtn.set("disabled", scroll <= scrollBounds.min);
	423	this._rightBtn.set("disabled", scroll >= scrollBounds.max);
	424	}
	425	});
	426
	427
	428	var ScrollingTabControllerButtonMixin = declare("dijit.layout._ScrollingTabControllerButtonMixin", null, {
	429	baseClass: "dijitTab tabStripButton",
	430
	431	templateString: buttonTemplate,
	432
	433	// Override inherited tabIndex: 0 from dijit/form/Button, because user shouldn't be
	434	// able to tab to the left/right/menu buttons
	435	tabIndex: "",
	436
	437	// Similarly, override FormWidget.isFocusable() because clicking a button shouldn't focus it
	438	// either (this override avoids focus() call in FormWidget.js)
	439	isFocusable: function(){
	440	return false;
	441	}
	442	});
	443
	444	// Class used in template
	445	declare("dijit.layout._ScrollingTabControllerButton", [Button, ScrollingTabControllerButtonMixin]);
	446
	447	// Class used in template
	448	declare("dijit.layout._ScrollingTabControllerMenuButton", [Button, _HasDropDown, ScrollingTabControllerButtonMixin], {
	449	// id of the TabContainer itself
	450	containerId: "",
	451
	452	// -1 so user can't tab into the button, but so that button can still be focused programatically.
	453	// Because need to move focus to the button (or somewhere) before the menu is hidden or IE6 will crash.
	454	tabIndex: "-1",
	455
	456	isLoaded: function(){
	457	// recreate menu every time, in case the TabContainer's list of children (or their icons/labels) have changed
	458	return false;
	459	},
	460
	461	loadDropDown: function(callback){
	462	this.dropDown = new Menu({
	463	id: this.containerId + "_menu",
	464	ownerDocument: this.ownerDocument,
	465	dir: this.dir,
	466	lang: this.lang,
	467	textDir: this.textDir
	468	});
	469	var container = registry.byId(this.containerId);
	470	array.forEach(container.getChildren(), function(page){
	471	var menuItem = new MenuItem({
	472	id: page.id + "_stcMi",
	473	label: page.title,
	474	iconClass: page.iconClass,
	475	disabled: page.disabled,
	476	ownerDocument: this.ownerDocument,
	477	dir: page.dir,
	478	lang: page.lang,
	479	textDir: page.textDir \|\| container.textDir,
	480	onClick: function(){
	481	container.selectChild(page);
	482	}
	483	});
	484	this.dropDown.addChild(menuItem);
	485	}, this);
	486	callback();
	487	},
	488
	489	closeDropDown: function(/Boolean/ focus){
	490	this.inherited(arguments);
	491	if(this.dropDown){
	492	this._popupStateNode.removeAttribute("aria-owns"); // remove ref to node that we are about to delete
	493	this.dropDown.destroyRecursive();
	494	delete this.dropDown;
	495	}
	496	}
	497	});
	498
	499	return ScrollingTabController;
	500	});

Note: See TracBrowser for help on using the repository browser.

Download in other formats: