RubyGems - jekyll-polymer-magazine - Versions diffs - 0.1.0 - Mend

jekyll-polymer-magazine 0.1.0

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 (994) hide show

data/assets/bower_components/paper-header-panel/bower.json ADDED

@@ -0,0 +1,33 @@
+{
+  "name": "paper-header-panel",
+  "version": "1.1.7",
+  "description": "A header and content wrapper for layout with headers",
+  "authors": [
+    "The Polymer Authors"
+  ],
+  "keywords": [
+    "web-components",
+    "polymer",
+    "layout"
+  ],
+  "main": "paper-header-panel.html",
+  "repository": {
+    "type": "git",
+    "url": "git://github.com/PolymerElements/paper-header-panel.git"
+  },
+  "private": true,
+  "license": "http://polymer.github.io/LICENSE.txt",
+  "homepage": "https://github.com/PolymerElements/paper-header-panel",
+  "ignore": [],
+  "dependencies": {
+    "iron-flex-layout": "PolymerElements/iron-flex-layout#^1.0.0",
+    "polymer": "Polymer/polymer#^1.1.0"
+  },
+  "devDependencies": {
+    "iron-component-page": "PolymerElements/iron-component-page#^1.0.0",
+    "paper-styles": "PolymerElements/paper-styles#^1.0.0",
+    "test-fixture": "PolymerElements/test-fixture#^1.0.0",
+    "web-component-tester": "^4.0.0",
+    "webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
+  }
+}

data/assets/bower_components/paper-header-panel/demo/index.html ADDED

@@ -0,0 +1,150 @@
+<!DOCTYPE html>
+<!--
+@license
+Copyright (c) 2015 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>paper-header-panel demo</title>
+    <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
+    <link rel="import" href="../../iron-flex-layout/iron-flex-layout.html">
+    <link rel="import" href="../../paper-styles/demo-pages.html">
+    <link rel="import" href="../paper-header-panel.html">
+    <style is="custom-style">
+      body {
+        @apply(--layout-inline);
+        @apply(--layout-center-center);
+        @apply(--layout-wrap);
+        padding: 40px;
+      }
+      paper-header-panel {
+        float: left;
+        width: 240px;
+        height: 240px;
+        margin: 12px;
+        @apply(--shadow-elevation-2dp);
+      }
+      .paper-header {
+        height: 60px;
+        font-size: 16px;
+        line-height: 60px;
+        padding: 0 10px;
+        color: white;
+        transition: height 0.2s;
+      }
+      .paper-header.tall {
+        height: 120px;
+      }
+      .paper-header.medium-tall {
+        height: 100px;
+        line-height: 50px;
+      }
+      .content {
+        height: 2000px;
+      }
+      .cover {
+        margin: 60px;
+      }
+      .blue .paper-header {
+        background-color: var(--paper-light-blue-500);
+      }
+      .red .paper-header {
+        background-color: var(--paper-red-500);
+      }
+      .orange .paper-header {
+        background-color: var(--paper-amber-500);
+      }
+      .green .paper-header {
+        background-color: var(--paper-green-500);
+      }
+      .cyan .paper-header {
+        background-color: var(--paper-cyan-500);
+      }
+      .lime .paper-header {
+        background-color: var(--paper-lime-500);
+      }
+      .pink .paper-header {
+        background-color: var(--paper-pink-a200);
+      }
+      /* TODO: replace these with background: linear-gradient(white, var(...))
+       when custom properties allow it */
+      .blue .content {
+        background: linear-gradient(white, #b3e5fc);
+      }
+      .red .content {
+        background: linear-gradient(white, #ffcdd2);
+      }
+      .orange .content {
+        background: linear-gradient(white, #ffecb3);
+      }
+      .green .content {
+        background: linear-gradient(white, #c8e6c9);
+      }
+      .cyan .content {
+        background: linear-gradient(white, #b2ebf2);
+      }
+      .lime .content {
+        background: linear-gradient(white, #f0f4c3);
+      }
+      .pink .content {
+        background: linear-gradient(white, #f8bbd0);
+      }
+    </style>
+  </head>
+  <body>
+    <paper-header-panel class="blue">
+      <div class="paper-header">standard</div>
+      <div class="content"></div>
+    </paper-header-panel>
+    <paper-header-panel mode="seamed" class="red">
+      <div class="paper-header">seamed</div>
+      <div class="content"></div>
+    </paper-header-panel>
+    <paper-header-panel mode="scroll" class="orange">
+      <div class="paper-header">scroll</div>
+      <div class="content"></div>
+    </paper-header-panel>
+    <paper-header-panel mode="waterfall" class="green">
+      <div class="paper-header">waterfall</div>
+      <div class="content"></div>
+    </paper-header-panel>
+    <paper-header-panel mode="waterfall-tall" class="pink">
+      <div class="paper-header">waterfall-tall</div>
+      <div class="content"></div>
+    </paper-header-panel>
+    <paper-header-panel mode="waterfall-tall" tall-class="medium-tall" class="cyan">
+      <div class="paper-header">waterfall-tall<br>tall-class: medium-tall</div>
+      <div class="content"></div>
+    </paper-header-panel>
+    <paper-header-panel mode="cover" class="lime">
+      <div class="paper-header tall">cover</div>
+      <div class="content cover"></div>
+    </paper-header-panel>
+  </body>
+</html>

data/assets/bower_components/paper-header-panel/hero.svg ADDED

@@ -0,0 +1,38 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 17.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 225 126" enable-background="new 0 0 225 126" xml:space="preserve">
+<g id="background" display="none">
+	<rect display="inline" fill="#B0BEC5" width="225" height="126"/>
+</g>
+<g id="label">
+</g>
+<g id="art">
+	<path d="M163,102H73V24h90V102z M75,100h86V26H75V100z"/>
+	<g>
+		<polygon points="74,59.6 74,62.5 74.5,63 77.4,63 		"/>
+		<polygon points="74,51.9 74,54.7 82.3,63 85.1,63 		"/>
+		<polygon points="74,44.1 74,46.9 90.1,63 92.9,63 		"/>
+		<polygon points="74,36.3 74,39.2 97.8,63 100.7,63 		"/>
+		<polygon points="74,28.6 74,31.4 105.6,63 108.4,63 		"/>
+		<polygon points="78.2,25 75.4,25 113.4,63 116.2,63 		"/>
+		<polygon points="86,25 83.1,25 121.1,63 124,63 		"/>
+		<polygon points="93.7,25 90.9,25 128.9,63 131.7,63 		"/>
+		<polygon points="101.5,25 98.7,25 136.7,63 139.5,63 		"/>
+		<polygon points="109.2,25 106.4,25 144.4,63 147.2,63 		"/>
+		<polygon points="117,25 114.2,25 152.2,63 155,63 		"/>
+		<polygon points="124.8,25 122,25 160,63 162,63 162,62.2 		"/>
+		<polygon points="132.5,25 129.7,25 162,57.3 162,54.5 		"/>
+		<polygon points="140.3,25 137.5,25 162,49.5 162,46.7 		"/>
+		<polygon points="148.1,25 145.2,25 162,41.8 162,38.9 		"/>
+		<polygon points="155.8,25 153,25 162,34 162,31.2 		"/>
+		<polygon points="162,26.2 162,25 160.8,25 		"/>
+	</g>
+	<rect x="74" y="62" width="88" height="2"/>
+	<g id="ic_x5F_add_x0D_">
+	</g>
+</g>
+<g id="Guides">
+</g>
+</svg>

data/assets/bower_components/paper-header-panel/index.html ADDED

@@ -0,0 +1,36 @@
+<!doctype html>
+<!--
+@license
+Copyright (c) 2015 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>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
+    <title>paper-header-panel</title>
+    <script src="../webcomponentsjs/webcomponents-lite.js"></script>
+    <link rel="import" href="../polymer/polymer.html">
+    <link rel="import" href="../iron-component-page/iron-component-page.html">
+    <style>
+      body {
+        margin: 16px;
+      }
+    </style>
+  </head>
+  <body>
+    <iron-component-page></iron-component-page>
+  </body>
+</html>

data/assets/bower_components/paper-header-panel/paper-header-panel.html ADDED

@@ -0,0 +1,512 @@
+<!--
+@license
+Copyright (c) 2015 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="../polymer/polymer.html">
+<link rel="import" href="../iron-flex-layout/iron-flex-layout.html">
+<!--
+`paper-header-panel` contains a header section and a content panel section.
+__Important:__ The `paper-header-panel` will not display if its parent does not have a height.
+Using layout classes, you can make the `paper-header-panel` fill the screen
+    <body class="fullbleed layout vertical">
+      <paper-header-panel class="flex">
+        <paper-toolbar>
+          <div>Hello World!</div>
+        </paper-toolbar>
+      </paper-header-panel>
+    </body>
+Special support is provided for scrolling modes when one uses a paper-toolbar or equivalent for the
+header section.
+Example:
+    <paper-header-panel>
+      <paper-toolbar>Header</paper-toolbar>
+      <div>Content goes here...</div>
+    </paper-header-panel>
+If you want to use other than `paper-toolbar` for the header, add `paper-header` class to that
+element.
+Example:
+    <paper-header-panel>
+      <div class="paper-header">Header</div>
+      <div>Content goes here...</div>
+    </paper-header-panel>
+To have the content fit to the main area, use the `fit` class.
+    <paper-header-panel>
+      <div class="paper-header">standard</div>
+      <div class="fit">content fits 100% below the header</div>
+    </paper-header-panel>
+### Modes
+Controls header and scrolling behavior. Options are `standard`, `seamed`, `waterfall`, `waterfall-tall`, `scroll` and
+`cover`. Default is `standard`.
+Mode | Description
+----------------|-------------
+`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 `paper-header-panel` including the header. This allows user to style the panel in such a way that the panel is partially covering the header.
+Example:
+    <paper-header-panel mode="waterfall">
+      <div class="paper-header">standard</div>
+      <div class="content fit">content fits 100% below the header</div>
+    </paper-header-panel>
+### Styling
+To change the shadow that shows up underneath the header:
+    paper-header-panel {
+      --paper-header-panel-shadow: {
+          height: 6px;
+          bottom: -6px;
+          box-shadow: inset 0px 5px 6px -3px rgba(0, 0, 0, 0.4);
+      };
+    }
+To change the panel container:
+    paper-header-panel {
+      --paper-header-panel-container: {
+        border: 1px solid gray;
+      };
+To change the panel container in different modes:
+    paper-header-panel {
+      --paper-header-panel-standard-container: {
+        border: 1px solid gray;
+      };
+      --paper-header-panel-seamed-container: {
+        border: 1px solid gray;
+      };
+      --paper-header-panel-waterfall-container: {
+        border: 1px solid gray;
+      };
+      --paper-header-panel-waterfall-tall-container: {
+        border: 1px solid gray;
+      };
+      --paper-header-panel-scroll-container: {
+        border: 1px solid gray;
+      };
+      --paper-header-panel-cover-container: {
+        border: 1px solid gray;
+      };
+    }
+The following custom properties and mixins are available for styling:
+Custom property | Description | Default
+----------------|-------------|----------
+`--paper-header-panel` | Mixin applied to the element | `{}`
+`--paper-header-panel-body` | Mixin applied to the element's body (i.e. everything below the toolbar) | `{}`
+`--paper-header-panel-container` | Mixin applied to the container in any mode | `{}`
+`--paper-header-panel-scroll-container` | Mixin applied to the container when in scroll mode | `{}`
+`--paper-header-panel-cover-container` | Mixin applied to the container when in cover mode | `{}`
+`--paper-header-panel-standard-container` | Mixin applied to the container when in standard mode | `{}`
+`--paper-header-panel-seamed-container` | Mixin applied to the container when in seamed mode | `{}`
+`--paper-header-panel-waterfall-container` | Mixin applied to the container when in waterfall mode | `{}`
+`--paper-header-panel-waterfall-tall-container` | Mixin applied to the container when in tall waterfall mode | `{}`
+`--paper-header-panel-shadow` | Mixin applied to the waterfall shadow | `{}`
+@group Paper Elements
+@element paper-header-panel
+@demo demo/index.html
+@hero hero.svg
+-->
+<dom-module id="paper-header-panel">
+  <template>
+    <style>
+      :host {
+        @apply(--layout-vertical);
+        position: relative;
+        height: 100%;
+        @apply(--paper-header-panel);
+      }
+      #mainContainer {
+        @apply(--layout-flex);
+        position: relative;
+        overflow-y: auto;
+        overflow-x: hidden;
+        -webkit-overflow-scrolling: touch;
+      }
+      #mainPanel {
+        @apply(--layout-vertical);
+        @apply(--layout-flex);
+        position: relative;
+        min-height: 0;
+        @apply(--paper-header-panel-body);
+      }
+      #mainContainer {
+        @apply(--paper-header-panel-container);
+      }
+      /*
+       * mode: scroll
+       */
+      :host([mode=scroll]) #mainContainer {
+        @apply(--paper-header-panel-scroll-container);
+        overflow: visible;
+      }
+      :host([mode=scroll]) {
+        overflow-y: auto;
+        overflow-x: hidden;
+        -webkit-overflow-scrolling: touch;
+      }
+      /*
+       * mode: cover
+       */
+      :host([mode=cover]) #mainContainer {
+        @apply(--paper-header-panel-cover-container);
+        position: absolute;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        left: 0;
+      }
+      :host([mode=cover]) #mainPanel {
+        position: static;
+      }
+      /*
+       * mode: standard
+       */
+      :host([mode=standard]) #mainContainer {
+        @apply(--paper-header-panel-standard-container);
+      }
+      /*
+       * mode: seamed
+       */
+      :host([mode=seamed]) #mainContainer {
+        @apply(--paper-header-panel-seamed-container);
+      }
+      /*
+       * mode: waterfall
+       */
+      :host([mode=waterfall]) #mainContainer {
+        @apply(--paper-header-panel-waterfall-container);
+      }
+      /*
+       * mode: waterfall-tall
+       */
+      :host([mode=waterfall-tall]) #mainContainer {
+        @apply(--paper-header-panel-waterfall-tall-container);
+      }
+      #dropShadow {
+        transition: opacity 0.5s;
+        height: 6px;
+        box-shadow: inset 0px 5px 6px -3px rgba(0, 0, 0, 0.4);
+        @apply(--paper-header-panel-shadow);
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        opacity: 0;
+        pointer-events: none;
+      }
+      #dropShadow.has-shadow {
+        opacity: 1;
+      }
+    </style>
+    <content id="headerContent" select="paper-toolbar, .paper-header"></content>
+    <div id="mainPanel">
+      <div id="mainContainer" class$="[[_computeMainContainerClass(mode)]]">
+        <content id="mainContent" select="*"></content>
+      </div>
+      <div id="dropShadow"></div>
+    </div>
+  </template>
+  <script>
+    (function() {
+      'use strict';
+      var SHADOW_WHEN_SCROLLING = 1;
+      var SHADOW_ALWAYS = 2;
+      var MODE_CONFIGS = {
+        outerScroll: {
+          'scroll': true
+        },
+        shadowMode: {
+          'standard': SHADOW_ALWAYS,
+          'waterfall': SHADOW_WHEN_SCROLLING,
+          'waterfall-tall': SHADOW_WHEN_SCROLLING
+        },
+        tallMode: {
+          'waterfall-tall': true
+        }
+      };
+      Polymer({
+        is: 'paper-header-panel',
+        /**
+         * 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`.
+         *
+         *     <paper-header-panel on-content-scroll="scrollHandler">
+         *       ...
+         *     </paper-header-panel>
+         *
+         *
+         *     scrollHandler: function(event) {
+         *       var scroller = event.detail.target;
+         *       console.log(scroller.scrollTop);
+         *     }
+         *
+         * @event content-scroll
+         */
+        properties: {
+          /**
+           * 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 `paper-header-panel` including the
+           * header. This allows user to style the panel in such a way that the panel is
+           * partially covering the header.
+           *
+           *     <paper-header-panel mode="cover">
+           *       <paper-toolbar class="tall">
+           *         <paper-icon-button icon="menu"></paper-icon-button>
+           *       </paper-toolbar>
+           *       <div class="content"></div>
+           *     </paper-header-panel>
+           */
+          mode: {
+            type: String,
+            value: 'standard',
+            observer: '_modeChanged',
+            reflectToAttribute: true
+          },
+          /**
+           * If true, the drop-shadow is always shown no matter what mode is set to.
+           */
+          shadow: {
+            type: Boolean,
+            value: false
+          },
+          /**
+           * The class used in waterfall-tall mode.  Change this if the header
+           * accepts a different class for toggling height, e.g. "medium-tall"
+           */
+          tallClass: {
+            type: String,
+            value: 'tall'
+          },
+          /**
+           * If true, the scroller is at the top
+           */
+          atTop: {
+            type: Boolean,
+            value: true,
+            notify: true,
+            readOnly: true,
+            reflectToAttribute: true
+          }
+        },
+        observers: [
+          '_computeDropShadowHidden(atTop, mode, shadow)'
+        ],
+        ready: function() {
+          this.scrollHandler = this._scroll.bind(this);
+        },
+        attached: function() {
+          this._addListener();
+          // Run `scroll` logic once to initialize class names, etc.
+          this._keepScrollingState();
+        },
+        detached: function() {
+          this._removeListener();
+        },
+        /**
+         * Returns the header element
+         *
+         * @property header
+         * @type Object
+         */
+        get header() {
+          return Polymer.dom(this.$.headerContent).getDistributedNodes()[0];
+        },
+        /**
+         * Returns the scrollable element.
+         *
+         * @property scroller
+         * @type Object
+         */
+        get scroller() {
+          return this._getScrollerForMode(this.mode);
+        },
+        /**
+         * Returns true if the scroller has a visible shadow.
+         *
+         * @property visibleShadow
+         * @type Boolean
+         */
+        get visibleShadow() {
+          return this.$.dropShadow.classList.contains('has-shadow');
+        },
+        _computeDropShadowHidden: function(atTop, mode, shadow) {
+          var shadowMode = MODE_CONFIGS.shadowMode[mode];
+          if (this.shadow) {
+            this.toggleClass('has-shadow', true, this.$.dropShadow);
+          } else if (shadowMode === SHADOW_ALWAYS) {
+            this.toggleClass('has-shadow', true, this.$.dropShadow);
+          } else if (shadowMode === SHADOW_WHEN_SCROLLING && !atTop) {
+            this.toggleClass('has-shadow', true, this.$.dropShadow);
+          } else {
+            this.toggleClass('has-shadow', false, this.$.dropShadow);
+          }
+        },
+        _computeMainContainerClass: function(mode) {
+          // TODO:  It will be useful to have a utility for classes
+          // e.g. Polymer.Utils.classes({ foo: true });
+          var classes = {};
+          classes['flex'] = mode !== 'cover';
+          return Object.keys(classes).filter(
+            function(className) {
+              return classes[className];
+            }).join(' ');
+        },
+        _addListener: function() {
+          this.scroller.addEventListener('scroll', this.scrollHandler, false);
+        },
+        _removeListener: function() {
+          this.scroller.removeEventListener('scroll', this.scrollHandler);
+        },
+        _modeChanged: function(newMode, oldMode) {
+          var configs = MODE_CONFIGS;
+          var header = this.header;
+          var animateDuration = 200;
+          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[oldMode] && !configs.tallMode[newMode]) {
+              header.classList.remove(this.tallClass);
+              this.async(function() {
+                header.classList.remove('animate');
+              }, animateDuration);
+            } else {
+              this.toggleClass('animate', configs.tallMode[newMode], header);
+            }
+          }
+          this._keepScrollingState();
+        },
+        _keepScrollingState: function() {
+          var main = this.scroller;
+          var header = this.header;
+          this._setAtTop(main.scrollTop === 0);
+          if (header && this.tallClass && MODE_CONFIGS.tallMode[this.mode]) {
+            this.toggleClass(this.tallClass, this.atTop ||
+                header.classList.contains(this.tallClass) &&
+                main.scrollHeight < this.offsetHeight, header);
+          }
+        },
+        _scroll: function() {
+          this._keepScrollingState();
+          this.fire('content-scroll', {target: this.scroller}, {bubbles: false});
+        },
+        _getScrollerForMode: function(mode) {
+          return MODE_CONFIGS.outerScroll[mode] ?
+              this : this.$.mainContainer;
+        }
+      });
+    })();
+  </script>
+</dom-module>