Default target to parentNode

Wait for `attached` callback to get the right context for parentNode. Refactor demo to be more descriptive. Fixes #4 If target is not provided, default to parentNode
googlearchive · Oct 15, 2014 · d97e88d · d97e88d
1 parent abda085
commit d97e88d
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 6 deletions.
diff --git a/core-a11y-keys.html b/core-a11y-keys.html
@@ -292,6 +292,9 @@
         this._keyHandler = processKeys.bind(this);
       },
       attached: function() {
+        if (!this.target) {
+          this.target = this.parentNode;
+        }
         listen(this.target, this._keyHandler);
       },
       detached: function() {
@@ -308,10 +311,11 @@
         keys: '',
         /**
          * The node that will fire keyboard events.
+         * Default to this element's parentNode unless one is assigned
          *
          * @attribute target
          * @type Node
-         * @default null
+         * @default this.parentNode
          */
         target: null
       },

diff --git a/demo.html b/demo.html
@@ -14,22 +14,23 @@
   <title>Core A11y Keys demo</title>
   <script src="../webcomponentsjs/webcomponents.js"></script>
   <link rel="import" href="core-a11y-keys.html">
-</head>
-<body>
-  <template is="auto-binding">
   <style>
     div {
       height: 100px;
       width: 100px;
       background: gray;
     }
   </style>
-    <core-a11y-keys id="a11y" keys="* pageup pagedown left right down up shift+a alt+a home end" target="{{$.target}}" on-keys-pressed="{{print}}"></core-a11y-keys>
-    <div id="target" tabindex="0">focus this</div>
+</head>
+<body>
+  <template is="auto-binding">
+    <span>Press any of these keys: {{keys}}</span>
+    <core-a11y-keys id="a11y" keys="{{keys}}" on-keys-pressed="{{print}}"></core-a11y-keys>
     <pre id="output"></pre>
   </template>
   <script>
     addEventListener('template-bound', function(ev) {
+      ev.target.keys = "* pageup pagedown left right down up shift+a alt+a home end space enter"
       ev.target.print = function(ev) {
         console.log(ev.detail);
         this.$.output.textContent += ev.detail.key + ' pressed!\n';