jekyll-polymer-magazine 0.1.0

data/assets/bower_components/iron-selector/iron-selection.html

@@ -0,0 +1,119 @@
+
+<!--
+@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">
+
+<script>
+
+  /**
+   * @param {!Function} selectCallback
+   * @constructor
+   */
+  Polymer.IronSelection = function(selectCallback) {
+    this.selection = [];
+    this.selectCallback = selectCallback;
+  };
+
+  Polymer.IronSelection.prototype = {
+
+    /**
+     * Retrieves the selected item(s).
+     *
+     * @method get
+     * @returns Returns the selected item(s). If the multi property is true,
+     * `get` will return an array, otherwise it will return
+     * the selected item or undefined if there is no selection.
+     */
+    get: function() {
+      return this.multi ? this.selection.slice() : this.selection[0];
+    },
+
+    /**
+     * Clears all the selection except the ones indicated.
+     *
+     * @method clear
+     * @param {Array} excludes items to be excluded.
+     */
+    clear: function(excludes) {
+      this.selection.slice().forEach(function(item) {
+        if (!excludes || excludes.indexOf(item) < 0) {
+          this.setItemSelected(item, false);
+        }
+      }, this);
+    },
+
+    /**
+     * Indicates if a given item is selected.
+     *
+     * @method isSelected
+     * @param {*} item The item whose selection state should be checked.
+     * @returns Returns true if `item` is selected.
+     */
+    isSelected: function(item) {
+      return this.selection.indexOf(item) >= 0;
+    },
+
+    /**
+     * Sets the selection state for a given item to either selected or deselected.
+     *
+     * @method setItemSelected
+     * @param {*} item The item to select.
+     * @param {boolean} isSelected True for selected, false for deselected.
+     */
+    setItemSelected: function(item, isSelected) {
+      if (item != null) {
+        if (isSelected !== this.isSelected(item)) {
+          // proceed to update selection only if requested state differs from current
+          if (isSelected) {
+            this.selection.push(item);
+          } else {
+            var i = this.selection.indexOf(item);
+            if (i >= 0) {
+              this.selection.splice(i, 1);
+            }
+          }
+          if (this.selectCallback) {
+            this.selectCallback(item, isSelected);
+          }
+        }
+      }
+    },
+
+    /**
+     * Sets the selection state for a given item. If the `multi` property
+     * is true, then the selected state of `item` will be toggled; otherwise
+     * the `item` will be selected.
+     *
+     * @method select
+     * @param {*} item The item to select.
+     */
+    select: function(item) {
+      if (this.multi) {
+        this.toggle(item);
+      } else if (this.get() !== item) {
+        this.setItemSelected(this.get(), false);
+        this.setItemSelected(item, true);
+      }
+    },
+
+    /**
+     * Toggles the selection state for `item`.
+     *
+     * @method toggle
+     * @param {*} item The item to toggle.
+     */
+    toggle: function(item) {
+      this.setItemSelected(item, !this.isSelected(item));
+    }
+
+  };
+
+</script>

data/assets/bower_components/iron-selector/iron-selector.html

@@ -0,0 +1,87 @@
+<!--
+@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-multi-selectable.html">
+
+<script>
+  /**
+  `iron-selector` is an element which can be used to manage a list of elements
+  that can be selected.  Tapping on the item will make the item selected.  The `selected` indicates
+  which item is being selected.  The default is to use the index of the item.
+
+  Example:
+
+      <iron-selector selected="0">
+        <div>Item 1</div>
+        <div>Item 2</div>
+        <div>Item 3</div>
+      </iron-selector>
+
+  If you want to use the attribute value of an element for `selected` instead of the index,
+  set `attrForSelected` to the name of the attribute.  For example, if you want to select item by
+  `name`, set `attrForSelected` to `name`.
+
+  Example:
+
+      <iron-selector attr-for-selected="name" selected="foo">
+        <div name="foo">Foo</div>
+        <div name="bar">Bar</div>
+        <div name="zot">Zot</div>
+      </iron-selector>
+
+  You can specify a default fallback with `fallbackSelection` in case the `selected` attribute does
+  not match the `attrForSelected` attribute of any elements.
+
+  Example:
+
+        <iron-selector attr-for-selected="name" selected="non-existing"
+                       fallback-selection="default">
+          <div name="foo">Foo</div>
+          <div name="bar">Bar</div>
+          <div name="default">Default</div>
+        </iron-selector>
+
+  Note: When the selector is multi, the selection will set to `fallbackSelection` iff
+  the number of matching elements is zero.
+
+  `iron-selector` is not styled. Use the `iron-selected` CSS class to style the selected element.
+
+  Example:
+
+      <style>
+        .iron-selected {
+          background: #eee;
+        }
+      </style>
+
+      ...
+
+      <iron-selector selected="0">
+        <div>Item 1</div>
+        <div>Item 2</div>
+        <div>Item 3</div>
+      </iron-selector>
+
+  @demo demo/index.html
+  */
+
+  Polymer({
+
+    is: 'iron-selector',
+
+    behaviors: [
+      Polymer.IronMultiSelectableBehavior
+    ]
+
+  });
+
+</script>

data/assets/bower_components/iron-selector/test/activate-event.html

@@ -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>iron-selector-activate-event</title>
+  <meta charset="UTF-8">
+
+  <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="../iron-selector.html">
+
+  <style>
+    .iron-selected {
+      background: #ccc;
+    }
+  </style>
+
+</head>
+<body>
+
+  <test-fixture id="test">
+    <template>
+      <iron-selector id="selector" selected="0">
+        <div>Item 0</div>
+        <div>Item 1</div>
+        <div>Item 2</div>
+        <div>Item 3</div>
+        <div>Item 4</div>
+      </iron-selector>
+    </template>
+  </test-fixture>
+
+  <script>
+
+    suite('activate event', function() {
+
+      var s;
+
+      setup(function () {
+        s = fixture('test');
+      });
+
+      test('activates on tap', function() {
+        assert.equal(s.selected, '0');
+
+        // select Item 1
+        s.children[1].dispatchEvent(new CustomEvent('tap', {bubbles: true}));
+        assert.equal(s.selected, '1');
+      });
+
+      test('activates on tap and fires iron-activate', function(done) {
+        assert.equal(s.selected, '0');
+
+        // attach iron-activate listener
+        s.addEventListener("iron-activate", function(event) {
+          assert.equal(event.detail.selected, '1');
+          assert.equal(event.detail.item, s.children[1]);
+          done();
+        });
+
+        // select Item 1
+        s.children[1].dispatchEvent(new CustomEvent('tap', {bubbles: true}));
+      });
+
+      test('tap on already selected and fires iron-activate', function(done) {
+        assert.equal(s.selected, '0');
+
+        // attach iron-activate listener
+        s.addEventListener("iron-activate", function(event) {
+          assert.equal(event.detail.selected, '0');
+          assert.equal(event.detail.item, s.children[0]);
+          done();
+        });
+
+        // select Item 0
+        s.children[0].dispatchEvent(new CustomEvent('tap', {bubbles: true}));
+      });
+
+      test('activates on mousedown', function() {
+        // set activateEvent to mousedown
+        s.activateEvent = 'mousedown';
+        // select Item 2
+        s.children[2].dispatchEvent(new CustomEvent('mousedown', {bubbles: true}));
+        assert.equal(s.selected, '2');
+      });
+
+      test('activates on mousedown and fires iron-activate', function(done) {
+        // attach iron-activate listener
+        s.addEventListener("iron-activate", function(event) {
+          assert.equal(event.detail.selected, '2');
+          assert.equal(event.detail.item, s.children[2]);
+          done();
+        });
+
+        // set activateEvent to mousedown
+        s.activateEvent = 'mousedown';
+        // select Item 2
+        s.children[2].dispatchEvent(new CustomEvent('mousedown', {bubbles: true}));
+      });
+
+      test('no activation', function() {
+        assert.equal(s.selected, '0');
+        // set activateEvent to null
+        s.activateEvent = null;
+        // select Item 2
+        s.children[2].dispatchEvent(new CustomEvent('mousedown', {bubbles: true}));
+        assert.equal(s.selected, '0');
+      });
+
+      test('activates on tap and preventDefault', function() {
+        // attach iron-activate listener
+        s.addEventListener("iron-activate", function(event) {
+          event.preventDefault();
+        });
+        // select Item 2
+        s.children[2].dispatchEvent(new CustomEvent('tap', {bubbles: true}));
+        // shouldn't got selected since we preventDefault in iron-activate
+        assert.equal(s.selected, '0');
+      });
+
+      test('activates after detach and re-attach', function() {
+        // Detach and re-attach
+        var parent = s.parentNode;
+        parent.removeChild(s);
+        parent.appendChild(s);
+        
+        // select Item 2
+        s.children[2].dispatchEvent(new CustomEvent('tap', {bubbles: true}));
+        assert.equal(s.selected, '2');
+      });
+
+    });
+
+  </script>
+
+</body>
+</html>

data/assets/bower_components/iron-selector/test/attr-for-selected-elements.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="../../polymer/polymer.html">
+
+<dom-module id="attr-reflector">
+  <template>
+    <div>{{someAttr}}</div>
+  </template>
+  <script>
+    Polymer({
+      is: 'attr-reflector',
+
+      properties: {
+        someAttr: {
+          type: String,
+          value: "",
+          reflectToAttribute: true
+        }
+      }
+    });
+  </script>
+</dom-module>

data/assets/bower_components/iron-selector/test/attr-for-selected.html

@@ -0,0 +1,229 @@
+<!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.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>iron-selector attr-for-selected</title>
+  <meta charset="utf-8">
+  <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="../../iron-test-helpers/iron-test-helpers.html">
+
+  <link rel="import" href="../iron-selector.html">
+  <link rel="import" href="attr-for-selected-elements.html">
+
+  <style>
+    .iron-selected {
+      background: #ccc;
+    }
+
+    .my-selected {
+      background: red;
+    }
+  </style>
+
+</head>
+<body>
+
+  <test-fixture id="inlineAttributes">
+    <template>
+      <iron-selector attr-for-selected="some-attr">
+        <div some-attr="value0">Item 0</div>
+        <div some-attr="value1">Item 1</div>
+        <div some-attr="value2">Item 2</div>
+      </iron-selector>
+    </template>
+  </test-fixture>
+
+  <test-fixture id="reflectedProperties">
+    <template>
+      <iron-selector attr-for-selected="some-attr">
+        <attr-reflector>Item 0</attr-reflector>
+        <attr-reflector>Item 1</attr-reflector>
+        <attr-reflector>Item 2</attr-reflector>
+      </iron-selector>
+    </template>
+  </test-fixture>
+
+  <test-fixture id="mixedPropertiesAndAttributes">
+    <template>
+      <iron-selector attr-for-selected="some-attr">
+        <attr-reflector>Item 0</attr-reflector>
+        <attr-reflector>Item 1</attr-reflector>
+        <div some-attr="value2">Item 2</div>
+        <div some-attr="value3">Item 3</div>
+        <attr-reflector>Item 4</attr-reflector>
+        <div some-attr="value5">Item 5</div>
+      </iron-selector>
+    </template>
+  </test-fixture>
+
+  <test-fixture id="defaultAttribute">
+    <template>
+      <iron-selector attr-for-selected="some-attr" fallback-selection="default">
+        <div some-attr="value0">Item 0</div>
+        <div some-attr="value1">Item 1</div>
+        <div some-attr="default">Item 2</div>
+      </iron-selector>
+    </template>
+  </test-fixture>
+
+  <script>
+    suite('inline attributes', function() {
+      var selector;
+      var items;
+
+      setup(function () {
+        selector = fixture('inlineAttributes');
+        items = Array.prototype.slice.apply(selector.querySelectorAll('div[some-attr]'));
+      });
+
+      test('selecting value programatically selects correct item', function() {
+        selector.select('value1');
+        assert.equal(selector.selectedItem, items[1]);
+      });
+
+      test('selecting item sets the correct selected value', function(done) {
+        MockInteractions.downAndUp(items[2], function() {
+          assert.equal(selector.selected, 'value2');
+          done();
+        });
+      });
+    });
+
+    suite('reflected properties as attributes', function() {
+      var selector;
+      var items;
+
+      setup(function () {
+        selector = fixture('reflectedProperties');
+        items = Array.prototype.slice.apply(selector.querySelectorAll('attr-reflector'));
+        for (var i = 0; i < items.length; i++) {
+          items[i].someAttr = "value" + i;
+        }
+      });
+
+      test('selecting value programatically selects correct item', function() {
+        selector.select('value1');
+        assert.equal(selector.selectedItem, items[1]);
+      });
+
+      test('selecting item sets the correct selected value', function(done) {
+        MockInteractions.downAndUp(items[2], function() {
+          assert.equal(selector.selected, 'value2');
+          done();
+        });
+      });
+    });
+
+    suite('mixed properties and inline attributes', function() {
+      var selector;
+      var items;
+
+      setup(function () {
+        selector = fixture('mixedPropertiesAndAttributes');
+        items = Array.prototype.slice.apply(selector.querySelectorAll('attr-reflector, div[some-attr]'));
+        for (var i = 0; i < items.length; i++) {
+          items[i].someAttr = "value" + i;
+        }
+      });
+
+      test('selecting value programatically selects correct item', function() {
+        for (var i = 0; i < items.length; i++) {
+          selector.select('value' + i);
+          assert.equal(selector.selectedItem, items[i]);
+        }
+      });
+
+      test('selecting item sets the correct selected value', function(done) {
+        var i = 0;
+
+        function testSelectItem(i) {
+          if (i >= items.length) {
+            done();
+            return;
+          }
+
+          MockInteractions.downAndUp(items[i], function() {
+            assert.equal(selector.selected, 'value' + i);
+
+            testSelectItem(i + 1);
+          });
+        }
+
+        testSelectItem(i);
+      });
+    });
+
+    suite('default attribute', function() {
+      var selector;
+      var items;
+
+      setup(function () {
+        selector = fixture('defaultAttribute');
+        items = Array.prototype.slice.apply(selector.querySelectorAll('div[some-attr]'));
+      });
+
+      test('setting non-existing value sets default', function() {
+        selector.select('non-existing-value');
+        assert.equal(selector.selected, 'default');
+        assert.equal(selector.selectedItem, items[2]);
+      });
+
+      test('setting non-existing value sets default', function() {
+        selector.multi = true;
+        selector.select(['non-existing-value']);
+        assert.deepEqual(selector.selectedValues, ['default']);
+        assert.deepEqual(selector.selectedItems, [items[2]]);
+      });
+
+      test('default not used when there was at least one match', function() {
+        selector.multi = true;
+        selector.selectedValues = ['non-existing-value', 'value0'];
+        assert.deepEqual(selector.selectedValues, ['non-existing-value', 'value0']);
+        assert.deepEqual(selector.selectedItems, [items[0]]);
+      });
+
+      test('default element not found does not result in infinite loop', function() {
+        selector.fallbackSelection = 'non-existing-fallback';
+        selector.select('non-existing-value');
+        assert.equal(selector.selectedItem, undefined);
+        selector.multi = true;
+        selector.selectedValues = ['non-existing-value'];
+        assert.deepEqual(selector.selectedItems, [undefined]);
+        selector.fallbackSelection = 'default';
+        assert.deepEqual(selector.selectedItems, [items[2]]);
+      });
+
+      test('selection is updated after fallback is set', function() {
+        selector.fallbackSolution = undefined;
+        selector.select('non-existing-value');
+        selector.fallbackSelection = 'default';
+        assert.equal(selector.selectedItem, items[2]);
+      });
+
+      test('multi-selection is updated after fallback is set', function() {
+        selector.fallbackSolution = undefined;
+        selector.selectedValues = ['non-existing-value'];
+        selector.fallbackSolution = 'default';
+        assert.equal(selector.selectedItem, items[2]);
+      });
+    });
+  </script>
+
+</body>
+</html>