RubyGems - easycomments - Versions diffs - 1.0.1 - Mend

easycomments 1.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (379) hide show

data/public/bower_components/core-header-panel/core-header-panel.html ADDED Viewed

@@ -0,0 +1,277 @@
+<!--
+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-header-panel` contains a header section and a content panel section.
+__Important:__ The `core-header-panel` will not display if its parent does not have a height.
+Using [layout attributes](http://www.polymer-project.org/docs/polymer/layout-attrs.html), you can easily make the `core-header-panel` fill the screen
+    <body fullbleed layout vertical>
+      <core-header-panel flex>
+        <core-toolbar>
+          <div>Hello World!</div>
+        </core-toolbar>
+      </core-header-panel>
+    </body>
+or, if you would prefer to do it in CSS, just give `html`, `body`, and `core-header-panel` a height of 100%:
+    html, body {
+      height: 100%;
+      margin: 0;
+    }
+    core-header-panel {
+      height: 100%;
+    }
+Special support is provided for scrolling modes when one uses a core-toolbar or equivalent
+for the header section.
+Example:
+    <core-header-panel>
+      <core-toolbar>Header</core-toolbar>
+      <div>Content goes here...</div>
+    </core-header-panel>
+If you want to use other than `core-toolbar` for the header, add
+`core-header` class to that element.
+Example:
+    <core-header-panel>
+      <div class="core-header">Header</div>
+      <div>Content goes here...</div>
+    </core-header-panel>
+To have the content fits to the main area, use `fit` attribute.
+    <core-header-panel>
+      <div class="core-header">standard</div>
+      <div class="content" fit>content fits 100% below the header</div>
+    </core-header-panel>
+Use `mode` to control the header and scrolling behavior.
+@group Polymer Core Elements
+@element core-header-panel
+@homepage github.io
+-->
+<link rel="import" href="../polymer/polymer.html">
+<polymer-element name="core-header-panel">
+<template>
+  <link rel="stylesheet" href="core-header-panel.css">
+  <div id="outerContainer" vertical layout>
+    <content id="headerContent" select="core-toolbar, .core-header"></content>
+    <div id="mainPanel" flex vertical layout>
+      <div id="mainContainer" flex?="{{mode !== 'cover'}}">
+        <content id="mainContent" select="*"></content>
+      </div>
+      <div id="dropShadow"></div>
+    </div>
+  </div>
+</template>
+<script>
+  Polymer({
+    /**
+     * Fired when the content has been scrolled.  `event.detail.target` returns
+     * the scrollable element which you can use to access scroll info such as
+     * `scrollTop`.
+     *
+     *     <core-header-panel on-scroll="{{scrollHandler}}">
+     *       ...
+     *     </core-header-panel>
+     *
+     *
+     *     scrollHandler: function(event) {
+     *       var scroller = event.detail.target;
+     *       console.log(scroller.scrollTop);
+     *     }
+     *
+     * @event scroll
+     */
+    publish: {
+      /**
+       * Controls header and scrolling behavior. Options are
+       * `standard`, `seamed`, `waterfall`, `waterfall-tall`, `scroll` and
+       * `cover`. Default is `standard`.
+       *
+       * `standard`: The header is a step above the panel. The header will consume the
+       * panel at the point of entry, preventing it from passing through to the
+       * opposite side.
+       *
+       * `seamed`: The header is presented as seamed with the panel.
+       *
+       * `waterfall`: Similar to standard mode, but header is initially presented as
+       * seamed with panel, but then separates to form the step.
+       *
+       * `waterfall-tall`: The header is initially taller (`tall` class is added to
+       * the header).  As the user scrolls, the header separates (forming an edge)
+       * while condensing (`tall` class is removed from the header).
+       *
+       * `scroll`: The header keeps its seam with the panel, and is pushed off screen.
+       *
+       * `cover`: The panel covers the whole `core-header-panel` including the
+       * header. This allows user to style the panel in such a way that the panel is
+       * partially covering the header.
+       *
+       *     <style>
+       *       core-header-panel[mode=cover]::shadow #mainContainer {
+       *         left: 80px;
+       *       }
+       *       .content {
+       *         margin: 60px 60px 60px 0;
+       *       }
+       *     </style>
+       *
+       *     <core-header-panel mode="cover">
+       *       <core-toolbar class="tall">
+       *         <core-icon-button icon="menu"></core-icon-button>
+       *       </core-toolbar>
+       *       <div class="content"></div>
+       *     </core-header-panel>
+       *
+       * @attribute mode
+       * @type string
+       * @default ''
+       */
+      mode: {value: '', reflect: true},
+      /**
+       * The class used in waterfall-tall mode.  Change this if the header
+       * accepts a different class for toggling height, e.g. "medium-tall"
+       *
+       * @attribute tallClass
+       * @type string
+       * @default 'tall'
+       */
+      tallClass: 'tall',
+      /**
+       * If true, the drop-shadow is always shown no matter what mode is set to.
+       *
+       * @attribute shadow
+       * @type boolean
+       * @default false
+       */
+      shadow: false
+    },
+    animateDuration: 200,
+    modeConfigs: {
+      shadowMode: {'waterfall': 1, 'waterfall-tall': 1},
+      noShadow: {'seamed': 1, 'cover': 1, 'scroll': 1},
+      tallMode: {'waterfall-tall': 1},
+      outerScroll: {'scroll': 1}
+    },
+    ready: function() {
+      this.scrollHandler = this.scroll.bind(this);
+      this.addListener();
+    },
+    detached: function() {
+      this.removeListener(this.mode);
+    },
+    addListener: function() {
+      this.scroller.addEventListener('scroll', this.scrollHandler);
+    },
+    removeListener: function(mode) {
+      var s = this.getScrollerForMode(mode);
+      s.removeEventListener('scroll', this.scrollHandler);
+    },
+    domReady: function() {
+      this.async('scroll');
+    },
+    modeChanged: function(old) {
+      var configs = this.modeConfigs;
+      var header = this.header;
+      if (header) {
+        // in tallMode it may add tallClass to the header; so do the cleanup
+        // when mode is changed from tallMode to not tallMode
+        if (configs.tallMode[old] && !configs.tallMode[this.mode]) {
+          header.classList.remove(this.tallClass);
+          this.async(function() {
+            header.classList.remove('animate');
+          }, null, this.animateDuration);
+        } else {
+          header.classList.toggle('animate', configs.tallMode[this.mode]);
+        }
+      }
+      if (configs && (configs.outerScroll[this.mode] || configs.outerScroll[old])) {
+        this.removeListener(old);
+        this.addListener();
+      }
+      this.scroll();
+    },
+    get header() {
+      return this.$.headerContent.getDistributedNodes()[0];
+    },
+    getScrollerForMode: function(mode) {
+      return this.modeConfigs.outerScroll[mode] ?
+          this.$.outerContainer : this.$.mainContainer;
+    },
+    /**
+     * Returns the scrollable element.
+     *
+     * @property scroller
+     * @type Object
+     */
+    get scroller() {
+      return this.getScrollerForMode(this.mode);
+    },
+    scroll: function() {
+      var configs = this.modeConfigs;
+      var main = this.$.mainContainer;
+      var header = this.header;
+      var sTop = main.scrollTop;
+      var atTop = sTop === 0;
+      this.$.dropShadow.classList.toggle('hidden', !this.shadow &&
+          (atTop && configs.shadowMode[this.mode] || configs.noShadow[this.mode]));
+      if (header && configs.tallMode[this.mode]) {
+        header.classList.toggle(this.tallClass, atTop ||
+            header.classList.contains(this.tallClass) &&
+            main.scrollHeight < this.$.outerContainer.offsetHeight);
+      }
+      this.fire('scroll', {target: this.scroller}, this, false);
+    }
+  });
+</script>
+</polymer-element>

data/public/bower_components/core-header-panel/demo.html ADDED Viewed

@@ -0,0 +1,100 @@
+<!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.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
+-->
+<html>
+<head>
+  <title>core-header-panel</title>
+  <script src="../webcomponentsjs/webcomponents.js"></script>
+  <link rel="import" href="core-header-panel.html">
+  <style shim-shadowdom>
+    body {
+      font-family: sans-serif;
+    }
+    core-header-panel {
+      float: left;
+      width: 360px;
+      height: 400px;
+      margin: 5px;
+    }
+    core-header-panel[mode=cover]::shadow #mainContainer {
+      left: 70px;
+    }
+    .core-header {
+      height: 60px;
+      line-height: 60px;
+      font-size: 18px;
+      padding: 0 10px;
+      background-color: #4F7DC9;
+      color: #FFF;
+      transition: height 0.2s;
+    }
+    .core-header.tall {
+      height: 180px;
+    }
+    .core-header.medium-tall {
+      height: 120px;
+    }
+    .content {
+      height: 2000px;
+      background: linear-gradient(rgb(214, 227, 231), lightblue);
+    }
+  </style>
+</head>
+<body unresolved>
+  <core-header-panel>
+    <div class="core-header">standard</div>
+    <div class="content"></div>
+  </core-header-panel>
+  <core-header-panel mode="seamed">
+    <div class="core-header">seamed</div>
+    <div class="content"></div>
+  </core-header-panel>
+  <core-header-panel mode="waterfall">
+    <div class="core-header">waterfall</div>
+    <div class="content"></div>
+  </core-header-panel>
+  <core-header-panel mode="waterfall-tall">
+    <div class="core-header">waterfall-tall</div>
+    <div class="content"></div>
+  </core-header-panel>
+  <core-header-panel mode="waterfall-tall" tallClass="medium-tall">
+    <div class="core-header">waterfall-tall (tallClass: medium-tall)</div>
+    <div class="content"></div>
+  </core-header-panel>
+  <core-header-panel mode="scroll">
+    <div class="core-header">scroll</div>
+    <div class="content"></div>
+  </core-header-panel>
+  <core-header-panel mode="cover">
+    <div class="core-header tall">cover</div>
+    <div class="content" style="margin: 60px 60px 60px 0;"></div>
+  </core-header-panel>
+</body>
+</html>

data/public/bower_components/core-header-panel/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>
+  <script src="../webcomponentsjs/webcomponents.js"></script>
+  <link rel="import" href="../polymer/polymer.html">
+  <link rel="import" href="../core-component-page/core-component-page.html">
+</head>
+<body unresolved>
+  <core-component-page></core-component-page>
+</body>
+</html>

data/public/bower_components/core-header-panel/metadata.html ADDED Viewed

@@ -0,0 +1,37 @@
+<!--
+    @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-header-panel" label="Header Panel" isContainer group="Core">
+  <property name="mode" kind="select" options="standard, waterfall, waterfall-tall, scroll, cover"></property>
+  <template>
+    <core-header-panel mode="standard" style="width: 300px; height: 400px;">
+      <core-toolbar style="background-color: #4F7DC9; color: #FFF;">
+        <core-icon-button icon="menu"></core-icon-button>
+        <div>Header</div>
+      </core-toolbar>
+      <section style="height: 1000px; background: linear-gradient(rgb(214, 227, 231), lightblue);"></section>
+    </core-header-panel>
+  </template>
+  <template id="imports">
+    <link rel="import" href="../core-icon-button/core-icon-button.html">
+    <link rel="import" href="../core-toolbar/core-toolbar.html">
+    <link rel="import" href="core-header-panel.html">
+  </template>
+</x-meta>

data/public/bower_components/core-icon/.bower.json ADDED Viewed

@@ -0,0 +1,19 @@
+{
+  "name": "core-icon",
+  "private": true,
+  "dependencies": {
+    "core-iconset": "Polymer/core-iconset#^0.5",
+    "core-icons": "Polymer/core-icons#^0.5"
+  },
+  "version": "0.5.5",
+  "homepage": "https://github.com/Polymer/core-icon",
+  "_release": "0.5.5",
+  "_resolution": {
+    "type": "version",
+    "tag": "0.5.5",
+    "commit": "54ea8970f2c517ec8d32fb3dba330209d844596e"
+  },
+  "_source": "git://github.com/Polymer/core-icon.git",
+  "_target": "^0.5",
+  "_originalSource": "Polymer/core-icon"
+}

data/public/bower_components/core-icon/README.md ADDED Viewed

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

data/public/bower_components/core-icon/bower.json ADDED Viewed

@@ -0,0 +1,9 @@
+{
+  "name": "core-icon",
+  "private": true,
+  "dependencies": {
+    "core-iconset": "Polymer/core-iconset#^0.5",
+    "core-icons": "Polymer/core-icons#^0.5"
+  },
+  "version": "0.5.5"
+}

data/public/bower_components/core-icon/core-icon.css ADDED Viewed

@@ -0,0 +1,16 @@
+/* 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 */
+html /deep/ core-icon {
+  display: inline-block;
+  vertical-align: middle;
+  background-repeat: no-repeat;
+  fill: currentcolor;
+  position: relative;
+  height: 24px;
+  width: 24px;
+}

data/public/bower_components/core-icon/core-icon.html ADDED Viewed

@@ -0,0 +1,201 @@
+<!--
+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-icon` element displays an icon. By default an icon renders as a 24px square.
+Example using src:
+    <core-icon src="star.png"></core-icon>
+Example setting size to 32px x 32px:
+    <core-icon class="big" src="big_star.png"></core-icon>
+    <style>
+      .big {
+        height: 32px;
+        width: 32px;
+      }
+    </style>
+The core elements include several sets of icons.
+To use the default set of icons, import  `core-icons.html` and use the `icon` attribute to specify an icon:
+    <link rel="import" href="/components/core-icons/core-icons.html">
+    <core-icon icon="menu"></core-icon>
+To use a different built-in set of icons, import  `core-icons/<iconset>-icons.html`, and
+specify the icon as `<iconset>:<icon>`. For example:
+    <link rel="import" href="/components/core-icons/communication-icons.html">
+    <core-icon icon="communication:email"></core-icon>
+You can also create custom icon sets of bitmap or SVG icons.
+Example of using an icon named `cherry` from a custom iconset with the ID `fruit`:
+    <core-icon icon="fruit:cherry"></core-icon>
+See [core-iconset](#core-iconset) and [core-iconset-svg](#core-iconset-svg) for more information about
+how to create a custom iconset.
+See [core-icons](http://www.polymer-project.org/components/core-icons/demo.html) for the default set of icons.
+@group Polymer Core Elements
+@element core-icon
+@homepage polymer.github.io
+-->
+<link rel="import" href="../core-iconset/core-iconset.html">
+<link rel="stylesheet" href="core-icon.css" shim-shadowdom>
+<polymer-element name="core-icon" attributes="src icon alt">
+<script>
+(function() {
+  // mono-state
+  var meta;
+  Polymer('core-icon', {
+    /**
+     * The URL of an image for the icon. If the src property is specified,
+     * the icon property should not be.
+     *
+     * @attribute src
+     * @type string
+     * @default ''
+     */
+    src: '',
+    /**
+     * Specifies the icon name or index in the set of icons available in
+     * the icon's icon set. If the icon property is specified,
+     * the src property should not be.
+     *
+     * @attribute icon
+     * @type string
+     * @default ''
+     */
+    icon: '',
+    /**
+     * Alternative text content for accessibility support.
+     * If alt is present and not empty, it will set the element's role to img and add an aria-label whose content matches alt.
+     * If alt is present and is an empty string, '', it will hide the element from the accessibility layer
+     * If alt is not present, it will set the element's role to img and the element will fallback to using the icon attribute for its aria-label.
+     *
+     * @attribute alt
+     * @type string
+     * @default ''
+     */
+    alt: null,
+    observe: {
+      'icon': 'updateIcon',
+      'alt': 'updateAlt'
+    },
+    defaultIconset: 'icons',
+    ready: function() {
+      if (!meta) {
+        meta = document.createElement('core-iconset');
+      }
+      // Allow user-provided `aria-label` in preference to any other text alternative.
+      if (this.hasAttribute('aria-label')) {
+        // Set `role` if it has not been overridden.
+        if (!this.hasAttribute('role')) {
+          this.setAttribute('role', 'img');
+        }
+        return;
+      }
+      this.updateAlt();
+    },
+    srcChanged: function() {
+      var icon = this._icon || document.createElement('div');
+      icon.textContent = '';
+      icon.setAttribute('fit', '');
+      icon.style.backgroundImage = 'url(' + this.src + ')';
+      icon.style.backgroundPosition = 'center';
+      icon.style.backgroundSize = '100%';
+      if (!icon.parentNode) {
+        this.appendChild(icon);
+      }
+      this._icon = icon;
+    },
+    getIconset: function(name) {
+      return meta.byId(name || this.defaultIconset);
+    },
+    updateIcon: function(oldVal, newVal) {
+      if (!this.icon) {
+        this.updateAlt();
+        return;
+      }
+      var parts = String(this.icon).split(':');
+      var icon = parts.pop();
+      if (icon) {
+        var set = this.getIconset(parts.pop());
+        if (set) {
+          this._icon = set.applyIcon(this, icon);
+          if (this._icon) {
+            this._icon.setAttribute('fit', '');
+          }
+        }
+      }
+      // Check to see if we're using the old icon's name for our a11y fallback
+      if (oldVal) {
+        if (oldVal.split(':').pop() == this.getAttribute('aria-label')) {
+          this.updateAlt();
+        }
+      }
+    },
+    updateAlt: function() {
+      // Respect the user's decision to remove this element from
+      // the a11y tree
+      if (this.getAttribute('aria-hidden')) {
+        return;
+      }
+      // Remove element from a11y tree if `alt` is empty, otherwise
+      // use `alt` as `aria-label`.
+      if (this.alt === '') {
+        this.setAttribute('aria-hidden', 'true');
+        if (this.hasAttribute('role')) {
+          this.removeAttribute('role');
+        }
+        if (this.hasAttribute('aria-label')) {
+          this.removeAttribute('aria-label');
+        }
+      } else {
+        this.setAttribute('aria-label', this.alt ||
+                                        this.icon.split(':').pop());
+        if (!this.hasAttribute('role')) {
+          this.setAttribute('role', 'img');
+        }
+        if (this.hasAttribute('aria-hidden')) {
+          this.removeAttribute('aria-hidden');
+        }
+      }
+    }
+  });
+})();
+</script>
+</polymer-element>