jekyll-polymer-magazine 0.1.0

data/assets/bower_components/app-layout/app-scroll-effects/app-scroll-effects.html

@@ -0,0 +1,17 @@
+<!--
+@license
+Copyright (c) 2016 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="effects/blend-background.html">
+<link rel="import" href="effects/fade-background.html">
+<link rel="import" href="effects/material.html">
+<link rel="import" href="effects/parallax-background.html">
+<link rel="import" href="effects/resize-snapped-title.html">
+<link rel="import" href="effects/resize-title.html">
+<link rel="import" href="effects/waterfall.html">

data/assets/bower_components/app-layout/app-scroll-effects/effects/blend-background.html

@@ -0,0 +1,42 @@
+<!--
+@license
+Copyright (c) 2016 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="../app-scroll-effects-behavior.html">
+
+<script>
+  /**
+   * While scrolling down, fade in the rear background layer and fade out the front background
+   * layer (opacity interpolated based on scroll position).
+   */
+  Polymer.AppLayout.registerEffect('blend-background', {
+    /** @this Polymer.AppLayout.ElementWithBackground */
+    setUp: function setUp() {
+      var fx = {};
+      fx.backgroundFrontLayer = this._getDOMRef('backgroundFrontLayer');
+      fx.backgroundRearLayer = this._getDOMRef('backgroundRearLayer');
+      fx.backgroundFrontLayer.style.willChange = 'opacity';
+      fx.backgroundFrontLayer.style.transform = 'translateZ(0)';
+      fx.backgroundRearLayer.style.willChange = 'opacity';
+      fx.backgroundRearLayer.style.transform = 'translateZ(0)';
+      fx.backgroundRearLayer.style.opacity = 0;
+      this._fxBlendBackground = fx;
+    },
+    /** @this Polymer.AppLayout.ElementWithBackground */
+    run: function run(p, y) {
+      var fx = this._fxBlendBackground;
+      fx.backgroundFrontLayer.style.opacity = 1 - p;
+      fx.backgroundRearLayer.style.opacity = p;
+    },
+    /** @this Polymer.AppLayout.ElementWithBackground */
+    tearDown: function tearDown() {
+      delete this._fxBlendBackground;
+    }
+  });
+</script>

data/assets/bower_components/app-layout/app-scroll-effects/effects/fade-background.html

@@ -0,0 +1,53 @@
+<!--
+@license
+Copyright (c) 2016 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="../app-scroll-effects-behavior.html">
+
+<script>
+  /**
+   * Upon scrolling past a threshold, fade in the rear background layer and fade out the front
+   * background layer (opacity CSS transitioned over time).
+   *
+   *
+   */
+  Polymer.AppLayout.registerEffect('fade-background', {
+    /** @this Polymer.AppLayout.ElementWithBackground */
+    setUp: function setUp(config) {
+      var fx = {};
+      var duration = config.duration || '0.5s';
+      fx.backgroundFrontLayer = this._getDOMRef('backgroundFrontLayer');
+      fx.backgroundRearLayer = this._getDOMRef('backgroundRearLayer');
+      fx.backgroundFrontLayer.style.willChange = 'opacity';
+      fx.backgroundFrontLayer.style.webkitTransform = 'translateZ(0)';
+      fx.backgroundFrontLayer.style.transitionProperty = 'opacity';
+      fx.backgroundFrontLayer.style.transitionDuration = duration;
+      fx.backgroundRearLayer.style.willChange = 'opacity';
+      fx.backgroundRearLayer.style.webkitTransform = 'translateZ(0)';
+      fx.backgroundRearLayer.style.transitionProperty = 'opacity';
+      fx.backgroundRearLayer.style.transitionDuration = duration;
+      this._fxFadeBackground = fx;
+    },
+    /** @this Polymer.AppLayout.ElementWithBackground */
+    run: function run(p, y) {
+      var fx = this._fxFadeBackground;
+      if (p >= 1) {
+        fx.backgroundFrontLayer.style.opacity = 0;
+        fx.backgroundRearLayer.style.opacity = 1;
+      } else {
+        fx.backgroundFrontLayer.style.opacity = 1;
+        fx.backgroundRearLayer.style.opacity = 0;
+      }
+    },
+    /** @this Polymer.AppLayout.ElementWithBackground */
+    tearDown: function tearDown() {
+      delete this._fxFadeBackground;
+    }
+  });
+</script>

data/assets/bower_components/app-layout/app-scroll-effects/effects/material.html

@@ -0,0 +1,30 @@
+<!--
+@license
+Copyright (c) 2016 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="../app-scroll-effects-behavior.html">
+<link rel="import" href="waterfall.html">
+<link rel="import" href="resize-title.html">
+<link rel="import" href="blend-background.html">
+<link rel="import" href="parallax-background.html">
+
+<script>
+  /**
+   * Shorthand for the waterfall, resize-title, blend-background, and parallax-background effects.
+   */
+  Polymer.AppLayout.registerEffect('material', {
+    /**
+     * @this Polymer.AppLayout.ElementWithBackground
+     */
+    setUp: function setUp() {
+      this.effects = 'waterfall resize-title blend-background parallax-background';
+      return false;
+    }
+  });
+</script>

data/assets/bower_components/app-layout/app-scroll-effects/effects/parallax-background.html

@@ -0,0 +1,55 @@
+<!--
+@license
+Copyright (c) 2016 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="../app-scroll-effects-behavior.html">
+
+<script>
+  /**
+   * Vertically translate the background based on a factor of the scroll position.
+   */
+  Polymer.AppLayout.registerEffect('parallax-background', {
+    /**
+     * @param {{scalar: string}} config
+     * @this Polymer.AppLayout.ElementWithBackground
+     */
+    setUp: function setUp(config) {
+      var fx = {};
+      var scalar = parseFloat(config.scalar);
+      fx.background = this._getDOMRef('background');
+      fx.backgroundFrontLayer = this._getDOMRef('backgroundFrontLayer');
+      fx.backgroundRearLayer = this._getDOMRef('backgroundRearLayer');
+      fx.deltaBg = fx.backgroundFrontLayer.offsetHeight - fx.background.offsetHeight;
+      if (fx.deltaBg === 0) {
+        if (isNaN(scalar)) {
+          scalar = 0.8;
+        }
+        fx.deltaBg = this._dHeight * scalar;
+      } else {
+        if (isNaN(scalar)) {
+          scalar = 1;
+        }
+        fx.deltaBg = fx.deltaBg * scalar;
+      }
+      this._fxParallaxBackground = fx;
+    },
+    /** @this Polymer.AppLayout.ElementWithBackground */
+    run: function run(p, y) {
+      var fx = this._fxParallaxBackground;
+      this.transform('translate3d(0px, ' + (fx.deltaBg * Math.min(1, p)) + 'px, 0px)', fx.backgroundFrontLayer);
+      if (fx.backgroundRearLayer) {
+        this.transform('translate3d(0px, ' + (fx.deltaBg * Math.min(1, p)) + 'px, 0px)', fx.backgroundRearLayer);
+      }
+    },
+    /** @this Polymer.AppLayout.ElementWithBackground */
+    tearDown: function tearDown() {
+      delete this._fxParallaxBackground;
+    }
+  });
+</script>

data/assets/bower_components/app-layout/app-scroll-effects/effects/resize-snapped-title.html

@@ -0,0 +1,64 @@
+<!--
+@license
+Copyright (c) 2016 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="../app-scroll-effects-behavior.html">
+
+<script>
+  /**
+   * Upon scrolling past a threshold, CSS transition the font size of a designated title element
+   * between two values.
+   */
+  Polymer.AppLayout.registerEffect('resize-snapped-title', {
+    /**
+     * @this Polymer.AppLayout.ElementWithBackground
+     */
+    setUp: function setUp(config) {
+      var title = this._getDOMRef('mainTitle');
+      var condensedTitle = this._getDOMRef('condensedTitle');
+      var duration = config.duration || '0.2s';
+      var fx = {};
+
+      if (!condensedTitle) {
+        console.warn('Scroll effect `resize-snapped-title`: undefined `condensed-title`');
+        return false;
+      }
+      if (!title) {
+        console.warn('Scroll effect `resize-snapped-title`: undefined `main-title`');
+        return false;
+      }
+
+      title.style.transitionProperty = 'opacity';
+      title.style.transitionDuration = duration;
+      condensedTitle.style.transitionProperty = 'opacity';
+      condensedTitle.style.transitionDuration = duration;
+      fx.condensedTitle = condensedTitle;
+      fx.title = title;
+      this._fxResizeSnappedTitle = fx;
+    },
+    /** @this Polymer.AppLayout.ElementWithBackground */
+    run: function run(p, y) {
+      var fx = this._fxResizeSnappedTitle;
+      if (p > 0) {
+        fx.title.style.opacity = 0;
+        fx.condensedTitle.style.opacity = 1;
+      } else {
+        fx.title.style.opacity = 1;
+        fx.condensedTitle.style.opacity = 0;
+      }
+    },
+    /** @this Polymer.AppLayout.ElementWithBackground */
+    tearDown: function tearDown() {
+      var fx = this._fxResizeSnappedTitle;
+      fx.title.style.transition = '';
+      fx.condensedTitle.style.transition = '';
+      delete this._fxResizeSnappedTitle;
+    }
+  });
+</script>

data/assets/bower_components/app-layout/app-scroll-effects/effects/resize-title.html

@@ -0,0 +1,85 @@
+<!--
+@license
+Copyright (c) 2016 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="../app-scroll-effects-behavior.html">
+
+<script>
+  (function() {
+    function interpolate(progress, points, fn, ctx) {
+      fn.apply(ctx, points.map(function(point) {
+        return point[0] + (point[1] - point[0]) * progress;
+      }));
+    }
+
+    /**
+     * Transform the font size of a designated title element between two values based on the scroll
+     * position.
+     */
+    Polymer.AppLayout.registerEffect('resize-title', {
+      /** @this Polymer.AppLayout.ElementWithBackground */
+      setUp: function setUp() {
+        var title = this._getDOMRef('mainTitle');
+        var condensedTitle = this._getDOMRef('condensedTitle');
+
+        if (!condensedTitle) {
+          console.warn('Scroll effect `resize-title`: undefined `condensed-title`');
+          return false;
+        }
+        if (!title) {
+          console.warn('Scroll effect `resize-title`: undefined `main-title`');
+          return false;
+        }
+
+        condensedTitle.style.willChange = 'opacity';
+        title.style.willChange = 'opacity';
+        condensedTitle.style.webkitTransform = 'translateZ(0)';
+        title.style.webkitTransform = 'translateZ(0)';
+        condensedTitle.style.transform = 'translateZ(0)';
+        title.style.transform = 'translateZ(0)';
+
+        var titleClientRect = title.getBoundingClientRect();
+        var condensedTitleClientRect = condensedTitle.getBoundingClientRect();
+        var fx = {};
+
+        fx.scale = parseInt(window.getComputedStyle(condensedTitle)['font-size'], 10) /
+            parseInt(window.getComputedStyle(title)['font-size'], 10);
+        fx.titleDX = titleClientRect.left - condensedTitleClientRect.left;
+        fx.titleDY = titleClientRect.top - condensedTitleClientRect.top;
+        fx.condensedTitle = condensedTitle;
+        fx.title = title;
+
+        this._fxResizeTitle = fx;
+      },
+      /** @this PolymerElement */
+      run: function run(p, y) {
+        var fx = this._fxResizeTitle;
+        if (!this.condenses) {
+          y = 0;
+        }
+        if (p >= 1) {
+          fx.title.style.opacity = 0;
+          fx.condensedTitle.style.opacity = 1;
+        } else {
+          fx.title.style.opacity = 1;
+          fx.condensedTitle.style.opacity = 0;
+        }
+        interpolate(Math.min(1, p), [ [1, fx.scale], [0, -fx.titleDX], [y, y-fx.titleDY] ],
+          function(scale, translateX, translateY) {
+            this.transform('translate(' + translateX + 'px, ' + translateY + 'px) ' +
+                'scale3d(' + scale + ', ' + scale + ', 1)', fx.title);
+          }, this);
+      },
+      /** @this Polymer.AppLayout.ElementWithBackground */
+      tearDown: function tearDown() {
+        delete this._fxResizeTitle;
+      }
+    });
+  })();
+</script>

data/assets/bower_components/app-layout/app-scroll-effects/effects/waterfall.html

@@ -0,0 +1,26 @@
+<!--
+@license
+Copyright (c) 2016 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="../app-scroll-effects-behavior.html">
+
+<script>
+  /**
+   * Toggles the shadow property in app-header when content is scrolled to create a sense of depth
+   * between the element and the content underneath.
+   */
+  Polymer.AppLayout.registerEffect('waterfall', {
+    /**
+     *  @this Polymer.AppLayout.ElementWithBackground
+     */
+    run: function run() {
+      this.shadow = this.isOnScreen() && this.isContentBelow();
+    }
+  });
+</script>

data/assets/bower_components/app-layout/app-scroll-effects/test/app-scroll-effects-behavior.html

@@ -0,0 +1,217 @@
+<!doctype html>
+<!--
+@license
+Copyright (c) 2016 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">
+  <title>test for app-scroll-effects-behavior</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
+
+  <script src="../../../webcomponentsjs/webcomponents-lite.js"></script>
+  <script src="../../../web-component-tester/browser.js"></script>
+  <script src="../../../test-fixture/test-fixture-mocha.js"></script>
+  <link rel="import" href="../../../test-fixture/test-fixture.html">
+  <link rel="import" href="x-container.html">
+
+  <style>
+    body {
+      margin: 0;
+      padding: 0;
+      height: 1000vh;
+    }
+
+    x-container {
+      position: fixed;
+      top: 0;
+      left: 0;
+      right: 0;
+      height: 200px;
+    }
+  </style>
+
+</head>
+<body>
+
+  <test-fixture id="testHeader">
+    <template>
+      <x-container></x-container>
+    </template>
+  </test-fixture>
+
+  <script>
+
+    function scrollTestHelper(scroller, tests) {
+
+      function scrollEventHandler() {
+        var nextTest = tests.shift();
+        if (nextTest) {
+          nextTest.callback();
+          if (tests.length > 0) triggerScrollEvent();
+        }
+      }
+
+      function triggerScrollEvent() {
+        var scrollTop = scroller === document.documentElement ? window.pageYOffset : scroller.scrollTop;
+        if (tests[0].y === scrollTop) {
+          // Scrolling to the same position won't trigger a scroll event,
+          // so just call the scroll event handler.
+          scrollEventHandler();
+        } else {
+          if (scroller === document.documentElement) window.scrollTo(0, tests[0].y);
+          else scroller.scrollTop = tests[0].y;
+        }
+      }
+
+      if (tests.length > 0) {
+        var scrollTarget = scroller === document.documentElement ? window : scroller;
+        scrollTarget.addEventListener('scroll', scrollEventHandler);
+        triggerScrollEvent();
+      }
+    }
+
+    suite('basic features', function() {
+      var container, testEffect;
+
+      suiteSetup(function() {
+        testEffect = {
+          setUp: sinon.spy(),
+          tearDown: sinon.spy(),
+          run: sinon.spy()
+        };
+        Polymer.AppLayout.registerEffect('test-effect', testEffect);
+      });
+
+      setup(function() {
+        container = fixture('testHeader');
+        testEffect.setUp.reset();
+        testEffect.tearDown.reset();
+        testEffect.run.reset();
+      });
+
+      test('simple effect', function(done) {
+        container.effects = 'test-effect';
+
+        flush(function() {
+          scrollTestHelper(container.scrollTarget, [
+            {
+              y: 0,
+              callback: function() {
+                assert.isTrue(testEffect.setUp.called);
+                assert.deepEqual(testEffect.run.lastCall.args, [0, 0]);
+              }
+            }, {
+              y: container.offsetHeight * 0.5,
+              callback: function() {
+                assert.deepEqual(testEffect.run.lastCall.args, [0.5, container.offsetHeight * 0.5]);
+              }
+            }, {
+              y: container.offsetHeight,
+              callback: function() {
+                assert.deepEqual(testEffect.run.lastCall.args, [1, container.offsetHeight]);
+              }
+            }, {
+              y: container.offsetHeight * 2,
+              callback: function() {
+                assert.deepEqual(testEffect.run.lastCall.args, [2, container.offsetHeight * 2]);
+              }
+            }, {
+              y: container.offsetHeight * 3,
+              callback: function() {
+                assert.deepEqual(testEffect.run.lastCall.args, [3, container.offsetHeight * 3]);
+                container.effects = '';
+                assert.isTrue(testEffect.tearDown.called);
+                done();
+              }
+            }
+          ]);
+        });
+      });
+
+      test('effect with config', function(done) {
+        var testEffectConfig = {
+          startsAt: 0.5,
+          endsAt: 1
+        };
+
+        container.effects = 'test-effect';
+        container.effectsConfig = {
+          'test-effect': testEffectConfig
+        };
+
+        flush(function() {
+          scrollTestHelper(container.scrollTarget, [
+            {
+              y: 0,
+              callback: function() {
+                assert.isTrue(testEffect.setUp.called);
+                assert.deepEqual(testEffect.setUp.lastCall.args, [testEffectConfig]);
+                assert.deepEqual(testEffect.run.lastCall.args, [0, 0]);
+              }
+            }, {
+              y: container.offsetHeight * 0.25,
+              callback: function() {
+                assert.deepEqual(testEffect.run.lastCall.args, [0, container.offsetHeight*0.25]);
+              }
+            }, {
+              y: container.offsetHeight * 0.5,
+              callback: function() {
+                assert.deepEqual(testEffect.run.lastCall.args, [0, container.offsetHeight*0.5]);
+              }
+            }, {
+              y: container.offsetHeight * 0.75,
+              callback: function() {
+                assert.deepEqual(testEffect.run.lastCall.args, [0.5, container.offsetHeight * 0.75]);
+              }
+            }, {
+              y: container.offsetHeight,
+              callback: function() {
+                assert.deepEqual(testEffect.run.lastCall.args, [1, container.offsetHeight]);
+                container.effects = '';
+                assert.isTrue(testEffect.tearDown.called);
+                done();
+              }
+            }
+          ]);
+        });
+      });
+
+      test('threshold and threshold-triggered', function(done) {
+        flush(function() {
+          assert.isUndefined(container.thresholdTriggered);
+          assert.equal(container.threshold, 0);
+          container.threshold = 100;
+
+          scrollTestHelper(container.scrollTarget, [
+            {
+              y: 0,
+              callback: function() {
+                assert.isFalse(container.thresholdTriggered);
+              }
+            }, {
+              y: 100,
+              callback: function() {
+                assert.isTrue(container.thresholdTriggered);
+              }
+            }, {
+              y: 50,
+              callback: function() {
+                assert.isFalse(container.thresholdTriggered);
+                done();
+              }
+            }
+          ]);
+        });
+      });
+    });
+
+  </script>
+
+</body>
+</html>