polymer-iron-rails 1.0.0.pre.rc.1

data/app/assets/components/iron-a11y-keys/iron-a11y-keys.html

@@ -0,0 +1,121 @@
+<!--
+@license
+Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
+This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE
+The complete set of authors may be found at http://polymer.github.io/AUTHORS
+The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS
+Code distributed by Google as part of the polymer project is also
+subject to an additional IP rights grant found at http://polymer.github.io/PATENTS
+-->
+
+<link rel="import" href="../polymer/polymer.html">
+<link rel="import" href="../iron-a11y-keys-behavior/iron-a11y-keys-behavior.html">
+
+
+<script>
+
+/*
+`iron-a11y-keys` provides a normalized interface for processing keyboard commands that pertain to [WAI-ARIA best
+practices](http://www.w3.org/TR/wai-aria-practices/#kbd_general_binding). The element takes care of browser differences
+with respect to Keyboard events and uses an expressive syntax to filter key presses.
+
+Use the `keys` attribute to express what combination of keys will trigger the event to fire.
+
+Use the `target` attribute to set up event handlers on a specific node.
+The `keys-pressed` event will fire when one of the key combinations set with the `keys` attribute is pressed.
+
+Example:
+
+This element will call `arrowHandler` on all arrow keys:
+
+    <iron-a11y-keys target="{{}}" keys="up down left right" on-keys-pressed="{{arrowHandler}}"></iron-a11y-keys>
+
+Keys Syntax:
+
+The `keys` attribute can accepts a space seprated, `+` concatenated set of modifier keys and some common keyboard keys.
+
+The common keys are `a-z`, `0-9` (top row and number pad), `*` (shift 8 and number pad), `F1-F12`, `Page Up`, `Page
+Down`, `Left Arrow`, `Right Arrow`, `Down Arrow`, `Up Arrow`, `Home`, `End`, `Escape`, `Space`, `Tab`, and `Enter` keys.
+
+The modifier keys are `Shift`, `Control`, and `Alt`.
+
+All keys are expected to be lowercase and shortened:
+`Left Arrow` is `left`, `Page Down` is `pagedown`, `Control` is `ctrl`, `F1` is `f1`, `Escape` is `esc` etc.
+
+Keys Syntax Example:
+
+Given the `keys` attribute value "ctrl+shift+f7 up pagedown esc space alt+m", the `<iron-a11y-keys>` element will send
+the `keys-pressed` event if any of the follow key combos are pressed: Control and Shift and F7 keys, Up Arrow key, Page
+Down key, Escape key, Space key, Alt and M key.
+
+Slider Example:
+
+The following is an example of the set of keys that fulfil the WAI-ARIA "slider" role [best
+practices](http://www.w3.org/TR/wai-aria-practices/#slider):
+
+    <iron-a11y-keys target="{{}}" keys="left pagedown down" on-keys-pressed="{{decrement}}"></iron-a11y-keys>
+    <iron-a11y-keys target="{{}}" keys="right pageup up" on-keys-pressed="{{increment}}"></iron-a11y-keys>
+    <iron-a11y-keys target="{{}}" keys="home" on-keys-pressed="{{setMin}}"></iron-a11y-keys>
+    <iron-a11y-keys target="{{}}" keys="end" on-keys-pressed="{{setMax}}"></iron-a11y-keys>
+
+The `increment` function will move the slider a set amount toward the maximum value.
+The `decrement` function will move the slider a set amount toward the minimum value.
+The `setMin` function will move the slider to the minimum value.
+The `setMax` function will move the slider to the maximum value.
+
+Keys Syntax Grammar:
+
+[EBNF](http://en.wikipedia.org/wiki/Extended_Backus%E2%80%93Naur_Form) Grammar of the `keys` attribute.
+
+    modifier = "shift" | "ctrl" | "alt";
+    ascii = ? /[a-z0-9]/ ? ;
+    fnkey = ? f1 through f12 ? ;
+    arrow = "up" | "down" | "left" | "right" ;
+    key = "tab" | "esc" | "space" | "*" | "pageup" | "pagedown" | "home" | "end" | arrow | ascii | fnkey ;
+    keycombo = { modifier, "+" }, key ;
+    keys = keycombo, { " ", keycombo } ;
+
+@demo demo/index.html
+*/
+
+
+  Polymer({
+    is: 'iron-a11y-keys',
+
+    behaviors: [
+      Polymer.IronA11yKeysBehavior
+    ],
+
+    properties: {
+      target: {
+        type: Object,
+        observer: '_targetChanged'
+      },
+
+      keys: {
+        type: String,
+        reflectToAttribute: true,
+        observer: '_keysChanged'
+      }
+    },
+
+    attached: function() {
+      if (!this.target) {
+        this.target = this.parentNode;
+      }
+    },
+
+    _targetChanged: function(target) {
+      this.keyEventTarget = target;
+    },
+
+    _keysChanged: function() {
+      this.removeOwnKeyBindings();
+      this.addOwnKeyBinding(this.keys, '_fireKeysPressed');
+    },
+
+    _fireKeysPressed: function(event) {
+      this.fire('keys-pressed', event.detail, {});
+    }
+  });
+</script>

data/app/assets/components/iron-a11y-keys/test/basic-test.html

@@ -0,0 +1,122 @@
+<!doctype html>
+<!--
+@license
+Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
+This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
+The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
+The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
+Code distributed by Google as part of the polymer project is also
+subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
+-->
+<html>
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
+  <title>iron-a11y-keys</title>
+
+  <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
+  <script src="../../web-component-tester/browser.js"></script>
+  <script src="../../test-fixture/test-fixture-mocha.js"></script>
+
+
+  <link rel="import" href="../../iron-test-helpers/iron-test-helpers.html">
+  <link rel="import" href="../../test-fixture/test-fixture.html">
+  <link rel="import" href="../iron-a11y-keys.html">
+</head>
+<body>
+
+  <test-fixture id="BasicKeys">
+    <template>
+      <iron-a11y-keys></iron-a11y-keys>
+    </template>
+  </test-fixture>
+
+  <script>
+    suite('<iron-a11y-keys>', function() {
+      var keys;
+
+      setup(function() {
+        keys = fixture('BasicKeys');
+      });
+
+      test('target is parentNode by default', function() {
+        expect(keys.target).to.be.equal(keys.parentNode);
+      });
+
+      suite('keys attribute', function() {
+        test('causes an event listener to be added', function(done) {
+          keys.keys = 'space';
+
+          keys.addEventListener('keys-pressed', function() {
+            done();
+          });
+
+          Polymer.Base.async(function() {
+            MockInteractions.pressSpace(keys.parentNode);
+          });
+        });
+
+        test('will not trigger events for non-specified keys', function() {
+          var keysPressedCount = 0;
+
+          keys.keys = 'space';
+
+          keys.addEventListener('keys-pressed', function() {
+            keysPressedCount++;
+          });
+
+          MockInteractions.pressSpace(keys.parentNode);
+          MockInteractions.pressEnter(keys.parentNode);
+
+          expect(keysPressedCount).to.be.equal(1);
+        });
+
+        test('triggers events for space separated keys', function() {
+          var keysPressed = '';
+
+          keys.keys = 'a b c';
+
+          keys.addEventListener('keys-pressed', function(event) {
+            keysPressed += event.detail.key;
+          });
+
+          MockInteractions.pressAndReleaseKeyOn(keys.parentNode, 65);
+          MockInteractions.pressAndReleaseKeyOn(keys.parentNode, 66);
+          MockInteractions.pressAndReleaseKeyOn(keys.parentNode, 67);
+
+          expect(keysPressed).to.be.equal('abc');
+        });
+      });
+
+      suite('event listeners', function() {
+        test('listeners are only active when element is in document', function() {
+          var keysPressedCount = 0;
+          var parent = keys.parentNode;
+
+          keys.keys = 'space';
+
+          keys.addEventListener('keys-pressed', function(event) {
+            keysPressedCount++;
+          });
+
+          MockInteractions.pressSpace(parent);
+          expect(keysPressedCount).to.be.equal(1);
+
+          keys.parentNode.removeChild(keys);
+          TestHelpers.flushAsynchronousOperations();
+
+          MockInteractions.pressSpace(parent);
+          expect(keysPressedCount).to.be.equal(1);
+
+          parent.appendChild(keys);
+          TestHelpers.flushAsynchronousOperations();
+
+          MockInteractions.pressSpace(parent);
+          expect(keysPressedCount).to.be.equal(2);
+        });
+      });
+    });
+  </script>
+
+</body>
+</html>

data/app/assets/components/iron-a11y-keys/test/index.html

@@ -0,0 +1,29 @@
+<!--
+@license
+Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
+This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
+The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
+The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
+Code distributed by Google as part of the polymer project is also
+subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
+-->
+<!doctype html>
+<html>
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
+    <title>Tests</title>
+
+    <script src="../../webcomponentsjs/webcomponents.js"></script>
+    <script src="../../web-component-tester/browser.js"></script>
+  </head>
+
+  <body>
+    <script>
+      // Load and run all tests (.html, .js) as one suite:
+      WCT.loadSuites([
+        'basic-test.html',
+      ]);
+    </script>
+  </body>
+</html>

data/app/assets/components/iron-a11y-keys-behavior/README.md

@@ -0,0 +1,15 @@
+iron-a11y-keys-behavior
+=======================
+
+`Polymer.IronA11yKeysBehavior` provides a normalized interface for processing
+keyboard commands that pertain to [WAI-ARIA best practices](http://www.w3.org/TR/wai-aria-practices/#kbd_general_binding).
+The element takes care of browser differences with respect to Keyboard events
+and uses an expressive syntax to filter key presses.
+
+Use the `keyBindings` prototype property to express what combination of keys
+will trigger the event to fire.
+
+Use the `key-event-target` attribute to set up event handlers on a specific
+node.
+The `keys-pressed` event will fire when one of the key combinations set with the
+`keys` property is pressed.

data/app/assets/components/iron-a11y-keys-behavior/bower.json

@@ -0,0 +1,27 @@
+{
+  "name": "iron-a11y-keys-behavior",
+  "version": "1.0.0",
+  "description": "A behavior that enables keybindings for greater a11y.",
+  "keywords": [
+    "web-components",
+    "web-component",
+    "polymer",
+    "a11y",
+    "input"
+  ],
+  "authors": [
+    "The Polymer Authors"
+  ],
+  "main": "iron-a11y-keys-behavior.html",
+  "license": "http://polymer.github.io/LICENSE.txt",
+  "dependencies": {
+    "polymer": "Polymer/polymer#^1.0.0"
+  },
+  "devDependencies": {
+    "iron-component-page": "polymerelements/iron-component-page#^1.0.0",
+    "iron-test-helpers": "polymerelements/iron-test-helpers#^1.0.0",
+    "test-fixture": "polymerelements/test-fixture#^1.0.0",
+    "web-component-tester": "*",
+    "webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
+  }
+}

data/app/assets/components/iron-a11y-keys-behavior/demo/index.html

@@ -0,0 +1,21 @@
+<!doctype html>
+<!--
+@license
+Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
+This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
+The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
+The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
+Code distributed by Google as part of the polymer project is also
+subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
+-->
+<html>
+<head>
+  <meta charset="UTF-8">
+  <title>Iron A11y Keys Behavior demo</title>
+  <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
+  <link rel="import" href="x-key-aware.html">
+</head>
+<body>
+  <x-key-aware></x-key-aware>
+</body>
+</html>

data/app/assets/components/iron-a11y-keys-behavior/demo/x-key-aware.html

@@ -0,0 +1,69 @@
+<!--
+@license
+Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
+This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
+The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
+The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
+Code distributed by Google as part of the polymer project is also
+subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
+-->
+
+<link rel="import" href="../../polymer/polymer.html">
+<link rel="import" href="../iron-a11y-keys-behavior.html">
+
+<dom-module id="x-key-aware">
+  <style>
+    :host {
+      display: block;
+      position: relative;
+    }
+  </style>
+  <template>
+    <span>Press any of these keys: <span>[[boundKeys]]</span></span>
+    <pre id="output">[[pressed]]</pre>
+  </template>
+</dom-module>
+
+<script>
+  Polymer({
+    is: 'x-key-aware',
+
+    behaviors: [
+      Polymer.IronA11yKeysBehavior
+    ],
+
+    properties: {
+      pressed: {
+        type: String,
+        readOnly: true,
+        value: ''
+      },
+
+      boundKeys: {
+        type: String,
+        value: function() {
+          return Object.keys(this.keyBindings).pop();
+        }
+      },
+
+      keyEventTarget: {
+        type: Object,
+        value: function() {
+          return document.body;
+        }
+      }
+    },
+
+    keyBindings: {
+      '* pageup pagedown left right down up shift+a alt+a home end space enter': '_updatePressed'
+    },
+
+    _updatePressed: function(event) {
+      console.log(event.detail);
+
+      this._setPressed(
+        this.pressed + event.detail.combo + ' pressed!\n'
+      );
+    }
+  });
+</script>

data/app/assets/components/iron-a11y-keys-behavior/index.html

@@ -0,0 +1,24 @@
+<!doctype html>
+<!--
+@license
+Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
+This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE
+The complete set of authors may be found at http://polymer.github.io/AUTHORS
+The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS
+Code distributed by Google as part of the polymer project is also
+subject to an additional IP rights grant found at http://polymer.github.io/PATENTS
+-->
+<html>
+<head>
+
+  <title>iron-a11y-keys-behavior</title>
+  <script src="../webcomponentsjs/webcomponents-lite.js"></script>
+  <link rel="import" href="../iron-component-page/iron-component-page.html">
+
+</head>
+<body>
+
+  <iron-component-page></iron-component-page>
+
+</body>
+</html>