src/cm/media/js/lib/yui/yui3.0.0/examples/node-focusmanager/assets/tabview.js
changeset 0 40c8f766c9b8
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/src/cm/media/js/lib/yui/yui3.0.0/examples/node-focusmanager/assets/tabview.js	Mon Nov 23 15:14:29 2009 +0100
@@ -0,0 +1,195 @@
+YUI().use("*", function (Y) {
+
+	var tabView = Y.one("#tabview-1"),
+		tabList = tabView.one("ul"),
+		tabHeading = Y.one("#tabview-heading"),
+		sInstructionalText = tabHeading.get("innerHTML");
+		selectedTabAnchor = tabView.one(".yui-tab-selected>a"),
+		bGeckoIEWin = ((Y.UA.gecko || Y.UA.ie) && navigator.userAgent.indexOf("Windows") > -1),
+		panelMap = {};
+
+
+	tabView.addClass("yui-tabview");
+
+	//	Remove the "yui-loading" class from the documentElement
+	//	now that the necessary YUI dependencies are loaded and the 
+	//	tabview has been skinned.
+
+	tabView.get("ownerDocument").get("documentElement").removeClass("yui-loading");
+
+	//	Apply the ARIA roles, states and properties.
+
+	//	Add some instructional text to the heading that will be read by
+	//	the screen reader when the first tab in the tabview is focused.
+
+	tabHeading.set("innerHTML", (sInstructionalText + " <em>Press the enter key to load the content of each tab.</em>"));
+
+	tabList.setAttrs({
+		"aria-labelledby": "tabview-heading",
+		role: "tablist"
+	});
+
+	tabView.one("div").set("role", "presentation");
+
+
+	tabView.plug(Y.Plugin.NodeFocusManager, { 
+			descendants: ".yui-tab>a",
+			keys: { next: "down:39", //	Right arrow
+					previous: "down:37" },	// Left arrow
+			focusClass: {
+				className: "yui-tab-focus",
+				fn: function (node) {
+					return node.get("parentNode");
+				}
+			},
+			circular: true
+		});
+
+
+	//	If the list of tabs loses focus, set the activeDescendant 
+	//	attribute to the currently selected tab.
+
+	tabView.focusManager.after("focusedChange", function (event) {
+
+		if (!event.newVal) {	//	The list of tabs has lost focus
+			this.set("activeDescendant", selectedTabAnchor);
+		}
+
+	});
+
+
+	tabView.all(".yui-tab>a").each(function (anchor) {
+
+		var sHref = anchor.getAttribute("href", 2),
+			sPanelID = sHref.substring(1, sHref.length),
+			panel;
+
+		//	Apply the ARIA roles, states and properties to each tab
+
+		anchor.set("role", "tab");
+		anchor.get("parentNode").set("role", "presentation");
+
+
+		//	Remove the "href" attribute from the anchor element to  
+		//	prevent JAWS and NVDA from reading the value of the "href"
+		//	attribute when the anchor is focused
+
+		if (bGeckoIEWin) {
+			anchor.removeAttribute("href");
+		}
+
+		//	Cache a reference to id of the tab's corresponding panel
+		//	element so that it can be made visible when the tab
+		//	is clicked.
+		panelMap[anchor.get("id")] = sPanelID;
+
+
+		//	Apply the ARIA roles, states and properties to each panel
+
+		panel = Y.one(("#" + sPanelID));
+
+		panel.setAttrs({
+			role: "tabpanel",
+			"aria-labelledby": anchor.get("id")
+		});
+
+	});
+
+
+	//	Use the "delegate" custom event to listen for the "click" event
+	//	of each tab's <A> element.
+
+	tabView.delegate("click", function (event) {
+
+		var selectedPanel,
+			sID = this.get("id");
+
+		//	Deselect the currently selected tab and hide its 
+		//	corresponding panel.
+
+		if (selectedTabAnchor) {
+			selectedTabAnchor.get("parentNode").removeClass("yui-tab-selected");
+			Y.one(("#" + panelMap[selectedTabAnchor.get("id")])).removeClass("yui-tabpanel-selected");
+		}
+
+		selectedTabAnchor = this;
+		selectedTabAnchor.get("parentNode").addClass("yui-tab-selected");
+
+		selectedPanel = Y.one(("#" + panelMap[sID]));
+		selectedPanel.addClass("yui-tabpanel-selected");
+
+		creatingPaging(selectedPanel);
+
+		//	Prevent the browser from following the URL specified by the 
+		//	anchor's "href" attribute when clicked.
+
+		event.preventDefault();
+
+	}, ".yui-tab>a");
+
+
+	//	Since the anchor's "href" attribute has been removed, the 
+	//	element will not fire the click event in Firefox when the 
+	//	user presses the enter key.  To fix this, dispatch the 
+	//	"click" event to the anchor when the user presses the 
+	//	enter key.
+
+	if (bGeckoIEWin) {
+
+		tabView.delegate("keydown", function (event) {
+
+			if (event.charCode === 13) {
+				this.simulate("click");
+			}
+
+		}, ">ul>li>a");
+
+	}
+
+
+	var creatingPaging = function (panel) {
+
+		var listitem,
+			sHTML = "";
+
+		if (!panel.one(".paging")) {
+
+			listitem = selectedTabAnchor.get("parentNode");
+
+			if (listitem.previous()) {
+				sHTML += '<button type="button" class="yui-tabview-prevbtn">Previous Tab Panel</button>';
+			}
+
+			if (listitem.next()) {
+				sHTML += '<button type="button" class="yui-tabview-nextbtn">Next Tab Panel</button>';
+			}
+
+			panel.append('<div class="paging">' + sHTML + '</div>');
+
+		}
+
+	};
+
+	creatingPaging(Y.one(".yui-tabpanel-selected"));
+
+
+	tabView.delegate("click", function (event) {
+
+		var node = selectedTabAnchor.get("parentNode").previous().one("a");
+
+		tabView.focusManager.focus(node);
+		node.simulate("click");
+
+	}, ".yui-tabview-prevbtn");
+
+
+	tabView.delegate("click", function (event) {
+
+		var node = selectedTabAnchor.get("parentNode").next().one("a");
+
+		tabView.focusManager.focus(node);
+		node.simulate("click");
+
+	}, ".yui-tabview-nextbtn");
+	
+});
\ No newline at end of file