removed keypress events for treeview examples

* removed keypress events * Addresses issue #249 for treeview examples.
w3c · Jan 31, 2017 · 69a36ff · 69a36ff
1 parent 502ddd8
commit 69a36ff
Show file tree

Hide file tree

Showing 6 changed files with 45 additions and 48 deletions.
diff --git a/examples/treeview/treeview-1/js/treeitem.js b/examples/treeview/treeview-1/js/treeitem.js
@@ -81,7 +81,6 @@ Treeitem.prototype.init = function () {
   }
 
   this.domNode.addEventListener('keydown', this.handleKeydown.bind(this));
-  this.domNode.addEventListener('keypress', this.handleKeypress.bind(this));
   this.domNode.addEventListener('click', this.handleClick.bind(this));
   this.domNode.addEventListener('focus', this.handleFocus.bind(this));
   this.domNode.addEventListener('blur', this.handleBlur.bind(this));
@@ -105,9 +104,15 @@ Treeitem.prototype.isExpanded = function () {
 /* EVENT HANDLERS */
 
 Treeitem.prototype.handleKeydown = function (event) {
+
   var tgt = event.currentTarget,
       flag = false,
- clickEvent;
+      char = event.key,
+      clickEvent;
+
+  function isPrintableCharacter (str) {
+    return str.length === 1 && str.match(/\S/);
+  }
 
   switch (event.keyCode) {
     case this.keyCode.SPACE:
@@ -167,6 +172,18 @@ Treeitem.prototype.handleKeydown = function (event) {
       break;
 
     default:
+
+      if (char == '*') {
+        this.tree.expandAllSiblingItems(this);
+        flag = true;
+      }
+      else {
+        if (isPrintableCharacter(char)) {
+          this.tree.setFocusByFirstCharacter(this, char);
+          flag = true;
+        }
+      }
+
       break;
   }
 
@@ -176,26 +193,6 @@ Treeitem.prototype.handleKeydown = function (event) {
   }
 };
 
-Treeitem.prototype.handleKeypress = function (event) {
-  var char = String.fromCharCode(event.charCode);
-
-  function isPrintableCharacter (str) {
-    return str.length === 1 && str.match(/\S/);
-  }
-
-  if (char == '*') {
-    this.tree.expandAllSiblingItems(this);
-  }
-  else {
-    if (isPrintableCharacter(char)) {
-      this.tree.setFocusByFirstCharacter(this, char);
-      event.stopPropagation();
-      event.preventDefault();
-    }
-  }
-
-};
-
 Treeitem.prototype.handleClick = function (event) {
   if (this.isExpandable) {
     if (this.domNode.getAttribute('aria-expanded') == 'true') {

diff --git a/examples/treeview/treeview-2/css/treeLinks.css b/examples/treeview/treeview-2/css/treeLinks.css
@@ -23,11 +23,17 @@ ul[role="tree"] a {
 }
 
 [role="treeitem"][aria-expanded="false"] > span:before {
-  content: url(../images/collapsed-16.png);
+  content: "\00229E \0000A0";
+  color: #630;
+  font-weight: bold;
+  font-size: 1em;
 }
 
 [role="treeitem"][aria-expanded="true"] > span:before {
-  content: url(../images/expanded-16.png);
+  content: "\00229F \0000A0";
+  color: #630;
+  font-weight: bold;
+  font-size: 1.1em;
 }
 
 [role="treeitem"],

diff --git a/examples/treeview/treeview-2/images/collapsed-16.png b/examples/treeview/treeview-2/images/collapsed-16.png
diff --git a/examples/treeview/treeview-2/images/expanded-16.png b/examples/treeview/treeview-2/images/expanded-16.png
diff --git a/examples/treeview/treeview-2/js/treeitemClick.js b/examples/treeview/treeview-2/js/treeitemClick.js
@@ -28,8 +28,6 @@ window.addEventListener('load', function () {
         label = treeitem.innerHTML;
       }
 
-      document.getElementById('last_action').value = label.trim();
-
       event.stopPropagation();
       event.preventDefault();
     });

diff --git a/examples/treeview/treeview-2/js/treeitemLinks.js b/examples/treeview/treeview-2/js/treeitemLinks.js
@@ -81,7 +81,6 @@ TreeitemLink.prototype.init = function () {
   }
 
   this.domNode.addEventListener('keydown', this.handleKeydown.bind(this));
-  this.domNode.addEventListener('keypress', this.handleKeypress.bind(this));
   this.domNode.addEventListener('click', this.handleClick.bind(this));
   this.domNode.addEventListener('focus', this.handleFocus.bind(this));
   this.domNode.addEventListener('blur', this.handleBlur.bind(this));
@@ -111,7 +110,12 @@ TreeitemLink.prototype.isExpanded = function () {
 TreeitemLink.prototype.handleKeydown = function (event) {
   var tgt = event.currentTarget,
       flag = false,
- clickEvent;
+      char = event.key,
+      clickEvent;
+
+  function isPrintableCharacter (str) {
+    return str.length === 1 && str.match(/\S/);
+  }
 
   switch (event.keyCode) {
     case this.keyCode.SPACE:
@@ -171,6 +175,18 @@ TreeitemLink.prototype.handleKeydown = function (event) {
       break;
 
     default:
+
+      if (char == '*') {
+        this.tree.expandAllSiblingItems(this);
+        flag = true;
+      }
+      else {
+        if (isPrintableCharacter(char)) {
+          this.tree.setFocusByFirstCharacter(this, char);
+          flag = true;
+        }
+      }
+
       break;
   }
 
@@ -180,26 +196,6 @@ TreeitemLink.prototype.handleKeydown = function (event) {
   }
 };
 
-TreeitemLink.prototype.handleKeypress = function (event) {
-  var char = String.fromCharCode(event.charCode);
-
-  function isPrintableCharacter (str) {
-    return str.length === 1 && str.match(/\S/);
-  }
-
-  if (char == '*') {
-    this.tree.expandAllSiblingItems(this);
-  }
-  else {
-    if (isPrintableCharacter(char)) {
-      this.tree.setFocusByFirstCharacter(this, char);
-      event.stopPropagation();
-      event.preventDefault();
-    }
-  }
-
-};
-
 TreeitemLink.prototype.handleClick = function (event) {
   if (this.isExpandable) {
     if (this.domNode.getAttribute('aria-expanded') == 'true') {