Skip to content

Instantly share code, notes, and snippets.

@liamfiddler

liamfiddler/01-skeleton.html

Created September 9, 2016 05:47
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save liamfiddler/08070e5c2d4796d6ab7026284f6ed84d to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save liamfiddler/08070e5c2d4796d6ab7026284f6ed84d to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. liamfiddler created this gist Sep 9, 2016.
    28 changes: 28 additions & 0 deletions 01-skeleton.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,28 @@
    <link rel="import" href="../polymer/polymer.html">
    <!--
    `my-listfilter`
    A filterable list component
    @demo demo/index.html
    -->
    <dom-module id="my-listfilter">
    <template>
    <style>
    :host {
    display: block;
    }
    </style>
    <h2>Hello [[prop1]]</h2>
    </template>
    <script>
    Polymer({
    is: 'my-listfilter',
    properties: {
    prop1: {
    type: String,
    value: 'my-listfilter',
    },
    },
    });
    </script>
    </dom-module>
    29 changes: 29 additions & 0 deletions 02-input.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,29 @@
    <link rel="import" href="../polymer/polymer.html">
    <!--
    `my-listfilter`
    A filterable list component
    @demo demo/index.html
    -->
    <dom-module id="my-listfilter">
    <template>
    <style>
    :host {
    display: block;
    }
    </style>
    <input value="{{prop1::input}}" />
    <h2>Hello [[prop1]]</h2>
    </template>
    <script>
    Polymer({
    is: 'my-listfilter',
    properties: {
    prop1: {
    type: String,
    value: 'my-listfilter',
    },
    },
    });
    </script>
    </dom-module>
    41 changes: 41 additions & 0 deletions 03-list.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,41 @@
    <link rel="import" href="../polymer/polymer.html">
    <!--
    `my-listfilter`
    A filterable list component
    @demo demo/index.html
    -->
    <dom-module id="my-listfilter">
    <template>
    <style>
    :host {
    display: block;
    }
    .hidden {
    display: none;
    }
    </style>
    <input value="{{prop1::input}}" />
    <h2>Hello [[prop1]]</h2>
    <ul id="list">
    <li>Hypertext Markup Language</li>
    <li>Cascading Style Sheets</li>
    <li>Javascript</li>
    <li>Web Components</li>
    <li>Polymer</li>
    <li>Web Browser</li>
    <li>Mentally Friendly</li>
    </ul>
    </template>
    <script>
    Polymer({
    is: 'my-listfilter',
    properties: {
    prop1: {
    type: String,
    value: 'my-listfilter',
    },
    },
    });
    </script>
    </dom-module>
    54 changes: 54 additions & 0 deletions 04-function.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,54 @@
    <link rel="import" href="../polymer/polymer.html">
    <!--
    `my-listfilter`
    A filterable list component
    @demo demo/index.html
    -->
    <dom-module id="my-listfilter">
    <template>
    <style>
    :host {
    display: block;
    }
    .hidden {
    display: none;
    }
    </style>
    <input value="{{prop1::input}}" />
    <h2>Hello [[prop1]]</h2>
    <ul id="list">
    <li>Hypertext Markup Language</li>
    <li>Cascading Style Sheets</li>
    <li>Javascript</li>
    <li>Web Components</li>
    <li>Polymer</li>
    <li>Web Browser</li>
    <li>Mentally Friendly</li>
    </ul>
    </template>
    <script>
    Polymer({
    is: 'my-listfilter',
    properties: {
    prop1: {
    type: String,
    value: 'my-listfilter',
    },
    },
    filterList: function() {
    var items = this.$.list.children;

    for (var i = 0; i < items.length; i++) {
    var item = Polymer.dom(items[i]);

    if (item.textContent.includes(this.prop1)) {
    item.classList.remove('hidden');
    } else {
    item.classList.add('hidden');
    }
    }
    }
    });
    </script>
    </dom-module>
    55 changes: 55 additions & 0 deletions 05-observer.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,55 @@
    <link rel="import" href="../polymer/polymer.html">
    <!--
    `my-listfilter`
    A filterable list component
    @demo demo/index.html
    -->
    <dom-module id="my-listfilter">
    <template>
    <style>
    :host {
    display: block;
    }
    .hidden {
    display: none;
    }
    </style>
    <input value="{{prop1::input}}" />
    <h2>Hello [[prop1]]</h2>
    <ul id="list">
    <li>Hypertext Markup Language</li>
    <li>Cascading Style Sheets</li>
    <li>Javascript</li>
    <li>Web Components</li>
    <li>Polymer</li>
    <li>Web Browser</li>
    <li>Mentally Friendly</li>
    </ul>
    </template>
    <script>
    Polymer({
    is: 'my-listfilter',
    properties: {
    prop1: {
    type: String,
    value: '',
    observer: 'filterList'
    },
    },
    filterList: function() {
    var items = this.$.list.children;

    for (var i = 0; i < items.length; i++) {
    var item = Polymer.dom(items[i]);

    if (item.textContent.includes(this.prop1)) {
    item.classList.remove('hidden');
    } else {
    item.classList.add('hidden');
    }
    }
    }
    });
    </script>
    </dom-module>