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

data/app/assets/components/paper-toggle-button/paper-toggle-button.css

@@ -1,5 +1,6 @@
 /*
-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
@@ -11,30 +12,36 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
   display: inline-block;
 }
 
+:host([disabled]) {
+  pointer-events: none;
+}
+
 :host(:focus) {
-  outline: none;
+  outline:none;
 }
 
-/* Class selectors can be overridden by users. */
+:host .toggle-bar {
+  background-color: var(--paper-toggle-button-unchecked-bar-color);
+}
 
-.toggle-bar {
-  background-color: #000000;
+:host .toggle-button {
+  background-color: var(--paper-toggle-button-unchecked-button-color);
 }
 
-.toggle-button {
-  background-color: #f1f1f1;
+:host([checked]) .toggle-bar {
+  background-color: var(--paper-toggle-button-checked-bar-color);
 }
 
-[checked] .toggle {
-  background-color: #0f9d58;
+:host([checked]) .toggle-button {
+  background-color: var(--paper-toggle-button-checked-button-color);
 }
 
-.toggle-ink {
-  color: #bbb;
+:host .toggle-ink {
+  color: var(--paper-toggle-button-unchecked-ink-color);
 }
 
-[checked] .toggle-ink {
-  color: #0f9d58;
+:host([checked]) .toggle-ink {
+  color: var(--paper-toggle-button-checked-ink-color);
 }
 
 /* ID selectors should not be overriden by users. */
@@ -45,34 +52,35 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
   height: 14px;
 }
 
-#toggleContainer[disabled] {
-  opacity: 0.3;
-  pointer-events: none;
-}
-
 #toggleBar {
   position: absolute;
   height: 100%;
   width: 100%;
   border-radius: 8px;
   pointer-events: none;
-  opacity: 0.26;
+  opacity: 0.4;
   transition: background-color linear .08s;
 }
 
-[checked] #toggleBar {
+:host([checked]) #toggleBar {
   opacity: 0.5;
 }
 
+:host([disabled]) #toggleBar {
+  background-color: #000;
+  opacity: 0.12;
+}
+
 #toggleButton {
   position: absolute;
   top: -3px;
   height: 20px;
   width: 20px;
   border-radius: 50%;
-  box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.4);
+  box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.6);
   transition: -webkit-transform linear .08s, background-color linear .08s;
   transition: transform linear .08s, background-color linear .08s;
+  will-change: transform;
 }
 
 #toggleButton.dragging {
@@ -80,16 +88,21 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
   transition: none;
 }
 
-[checked] #toggleButton {
+:host([checked]) #toggleButton {
   -webkit-transform: translate(16px, 0);
   transform: translate(16px, 0);
 }
 
+:host([disabled]) #toggleButton {
+  background-color: #bdbdbd;
+  opacity: 1;
+}
+
 #ink {
   position: absolute;
   top: -14px;
   left: -14px;
   width: 48px;
   height: 48px;
-  pointer-events: none;
+  opacity: 0.5;
 }

data/app/assets/components/paper-toggle-button/paper-toggle-button.html

@@ -1,5 +1,6 @@
 <!--
-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
@@ -7,173 +8,176 @@ 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-behaviors/paper-inky-focus-behavior.html">
+
 <!--
 `paper-toggle-button` provides a ON/OFF switch that user can toggle the state
-by tapping or by dragging the swtich.
+by tapping or by dragging the switch.
 
 Example:
 
     <paper-toggle-button></paper-toggle-button>
 
-Styling toggle button:
-
-To change the toggle color:
-
-    paper-toggle-button::shadow .toggle {
-      background-color: #9c27b0;
-    }
-
-To change the ink color:
-    
-    paper-toggle-button::shadow .toggle-ink {
-      color: #009688;
-    }
-
-To change the checked toggle color:
-
-    paper-toggle-button::shadow [checked] .toggle {
-      background-color: #4285f4;
-    }
-
-To change the checked ink color:
+### Styling
 
-    paper-toggle-button::shadow [checked] .toggle-ink {
-      color: #4285f4;
-    }
+The following custom properties and mixins are available for styling:
 
-To change the toggle bar and toggle button colors separately:
-
-    paper-toggle-button::shadow .toggle-bar {
-      background-color: #5677fc;
-    }
-
-    paper-toggle-button::shadow .toggle-button {
-      background-color: #9c27b0;
-    }
+Custom property | Description | Default
+----------------|-------------|----------
+`--paper-toggle-button-unchecked-bar-color` | Slider color when the input is not checked | `#000000`
+`--paper-toggle-button-unchecked-button-color` | Button color when the input is not checked | `--paper-grey-50`
+`--paper-toggle-button-unchecked-ink-color` | Selected/focus ripple color when the input is not checked | `--dark-primary-color`
+`--paper-toggle-button-checked-bar-color` | Slider button color when the input is checked | `--google-green-500`
+`--paper-toggle-button-checked-button-color` | Button color when the input is checked | `--google-green-500`
+`--paper-toggle-button-checked-ink-color` | Selected/focus ripple color when the input is checked | `--google-green-500`
 
 @group Paper Elements
 @element paper-toggle-button
-@homepage github.io
+@hero hero.svg
+@demo demo/index.html
 -->
+<style is="custom-style">
+  :root {
+    --paper-toggle-button-unchecked-bar-color: #000000;
+    --paper-toggle-button-unchecked-button-color: var(--paper-grey-50);
+    --paper-toggle-button-unchecked-ink-color: var(--primary-text-color);
 
-<link rel="import" href="../paper-radio-button/paper-radio-button.html">
-<link rel="import" href="../core-a11y-keys/core-a11y-keys.html">
-
-<polymer-element name="paper-toggle-button" attributes="checked disabled" role="button" aria-pressed="false" tabindex="0">
-<template>
+    --paper-toggle-button-checked-bar-color: var(--google-green-500);
+    --paper-toggle-button-checked-button-color: var(--google-green-500);
+    --paper-toggle-button-checked-ink-color: var(--google-green-500);
+  }
+</style>
 
-  <link rel="stylesheet" href="paper-toggle-button.css">
+<dom-module id="paper-toggle-button">
 
-  <core-a11y-keys target="{{}}" keys="space" on-keys-pressed="{{tap}}"></core-a11y-keys>
+  <link rel="import" type="css" href="paper-toggle-button.css">
 
-  <div id="toggleContainer" checked?="{{checked}}" disabled?="{{disabled}}">
-  
-    <div id="toggleBar" class="toggle toggle-bar"></div>
+  <template>
 
-    <div id="toggleButton" class="toggle toggle-button">
-      <paper-ripple id="ink" class="toggle-ink circle"></paper-ripple>
+    <div id="toggleContainer">
+      <div id="toggleBar" class="toggle-bar"></div>
+      <div id="toggleButton" class="toggle-button">
+        <paper-ripple id="ink" class="toggle-ink circle" recenters></paper-ripple>
+      </div>
     </div>
 
-  </div>
-
-</template>
-<script>
-
-  Polymer('paper-toggle-button', {
-    
-    /**
-     * Fired when the checked state changes due to user interaction.
-     *
-     * @event change
-     */
-     
-    /**
-     * Fired when the checked state changes.
-     *
-     * @event core-change
-     */
-
-    /**
-     * Gets or sets the state, `true` is checked and `false` is unchecked.
-     *
-     * @attribute checked
-     * @type boolean
-     * @default false
-     */
-    checked: false,
-
-    /**
-     * If true, the toggle button is disabled.  A disabled toggle button cannot
-     * be tapped or dragged to change the checked state.
-     *
-     * @attribute disabled
-     * @type boolean
-     * @default false
-     */
-    disabled: false,
-
-    eventDelegates: {
-      down: 'downAction',
-      up: 'upAction',
-      tap: 'tap',
-      trackstart: 'trackStart',
-      trackx: 'trackx',
-      trackend: 'trackEnd'
-    },
-
-    downAction: function(e) {
-      var rect = this.$.ink.getBoundingClientRect();
-      this.$.ink.downAction({
-        x: rect.left + rect.width / 2,
-        y: rect.top + rect.height / 2
-      });
-    },
-
-    upAction: function(e) {
-      this.$.ink.upAction();
-    },
-
-    tap: function() {
-      if (this.disabled) {
-        return;
-      }
-      this.checked = !this.checked;
-      this.fire('change');
-    },
-
-    trackStart: function(e) {
-      if (this.disabled) {
-        return;
-      }
-      this._w = this.$.toggleBar.offsetWidth / 2;
-      e.preventTap();
-    },
-
-    trackx: function(e) {
-      this._x = Math.min(this._w, 
-          Math.max(0, this.checked ? this._w + e.dx : e.dx));
-      this.$.toggleButton.classList.add('dragging');
-      var s =  this.$.toggleButton.style;
-      s.webkitTransform = s.transform = 'translate3d(' + this._x + 'px,0,0)';
-    },
-
-    trackEnd: function() {
-      var s =  this.$.toggleButton.style;
-      s.transform = s.webkitTransform = '';
-      this.$.toggleButton.classList.remove('dragging');
-      var old = this.checked;
-      this.checked = Math.abs(this._x) > this._w / 2;
-      if (this.checked !== old) {
-        this.fire('change');
+  </template>
+
+  <script>
+    Polymer({
+      is: 'paper-toggle-button',
+
+      behaviors: [
+        Polymer.PaperInkyFocusBehavior
+      ],
+
+      hostAttributes: {
+        role: 'button',
+        'aria-pressed': 'false',
+        tabindex: 0
+      },
+
+      properties: {
+        /**
+         * Fired when the checked state changes due to user interaction.
+         *
+         * @event change
+         */
+        /**
+         * Fired when the checked state changes.
+         *
+         * @event iron-change
+         */
+        /**
+         * Gets or sets the state, `true` is checked and `false` is unchecked.
+         *
+         * @attribute checked
+         * @type boolean
+         * @default false
+         */
+        checked: {
+          type: Boolean,
+          value: false,
+          reflectToAttribute: true,
+          notify: true,
+          observer: '_checkedChanged'
+        },
+
+        /**
+         * If true, the button toggles the active state with each tap or press
+         * of the spacebar.
+         *
+         * @attribute toggles
+         * @type boolean
+         * @default true
+         */
+        toggles: {
+          type: Boolean,
+          value: true,
+          reflectToAttribute: true
+        }
+      },
+
+      listeners: {
+        track: '_ontrack'
+      },
+
+      ready: function() {
+        this._isReady = true;
+      },
+
+      // button-behavior hook
+      _buttonStateChanged: function() {
+        if (this.disabled) {
+          return;
+        }
+        if (this._isReady) {
+          this.checked = this.active;
+        }
+      },
+
+      _checkedChanged: function(checked) {
+        this.active = this.checked;
+        this.fire('iron-change');
+      },
+
+      _ontrack: function(event) {
+        var track = event.detail;
+        if (track.state === 'start') {
+          this._trackStart(track);
+        } else if (track.state === 'track') {
+          this._trackMove(track);
+        } else if (track.state === 'end') {
+          this._trackEnd(track);
+        }
+      },
+
+      _trackStart: function(track) {
+        this._width = this.$.toggleBar.offsetWidth / 2;
+        /*
+         * keep an track-only check state to keep the dragging behavior smooth
+         * while toggling activations
+         */
+        this._trackChecked = this.checked;
+        this.$.toggleButton.classList.add('dragging');
+      },
+
+      _trackMove: function(track) {
+        var dx = track.dx;
+        this._x = Math.min(this._width,
+            Math.max(0, this._trackChecked ? this._width + dx : dx));
+        this.translate3d(this._x + 'px', 0, 0, this.$.toggleButton);
+        this._userActivate(this._x > (this._width / 2));
+      },
+
+      _trackEnd: function(track) {
+        this.$.toggleButton.classList.remove('dragging');
+        this.transform('', this.$.toggleButton);
       }
-    },
-    
-    checkedChanged: function() {
-      this.setAttribute('aria-pressed', Boolean(this.checked));
-      this.fire('core-change');
-    }
 
-  });
+    });
+  </script>
 
-</script>
-</polymer-element>
+</dom-module>

data/app/assets/components/paper-toggle-button/test/basic.html

@@ -0,0 +1,86 @@
+<!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>paper-toggle-button basic tests</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
+
+    <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="../../test-fixture/test-fixture.html">
+    <link rel="import" href="../paper-toggle-button.html">
+
+  </head>
+  <body>
+
+    <test-fixture id="Basic">
+      <template>
+        <paper-toggle-button id="button"></paper-toggle-button>
+      </template>
+    </test-fixture>
+
+    <script>
+      suite('defaults', function() {
+        var b1;
+
+        setup(function() {
+          b1 = fixture('Basic');
+        });
+
+        test('check button via click', function() {
+          b1.addEventListener('click', function() {
+            assert.isTrue(b1.getAttribute('aria-checked'));
+            assert.isTrue(b1.checked);
+            done();
+          });
+          MockInteractions.down(b1);
+        });
+
+        test('toggle button via click', function() {
+          b1.checked = true;
+          b1.addEventListener('click', function() {
+            assert.isFalse(b1.getAttribute('aria-checked'));
+            assert.isFalse(b1.checked);
+            done();
+          });
+          MockInteractions.down(b1);
+        });
+
+        test('disabled button cannot be clicked', function() {
+          b1.disabled = true;
+          b1.addEventListener('click', function() {
+            assert.isTrue(b1.getAttribute('aria-checked'));
+            assert.isTrue(b1.checked);
+            done();
+          });
+          MockInteractions.down(b1);
+        });
+      });
+
+      suite('a11y', function() {
+        var b1;
+
+        setup(function() {
+          b1 = fixture('Basic');
+        });
+
+        test('has aria role "button"', function() {
+          console.log(b1.getAttribute('role'));
+          assert.isTrue(b1.getAttribute('role') == 'button');
+        });
+      });
+    </script>
+  </body>
+</html>

data/app/assets/components/paper-toggle-button/test/index.html

@@ -0,0 +1,25 @@
+<!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>paper-toggle-button tests</title>
+    <script src="../../web-component-tester/browser.js"></script>
+  </head>
+  <body>
+    <script>
+      WCT.loadSuites([
+        'basic.html'
+      ]);
+    </script>
+  </body>
+</html>

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

@@ -0,0 +1,51 @@
+paper-toolbar
+============
+
+`paper-toolbar` is a horizontal bar containing items that can be used for
+label, navigation, search and actions.  The items place inside the
+`paper-toolbar` are projected into a `class="horizontal center layout"` container inside of
+`paper-toolbar`'s Shadow DOM.  You can use flex attributes to control the items'
+sizing.
+
+Example:
+
+```html
+<paper-toolbar>
+  <paper-icon-button icon="menu" on-tap="{{menuAction}}"></paper-icon-button>
+  <div title>Title</div>
+  <paper-icon-button icon="more" on-tap="{{moreAction}}"></paper-icon-button>
+</paper-toolbar>
+```
+
+`paper-toolbar` has a standard height, but can made be taller by setting `tall`
+class on the `paper-toolbar`.  This will make the toolbar 3x the normal height.
+
+```html
+<paper-toolbar class="tall">
+  <paper-icon-button icon="menu"></paper-icon-button>
+</paper-toolbar>
+```
+
+Apply `medium-tall` class to make the toolbar medium tall.  This will make the
+toolbar 2x the normal height.
+
+```html
+<paper-toolbar class="medium-tall">
+  <paper-icon-button icon="menu"></paper-icon-button>
+</paper-toolbar>
+```
+
+When `tall`, items can pin to either the top (default), middle or bottom.  Use
+`middle` class for middle content and `bottom` class for bottom content.
+
+```html
+<paper-toolbar class="tall">
+  <paper-icon-button icon="menu"></paper-icon-button>
+  <div title class="middle">Middle Title</div>
+  <div title class="bottom">Bottom Title</div>
+</paper-toolbar>
+```
+
+For `medium-tall` toolbar, the middle and bottom contents overlap and are
+pinned to the bottom.  But `middleJustify` and `bottomJustify` attributes are
+still honored separately.

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

@@ -0,0 +1,35 @@
+{
+  "name": "paper-toolbar",
+  "version": "1.0.1",
+  "license": "http://polymer.github.io/LICENSE.txt",
+  "description": "A material design toolbar that is easily customizable",
+  "private": true,
+  "main": [
+    "paper-toolbar.html"
+  ],
+  "authors": [
+    "The Polymer Authors"
+  ],
+  "keywords": [
+    "web-components",
+    "polymer",
+    "toolbar",
+    "layout"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git://github.com/PolymerElements/paper-toolbar.git"
+  },
+  "dependencies": {
+    "paper-styles": "PolymerElements/paper-styles#^1.0.0",
+    "polymer": "Polymer/polymer#^1.0.0"
+  },
+  "devDependencies": {
+    "iron-icons": "PolymerElements/iron-icons#^1.0.0",
+    "paper-icon-button": "PolymerElements/paper-icon-button#^1.0.0",
+    "iron-component-page": "PolymerElements/iron-component-page#^1.0.0",
+    "test-fixture": "PolymerElements/test-fixture#^1.0.0",
+    "web-component-tester": "*",
+    "webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
+  }
+}