src/cm/media/js/lib/yui/yui3.0.0/examples/node-focusmanager/assets/tabview.js
author Yves-Marie Haussonne <ymh.work+github@gmail.com>
Fri, 09 May 2014 18:35:26 +0200
changeset 656 a84519031134
parent 0 40c8f766c9b8
permissions -rw-r--r--
add link to "privacy policy" in the header test

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");
	
});