RubyGems - polymer-iron-rails - Versions diffs - 1.0.0.pre.rc.1 - Mend

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

Files changed (610) hide show

data/app/assets/components/iron-menu-behavior/demo/simple-menu.html ADDED Viewed

@@ -0,0 +1,50 @@
+<!--
+@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-menu-behavior.html">
+<dom-module id="simple-menu">
+  <style>
+    .content ::content > .iron-selected {
+      color: red;
+    }
+  </style>
+  <template>
+    <div class="content">
+      <content></content>
+    </div>
+  </template>
+</dom-module>
+<script>
+(function() {
+  Polymer({
+    is: 'simple-menu',
+    behaviors: [
+      Polymer.IronMenuBehavior
+    ]
+  });
+})();
+</script>

data/app/assets/components/iron-menu-behavior/demo/simple-menubar.html ADDED Viewed

@@ -0,0 +1,54 @@
+<!--
+@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-menubar-behavior.html">
+<dom-module id="simple-menubar">
+  <style>
+    .content ::content > .iron-selected {
+      color: red;
+    }
+    .content ::content > * {
+      display: inline-block;
+    }
+  </style>
+  <template>
+    <div class="content">
+      <content></content>
+    </div>
+  </template>
+</dom-module>
+<script>
+(function() {
+  Polymer({
+    is: 'simple-menubar',
+    behaviors: [
+      Polymer.IronMenubarBehavior
+    ]
+  });
+})();
+</script>

data/app/assets/components/iron-menu-behavior/index.html ADDED Viewed

@@ -0,0 +1,30 @@
+<!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-menu-behavior</title>
+  <script src="../webcomponentsjs/webcomponents-lite.js"></script>
+  <link rel="import" href="../polymer/polymer.html">
+  <link rel="import" href="../iron-component-page/iron-component-page.html">
+</head>
+<body>
+  <iron-component-page src="iron-menubar-behavior.html"></iron-component-page>
+</body>
+</html>

data/app/assets/components/iron-menu-behavior/iron-menu-behavior.html ADDED Viewed

@@ -0,0 +1,214 @@
+<!--
+@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-selector/iron-multi-selectable.html">
+<link rel="import" href="../iron-a11y-keys-behavior/iron-a11y-keys-behavior.html">
+<script>
+  /**
+   * `Polymer.IronMenuBehavior` implements accessible menu behavior.
+   *
+   * @demo demo/index.html
+   * @polymerBehavior Polymer.IronMenuBehavior
+   */
+  Polymer.IronMenuBehaviorImpl = {
+    properties: {
+      /**
+       * Returns the currently focused item.
+       *
+       * @attribute focusedItem
+       * @type Object
+       */
+      focusedItem: {
+        observer: '_focusedItemChanged',
+        readOnly: true,
+        type: Object
+      },
+      /**
+       * The attribute to use on menu items to look up the item title. Typing the first
+       * letter of an item when the menu is open focuses that item. If unset, `textContent`
+       * will be used.
+       *
+       * @attribute attrForItemTitle
+       * @type String
+       */
+      attrForItemTitle: {
+        type: String
+      }
+    },
+    hostAttributes: {
+      'role': 'menu',
+      'tabindex': '0'
+    },
+    observers: [
+      '_updateMultiselectable(multi)'
+    ],
+    listeners: {
+      'focus': '_onFocus',
+      'keydown': '_onKeydown'
+    },
+    keyBindings: {
+      'up': '_onUpKey',
+      'down': '_onDownKey',
+      'esc': '_onEscKey',
+      'enter': '_onEnterKey',
+      'shift+tab:keydown': '_onShiftTabDown'
+    },
+    _updateMultiselectable: function(multi) {
+      if (multi) {
+        this.setAttribute('aria-multiselectable', 'true');
+      } else {
+        this.removeAttribute('aria-multiselectable');
+      }
+    },
+    _onShiftTabDown: function() {
+      var oldTabIndex;
+      Polymer.IronMenuBehaviorImpl._shiftTabPressed = true;
+      oldTabIndex = this.getAttribute('tabindex');
+      this.setAttribute('tabindex', '-1');
+      this.async(function() {
+        this.setAttribute('tabindex', oldTabIndex);
+        Polymer.IronMenuBehaviorImpl._shiftTabPressed = false;
+      // Note: polymer/polymer#1305
+      }, 1);
+    },
+    _applySelection: function(item, isSelected) {
+      if (isSelected) {
+        item.setAttribute('aria-selected', 'true');
+      } else {
+        item.removeAttribute('aria-selected');
+      }
+      Polymer.IronSelectableBehavior._applySelection.apply(this, arguments);
+    },
+    _focusedItemChanged: function(focusedItem, old) {
+      old && old.setAttribute('tabindex', '-1');
+      if (focusedItem) {
+        focusedItem.setAttribute('tabindex', '0');
+        focusedItem.focus();
+      }
+    },
+    select: function(value) {
+      if (this._defaultFocusAsync) {
+        this.cancelAsync(this._defaultFocusAsync);
+        this._defaultFocusAsync = null;
+      }
+      var item = this._valueToItem(value);
+      this._setFocusedItem(item);
+      Polymer.IronMultiSelectableBehaviorImpl.select.apply(this, arguments);
+    },
+    _onFocus: function(event) {
+      if (Polymer.IronMenuBehaviorImpl._shiftTabPressed) {
+        return;
+      }
+      // do not focus the menu itself
+      this.blur();
+      // clear the cached focus item
+      this._setFocusedItem(null);
+      this._defaultFocusAsync = this.async(function() {
+        // focus the selected item when the menu receives focus, or the first item
+        // if no item is selected
+        var selectedItem = this.multi ? (this.selectedItems && this.selectedItems[0]) : this.selectedItem;
+        if (selectedItem) {
+          this._setFocusedItem(selectedItem);
+        } else {
+          this._setFocusedItem(this.items[0]);
+        }
+      // async 100ms to wait for `select` to get called from `_itemActivate`
+      }, 100);
+    },
+    _onUpKey: function() {
+      // up and down arrows moves the focus
+      this._focusPrevious();
+    },
+    _onDownKey: function() {
+      this._focusNext();
+    },
+    _onEscKey: function() {
+      // esc blurs the control
+      this.focusedItem.blur();
+    },
+    _onEnterKey: function(event) {
+      // enter activates the item unless it is disabled
+      this._activateFocused(event.detail.keyboardEvent);
+    },
+    _onKeydown: function(event) {
+      if (this.keyboardEventMatchesKeys(event, 'up down esc enter')) {
+        return;
+      }
+      // all other keys focus the menu item starting with that character
+      this._focusWithKeyboardEvent(event);
+    },
+    _focusWithKeyboardEvent: function(event) {
+      for (var i = 0, item; item = this.items[i]; i++) {
+        var attr = this.attrForItemTitle || 'textContent';
+        var title = item[attr] || item.getAttribute(attr);
+        if (title && title.trim().charAt(0).toLowerCase() === String.fromCharCode(event.keyCode).toLowerCase()) {
+          this._setFocusedItem(item);
+          break;
+        }
+      }
+    },
+    _activateFocused: function(event) {
+      if (!this.focusedItem.hasAttribute('disabled')) {
+        this._activateHandler(event);
+      }
+    },
+    _focusPrevious: function() {
+      var length = this.items.length;
+      var index = (Number(this.indexOf(this.focusedItem)) - 1 + length) % length;
+      this._setFocusedItem(this.items[index]);
+    },
+    _focusNext: function() {
+      var index = (Number(this.indexOf(this.focusedItem)) + 1) % this.items.length;
+      this._setFocusedItem(this.items[index]);
+    }
+  };
+  Polymer.IronMenuBehaviorImpl._shiftTabPressed = false;
+  /** @polymerBehavior Polymer.IronMenuBehavior */
+  Polymer.IronMenuBehavior = [
+    Polymer.IronMultiSelectableBehavior,
+    Polymer.IronA11yKeysBehavior,
+    Polymer.IronMenuBehaviorImpl
+  ];
+</script>

data/app/assets/components/iron-menu-behavior/iron-menubar-behavior.html ADDED Viewed

@@ -0,0 +1,65 @@
+<!--
+@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-menu-behavior.html">
+<script>
+  /**
+   * `Polymer.IronMenubarBehavior` implements accessible menubar behavior.
+   *
+   * @polymerBehavior Polymer.IronMenubarBehavior
+   */
+  Polymer.IronMenubarBehaviorImpl = {
+    hostAttributes: {
+      'role': 'menubar'
+    },
+    keyBindings: {
+      'left': '_onLeftKey',
+      'right': '_onRightKey'
+    },
+    _onUpKey: function(event) {
+      this._activateFocused(event.detail.keyboardEvent);
+    },
+    _onDownKey: function(event) {
+      this._activateFocused(event.detail.keyboardEvent);
+    },
+    _onLeftKey: function() {
+      this._focusPrevious();
+    },
+    _onRightKey: function() {
+      this._focusNext();
+    },
+    _onKeydown: function(event) {
+      if (this.keyboardEventMatchesKeys(event, 'up down left right esc enter')) {
+        return;
+      }
+      // all other keys focus the menu item starting with that character
+      this._focusWithKeyboardEvent(event);
+    }
+  };
+  /** @polymerBehavior Polymer.IronMenubarBehavior */
+  Polymer.IronMenubarBehavior = [
+    Polymer.IronMenuBehavior,
+    Polymer.IronMenubarBehaviorImpl
+  ];
+</script>

data/app/assets/components/iron-menu-behavior/test/index.html ADDED Viewed

@@ -0,0 +1,35 @@
+<!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>
+    <title>iron-menu-behavior tests</title>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+    <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
+    <script src="../../web-component-tester/browser.js"></script>
+  </head>
+  <body>
+    <script>
+      WCT.loadSuites([
+        'iron-menu-behavior.html',
+        'iron-menubar-behavior.html'
+      ]);
+    </script>
+  </body>
+</html>

data/app/assets/components/iron-menu-behavior/test/iron-menu-behavior.html ADDED Viewed

@@ -0,0 +1,108 @@
+<!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>
+    <title>iron-menu-behavior tests</title>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+    <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
+    <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="../../test-fixture/test-fixture.html">
+    <link rel="import" href="test-menu.html">
+  </head>
+  <body>
+    <test-fixture id="basic">
+      <template>
+        <test-menu>
+          <div>item 1</div>
+          <div>item 2</div>
+          <div>item 3</div>
+        </test-menu>
+      </template>
+    </test-fixture>
+    <test-fixture id="multi">
+      <template>
+        <test-menu multi>
+          <div>item 1</div>
+          <div>item 2</div>
+          <div>item 3</div>
+        </test-menu>
+      </template>
+    </test-fixture>
+    <script>
+      suite('menu a11y tests', function() {
+        test('menu has role="menu"', function() {
+          var menu = fixture('basic');
+          assert.equal(menu.getAttribute('role'), 'menu', 'has role="menu"');
+        });
+        test('first item gets focus when menu is focused', function(done) {
+          var menu = fixture('basic');
+          menu.focus();
+          setTimeout(function() {
+            assert.equal(document.activeElement, menu.firstElementChild, 'document.activeElement is first item')
+            done();
+          // wait for async in _onFocus
+          }, 200);
+        });
+        test('selected item gets focus when menu is focused', function(done) {
+          var menu = fixture('basic');
+          menu.selected = 1;
+          menu.focus();
+          setTimeout(function() {
+            assert.equal(document.activeElement, menu.selectedItem, 'document.activeElement is selected item');
+            done();
+          // wait for async in _onFocus
+          }, 200);
+        });
+        test('last activated item in a multi select menu is focused', function(done) {
+          var menu = fixture('multi');
+          menu.selected = 0;
+          menu.items[1].click();
+          setTimeout(function() {
+            assert.equal(document.activeElement, menu.items[1], 'document.activeElement is last activated item');
+            done();
+          // wait for async in _onFocus
+          }, 200);
+        });
+        test('deselection in a multi select menu focuses deselected item', function(done) {
+          var menu = fixture('multi');
+          menu.selected = 0;
+          menu.items[0].click();
+          setTimeout(function() {
+            assert.equal(document.activeElement, menu.items[0], 'document.activeElement is last activated item');
+            done();
+          // wait for async in _onFocus
+          }, 200);
+        });
+      });
+    </script>
+  </body>
+</html>

data/app/assets/components/iron-menu-behavior/test/iron-menubar-behavior.html ADDED Viewed

@@ -0,0 +1,108 @@
+<!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>
+    <title>iron-menubar-behavior tests</title>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+    <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
+    <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="../../test-fixture/test-fixture.html">
+    <link rel="import" href="test-menubar.html">
+  </head>
+  <body>
+    <test-fixture id="basic">
+      <template>
+        <test-menubar>
+          <div>item 1</div>
+          <div>item 2</div>
+          <div>item 3</div>
+        </test-menubar>
+      </template>
+    </test-fixture>
+    <test-fixture id="multi">
+      <template>
+        <test-menubar multi>
+          <div>item 1</div>
+          <div>item 2</div>
+          <div>item 3</div>
+        </test-menubar>
+      </template>
+    </test-fixture>
+    <script>
+      suite('menubar a11y tests', function() {
+        test('menubar has role="menubar"', function() {
+          var menubar = fixture('basic');
+          assert.equal(menubar.getAttribute('role'), 'menubar', 'has role="menubar"');
+        });
+        test('first item gets focus when menubar is focused', function(done) {
+          var menubar = fixture('basic');
+          menubar.focus();
+          setTimeout(function() {
+            assert.equal(document.activeElement, menubar.firstElementChild, 'document.activeElement is first item')
+            done();
+          // wait for async in _onFocus
+          }, 200);
+        });
+        test('selected item gets focus when menubar is focused', function(done) {
+          var menubar = fixture('basic');
+          menubar.selected = 1;
+          menubar.focus();
+          setTimeout(function() {
+            assert.equal(document.activeElement, menubar.selectedItem, 'document.activeElement is selected item');
+            done();
+          // wait for async in _onFocus
+          }, 200);
+        });
+        test('last activated item in a multi select menubar is focused', function(done) {
+          var menubar = fixture('multi');
+          menubar.selected = 0;
+          menubar.items[1].click();
+          setTimeout(function() {
+            assert.equal(document.activeElement, menubar.items[1], 'document.activeElement is last activated item');
+            done();
+          // wait for async in _onFocus
+          }, 200);
+        });
+        test('deselection in a multi select menubar focuses deselected item', function(done) {
+          var menubar = fixture('multi');
+          menubar.selected = 0;
+          menubar.items[0].click();
+          setTimeout(function() {
+            assert.equal(document.activeElement, menubar.items[0], 'document.activeElement is last activated item');
+            done();
+          // wait for async in _onFocus
+          }, 200);
+        });
+      });
+    </script>
+  </body>
+</html>