polymer-paper-rails 0.2.6 → 1.0.0.pre.rc.1

data/app/assets/components/neon-animation/neon-shared-element-animation-behavior.html

@@ -0,0 +1,66 @@
+<!--
+@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="neon-animation-behavior.html">
+
+<script>
+
+  /**
+   * Use `Polymer.NeonSharedElementAnimationBehavior` to implement shared element animations.
+   * @polymerBehavior
+   */
+  Polymer.NeonSharedElementAnimationBehavior = [Polymer.NeonAnimationBehavior, {
+
+    properties: {
+
+      /**
+       * Cached copy of shared elements.
+       */
+      sharedElements: {
+        type: Object
+      }
+
+    },
+
+    /**
+     * Finds shared elements based on `config`.
+     */
+    findSharedElements: function(config) {
+      var fromPage = config.fromPage;
+      var toPage = config.toPage;
+      if (!fromPage || !toPage) {
+        console.warn(this.is + ':', !fromPage ? 'fromPage' : 'toPage', 'is undefined!');
+        return null;
+      };
+
+      if (!fromPage.sharedElements || !toPage.sharedElements) {
+        console.warn(this.is + ':', 'sharedElements are undefined for', !fromPage.sharedElements ? fromPage : toPage);
+        return null;
+      };
+
+      var from = fromPage.sharedElements[config.id]
+      var to = toPage.sharedElements[config.id];
+
+      if (!from || !to) {
+        console.warn(this.is + ':', 'sharedElement with id', config.id, 'not found in', !from ? fromPage : toPage);
+        return null;
+      }
+
+      this.sharedElements = {
+        from: from,
+        to: to
+      };
+      return this.sharedElements;
+    }
+
+  }];
+
+</script>

data/app/assets/components/{core-collapse/core-collapse.css → neon-animation/web-animations.html}

@@ -1,16 +1,11 @@
-/*
-Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
+<!--
+@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 /deep/ core-collapse {
-  display: block;
-}
-
-html /deep/ .core-collapse-closed {
-  display: none;
-}
+<script src="../web-animations-js/web-animations-next-lite.min.js"></script>

data/app/assets/components/paper-behaviors/README.md

@@ -0,0 +1,4 @@
+paper-behaviors
+===============
+
+These are common behaviors used across `paper-*` elements.

data/app/assets/components/paper-behaviors/bower.json

@@ -0,0 +1,39 @@
+{
+  "name": "paper-behaviors",
+  "version": "1.0.1",
+  "description": "Common behaviors across the paper elements",
+  "authors": [
+    "The Polymer Authors"
+  ],
+  "main": [
+    "paper-button-behavior.html",
+    "paper-radio-button-behavior.html"
+  ],
+  "keywords": [
+    "web-components",
+    "web-component",
+    "polymer",
+    "paper",
+    "behavior"
+  ],
+  "private": true,
+  "repository": {
+    "type": "git",
+    "url": "git://github.com/PolymerElements/paper-behaviors"
+  },
+  "license": "http://polymer.github.io/LICENSE.txt",
+  "homepage": "https://github.com/PolymerElements/paper-behaviors",
+  "dependencies": {
+    "iron-behaviors": "PolymerElements/iron-behaviors#^1.0.0",
+    "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",
+    "paper-material": "PolymerElements/paper-material#^1.0.0",
+    "paper-ripple": "PolymerElements/paper-ripple#^1.0.0",
+    "test-fixture": "PolymerElements/test-fixture#^1.0.0",
+    "web-component-tester": "*",
+    "webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
+  }
+}

data/app/assets/components/paper-behaviors/demo/index.html

@@ -0,0 +1,57 @@
+<!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 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">
+
+  <title>paper-behaviors demo</title>
+
+  <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
+
+  <link href="paper-button.html" rel="import">
+  <link href="paper-radio-button.html" rel="import">
+
+  <style>
+
+    body {
+      font-family: sans-serif;
+      padding: 24px;
+      margin: 0;
+    }
+
+  </style>
+
+</head>
+<body>
+
+  <h3>Normal</h3>
+
+  <paper-button tabindex="0">Hello World</paper-button>
+
+  <h3>Toggles</h3>
+
+  <paper-button toggles tabindex="0">Hello World</paper-button>
+
+  <h3>Disabled</h3>
+
+  <paper-button disabled tabindex="0">Hello World</paper-button>
+
+  <h3>Radio button with focus state</h3>
+
+  <paper-radio-button tabindex="0" title="Radio button with focus state"></paper-radio-button>
+
+
+</body>
+</html>

data/app/assets/components/paper-behaviors/demo/paper-button.html

@@ -0,0 +1,71 @@
+<!--
+@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="../../paper-material/paper-material.html">
+<link rel="import" href="../paper-button-behavior.html">
+
+<dom-module id="paper-button">
+
+  <style>
+
+    :host {
+      display: inline-block;
+      background-color: #4285F4;
+      color: #fff;
+      border-radius: 3px;
+      text-transform: uppercase;
+      outline: none;
+      -moz-user-select: none;
+      -ms-user-select: none;
+      -webkit-user-select: none;
+      user-select: none;
+      cursor: pointer;
+    }
+
+    paper-material {
+      border-radius: inherit;
+      padding: 16px;
+    }
+
+    :host([disabled]) {
+      background-color: #888;
+      pointer-events: none;
+    }
+
+    :host([active]),
+    :host([pressed]) {
+      background-color: #3367D6;
+      box-shadow: inset 0 3px 5px rgba(0,0,0,.2);
+    }
+
+  </style>
+
+  <template>
+
+    <paper-material class="content" elevation="[[_elevation]]" animated>
+      <content></content>
+    </paper-material>
+
+  </template>
+
+  <script>
+
+    Polymer({
+      is: 'paper-button',
+
+      behaviors: [
+        Polymer.PaperButtonBehavior
+      ]
+    });
+
+  </script>
+
+</dom-module>

data/app/assets/components/paper-behaviors/demo/paper-radio-button.html

@@ -0,0 +1,116 @@
+<!--
+@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="../../paper-ripple/paper-ripple.html">
+<link rel="import" href="../paper-inky-focus-behavior.html">
+
+<dom-module id="paper-radio-button">
+
+  <style>
+  :host {
+    display: inline-block;
+    white-space: nowrap;
+  }
+
+  :host(:focus) {
+    outline: none
+  }
+
+  #radioContainer {
+    display: inline-block;
+    position: relative;
+    width: 16px;
+    height: 16px;
+    cursor: pointer;
+    vertical-align: middle;
+  }
+
+  #offRadio {
+    position: absolute;
+    top: 0px;
+    left: 0px;
+    width: 12px;
+    height: 12px;
+    border-radius: 50%;
+    border: solid 2px;
+    border-color: black;
+    transition: border-color 0.28s;
+  }
+
+  #onRadio {
+    position: absolute;
+    top: 4px;
+    left: 4px;
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+    background-color: red;
+    -webkit-transform: scale(0);
+    transform: scale(0);
+    transition: -webkit-transform ease 0.28s;
+    transition: transform ease 0.28s;
+  }
+
+  :host([disabled]) {
+    opacity: 0.3;
+    pointer-events: none;
+  }
+
+  :host([pressed]) #offRadio,
+  :host([active]) #offRadio {
+    border-color: red;
+  }
+
+  :host([pressed]) #onRadio,
+  :host([active]) #onRadio {
+    -webkit-transform: scale(1);
+    transform: scale(1);
+  }
+
+  #ink {
+    position: absolute;
+    top: -16px;
+    left: -16px;
+    width: 48px;
+    height: 48px;
+  }
+
+  </style>
+
+  <template>
+    <div id="radioContainer">
+      <div id="offRadio"></div>
+      <div id="onRadio"></div>
+      <paper-ripple id="ink" class="circle" center></paper-ripple>
+    </div>
+  </template>
+
+  <script>
+
+    Polymer({
+
+      behaviors: [
+        Polymer.PaperInkyFocusBehavior
+      ],
+
+      hostAttributes: {
+        role: 'radio'
+      },
+
+      ready: function() {
+        this.toggles = true;
+      }
+
+    });
+
+  </script>
+
+</dom-module>

data/app/assets/components/paper-behaviors/index.html

@@ -0,0 +1,26 @@
+<!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>
+
+  <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="paper-button-behavior.html"></iron-component-page>
+
+</body>
+</html>

data/app/assets/components/paper-behaviors/paper-button-behavior.html

@@ -0,0 +1,55 @@
+<!--
+@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-behaviors/iron-button-state.html">
+
+<script>
+
+  /** @polymerBehavior */
+  Polymer.PaperButtonBehaviorImpl = {
+
+    properties: {
+
+      _elevation: {
+        type: Number
+      }
+
+    },
+
+    observers: [
+      '_calculateElevation(focused, disabled, active, pressed, receivedFocusFromKeyboard)'
+    ],
+
+    hostAttributes: {
+      role: 'button',
+      tabindex: '0'
+    },
+
+    _calculateElevation: function() {
+      var e = 1;
+      if (this.disabled) {
+        e = 0;
+      } else if (this.active || this.pressed) {
+        e = 4;
+      } else if (this.receivedFocusFromKeyboard) {
+        e = 3;
+      }
+      this._elevation = e;
+    }
+  };
+
+  Polymer.PaperButtonBehavior = [
+    Polymer.IronButtonState,
+    Polymer.IronControlState,
+    Polymer.PaperButtonBehaviorImpl
+  ];
+
+</script>

data/app/assets/components/paper-behaviors/paper-inky-focus-behavior.html

@@ -0,0 +1,44 @@
+<!--
+@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-behaviors/iron-button-state.html">
+
+<script>
+
+  /**
+   * `Polymer.PaperInkyFocusBehavior` implements a ripple when the element has keyboard focus.
+   *
+   * @polymerBehavior Polymer.PaperInkyFocusBehavior
+   */
+  Polymer.PaperInkyFocusBehaviorImpl = {
+
+    observers: [
+      '_focusedChanged(receivedFocusFromKeyboard)'
+    ],
+
+    _focusedChanged: function(receivedFocusFromKeyboard) {
+      if (!this.$.ink) {
+        return;
+      }
+
+      this.$.ink.holdDown = receivedFocusFromKeyboard;
+    }
+
+  };
+
+  /** @polymerBehavior Polymer.PaperInkyFocusBehavior */
+  Polymer.PaperInkyFocusBehavior = [
+    Polymer.IronButtonState,
+    Polymer.IronControlState,
+    Polymer.PaperInkyFocusBehaviorImpl
+  ];
+
+</script>

data/app/assets/components/paper-behaviors/test/index.html

@@ -0,0 +1,26 @@
+<!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">
+  <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
+  <script src="../../web-component-tester/browser.js"></script>
+</head>
+<body>
+  <script>
+    WCT.loadSuites([
+      'paper-button-behavior.html',
+      'paper-radio-button-behavior.html'
+    ]);
+  </script>
+</body>
+</html>

data/app/assets/components/paper-behaviors/test/paper-button-behavior.html

@@ -0,0 +1,82 @@
+<!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>paper-button-behavior</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-button.html">
+</head>
+<body>
+
+  <test-fixture id="basic">
+    <template>
+      <test-button></test-button>
+    </template>
+  </test-fixture>
+
+  <script>
+    suite('basic', function() {
+      var button;
+
+      setup(function() {
+        button = fixture('basic');
+      });
+
+      test('normal (no states)', function() {
+        assert.equal(button._elevation, 1);
+      });
+
+      test('set disabled property', function() {
+        button.disabled = true;
+        assert.equal(button._elevation, 0);
+      });
+
+      test('pressed and released', function() {
+        MockInteractions.down(button);
+        assert.equal(button._elevation, 4);
+        MockInteractions.up(button);
+        assert.equal(button._elevation, 1);
+      });
+
+      suite('a button with toggles', function() {
+        setup(function() {
+          button.toggles = true;
+        });
+
+        test('activated by tap', function(done) {
+          MockInteractions.downAndUp(button, function() {
+            try {
+              assert.equal(button._elevation, 4);
+              done();
+            } catch (e) {
+              done(e);
+            }
+          });
+        });
+      });
+
+      test('receives focused', function() {
+        MockInteractions.focus(button);
+        assert.equal(button._elevation, 3);
+      });
+    });
+  </script>
+
+</body>
+</html>

data/app/assets/components/paper-behaviors/test/paper-radio-button-behavior.html

@@ -0,0 +1,62 @@
+<!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>paper-radio-button-behavior</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-radio-button.html">
+</head>
+<body>
+
+  <test-fixture id="basic">
+    <template>
+      <test-radio-button></test-radio-button>
+    </template>
+  </test-fixture>
+
+  <script>
+    suite('basic', function() {
+      var button;
+      var ink;
+
+      setup(function() {
+        button = fixture('basic');
+        ink = button.querySelector('paper-ripple');
+        MockInteractions.blur(button);
+      });
+
+      test('normal (no states)', function() {
+        assert.isFalse(button.focused);
+        assert.isFalse(ink._animating);
+        assert.equal(ink.ripples.length, 0);
+      });
+
+      test('receives focus', function() {
+        MockInteractions.focus(button);
+
+        assert.isTrue(button.focused);
+        assert.isTrue(ink._animating);
+        assert.equal(ink.ripples.length, 1);
+      });
+
+    });
+  </script>
+
+</body>
+</html>