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-tooltip/demo.html ADDED Viewed

@@ -0,0 +1,176 @@
+<!--
+    @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 lang="en">
+<head>
+  <meta charset="utf-8">
+  <title>Core Tooltip</title>
+  <script src="../platform/platform.js"></script>
+  <link rel="import" href="core-tooltip.html">
+  <style>
+    body {
+      font-family: "Open Sans", sans-serif;
+      font-weight: 300;
+      padding: 24px;
+    }
+    .example {
+      margin: 35px 15px;
+    }
+    .example > * {
+      margin: 0 15px;
+    }
+    .fakebutton {
+      box-shadow: 0 0 3px #aaa inset;
+      border-radius: 3px;
+      padding: 7px 5px;
+    }
+    .fakebutton:hover {
+      background-color: white;
+    }
+    img {
+      width: 400px;
+      height: 150px;
+      object-fit: cover;
+    }
+    img.large {
+      border: 15px solid white;
+      box-sizing: border-box;
+    }
+    .profile {
+      width: 60px;
+      height: auto;
+      border-radius: 50%;
+      vertical-align: middle;
+    }
+    a {
+      color: currentcolor;
+      text-decoration: none;
+    }
+    .rich {
+      background: hotpink;
+      color: white;
+      padding:20px;
+      border-radius: 5px;
+    }
+  </style>
+  <style shim-shadowdom>
+    core-tooltip.fancy::shadow .polymer-tooltip {
+      opacity: 0;
+      -webkit-transition: all 300ms cubic-bezier(0,1.92,.99,1.07);
+      transition: all 300ms cubic-bezier(0,1.92,.99,1.07);
+      -webkit-transform: translate3d(0, -10px, 0);
+      transform: translate3d(0, -10px, 0);
+    }
+    core-tooltip.fancy:hover::shadow .polymer-tooltip,
+    core-tooltip.fancy:focus::shadow .polymer-tooltip {
+      opacity: 1;
+      -webkit-transform: translate3d(0, 0, 0);
+      transform: translate3d(0, 0, 0);
+    }
+    .on /deep/ .polymer-tooltip {
+      visibility: visible !important;
+    }
+  </style>
+</head>
+<body unresolved>
+  <article onclick="this.classList.toggle('on');">
+    <em>click the page to toggle all examples...</em>
+      <section class="small" layout horizontal center-center>
+        <div class="example">
+          <core-tooltip label='position="left"' position="left">
+            <div class="fakebutton">|||</div>
+          </core-tooltip>
+          <core-tooltip label='position="top"' position="top">
+            <div class="fakebutton">|||</div>
+          </core-tooltip>
+          <core-tooltip label='position="bottom"' position="bottom">
+            <div class="fakebutton">|||</div>
+          </core-tooltip>
+          <core-tooltip label='position="right"' position="right">
+            <div class="fakebutton">|||</div>
+          </core-tooltip>
+        </div>
+        <div class="example">
+          <core-tooltip label="Fancy effect" class="fancy">
+            <img src="https://pbs.twimg.com/profile_images/378800000548263523/c110b0a4c3e3e4d3dcce1d2020f3eded.jpeg
+        " class="profile">
+          </core-tooltip>
+        </div>
+      </section>
+      <section layout horizontal center-center>
+        <div class="example">
+          <core-tooltip>
+            <div class="rich">Rich tooltip with HTML</div>
+            <div tip>
+              <img src="https://pbs.twimg.com/profile_images/378800000548263523/c110b0a4c3e3e4d3dcce1d2020f3eded.jpeg
+        " class="profile" style="width: 40px;margin-right: 8px;">Eric <b>Bidelman</b> - <a href="#">@ebidel</a></div>
+          </core-tooltip>
+        </div>
+        <div class="example">
+          <core-tooltip label="<core-tooltip large>" large>
+            Larger tooltips for mobile
+          </core-tooltip>
+        </div>
+      </section>
+      <section layout horizontal center-center>
+        <div class="example">
+          <core-tooltip label="Tooltip with no arrow and always on: <core-tooltip noarrow show>" position="bottom" noarrow show>
+            <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/building.jpg" class="large">
+          </core-tooltip>
+        </div>
+      </section>
+  </article>
+</body>
+</html>

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

@@ -0,0 +1,23 @@
+<!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>
+  <meta charset="utf-8">
+  <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-tooltip/metadata.html ADDED Viewed

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

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

	@@ -0,0 +1,2 @@
1	+ core-transition
2	+ ===============

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

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

data/app/assets/components/core-transition/core-transition-css.html ADDED Viewed

@@ -0,0 +1,221 @@
+<!--
+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-transition-css>` implements CSS transitions as `<core-transition>` objects so they can be
+reused in a pluggable transition system such as in `<core-overlay>`. Currently this class has
+some specific support to animate an element from and to the viewport such as a dialog, but you
+can override it for different effects.
+Example:
+my-css-transition.html:
+    <polymer-element name="my-css-transition" extends="core-transition-css">
+    <template>
+        <style>
+            :host(.my-transition) {
+                opacity: 0;
+                transition: transform 1s ease-out, opacity 1s ease-out;
+            }
+            :host(.my-transition.my-opened) {
+                opacity: 1;
+                transform: none;
+            }
+            :host(.my-transition-top) {
+                transform: translateY(-100vh);
+            }
+            :host(.my-transition-bottom) {
+                transform: translateY(100vh);
+            }
+        </style>
+    </template>
+    <script>
+      Polymer({
+        baseClass: 'my-transition',
+        openedClass: 'my-opened'
+      });
+    </script>
+    </polymer-element>
+    <my-css-transition id="my-transition-top" transitionType="top"></my-css-transition>
+    <my-css-transition id="my-transition-bottom" transitionType="bottom"></my-css-transition>
+my-css-transition-demo.html
+    <link href="components/core-meta/core-meta.html" rel="import">
+    <link href="my-css-transition.html">
+    <div id="animate-me"></div>
+    <script>
+        // Get the core-transition
+        var meta = document.createElement('core-meta');
+        meta.type = 'transition';
+        var transition1 = meta.byId('my-transition-top');
+        // Set up the animation
+        var animated = document.getElementById('animate-me');
+        transition1.setup(animated);
+        transition1.go(animated, {opened: true});
+    </script>
+The first element in the template of a `<core-transition-css>` object should be a stylesheet. It
+will be injected to the scope of the animated node in the `setup` function. The node is initially
+invisible with `opacity: 0`, and you can transition it to an "opened" state by passing
+`{opened: true}` to the `go` function.
+All nodes being animated will get the class `my-transition` added in the `setup` function.
+Additionally, the class `my-transition-<transitionType>` will be applied. You can use the
+`transitionType` attribute to implement several different behaviors with the same
+`<core-transition-css>` object. In the above example, `<my-css-transition>` implements both
+sliding the node from the top of the viewport and from the bottom of the viewport.
+Available transitions
+---------------------
+`<core-transition-css>` includes several commonly used transitions.
+`core-transition-fade`: Animates from `opacity: 0` to `opacity: 1` when it opens.
+`core-transition-center`: Zooms the node into the final size.
+`core-transition-top`: Slides the node into the final position from the top.
+`core-transition-bottom`: Slides the node into the final position from the bottom.
+`core-transition-left`: Slides the node into the final position from the left.
+`core-transition-right`: Slides the node into the final position from the right.
+@group Polymer Core Elements
+@element core-transition-css
+@extends core-transition
+@status beta
+@homepage github.io
+-->
+<link rel="import" href="core-transition.html">
+<polymer-element name="core-transition-css" extends="core-transition" attributes="transitionType">
+<template>
+  <link no-shim rel="stylesheet" href="core-transition-overlay.css">
+</template>
+<script>
+  Polymer('core-transition-css', {
+    /**
+     * The class that will be applied to all animated nodes.
+     *
+     * @attribute baseClass
+     * @type string
+     * @default "core-transition"
+     */
+    baseClass: 'core-transition',
+    /**
+     * The class that will be applied to nodes in the opened state.
+     *
+     * @attribute openedClass
+     * @type string
+     * @default "core-opened"
+     */
+    openedClass: 'core-opened',
+    /**
+     * The class that will be applied to nodes in the closed state.
+     *
+     * @attribute closedClass
+     * @type string
+     * @default "core-closed"
+     */
+    closedClass: 'core-closed',
+    /**
+     * Event to listen to for animation completion.
+     *
+     * @attribute completeEventName
+     * @type string
+     * @default "transitionEnd"
+     */
+    completeEventName: 'transitionend',
+    publish: {
+      /**
+       * A secondary configuration attribute for the animation. The class
+       * `<baseClass>-<transitionType` is applied to the animated node during
+       * `setup`.
+       *
+       * @attribute transitionType
+       * @type string
+       */
+      transitionType: null
+    },
+    registerCallback: function(element) {
+      this.transitionStyle = element.templateContent().firstElementChild;
+    },
+    // template is just for loading styles, we don't need a shadowRoot
+    fetchTemplate: function() {
+      return null;
+    },
+    go: function(node, state) {
+      if (state.opened !== undefined) {
+        this.transitionOpened(node, state.opened);
+      }
+    },
+    setup: function(node) {
+      if (!node._hasTransitionStyle) {
+        if (!node.shadowRoot) {
+          node.createShadowRoot().innerHTML = '<content></content>';
+        }
+        this.installScopeStyle(this.transitionStyle, 'transition',
+            node.shadowRoot);
+        node._hasTransitionStyle = true;
+      }
+      node.classList.add(this.baseClass);
+      if (this.transitionType) {
+        node.classList.add(this.baseClass + '-' + this.transitionType);
+      }
+    },
+    teardown: function(node) {
+      node.classList.remove(this.baseClass);
+      if (this.transitionType) {
+        node.classList.remove(this.baseClass + '-' + this.transitionType);
+      }
+    },
+    transitionOpened: function(node, opened) {
+      this.listenOnce(node, this.completeEventName, function() {
+        node.classList.toggle(this.revealedClass, opened);
+        if (!opened) {
+          node.classList.remove(this.closedClass);
+        }
+        this.complete(node);
+      });
+      node.classList.toggle(this.openedClass, opened);
+      node.classList.toggle(this.closedClass, !opened);
+    }
+  });
+</script>
+</polymer-element>
+<core-transition-css id="core-transition-fade"></core-transition-css>
+<core-transition-css id="core-transition-center" transitionType="center"></core-transition-css>
+<core-transition-css id="core-transition-top" transitionType="top"></core-transition-css>
+<core-transition-css id="core-transition-bottom" transitionType="bottom"></core-transition-css>
+<core-transition-css id="core-transition-left" transitionType="left"></core-transition-css>
+<core-transition-css id="core-transition-right" transitionType="right"></core-transition-css>

data/app/assets/components/core-transition/core-transition.html ADDED Viewed

@@ -0,0 +1,140 @@
+<!--
+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-transition>` is an abstraction of an animation. It is used to implement pluggable
+transitions, for example in `<core-overlay>`. You can extend this class to create a custom
+animation, instantiate it, and import it where you need the animation.
+All instances of `<core-transition>` are stored in a single database with `type=transition`.
+For more about the database, please see the documentation for `<core-meta>`.
+Each instance of `<core-transition>` objects are shared across all the clients, so you should
+not store state information specific to the animated element in the transition. Rather, store
+it on the element.
+Example:
+my-transition.html:
+    <polymer-element name="my-transition" extends="core-transition">
+        <script>
+            go: function(node) {
+                node.style.transition = 'opacity 1s ease-out';
+                node.style.opacity = 0;
+            }
+        </script>
+    </polymer-element>
+    <my-transition id="my-fade-out"></my-transition>
+my-transition-demo.html:
+    <link href="components/core-meta/core-meta.html" rel="import">
+    <link href="my-transition.html" rel="import">
+    <div id="animate-me"></div>
+    <script>
+        // Get the core-transition
+        var meta = document.createElement('core-meta');
+        meta.type = 'transition';
+        var transition = meta.byId('my-fade-out');
+        // Run the animation
+        var animated = document.getElementById('animate-me');
+        transition.go(animated);
+    </script>
+@group Polymer Core Elements
+@element core-transition
+@extends core-meta
+@status beta
+@homepage github.io
+-->
+<!--
+Fired when the animation finishes.
+@event core-transitionend
+@param {Object} detail
+@param {Object} detail.node The animated node
+-->
+<link rel="import" href="../core-meta/core-meta.html">
+<polymer-element name="core-transition" extends="core-meta">
+  <script>
+    Polymer('core-transition', {
+      type: 'transition',
+      /**
+       * Run the animation.
+       *
+       * @method go
+       * @param {Node} node The node to apply the animation on
+       * @param {Object} state State info
+       */
+      go: function(node, state) {
+        this.complete(node);
+      },
+      /**
+       * Set up the animation. This may include injecting a stylesheet,
+       * applying styles, creating a web animations object, etc.. This
+       *
+       * @method setup
+       * @param {Node} node The animated node
+       */
+      setup: function(node) {
+      },
+      /**
+       * Tear down the animation.
+       *
+       * @method teardown
+       * @param {Node} node The animated node
+       */
+      teardown: function(node) {
+      },
+      /**
+       * Called when the animation completes. This function also fires the
+       * `core-transitionend` event.
+       *
+       * @method complete
+       * @param {Node} node The animated node
+       */
+      complete: function(node) {
+        this.fire('core-transitionend', null, node);
+      },
+      /**
+       * Utility function to listen to an event on a node once.
+       *
+       * @method listenOnce
+       * @param {Node} node The animated node
+       * @param {string} event Name of an event
+       * @param {Function} fn Event handler
+       * @param {Array} args Additional arguments to pass to `fn`
+       */
+      listenOnce: function(node, event, fn, args) {
+        var self = this;
+        var listener = function() {
+          fn.apply(self, args);
+          node.removeEventListener(event, listener, false);
+        }
+        node.addEventListener(event, listener, false);
+      }
+    });
+  </script>
+</polymer-element>

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

@@ -0,0 +1,87 @@
+<!doctype html>
+<!--
+Copyright 2013 The Polymer Authors. All rights reserved.
+Use of this source code is governed by a BSD-style
+license that can be found in the LICENSE file.
+-->
+<html>
+<head>
+  <meta charset="utf-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+  <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
+  <title>core-transition</title>
+  <script src="../platform/platform.js"></script>
+  <link href="core-transition-css.html" rel="import">
+  <style>
+    #animate-me {
+      background-color: lime;
+      position: fixed;
+      top: 100px;
+      width: 100%;
+      height: 100%;
+    }
+  </style>
+</head>
+<body unresolved>
+  <div id="animate-me" hidden></div>
+  <select id="sel" onchange="setup();">
+    <option value="core-transition-fade" selected>core-transition-fade</option>
+    <option value="core-transition-center">core-transition-center</option>
+    <option value="core-transition-top">core-transition-top</option>
+    <option value="core-transition-bottom">core-transition-bottom</option>
+    <option value="core-transition-left">core-transition-left</option>
+    <option value="core-transition-right">core-transition-right</option>
+  </select>
+  <button onclick="stuff();">toggle</button>
+  <script>
+    document.addEventListener('polymer-ready', function() {
+      // initial setup
+      setup();
+      document.getElementById('animate-me').removeAttribute('hidden');
+    });
+    var meta;
+    var transition;
+    var state = {
+      opened: false
+    }
+    function getMeta() {
+      if (!meta) {
+        meta = document.createElement('core-meta');
+        meta.type = 'transition';
+      }
+      return meta;
+    }
+    function setup() {
+      var target = document.getElementById('animate-me');
+      if (transition) {
+        transition.teardown(target);
+      }
+      var value = document.getElementById('sel').selectedOptions[0].value;
+      transition = getMeta().byId(value);
+      transition.setup(target);
+    }
+    function stuff() {
+      var target = document.getElementById('animate-me');
+      state.opened = !state.opened;
+      transition.go(target, state);
+    }
+  </script>
+</body>
+</html>