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

data/app/assets/components/core-style/core-style.html

@@ -1,387 +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
--->
-<!--
-
-The `core-style` element helps manage styling inside other elements and can 
-be used to make themes. The `core-style` element can be either a producer 
-or consumer of styling. If it has its `id` property set, it's a producer. 
-Elements that are producers should include css styling as their text content.
-If a `core-style` has its `ref` property set, it's a consumer. A `core-style`
-typically sets its `ref` property to the value of the `id` property of the
-`core-style` it wants to use. This allows a single producer to be used in 
-multiple places, for example, in many different elements.
-
-It's common to place `core-style` producer elements inside HTMLImports.
-Remote stylesheets should be included this way, the &#64;import css mechanism is
-not currently supported.
-
-Here's a basic example:
-
-    <polymer-element name="x-test" noscript>
-      <template>
-        <core-style ref="x-test"></core-style>
-        <content></content>
-      </template>
-    </polymer-element>
-
-The `x-test` element above will be styled by any `core-style` elements that have
-`id` set to `x-test`. These `core-style` producers are separate from the element
-definition, allowing a user of the element to style it independent of the author's 
-styling. For example:
-
-    <core-style id="x-test">
-      :host {
-        backgound-color: steelblue;
-      }
-    </core-style>
-
-The content of the `x-test` `core-style` producer gets included inside the
-shadowRoot of the `x-test` element. If the content of the `x-test` producer
-`core-style` changes, all consumers of it are automatically kept in sync. This
-allows updating styling on the fly.
-
-The `core-style` element also supports bindings, in which case the producer
-`core-style` element is the model. Here's an example:
-
-    <core-style id="x-test">
-      :host {
-        background-color: {{myColor}};
-      }
-    </core-style>
-    <script>
-      document._currentScript.ownerDocument.getElementById('x-test').myColor = 'orange';
-    </script>
-
-Finally, to facilitate sharing data between `core-style` elements, all
-`core-style` elements have a `g` property which is set to the global 
-`CoreStyle.g`. Here's an example:
-
-    <core-style id="x-test">
-      :host {
-        background-color: {{g.myColor}};
-      }
-    </core-style>
-    <script>
-      CoreStyle.g.myColor = 'tomato';
-    </script>
-
-Finally, one `core-style` can be nested inside another. The `core-style`
-element has a `list` property which is a map of all the `core-style` producers.
-A `core-style` producer's content is available via its `cssText` property. 
-Putting this together:
-
-    <core-style id="common">
-      :host {
-        font-family: sans-serif;
-      }
-    </core-style>
-
-    <core-style id="x-test">
-      {{list.common.cssText}}
-
-      :host {
-        background-color: {{g.myColor}};
-      }
-    </core-style>
-
-
-@group Polymer Core Elements
-@element core-style
-@homepage github.io
--->
-
-<link rel="import" href="../polymer/polymer.html">
-
-<polymer-element name="core-style" hidden>
-<script>
-(function() {
-
-window.CoreStyle = window.CoreStyle || {
-  g: {},
-  list: {},
-  refMap: {}
-};
-
-Polymer('core-style', {
-  /**
-   * The `id` property should be set if the `core-style` is a producer
-   * of styles. In this case, the `core-style` should have text content
-   * that is cssText.
-   *
-   * @attribute id
-   * @type string
-   * @default ''
-   */
-
-
-  publish: {
-    /**
-     * The `ref` property should be set if the `core-style` element is a 
-     * consumer of styles. Set it to the `id` of the desired `core-style`
-     * element.
-     *
-     * @attribute ref
-     * @type string
-     * @default ''
-     */
-    ref: ''
-  },
-
-  // static
-  g: CoreStyle.g,
-  refMap: CoreStyle.refMap,
-
-  /**
-   * The `list` is a map of all `core-style` producers stored by `id`. It 
-   * should be considered readonly. It's useful for nesting one `core-style`
-   * inside another.
-   *
-   * @attribute list
-   * @type object
-   * @default {map of all `core-style` producers}
-   */
-  list: CoreStyle.list,
-
-  // if we have an id, we provide style
-  // if we have a ref, we consume/require style
-  ready: function() {
-    if (this.id) {
-      this.provide();
-    } else {
-      this.registerRef(this.ref);
-      if (!window.ShadowDOMPolyfill) {
-        this.require();
-      }  
-    }
-  },
-
-  // can't shim until attached if using SD polyfill because need to find host
-  attached: function() {
-    if (!this.id && window.ShadowDOMPolyfill) {
-      this.require();
-    }
-  },
-
-  /****** producer stuff *******/
-
-  provide: function() {
-    this.register();
-    // we want to do this asap, especially so we can do so before definitions
-    // that use this core-style are registered.
-    if (this.textContent) {
-      this._completeProvide();
-    } else {
-      this.async(this._completeProvide);
-    }
-  },
-
-  register: function() {
-    var i = this.list[this.id];
-    if (i) {
-      if (!Array.isArray(i)) {
-        this.list[this.id] = [i];
-      }
-      this.list[this.id].push(this);
-    } else {
-      this.list[this.id] = this;  
-    }
-  },
-
-  // stamp into a shadowRoot so we can monitor dom of the bound output
-  _completeProvide: function() {
-    this.createShadowRoot();
-    this.domObserver = new MutationObserver(this.domModified.bind(this))
-        .observe(this.shadowRoot, {subtree: true, 
-        characterData: true, childList: true});
-    this.provideContent();
-  },
-
-  provideContent: function() {
-    this.ensureTemplate();
-    this.shadowRoot.textContent = '';
-    this.shadowRoot.appendChild(this.instanceTemplate(this.template));
-    this.cssText = this.shadowRoot.textContent;
-  },
-
-  ensureTemplate: function() {
-    if (!this.template) {
-      this.template = this.querySelector('template:not([repeat]):not([bind])');
-      // move content into the template
-      if (!this.template) {
-        this.template = document.createElement('template');
-        var n = this.firstChild;
-        while (n) {
-          this.template.content.appendChild(n.cloneNode(true));
-          n = n.nextSibling;
-        }
-      }
-    }
-  },
-
-  domModified: function() {
-    this.cssText = this.shadowRoot.textContent;
-    this.notify();
-  },
-
-  // notify instances that reference this element
-  notify: function() {
-    var s$ = this.refMap[this.id];
-    if (s$) {
-      for (var i=0, s; (s=s$[i]); i++) {
-        s.require();
-      }
-    }
-  },
-
-  /****** consumer stuff *******/
-
-  registerRef: function(ref) {
-    //console.log('register', ref);
-    this.refMap[this.ref] = this.refMap[this.ref] || [];
-    this.refMap[this.ref].push(this);
-  },
-
-  applyRef: function(ref) {
-    this.ref = ref;
-    this.registerRef(this.ref);
-    this.require();
-  },
-
-  require: function() {
-    var cssText = this.cssTextForRef(this.ref);
-    //console.log('require', this.ref, cssText);
-    if (cssText) {
-      this.ensureStyleElement();
-      // do nothing if cssText has not changed
-      if (this.styleElement._cssText === cssText) {
-        return;
-      }
-      this.styleElement._cssText = cssText;
-      if (window.ShadowDOMPolyfill) {
-        this.styleElement.textContent = cssText;
-        cssText = WebComponents.ShadowCSS.shimStyle(this.styleElement,
-            this.getScopeSelector());
-      }
-      this.styleElement.textContent = cssText;
-    }
-  },
-
-  cssTextForRef: function(ref) {
-    var s$ = this.byId(ref);
-    var cssText = '';
-    if (s$) {
-      if (Array.isArray(s$)) {
-        var p = [];
-        for (var i=0, l=s$.length, s; (i<l) && (s=s$[i]); i++) {
-          p.push(s.cssText);
-        }
-        cssText = p.join('\n\n');
-      } else {
-        cssText = s$.cssText;
-      }
-    }
-    if (s$ && !cssText) {
-      console.warn('No styles provided for ref:', ref);
-    }
-    return cssText;
-  },
-
-  byId: function(id) {
-    return this.list[id];
-  },
-
-  ensureStyleElement: function() {
-    if (!this.styleElement) {
-      this.styleElement = window.ShadowDOMPolyfill ? 
-          this.makeShimStyle() :
-          this.makeRootStyle();
-    }
-    if (!this.styleElement) {
-      console.warn(this.localName, 'could not setup style.');
-    }
-  },
-
-  makeRootStyle: function() {
-    var style = document.createElement('style');
-    this.appendChild(style);
-    return style;
-  },
-
-  makeShimStyle: function() {
-    var host = this.findHost(this);
-    if (host) {
-      var name = host.localName;
-      var style = document.querySelector('style[' + name + '=' + this.ref +']');
-      if (!style) {
-        style = document.createElement('style');
-        style.setAttribute(name, this.ref);
-        document.head.appendChild(style);
-      }
-      return style;
-    }
-  },
-
-  getScopeSelector: function() {
-    if (!this._scopeSelector) {
-      var selector = '', host = this.findHost(this);
-      if (host) {
-        var typeExtension = host.hasAttribute('is');
-        var name = typeExtension ? host.getAttribute('is') : host.localName;
-        selector = WebComponents.ShadowCSS.makeScopeSelector(name, 
-            typeExtension);
-      }
-      this._scopeSelector = selector;
-    }
-    return this._scopeSelector;
-  },
-
-  findHost: function(node) {
-    while (node.parentNode) {
-      node = node.parentNode;
-    }
-    return node.host || wrap(document.documentElement);
-  },
-
-  /* filters! */
-  // TODO(dfreedm): add more filters!
-
-  cycle: function(rgb, amount) {
-    if (rgb.match('#')) {
-      var o = this.hexToRgb(rgb);
-      if (!o) {
-        return rgb;
-      }
-      rgb = 'rgb(' + o.r + ',' + o.b + ',' + o.g + ')';
-    }
-
-    function cycleChannel(v) {
-      return Math.abs((Number(v) - amount) % 255);
-    }
-
-    return rgb.replace(/rgb\(([^,]*),([^,]*),([^,]*)\)/, function(m, a, b, c) {
-      return 'rgb(' + cycleChannel(a) + ',' + cycleChannel(b) + ', ' 
-          + cycleChannel(c) + ')';
-    });
-  },
-
-  hexToRgb: function(hex) {
-    var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
-    return result ? {
-        r: parseInt(result[1], 16),
-        g: parseInt(result[2], 16),
-        b: parseInt(result[3], 16)
-    } : null;
-  }
-
-});
-
-
-})();
-</script>
-</polymer-element>

data/app/assets/components/core-style/elements.html

@@ -1,55 +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
--->
-<link rel="import" href="core-style.html">
-
-<core-style id="my-toolbar">
-  :host {
-    height: 54px;
-    font-size: 1.3rem;
-    background-color: steelblue;
-    color: white;
-  }
-
-  polyfill-next-selector {
-    content: ':host > *';
-  }
-  ::content > * {
-    margin: 8px;
-  }
-</core-style>
-
-<polymer-element name="my-toolbar" horizontal center layout noscript>
-  <template>
-    <core-style ref="my-toolbar"></core-style>
-    <content></content>
-  </template>
-</polymer-element>
-
-<core-style id="my-panel">
-  :host {
-    display: inline-block;
-    height: 200px;
-    width: calc({{ 100 / g.columns }}% - 16px);
-    font-size: 50px;
-    background: gray;
-    margin: 8px;
-  }
-</core-style>
-
-<script>
-  CoreStyle.g.columns = 3;
-</script>
-
-<polymer-element name="my-panel" vertical center center-justified layout noscript>
-  <template>
-    <core-style ref="my-panel"></core-style>
-    <content></content>
-  </template>
-</polymer-element>

data/app/assets/components/core-style/my-theme.html

@@ -1,73 +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
--->
-<link rel="import" href="core-style.html">
-
-<script>
-
-  CoreStyle.g.theme = {
-    colorOne: '#abcdef',
-    colorTwo: '#123456',
-    colorThree: '#224433'
-  }
-</script>
-
-<core-style id="main">
-  body {
-    font-family: sans-serif;
-  }
-
-  section {
-    overflow: auto;
-  }
-
-  button {
-    border: 1px solid {{g.theme.colorOne | cycle(-50)}};
-    border-radius: 4px;
-    background-color: {{g.theme.colorOne}};
-    color: {{g.theme.colorTwo}};
-  }
-
-  button:active {
-    border: 1px solid {{g.theme.colorTwo | cycle(50)}};
-    border-radius: 4px;
-    background-color: {{g.theme.colorTwo}};
-    color: {{g.theme.colorOne}};
-  }
-
-  <template repeat="{{item in g.items}}">
-    my-panel:nth-of-type({{item+1}}) {
-      background-color: {{ g.theme.colorThree | cycle(item * -1) }};
-    }
-  </template>
-</core-style>
-
-<core-style id="my-toolbar">
-  :host {
-    border-bottom: 8px solid {{g.theme.colorOne}};
-    color: {{g.theme.colorOne | cycle(100)}};
-    background-color: {{g.theme.colorTwo}};
-  }
-</core-style>
-
-<core-style id="my-panel">
-  :host {
-    box-sizing: border-box;
-    background-color: {{g.theme.colorOne}};
-    border: 8px solid {{g.theme.colorOne | cycle(50)}};
-    color: {{g.theme.colorOne | cycle(-100)}};
-  }
-
-  :host(:nth-of-type(2n + 1)) {
-    background-color: {{g.theme.colorTwo}};
-    border: 8px solid {{g.theme.colorTwo | cycle(-50)}};
-    color: {{g.theme.colorTwo | cycle(100)}}
-  }
-
-</core-style>

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

@@ -1,117 +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
-*/
-
-:host {
-  /* technical */
-  display: block;
-  position: relative;
-  box-sizing: border-box;
-  -moz-box-sizing: border-box;
-  /* size */
-  height: 64px;
-  /* typography */
-  font-size: 1.3em;
-  /* background */
-  background-color: #CFD8DC;
-}
-
-:host(.animate) {
-  /* transition */
-  transition: height 0.18s ease-in;
-}
-
-:host(.medium-tall) {
-  height: 128px;
-}
-
-:host(.tall) {
-  height: 192px;
-}
-
-.toolbar-tools {
-  position: relative;
-  height: 64px;
-  padding: 0 8px;
-  pointer-events: none;
-}
-
-/* narrow layout */
-:host(.core-narrow),
-:host-context(.core-narrow) {
-  height: 56px;
-}
-
-polyfill-next-selector { content: ':host.core-narrow.medium-tall, .core-narrow :host.medium-tall'; }
-:host(.core-narrow.medium-tall),
-:host-context(.core-narrow):host(.medium-tall) {
-  height: 112px;
-}
-
-polyfill-next-selector { content: ':host.core-narrow.tall, .core-narrow :host.tall'; }
-:host(.core-narrow.tall),
-:host-context(.core-narrow):host(.tall) {
-  height: 168px;
-}
-
-polyfill-next-selector { content: ':host.core-narrow .toolbar-tools, .core-narrow :host .toolbar-tools'; }
-:host(.core-narrow) .toolbar-tools,
-:host-context(.core-narrow) .toolbar-tools {
-  height: 56px;
-  padding: 0;
-}
-
-/* middle bar */
-#middleBar {
-  position: absolute;
-  top: 0;
-  right: 0;
-  left: 0;
-}
-
-:host(.tall, .medium-tall) #middleBar {
-  -webkit-transform: translateY(100%);
-  transform: translateY(100%);
-}
-
-/* bottom bar */
-#bottomBar {
-  position: absolute;
-  right: 0;
-  bottom: 0;
-  left: 0;
-}
-
-/* make elements (e.g. buttons) respond to mouse/touch events */
-polyfill-next-selector { content: '.toolbar-tools > *:not([disabled])'; }
-::content > *:not([disabled]) {
-  pointer-events: auto;
-}
-
-/* elements spacing */
-polyfill-next-selector { content: '.toolbar-tools > *'; }
-::content > * {
-  margin: 0 8px;
-}
-
-/* misc helpers */
-polyfill-next-selector { content: '.toolbar-tools > .fit'; }
-::content > .fit {
-  position: absolute;
-  top: auto;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  width: auto;
-  margin: 0;
-}
-
-polyfill-next-selector { content: ':host .indent'; }
-::content > .indent {
-  margin-left: 60px;
-}