Skip to content
Snippets Groups Projects
Normal view Permalink
sample-aria-treegrid.html 7.25 KiB
Newer Older
  • Learn to ignore specific revisions
    • Laura Cappelli's avatar
    Insert file
    Laura Cappelli committed
    1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 
    <!DOCTYPE html>
<html>
<head>
	<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
	<title>Fancytree - WAI-ARIA Tree Grid</title>

	<script src="../lib/jquery.js"></script>
	<script src="../lib/jquery-ui.custom.js"></script>

	<link href="../src/skin-lion/ui.fancytree.css" rel="stylesheet">
	<script src="../src/jquery.fancytree.js"></script>
	<script src="../src/jquery.fancytree.table.js"></script>
	<script src="../src/jquery.fancytree.ariagrid.js"></script>

	<!-- Start_Exclude: This block is not part of the sample code -->
	<link href="../lib/prettify.css" rel="stylesheet">
	<script src="../lib/prettify.js"></script>
	<link href="sample.css" rel="stylesheet">
	<script src="sample.js"></script>
	<!-- End_Exclude -->

	<style type="text/css">
		td.stretch input,
		td.stretch select {
			box-sizing: border-box;
			margin: 2px;
			width: 100%;
		}
		td.center {
			text-align: center;
		}
		table.fancytree-container > thead > tr > th {
			background-color: #d4d4d4;
		}
		/* --- ext-ariagrid specific ---------------------------------------- */
		table.fancytree-cell-mode > tbody > tr.fancytree-active > td {
			/*background-color: #cbe8f6;*/
			background-color: #eee;
		}
		table.fancytree-cell-mode > tbody > tr > td.fancytree-active-cell {
			background-color: #3875d7;
		}
		table.fancytree-cell-mode.fancytree-cell-nav-mode > tbody > tr > td.fancytree-active-cell {
			background-color: #cbe8f6;
		}
		/* --- Debug helpers: ----------------------------------------------- */
/*
		[tabindex="-1"] {
			border: 2px dotted green !important;
		}
		[tabindex="0"] {
			border: 2px dotted red !important;
		}
*/
	</style>

	<script type="text/javascript">
		/*global $ */
		$( function() {
			// --- Demo GUI: ---------------------------------------------------

			var store = window.sessionStorage;

			$( "#optionsForm [name=cellFocus]" ).change( function( e ) {
				store.setItem( "cellFocus", $( this ).find( ":selected" ).val() );
			}).val( store.getItem( "cellFocus" ) || "allow" );
			$( "#optionsForm [name=extendedMode]" ).change( function( e ) {
				store.setItem( "extendedMode", $( this ).prop( "checked" ) || "" );
			}).prop( "checked", !!store.getItem( "extendedMode" ) );

			// --- Fancytree widget --------------------------------------------

			$( "#treegrid" ).fancytree({
				extensions: [ "table", "ariagrid" ],
				aria: true,
				generateIds: true,
				// rtl: true,
				checkbox: true,
//				quicksearch: true,
				source: { url: "ajax-tree-products.json" },
				table: {
					checkboxColumnIdx: 0,  // render the checkboxes into the 1st column
					nodeColumnIdx: 1       // render the node title into the 2nd column
				},
				ariagrid: {
					cellFocus: $( "#optionsForm [name=cellFocus]" ).find( ":selected" ).val(),
					extendedMode: $( "#optionsForm [name=extendedMode]" ).is( ":checked" ),
					label: "Fancytree ARIA sample"
				},
				init: function( event, data ) {
					// We could switch to cell-mode here:
					// data.tree.getFirstChild().setActive(true, {cell: 1});
				},
				defaultCellAction: function( event, data ) {
					// Called when ENTER is pressed in cell-mode.
					// Return false to prevent default
					if ( data.colIdx === 4 ) {
						// eslint-disable-next-line no-alert
						alert( "Custom default action: " + data.node.title );
						return false;
					}
				},
				renderColumns: function( event, data ) {
					var node = data.node,
						$tdList = $( node.tr ).find( ">td" );

					// The row template inserts controls, so we have to remove
					// them herer for folders:
					if ( node.isFolder() ) {
						$tdList.eq( 2 ).empty();
						$tdList.eq( 3 ).empty();
						$tdList.eq( 5 ).empty();
						$tdList.eq( 6 ).empty();
						$tdList.eq( 7 ).empty();
					}
					$tdList.eq( 4 ).text( "Lorem ipsum " + node.title );
				}
			});

		});
</script>
</head>

<body class="example">
	<h1>Example: WAI-ARIA Tree Grid - Prototype</h1>
	<div class="description">
		<p>
			This Fancytree Tree Grid has uses a prototypical extension to
			explore ARIA support as discussed here:<br>
<!--
			<a href="https://github.com/aleventhal/treegrid-example">
				aleventhal/treegrid-example </a>,
			<a href="https://github.com/aleventhal/treegrid-tab-active-cells">
				aleventhal/treegrid-tab-active-cells </a>
			<br>
			and here
-->
			<a href="https://rawgit.com/w3c/aria-practices/treegrid/examples/treegrid/treegrid-1.html">
				w3c/aria-practices/treegrid/examples/treegrid/treegrid-1.html
			</a>
		</p> <p>
			Extended mode adds this behavior:
			<ul>
				<li>Embedded inputs get the focus, but we distinguish cell-nav-mode
				and cell-edit-mode. cell-nav-mode steals <kbd>Up</kbd>, <kbd>Down</kbd>,
				<kbd>Left</kbd>, <kbd>Right</kbd>, <kbd>Home</kbd>, <kbd>End</kbd>
				fromt input controls to always allow cell navigation.</li>
				<li><kbd>Enter</kbd>: In row-mode: switch to cell-nav-mode. In cell-nav-mode: execute default action or switch to cell-edit-mode for embedded text input.
				In cell-edit-mode: switch back to cell-nav-mode.</li>
				<li><kbd>Esc</kbd>: In cell-nav-mode: switch to row-mode. In cell-edit-mode: switch to cell-nav-mode.</li>
			</ul>
<!--
		</p><p>
			<strong>Note:</strong> please
			<a href="https://github.com/mar10/fancytree/issues/655">provide feedback</a>
			if you have suggestions for improvement on the Fancytree implementation.
-->
		</p> <p>
			See also the <a href="sample-aria.html">ARIA Tree View example</a>.
		</p>
	</div>

	<div>
		<form id="optionsForm">
			<label>cellFocus:
				<select name="cellFocus">
					<option value="start">start</option>
					<option value="allow" selected="selected">allow</option>
					<option value="force">force</option>
				</select>
			</label>
			<label>Extended mode <input type="checkbox" name="extendedMode"></label>
			(Please reload page for changes to take effect.)
		</form>
		<hr>

		<table id="treegrid">
			<colgroup>
			<col width="20px">
			<col width="400px">
			<col width="30px">
			<col width="30px">
			<col width="400px">
			<col width="100px">
			<col width="100px">
			<col width="100px">
			</colgroup>
			<thead>
				<tr> <th>Select</th> <th>Item</th> <th>In Stock</th> <th>Favorite</th> <th>Details</th> <th>Qty</th> <th>Link</th> <th>Drop</th> </tr>
			</thead>
			<tbody>
				<tr>
					<td class="center">></td>
					<td></td>
					<td class="center"><input type="checkbox" tabindex="-1"></td>
					<td class="center"><input type="checkbox" tabindex="-1"></td>
					<td class="stretch"><input type="text" tabindex="-1"></td>
					<td class="stretch"><input type="number" min="0" value="0" tabindex="-1"></td>
					<td class="center"><a href='http://google.com' target='_blank' tabindex='-1'>link</a></td>
					<td class="stretch"><select tabindex="-1"><option>a</option><option>b</option></select></td>
				</tr>
			</tbody>
		</table>

		<label for="lblAfter">Text 2</label><input type="text" id="lblAfter">
	</div>

	<!-- Start_Exclude: This block is not part of the sample code -->
	<hr>
	<p class="sample-links  no_code">
		<a class="hideInsideFS" href="https://github.com/mar10/fancytree">jquery.fancytree.js project home</a>
		<a class="hideOutsideFS" href="#">Link to this page</a>
		<a class="hideInsideFS" href="index.html">Example Browser</a>
		<a href="#" id="codeExample">View source code</a>
	</p>
	<pre id="sourceCode" class="prettyprint" style="display:none"></pre>
	<!-- End_Exclude -->
</body>
</html>