RubyGems - polymer-paper-rails - Versions diffs - 0.2.6 → 1.0.0.pre.rc.1 - Mend

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

Files changed (634) hide show

data/app/assets/components/core-scroll-header-panel/core-scroll-header-panel.html DELETED Viewed

@@ -1,360 +0,0 @@
-<!--
-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
--->
-<!--
-`core-scroll-header-panel` contains a header section and a content section.  The
-header is initially on the top part of the view but it scrolls away with the
-rest of the scrollable content.  Upon scrolling slightly up at any point, the
-header scrolls back into view.  This saves screen space and allows users to
-access important controls by easily moving them back to the view.
-__Important:__ The `core-scroll-header-panel` will not display if its parent does not have a height.
-Using [layout attributes](http://www.polymer-project.org/docs/polymer/layout-attrs.html), you can easily make the `core-scroll-header-panel` fill the screen
-    <body fullbleed layout vertical>
-      <core-scroll-header-panel flex>
-        <core-toolbar>
-          <div>Hello World!</div>
-        </core-toolbar>
-      </core-scroll-header-panel>
-    </body>
-or, if you would prefer to do it in CSS, just give `html`, `body`, and `core-scroll-header-panel` a height of 100%:
-    html, body {
-      height: 100%;
-      margin: 0;
-    }
-    core-scroll-header-panel {
-      height: 100%;
-    }
-`core-scroll-header-panel` works well with `core-toolbar` but can use any element
-that represents a header by adding a `core-header` class to it.
-    <core-scroll-header-panel>
-      <core-toolbar>Header</core-toolbar>
-      <div>Content goes here...</div>
-    </core-scroll-header-panel>
-@group Polymer Core Elements
-@element core-scroll-header-panel
-@mixins Polymer.CoreResizable https://github.com/polymer/core-resizable
-@homepage github.io
--->
-<link rel="import" href="../polymer/polymer.html">
-<link rel="import" href="../core-resizable/core-resizable.html">
-<polymer-element name="core-scroll-header-panel">
-<template>
-  <link rel="stylesheet" href="core-scroll-header-panel.css">
-  <div id="mainContainer">
-    <content id="mainContent" select=":not(core-toolbar):not(.core-header)"></content>
-  </div>
-  <div id="headerContainer">
-    <div class="bg-container">
-      <div id="condensedHeaderBg"></div>
-      <div id="headerBg"></div>
-    </div>
-    <content id="headerContent" select="core-toolbar, .core-header"></content>
-  </div>
-</template>
-<script>
-(function() {
-  Polymer(Polymer.mixin({
-    /**
-     * Fired when the content has been scrolled.
-     *
-     * @event scroll
-     */
-    /**
-     * Fired when the header is transformed.
-     *
-     * @event core-header-transform
-     */
-    publish: {
-      /**
-       * If true, the header's height will condense to `_condensedHeaderHeight`
-       * as the user scrolls down from the top of the content area.
-       *
-       * @attribute condenses
-       * @type boolean
-       * @default false
-       */
-      condenses: false,
-      /**
-       * If true, no cross-fade transition from one background to another.
-       *
-       * @attribute noDissolve
-       * @type boolean
-       * @default false
-       */
-      noDissolve: false,
-      /**
-       * If true, the header doesn't slide back in when scrolling back up.
-       *
-       * @attribute noReveal
-       * @type boolean
-       * @default false
-       */
-      noReveal: false,
-      /**
-       * If true, the header is fixed to the top and never moves away.
-       *
-       * @attribute fixed
-       * @type boolean
-       * @default false
-       */
-      fixed: false,
-      /**
-       * If true, the condensed header is always shown and does not move away.
-       *
-       * @attribute keepCondensedHeader
-       * @type boolean
-       * @default false
-       */
-      keepCondensedHeader: false,
-      /**
-       * The height of the header when it is at its full size.
-       *
-       * By default, the height will be measured when it is ready.  If the height
-       * changes later the user needs to either set this value to reflect the
-       * new height or invoke `measureHeaderHeight()`.
-       *
-       * @attribute headerHeight
-       * @type number
-       * @default 0
-       */
-      headerHeight: 0,
-      /**
-       * The height of the header when it is condensed.
-       *
-       * By default, `_condensedHeaderHeight` is 1/3 of `headerHeight` unless
-       * this is specified.
-       *
-       * @attribute condensedHeaderHeight
-       * @type number
-       * @default 0
-       */
-      condensedHeaderHeight: 0,
-      /**
-       * By default, the top part of the header stays when the header is being
-       * condensed.  Set this to true if you want the top part of the header
-       * to be scrolled away.
-       *
-       * @attribute scrollAwayTopbar
-       * @type boolean
-       * @default false
-       */
-      scrollAwayTopbar: false
-    },
-    prevScrollTop: 0,
-    headerMargin: 0,
-    y: 0,
-    observe: {
-      'headerMargin fixed': 'setup'
-    },
-    eventDelegates: {
-      'core-resize': 'measureHeaderHeight'
-    },
-    attached: function() {
-      this.resizableAttachedHandler();
-    },
-    ready: function() {
-      this._scrollHandler = this.scroll.bind(this);
-      this.scroller.addEventListener('scroll', this._scrollHandler);
-    },
-    detached: function() {
-      this.scroller.removeEventListener('scroll', this._scrollHandler);
-      this.resizableDetachedHandler();
-    },
-    domReady: function() {
-      this.async('measureHeaderHeight');
-    },
-    get header() {
-      return this.$.headerContent.getDistributedNodes()[0];
-    },
-    /**
-     * Returns the scrollable element.
-     *
-     * @property scroller
-     * @type Object
-     */
-    get scroller() {
-      return this.$.mainContainer;
-    },
-    /**
-     * Invoke this to tell `core-scroll-header-panel` to re-measure the header's
-     * height.
-     *
-     * @method measureHeaderHeight
-     */
-    measureHeaderHeight: function() {
-      var header = this.header;
-      if (header && header.offsetHeight) {
-        this.headerHeight = header.offsetHeight;
-      }
-    },
-    headerHeightChanged: function() {
-      if (!this.condensedHeaderHeight) {
-        // assume _condensedHeaderHeight is 1/3 of the headerHeight
-        this._condensedHeaderHeight = this.headerHeight * 1 / 3;
-      }
-      this.condensedHeaderHeightChanged();
-    },
-    condensedHeaderHeightChanged: function() {
-      if (this.condensedHeaderHeight) {
-        this._condensedHeaderHeight = this.condensedHeaderHeight;
-      }
-      if (this.headerHeight) {
-        this.headerMargin = this.headerHeight - this._condensedHeaderHeight;
-      }
-    },
-    condensesChanged: function() {
-      if (this.condenses) {
-        this.scroll();
-      } else {
-        // reset transform/opacity set on the header
-        this.condenseHeader(null);
-      }
-    },
-    setup: function() {
-      var s = this.scroller.style;
-      s.paddingTop = this.fixed ? '' : this.headerHeight + 'px';
-      s.top = this.fixed ? this.headerHeight + 'px' : '';
-      if (this.fixed) {
-        this.transformHeader(null);
-      } else {
-        this.scroll();
-      }
-    },
-    transformHeader: function(y) {
-      var s = this.$.headerContainer.style;
-      this.translateY(s, -y);
-      if (this.condenses) {
-        this.condenseHeader(y);
-      }
-      this.fire('core-header-transform', {y: y, height: this.headerHeight,
-          condensedHeight: this._condensedHeaderHeight});
-    },
-    condenseHeader: function(y) {
-      var reset = y == null;
-      // adjust top bar in core-header so the top bar stays at the top
-      if (!this.scrollAwayTopbar && this.header.$ && this.header.$.topBar) {
-        this.translateY(this.header.$.topBar.style,
-            reset ? null : Math.min(y, this.headerMargin));
-      }
-      // transition header bg
-      var hbg = this.$.headerBg.style;
-      if (!this.noDissolve) {
-        hbg.opacity = reset ? '' : (this.headerMargin - y) / this.headerMargin;
-      }
-      // adjust header bg so it stays at the center
-      this.translateY(hbg, reset ? null : y / 2);
-      // transition condensed header bg
-      var chbg = this.$.condensedHeaderBg.style;
-      if (!this.noDissolve) {
-        chbg = this.$.condensedHeaderBg.style;
-        chbg.opacity = reset ? '' : y / this.headerMargin;
-        // adjust condensed header bg so it stays at the center
-        this.translateY(chbg, reset ? null : y / 2);
-      }
-    },
-    translateY: function(s, y) {
-      var t = y == null ? '' : 'translate3d(0, ' + y + 'px, 0)';
-      setTransform(s, t);
-    },
-    scroll: function(event) {
-      if (!this.header) {
-        return;
-      }
-      var sTop = this.scroller.scrollTop;
-      var y = Math.min(this.keepCondensedHeader ?
-          this.headerMargin : this.headerHeight, Math.max(0,
-          (this.noReveal ? sTop : this.y + sTop - this.prevScrollTop)));
-      if (this.condenses && this.prevScrollTop >= sTop && sTop > this.headerMargin) {
-        y = Math.max(y, this.headerMargin);
-      }
-      if (!event || !this.fixed && y !== this.y) {
-        this.transformHeader(y);
-      }
-      this.prevScrollTop = Math.max(sTop, 0);
-      this.y = y;
-      if (event) {
-        this.fire('scroll', {target: this.scroller}, this, false);
-      }
-    }
-  }, Polymer.CoreResizable));
-  //determine proper transform mechanizm
-  if (document.documentElement.style.transform !== undefined) {
-    var setTransform = function(style, string) {
-      style.transform = string;
-    }
-  } else {
-    var setTransform = function(style, string) {
-      style.webkitTransform = string;
-    }
-  }
-})();
-</script>
-</polymer-element>

data/app/assets/components/core-scroll-header-panel/metadata.html DELETED Viewed

@@ -1,41 +0,0 @@
-<!--
-    @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-scroll-header-panel" label="Scroll Header Panel" isContainer group="Core">
-  <template>
-    <core-scroll-header-panel condenses style="width: 380px; height: 460px;">
-      <core-toolbar class="tall" style="background-color: #4285f4; color: #f1f1f1; fill: #f1f1f1;">
-        <core-icon-button icon="arrow-back"></core-icon-button>
-        <div flex></div>
-        <core-icon-button icon="search"></core-icon-button>
-        <core-icon-button icon="more-vert"></core-icon-button>
-        <div class="bottom indent">Title</div>
-      </core-toolbar>
-      <section content style="height: 5000px; background: linear-gradient(rgb(214, 227, 231), lightblue);"></section>
-    </core-scroll-header-panel>
-  </template>
-  <template id="imports">
-    <link rel="import" href="../core-icon-button/core-icon-button.html">
-    <link rel="import" href="../core-toolbar/core-toolbar.html">
-    <link rel="import" href="core-scroll-header-panel.html">
-  </template>
-</x-meta>

data/app/assets/components/core-selection/core-selection.html DELETED Viewed

@@ -1,149 +0,0 @@
-<!--
-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
--->
-<!--
-@group Polymer Core Elements
-The `<core-selection>` element is used to manage selection state. It has no
-visual appearance and is typically used in conjunction with another element.
-For example, [core-selector](#core-selector)
-uses a `<core-selection>` to manage selection.
-To mark an item as selected, call the `select(item)` method on
-`<core-selection>`. The item itself is an argument to this method.
-The `<core-selection>`element manages selection state for any given set of
-items. When an item is selected, the `core-select` event is fired.
-The attribute `multi` indicates if multiple items can be selected at once.
-Example:
-    <polymer-element name="selection-example">
-       <template>
-         <style>
-           polyfill-next-selector { content: ':host > .selected'; }
-           ::content > .selected {
-             font-weight: bold;
-             font-style: italic;
-           }
-         </style>
-         <ul on-tap="{{itemTapAction}}">
-           <content></content>
-         </ul>
-         <core-selection id="selection" multi
-                         on-core-select="{{selectAction}}"></core-selection>
-       </template>
-       <script>
-         Polymer('selection-example', {
-           itemTapAction: function(e, detail, sender) {
-             this.$.selection.select(e.target);
-           },
-           selectAction: function(e, detail, sender) {
-             detail.item.classList.toggle('selected', detail.isSelected);
-           }
-         });
-       </script>
-    </polymer-element>
-    <selection-example>
-      <li>Red</li>
-      <li>Green</li>
-      <li>Blue</li>
-    </selection-example>
-@element core-selection
--->
-<!--
-Fired when an item's selection state is changed. This event is fired both
-when an item is selected or deselected. The `isSelected` detail property
-contains the selection state.
-@event core-select
-@param {Object} detail
-  @param {boolean} detail.isSelected true for selection and false for de-selection
-  @param {Object} detail.item the item element
--->
-<link rel="import" href="../polymer/polymer.html">
-<polymer-element name="core-selection" attributes="multi" hidden>
-  <script>
-    Polymer('core-selection', {
-      /**
-       * If true, multiple selections are allowed.
-       *
-       * @attribute multi
-       * @type boolean
-       * @default false
-       */
-      multi: false,
-      ready: function() {
-        this.clear();
-      },
-      clear: function() {
-        this.selection = [];
-      },
-      /**
-       * Retrieves the selected item(s).
-       * @method getSelection
-       * @returns Returns the selected item(s). If the multi property is true,
-       * getSelection will return an array, otherwise it will return
-       * the selected item or undefined if there is no selection.
-      */
-      getSelection: function() {
-        return this.multi ? this.selection : this.selection[0];
-      },
-      /**
-       * Indicates if a given item is selected.
-       * @method isSelected
-       * @param {any} item The item whose selection state should be checked.
-       * @returns Returns true if `item` is selected.
-      */
-      isSelected: function(item) {
-        return this.selection.indexOf(item) >= 0;
-      },
-      setItemSelected: function(item, isSelected) {
-        if (item !== undefined && item !== null) {
-          if (isSelected) {
-            this.selection.push(item);
-          } else {
-            var i = this.selection.indexOf(item);
-            if (i >= 0) {
-              this.selection.splice(i, 1);
-            }
-          }
-          this.fire("core-select", {isSelected: isSelected, item: item});
-        }
-      },
-      /**
-       * Set the selection state for a given `item`. If the multi property
-       * is true, then the selected state of `item` will be toggled; otherwise
-       * the `item` will be selected.
-       * @method select
-       * @param {any} item: The item to select.
-      */
-      select: function(item) {
-        if (this.multi) {
-          this.toggle(item);
-        } else if (this.getSelection() !== item) {
-          this.setItemSelected(this.getSelection(), false);
-          this.setItemSelected(item, true);
-        }
-      },
-      /**
-       * Toggles the selection state for `item`.
-       * @method toggle
-       * @param {any} item: The item to toggle.
-      */
-      toggle: function(item) {
-        this.setItemSelected(item, !this.isSelected(item));
-      }
-    });
-  </script>
-</polymer-element>