polymer-paper-rails 0.2.0 → 0.2.5

data/app/assets/components/core-dropdown/metadata.html

@@ -0,0 +1,62 @@
+<!--
+    @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
+-->
+<x-meta id="core-menu" label="Menu" group="Core" isContainer>
+
+  <template>
+  
+    <core-menu selected="0" style="font-size: 16px;">
+  
+      <core-submenu icon="settings" label="Topics">
+      
+        <core-item label="Topic 1"></core-item>
+        <core-item label="Topic 2"></core-item>
+        
+      </core-submenu>
+      
+      <core-submenu icon="settings" label="Favorites">
+      
+        <core-item label="Favorite 1"></core-item>
+        <core-item label="Favorite 2"></core-item>
+        <core-item label="Favorite 3"></core-item>
+        
+      </core-submenu>
+      
+    </core-menu>
+
+  </template>
+  
+  <template id="imports">
+  
+    <link rel="import" href="core-submenu.html">
+    
+  </template>
+  
+</x-meta>
+
+<x-meta id="core-submenu" label="Sub Menu" group="Core" isContainer>
+
+  <template>
+  
+    <core-submenu icon="settings" label="Topics">
+    
+      <core-item label="Topic 1"></core-item>
+      <core-item label="Topic 2"></core-item>
+      
+    </core-submenu>
+
+  </template>
+  
+  <template id="imports">
+  
+    <link rel="import" href="core-submenu.html">
+    
+  </template>
+  
+</x-meta>

data/app/assets/components/core-elements/paper-elements.html

@@ -21,6 +21,7 @@ See `bower.json` for the complete list of components.
 <link rel="import" href="../paper-checkbox/paper-checkbox.html">
 <link rel="import" href="../paper-dialog/paper-dialog.html">
 <link rel="import" href="../paper-dropdown/paper-dropdown.html">
+<link rel="import" href="../paper-dropdown-menu/paper-dropdown-menu.html">
 <link rel="import" href="../paper-fab/paper-fab.html">
 <link rel="import" href="../paper-icon-button/paper-icon-button.html">
 <link rel="import" href="../paper-input/paper-input.html">
@@ -32,6 +33,7 @@ See `bower.json` for the complete list of components.
 <link rel="import" href="../paper-ripple/paper-ripple.html">
 <link rel="import" href="../paper-shadow/paper-shadow.html">
 <link rel="import" href="../paper-slider/paper-slider.html">
+<link rel="import" href="../paper-spinner/paper-spinner.html">
 <link rel="import" href="../paper-tabs/paper-tabs.html">
 <link rel="import" href="../paper-toast/paper-toast.html">
 <link rel="import" href="../paper-toggle-button/paper-toggle-button.html">

data/app/assets/components/core-focusable/core-focusable.html

@@ -0,0 +1,4 @@
+<link href="../polymer/polymer.html" rel="import">
+
+<script src="polymer-mixin.js"></script>
+<script src="core-focusable.js"></script>

data/app/assets/components/core-focusable/core-focusable.js

@@ -0,0 +1,134 @@
+/**
+ * @group Polymer Mixins
+ *
+ * `Polymer.CoreFocusable` is a mixin for elements that the user can interact with.
+ * Elements using this mixin will receive attributes reflecting the focus, pressed
+ * and disabled states.
+ *
+ * @element Polymer.CoreFocusable
+ * @status unstable
+ */
+
+Polymer.CoreFocusable = {
+
+  mixinPublish: {
+
+    /**
+     * If true, the element is currently active either because the
+     * user is touching it, or the button is a toggle
+     * and is currently in the active state.
+     *
+     * @attribute active
+     * @type boolean
+     * @default false
+     */
+    active: {value: false, reflect: true},
+
+    /**
+     * If true, the element currently has focus due to keyboard
+     * navigation.
+     *
+     * @attribute focused
+     * @type boolean
+     * @default false
+     */
+    focused: {value: false, reflect: true},
+
+    /**
+     * If true, the user is currently holding down the button.
+     *
+     * @attribute pressed
+     * @type boolean
+     * @default false
+     */
+    pressed: {value: false, reflect: true},
+
+    /**
+     * If true, the user cannot interact with this element.
+     *
+     * @attribute disabled
+     * @type boolean
+     * @default false
+     */
+    disabled: {value: false, reflect: true},
+
+    /**
+     * If true, the button toggles the active state with each tap.
+     * Otherwise, the button becomes active when the user is holding
+     * it down.
+     *
+     * @attribute toggle
+     * @type boolean
+     * @default false
+     */
+    toggle: false
+
+  },
+
+  mixinDelegates: {
+    contextMenu: '_contextMenuAction',
+    down: '_downAction',
+    up: '_upAction',
+    focus: '_focusAction',
+    blur: '_blurAction'
+  },
+
+  mixinObserve: {
+    disabled: '_disabledChanged'
+  },
+
+  _disabledChanged: function() {
+    if (this.disabled) {
+      this.style.pointerEvents = 'none';
+      this.removeAttribute('tabindex');
+      this.setAttribute('aria-disabled', '');
+    } else {
+      this.style.pointerEvents = '';
+      this.setAttribute('tabindex', 0);
+      this.removeAttribute('aria-disabled');
+    }
+  },
+
+  _downAction: function() {
+    this.pressed = true;
+
+    if (this.toggle) {
+      this.active = !this.active;
+    } else {
+      this.active = true;
+    }
+  },
+
+  // Pulling up the context menu for an item should focus it; but we need to
+  // be careful about how we deal with down/up events surrounding context
+  // menus. The up event typically does not fire until the context menu
+  // closes: so we focus immediately.
+  //
+  // This fires _after_ downAction.
+  _contextMenuAction: function(e) {
+    // Note that upAction may fire _again_ on the actual up event.
+    this._upAction(e);
+    this._focusAction();
+  },
+
+  _upAction: function() {
+    this.pressed = false;
+
+    if (!this.toggle) {
+      this.active = false;
+    }
+  },
+
+  _focusAction: function() {
+    if (!this.pressed) {
+      // Only render the "focused" state if the element gains focus due to
+      // keyboard navigation.
+      this.focused = true;
+    }
+  },
+
+  _blurAction: function() {
+    this.focused = false;
+  }
+
+}

data/app/assets/components/core-focusable/polymer-mixin.js

@@ -0,0 +1,35 @@
+Polymer.mixin2 = function(prototype, mixin) {
+
+  // adds a single mixin to prototype
+
+  if (mixin.mixinPublish) {
+    prototype.publish = prototype.publish || {};
+    Polymer.mixin(prototype.publish, mixin.mixinPublish);
+  }
+
+  if (mixin.mixinDelegates) {
+    prototype.eventDelegates = prototype.eventDelegates || {};
+    for (var e in mixin.mixinDelegates) {
+      if (!prototype.eventDelegates[e]) {
+        prototype.eventDelegates[e] = mixin.mixinDelegates[e];
+      }
+    }
+  }
+
+  if (mixin.mixinObserve) {
+    prototype.observe = prototype.observe || {};
+    for (var o in mixin.mixinObserve) {
+      if (!prototype.observe[o] && !prototype[o + 'Changed']) {
+        prototype.observe[o] = mixin.mixinObserve[o];
+      }
+    }
+  }
+
+  Polymer.mixin(prototype, mixin);
+
+  delete prototype.mixinPublish;
+  delete prototype.mixinDelegates;
+  delete prototype.mixinObserve;
+
+  return prototype;
+};

data/app/assets/components/core-header-panel/core-header-panel.css

@@ -18,9 +18,6 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
   right: 0;
   bottom: 0;
   left: 0;
-  overflow-y: auto;
-  overflow-x: hidden;
-  -webkit-overflow-scrolling: touch;
 }
 
 #mainPanel {
@@ -54,6 +51,12 @@ mode: scroll
   overflow: visible;
 }
 
+:host([mode=scroll]) #outerContainer {
+  overflow-y: auto;
+  overflow-x: hidden;
+  -webkit-overflow-scrolling: touch;
+}
+
 /*
 mode: cover
 */

data/app/assets/components/core-header-panel/core-header-panel.html

@@ -42,7 +42,7 @@ Example:
       <div>Content goes here...</div>
     </core-header-panel>
 
-If you want to use other than `core-toolbar` for the header, add 
+If you want to use other than `core-toolbar` for the header, add
 `core-header` class to that element.
 
 Example:
@@ -51,7 +51,7 @@ Example:
       <div class="core-header">Header</div>
       <div>Content goes here...</div>
     </core-header-panel>
-    
+
 To have the content fits to the main area, use `fit` attribute.
 
     <core-header-panel>
@@ -72,19 +72,19 @@ Use `mode` to control the header and scrolling behavior.
 <template>
 
   <link rel="stylesheet" href="core-header-panel.css">
-  
-  <div id="outerContainer" on-scroll="{{scroll}}" vertical layout>
+
+  <div id="outerContainer" vertical layout>
 
     <content id="headerContent" select="core-toolbar, .core-header"></content>
 
     <div id="mainPanel" flex vertical layout>
-    
-      <div id="mainContainer" flex?="{{mode !== 'cover'}}" on-scroll="{{scroll}}">
+
+      <div id="mainContainer" flex?="{{mode !== 'cover'}}">
         <content id="mainContent" select="*"></content>
       </div>
-      
+
       <div id="dropShadow"></div>
-      
+
     </div>
 
   </div>
@@ -92,33 +92,42 @@ Use `mode` to control the header and scrolling behavior.
 </template>
 <script>
 
-  Polymer('core-header-panel', {
-    
+  Polymer({
+
     /**
-     * Fired when the content has been scrolled.  `details.target` returns
+     * Fired when the content has been scrolled.  `event.detail.target` returns
      * the scrollable element which you can use to access scroll info such as
      * `scrollTop`.
      *
+     *     <core-header-panel on-scroll="{{scrollHandler}}">
+     *       ...
+     *     </core-header-panel>
+     *
+     *
+     *     scrollHandler: function(event) {
+     *       var scroller = event.detail.target;
+     *       console.log(scroller.scrollTop);
+     *     }
+     *
      * @event scroll
      */
 
     publish: {
       /**
        * Controls header and scrolling behavior. Options are
-       * `standard`, `seamed`, `waterfall`, `waterfall-tall`, 
-       * `waterfall-medium-tall`, `scroll` and `cover`.
-       * Default is `standard`.
+       * `standard`, `seamed`, `waterfall`, `waterfall-tall`, `scroll` and 
+       * `cover`. Default is `standard`.
        *
-       * `standard`: The header is a step above the panel. The header will consume the 
-       * panel at the point of entry, preventing it from passing through to the 
+       * `standard`: The header is a step above the panel. The header will consume the
+       * panel at the point of entry, preventing it from passing through to the
        * opposite side.
        *
        * `seamed`: The header is presented as seamed with the panel.
        *
-       * `waterfall`: Similar to standard mode, but header is initially presented as 
+       * `waterfall`: Similar to standard mode, but header is initially presented as
        * seamed with panel, but then separates to form the step.
        *
-       * `waterfall-tall`: The header is initially taller (`tall` class is added to 
+       * `waterfall-tall`: The header is initially taller (`tall` class is added to
        * the header).  As the user scrolls, the header separates (forming an edge)
        * while condensing (`tall` class is removed from the header).
        *
@@ -136,11 +145,11 @@ Use `mode` to control the header and scrolling behavior.
        *         margin: 60px 60px 60px 0;
        *       }
        *     </style>
-       * 
+       *
        *     <core-header-panel mode="cover">
-       *       <core-appbar class="tall">
+       *       <core-toolbar class="tall">
        *         <core-icon-button icon="menu"></core-icon-button>
-       *       </core-appbar>
+       *       </core-toolbar>
        *       <div class="content"></div>
        *     </core-header-panel>
        *
@@ -149,7 +158,7 @@ Use `mode` to control the header and scrolling behavior.
        * @default ''
        */
       mode: {value: '', reflect: true},
-      
+
       /**
        * The class used in waterfall-tall mode.  Change this if the header
        * accepts a different class for toggling height, e.g. "medium-tall"
@@ -159,7 +168,7 @@ Use `mode` to control the header and scrolling behavior.
        * @default 'tall'
        */
       tallClass: 'tall',
-      
+
       /**
        * If true, the drop-shadow is always shown no matter what mode is set to.
        *
@@ -169,12 +178,57 @@ Use `mode` to control the header and scrolling behavior.
        */
       shadow: false
     },
+
+    animateDuration: 200,
+
+    modeConfigs: {
+      shadowMode: {'waterfall': 1, 'waterfall-tall': 1},
+      noShadow: {'seamed': 1, 'cover': 1, 'scroll': 1},
+      tallMode: {'waterfall-tall': 1},
+      outerScroll: {'scroll': 1}
+    },
+    
+    ready: function() {
+      this.scrollHandler = this.scroll.bind(this);
+      this.addListener();
+    },
+    
+    detached: function() {
+      this.removeListener(this.mode);
+    },
     
+    addListener: function() {
+      this.scroller.addEventListener('scroll', this.scrollHandler);
+    },
+    
+    removeListener: function(mode) {
+      var s = this.getScrollerForMode(mode);
+      s.removeEventListener('scroll', this.scrollHandler);
+    },
+
     domReady: function() {
       this.async('scroll');
     },
 
-    modeChanged: function() {
+    modeChanged: function(old) {
+      var configs = this.modeConfigs;
+      var header = this.header;
+      if (header) {
+        // in tallMode it may add tallClass to the header; so do the cleanup
+        // when mode is changed from tallMode to not tallMode
+        if (configs.tallMode[old] && !configs.tallMode[this.mode]) {
+          header.classList.remove(this.tallClass);
+          this.async(function() {
+            header.classList.remove('animate');
+          }, null, this.animateDuration);
+        } else {
+          header.classList.toggle('animate', configs.tallMode[this.mode]);
+        }
+      }
+      if (configs && (configs.outerScroll[this.mode] || configs.outerScroll[old])) {
+        this.removeListener(old);
+        this.addListener();
+      }
       this.scroll();
     },
 
@@ -182,6 +236,11 @@ Use `mode` to control the header and scrolling behavior.
       return this.$.headerContent.getDistributedNodes()[0];
     },
     
+    getScrollerForMode: function(mode) {
+      return this.modeConfigs.outerScroll[mode] ?
+          this.$.outerContainer : this.$.mainContainer;
+    },
+
     /**
      * Returns the scrollable element.
      *
@@ -189,33 +248,26 @@ Use `mode` to control the header and scrolling behavior.
      * @type Object
      */
     get scroller() {
-      return this.mode === 'scroll' ? 
-          this.$.outerContainer : this.$.mainContainer;
+      return this.getScrollerForMode(this.mode);
     },
-    
+
     scroll: function() {
-      var shadowMode = {'waterfall': 1, 'waterfall-tall': 1};
-      var noShadow = {'seamed': 1, 'cover': 1, 'scroll': 1};
-      var tallMode = {'waterfall-tall': 1};
-      
+      var configs = this.modeConfigs;
       var main = this.$.mainContainer;
       var header = this.header;
-      
+
       var sTop = main.scrollTop;
       var atTop = sTop === 0;
-      
-      if (header) {
-        this.$.dropShadow.classList.toggle('hidden', !this.shadow &&
-            (atTop && shadowMode[this.mode] || noShadow[this.mode]));
-        
-        if (tallMode[this.mode]) {
-          header.classList.toggle(this.tallClass, atTop || 
-              main.scrollHeight < this.$.outerContainer.offsetHeight);
-        }
-        
-        header.classList.toggle('animate', tallMode[this.mode]);
+
+      this.$.dropShadow.classList.toggle('hidden', !this.shadow &&
+          (atTop && configs.shadowMode[this.mode] || configs.noShadow[this.mode]));
+
+      if (header && configs.tallMode[this.mode]) {
+        header.classList.toggle(this.tallClass, atTop ||
+            header.classList.contains(this.tallClass) &&
+            main.scrollHeight < this.$.outerContainer.offsetHeight);
       }
-      
+
       this.fire('scroll', {target: this.scroller}, this, false);
     }