easycomments 1.0.1

data/public/bower_components/core-drawer-panel/core-drawer-panel.css

@@ -0,0 +1,160 @@
+/*
+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: hidden;
+}
+
+core-selector > #drawer {
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 100%;
+  will-change: transform;
+  box-sizing: border-box;
+  -moz-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
+*/
+.right-drawer > #drawer {
+  left: auto;
+  right: 0;
+}
+
+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;
+}
+
+core-selector > #main {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+}
+
+.transition > #main {
+  transition: left ease-in-out 0.3s, padding ease-in-out 0.3s;
+}
+
+.right-drawer > #main {
+  left: 0;
+}
+
+.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;
+}
+
+#edgeSwipeOverlay {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  width: 20px;
+}
+
+.right-drawer > #main > #edgeSwipeOverlay {
+  right: 0;
+  left: auto;
+}
+
+/*
+narrow layout
+*/
+.narrow-layout > #drawer.core-selected {
+  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.15);
+}
+
+.right-drawer.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: translateX(-100%);
+  transform: translateX(-100%);
+}
+
+.right-drawer.narrow-layout > #drawer:not(.core-selected) {
+  left: auto;
+  -webkit-transform: translateX(100%);
+  transform: translateX(100%);
+}
+
+.narrow-layout > #main {
+  left: 0 !important;
+  padding: 0;
+}
+
+.right-drawer.narrow-layout > #main {
+  left: 0;
+  right: 0;
+  padding: 0;
+}
+
+.narrow-layout > #main:not(.core-selected) > #scrim,
+.dragging #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;
+}
+
+polyfill-next-selector { content: 'core-selector:not(.narrow-layout) [core-drawer-toggle]'; }
+core-selector:not(.narrow-layout) ::content [core-drawer-toggle] {
+  display: none;
+}

data/public/bower_components/core-drawer-panel/core-drawer-panel.html

@@ -0,0 +1,418 @@
+<!--
+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 the 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 slide in/out to hide/reveal the main
+panel.
+
+Use the attribute `drawer` to indicate that the element is the drawer panel and
+`main` to indicate that the element is the main panel.
+
+Example:
+
+    <core-drawer-panel>
+      <div drawer> Drawer panel... </div>
+      <div main> Main panel... </div>
+    </core-drawer-panel>
+
+The drawer and the main panels are not scrollable.  You can set CSS overflow
+property on the elements to make them scrollable or use `core-header-panel`.
+
+Example:
+
+    <core-drawer-panel>
+      <core-header-panel drawer>
+        <core-toolbar></core-toolbar>
+        <div> Drawer content... </div>
+      </core-header-panel>
+      <core-header-panel main>
+        <core-toolbar></core-toolbar>
+        <div> Main content... </div>
+      </core-header-panel>
+    </core-drawer-panel>
+
+An element that should toggle the drawer will automatically do so if it's 
+given the `core-drawer-toggle` attribute.  Also this element will automatically
+be hidden in wide layout.
+
+Example:
+
+    <core-drawer-panel>
+      <core-header-panel drawer>
+        <core-toolbar>
+          <div>Application</div>
+        </core-toolbar>
+        <div> Drawer content... </div>
+      </core-header-panel>
+      <core-header-panel main>
+        <core-toolbar>
+          <core-icon-button icon="menu" core-drawer-toggle></core-icon-button>
+          <div>Title</div>
+        </core-toolbar>
+        <div> Main content... </div>
+      </core-header-panel>
+    </core-drawer-panel>
+
+To position the drawer to the right, add `rightDrawer` attribute.
+
+    <core-drawer-panel rightDrawer>
+      <div drawer> Drawer panel... </div>
+      <div main> Main panel... </div>
+    </core-drawer-panel>
+
+@group Polymer Core Elements
+@element core-drawer-panel
+@homepage github.io
+-->
+
+<link rel="import" href="../core-media-query/core-media-query.html">
+<link rel="import" href="../core-selector/core-selector.html">
+
+<polymer-element name="core-drawer-panel" touch-action="auto">
+<template>
+
+  <link rel="stylesheet" href="core-drawer-panel.css">
+
+  <core-media-query query="max-width: {{forceNarrow ? '' : responsiveWidth}}" queryMatches="{{queryMatches}}"></core-media-query>
+
+  <core-selector class="{{ {'narrow-layout' : narrow, transition : transition, dragging : dragging, 'right-drawer': rightDrawer} | tokenList }}" valueattr="id" selected="{{selected}}">
+
+    <div id="main" _style="left: {{ narrow || rightDrawer ? '0' : drawerWidth }}; right: {{ rightDrawer ? (narrow ? '' : drawerWidth) : '' }};">
+      <content select="[main]"></content>
+      <div id="scrim" on-tap="{{togglePanel}}"></div>
+      <div id="edgeSwipeOverlay" hidden?="{{!narrow || disableEdgeSwipe}}"></div>
+    </div>
+
+    <div id="drawer" _style="width: {{ drawerWidth }}">
+      <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.
+     */
+     
+    /**
+     * Fired when the selected panel changes.
+     * 
+     * Listening for this event is an alternative to observing changes in the `selected` attribute.
+     * This event is fired both when a panel is selected and deselected.
+     * The `isSelected` detail property contains the selection state.
+     * 
+     * @event core-select
+     * @param {Object} detail
+     * @param {boolean} detail.isSelected true for selection and false for deselection
+     * @param {Object} detail.item the panel that the event refers to
+     */
+
+    publish: {
+
+      /**
+       * Width of the drawer panel.
+       *
+       * @attribute drawerWidth
+       * @type string
+       * @default '256px'
+       */
+      drawerWidth: '256px',
+
+      /**
+       * 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},
+
+      /**
+       * If true, position the drawer to the right.
+       *
+       * @attribute rightDrawer
+       * @type boolean
+       * @default false
+       */
+      rightDrawer: false,
+
+      /**
+       * If true, swipe to open/close the drawer is disabled.
+       *
+       * @attribute disableSwipe
+       * @type boolean
+       * @default false
+       */
+      disableSwipe: false,
+      
+      /**
+       * If true, ignore `responsiveWidth` setting and force the narrow layout.
+       *
+       * @attribute forceNarrow
+       * @type boolean
+       * @default false
+       */
+      forceNarrow: false,
+      
+      /**
+       * If true, swipe from the edge is disable.
+       *
+       * @attribute disableEdgeSwipe
+       * @type boolean
+       * @default false
+       */
+      disableEdgeSwipe: false
+    },
+
+    eventDelegates: {
+      trackstart: 'trackStart',
+      trackx: 'trackx',
+      trackend: 'trackEnd',
+      down: 'downHandler',
+      up: 'upHandler',
+      tap: 'tapHandler'
+    },
+
+    // Whether the transition is enabled.
+    transition: false,
+
+    // How many pixels on the side of the screen are sensitive to edge swipes and peek.
+    edgeSwipeSensitivity: 15,
+
+    // Whether the drawer is peeking out from the edge.
+    peeking: false,
+
+    // Whether the user is dragging the drawer interactively.
+    dragging: false,
+
+    // Whether the browser has support for the transform CSS property.
+    hasTransform: true,
+
+    // Whether the browser has support for the will-change CSS property.
+    hasWillChange: true,
+    
+    // The attribute on elements that should toggle the drawer on tap, also 
+    // elements will automatically be hidden in wide layout.
+    toggleAttribute: 'core-drawer-toggle',
+
+    created: function() {
+      this.hasTransform = 'transform' in this.style;
+      this.hasWillChange = 'willChange' in this.style;
+    },
+
+    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;
+      });
+    },
+
+    /**
+     * Toggles the panel open and closed.
+     *
+     * @method togglePanel
+     */
+    togglePanel: function() {
+      this.selected = this.isMainSelected() ? 'drawer' : 'main';
+    },
+
+    /**
+     * Opens the drawer.
+     *
+     * @method openDrawer
+     */
+    openDrawer: function() {
+      this.selected = 'drawer';
+    },
+
+    /**
+     * Closes the drawer.
+     *
+     * @method closeDrawer
+     */
+    closeDrawer: function() {
+      this.selected = 'main';
+    },
+
+    queryMatchesChanged: function() {
+      this.narrow = this.queryMatches || this.forceNarrow;
+      if (this.narrow) {
+        this.selected = this.defaultSelected;
+      }
+      this.setAttribute('touch-action', this.swipeAllowed() ? 'pan-y' : '');
+      this.fire('core-responsive-change', {narrow: this.narrow});
+    },
+    
+    forceNarrowChanged: function() {
+      this.queryMatchesChanged();
+    },
+
+    swipeAllowed: function() {
+      return this.narrow && !this.disableSwipe;
+    },
+    
+    isMainSelected: function() {
+      return this.selected === 'main';
+    },
+
+    startEdgePeek: function() {
+      this.width = this.$.drawer.offsetWidth;
+      this.moveDrawer(this.translateXForDeltaX(this.rightDrawer ?
+          -this.edgeSwipeSensitivity : this.edgeSwipeSensitivity));
+      this.peeking = true;
+    },
+
+    stopEdgePeak: function() {
+      if (this.peeking) {
+        this.peeking = false;
+        this.moveDrawer(null);
+      }
+    },
+
+    downHandler: function(e) {
+      if (!this.dragging && this.isMainSelected() && this.isEdgeTouch(e)) {
+        this.startEdgePeek();
+      }
+    },
+
+    upHandler: function(e) {
+      this.stopEdgePeak();
+    },
+    
+    tapHandler: function(e) {
+      if (e.target && this.toggleAttribute && 
+          e.target.hasAttribute(this.toggleAttribute)) {
+        this.togglePanel();
+      }
+    },
+
+    isEdgeTouch: function(e) {
+      return !this.disableEdgeSwipe && this.swipeAllowed() &&
+        (this.rightDrawer ?
+          e.pageX >= this.offsetWidth - this.edgeSwipeSensitivity :
+          e.pageX <= this.edgeSwipeSensitivity);
+    },
+
+    trackStart : function(e) {
+      if (this.swipeAllowed()) {
+        this.dragging = true;
+
+        if (this.isMainSelected()) {
+          this.dragging = this.peeking || this.isEdgeTouch(e);
+        }
+
+        if (this.dragging) {
+          this.width = this.$.drawer.offsetWidth;
+          this.transition = false;
+          e.preventTap();
+        }
+      }
+    },
+
+    translateXForDeltaX: function(deltaX) {
+      var isMain = this.isMainSelected();
+      if (this.rightDrawer) {
+        return Math.max(0, isMain ? this.width + deltaX : deltaX);
+      } else {
+        return Math.min(0, isMain ? deltaX - this.width : deltaX);
+      }
+    },
+
+    trackx : function(e) {
+      if (this.dragging) {
+        if (this.peeking) {
+          if (Math.abs(e.dx) <= this.edgeSwipeSensitivity) {
+            return; // Ignore trackx until we move past the edge peek.
+          }
+          this.peeking = false;
+        }
+        this.moveDrawer(this.translateXForDeltaX(e.dx));
+      }
+    },
+
+    trackEnd : function(e) {
+      if (this.dragging) {
+        this.dragging = false;
+        this.transition = true;
+        this.moveDrawer(null);
+
+        if (this.rightDrawer) {
+          this.selected = e.xDirection > 0 ? 'main' : 'drawer';
+        } else {
+          this.selected = e.xDirection > 0 ? 'drawer' : 'main';
+        }
+      }
+    },
+
+    transformForTranslateX: function(translateX) {
+      if (translateX === null) {
+        return '';
+      }
+      return this.hasWillChange ? 'translateX(' + translateX + 'px)' : 
+          'translate3d(' + translateX + 'px, 0, 0)';
+    },
+
+    moveDrawer: function(translateX) {
+      var s = this.$.drawer.style;
+
+      if (this.hasTransform) {
+        s.transform = this.transformForTranslateX(translateX);
+      } else {
+        s.webkitTransform = this.transformForTranslateX(translateX);
+      }
+    }
+
+  });
+
+</script>
+</polymer-element>

data/public/bower_components/core-drawer-panel/demo.html

@@ -0,0 +1,68 @@
+<!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-drawer-panel</title>
+    
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
+    <meta name="mobile-web-app-capable" content="yes">
+    <meta name="apple-mobile-web-app-capable" content="yes">
+    
+    <script src="../webcomponentsjs/webcomponents.js"></script>
+    
+    <link rel="import" href="core-drawer-panel.html">
+    
+    <style>
+
+      html, body {
+        height: 100%;
+      }
+    
+      body {
+        font-family: sans-serif;
+        color: #FFF;
+        margin: 0;
+        -webkit-tap-highlight-color: rgba(0,0,0,0);
+      }
+      
+      [drawer] {
+        background-color: #B99588;
+        border-right: 1px solid #ccc;
+      }
+      
+      [main] {
+        background-color: #4F7DC9;
+      }
+      
+      button {
+        width: 160px;
+        height: 40px;
+        font-size: 16px;
+        margin: 8px;
+      }
+      
+    </style>
+    
+  </head>
+  
+  <body unresolved>
+  
+    <core-drawer-panel>
+    
+      <div drawer></div>
+        
+      <div main>
+        <button core-drawer-toggle>toggle drawer</button>
+      </div>
+      
+    </core-drawer-panel>
+    
+  </body>
+</html>

data/public/bower_components/core-drawer-panel/index.html

@@ -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="../webcomponentsjs/webcomponents.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/public/bower_components/core-drawer-panel/metadata.html

@@ -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="section" label="Section" isContainer group="Core">
+
+  <template>
+
+    <section style="width: 200px; height: 300px;" layout vertical></section>
+
+  </template>
+
+</x-meta>
+
+<x-meta id="core-drawer-panel" label="Drawer Panel" isContainer group="Core">
+
+  <template>
+
+    <core-drawer-panel style="position: absolute; top: 0; right: 0; bottom: 0; left: 0;">
+      <section drawer style="background-color: #fafafa; box-shadow: rgba(0, 0, 0, 0.098) 0px 2px 4px, rgba(0, 0, 0, 0.098) 0px 0px 3px;"></section>
+      <section main style="height: 100%; box-sizing: border-box; background-color: #ddd"></section>
+    </core-drawer-panel>
+
+  </template>
+
+  <template id="imports">
+
+    <link rel="import" href="core-drawer-panel.html">
+
+  </template>
+
+</x-meta>