RubyGems - polymer-paper-elements-rails - Versions diffs - 0.0.1 - Mend

polymer-paper-elements-rails 0.0.1

Files changed (188) hide show

data/app/assets/components/paper-scroll-header-panel/hero.svg ADDED

@@ -0,0 +1,41 @@
+<?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">
+	<circle cx="170.6" cy="28.5" r="4"/>
+	<circle cx="170.6" cy="58.5" r="4"/>
+	<rect x="170" y="29" width="2" height="30"/>
+	<path d="M163,102H73V24h90V102z M75,100h86V26H75V100z"/>
+	<rect x="74" y="62" width="88" height="2"/>
+	<g id="ic_x5F_add_x0D_">
+	</g>
+	<g>
+		<polygon points="74,59.6 74,62.5 74.5,63 77.4,63 		"/>
+		<polygon points="74,51.9 74,54.7 82.3,63 85.1,63 		"/>
+		<polygon points="74,44.1 74,46.9 90.1,63 92.9,63 		"/>
+		<polygon points="74,36.3 74,39.2 97.8,63 100.7,63 		"/>
+		<polygon points="74,28.6 74,31.4 105.6,63 108.4,63 		"/>
+		<polygon points="78.2,25 75.4,25 113.4,63 116.2,63 		"/>
+		<polygon points="86,25 83.1,25 121.1,63 124,63 		"/>
+		<polygon points="93.7,25 90.9,25 128.9,63 131.7,63 		"/>
+		<polygon points="101.5,25 98.7,25 136.7,63 139.5,63 		"/>
+		<polygon points="109.2,25 106.4,25 144.4,63 147.2,63 		"/>
+		<polygon points="117,25 114.2,25 152.2,63 155,63 		"/>
+		<polygon points="124.8,25 122,25 160,63 162,63 162,62.2 		"/>
+		<polygon points="132.5,25 129.7,25 162,57.3 162,54.5 		"/>
+		<polygon points="140.3,25 137.5,25 162,49.5 162,46.7 		"/>
+		<polygon points="148.1,25 145.2,25 162,41.8 162,38.9 		"/>
+		<polygon points="155.8,25 153,25 162,34 162,31.2 		"/>
+		<polygon points="162,26.2 162,25 160.8,25 		"/>
+	</g>
+</g>
+<g id="Guides">
+</g>
+</svg>

data/app/assets/components/paper-scroll-header-panel/paper-scroll-header-panel.html ADDED

@@ -0,0 +1,455 @@
+<!--
+@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="../iron-resizable-behavior/iron-resizable-behavior.html">
+<!--
+`paper-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 `paper-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 `paper-scroll-header-panel` fill the screen
+    <body class="fullbleed layout vertical">
+      <paper-scroll-header-panel class="flex">
+        <paper-toolbar>
+          <div>Hello World!</div>
+        </paper-toolbar>
+      </paper-scroll-header-panel>
+    </body>
+or, if you would prefer to do it in CSS, just give `html`, `body`, and `paper-scroll-header-panel` a height of 100%:
+    html, body {
+      height: 100%;
+      margin: 0;
+    }
+    paper-scroll-header-panel {
+      height: 100%;
+    }
+`paper-scroll-header-panel` works well with `paper-toolbar` but can use any element
+that represents a header by adding a `paper-header` class to it.
+    <paper-scroll-header-panel>
+      <paper-toolbar>Header</paper-toolbar>
+      <div>Content goes here...</div>
+    </paper-scroll-header-panel>
+Styling scroll-header-panel:
+  To change background for toolbar when it is at its full size:
+  paper-scroll-header-panel {
+    --paper-scroll-header-panel-full-header: {
+      background-color: red;
+    };
+  }
+  To change the background for toolbar when it is condensed:
+  paper-scroll-header-panel {
+    --paper-scroll-header-panel-condensed-header: {
+      background-color: #f4b400;
+    };
+  }
+@group Paper Element
+@element paper-scrollheader-panel
+@demo demo/index.html
+@hero hero.svg
+-->
+<dom-module id="paper-scroll-header-panel">
+  <style>
+    :host {
+      display: block;
+      position: relative;
+      overflow: hidden;
+    }
+    #mainContainer {
+      position: absolute;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      left: 0;
+      box-sizing: border-box;
+      -moz-box-sizing: border-box;
+      -webkit-overflow-scrolling: touch;
+      overflow-x: hidden;
+      overflow-_y: auto;
+      -webkit-transform: translateZ(0);
+      transform: translateZ(0);
+    }
+    #headerContainer {
+      position: absolute;
+      top: 0;
+      right: 0;
+      left: 0;
+    }
+    .bg-container {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      overflow: hidden;
+    }
+    #headerBg {
+      @apply(--paper-scroll-header-panel-full-header);
+    }
+    #condensedHeaderBg {
+      @apply(--paper-scroll-header-panel-condensed-header);
+    }
+    #headerBg, #condensedHeaderBg {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      background-repeat: no-repeat;
+      background-size: cover;
+      background-position: center center;
+    }
+    #condensedHeaderBg {
+      opacity: 0;
+    }
+  </style>
+  <template>
+    <div id="mainContainer">
+      <content id="mainContent" select=":not(paper-toolbar):not(.paper-header)"></content>
+    </div>
+    <div id="headerContainer">
+      <div class="bg-container">
+        <div id="condensedHeaderBg"></div>
+        <div id="headerBg"></div>
+      </div>
+      <content id="headerContent" select="paper-toolbar, .paper-header"></content>
+    </div>
+  </template>
+</dom-module>
+<script>
+(function() {
+  'use strict';
+  Polymer({
+    /**
+     * Fired when the content has been scrolled.
+     *
+     * @event content-scroll
+     */
+    /**
+     * Fired when the header is transformed.
+     *
+     * @event paper-header-transform
+     */
+    is: 'paper-scroll-header-panel',
+    behaviors: [
+      Polymer.IronResizableBehavior
+    ],
+    properties: {
+      /**
+       * If true, the header's height will condense to `_condensedHeaderHeight`
+       * as the user scrolls down from the top of the content area.
+       */
+      condenses: {
+        type: Boolean,
+        value: false,
+        observer: '_condensesChanged'
+      },
+      /**
+       * If true, no cross-fade transition from one background to another.
+       */
+      noDissolve: {
+        type: Boolean,
+        value: false
+      },
+      /**
+       * If true, the header doesn't slide back in when scrolling back up.
+       */
+      noReveal: {
+        type: Boolean,
+        value: false
+      },
+      /**
+       * If true, the header is fixed to the top and never moves away.
+       */
+      fixed: {
+        type: Boolean,
+        value: false
+      },
+      /**
+       * If true, the condensed header is always shown and does not move away.
+       */
+      keepCondensedHeader: {
+        type: Boolean,
+        value: 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()`.
+       */
+      headerHeight: {
+        type: Number,
+        value: 0
+      },
+      /**
+       * The height of the header when it is condensed.
+       *
+       * By default, `_condensedHeaderHeight` is 1/3 of `headerHeight` unless
+       * this is specified.
+       */
+      condensedHeaderHeight: {
+        type: Number,
+        value: 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.
+       */
+      scrollAwayTopbar: {
+        type: Boolean,
+        value: false
+      },
+      _headerMargin: {
+        type: Number
+      },
+      _prevScrollTop: {
+        type: Number
+      },
+      _y: {
+        type: Number
+      }
+    },
+    observers: [
+      '_setup(_headerMargin, headerHeight, fixed)',
+      '_headerHeightChanged(headerHeight, condensedHeaderHeight)',
+      '_condensedHeaderHeightChanged(headerHeight, condensedHeaderHeight)'
+    ],
+    listeners: {
+      'iron-resize': 'measureHeaderHeight'
+    },
+    ready: function() {
+      this.async(this.measureHeaderHeight, 5);
+      this._scrollHandler = this._scroll.bind(this);
+      this.scroller.addEventListener('scroll', this._scrollHandler);
+    },
+    detached: function() {
+      this.scroller.removeEventListener('scroll', this._scrollHandler);
+    },
+    /**
+     * Returns the header element.
+     *
+     * @property header
+     * @type Object
+     */
+    get header() {
+      return Polymer.dom(this.$.headerContent).getDistributedNodes()[0];
+    },
+    /**
+     * Returns the content element.
+     *
+     * @property content
+     * @type Object
+     */
+    get content() {
+      return Polymer.dom(this.$.mainContent).getDistributedNodes()[0];
+    },
+    /**
+     * Returns the scrollable element.
+     *
+     * @property scroller
+     * @type Object
+     */
+    get scroller() {
+      return this.$.mainContainer;
+    },
+    /**
+     * Invoke this to tell `paper-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;
+      }
+    },
+    _condensedHeaderHeightChanged: function() {
+      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('paper-header-transform', {y: y, height: this.headerHeight,
+          condensedHeight: this.condensedHeaderHeight});
+    },
+    _condenseHeader: function(y) {
+      var reset = (y === null);
+      // adjust top bar in paper-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
+      if (!this.noDissolve) {
+        var chbg = this.$.condensedHeaderBg.style;
+        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);
+    },
+    /** @param {Event=} event */
+    _scroll: function(event) {
+      if (!this.header) {
+        return;
+      }
+      var sTop = this.scroller.scrollTop;
+      this._y = this._y || 0;
+      this._prevScrollTop = this._prevScrollTop || 0;
+      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('content-scroll', {target: this.scroller}, {cancelable: false});
+      }
+    }
+  });
+  //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>