diff -r 000000000000 -r 40c8f766c9b8 src/cm/media/js/lib/yui/yui3.0.0/examples/node-focusmanager/assets/tabview.js --- /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 + " Press the enter key to load the content of each tab.")); + + 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 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 += ''; + } + + if (listitem.next()) { + sHTML += ''; + } + + panel.append('
' + sHTML + '
'); + + } + + }; + + 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