polymer-paper-rails 0.2.5 → 0.2.6

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

@@ -29,14 +29,21 @@ that it uses one color only.
 
     <paper-spinner class="blue" active></paper-spinner>
 
+Alt attribute should be set to provide adequate context for accessibility. If not provided,
+it defaults to 'loading'.
+Empty alt can be provided to mark the element as decorative if alternative content is provided
+in another form (e.g. a text block following the spinner).
+
+##### Example
+  <paper-spinner alt="Loading contacts list" active></paper-spinner>
+
 @element paper-spinner
 @blurb Element providing material design circular spinner.
 @status alpha
 @homepage http://polymerlabs.github.io/paper-spinner
 -->
 
-<polymer-element name="paper-spinner" attributes="active">
-
+<polymer-element name="paper-spinner" attributes="active alt" role="progressbar">
   <template>
     <link rel="stylesheet" href="paper-spinner.css">
 
@@ -97,19 +104,53 @@ that it uses one color only.
          * @type boolean
          * @default false
          */
-        active: {value: false, reflect: true}
+        active: {value: false, reflect: true},
+
+        /**
+         * Alternative text content for accessibility support.
+         * If alt is present, it will add an aria-label whose content matches alt when active.
+         * If alt is not present, it will default to 'loading' as the alt value.
+         * @attribute alt
+         * @type string
+         * @default 'loading'
+         */
+        alt: {value: 'loading', reflect: true}
+      },
+
+      ready: function() {
+        // Allow user-provided `aria-label` take preference to any other text alternative.
+        if (this.hasAttribute('aria-label')) {
+          this.alt = this.getAttribute('aria-label');
+        } else {
+          this.setAttribute('aria-label', this.alt);
+        }
+        if (!this.active) {
+          this.setAttribute('aria-hidden', 'true');
+        }
       },
 
       activeChanged: function() {
         if (this.active) {
+          this.$.spinnerContainer.classList.remove('cooldown');
           this.$.spinnerContainer.classList.add('active');
+          this.removeAttribute('aria-hidden');
+        } else {
+          this.$.spinnerContainer.classList.add('cooldown');
+          this.setAttribute('aria-hidden', 'true');
+        }
+      },
+
+      altChanged: function() {
+        if (this.alt === '') {
+          this.setAttribute('aria-hidden', 'true');
         } else {
-          this.$.spinnerContainer.classList.add('warmdown');
+          this.removeAttribute('aria-hidden');
         }
+        this.setAttribute('aria-label', this.alt);
       },
 
       reset: function() {
-        this.$.spinnerContainer.classList.remove('active', 'warmdown');
+        this.$.spinnerContainer.classList.remove('active', 'cooldown');
       }
     });
   </script>

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

@@ -59,6 +59,11 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
   transition: width, left;
 }
 
+#selectionBar.alignBottom {
+	top: 0;
+	bottom: auto;
+}
+
 #selectionBar.expand {
   transition-duration: 0.15s;
   transition-timing-function: cubic-bezier(0.4, 0.0, 1, 1);

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

@@ -34,7 +34,7 @@ between different views.
       <paper-tab>Tab 3</paper-tab>
     </paper-tabs>
   
-    <core-pages selected="{{selected}}>
+    <core-pages selected="{{selected}}">
       <div>Page 1</div>
       <div>Page 2</div>
       <div>Page 3</div>
@@ -77,14 +77,16 @@ To change the ink ripple color:
 @group Paper Elements
 @element paper-tabs
 @extends core-selector
+@mixins Polymer.CoreResizable https://github.com/polymer/core-resizable
 @homepage github.io
 -->
 
 <link rel="import" href="../core-selector/core-selector.html">
 <link rel="import" href="../paper-icon-button/paper-icon-button.html">
+<link rel="import" href="../core-resizable/core-resizable.html">
 <link rel="import" href="paper-tab.html">
 
-<polymer-element name="paper-tabs" extends="core-selector" attributes="noink nobar noslide scrollable hideScrollButton" role="tablist" horizontal center layout>
+<polymer-element name="paper-tabs" extends="core-selector" attributes="noink nobar noslide scrollable hideScrollButton alignBottom" role="tablist" horizontal center layout>
 <template>
 
   <link rel="stylesheet" href="paper-tabs.css">
@@ -97,7 +99,7 @@ To change the ink ripple color:
   
     <div id="tabsContent" horizontal layout?="{{!scrollable}}">
       <shadow></shadow>
-      <div id="selectionBar" hidden?="{{nobar}}" on-transitionend="{{barTransitionEnd}}"></div>
+      <div id="selectionBar" hidden?="{{nobar}}" class="{{ {alignBottom: alignBottom} | tokenList }}" on-transitionend="{{barTransitionEnd}}"></div>
     </div>
     
   </div>
@@ -109,7 +111,7 @@ To change the ink ripple color:
 </template>
 <script>
 
-  Polymer('paper-tabs', {
+  Polymer(Polymer.mixin({
     
     /**
      * If true, ink ripple effect is disabled.
@@ -165,6 +167,19 @@ To change the ink ripple color:
      */
     hideScrollButton: false,
     
+    /**
+     * If true, the tabs are aligned to bottom (the selection bar appears at the top).
+     *
+     @attribute alignBottom
+     @type boolean
+     @default false
+     */
+    alignBottom: false,
+
+    eventDelegates: {
+      'core-resize': 'resizeHandler'
+    },
+    
     activateEvent: 'tap',
     
     step: 10,
@@ -179,13 +194,18 @@ To change the ink ripple color:
     },
     
     domReady: function() {
-      this.async('scroll');
+      this.async('resizeHandler');
       this._tabsObserver.observe(this, {childList: true, subtree: true, characterData: true});
     },
+
+    attached: function() {
+      this.resizableAttachedHandler();
+    },
     
     detached: function() {
       Polymer.removeEventListener(this.$.tabsContainer, 'trackx', this._trackxHandler);
       this._tabsObserver.disconnect();
+      this.resizableDetachedHandler();
     },
     
     trackStart: function(e) {
@@ -207,6 +227,11 @@ To change the ink ripple color:
       this.$.tabsContainer.scrollLeft = this._startx - e.dx;
     },
     
+    resizeHandler: function() {
+      this.scroll();
+      this.updateBar();
+    },
+    
     scroll: function() {
       if (!this.scrollable) {
         return;
@@ -214,7 +239,7 @@ To change the ink ripple color:
       var tc = this.$.tabsContainer;
       var l = tc.scrollLeft;
       this.leftHidden = l === 0;
-      this.rightHidden = l === (tc.scrollWidth - tc.clientWidth);
+      this.rightHidden = l === Math.max(0, (tc.scrollWidth - tc.clientWidth));
     },
     
     holdLeft: function() {
@@ -322,7 +347,7 @@ To change the ink ripple color:
       }
     }
     
-  });
+  }, Polymer.CoreResizable));
   
 </script>
 </polymer-element>

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

@@ -15,53 +15,81 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
   outline: none;
 }
 
-#toggleContainer {
-  position: relative;
-  width: 64px;
-  height: 16px;
+/* Class selectors can be overridden by users. */
+
+.toggle-bar {
+  background-color: #000000;
 }
 
-#toggleBar {
-  position: absolute;
-  top: 8px;
-  left: 16px;
-  height: 1px;
-  width: 32px;
-  background-color: #5a5a5a;
-  pointer-events: none;
+.toggle-button {
+  background-color: #f1f1f1;
 }
 
-#toggleBar[checked] {
+[checked] .toggle {
   background-color: #0f9d58;
 }
 
-#toggleContainer[checked] #checkedBar {
-  width: 100%;
+.toggle-ink {
+  color: #bbb;
+}
+
+[checked] .toggle-ink {
+  color: #0f9d58;
+}
+
+/* ID selectors should not be overriden by users. */
+
+#toggleContainer {
+  position: relative;
+  width: 36px;
+  height: 14px;
+}
+
+#toggleContainer[disabled] {
+  opacity: 0.3;
+  pointer-events: none;
 }
 
-#toggleRadio {
+#toggleBar {
   position: absolute;
-  left: 0;
-  padding: 8px 48px 8px 0;
-  margin: -8px -48px -8px 0;
-  transition: -webkit-transform linear .08s;
-  transition: transform linear .08s;
+  height: 100%;
+  width: 100%;
+  border-radius: 8px;
+  pointer-events: none;
+  opacity: 0.26;
+  transition: background-color linear .08s;
 }
 
-#toggleRadio[checked] {
-  -webkit-transform: translate(48px, 0);
-  transform: translate(48px, 0);
-  padding: 8px 0 8px 48px;
-  margin: -8px 0 -8px -48px;
+[checked] #toggleBar {
+  opacity: 0.5;
 }
 
-#toggleRadio.dragging {
+#toggleButton {
+  position: absolute;
+  top: -3px;
+  height: 20px;
+  width: 20px;
+  border-radius: 50%;
+  box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.4);
+  transition: -webkit-transform linear .08s, background-color linear .08s;
+  transition: transform linear .08s, background-color linear .08s;
+}
+
+#toggleButton.dragging {
   -webkit-transition: none;
   transition: none;
 }
 
-/* disabled state */
-#toggleContainer[disabled] {
-  opacity: 0.3;
+[checked] #toggleButton {
+  -webkit-transform: translate(16px, 0);
+  transform: translate(16px, 0);
+}
+
+#ink {
+  position: absolute;
+  top: -14px;
+  left: -14px;
+  width: 48px;
+  height: 48px;
   pointer-events: none;
 }

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

@@ -17,40 +17,38 @@ Example:
 
 Styling toggle button:
 
-To change the ink color for checked state:
+To change the toggle color:
 
-    paper-toggle-button::shadow paper-radio-button::shadow #ink[checked] {
-      color: #4285f4;
+    paper-toggle-button::shadow .toggle {
+      background-color: #9c27b0;
     }
+
+To change the ink color:
     
-To change the radio checked color:
-    
-    paper-toggle-button::shadow paper-radio-button::shadow #onRadio {
-      background-color: #4285f4;
+    paper-toggle-button::shadow .toggle-ink {
+      color: #009688;
     }
-    
-To change the bar color for checked state:
 
-    paper-toggle-button::shadow #toggleBar[checked] {
+To change the checked toggle color:
+
+    paper-toggle-button::shadow [checked] .toggle {
       background-color: #4285f4;
     }
-    
-To change the ink color for unchecked state:
 
-    paper-toggle-button::shadow paper-radio-button::shadow #ink {
-      color: #b5b5b5;
-    }
-    
-To change the radio unchecked color:
-    
-    paper-toggle-button::shadow paper-radio-button::shadow #offRadio {
-      border-color: #b5b5b5;
+To change the checked ink color:
+
+    paper-toggle-button::shadow [checked] .toggle-ink {
+      color: #4285f4;
     }
 
-To change the bar color for unchecked state:
+To change the toggle bar and toggle button colors separately:
 
-    paper-toggle-button::shadow #toggleBar {
-      background-color: red;
+    paper-toggle-button::shadow .toggle-bar {
+      background-color: #5677fc;
+    }
+
+    paper-toggle-button::shadow .toggle-button {
+      background-color: #9c27b0;
     }
 
 @group Paper Elements
@@ -59,19 +57,23 @@ To change the bar color for unchecked state:
 -->
 
 <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>
 
   <link rel="stylesheet" href="paper-toggle-button.css">
 
-  <div id="toggleContainer" disabled?="{{disabled}}">
-  
-    <div id="toggleBar" checked?="{{checked}}"></div>
+  <core-a11y-keys target="{{}}" keys="space" on-keys-pressed="{{tap}}"></core-a11y-keys>
+
+  <div id="toggleContainer" checked?="{{checked}}" disabled?="{{disabled}}">
   
-    <paper-radio-button id="toggleRadio" toggles checked="{{checked}}" on-change="{{changeAction}}" on-core-change="{{stopPropagation}}"
-        on-trackstart="{{trackStart}}" on-trackx="{{trackx}}" on-trackend="{{trackEnd}}"></paper-radio-button>
-    
+    <div id="toggleBar" class="toggle toggle-bar"></div>
+
+    <div id="toggleButton" class="toggle toggle-button">
+      <paper-ripple id="ink" class="toggle-ink circle"></paper-ripple>
+    </div>
+
   </div>
 
 </template>
@@ -99,7 +101,7 @@ To change the bar color for unchecked state:
      * @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.
@@ -110,23 +112,55 @@ To change the bar color for unchecked state:
      */
     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) {
-      this._w = this.$.toggleBar.offsetLeft + this.$.toggleBar.offsetWidth;
+      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.$.toggleRadio.classList.add('dragging');
-      var s =  this.$.toggleRadio.style;
+      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.$.toggleRadio.style;
+      var s =  this.$.toggleButton.style;
       s.transform = s.webkitTransform = '';
-      this.$.toggleRadio.classList.remove('dragging');
+      this.$.toggleButton.classList.remove('dragging');
       var old = this.checked;
       this.checked = Math.abs(this._x) > this._w / 2;
       if (this.checked !== old) {
@@ -137,15 +171,6 @@ To change the bar color for unchecked state:
     checkedChanged: function() {
       this.setAttribute('aria-pressed', Boolean(this.checked));
       this.fire('core-change');
-    },
-    
-    changeAction: function(e) {
-      e.stopPropagation();
-      this.fire('change');
-    },
-    
-    stopPropagation: function(e) {
-      e.stopPropagation();
     }
 
   });