src/cm/media/js/lib/yui/yui3.0.0/examples/node-focusmanager/assets/tabview.js
author raph
Mon, 23 Nov 2009 15:14:29 +0100
changeset 0 40c8f766c9b8
permissions -rw-r--r--
import from internal svn r 4007
Ignore whitespace changes - Everywhere: Within whitespace: At end of lines:
0
40c8f766c9b8 import from internal svn r 4007
raph
parents:
diff changeset
     1
YUI().use("*", function (Y) {
40c8f766c9b8 import from internal svn r 4007
raph
parents:
diff changeset
     2
40c8f766c9b8 import from internal svn r 4007
raph
parents:
diff changeset
     3
	var tabView = Y.one("#tabview-1"),
40c8f766c9b8 import from internal svn r 4007
raph
parents:
diff changeset
     4
		tabList = tabView.one("ul"),
40c8f766c9b8 import from internal svn r 4007
raph
parents:
diff changeset
     5
		tabHeading = Y.one("#tabview-heading"),
40c8f766c9b8 import from internal svn r 4007
raph
parents:
diff changeset
     6
		sInstructionalText = tabHeading.get("innerHTML");
40c8f766c9b8 import from internal svn r 4007
raph
parents:
diff changeset
     7
		selectedTabAnchor = tabView.one(".yui-tab-selected>a"),
40c8f766c9b8 import from internal svn r 4007
raph
parents:
diff changeset
     8
		bGeckoIEWin = ((Y.UA.gecko || Y.UA.ie) && navigator.userAgent.indexOf("Windows") > -1),
40c8f766c9b8 import from internal svn r 4007
raph
parents:
diff changeset
     9
		panelMap = {};
40c8f766c9b8 import from internal svn r 4007
raph
parents:
diff changeset
    10
40c8f766c9b8 import from internal svn r 4007
raph
parents:
diff changeset
    11
40c8f766c9b8 import from internal svn r 4007
raph
parents:
diff changeset
    12
	tabView.addClass("yui-tabview");
40c8f766c9b8 import from internal svn r 4007
raph
parents:
diff changeset
    13
40c8f766c9b8 import from internal svn r 4007
raph
parents:
diff changeset
    14
	//	Remove the "yui-loading" class from the documentElement
40c8f766c9b8 import from internal svn r 4007
raph
parents:
diff changeset
    15
	//	now that the necessary YUI dependencies are loaded and the 
40c8f766c9b8 import from internal svn r 4007
raph
parents:
diff changeset
    16
	//	tabview has been skinned.
40c8f766c9b8 import from internal svn r 4007
raph
parents:
diff changeset
    17
40c8f766c9b8 import from internal svn r 4007
raph
parents:
diff changeset
    18
	tabView.get("ownerDocument").get("documentElement").removeClass("yui-loading");
40c8f766c9b8 import from internal svn r 4007
raph
parents:
diff changeset
    19
40c8f766c9b8 import from internal svn r 4007
raph
parents:
diff changeset
    20
	//	Apply the ARIA roles, states and properties.
40c8f766c9b8 import from internal svn r 4007
raph
parents:
diff changeset
    21
40c8f766c9b8 import from internal svn r 4007
raph
parents:
diff changeset
    22
	//	Add some instructional text to the heading that will be read by
40c8f766c9b8 import from internal svn r 4007
raph
parents:
diff changeset
    23
	//	the screen reader when the first tab in the tabview is focused.
40c8f766c9b8 import from internal svn r 4007
raph
parents:
diff changeset
    24
40c8f766c9b8 import from internal svn r 4007
raph
parents:
diff changeset
    25
	tabHeading.set("innerHTML", (sInstructionalText + " <em>Press the enter key to load the content of each tab.</em>"));
40c8f766c9b8 import from internal svn r 4007
raph
parents:
diff changeset
    26
40c8f766c9b8 import from internal svn r 4007
raph
parents:
diff changeset
    27
	tabList.setAttrs({
40c8f766c9b8 import from internal svn r 4007
raph
parents:
diff changeset
    28
		"aria-labelledby": "tabview-heading",
40c8f766c9b8 import from internal svn r 4007
raph
parents:
diff changeset
    29
		role: "tablist"
40c8f766c9b8 import from internal svn r 4007
raph
parents:
diff changeset
    30
	});
40c8f766c9b8 import from internal svn r 4007
raph
parents:
diff changeset
    31
40c8f766c9b8 import from internal svn r 4007
raph
parents:
diff changeset
    32
	tabView.one("div").set("role", "presentation");
40c8f766c9b8 import from internal svn r 4007
raph
parents:
diff changeset
    33
40c8f766c9b8 import from internal svn r 4007
raph
parents:
diff changeset
    34
40c8f766c9b8 import from internal svn r 4007
raph
parents:
diff changeset
    35
	tabView.plug(Y.Plugin.NodeFocusManager, { 
40c8f766c9b8 import from internal svn r 4007
raph
parents:
diff changeset
    36
			descendants: ".yui-tab>a",
40c8f766c9b8 import from internal svn r 4007
raph
parents:
diff changeset
    37
			keys: { next: "down:39", //	Right arrow
40c8f766c9b8 import from internal svn r 4007
raph
parents:
diff changeset
    38
					previous: "down:37" },	// Left arrow
40c8f766c9b8 import from internal svn r 4007
raph
parents:
diff changeset
    39
			focusClass: {
40c8f766c9b8 import from internal svn r 4007
raph
parents:
diff changeset
    40
				className: "yui-tab-focus",
40c8f766c9b8 import from internal svn r 4007
raph
parents:
diff changeset
    41
				fn: function (node) {
40c8f766c9b8 import from internal svn r 4007
raph
parents:
diff changeset
    42
					return node.get("parentNode");
40c8f766c9b8 import from internal svn r 4007
raph
parents:
diff changeset
    43
				}
40c8f766c9b8 import from internal svn r 4007
raph
parents:
diff changeset
    44
			},
40c8f766c9b8 import from internal svn r 4007
raph
parents:
diff changeset
    45
			circular: true
40c8f766c9b8 import from internal svn r 4007
raph
parents:
diff changeset
    46
		});
40c8f766c9b8 import from internal svn r 4007
raph
parents:
diff changeset
    47
40c8f766c9b8 import from internal svn r 4007
raph
parents:
diff changeset
    48
40c8f766c9b8 import from internal svn r 4007
raph
parents:
diff changeset
    49
	//	If the list of tabs loses focus, set the activeDescendant 
40c8f766c9b8 import from internal svn r 4007
raph
parents:
diff changeset
    50
	//	attribute to the currently selected tab.
40c8f766c9b8 import from internal svn r 4007
raph
parents:
diff changeset
    51
40c8f766c9b8 import from internal svn r 4007
raph
parents:
diff changeset
    52
	tabView.focusManager.after("focusedChange", function (event) {
40c8f766c9b8 import from internal svn r 4007
raph
parents:
diff changeset
    53
40c8f766c9b8 import from internal svn r 4007
raph
parents:
diff changeset
    54
		if (!event.newVal) {	//	The list of tabs has lost focus
40c8f766c9b8 import from internal svn r 4007
raph
parents:
diff changeset
    55
			this.set("activeDescendant", selectedTabAnchor);
40c8f766c9b8 import from internal svn r 4007
raph
parents:
diff changeset
    56
		}
40c8f766c9b8 import from internal svn r 4007
raph
parents:
diff changeset
    57
40c8f766c9b8 import from internal svn r 4007
raph
parents:
diff changeset
    58
	});
40c8f766c9b8 import from internal svn r 4007
raph
parents:
diff changeset
    59
40c8f766c9b8 import from internal svn r 4007
raph
parents:
diff changeset
    60
40c8f766c9b8 import from internal svn r 4007
raph
parents:
diff changeset
    61
	tabView.all(".yui-tab>a").each(function (anchor) {
40c8f766c9b8 import from internal svn r 4007
raph
parents:
diff changeset
    62
40c8f766c9b8 import from internal svn r 4007
raph
parents:
diff changeset
    63
		var sHref = anchor.getAttribute("href", 2),
40c8f766c9b8 import from internal svn r 4007
raph
parents:
diff changeset
    64
			sPanelID = sHref.substring(1, sHref.length),
40c8f766c9b8 import from internal svn r 4007
raph
parents:
diff changeset
    65
			panel;
40c8f766c9b8 import from internal svn r 4007
raph
parents:
diff changeset
    66
40c8f766c9b8 import from internal svn r 4007
raph
parents:
diff changeset
    67
		//	Apply the ARIA roles, states and properties to each tab
40c8f766c9b8 import from internal svn r 4007
raph
parents:
diff changeset
    68
40c8f766c9b8 import from internal svn r 4007
raph
parents:
diff changeset
    69
		anchor.set("role", "tab");
40c8f766c9b8 import from internal svn r 4007
raph
parents:
diff changeset
    70
		anchor.get("parentNode").set("role", "presentation");
40c8f766c9b8 import from internal svn r 4007
raph
parents:
diff changeset
    71
40c8f766c9b8 import from internal svn r 4007
raph
parents:
diff changeset
    72
40c8f766c9b8 import from internal svn r 4007
raph
parents:
diff changeset
    73
		//	Remove the "href" attribute from the anchor element to  
40c8f766c9b8 import from internal svn r 4007
raph
parents:
diff changeset
    74
		//	prevent JAWS and NVDA from reading the value of the "href"
40c8f766c9b8 import from internal svn r 4007
raph
parents:
diff changeset
    75
		//	attribute when the anchor is focused
40c8f766c9b8 import from internal svn r 4007
raph
parents:
diff changeset
    76
40c8f766c9b8 import from internal svn r 4007
raph
parents:
diff changeset
    77
		if (bGeckoIEWin) {
40c8f766c9b8 import from internal svn r 4007
raph
parents:
diff changeset
    78
			anchor.removeAttribute("href");
40c8f766c9b8 import from internal svn r 4007
raph
parents:
diff changeset
    79
		}
40c8f766c9b8 import from internal svn r 4007
raph
parents:
diff changeset
    80
40c8f766c9b8 import from internal svn r 4007
raph
parents:
diff changeset
    81
		//	Cache a reference to id of the tab's corresponding panel
40c8f766c9b8 import from internal svn r 4007
raph
parents:
diff changeset
    82
		//	element so that it can be made visible when the tab
40c8f766c9b8 import from internal svn r 4007
raph
parents:
diff changeset
    83
		//	is clicked.
40c8f766c9b8 import from internal svn r 4007
raph
parents:
diff changeset
    84
		panelMap[anchor.get("id")] = sPanelID;
40c8f766c9b8 import from internal svn r 4007
raph
parents:
diff changeset
    85
40c8f766c9b8 import from internal svn r 4007
raph
parents:
diff changeset
    86
40c8f766c9b8 import from internal svn r 4007
raph
parents:
diff changeset
    87
		//	Apply the ARIA roles, states and properties to each panel
40c8f766c9b8 import from internal svn r 4007
raph
parents:
diff changeset
    88
40c8f766c9b8 import from internal svn r 4007
raph
parents:
diff changeset
    89
		panel = Y.one(("#" + sPanelID));
40c8f766c9b8 import from internal svn r 4007
raph
parents:
diff changeset
    90
40c8f766c9b8 import from internal svn r 4007
raph
parents:
diff changeset
    91
		panel.setAttrs({
40c8f766c9b8 import from internal svn r 4007
raph
parents:
diff changeset
    92
			role: "tabpanel",
40c8f766c9b8 import from internal svn r 4007
raph
parents:
diff changeset
    93
			"aria-labelledby": anchor.get("id")
40c8f766c9b8 import from internal svn r 4007
raph
parents:
diff changeset
    94
		});
40c8f766c9b8 import from internal svn r 4007
raph
parents:
diff changeset
    95
40c8f766c9b8 import from internal svn r 4007
raph
parents:
diff changeset
    96
	});
40c8f766c9b8 import from internal svn r 4007
raph
parents:
diff changeset
    97
40c8f766c9b8 import from internal svn r 4007
raph
parents:
diff changeset
    98
40c8f766c9b8 import from internal svn r 4007
raph
parents:
diff changeset
    99
	//	Use the "delegate" custom event to listen for the "click" event
40c8f766c9b8 import from internal svn r 4007
raph
parents:
diff changeset
   100
	//	of each tab's <A> element.
40c8f766c9b8 import from internal svn r 4007
raph
parents:
diff changeset
   101
40c8f766c9b8 import from internal svn r 4007
raph
parents:
diff changeset
   102
	tabView.delegate("click", function (event) {
40c8f766c9b8 import from internal svn r 4007
raph
parents:
diff changeset
   103
40c8f766c9b8 import from internal svn r 4007
raph
parents:
diff changeset
   104
		var selectedPanel,
40c8f766c9b8 import from internal svn r 4007
raph
parents:
diff changeset
   105
			sID = this.get("id");
40c8f766c9b8 import from internal svn r 4007
raph
parents:
diff changeset
   106
40c8f766c9b8 import from internal svn r 4007
raph
parents:
diff changeset
   107
		//	Deselect the currently selected tab and hide its 
40c8f766c9b8 import from internal svn r 4007
raph
parents:
diff changeset
   108
		//	corresponding panel.
40c8f766c9b8 import from internal svn r 4007
raph
parents:
diff changeset
   109
40c8f766c9b8 import from internal svn r 4007
raph
parents:
diff changeset
   110
		if (selectedTabAnchor) {
40c8f766c9b8 import from internal svn r 4007
raph
parents:
diff changeset
   111
			selectedTabAnchor.get("parentNode").removeClass("yui-tab-selected");
40c8f766c9b8 import from internal svn r 4007
raph
parents:
diff changeset
   112
			Y.one(("#" + panelMap[selectedTabAnchor.get("id")])).removeClass("yui-tabpanel-selected");
40c8f766c9b8 import from internal svn r 4007
raph
parents:
diff changeset
   113
		}
40c8f766c9b8 import from internal svn r 4007
raph
parents:
diff changeset
   114
40c8f766c9b8 import from internal svn r 4007
raph
parents:
diff changeset
   115
		selectedTabAnchor = this;
40c8f766c9b8 import from internal svn r 4007
raph
parents:
diff changeset
   116
		selectedTabAnchor.get("parentNode").addClass("yui-tab-selected");
40c8f766c9b8 import from internal svn r 4007
raph
parents:
diff changeset
   117
40c8f766c9b8 import from internal svn r 4007
raph
parents:
diff changeset
   118
		selectedPanel = Y.one(("#" + panelMap[sID]));
40c8f766c9b8 import from internal svn r 4007
raph
parents:
diff changeset
   119
		selectedPanel.addClass("yui-tabpanel-selected");
40c8f766c9b8 import from internal svn r 4007
raph
parents:
diff changeset
   120
40c8f766c9b8 import from internal svn r 4007
raph
parents:
diff changeset
   121
		creatingPaging(selectedPanel);
40c8f766c9b8 import from internal svn r 4007
raph
parents:
diff changeset
   122
40c8f766c9b8 import from internal svn r 4007
raph
parents:
diff changeset
   123
		//	Prevent the browser from following the URL specified by the 
40c8f766c9b8 import from internal svn r 4007
raph
parents:
diff changeset
   124
		//	anchor's "href" attribute when clicked.
40c8f766c9b8 import from internal svn r 4007
raph
parents:
diff changeset
   125
40c8f766c9b8 import from internal svn r 4007
raph
parents:
diff changeset
   126
		event.preventDefault();
40c8f766c9b8 import from internal svn r 4007
raph
parents:
diff changeset
   127
40c8f766c9b8 import from internal svn r 4007
raph
parents:
diff changeset
   128
	}, ".yui-tab>a");
40c8f766c9b8 import from internal svn r 4007
raph
parents:
diff changeset
   129
40c8f766c9b8 import from internal svn r 4007
raph
parents:
diff changeset
   130
40c8f766c9b8 import from internal svn r 4007
raph
parents:
diff changeset
   131
	//	Since the anchor's "href" attribute has been removed, the 
40c8f766c9b8 import from internal svn r 4007
raph
parents:
diff changeset
   132
	//	element will not fire the click event in Firefox when the 
40c8f766c9b8 import from internal svn r 4007
raph
parents:
diff changeset
   133
	//	user presses the enter key.  To fix this, dispatch the 
40c8f766c9b8 import from internal svn r 4007
raph
parents:
diff changeset
   134
	//	"click" event to the anchor when the user presses the 
40c8f766c9b8 import from internal svn r 4007
raph
parents:
diff changeset
   135
	//	enter key.
40c8f766c9b8 import from internal svn r 4007
raph
parents:
diff changeset
   136
40c8f766c9b8 import from internal svn r 4007
raph
parents:
diff changeset
   137
	if (bGeckoIEWin) {
40c8f766c9b8 import from internal svn r 4007
raph
parents:
diff changeset
   138
40c8f766c9b8 import from internal svn r 4007
raph
parents:
diff changeset
   139
		tabView.delegate("keydown", function (event) {
40c8f766c9b8 import from internal svn r 4007
raph
parents:
diff changeset
   140
40c8f766c9b8 import from internal svn r 4007
raph
parents:
diff changeset
   141
			if (event.charCode === 13) {
40c8f766c9b8 import from internal svn r 4007
raph
parents:
diff changeset
   142
				this.simulate("click");
40c8f766c9b8 import from internal svn r 4007
raph
parents:
diff changeset
   143
			}
40c8f766c9b8 import from internal svn r 4007
raph
parents:
diff changeset
   144
40c8f766c9b8 import from internal svn r 4007
raph
parents:
diff changeset
   145
		}, ">ul>li>a");
40c8f766c9b8 import from internal svn r 4007
raph
parents:
diff changeset
   146
40c8f766c9b8 import from internal svn r 4007
raph
parents:
diff changeset
   147
	}
40c8f766c9b8 import from internal svn r 4007
raph
parents:
diff changeset
   148
40c8f766c9b8 import from internal svn r 4007
raph
parents:
diff changeset
   149
40c8f766c9b8 import from internal svn r 4007
raph
parents:
diff changeset
   150
	var creatingPaging = function (panel) {
40c8f766c9b8 import from internal svn r 4007
raph
parents:
diff changeset
   151
40c8f766c9b8 import from internal svn r 4007
raph
parents:
diff changeset
   152
		var listitem,
40c8f766c9b8 import from internal svn r 4007
raph
parents:
diff changeset
   153
			sHTML = "";
40c8f766c9b8 import from internal svn r 4007
raph
parents:
diff changeset
   154
40c8f766c9b8 import from internal svn r 4007
raph
parents:
diff changeset
   155
		if (!panel.one(".paging")) {
40c8f766c9b8 import from internal svn r 4007
raph
parents:
diff changeset
   156
40c8f766c9b8 import from internal svn r 4007
raph
parents:
diff changeset
   157
			listitem = selectedTabAnchor.get("parentNode");
40c8f766c9b8 import from internal svn r 4007
raph
parents:
diff changeset
   158
40c8f766c9b8 import from internal svn r 4007
raph
parents:
diff changeset
   159
			if (listitem.previous()) {
40c8f766c9b8 import from internal svn r 4007
raph
parents:
diff changeset
   160
				sHTML += '<button type="button" class="yui-tabview-prevbtn">Previous Tab Panel</button>';
40c8f766c9b8 import from internal svn r 4007
raph
parents:
diff changeset
   161
			}
40c8f766c9b8 import from internal svn r 4007
raph
parents:
diff changeset
   162
40c8f766c9b8 import from internal svn r 4007
raph
parents:
diff changeset
   163
			if (listitem.next()) {
40c8f766c9b8 import from internal svn r 4007
raph
parents:
diff changeset
   164
				sHTML += '<button type="button" class="yui-tabview-nextbtn">Next Tab Panel</button>';
40c8f766c9b8 import from internal svn r 4007
raph
parents:
diff changeset
   165
			}
40c8f766c9b8 import from internal svn r 4007
raph
parents:
diff changeset
   166
40c8f766c9b8 import from internal svn r 4007
raph
parents:
diff changeset
   167
			panel.append('<div class="paging">' + sHTML + '</div>');
40c8f766c9b8 import from internal svn r 4007
raph
parents:
diff changeset
   168
40c8f766c9b8 import from internal svn r 4007
raph
parents:
diff changeset
   169
		}
40c8f766c9b8 import from internal svn r 4007
raph
parents:
diff changeset
   170
40c8f766c9b8 import from internal svn r 4007
raph
parents:
diff changeset
   171
	};
40c8f766c9b8 import from internal svn r 4007
raph
parents:
diff changeset
   172
40c8f766c9b8 import from internal svn r 4007
raph
parents:
diff changeset
   173
	creatingPaging(Y.one(".yui-tabpanel-selected"));
40c8f766c9b8 import from internal svn r 4007
raph
parents:
diff changeset
   174
40c8f766c9b8 import from internal svn r 4007
raph
parents:
diff changeset
   175
40c8f766c9b8 import from internal svn r 4007
raph
parents:
diff changeset
   176
	tabView.delegate("click", function (event) {
40c8f766c9b8 import from internal svn r 4007
raph
parents:
diff changeset
   177
40c8f766c9b8 import from internal svn r 4007
raph
parents:
diff changeset
   178
		var node = selectedTabAnchor.get("parentNode").previous().one("a");
40c8f766c9b8 import from internal svn r 4007
raph
parents:
diff changeset
   179
40c8f766c9b8 import from internal svn r 4007
raph
parents:
diff changeset
   180
		tabView.focusManager.focus(node);
40c8f766c9b8 import from internal svn r 4007
raph
parents:
diff changeset
   181
		node.simulate("click");
40c8f766c9b8 import from internal svn r 4007
raph
parents:
diff changeset
   182
40c8f766c9b8 import from internal svn r 4007
raph
parents:
diff changeset
   183
	}, ".yui-tabview-prevbtn");
40c8f766c9b8 import from internal svn r 4007
raph
parents:
diff changeset
   184
40c8f766c9b8 import from internal svn r 4007
raph
parents:
diff changeset
   185
40c8f766c9b8 import from internal svn r 4007
raph
parents:
diff changeset
   186
	tabView.delegate("click", function (event) {
40c8f766c9b8 import from internal svn r 4007
raph
parents:
diff changeset
   187
40c8f766c9b8 import from internal svn r 4007
raph
parents:
diff changeset
   188
		var node = selectedTabAnchor.get("parentNode").next().one("a");
40c8f766c9b8 import from internal svn r 4007
raph
parents:
diff changeset
   189
40c8f766c9b8 import from internal svn r 4007
raph
parents:
diff changeset
   190
		tabView.focusManager.focus(node);
40c8f766c9b8 import from internal svn r 4007
raph
parents:
diff changeset
   191
		node.simulate("click");
40c8f766c9b8 import from internal svn r 4007
raph
parents:
diff changeset
   192
40c8f766c9b8 import from internal svn r 4007
raph
parents:
diff changeset
   193
	}, ".yui-tabview-nextbtn");
40c8f766c9b8 import from internal svn r 4007
raph
parents:
diff changeset
   194
	
40c8f766c9b8 import from internal svn r 4007
raph
parents:
diff changeset
   195
});