polymer-paper-rails 0.2.0 → 0.2.5

data/app/assets/components/paper-slider/paper-slider.css

@@ -11,6 +11,15 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
   display: inline-block;
   width: 200px;
   cursor: default;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  -webkit-tap-highlight-color: rgba(0,0,0,0);
+}
+
+:host(:focus) {
+  outline: none;
 }
 
 #sliderContainer {
@@ -92,6 +101,11 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
   background-color: #3f51b5;
 }
 
+.transiting #sliderBar::shadow #activeProgress {
+  transition: -webkit-transform 0.08s ease;
+  transition: transform 0.08s ease;
+}
+
 #sliderKnob {
   position: absolute;
   left: 0;
@@ -100,7 +114,7 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
   height: 32px;
 }
 
-#sliderKnob.transiting {
+.transiting > #sliderKnob {
   transition: left 0.08s ease;
 }
 

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

@@ -43,9 +43,9 @@ To change the slider pin color:
       background-color: #0f9d58;
     }
 
-To change the slider pin's value:
+To change the slider pin's font color:
 
-    paper-slider::shadow #sliderKnobInner::after {
+    paper-slider::shadow #sliderKnob > #sliderKnobInner::after {
       color: #0f9d58
     }
 
@@ -61,22 +61,28 @@ To change the slider secondary progress bar color:
 @homepage github.io
 -->
 
+<link rel="import" href="../core-a11y-keys/core-a11y-keys.html">
 <link rel="import" href="../paper-progress/paper-progress.html">
 <link rel="import" href="../paper-input/paper-input.html">
 
-<polymer-element name="paper-slider" extends="core-range" attributes="snaps pin disabled secondaryProgress editable immediateValue">
+<polymer-element name="paper-slider" extends="core-range" attributes="snaps pin disabled secondaryProgress editable immediateValue" role="slider" tabindex="0" aria-valuemin="0" aria-valuemax="100">
 <template>
 
   <link rel="stylesheet" href="paper-slider.css">
 
-  <div id="sliderContainer" class="{{ {disabled: disabled, pin: pin, snaps: snaps, ring: immediateValue <= min, expand: expand, dragging: dragging, editable: editable} | tokenList }}" on-keydown="{{keydown}}">
-  
+  <template if="{{!disabled}}">
+    <core-a11y-keys target="{{}}" keys="left down pagedown home" on-keys-pressed="{{decrementKey}}"></core-a11y-keys>
+    <core-a11y-keys target="{{}}" keys="right up pageup end" on-keys-pressed="{{incrementKey}}"></core-a11y-keys>
+  </template>
+
+  <div id="sliderContainer" class="{{ {disabled: disabled, pin: pin, snaps: snaps, ring: immediateValue <= min, expand: expand, dragging: dragging, transiting: transiting, editable: editable} | tokenList }}">
+
     <div class="bar-container">
       <paper-progress id="sliderBar" aria-hidden="true" min="{{min}}" max="{{max}}" value="{{immediateValue}}" secondaryProgress="{{secondaryProgress}}"
           on-down="{{bardown}}" on-up="{{resetKnob}}" 
           on-trackstart="{{trackStart}}" on-trackx="{{trackx}}" on-trackend="{{trackEnd}}"></paper-progress>
     </div>
-    
+
     <template if="{{snaps && !disabled}}">
       <div class="slider-markers" horizontal layout>
         <template repeat="{{markers}}">
@@ -84,20 +90,18 @@ To change the slider secondary progress bar color:
         </template>
       </div>
     </template>
-    
-    <div id="sliderKnob" on-down="{{expandKnob}}" on-up="{{resetKnob}}" 
+
+    <div id="sliderKnob" on-down="{{knobdown}}" on-up="{{resetKnob}}"
         on-trackstart="{{trackStart}}" on-trackx="{{trackx}}" on-trackend="{{trackEnd}}"
         on-transitionend="{{knobTransitionEnd}}"
-        role="slider" aria-valuenow="{{value}}" aria-valuemin="{{min}}" aria-valuemax="{{max}}"
-        aria-valuetext="{{value}}" tabindex="0"
         center-justified center horizontal layout>
-        
+
       <div id="sliderKnobInner" value="{{immediateValue}}"></div>
-      
+
     </div>
-    
+
   </div>
-  
+
   <template if="{{editable}}">
     <paper-input id="input" class="slider-input" value="{{immediateValue}}" disabled?="{{disabled}}" on-change="{{inputChange}}"></paper-input>
   </template>
@@ -106,7 +110,7 @@ To change the slider secondary progress bar color:
 <script>
 
   Polymer('paper-slider', {
-    
+
     /**
      * Fired when the slider's value changes.
      *
@@ -121,7 +125,7 @@ To change the slider secondary progress bar color:
      *
      * @event change
      */
-     
+
     /**
      * If true, the slider thumb snaps to tick marks evenly spaced based
      * on the `step` property value.
@@ -131,7 +135,7 @@ To change the slider secondary progress bar color:
      * @default false
      */
     snaps: false,
-    
+
     /**
      * If true, a pin with numeric value label is shown when the slider thumb 
      * is pressed.  Use for settings for which users need to know the exact 
@@ -142,7 +146,7 @@ To change the slider secondary progress bar color:
      * @default false
      */
     pin: false,
-    
+
     /**
      * If true, this slider is disabled.  A disabled slider cannot be tapped
      * or dragged to change the slider value.
@@ -152,7 +156,7 @@ To change the slider secondary progress bar color:
      * @default false
      */
     disabled: false,
-    
+
     /**
      * The number that represents the current secondary progress.
      *
@@ -161,7 +165,7 @@ To change the slider secondary progress bar color:
      * @default 0
      */
     secondaryProgress: 0,
-    
+
     /**
      * If true, an input is shown and user can use it to set the slider value.
      *
@@ -170,7 +174,7 @@ To change the slider secondary progress bar color:
      * @default false
      */
     editable: false,
-    
+
     /**
      * The immediate value of the slider.  This value is updated while the user
      * is dragging the slider.
@@ -179,55 +183,78 @@ To change the slider secondary progress bar color:
      * @type number
      * @default 0
      */
-    
+
+    maxMarkers: 100,
+     
     observe: {
-      'min max step snaps': 'update'
+      'step snaps': 'update'
     },
-    
+
     ready: function() {
       this.update();
     },
-    
+
     update: function() {
       this.positionKnob(this.calcRatio(this.value));
       this.updateMarkers();
     },
-    
+
+    minChanged: function() {
+      this.update();
+      this.setAttribute('aria-valuemin', this.min);
+    },
+
+    maxChanged: function() {
+      this.update();
+      this.setAttribute('aria-valuemax', this.max);
+    },
+
     valueChanged: function() {
       this.update();
+      this.setAttribute('aria-valuenow', this.value);
       this.fire('core-change');
     },
-    
+
+    disabledChanged: function() {
+      if (this.disabled) {
+        this.removeAttribute('tabindex');
+      } else {
+        this.tabIndex = 0;
+      }
+    },
+
+    immediateValueChanged: function() {
+      if (!this.dragging) {
+        this.value = this.immediateValue;
+      }
+    },
+
     expandKnob: function() {
       this.expand = true;
     },
-    
+
     resetKnob: function() {
       this.expandJob && this.expandJob.stop();
       this.expand = false;
     },
-    
+
     positionKnob: function(ratio) {
       this.immediateValue = this.calcStep(this.calcKnobPosition(ratio)) || 0;
       this._ratio = this.snaps ? this.calcRatio(this.immediateValue) : ratio;
       this.$.sliderKnob.style.left = this._ratio * 100 + '%';
     },
-    
+
     inputChange: function() {
       this.value = this.$.input.value;
       this.fire('change');
     },
-    
+
     calcKnobPosition: function(ratio) {
       return (this.max - this.min) * ratio + this.min;
     },
-    
-    measureWidth: function() {
-      this._w = this.$.sliderBar.offsetWidth;
-    },
-    
+
     trackStart: function(e) {
-      this.measureWidth();
+      this._w = this.$.sliderBar.offsetWidth;
       this._x = this._ratio * this._w;
       this._startx = this._x || 0;
       this._minx = - this._startx;
@@ -246,7 +273,7 @@ To change the slider secondary progress bar color:
       s.transform = s.webkitTransform = 'translate3d(' + (this.snaps ? 
           (this.calcRatio(this.immediateValue) * this._w) - this._startx : x) + 'px, 0, 0)';
     },
-    
+
     trackEnd: function() {
       var s =  this.$.sliderKnob.style;
       s.transform = s.webkitTransform = '';
@@ -257,48 +284,62 @@ To change the slider secondary progress bar color:
       this.fire('change');
     },
     
+    knobdown: function(e) {
+      e.preventDefault();
+      this.expandKnob();
+    },
+
     bardown: function(e) {
-      this.measureWidth();
-      this.$.sliderKnob.classList.add('transiting');
+      e.preventDefault();
+      this.transiting = true;
+      this._w = this.$.sliderBar.offsetWidth;
       var rect = this.$.sliderBar.getBoundingClientRect();
       var ratio = (e.x - rect.left) / this._w;
       this.positionKnob(ratio);
-      this.value = this.calcStep(this.calcKnobPosition(ratio));
       this.expandJob = this.job(this.expandJob, this.expandKnob, 60);
       this.fire('change');
     },
-    
-    knobTransitionEnd: function() {
-      this.$.sliderKnob.classList.remove('transiting');
+
+    knobTransitionEnd: function(e) {
+      if (e.target === this.$.sliderKnob) {
+        this.transiting = false;
+      }
     },
-    
+
     updateMarkers: function() {
       this.markers = [], l = (this.max - this.min) / this.step;
+      if (!this.snaps && l > this.maxMarkers) {
+        return;
+      }
       for (var i = 0; i < l; i++) {
         this.markers.push('');
       }
     },
-    
+
     increment: function() {
       this.value = this.clampValue(this.value + this.step);
     },
-    
+
     decrement: function() {
       this.value = this.clampValue(this.value - this.step);
     },
-    
-    keydown: function(e) {
-      if (this.disabled) {
-        return;
+
+    incrementKey: function(ev, keys) {
+      if (keys.key === "end") {
+        this.value = this.max;
+      } else {
+        this.increment();
       }
-      var c = e.keyCode;
-      if (c === 37) {
+      this.fire('change');
+    },
+
+    decrementKey: function(ev, keys) {
+      if (keys.key === "home") {
+        this.value = this.min;
+      } else {
         this.decrement();
-        this.fire('change');
-      } else if (c === 39) {
-        this.increment();
-        this.fire('change');
       }
+      this.fire('change');
     }
 
   });

data/app/assets/components/paper-spinner/paper-spinner.css

@@ -0,0 +1,311 @@
+/*
+    @license
+    Copyright (c) 2014 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
+ */
+
+/**************************/
+/* STYLES FOR THE SPINNER */
+/**************************/
+
+/*
+ * Constants:
+ *      STROKEWIDTH = 3px
+ *      ARCSIZE     = 270 degrees (amount of circle the arc takes up)
+ *      ARCTIME     = 1333ms (time it takes to expand and contract arc)
+ *      ARCSTARTROT = 216 degrees (how much the start location of the arc
+ *                                should rotate each time, 216 gives us a
+ *                                5 pointed star shape (it's 360/5 * 3).
+ *                                For a 7 pointed star, we might do
+ *                                360/7 * 3 = 154.286)
+ *      CONTAINERWIDTH = 28px
+ *      SHRINK_TIME = 400ms
+ */
+
+:host {
+  display: inline-block;
+  position: relative;
+  width: 28px; /* CONTAINERWIDTH */
+  height: 28px; /* CONTAINERWIDTH */
+}
+
+#spinnerContainer {
+  width: 100%;
+  height: 100%;
+}
+
+#spinnerContainer.active {
+  /* duration: 360 * ARCTIME / (ARCSTARTROT + (360-ARCSIZE)) */
+  -webkit-animation: container-rotate 1568ms linear infinite;
+  animation: container-rotate 1568ms linear infinite;
+}
+
+@-webkit-keyframes container-rotate {
+  to { -webkit-transform: rotate(360deg) }
+}
+
+@keyframes container-rotate {
+  to { transform: rotate(360deg) }
+}
+
+.spinner-layer {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  opacity: 0;
+}
+
+.blue {
+  border-color: #4285f4;
+}
+
+.red {
+  border-color: #db4437;
+}
+
+.yellow {
+  border-color: #f4b400;
+}
+
+.green {
+  border-color: #0f9d58;
+}
+
+/**
+ * IMPORTANT NOTE ABOUT CSS ANIMATION PROPERTIES (keanulee):
+ *
+ * iOS Safari (tested on iOS 8.1) does not handle animation-delay very well - it doesn't
+ * guarantee that the animation will start _exactly_ after that value. So we avoid using
+ * animation-delay and instead set custom keyframes for each color (as redundant as it
+ * seems).
+ *
+ * We write out each animation in full (instead of separating animation-name,
+ * animation-duration, etc.) because under the polyfill, Safari does not recognize those
+ * specific properties properly, treats them as -webkit-animation, and overrides the
+ * other animation rules. See https://github.com/Polymer/platform/issues/53.
+ */
+.active .spinner-layer.blue {
+  /* durations: 4 * ARCTIME */
+  -webkit-animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both, blue-fade-in-out 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both;
+  animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both, blue-fade-in-out 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both;
+}
+
+.active .spinner-layer.red {
+  /* durations: 4 * ARCTIME */
+  -webkit-animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both, red-fade-in-out 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both;
+  animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both, red-fade-in-out 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both;
+}
+
+.active .spinner-layer.yellow {
+  /* durations: 4 * ARCTIME */
+  -webkit-animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both, yellow-fade-in-out 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both;
+  animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both, yellow-fade-in-out 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both;
+}
+
+.active .spinner-layer.green {
+  /* durations: 4 * ARCTIME */
+  -webkit-animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both, green-fade-in-out 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both;
+  animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both, green-fade-in-out 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both;
+}
+
+@-webkit-keyframes fill-unfill-rotate {
+  12.5% { -webkit-transform: rotate(135deg);  } /* 0.5 * ARCSIZE */
+  25%   { -webkit-transform: rotate(270deg);  } /* 1   * ARCSIZE */
+  37.5% { -webkit-transform: rotate(405deg);  } /* 1.5 * ARCSIZE */
+  50%   { -webkit-transform: rotate(540deg);  } /* 2   * ARCSIZE */
+  62.5% { -webkit-transform: rotate(675deg);  } /* 2.5 * ARCSIZE */
+  75%   { -webkit-transform: rotate(810deg);  } /* 3   * ARCSIZE */
+  87.5% { -webkit-transform: rotate(945deg);  } /* 3.5 * ARCSIZE */
+  to    { -webkit-transform: rotate(1080deg); } /* 4   * ARCSIZE */
+}
+
+@keyframes fill-unfill-rotate {
+  12.5% { transform: rotate(135deg);  } /* 0.5 * ARCSIZE */
+  25%   { transform: rotate(270deg);  } /* 1   * ARCSIZE */
+  37.5% { transform: rotate(405deg);  } /* 1.5 * ARCSIZE */
+  50%   { transform: rotate(540deg);  } /* 2   * ARCSIZE */
+  62.5% { transform: rotate(675deg);  } /* 2.5 * ARCSIZE */
+  75%   { transform: rotate(810deg);  } /* 3   * ARCSIZE */
+  87.5% { transform: rotate(945deg);  } /* 3.5 * ARCSIZE */
+  to    { transform: rotate(1080deg); } /* 4   * ARCSIZE */
+}
+
+@-webkit-keyframes blue-fade-in-out {
+  from { opacity: 1; }
+  25% { opacity: 1; }
+  26% { opacity: 0; }
+  89% { opacity: 0; }
+  90% { opacity: 1; }
+  100% { opacity: 1; }
+}
+
+@keyframes blue-fade-in-out {
+  from { opacity: 1; }
+  25% { opacity: 1; }
+  26% { opacity: 0; }
+  89% { opacity: 0; }
+  90% { opacity: 1; }
+  100% { opacity: 1; }
+}
+
+@-webkit-keyframes red-fade-in-out {
+  from { opacity: 0; }
+  15% { opacity: 0; }
+  25% { opacity: 1; }
+  50% { opacity: 1; }
+  51% { opacity: 0; }
+}
+
+@keyframes red-fade-in-out {
+  from { opacity: 0; }
+  15% { opacity: 0; }
+  25% { opacity: 1; }
+  50% { opacity: 1; }
+  51% { opacity: 0; }
+}
+
+@-webkit-keyframes yellow-fade-in-out {
+  from { opacity: 0; }
+  40% { opacity: 0; }
+  50% { opacity: 1; }
+  75% { opacity: 1; }
+  76% { opacity: 0; }
+}
+
+@keyframes yellow-fade-in-out {
+  from { opacity: 0; }
+  40% { opacity: 0; }
+  50% { opacity: 1; }
+  75% { opacity: 1; }
+  76% { opacity: 0; }
+}
+
+@-webkit-keyframes green-fade-in-out {
+  from { opacity: 0; }
+  65% { opacity: 0; }
+  75% { opacity: 1; }
+  90% { opacity: 1; }
+  100% { opacity: 0; }
+}
+
+@keyframes green-fade-in-out {
+  from { opacity: 0; }
+  65% { opacity: 0; }
+  75% { opacity: 1; }
+  90% { opacity: 1; }
+  100% { opacity: 0; }
+}
+
+/**
+ * Patch the gap that appear between the two adjacent div.circle-clipper while the
+ * spinner is rotating (appears on Chrome 38, Safari 7.1, and IE 11).
+ */
+.gap-patch {
+  position: absolute;
+  box-sizing: border-box;
+  top: 0;
+  left: 45%;
+  width: 10%;
+  height: 100%;
+  overflow: hidden;
+  border-color: inherit;
+}
+
+.gap-patch .circle {
+  width: 1000%;
+  left: -450%;
+}
+
+.circle-clipper {
+  display: inline-block;
+  position: relative;
+  width: 50%;
+  height: 100%;
+  overflow: hidden;
+  border-color: inherit;
+}
+
+.circle-clipper .circle {
+  width: 200%;
+}
+
+.circle {
+  box-sizing: border-box;
+  height: 100%;
+  border-width: 3px; /* STROKEWIDTH */
+  border-style: solid;
+  border-color: inherit;
+  border-bottom-color: transparent !important;
+  border-radius: 50%;
+  -webkit-animation: none;
+  animation: none;
+}
+
+.circle-clipper.left .circle {
+  border-right-color: transparent !important;
+  -webkit-transform: rotate(129deg);
+  transform: rotate(129deg);
+}
+
+.circle-clipper.right .circle {
+  left: -100%;
+  border-left-color: transparent !important;
+  -webkit-transform: rotate(-129deg);
+  transform: rotate(-129deg);
+}
+
+.active .circle-clipper.left .circle {
+  /* duration: ARCTIME */
+  -webkit-animation: left-spin 1333ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both;
+  animation: left-spin 1333ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both;
+}
+
+.active .circle-clipper.right .circle {
+  /* duration: ARCTIME */
+  -webkit-animation: right-spin 1333ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both;
+  animation: right-spin 1333ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both;
+}
+
+@-webkit-keyframes left-spin {
+  from { -webkit-transform: rotate(130deg); }
+  50% { -webkit-transform: rotate(-5deg); }
+  to { -webkit-transform: rotate(130deg); }
+}
+
+@keyframes left-spin {
+  from { transform: rotate(130deg); }
+  50% { transform: rotate(-5deg); }
+  to { transform: rotate(130deg); }
+}
+
+@-webkit-keyframes right-spin {
+  from { -webkit-transform: rotate(-130deg); }
+  50% { -webkit-transform: rotate(5deg); }
+  to { -webkit-transform: rotate(-130deg); }
+}
+
+@keyframes right-spin {
+  from { transform: rotate(-130deg); }
+  50% { transform: rotate(5deg); }
+  to { transform: rotate(-130deg); }
+}
+
+#spinnerContainer.warmdown {
+  /* duration: SHRINK_TIME */
+  -webkit-animation: container-rotate 1568ms linear infinite, fade-out 400ms cubic-bezier(0.4, 0.0, 0.2, 1);
+  animation: container-rotate 1568ms linear infinite, fade-out 400ms cubic-bezier(0.4, 0.0, 0.2, 1);
+}
+
+@-webkit-keyframes fade-out {
+  from { opacity: 1; }
+  to { opacity: 0; }
+}
+
+@keyframes fade-out {
+  from { opacity: 1; }
+  to { opacity: 0; }
+}