RubyGems - polymer-core-rails - Versions diffs - 0.1.0 → 0.2.0 - Mend

polymer-core-rails 0.1.0 → 0.2.0

Files changed (856) hide show

data/app/assets/components/core-item/{core-item.html.erb → core-item.html} RENAMED Viewed

@@ -8,13 +8,13 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
 -->
 <!--
-`core-item` is a simple line-item object: a label and/or an icon that can also
+`core-item` is a simple line-item object: a label and/or an icon that can also
 act as a link.
 Example:
     <core-item icon="settings" label="Settings"></core-item>
 To use as a link, put &lt;a&gt; element in the item.
 Example:
@@ -28,20 +28,22 @@ Example:
 @homepage github.io
 -->
-<%= html_import_tag "core-icon/core-icon" %>
+<link rel="import" href="../core-icon/core-icon.html">
-<%= stylesheet_link_tag "core-field/core-field", "shim-shadowdom" => "core-item/core-item" %>
+<link rel="stylesheet" href="core-item.css" shim-shadowdom>
-<polymer-element name="core-item" attributes="label icon src size" horizontal center layout>
+<polymer-element name="core-item" attributes="label icon src" horizontal center layout>
 <template>
-  <core-icon src="{{src}}" icon="{{icon}}" size="{{size}}" hidden?="{{!src && !icon}}"></core-icon>{{label}}<content></content>
+  <core-icon src="{{src}}" icon="{{icon}}" hidden?="{{!src && !icon}}"></core-icon>
+  <div id="label">{{label}}</div>
+  <content></content>
 </template>
 <script>
   Polymer('core-item', {
     /**
      * The URL of an image for the icon.
      *
@@ -66,14 +68,6 @@ Example:
      * @default ''
      */
-    /**
-     * Specifies the size of the icon in pixel units.
-     *
-     * @attribute size
-     * @type number
-     * @default 24
-     */
   });
 </script>

data/app/assets/components/core-item/demo.html ADDED Viewed

@@ -0,0 +1,92 @@
+<!--
+    @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
+-->
+<!doctype html>
+<html>
+<head>
+  <title>core-item</title>
+  <script src="../platform/platform.js"></script>
+  <link rel="import" href="../core-icons/core-icons.html">
+  <link rel="import" href="core-item.html">
+  <style>
+    body {
+      font-family: sans-serif;
+      font-size: 16px;
+      margin: 20px;
+    }
+    core-item {
+      width: 300px;
+    }
+    core-item.big {
+      font-size: 24px;
+    }
+    core-item.small {
+      font-size: 12px;
+    }
+    core-item.contact-item {
+      height: 50px;
+      background-color: #efefef;
+      border: 1px solid #ddd;
+    }
+    core-item.contact-item .name {
+      font-size: 1.125em;
+    }
+    core-item.contact-item .address {
+      font-size: 0.75em;
+    }
+  </style>
+</head>
+<body unresolved>
+    <h2>items with icon and label:</h2>
+    <core-item icon="settings" label="Settings"></core-item>
+    <core-item icon="account-box" label="Account"></core-item>
+    <h2>items with label only:</h2>
+    <core-item label="Settings"></core-item>
+    <core-item label="Account"></core-item>
+    <h2>links (via &lt;a&gt;):</h2>
+    <core-item icon="settings" label="Settings"><a href="#settings" target="_self"></a></core-item>
+    <core-item icon="account-box" label="Account"><a href="#account" target="_self"></a></core-item>
+    <h2>items sized with CSS:</h2>
+    <core-item icon="settings" label="Settings" class="font-scalable big"></core-item>
+    <core-item icon="account-box" label="Account" class="font-scalable big"></core-item>
+    <core-item icon="settings" label="Settings" class="font-scalable small"></core-item>
+    <core-item icon="account-box" label="Account" class="font-scalable small"></core-item>
+    <h2>custom item:</h2>
+    <core-item icon="account-circle" class="contact-item">
+      <div flex>
+        <div class="name">John Doe</div>
+        <div class="address">123 A Street, San Francisco, CA</div>
+      </div>
+      <core-icon icon="more-vert"></core-icon>
+    </core-item>
+</body>
+</html>

data/app/assets/components/core-item/index.html ADDED Viewed

@@ -0,0 +1,22 @@
+<!doctype html>
+<!--
+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
+The complete set of authors may be found at http://polymer.github.io/AUTHORS
+The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS
+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
+-->
+<html>
+<head>
+  <script src="../platform/platform.js"></script>
+  <link rel="import" href="../core-component-page/core-component-page.html">
+</head>
+<body unresolved>
+  <core-component-page></core-component-page>
+</body>
+</html>

data/app/assets/components/core-item/metadata.html ADDED Viewed

@@ -0,0 +1,24 @@
+<!--
+    @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-item" label="Item" group="Core">
+  <template>
+    <core-item icon="settings" label="Item"></core-item>
+  </template>
+  <template id="imports">
+    <link rel="import" href="core-item.html">
+  </template>
+</x-meta>

data/app/assets/components/core-layout-grid/README.md ADDED Viewed

@@ -0,0 +1,4 @@
+core-layout-grid
+================
+See the [component page](http://polymer-project.org/docs/elements/core-elements.html#core-layout-grid) for more information.

data/app/assets/components/core-layout-grid/bower.json ADDED Viewed

@@ -0,0 +1,7 @@
+{
+  "name": "core-layout-grid",
+  "private": true,
+  "dependencies": {
+    "polymer": "Polymer/polymer#>=0.4.0 <1.0.0"
+  }
+}

data/app/assets/components/core-layout-grid/core-layout-grid.html ADDED Viewed

@@ -0,0 +1,350 @@
+<!--
+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
+@element core-layout-grid
+@status beta
+@homepage github.io
+TODO
+-->
+<link rel="import" href="../polymer/polymer.html">
+<polymer-element name="core-layout-grid" attributes="nodes layout auto">
+<script>
+  (function() {
+    Polymer('core-layout-grid', {
+      nodes: null,
+      layout: null,
+      auto: false,
+      created: function() {
+        this.layout = [];
+      },
+      nodesChanged: function() {
+        this.invalidate();
+      },
+      layoutChanged: function() {
+        this.invalidate();
+      },
+      autoNodes: function() {
+        this.nodes = this.parentNode.children.array().filter(
+          function(node) {
+            switch(node.localName) {
+              case 'core-layout-grid':
+              case 'style':
+                return false;
+            }
+            return true;
+          }
+        );
+      },
+      invalidate: function() {
+        if (this.layout && this.layout.length) {
+          // job debounces layout, only letting it occur every N ms
+          this.layoutJob = this.job(this.layoutJob, this.relayout);
+        }
+      },
+      relayout: function() {
+        if (!this.nodes || this.auto) {
+          this.autoNodes();
+        }
+        layout(this.layout, this.nodes);
+        this.asyncFire('core-layout');
+      }
+    });
+    //
+    var lineParent;
+    function line(axis, p, d) {
+      var l = document.createElement('line');
+      var extent = (axis === 'left' ? 'width' :
+        (axis === 'top' ? 'height' : axis));
+      l.setAttribute('extent', extent);
+      if (d < 0) {
+        axis = (axis === 'left' ? 'right' :
+          (axis === 'top' ? 'bottom' : axis));
+      }
+      p = Math.abs(p);
+      l.style[axis] = p + 'px';
+      l.style[extent] = '0px';
+      lineParent.appendChild(l);
+    }
+    var colCount, colOwners, rowCount, rowOwners;
+    function matrixillate(matrix) {
+      // mesaure the matrix, must be rectangular
+      rowCount = matrix.length;
+      colCount = rowCount && matrix[0].length || 0;
+      // transpose matrix
+      var transpose = [];
+      for (var i=0; i<colCount; i++) {
+        var c = [];
+        for (var j=0; j<rowCount; j++) {
+          c.push(matrix[j][i]);
+        }
+        transpose.push(c);
+      }
+      // assign sizing control
+      colOwners = findOwners(matrix);
+      rowOwners = findOwners(transpose);
+      //console.log('colOwners', colOwners);
+      //console.log('rowOwners', rowOwners);
+    }
+    function findOwners(matrix) {
+      var majCount = matrix.length;
+      var minCount = majCount && matrix[0].length || 0;
+      var owners = [];
+      // for each column (e.g.)
+      for (var i=0; i<minCount; i++) {
+        // array of contained areas
+        var contained = {};
+        // look at each row to find a containing area
+        for (var j=0; j<majCount; j++) {
+          // get the row vector
+          var vector = matrix[j]
+          // node index at [i,j]
+          var nodei = vector[i];
+          // if a node is there
+          if (nodei) {
+            // determine if it bounds this column
+            var owns = false;
+            if (i === 0) {
+              owns = (i === minCount-1) || (nodei !== vector[i+1]);
+            } else if (i === minCount - 1) {
+              owns = (i === 0) || (nodei !== vector[i-1]);
+            } else {
+              owns = nodei !== vector[i-1] && nodei !== vector[i+1];
+            }
+            if (owns) {
+              contained[nodei] = 1;
+            }
+          }
+          // store the owners for this column
+          owners[i] = contained;
+        }
+      }
+      return owners;
+    }
+    var nodes;
+    function colWidth(i) {
+      for (var col in colOwners[i]) {
+        col = Number(col);
+        if (col === 0) {
+          return 96;
+        }
+        var node = nodes[col - 1];
+        if (node.hasAttribute('h-flex') || node.hasAttribute('flex')) {
+          return -1;
+        }
+        var w = node.offsetWidth;
+        //console.log('colWidth(' + i + ') ==', w);
+        return w;
+      }
+      return -1;
+    }
+    function rowHeight(i) {
+      for (var row in rowOwners[i]) {
+        row = Number(row);
+        if (row === 0) {
+          return 96;
+        }
+        var node = nodes[row - 1];
+        if (node.hasAttribute('v-flex') || node.hasAttribute('flex')) {
+          return -1;
+        }
+        var h = node.offsetHeight;
+        //console.log('rowHeight(' + i + ') ==', h);
+        return h;
+      }
+      return -1;
+    }
+    var m = 0;
+    function railize(count, sizeFn) {
+      //
+      // create rails for `count` tracks using
+      // sizing function `sizeFn(trackNo)`
+      //
+      // for n tracks there are (n+1) rails
+      //
+      //   |track|track|track|
+      //  0|->sz0|->sz1|<-sz2|0
+      //
+      //   |track|track|track|
+      //  0|->sz0|     |<-sz2|0
+      //
+      // there can be one elastic track per set
+      //
+      //   |track|track|track|track|
+      //  0|-->s0|-->s1|<--s1|<--s2|0
+      //
+      // sz1 spans multiple  tracks which makes
+      // it elastic (it's underconstrained)
+      //
+      var rails = [];
+      var a = 0;
+      for (var i=0, x; i<count; i++) {
+        rails[i] = {p: a, s: 1};
+        x = sizeFn(i) + m + m;
+        if (x == -1) {
+          break;
+        }
+        a += x;
+      }
+      if (i === count) {
+        rails[i] = {p: 0, s: -1};
+      }
+      var b = 0;
+      for (var ii=count, x; ii>i; ii--) {
+        rails[ii] = {p: b, s: -1};
+        x = sizeFn(ii - 1) + m + m;
+        if (x !== -1) {
+          b += x;
+        }
+      }
+      return rails;
+    }
+    // TODO(sjmiles): this code tries to preserve actual position,
+    // so 'unposition' is really 'naturalize' or something
+    function unposition(box) {
+      var style = box.style;
+      //style.right = style.bottom = style.width = style.height = '';
+      style.position = 'absolute';
+      style.display = 'inline-block';
+      style.boxSizing = style.mozBoxSizing = 'border-box';
+    }
+    function _position(style, maj, min, ext, a, b) {
+      style[maj] = style[min] = '';
+      style[ext] = 'auto';
+      if (a.s < 0 && b.s < 0) {
+        var siz = a.p - b.p - m - m;
+        style[ext] = siz + 'px';
+        var c = 'calc(100% - ' + (b.p + siz + m) + 'px' + ')';
+        style[maj] = '-webkit-' + c;
+        style[maj] = c;
+      } else if (b.s < 0) {
+        style[maj] = a.p + m + 'px';
+        style[min] = b.p + m + 'px';
+      } else {
+        style[maj] = a.p + m + 'px';
+        style[ext] = b.p - a.p - m - m + 'px';
+      }
+    }
+    function position(elt, left, right, top, bottom) {
+      _position(elt.style, 'top', 'bottom', 'height', rows[top],
+          rows[bottom]);
+      _position(elt.style, 'left', 'right', 'width', columns[left],
+          columns[right]);
+    }
+    function layout(matrix, anodes, alineParent) {
+      //console.group('layout');
+      lineParent = alineParent;
+      nodes = anodes;
+      matrixillate(matrix);
+      nodes.forEach(unposition);
+      columns = railize(colCount, colWidth);
+      rows = railize(rowCount, rowHeight);
+      if (alineParent) {
+        //console.group('column rails');
+        columns.forEach(function(c) {
+          //console.log(c.p, c.s);
+          line('left', c.p, c.s);
+        });
+        //console.groupEnd();
+        //console.group('row rails');
+        rows.forEach(function(r) {
+          //console.log(r.p, r.s);
+          line('top', r.p, r.s);
+        });
+        //console.groupEnd();
+      }
+      //console.group('rail boundaries');
+      nodes.forEach(function(node, i) {
+        // node indices are 1-based
+        var n = i + 1;
+        // boundary rails
+        var l, r, t = 1e10, b = -1e10;
+        matrix.forEach(function(vector, i) {
+          var f = vector.indexOf(n);
+          if (f > -1) {
+            l = f;
+            r = vector.lastIndexOf(n) + 1;
+            t = Math.min(t, i);
+            b = Math.max(b, i) + 1;
+          }
+        });
+        if (l == undefined) {
+          //console.log('unused');
+          node.style.position = 'absolute';
+          var offscreen = node.getAttribute('offscreen');
+          switch (offscreen) {
+            case 'basement':
+              node.style.zIndex = 0;
+              break;
+            case 'left':
+            case 'top':
+              node.style[offscreen] = node.offsetWidth * -2 + 'px';
+              break;
+            case 'right':
+              node.style.left = node.offsetParent.offsetWidth
+                  + node.offsetWidth + 'px';
+              break;
+            case 'bottom':
+              node.style.top = node.parentNode.offsetHeight
+                  + node.offsetHeight + 'px';
+              break;
+            default:
+              node.style[Math.random() >= 0.5 ? 'left' : 'top'] = '-110%';
+          }
+          //node.style.opacity = 0;
+          node.style.pointerEvents = 'none';
+        } else {
+          node.style.pointerEvents = '';
+          //node.style.opacity = '';
+          //console.log(l, r, t, b);
+          position(node, l, r, t, b);
+        }
+      });
+      //console.groupEnd();
+      //console.groupEnd();
+    }
+  })();
+</script>
+</polymer-element>

data/app/assets/components/core-layout-grid/demo.html ADDED Viewed

@@ -0,0 +1,116 @@
+<!--
+    @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
+-->
+<!doctype html>
+<html>
+<head>
+  <title>core-layout-grid example</title>
+  <script src="../platform/platform.js"></script>
+  <link rel="import" href="core-layout-grid.html">
+  <style>
+    body {
+      font-family: sans-serif;
+      overflow: hidden;
+    }
+  </style>
+</head>
+<body unresolved>
+  <grid-test></grid-test>
+  <polymer-element name="grid-test" on-tap="{{rotate}}">
+  <template>
+    <style>
+      * {
+        -webkit-transition: top, right, bottom, left;
+        -webkit-transition-duration: 0.3s;
+      }
+      panel {
+        display: inline-block;
+        border: 4px dotted lightblue;
+        padding: 16px;
+        background-color: whitesmoke;
+      }
+      #outputToolbar {
+        width: 400px;
+      }
+      #output {
+        width: 400px;
+      }
+      #workspace {
+        border-color: orange;
+      }
+    </style>
+    <core-layout-grid nodes="{{nodes}}" layout="{{layout}}"></core-layout-grid>
+    <panel id="toolbar">toolbar (click to rotate)</panel>
+    <panel id="sidebar">sidebar</panel>
+    <panel id="workspace">workspace</panel>
+    <panel id="outputToolbar">otherbar</panel>
+    <panel id="output">
+      output
+      <h2>Documentation</h2>
+      <h1>Verbiage</h1>
+      <p>In backbone record integer LED amplified internet protocol a extension reflective.
+      Array kilohertz LED. Wavelength extension patch supporting wave an by prompt.</p>
+    </panel>
+  </template>
+  <script>
+    Polymer('grid-test', {
+      arrangements: [[
+        [1, 1, 1, 1],
+        [2, 3, 3, 4],
+        [2, 3, 3, 5]
+      ], [
+        [4, 3, 2],
+        [5, 3, 2],
+        [5, 1, 1]
+      ], [
+        [1, 1],
+        [2, 3],
+        [4, 3]
+      ]],
+      outputLayout: 0,
+      ready: function() {
+        this.outputLayoutChanged();
+      },
+      outputLayoutChanged: function() {
+        this.layout = this.arrangements[this.outputLayout];
+      },
+      toggleLayout: function() {
+        this.outputLayout = (this.outputLayout + 1) % this.arrangements.length;
+      },
+      rotate: function() {
+        this.toggleLayout();
+      }
+    });
+  </script>
+  </polymer-element>
+</body>
+</html>

data/app/assets/components/core-layout-grid/index.html ADDED Viewed

@@ -0,0 +1,22 @@
+<!doctype html>
+<!--
+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
+The complete set of authors may be found at http://polymer.github.io/AUTHORS
+The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS
+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
+-->
+<html>
+<head>
+  <script src="../platform/platform.js"></script>
+  <link rel="import" href="../core-component-page/core-component-page.html">
+</head>
+<body unresolved>
+  <core-component-page></core-component-page>
+</body>
+</html>