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-behaviors/index.html ADDED Viewed

@@ -0,0 +1,27 @@
+<!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 Behaviors</title>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <script src="../webcomponentsjs/webcomponents-lite.js"></script>
+  <link rel="import" href="../iron-component-page/iron-component-page.html">
+</head>
+<body>
+  <iron-component-page src="iron-button-state.html"></iron-component-page>
+</body>
+</html>

data/app/assets/components/iron-behaviors/iron-button-state.html ADDED Viewed

@@ -0,0 +1,195 @@
+<!--
+@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/iron-a11y-keys-behavior.html">
+<link rel="import" href="iron-control-state.html">
+<script>
+  /** @polymerBehavior Polymer.IronButtonState */
+  Polymer.IronButtonStateImpl = {
+    properties: {
+      /**
+       * If true, the user is currently holding down the button.
+       *
+       * @attribute pressed
+       * @type boolean
+       * @default false
+       */
+      pressed: {
+        type: Boolean,
+        readOnly: true,
+        value: false,
+        reflectToAttribute: true,
+        observer: '_pressedChanged'
+      },
+      /**
+       * If true, the button toggles the active state with each tap or press
+       * of the spacebar.
+       *
+       * @attribute toggles
+       * @type boolean
+       * @default false
+       */
+      toggles: {
+        type: Boolean,
+        value: false,
+        reflectToAttribute: true
+      },
+      /**
+       * If true, the button is a toggle and is currently in the active state.
+       *
+       * @attribute active
+       * @type boolean
+       * @default false
+       */
+      active: {
+        type: Boolean,
+        value: false,
+        notify: true,
+        reflectToAttribute: true,
+        observer: '_activeChanged'
+      },
+      /**
+       * True if the element is currently being pressed by a "pointer," which
+       * is loosely defined as mouse or touch input (but specifically excluding
+       * keyboard input).
+       */
+      pointerDown: {
+        type: Boolean,
+        readOnly: true,
+        value: false
+      },
+      /**
+       * True if the input device that caused the element to receive focus
+       * was a keyboard.
+       */
+      receivedFocusFromKeyboard: {
+        type: Boolean,
+        readOnly: true
+      }
+    },
+    listeners: {
+      down: '_downHandler',
+      up: '_upHandler',
+      tap: '_tapHandler'
+    },
+    observers: [
+      '_detectKeyboardFocus(focused)'
+    ],
+    keyBindings: {
+      'enter:keydown': '_asyncClick',
+      'space:keydown': '_spaceKeyDownHandler',
+      'space:keyup': '_spaceKeyUpHandler',
+    },
+    _tapHandler: function() {
+      if (this.toggles) {
+       // a tap is needed to toggle the active state
+        this._userActivate(!this.active);
+      } else {
+        this.active = false;
+      }
+    },
+    _detectKeyboardFocus: function(focused) {
+      this._setReceivedFocusFromKeyboard(!this.pointerDown && focused);
+    },
+    // to emulate native checkbox, (de-)activations from a user interaction fire
+    // 'change' events
+    _userActivate: function(active) {
+      this.active = active;
+      this.fire('change');
+    },
+    _downHandler: function() {
+      this._setPointerDown(true);
+      this._setPressed(true);
+      this._setReceivedFocusFromKeyboard(false);
+    },
+    _upHandler: function() {
+      this._setPointerDown(false);
+      this._setPressed(false);
+    },
+    _spaceKeyDownHandler: function(event) {
+      var keyboardEvent = event.detail.keyboardEvent;
+      keyboardEvent.preventDefault();
+      keyboardEvent.stopImmediatePropagation();
+      this._setPressed(true);
+    },
+    _spaceKeyUpHandler: function() {
+      if (this.pressed) {
+        this._asyncClick();
+      }
+      this._setPressed(false);
+    },
+    // trigger click asynchronously, the asynchrony is useful to allow one
+    // event handler to unwind before triggering another event
+    _asyncClick: function() {
+      this.async(function() {
+        this.click();
+      }, 1);
+    },
+    // any of these changes are considered a change to button state
+    _pressedChanged: function(pressed) {
+      this._changedButtonState();
+    },
+    _activeChanged: function(active) {
+      if (this.toggles) {
+        this.setAttribute('aria-pressed', active ? 'true' : 'false');
+      } else {
+        this.removeAttribute('aria-pressed');
+      }
+      this._changedButtonState();
+    },
+    _controlStateChanged: function() {
+      if (this.disabled) {
+        this._setPressed(false);
+      } else {
+        this._changedButtonState();
+      }
+    },
+    // provide hook for follow-on behaviors to react to button-state
+    _changedButtonState: function() {
+      if (this._buttonStateChanged) {
+        this._buttonStateChanged(); // abstract
+      }
+    }
+  };
+  /** @polymerBehavior Polymer.IronButtonState */
+  Polymer.IronButtonState = [
+    Polymer.IronA11yKeysBehavior,
+    Polymer.IronButtonStateImpl
+  ];
+</script>

data/app/assets/components/iron-behaviors/iron-control-state.html ADDED Viewed

@@ -0,0 +1,102 @@
+<!--
+@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">
+<script>
+  /** @polymerBehavior */
+  Polymer.IronControlState = {
+    properties: {
+      /**
+       * If true, the element currently has focus.
+       *
+       * @attribute focused
+       * @type boolean
+       * @default false
+       */
+      focused: {
+        type: Boolean,
+        value: false,
+        notify: true,
+        readOnly: true,
+        reflectToAttribute: true
+      },
+      /**
+       * If true, the user cannot interact with this element.
+       *
+       * @attribute disabled
+       * @type boolean
+       * @default false
+       */
+      disabled: {
+        type: Boolean,
+        value: false,
+        notify: true,
+        observer: '_disabledChanged',
+        reflectToAttribute: true
+      },
+      _oldTabIndex: {
+        type: Number
+      }
+    },
+    observers: [
+      '_changedControlState(focused, disabled)'
+    ],
+    listeners: {
+      focus: '_focusHandler',
+      blur: '_blurHandler'
+    },
+    ready: function() {
+      // TODO(sjmiles): ensure read-only property is valued so the compound
+      // observer will fire
+      if (this.focused === undefined) {
+        this._setFocused(false);
+      }
+    },
+    _focusHandler: function() {
+      this._setFocused(true);
+    },
+    _blurHandler: function() {
+      this._setFocused(false);
+    },
+    _disabledChanged: function(disabled, old) {
+      this.setAttribute('aria-disabled', disabled ? 'true' : 'false');
+      this.style.pointerEvents = disabled ? 'none' : '';
+      if (disabled) {
+        this._oldTabIndex = this.tabIndex;
+        this.focused = false;
+        this.tabIndex = -1;
+      } else if (this._oldTabIndex !== undefined) {
+        this.tabIndex = this._oldTabIndex;
+      }
+    },
+    _changedControlState: function() {
+      // _controlStateChanged is abstract, follow-on behaviors may implement it
+      if (this._controlStateChanged) {
+        this._controlStateChanged();
+      }
+    }
+  };
+</script>

data/app/assets/components/iron-behaviors/test/active-state.html ADDED Viewed

@@ -0,0 +1,154 @@
+<!doctype html>
+<!--
+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>active-state</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>
+  <script src="../../iron-test-helpers/mock-interactions.js"></script>
+  <link rel="import" href="../../polymer/polymer.html">
+  <link rel="import" href="../../test-fixture/test-fixture.html">
+  <link rel="import" href="test-elements.html">
+</head>
+<body>
+  <test-fixture id="TrivialActiveState">
+    <template>
+      <test-button></test-button>
+    </template>
+  </test-fixture>
+  <test-fixture id="ToggleActiveState">
+    <template>
+      <test-button toggles></test-button>
+    </template>
+  </test-fixture>
+  <script>
+    suite('active-state', function() {
+      var activeTarget;
+      setup(function() {
+        activeTarget = fixture('TrivialActiveState');
+      });
+      suite('active state with toggles attribute', function() {
+        setup(function() {
+          activeTarget = fixture('ToggleActiveState');
+        });
+        suite('when clicked', function() {
+          test('is activated', function(done) {
+            MockInteractions.downAndUp(activeTarget, function() {
+              try {
+                expect(activeTarget.hasAttribute('active')).to.be.eql(true);
+                done();
+              } catch (e) {
+                done(e);
+              }
+            });
+          });
+          test('is deactivated by a subsequent click', function(done) {
+            MockInteractions.downAndUp(activeTarget, function() {
+              MockInteractions.downAndUp(activeTarget, function() {
+                try {
+                  expect(activeTarget.hasAttribute('active')).to.be.eql(false);
+                  done();
+                } catch (e) {
+                  done(e);
+                }
+              });
+            });
+          });
+        });
+      });
+      suite('without toggles attribute', function() {
+        suite('when mouse is down', function() {
+          test('does not get an active attribute', function() {
+            expect(activeTarget.hasAttribute('active')).to.be.eql(false);
+            MockInteractions.down(activeTarget);
+            expect(activeTarget.hasAttribute('active')).to.be.eql(false);
+          });
+        });
+        suite('when mouse is up', function() {
+          test('does not get an active attribute', function() {
+            MockInteractions.down(activeTarget);
+            expect(activeTarget.hasAttribute('active')).to.be.eql(false);
+            MockInteractions.up(activeTarget);
+            expect(activeTarget.hasAttribute('active')).to.be.eql(false);
+          });
+        });
+      });
+      suite('when space is pressed', function() {
+        test('triggers a click event', function(done) {
+          activeTarget.addEventListener('click', function() {
+            done();
+          });
+          MockInteractions.pressSpace(activeTarget);
+        });
+        test('only triggers click after the key is released', function(done) {
+          var keyupTriggered = false;
+          activeTarget.addEventListener('keyup', function() {
+            keyupTriggered = true;
+          });
+          activeTarget.addEventListener('click', function() {
+            try {
+              expect(keyupTriggered).to.be.eql(true);
+              done();
+            } catch (e) {
+              done(e);
+            }
+          });
+          MockInteractions.pressSpace(activeTarget);
+        });
+      });
+      suite('when enter is pressed', function() {
+        test('triggers a click event', function(done) {
+          activeTarget.addEventListener('click', function() {
+            done();
+          });
+          MockInteractions.pressEnter(activeTarget);
+        });
+        test('only triggers click before the key is released', function(done) {
+          var keyupTriggered = false;
+          activeTarget.addEventListener('keyup', function() {
+            keyupTriggered = true;
+          });
+          activeTarget.addEventListener('click', function() {
+            try {
+              expect(keyupTriggered).to.be.eql(false);
+              done();
+            } catch (e) {
+              done(e);
+            }
+          });
+          MockInteractions.pressEnter(activeTarget);
+        });
+      });
+    });
+  </script>
+</body>
+</html>

data/app/assets/components/iron-behaviors/test/disabled-state.html ADDED Viewed

@@ -0,0 +1,85 @@
+<!doctype html>
+<!--
+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>disabled-state</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="../../polymer/polymer.html">
+  <link rel="import" href="../../test-fixture/test-fixture.html">
+  <link rel="import" href="test-elements.html">
+</head>
+<body>
+  <test-fixture id="TrivialDisabledState">
+    <template>
+      <test-control></test-control>
+    </template>
+  </test-fixture>
+  <test-fixture id="InitiallyDisabledState">
+    <template>
+      <test-control disabled></test-control>
+    </template>
+  </test-fixture>
+  <script>
+    suite('disabled-state', function() {
+      var disableTarget;
+      suite('a trivial disabled state', function() {
+        setup(function() {
+          disableTarget = fixture('TrivialDisabledState');
+        });
+        suite('when disabled is true', function() {
+          test('receives a disabled attribute', function() {
+            disableTarget.disabled = true;
+            expect(disableTarget.hasAttribute('disabled')).to.be.eql(true);
+          });
+          test('receives an appropriate aria attribute', function() {
+            disableTarget.disabled = true;
+            expect(disableTarget.getAttribute('aria-disabled')).to.be.eql('true');
+          });
+        });
+        suite('when disabled is false', function() {
+          test('loses the disabled attribute', function() {
+            disableTarget.disabled = true;
+            expect(disableTarget.hasAttribute('disabled')).to.be.eql(true);
+            disableTarget.disabled = false;
+            expect(disableTarget.hasAttribute('disabled')).to.be.eql(false);
+          });
+        });
+      });
+      suite('a state with an initially disabled target', function() {
+        setup(function() {
+          disableTarget = fixture('InitiallyDisabledState');
+        });
+        test('preserves the disabled attribute on target', function() {
+          expect(disableTarget.hasAttribute('disabled')).to.be.eql(true);
+          expect(disableTarget.disabled).to.be.eql(true);
+        });
+        test('adds `aria-disabled` to the target', function() {
+          expect(disableTarget.getAttribute('aria-disabled')).to.be.eql('true');
+        });
+      });
+    });
+  </script>
+</body>
+</html>

data/app/assets/components/iron-behaviors/test/focused-state.html ADDED Viewed

@@ -0,0 +1,82 @@
+<!doctype html>
+<!--
+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>focused-state</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>
+  <script src="../../iron-test-helpers/mock-interactions.js"></script>
+  <link rel="import" href="../../polymer/polymer.html">
+  <link rel="import" href="../../test-fixture/test-fixture.html">
+  <link rel="import" href="test-elements.html">
+</head>
+<body>
+  <test-fixture id="TrivialFocusedState">
+    <template>
+      <test-control tabindex="-1"></test-control>
+    </template>
+  </test-fixture>
+  <script>
+    suite('focused-state', function() {
+      var focusTarget;
+      setup(function() {
+        focusTarget = fixture('TrivialFocusedState');
+      });
+      suite('when is focused', function() {
+        test('receives a focused attribute', function() {
+          expect(focusTarget.hasAttribute('focused')).to.be.eql(false);
+          MockInteractions.focus(focusTarget);
+          expect(focusTarget.hasAttribute('focused')).to.be.eql(true);
+        });
+        test('focused property is true', function() {
+          expect(focusTarget.focused).to.not.be.eql(true);
+          MockInteractions.focus(focusTarget);
+          expect(focusTarget.focused).to.be.eql(true);
+        });
+      });
+      suite('when is blurred', function() {
+        test('loses the focused attribute', function() {
+          MockInteractions.focus(focusTarget);
+          expect(focusTarget.hasAttribute('focused')).to.be.eql(true);
+          MockInteractions.blur(focusTarget);
+          expect(focusTarget.hasAttribute('focused')).to.be.eql(false);
+        });
+        test('focused property is false', function() {
+          MockInteractions.focus(focusTarget);
+          expect(focusTarget.focused).to.be.eql(true);
+          MockInteractions.blur(focusTarget);
+          expect(focusTarget.focused).to.be.eql(false);
+        });
+      });
+      suite('when the focused state is disabled', function() {
+        setup(function() {
+          focusTarget.disabled = true;
+        });
+        test('will not be focusable', function() {
+          expect(focusTarget.getAttribute('tabindex')).to.be.eql('-1');
+        });
+      });
+    });
+  </script>
+</body>
+</html>

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

@@ -0,0 +1,25 @@
+<!doctype html>
+<!--
+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">
+  <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
+  <script src="../../web-component-tester/browser.js"></script>
+</head>
+<body>
+  <script>
+    WCT.loadSuites([
+      'focused-state.html',
+      'active-state.html',
+      'disabled-state.html'
+    ]);
+  </script>
+</body>
+</html>