polymer-core-rails 0.1.0

data/app/assets/components/core-collapse/core-collapse.html.erb

@@ -0,0 +1,247 @@
+<!--
+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-collapse` creates a collapsible block of content.  By default, the content
+will be collapsed.  Use `opened` to show/hide the content.
+
+    <button on-click="{{toggle}}">toggle collapse</button>
+
+    <core-collapse id="collapse"></core-collapse>
+      ...
+    </core-collapse>
+
+    ...
+
+    toggle: function() {
+      this.$.collapse.toggle();
+    }
+
+@group Polymer Core Elements
+@element core-collapse
+-->
+<%= stylesheet_link_tag "core-collapse/core-collapse", 'shim-shadowdom' => true%>
+
+<polymer-element name="core-collapse" attributes="target horizontal opened duration fixedSize">
+<template>
+
+  <content></content>
+
+</template>
+<script>
+
+  Polymer('core-collapse', {
+    /**
+     * Fired when the target element has been resized as a result of the opened
+     * state changing.
+     *
+     * @event core-resize
+    */
+
+    /**
+     * The target element.
+     *
+     * @attribute target
+     * @type object
+     * @default null
+     */
+    target: null,
+
+    /**
+     * If true, the orientation is horizontal; otherwise is vertical.
+     *
+     * @attribute horizontal
+     * @type boolean
+     * @default false
+     */
+    horizontal: false,
+
+    /**
+     * Set opened to true to show the collapse element and to false to hide it.
+     *
+     * @attribute opened
+     * @type boolean
+     * @default false
+     */
+    opened: false,
+
+    /**
+     * Collapsing/expanding animation duration in second.
+     *
+     * @attribute duration
+     * @type number
+     * @default 0.33
+     */
+    duration: 0.33,
+
+    /**
+     * If true, the size of the target element is fixed and is set
+     * on the element.  Otherwise it will try to
+     * use auto to determine the natural size to use
+     * for collapsing/expanding.
+     *
+     * @attribute fixedSize
+     * @type boolean
+     * @default false
+     */
+    fixedSize: false,
+
+    created: function() {
+      this.transitionEndListener = this.transitionEnd.bind(this);
+    },
+
+    ready: function() {
+      this.target = this.target || this;
+    },
+
+    domReady: function() {
+      this.async(function() {
+        this.afterInitialUpdate = true;
+      });
+    },
+
+    detached: function() {
+      if (this.target) {
+        this.removeListeners(this.target);
+      }
+    },
+
+    targetChanged: function(old) {
+      if (old) {
+        this.removeListeners(old);
+      }
+      if (!this.target) {
+        return;
+      }
+      this.isTargetReady = !!this.target;
+      this.classList.toggle('core-collapse-closed', this.target !== this);
+      this.target.style.overflow = 'hidden';
+      this.horizontalChanged();
+      this.addListeners(this.target);
+      // set core-collapse-closed class initially to hide the target
+      this.toggleClosedClass(true);
+      this.update();
+    },
+
+    addListeners: function(node) {
+      node.addEventListener('transitionend', this.transitionEndListener);
+    },
+
+    removeListeners: function(node) {
+      node.removeEventListener('transitionend', this.transitionEndListener);
+    },
+
+    horizontalChanged: function() {
+      this.dimension = this.horizontal ? 'width' : 'height';
+    },
+
+    openedChanged: function() {
+      this.update();
+    },
+
+    /**
+     * Toggle the opened state.
+     *
+     * @method toggle
+     */
+    toggle: function() {
+      this.opened = !this.opened;
+    },
+
+    setTransitionDuration: function(duration) {
+      var s = this.target.style;
+      s.transition = duration ? (this.dimension + ' ' + duration + 's') : null;
+      if (duration === 0) {
+        this.async('transitionEnd');
+      }
+    },
+
+    transitionEnd: function() {
+      if (this.opened && !this.fixedSize) {
+        this.updateSize('auto', null);
+      }
+      this.setTransitionDuration(null);
+      this.toggleClosedClass(!this.opened);
+      this.asyncFire('core-resize', null, this.target);
+    },
+
+    toggleClosedClass: function(closed) {
+      this.hasClosedClass = closed;
+      this.target.classList.toggle('core-collapse-closed', closed);
+    },
+
+    updateSize: function(size, duration, forceEnd) {
+      this.setTransitionDuration(duration);
+      this.calcSize();
+      var s = this.target.style;
+      var nochange = s[this.dimension] === size;
+      s[this.dimension] = size;
+      // transitonEnd will not be called if the size has not changed
+      if (forceEnd && nochange) {
+        this.transitionEnd();
+      }
+    },
+
+    update: function() {
+      if (!this.target) {
+        return;
+      }
+      if (!this.isTargetReady) {
+        this.targetChanged();
+      }
+      this.horizontalChanged();
+      this[this.opened ? 'show' : 'hide']();
+    },
+
+    calcSize: function() {
+      return this.target.getBoundingClientRect()[this.dimension] + 'px';
+    },
+
+    getComputedSize: function() {
+      return getComputedStyle(this.target)[this.dimension];
+    },
+
+    show: function() {
+      this.toggleClosedClass(false);
+      // for initial update, skip the expanding animation to optimize
+      // performance e.g. skip calcSize
+      if (!this.afterInitialUpdate) {
+        this.transitionEnd();
+        return;
+      }
+      if (!this.fixedSize) {
+        this.updateSize('auto', null);
+        var s = this.calcSize();
+        this.updateSize(0, null);
+      }
+      this.async(function() {
+        this.updateSize(this.size || s, this.duration, true);
+      });
+    },
+
+    hide: function() {
+      // don't need to do anything if it's already hidden
+      if (this.hasClosedClass && !this.fixedSize) {
+        return;
+      }
+      if (this.fixedSize) {
+        // save the size before hiding it
+        this.size = this.getComputedSize();
+      } else {
+        this.updateSize(this.calcSize(), null);
+      }
+      this.async(function() {
+        this.updateSize(0, this.duration);
+      });
+    }
+
+  });
+
+</script>
+</polymer-element>

data/app/assets/components/core-drag-drop/core-drag-drop.html

@@ -0,0 +1,109 @@
+<!--
+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
+-->
+
+<style>
+  core-drag-avatar {
+    position: fixed;
+    left: 0;
+    top: 0;
+    display: block;
+    pointer-events: none;
+  }
+</style>
+
+<!--
+@group Polymer Core Elements
+@element core-drag-drop
+@homepage github.io
+-->
+
+<polymer-element name="core-drag-drop">
+<script>
+
+  Polymer('core-drag-drop', {
+
+    observe: {
+      'x y': 'coordinatesChanged'
+    },
+
+    ready: function() {
+      if (!this.__proto__.avatar) {
+        this.__proto__.avatar = document.createElement('core-drag-avatar');
+        document.body.appendChild(this.avatar);
+      }
+      this.dragging = false;
+    },
+
+    draggingChanged: function() {
+      this.avatar.style.display = this.dragging ? '' : 'none';
+    },
+
+    coordinatesChanged: function() {
+      var x = this.x, y = this.y;
+      this.avatar.style.transform =
+        this.avatar.style.webkitTransform =
+          'translate(' + x + 'px, ' + y + 'px)';
+    },
+
+    attached: function() {
+      var listen = function(event, handler) {
+        this.parentNode.addEventListener(event, this[handler].bind(this));
+      }.bind(this);
+      //
+      listen('trackstart', 'trackStart');
+      listen('track', 'track');
+      listen('trackend', 'trackEnd');
+      //
+      var host = this.parentNode.host || this.parentNode;
+      host.setAttribute('touch-action', 'none');
+      host.style.cssText += '; user-select: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none;';
+    },
+
+    trackStart: function(event) {
+      this.avatar.style.cssText = '';
+      this.dragInfo = {
+        event: event,
+        avatar: this.avatar
+      };
+      this.fire('drag-start', this.dragInfo);
+      // flaw #1: what if user doesn't need `drag()`?
+      this.dragging = Boolean(this.dragInfo.drag);
+    },
+
+    track: function(event) {
+      if (this.dragging) {
+        this.x = event.pageX;
+        this.y = event.pageY;
+        this.dragInfo.event = event;
+        this.dragInfo.p = {x : this.x, y: this.y};
+        this.dragInfo.drag(this.dragInfo);
+      }
+    },
+
+    trackEnd: function(event) {
+      if (this.dragging) {
+        this.dragging = false;
+        if (this.dragInfo.drop) {
+          this.dragInfo.framed = this.framed(event.relatedTarget);
+          this.dragInfo.event = event;
+          this.dragInfo.drop(this.dragInfo);
+        }
+      }
+      this.dragInfo = null;
+    },
+
+    framed: function(node) {
+      var local = node.getBoundingClientRect();
+      return {x: this.x - local.left, y: this.y - local.top};
+    }
+
+  });
+
+</script>
+</polymer-element>

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

@@ -0,0 +1,162 @@
+/*
+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
+*/
+
+:host {
+  display: block;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  overflow-x: hidden;
+}
+
+#drawer {
+  position: absolute;
+  top: 0;
+  left: 0;
+  /* FIXME(ffu): remove hard-coded drawer panel width */
+  width: 256px;
+  height: 100%;
+  box-sizing: border-box;
+  -mox-box-sizing: border-box;
+}
+
+.transition #drawer {
+  transition: -webkit-transform ease-in-out 0.3s, width ease-in-out 0.3s;
+  transition: transform ease-in-out 0.3s, width ease-in-out 0.3s;
+}
+
+/*
+right-drawer: make drawer on the right side
+*/
+:host(.right-drawer) #drawer {
+  left: auto;
+  right: 0;
+}
+
+:host(.right-drawer) .transition #drawer {
+  transition: -webkit-transform ease-in-out 0.3s, width ease-in-out 0.3s;
+  transition: transform ease-in-out 0.3s, width ease-in-out 0.3s;
+}
+
+polyfill-next-selector { content: ':host [drawer]'; }
+::content[select="[drawer]"] > * {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  -moz-box-sizing: border-box;
+}
+
+#main {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 256px;
+  overflow: auto;
+}
+
+.transition #main {
+  transition: left ease-in-out 0.3s, padding ease-in-out 0.3s;
+}
+
+:host(.right-drawer) #main {
+  left: 0;
+  right: 256px;
+}
+
+:host(.right-drawer) .transition #main {
+  transition: right ease-in-out 0.3s, padding ease-in-out 0.3s;
+}
+
+polyfill-next-selector { content: '#main > [main]'; }
+::content[select="[main]"] > * {
+  height: 100%;
+}
+
+#scrim {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  background-color: rgba(0, 0, 0, 0.3);
+  visibility: hidden;
+  opacity: 0;
+  transition: opacity ease-in-out 0.38s, visibility ease-in-out 0.38s;
+}
+
+/*
+no-peek: helper class to make drawer panel 100% width in narrow layout
+*/
+:host(.no-peek) .narrow-layout > #drawer {
+  width: 100%;
+}
+
+:host(.no-peek) .narrow-layout > #drawer:not(.core-selected) {
+  left: -100%;
+}
+
+:host(.no-peek.right-drawer) .narrow-layout > #drawer:not(.core-selected) {
+  left: auto;
+  right: -100%;
+}
+
+/*
+narrow layout
+*/
+.narrow-layout > #drawer.core-selected {
+  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.15);
+}
+
+polyfill-next-selector { content: ':host .narrow-layout > #drawer > [drawer]'; }
+.narrow-layout > #drawer > ::content[select="[drawer]"] > * {
+  border: 0;
+}
+
+.narrow-layout > #drawer:not(.core-selected) {
+  -webkit-transform: translate3d(-100%, 0, 0);
+  transform: translate3d(-100%, 0, 0);
+}
+
+:host(.right-drawer) .narrow-layout > #drawer:not(.core-selected) {
+  left: auto;
+  -webkit-transform: translate3d(100%, 0, 0);
+  transform: translate3d(100%, 0, 0);
+}
+
+.narrow-layout > #main {
+  left: 0 !important;
+  padding: 0;
+}
+
+:host(.right-drawer) .narrow-layout > #main {
+  left: 0;
+  right: 0;
+  padding: 0;
+}
+
+.narrow-layout > #main:not(.core-selected) #scrim {
+  visibility: visible;
+  opacity: 1;
+}
+
+polyfill-next-selector { content: ':host .narrow-layout > #main > [main]'; }
+.narrow-layout > #main > ::content[select="[main]"] > * {
+  margin: 0;
+  min-height: 100%;
+  left: 0;
+  right: 0;
+  box-sizing: border-box;
+  -moz-box-sizing: border-box;
+}

data/app/assets/components/core-drawer-panel/core-drawer-panel.html.erb

@@ -0,0 +1,150 @@
+<!--
+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-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 browser
+window size is smaller than the `responsiveWidth`, `core-drawer-panel`
+changes to narrow layout.  In narrow layout, the drawer will be stacked on top
+of the main panel.  The drawer will be slided in/out to hide/reveal the main
+panel.
+
+Use the attribute `drawer` to indicate the element is a drawer panel and
+`main` to indicate is a main panel.
+
+Example:
+
+    <core-drawer-panel>
+      <div drawer> Drawer panel... </div>
+      <div main> Main panel... </div>
+    </core-drawer-panel>
+
+To position the drawer to the right, add `right-drawer` to the class list.
+
+    <core-drawer-panel class="right-drawer">
+      <div drawer> Drawer panel... </div>
+      <div main> Main panel... </div>
+    </core-drawer-panel>
+
+@group Polymer Core Elements
+@element core-drawer-panel
+@homepage github.io
+-->
+
+<%= html_import_tag "core-media-query/core-media-query" %>
+<%= html_import_tag "core-selector/core-selector" %>
+
+<polymer-element name="core-drawer-panel">
+<template>
+
+  <%= stylesheet_link_tag "core-drawer-panel/core-drawer-panel" %>
+
+  <core-media-query query="max-width: {{responsiveWidth}}" queryMatches="{{queryMatches}}"></core-media-query>
+
+  <core-selector class="{{ {'narrow-layout' : queryMatches, transition : transition} | tokenList }}" valueattr="id" selected="{{selected}}">
+
+    <div id="main" >
+      <content select="[main]"></content>
+      <div id="scrim" on-tap="{{togglePanel}}"></div>
+    </div>
+
+    <div id="drawer">
+      <content select="[drawer]"></content>
+    </div>
+
+  </core-selector>
+
+</template>
+<script>
+
+  Polymer('core-drawer-panel', {
+    /**
+     * Fired when the narrow layout changes.
+     *
+     * @event core-responsive-change
+     * @param {Object} detail
+     * @param {boolean} detail.narrow true if the panel is in narrow layout.
+     */
+
+    publish: {
+      /**
+       * Max-width when the panel changes to narrow layout.
+       *
+       * @attribute responsiveWidth
+       * @type string
+       * @default '640px'
+       */
+      responsiveWidth: '640px',
+
+      /**
+       * The panel that is being selected. `drawer` for the drawer panel and
+       * `main` for the main panel.
+       *
+       * @attribute selected
+       * @type string
+       * @default null
+       */
+      selected: {value: null, reflect: true},
+
+      /**
+       * The panel to be selected when `core-drawer-panel` changes to narrow
+       * layout.
+       *
+       * @attribute defaultSelected
+       * @type string
+       * @default 'main'
+       */
+      defaultSelected: 'main',
+
+      /**
+       * Returns true if the panel is in narrow layout.  This is useful if you
+       * need to show/hide elements based on the layout.
+       *
+       * @attribute narrow
+       * @type boolean
+       * @default false
+       */
+      narrow: {value: false, reflect: true}
+    },
+
+    transition: false,
+
+    domReady: function() {
+      // to avoid transition at the beginning e.g. page loads
+      // NOTE: domReady is already raf delayed and delaying another frame
+      // ensures a layout has occurred.
+      this.async(function() {
+        this.transition = true;
+      });
+    },
+
+    togglePanel: function() {
+      this.selected = this.selected === 'main' ? 'drawer' : 'main';
+    },
+
+    openDrawer: function() {
+      this.selected = 'drawer';
+    },
+
+    closeDrawer: function() {
+      this.selected = 'main';
+    },
+
+    queryMatchesChanged: function() {
+      if (this.queryMatches) {
+        this.selected = this.defaultSelected;
+      }
+      this.narrow = this.queryMatches;
+      this.fire('core-responsive-change', {narrow: this.narrow});
+    }
+
+  });
+
+</script>
+</polymer-element>

data/app/assets/components/core-field/core-field.css

@@ -0,0 +1,38 @@
+/* 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 */
+
+
+:host {
+  display: block;
+  color: #333;
+  font-size: 14px;
+}
+
+polyfill-next-selector { content: ':host > core-icon'; }
+::content > core-icon {
+  margin: 8px;
+}
+
+polyfill-next-selector { content: ':host input'; }
+::content input {
+  background: transparent;
+  border: 0;
+  padding: 0;
+  margin: 0 4px;
+  color: #333;
+  font-size: 14px;
+}
+
+polyfill-next-selector { content: ':host input:focus'; }
+::content input:focus {
+  outline: none;
+}
+
+polyfill-next-selector { content: ':host input::placeholder'; }
+::content input::placeholder {
+  color: #b3b3b3;
+}