polymer-paper-elements-rails 0.0.1

data/app/assets/components/paper-toast/hero.svg

@@ -0,0 +1,20 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 17.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 225 126" enable-background="new 0 0 225 126" xml:space="preserve">
+<g id="background" display="none">
+	<rect display="inline" fill="#B0BEC5" width="225" height="126"/>
+</g>
+<g id="label">
+</g>
+<g id="art">
+	<path d="M164,114H13V88h151V114z M15,112h147V90H15V112z"/>
+	<rect x="26" y="100" width="79" height="2"/>
+	<rect x="135" y="100" width="16" height="2"/>
+	<g id="ic_x5F_add_x0D_">
+	</g>
+</g>
+<g id="Guides">
+</g>
+</svg>

data/app/assets/components/paper-toast/paper-toast.html

@@ -0,0 +1,164 @@
+<!--
+@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-styles/typography.html">
+<link rel="import" href="../iron-a11y-announcer/iron-a11y-announcer.html">
+
+<!--
+`paper-toast` provides a subtle notification toast.
+
+@group Paper Elements
+@element paper-toast
+@demo demo/index.html
+@hero hero.svg
+-->
+<dom-module id="paper-toast">
+  <style>
+    :host {
+      display: inline-block;
+      position: fixed;
+
+      background: #323232;
+      color: #f1f1f1;
+      min-height: 48px;
+      min-width: 288px;
+      padding: 16px 24px 12px;
+      box-sizing: border-box;
+      box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
+      border-radius: 2px;
+      bottom: 12px;
+      left: 12px;
+      font-size: 14px;
+      cursor: default;
+
+      -webkit-transition: visibility 0.3s, -webkit-transform 0.3s;
+      transition: visibility 0.3s, transform 0.3s;
+
+      -webkit-transform: translateY(100px);
+      transform: translateY(100px);
+
+      visibility: hidden;
+    }
+
+    :host(.capsule) {
+      border-radius: 24px;
+    }
+
+    :host(.fit-bottom) {
+      bottom: 0;
+      left: 0;
+      width: 100%;
+      min-width: 0;
+      border-radius: 0;
+    }
+
+    :host(.paper-toast-open){
+      visibility: visible;
+
+      -webkit-transform: translateY(0px);
+      transform: translateY(0px);
+    }
+  </style>
+  <template>
+    <span id="label">{{text}}</span>
+    <content></content>
+  </template>
+</dom-module>
+<script>
+(function() {
+
+  var PaperToast = Polymer({
+    is: 'paper-toast',
+
+    properties: {
+      /**
+       * The duration in milliseconds to show the toast.
+       */
+      duration: {
+        type: Number,
+        value: 3000
+      },
+
+      /**
+       * The text to display in the toast.
+       */
+      text: {
+        type: String,
+        value: ""
+      },
+
+      /**
+       * True if the toast is currently visible.
+       */
+      visible: {
+        type: Boolean,
+        readOnly: true,
+        value: false,
+        observer: '_visibleChanged'
+      }
+    },
+
+    created: function() {
+      Polymer.IronA11yAnnouncer.requestAvailability();
+    },
+
+    ready: function() {
+      this.async(function() {
+        this.hide();
+      });
+    },
+
+    /**
+     * Show the toast.
+     * @method show
+     */
+    show: function() {
+      if (PaperToast.currentToast) {
+        PaperToast.currentToast.hide();
+      }
+      PaperToast.currentToast = this;
+      this.removeAttribute('aria-hidden');
+      this._setVisible(true);
+      this.fire('iron-announce', {
+        text: this.text
+      });
+      this.debounce('hide', this.hide, this.duration);
+    },
+
+    /**
+     * Hide the toast
+     */
+    hide: function() {
+      this.setAttribute('aria-hidden', 'true');
+      this._setVisible(false);
+    },
+
+    /**
+     * Toggle the opened state of the toast.
+     * @method toggle
+     */
+    toggle: function() {
+      if (!this.visible) {
+        this.show();
+      } else {
+        this.hide();
+      }
+    },
+
+    _visibleChanged: function(visible) {
+      this.toggleClass('paper-toast-open', visible);
+    }
+  });
+
+  PaperToast.currentToast = null;
+
+})();
+</script>

data/app/assets/components/paper-toggle-button/hero.svg

@@ -0,0 +1,22 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 17.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 225 126" enable-background="new 0 0 225 126" xml:space="preserve">
+<g id="background" display="none">
+	<rect display="inline" fill="#B0BEC5" width="225" height="126"/>
+</g>
+<g id="label">
+</g>
+<g id="art">
+	<g>
+		<circle cx="123.8" cy="63" r="15.7"/>
+		<path d="M123,77H98.5c-7.7,0-14-6.3-14-14s6.3-14,14-14H123c7.7,0,14,6.3,14,14S130.7,77,123,77z M98.5,51c-6.6,0-12,5.4-12,12
+			s5.4,12,12,12H123c6.6,0,12-5.4,12-12s-5.4-12-12-12H98.5z"/>
+	</g>
+	<g id="ic_x5F_add_x0D_">
+	</g>
+</g>
+<g id="Guides">
+</g>
+</svg>

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

@@ -0,0 +1,108 @@
+/*
+@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
+*/
+
+:host {
+  display: inline-block;
+}
+
+:host([disabled]) {
+  pointer-events: none;
+}
+
+:host(:focus) {
+  outline:none;
+}
+
+:host .toggle-bar {
+  background-color: var(--paper-toggle-button-unchecked-bar-color);
+}
+
+:host .toggle-button {
+  background-color: var(--paper-toggle-button-unchecked-button-color);
+}
+
+:host([checked]) .toggle-bar {
+  background-color: var(--paper-toggle-button-checked-bar-color);
+}
+
+:host([checked]) .toggle-button {
+  background-color: var(--paper-toggle-button-checked-button-color);
+}
+
+:host .toggle-ink {
+  color: var(--paper-toggle-button-unchecked-ink-color);
+}
+
+:host([checked]) .toggle-ink {
+  color: var(--paper-toggle-button-checked-ink-color);
+}
+
+/* ID selectors should not be overriden by users. */
+
+#toggleContainer {
+  position: relative;
+  width: 36px;
+  height: 14px;
+}
+
+#toggleBar {
+  position: absolute;
+  height: 100%;
+  width: 100%;
+  border-radius: 8px;
+  pointer-events: none;
+  opacity: 0.4;
+  transition: background-color linear .08s;
+}
+
+: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.6);
+  transition: -webkit-transform linear .08s, background-color linear .08s;
+  transition: transform linear .08s, background-color linear .08s;
+  will-change: transform;
+}
+
+#toggleButton.dragging {
+  -webkit-transition: none;
+  transition: none;
+}
+
+: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;
+  opacity: 0.5;
+}

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

@@ -0,0 +1,183 @@
+<!--
+@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-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 switch.
+
+Example:
+
+    <paper-toggle-button></paper-toggle-button>
+
+### Styling
+
+The following custom properties and mixins are available for styling:
+
+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
+@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);
+
+    --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>
+
+<dom-module id="paper-toggle-button">
+
+  <link rel="import" type="css" href="paper-toggle-button.css">
+
+  <template>
+
+    <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>
+
+  </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);
+      }
+
+    });
+  </script>
+
+</dom-module>