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

data/app/assets/components/paper-drawer-panel/paper-drawer-panel.html

@@ -0,0 +1,585 @@
+<!--
+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-media-query/iron-media-query.html">
+<link rel="import" href="../iron-selector/iron-selector.html">
+
+<!--
+`paper-drawer-panel` contains a drawer panel and a main panel.  The drawer
+and the main panel are side-by-side with drawer on the left.  When the browser
+window size is smaller than the `responsiveWidth`, `paper-drawer-panel`
+changes to narrow layout.  In narrow layout, the drawer will be stacked on top
+of the main panel.  The drawer will slide in/out to hide/reveal the main
+panel.
+
+Use the attribute `drawer` to indicate that the element is the drawer panel and
+`main` to indicate that the element is the main panel.
+
+Example:
+
+    <paper-drawer-panel>
+      <div drawer> Drawer panel... </div>
+      <div main> Main panel... </div>
+    </paper-drawer-panel>
+
+The drawer and the main panels are not scrollable.  You can set CSS overflow
+property on the elements to make them scrollable or use `paper-header-panel`.
+
+Example:
+
+    <paper-drawer-panel>
+      <paper-header-panel drawer>
+        <paper-toolbar></paper-toolbar>
+        <div> Drawer content... </div>
+      </paper-header-panel>
+      <paper-header-panel main>
+        <paper-toolbar></paper-toolbar>
+        <div> Main content... </div>
+      </paper-header-panel>
+    </paper-drawer-panel>
+
+An element that should toggle the drawer will automatically do so if it's
+given the `paper-drawer-toggle` attribute.  Also this element will automatically
+be hidden in wide layout.
+
+Example:
+
+    <paper-drawer-panel>
+      <paper-header-panel drawer>
+        <paper-toolbar>
+          <div>Application</div>
+        </paper-toolbar>
+        <div> Drawer content... </div>
+      </paper-header-panel>
+      <paper-header-panel main>
+        <paper-toolbar>
+          <paper-icon-button icon="menu" paper-drawer-toggle></paper-icon-button>
+          <div>Title</div>
+        </paper-toolbar>
+        <div> Main content... </div>
+      </paper-header-panel>
+    </paper-drawer-panel>
+
+To position the drawer to the right, add `right-drawer` attribute.
+
+    <paper-drawer-panel right-drawer>
+      <div drawer> Drawer panel... </div>
+      <div main> Main panel... </div>
+    </paper-drawer-panel>
+
+Styling paper-drawer-panel:
+
+To change the main container:
+  paper-drawer-panel {
+    --paper-drawer-panel-main-container: {
+      background-color: gray;
+    };
+  }
+
+To change the drawer container when it's in the left side:
+  paper-drawer-panel {
+    --paper-drawer-panel-left-drawer-container: {
+      background-color: white;
+    };
+  }
+
+To change the drawer container when it's in the right side:
+
+  paper-drawer-panel {
+    --paper-drawer-panel-right-drawer-container: {
+      background-color: white;
+    };
+  }
+
+@group Paper elements
+@element paper-drawer-panel
+@demo demo/index.html
+@hero hero.svg
+-->
+
+<dom-module id="paper-drawer-panel">
+  <link rel="import" type="css" href="paper-drawer-panel.css">
+
+  <template>
+    <iron-media-query
+        id="mq"
+        on-query-matches-changed="_onQueryMatchesChanged"
+        query="[[_computeMediaQuery(forceNarrow, responsiveWidth)]]">
+    </iron-media-query>
+
+    <iron-selector
+        attr-for-selected="id"
+        class$="[[_computeIronSelectorClass(narrow, transition, dragging, rightDrawer)]]"
+        activate-event=""
+        selected="[[selected]]">
+
+      <div id="main" style$="[[_computeMainStyle(narrow, rightDrawer, drawerWidth)]]">
+        <content select="[main]"></content>
+        <div id="scrim" on-tap="closeDrawer"></div>
+      </div>
+
+      <div id="drawer" style$="[[_computeDrawerStyle(drawerWidth)]]">
+        <content select="[drawer]"></content>
+      </div>
+
+    </iron-selector>
+  </template>
+
+</dom-module>
+
+<script>
+
+  (function() {
+
+    'use strict';
+
+   // this would be the only `paper-drawer-panel` in
+   // the whole app that can be in `dragging` state
+    var sharedPanel = null;
+
+    function classNames(obj) {
+      var classes = [];
+      for (var key in obj) {
+        if (obj.hasOwnProperty(key) && obj[key]) {
+          classes.push(key);
+        }
+      }
+
+      return classes.join(' ');
+    }
+
+    Polymer({
+
+      is: 'paper-drawer-panel',
+
+      /**
+       * Fired when the narrow layout changes.
+       *
+       * @event paper-responsive-change {{narrow: boolean}} detail -
+       *     narrow: true if the panel is in narrow layout.
+       */
+
+      /**
+       * Fired when the selected panel changes.
+       *
+       * Listening for this event is an alternative to observing changes in the `selected` attribute.
+       * This event is fired both when a panel is selected and deselected.
+       * The `isSelected` detail property contains the selection state.
+       *
+       * @event paper-select {{isSelected: boolean, item: Object}} detail -
+       *     isSelected: True for selection and false for deselection.
+       *     item: The panel that the event refers to.
+       */
+
+      properties: {
+
+        /**
+         * The panel to be selected when `paper-drawer-panel` changes to narrow
+         * layout.
+         */
+        defaultSelected: {
+          type: String,
+          value: 'main'
+        },
+
+        /**
+         * If true, swipe from the edge is disable.
+         */
+        disableEdgeSwipe: {
+          type: Boolean,
+          value: false
+        },
+
+        /**
+         * If true, swipe to open/close the drawer is disabled.
+         */
+        disableSwipe: {
+          type: Boolean,
+          value: false
+        },
+
+        /**
+         * Whether the user is dragging the drawer interactively.
+         */
+        dragging: {
+          type: Boolean,
+          value: false
+        },
+
+        /**
+         * Width of the drawer panel.
+         */
+        drawerWidth: {
+          type: String,
+          value: '256px'
+        },
+
+        /**
+         * How many pixels on the side of the screen are sensitive to edge
+         * swipes and peek.
+         */
+        edgeSwipeSensitivity: {
+          type: Number,
+          value: 30
+        },
+
+        /**
+         * If true, ignore `responsiveWidth` setting and force the narrow layout.
+         */
+        forceNarrow: {
+          type: Boolean,
+          value: false
+        },
+
+        /**
+         * Whether the browser has support for the transform CSS property.
+         */
+        hasTransform: {
+          type: Boolean,
+          value: function() {
+            return 'transform' in this.style;
+          }
+        },
+
+        /**
+         * Whether the browser has support for the will-change CSS property.
+         */
+        hasWillChange: {
+          type: Boolean,
+          value: function() {
+            return 'willChange' in this.style;
+          }
+        },
+
+        /**
+         * Returns true if the panel is in narrow layout.  This is useful if you
+         * need to show/hide elements based on the layout.
+         */
+        narrow: {
+          reflectToAttribute: true,
+          type: Boolean,
+          value: false,
+          notify: true
+        },
+
+        /**
+         * Whether the drawer is peeking out from the edge.
+         */
+        peeking: {
+          type: Boolean,
+          value: false
+        },
+
+        /**
+         * Max-width when the panel changes to narrow layout.
+         */
+        responsiveWidth: {
+          type: String,
+          value: '640px'
+        },
+
+        /**
+         * If true, position the drawer to the right.
+         */
+        rightDrawer: {
+          type: Boolean,
+          value: false
+        },
+
+        /**
+         * The panel that is being selected. `drawer` for the drawer panel and
+         * `main` for the main panel.
+         */
+        selected: {
+          reflectToAttribute: true,
+          type: String,
+          value: null
+        },
+
+        /**
+         * The attribute on elements that should toggle the drawer on tap, also elements will
+         * automatically be hidden in wide layout.
+         */
+        drawerToggleAttribute: {
+          type: String,
+          value: 'paper-drawer-toggle'
+        },
+
+        /**
+         * Whether the transition is enabled.
+         */
+        transition: {
+          type: Boolean,
+          value: false
+        },
+
+      },
+
+      listeners: {
+        tap: '_onTap',
+        track: '_onTrack',
+        down: '_downHandler',
+        up: '_upHandler'
+      },
+
+      observers: [
+        '_forceNarrowChanged(forceNarrow, defaultSelected)'
+      ],
+
+      /**
+       * Toggles the panel open and closed.
+       *
+       * @method togglePanel
+       */
+      togglePanel: function() {
+        if (this._isMainSelected()) {
+          this.openDrawer();
+        } else {
+          this.closeDrawer();
+        }
+      },
+
+      /**
+       * Opens the drawer.
+       *
+       * @method openDrawer
+       */
+      openDrawer: function() {
+        this.selected = 'drawer';
+      },
+
+      /**
+       * Closes the drawer.
+       *
+       * @method closeDrawer
+       */
+      closeDrawer: function() {
+        this.selected = 'main';
+      },
+
+      ready: function() {
+        // Avoid transition at the beginning e.g. page loads and enable
+        // transitions only after the element is rendered and ready.
+        this.transition = true;
+      },
+
+      _computeIronSelectorClass: function(narrow, transition, dragging, rightDrawer) {
+        return classNames({
+          dragging: dragging,
+          'narrow-layout': narrow,
+          'right-drawer': rightDrawer,
+          'left-drawer': !rightDrawer,
+          transition: transition
+        });
+      },
+
+      _computeDrawerStyle: function(drawerWidth) {
+        return 'width:' + drawerWidth + ';';
+      },
+
+      _computeMainStyle: function(narrow, rightDrawer, drawerWidth) {
+        var style = '';
+
+        style += 'left:' + ((narrow || rightDrawer) ? '0' : drawerWidth) + ';';
+
+        if (rightDrawer) {
+          style += 'right:' + (narrow ? '' : drawerWidth) + ';';
+        } else {
+          style += 'right:;';
+        }
+
+        return style;
+      },
+
+      _computeMediaQuery: function(forceNarrow, responsiveWidth) {
+        return forceNarrow ? '' : '(max-width: ' + responsiveWidth + ')';
+      },
+
+      _computeSwipeOverlayHidden: function(narrow, disableEdgeSwipe) {
+        return !narrow || disableEdgeSwipe;
+      },
+
+      _onTrack: function(e) {
+        if (sharedPanel && this !== sharedPanel) {
+          return;
+        }
+        switch (e.detail.state) {
+          case 'start':
+            this._trackStart(e);
+            break;
+          case 'track':
+            this._trackX(e);
+            break;
+          case 'end':
+            this._trackEnd(e);
+            break;
+        }
+
+      },
+
+      _responsiveChange: function(narrow) {
+        this.narrow = narrow;
+
+        if (this.narrow) {
+          this.selected = this.defaultSelected;
+        }
+
+        this.setScrollDirection(this._swipeAllowed() ? 'y' : 'all');
+        this.fire('paper-responsive-change', {narrow: this.narrow});
+      },
+
+      _onQueryMatchesChanged: function(e) {
+        this._responsiveChange(e.detail.value);
+      },
+
+      _forceNarrowChanged: function() {
+        // set the narrow mode only if we reached the `responsiveWidth`
+        this._responsiveChange(this.forceNarrow || this.$.mq.queryMatches);
+      },
+
+      _swipeAllowed: function() {
+        return this.narrow && !this.disableSwipe;
+      },
+
+      _isMainSelected: function() {
+        return this.selected === 'main';
+      },
+
+      _startEdgePeek: function() {
+        this.width = this.$.drawer.offsetWidth;
+        this._moveDrawer(this._translateXForDeltaX(this.rightDrawer ?
+            -this.edgeSwipeSensitivity : this.edgeSwipeSensitivity));
+        this.peeking = true;
+      },
+
+      _stopEdgePeek: function() {
+        if (this.peeking) {
+          this.peeking = false;
+          this._moveDrawer(null);
+        }
+      },
+
+      _downHandler: function(e) {
+        if (!this.dragging && this._isMainSelected() && this._isEdgeTouch(e) && !sharedPanel) {
+          this._startEdgePeek();
+          // grab this panel
+          sharedPanel = this;
+        }
+      },
+
+      _upHandler: function() {
+        this._stopEdgePeek();
+        // release the panel
+        sharedPanel = null;
+      },
+
+      _onTap: function(e) {
+        var targetElement = Polymer.dom(e).localTarget;
+        var isTargetToggleElement = targetElement &&
+          this.drawerToggleAttribute &&
+          targetElement.hasAttribute(this.drawerToggleAttribute);
+
+        if (isTargetToggleElement) {
+          this.togglePanel();
+        }
+      },
+
+      _isEdgeTouch: function(e) {
+        var x = e.detail.x;
+
+        return !this.disableEdgeSwipe && this._swipeAllowed() &&
+          (this.rightDrawer ?
+            x >= this.offsetWidth - this.edgeSwipeSensitivity :
+            x <= this.edgeSwipeSensitivity);
+      },
+
+      _trackStart: function() {
+        if (this._swipeAllowed()) {
+          sharedPanel = this;
+          this.dragging = true;
+
+          if (this._isMainSelected()) {
+            this.dragging = this.peeking || this._isEdgeTouch(event);
+          }
+
+          if (this.dragging) {
+            this.width = this.$.drawer.offsetWidth;
+            this.transition = false;
+          }
+        }
+      },
+
+      _translateXForDeltaX: function(deltaX) {
+        var isMain = this._isMainSelected();
+
+        if (this.rightDrawer) {
+          return Math.max(0, isMain ? this.width + deltaX : deltaX);
+        } else {
+          return Math.min(0, isMain ? deltaX - this.width : deltaX);
+        }
+      },
+
+      _trackX: function(e) {
+        if (this.dragging) {
+          var dx = e.detail.dx;
+
+          if (this.peeking) {
+            if (Math.abs(dx) <= this.edgeSwipeSensitivity) {
+              // Ignore trackx until we move past the edge peek.
+              return;
+            }
+            this.peeking = false;
+          }
+
+          this._moveDrawer(this._translateXForDeltaX(dx));
+        }
+      },
+
+      _trackEnd: function(e) {
+        if (this.dragging) {
+          var xDirection = e.detail.dx > 0;
+
+          this.dragging = false;
+          this.transition = true;
+          sharedPanel = null;
+          this._moveDrawer(null);
+
+          if (this.rightDrawer) {
+            this[xDirection ? 'closeDrawer' : 'openDrawer']();
+          } else {
+            this[xDirection ? 'openDrawer' : 'closeDrawer']();
+          }
+        }
+      },
+
+      _transformForTranslateX: function(translateX) {
+        if (translateX === null) {
+          return '';
+        }
+
+        return this.hasWillChange ? 'translateX(' + translateX + 'px)' :
+            'translate3d(' + translateX + 'px, 0, 0)';
+      },
+
+      _moveDrawer: function(translateX) {
+        var s = this.$.drawer.style;
+
+        if (this.hasTransform) {
+          s.transform = this._transformForTranslateX(translateX);
+        } else {
+          s.webkitTransform = this._transformForTranslateX(translateX);
+        }
+      }
+
+    });
+
+  }());
+
+</script>

data/app/assets/components/paper-elements/README.md

@@ -0,0 +1,21 @@
+#paper-elements
+
+The paper elements are a set of UI components designed to implement Google's [material design](http://www.google.com/design/spec/material-design/introduction.html) guidelines.
+
+## Roadmap
+
+### Elements in progress
+
+* `paper-dropdown-menu` - a dropdown menu
+
+### Elements planned
+_Elements we're planning on building soon but haven't started yet_
+
+* `paper-tooltip` - a hover tooltip
+
+[Currently focused on getting all elements up to speed]
+
+### Elements not planned, notably
+_Elements we're not planning on building as part of this product line, but that one might be wondering about_
+
+[None]

data/app/assets/components/paper-elements/bower.json

@@ -0,0 +1,51 @@
+{
+  "name": "paper-elements",
+  "version": "1.0.1",
+  "homepage": "https://github.com/PolymerElements/paper-elements",
+  "authors": [
+    "The Polymer Authors"
+  ],
+  "description": "Paper elements are a set of visual elements that implement Google's Material Design.",
+  "main": "paper-elements.html",
+  "keywords": [
+    "web-components",
+    "polymer",
+    "paper"
+  ],
+  "license": "http://polymer.github.io/LICENSE.txt",
+  "ignore": [
+    "**/.*",
+    "node_modules",
+    "bower_components",
+    "test",
+    "tests"
+  ],
+  "dependencies": {
+    "paper-behaviors": "PolymerElements/paper-behaviors#^1.0.0",
+    "paper-button": "PolymerElements/paper-button#^1.0.0",
+    "paper-checkbox": "PolymerElements/paper-checkbox#^1.0.0",
+    "paper-dialog": "PolymerElements/paper-dialog#^1.0.0",
+    "paper-dialog-behavior": "PolymerElements/paper-dialog-behavior#^1.0.0",
+    "paper-dialog-scrollable": "PolymerElements/paper-dialog-scrollable#^1.0.0",
+    "paper-drawer-panel": "PolymerElements/paper-drawer-panel#^1.0.0",
+    "paper-fab": "PolymerElements/paper-fab#^1.0.0",
+    "paper-header-panel": "PolymerElements/paper-header-panel#^1.0.0",
+    "paper-icon-button": "PolymerElements/paper-icon-button#^1.0.0",
+    "paper-input": "PolymerElements/paper-input#^1.0.0",
+    "paper-item": "PolymerElements/paper-item#^1.0.0",
+    "paper-material": "PolymerElements/paper-material#^1.0.0",
+    "paper-menu": "PolymerElements/paper-menu#^1.0.0",
+    "paper-progress": "PolymerElements/paper-progress#^1.0.0",
+    "paper-radio-button": "PolymerElements/paper-radio-button#^1.0.0",
+    "paper-radio-group": "PolymerElements/paper-radio-group#^1.0.0",
+    "paper-ripple": "PolymerElements/paper-ripple#^1.0.0",
+    "paper-slider": "PolymerElements/paper-slider#^1.0.0",
+    "paper-spinner": "PolymerElements/paper-spinner#^1.0.0",
+    "paper-styles": "PolymerElements/paper-styles#^1.0.0",
+    "paper-tabs": "PolymerElements/paper-tabs#^1.0.0",
+    "paper-toast": "PolymerElements/paper-toast#^1.0.0",
+    "paper-toggle-button": "PolymerElements/paper-toggle-button#^1.0.0",
+    "paper-toolbar": "PolymerElements/paper-toolbar#^1.0.0",
+    "paper-scroll-header-panel": "PolymerElements/paper-scroll-header-panel#^1.0.0"
+  }
+}

data/app/assets/components/paper-fab/README.md

@@ -0,0 +1,44 @@
+paper-fab
+=========
+
+Material Design: <a href="http://www.google.com/design/spec/components/buttons.html">Button</a>
+
+`paper-fab` is a floating action button. It contains an image placed in the center and
+comes in two sizes: regular size and a smaller size by applying the attribute `mini`. When
+the user touches the button, a ripple effect emanates from the center of the button.
+
+You may import `iron-icons` to use with this element, or provide a URL to a custom icon.
+See `iron-iconset` for more information about how to use a custom icon set.
+
+Example:
+
+```html
+<link href="path/to/iron-icons/iron-icons.html" rel="import">
+
+<paper-fab icon="add"></paper-fab>
+<paper-fab mini icon="favorite"></paper-fab>
+<paper-fab src="star.png"></paper-fab>
+```
+
+Styling
+-------
+
+Style the button with CSS as you would a normal DOM element. If you are using the icons
+provided by `iron-icons`, the icon will inherit the foreground color of the button.
+
+```html
+<!-- make a blue "cloud" button -->
+<paper-fab icon="cloud" style="color: blue;"></paper-fab>
+```
+
+By default, the ripple is the same color as the foreground at 25% opacity. You may
+customize the color using this selector:
+
+```css
+/* make #my-button use a blue ripple instead of foreground color */
+#my-button::shadow #ripple {
+  color: blue;
+}
+```
+
+The opacity of the ripple is not customizable via CSS.