Forráskód Böngészése

HUE-305. Cannot easily declare accesskeys for children of an HTMLTable. Allow simple declarative Keyboard shortcut creation from data-accesskey attributes.

* NEW Behavior.HtmlTableKeyboardKids -- an HtmlTable plugin
* Added comments. Refactored a bit.
* Jframe gallery
Thomas Aylott 15 éve
szülő
commit
0e6da3946c

+ 64 - 0
apps/jframegallery/src/jframegallery/templates/html-table.keyboard.kids.html

@@ -0,0 +1,64 @@
+<!DOCTYPE html>
+{% comment %} Licensed to Cloudera, Inc. under one or more contributor license agreements. See the NOTICE file distributed with this work for additional information regarding copyright ownership. Cloudera, Inc. licenses this file to you under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. {% endcomment %}
+<html>
+<head>
+	<title>HtmlTable KeyboardKids -- Define shortcuts for your HtmlTable</title>
+</head>
+<body>
+<div class="ccs-shared">
+
+	<h3>How to use:</h3>
+	<ol>
+		<li>Add the 'keyboardkids' className to the table to activate this plugin</li>
+		<li>Add <code>data-accesskey</code> attributes on descendants of the table's thead element</li>
+		<li>Include an <code>alt</code> or <code>title</code> attribute</li>
+	</ol>
+	<h3>Demo</h3>
+	<p>Select a row, then press "enter" or "delete" on your keyboard</p>
+	<p>Those keys are mapped to links</p>
+	<table data-filters="HtmlTable" class="multiselect selectable sortable keyboardkids" cellpadding="0" cellspacing="0">
+		<thead>
+			<tr>
+				<th>&nbsp;</th>
+				<th>TimeZone</th>
+				<th>Name</th>
+				<th>GEO Latitude</th>
+				<th>GEO Longitude</th>
+			</tr>
+			<tr>
+				<th colspan="6">
+					<center>
+						<a title="Edit the selected rows" href="post-load.alert.popup.html" data-accesskey="enter">Enter</a>
+						<a title="Delete the selected rows" href="post-load.alert.popup.html" data-accesskey="delete">Delete</a>
+					</center>
+				</th>
+			</tr>
+		</thead>
+		<tbody>
+			<tr>
+				<td><input type="checkbox"></td>
+				<td>New York City</td>
+				<td>America/New_York</td>
+				<td>40.7255</td>
+				<td>-73.9983</td>
+			</tr>
+			<tr>
+				<td><input type="checkbox"></td>
+				<td>San Francisco</td>
+				<td>America/Los_Angeles</td>
+				<td>37.7587</td>
+				<td>-122.433</td>
+			</tr>
+			<tr>
+				<td><input type="checkbox"></td>
+				<td>Boston</td>
+				<td>America/New_York</td>
+				<td>42.3583</td>
+				<td>-71.0603</td>
+			</tr>
+		</tbody>
+	</table>
+
+</div>
+</body>
+</html>

+ 90 - 0
desktop/core/static/js/Source/BehaviorFilters/Behavior.HtmlTableKeyboardKids.js

@@ -0,0 +1,90 @@
+// Licensed to Cloudera, Inc. under one
+// or more contributor license agreements.  See the NOTICE file
+// distributed with this work for additional information
+// regarding copyright ownership.  Cloudera, Inc. licenses this file
+// to you under the Apache License, Version 2.0 (the
+// "License"); you may not use this file except in compliance
+// with the License.  You may obtain a copy of the License at
+//
+//     http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+/*
+---
+description: Adds support for children of an HtmlTable to declare keyboard shortcuts
+provides: [Behavior.HtmlTableKeyboardKids]
+requires: [Widgets/Behavior.HtmlTable]
+script: Behavior.HtmlTableKeyboardKids.js
+...
+*/
+;(function(){
+
+function buildShortcutForElement(shortcutElement, attrMap, shortcutMap){
+	/*
+		shortcutElement     -- the element that defines this shortcut
+		attrMap             -- object that maps the attribute to get the keys value from
+		attrMap.keys        -- string to use to lookup the `keys` attribute for ths shortcut
+		attrMap.description -- string to use to lookup the `description` attribute for ths shortcut
+		attrMap.handler     -- function to call when the shortcut event gets triggered.
+		                         function(event, shortcutElement){ Cf. Keyboard for more info }
+		                         Note: This function is loosely referenced by key,
+		                           Changing attrMap.handler instantly updates the shortcut handler.
+		shortcutMap         -- (optional) an existing object to append to
+	*/
+	if (!shortcutMap) shortcutMap = {};
+	var shortcutObject = {};
+	shortcutObject.keys = shortcutElement.get(attrMap.keys || 'data-accesskey');
+	// Don't add this shortcut if there's no `keys`
+	if (!shortcutObject.keys) return shortcutMap;
+	shortcutObject.description = shortcutElement.get(attrMap.description || 'title') || shortcutElement.get('alt');
+	shortcutObject.handler = function(event){
+		// delay to work around an issue where...
+		//   keydown triggers this & another action
+		//   keyup then may trigger a third action unexpectedly
+		//   this delay works around unintentionally triggering that third action
+		//   by allowing some time for the first action to be completely handled
+		attrMap.handler.delay(100, this, [event, shortcutElement]);
+	};
+	shortcutMap[shortcutElement.get(attrMap.name || 'text')] = shortcutObject;
+	return shortcutMap;
+}
+
+function buildShortcuts(shortcutElements, attrMap, shortcutMap){
+	// Same as buildShortcutForElement,
+	//   but it takes an array-like object of elements instead of a single element
+	if (!shortcutMap) shortcutMap = {};
+	for (var i = -1, el; el = shortcutElements[++i];){
+		buildShortcutForElement(el, attrMap, shortcutMap)
+	}
+	return shortcutMap;
+}
+
+Behavior.addGlobalPlugin('HtmlTable', 'HtmlTableKeyboardKids', function(htmlTableElement, behaviorAPI){
+	// Since every HtmlTable Behavior GlobalPlugin runs for every HtmlTable instance,
+	//   we need to limit this plugin to only those instances that opt-in
+	if (!(htmlTableElement && htmlTableElement.hasClass('keyboardkids'))) return;
+	var htmlTable = htmlTableElement.retrieve('HtmlTable');
+	if (!htmlTable) return;
+	var keyboard = htmlTable.keyboard;
+	if (!keyboard) return;
+
+	keyboard.addShortcuts(
+		buildShortcuts(
+			htmlTableElement.getElements('thead [data-accesskey]'),
+			{
+				name: 'text',
+				keys: 'data-accesskey',
+				description: 'title',
+				handler: function(event, shortcutElement) {
+					behaviorAPI.callClick(event, shortcutElement, true);
+				}
+			}
+		)
+	);
+});
+
+}());

+ 1 - 0
desktop/core/static/js/Source/CCS/CCS.JFrame.js

@@ -46,6 +46,7 @@ requires:
  - /Behavior.HtmlTableCheckSelected
  - /Behavior.HtmlTableChromeHack
  - /Behavior.HtmlTableKeyboard
+ - /Behavior.HtmlTableKeyboardKids
  - /Behavior.HtmlTableLiveTreeKeyboard
  - /Behavior.HtmlTableMultiSelectMenu
  - /Behavior.HtmlTableRestore

+ 1 - 0
desktop/core/static/js/package.yml

@@ -70,6 +70,7 @@ sources: [
   Source/BehaviorFilters/Behavior.HtmlTableCheckSelected.js,
   Source/BehaviorFilters/Behavior.HtmlTableChromeHack.js,
   Source/BehaviorFilters/Behavior.HtmlTableKeyboard.js,
+  Source/BehaviorFilters/Behavior.HtmlTableKeyboardKids.js,
   Source/BehaviorFilters/Behavior.HtmlTableLiveTreeKeyboard.js,
   Source/BehaviorFilters/Behavior.HtmlTableMultiSelectMenu.js,
   Source/BehaviorFilters/Behavior.HtmlTableRestore.js,