Skip to content

Instantly share code, notes, and snippets.

@cuteofdragon

cuteofdragon/fancy-tabs-demo.html

Forked from ebidel/fancy-tabs-demo.html
Created February 18, 2025 15:38
Show Gist options
  • Save cuteofdragon/85c5daba436bd9855c7e7743c3a9c914 to your computer and use it in GitHub Desktop.
Save cuteofdragon/85c5daba436bd9855c7e7743c3a9c914 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. @ebidel ebidel revised this gist May 16, 2023. 1 changed file with 189 additions and 210 deletions.
    399 changes: 189 additions & 210 deletions fancy-tabs-demo.html
    View file
    Original file line number Diff line number Diff line change
    @@ -1,35 +1,4 @@

    <script>
    function execPolyfill() {

    (function(){
    // CustomElementsV1.min.js v1 polyfill from https://github.com/webcomponents/webcomponentsjs/tree/v1/src/CustomElements/v1.
    /*
    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
    */
    'use strict';(function(){function q(a){return l.test(a)&&-1===r.indexOf(a)}function e(){this.a=new Map;this.l=new Map;this.o=new Map;this.m=new Set;this.D=new MutationObserver(this.F.bind(this));this.f=null;this.L=!0;this.h=!1;this.g(document)}var g=document,f=window,r="annotation-xml color-profile font-face font-face-src font-face-uri font-face-format font-face-name missing-glyph".split(" "),l=/^[a-z][.0-9_a-z]*-[\-.0-9_a-z]*$/;e.prototype={J:function(a,b){function c(a){var b=m[a];if(void 0!==b&&
    "function"!==typeof b)throw Error(d+" '"+a+"' is not a Function");return b}a=a.toString().toLowerCase();if("function"!==typeof b)throw new TypeError("constructor must be a Constructor");if(!q(a))throw new SyntaxError("The element name '"+a+"' is not valid.");if(this.a.has(a))throw Error("An element with name '"+a+"' is already defined");if(this.l.has(b))throw Error("Definition failed for '"+a+"': The constructor is already used.");var d=a,m=b.prototype;if("object"!==typeof m)throw new TypeError("Definition failed for '"+
    a+"': constructor.prototype must be an object");var e=c("connectedCallback"),f=c("disconnectedCallback"),h=c("attributeChangedCallback");this.a.set(d,{name:a,localName:d,constructor:b,w:e,A:f,v:h,K:b.observedAttributes||[]});this.l.set(b,d);this.b(g.childNodes);if(e=this.o.get(d))e.resolve(void 0),this.o.delete(d)},get:function(a){return(a=this.a.get(a))?a.constructor:void 0},M:function(a){if(!l.test(a))return Promise.reject(new SyntaxError("The element name '"+a+"' is not valid."));if(this.a.has(a))return Promise.resolve();
    var b={B:null};b.B=new Promise(function(a){b.resolve=a});this.o.set(a,b);return b.B},C:function(){this.h&&(console.warn("flush!!!"),this.m.forEach(function(a){this.s(a.takeRecords())},this))},H:function(a){this.f=a},g:function(a){a.c=new MutationObserver(this.s.bind(this));a.c.observe(a,{childList:!0,subtree:!0});this.h&&this.m.add(a.c)},I:function(a){a.c&&(a.c.disconnect(),a.c=null,this.h&&this.m.delete(a.c))},s:function(a){for(var b=0;b<a.length;b++){var c=a[b];"childList"===c.type&&(this.b(c.addedNodes),
    this.G(c.removedNodes))}},b:function(a){for(var b=0;b<a.length;b++){var c=a[b];if(c.nodeType===Node.ELEMENT_NODE){this.I(c);c=g.createTreeWalker(c,NodeFilter.SHOW_ELEMENT,null,!1);do{var d=c.currentNode,e=this.a.get(d.localName);e&&(d.j||this.u(d,e,!0),d.j&&!d.i&&(d.i=!0,e&&e.w&&e.w.call(d)));d.shadowRoot&&this.b(d.shadowRoot.childNodes);if("LINK"===d.tagName){var f=function(){var a=d;return function(){a.removeEventListener("load",f);this.g(a.import);this.b(a.import.childNodes)}.bind(this)}.call(this);
    d.import?f():d.addEventListener("load",f)}}while(c.nextNode())}}},G:function(a){for(var b=0;b<a.length;b++){var c=a[b];if(c.nodeType===Node.ELEMENT_NODE){this.g(c);c=g.createTreeWalker(c,NodeFilter.SHOW_ELEMENT,null,!1);do{var d=c.currentNode;if(d.j&&d.i){d.i=!1;var e=this.a.get(d.localName);e&&e.A&&e.A.call(d)}}while(c.nextNode())}}},u:function(a,b,c){a.__proto__=b.constructor.prototype;c&&(this.H(a),a.j=!0,new b.constructor,console.assert(null==this.f));c=b.K;if(b.v&&0<c.length)for(this.D.observe(a,
    {attributes:!0,attributeOldValue:!0,attributeFilter:c}),b=0;b<c.length;b++){var d=c[b];if(a.hasAttribute(d)){var e=a.getAttribute(d);a.v(d,null,e)}}},F:function(a){for(var b=0;b<a.length;b++){var c=a[b];if("attributes"===c.type){var d=c.attributeName,e=c.oldValue,f=c.target,g=f.getAttribute(d);f.attributeChangedCallback(d,e,g,c.attributeNamespace)}}}};window.CustomElementsRegistry=e;e.prototype.define=e.prototype.J;e.prototype.get=e.prototype.get;e.prototype.whenDefined=e.prototype.M;e.prototype.flush=
    e.prototype.C;e.prototype.polyfilled=e.prototype.L;e.prototype.enableFlush=e.prototype.h;var h=f.HTMLElement;f.HTMLElement=function(){var a=f.customElements;if(a.f){var b=a.f;a.f=null;return b}if(this.constructor)return a=a.l.get(this.constructor),g.b(a,!1);throw Error("unknown constructor. Did you call customElements.define()?");};f.HTMLElement.prototype=Object.create(h.prototype);Object.defineProperty(f.HTMLElement.prototype,"constructor",{value:f.HTMLElement});for(var h="Button Canvas Data Head Mod TableCell TableCol Anchor Area Base Body BR DataList Details Dialog Div DList Embed FieldSet Form Heading HR Html IFrame Image Input Keygen Label Legend LI Link Map Media Menu MenuItem Meta Meter Object OList OptGroup Option Output Paragraph Param Picture Pre Progress Quote Script Select Slot Source Span Style TableCaption Table TableRow TableSection Template TextArea Time Title Track UList Unknown".split(" "),
    k=0;k<h.length;k++){var n=window["HTML"+h[k]+"Element"];n&&(n.prototype.__proto__=f.HTMLElement.prototype)}var t=g.createElement;g.b=function(a,b){var c=f.customElements,d=t.call(g,a),e=c.a.get(a.toLowerCase());e&&c.u(d,e,b);c.g(d);return d};g.createElement=function(a){return g.b(a,!0)};var u=g.createElementNS;g.createElementNS=function(a,b){return"http://www.w3.org/1999/xhtml"===a?g.createElement(b):u.call(document,a,b)};var p=Element.prototype.attachShadow;p&&Object.defineProperty(Element.prototype,
    "attachShadow",{value:function(a){a=p.call(this,a);f.customElements.g(a);return a}});window.customElements=new e})();
    }).call(this)
    }

    // Remove check when https://github.com/webcomponents/webcomponentsjs/issues/548 is fixed.
    if (!!!window.customElements) {
    execPolyfill();
    }
    </script>
    <script src="https://unpkg.com/@webcomponents/custom-elements"></script>

    <style>
    body {
    @@ -52,7 +21,7 @@
    <section>content panel 3</section>
    </fancy-tabs>

    <!-- Using <a> instead of h2 still works! -->
    <!-- Using <a> instead of button still works! -->
    <!-- <fancy-tabs background>
    <a slot="title">Title 1</a>
    <a slot="title" selected>Title 2</a>
    @@ -63,190 +32,200 @@
    </fancy-tabs> -->

    <script>
    (function() {
    'use strict';

    // Feature detect
    if (!(window.customElements && document.body.attachShadow)) {
    document.querySelector('fancy-tabs').innerHTML = "<b>Your browser doesn't support Shadow DOM and Custom Elements v1.</b>";
    return;
    }

    let selected_ = null;

    // See https://www.w3.org/TR/wai-aria-practices-1.1/#tabpanel

    customElements.define('fancy-tabs', class extends HTMLElement {

    constructor() {
    super(); // always call super() first in the ctor.

    // Create shadow DOM for the component.
    let shadowRoot = this.attachShadow({mode: 'open'});
    shadowRoot.innerHTML = `
    <style>
    :host {
    display: inline-block;
    width: 650px;
    font-family: 'Roboto Slab';
    contain: content;
    }
    :host([background]) {
    background: var(--background-color, #9E9E9E);
    border-radius: 10px;
    padding: 10px;
    }
    #panels {
    box-shadow: 0 2px 2px rgba(0, 0, 0, .3);
    background: white;
    border-radius: 3px;
    padding: 16px;
    height: 250px;
    overflow: auto;
    }
    #tabs {
    display: inline-flex;
    -webkit-user-select: none;
    user-select: none;
    }
    #tabs slot {
    display: inline-flex; /* Safari bug. Treats <slot> as a parent */
    (function () {
    'use strict';

    // Feature detect
    if (!(window.customElements && document.body.attachShadow)) {
    document.querySelector('fancy-tabs').innerHTML =
    "<b>Your browser doesn't support Shadow DOM and Custom Elements v1.</b>";
    return;
    }

    // See https://www.w3.org/TR/wai-aria-practices-1.1/#tabpanel

    customElements.define(
    'fancy-tabs',
    class extends HTMLElement {
    #shadowRoot;
    #tabsSlot;
    #selected;
    #boundOnTitleClick;
    #boundOnKeyDown;

    panels = [];
    tabs = [];

    constructor() {
    super(); // always call super() first in the ctor.

    // Create shadow DOM for the component.
    this.#shadowRoot = this.attachShadow({ mode: 'open' });
    this.#shadowRoot.innerHTML = `
    <style>
    :host {
    display: inline-block;
    width: 100%;
    font-family: 'Roboto Slab';
    contain: content;
    }
    :host([background]) {
    background: var(--background-color, #9E9E9E);
    border-radius: 10px;
    padding: 10px;
    }
    #panels {
    box-shadow: 0 2px 2px rgba(0, 0, 0, .3);
    background: white;
    border-radius: 3px;
    padding: 16px;
    height: 250px;
    overflow: auto;
    }
    #tabs {
    display: inline-flex;
    -webkit-user-select: none;
    user-select: none;
    }
    #tabs slot {
    display: inline-flex; /* Safari bug. Treats <slot> as a parent */
    gap: 4px;
    }
    /* Safari does not support #id prefixes on ::slotted
    See https://bugs.webkit.org/show_bug.cgi?id=160538 */
    #tabs ::slotted(*) {
    font: 400 16px/22px 'Roboto';
    padding: 16px 8px;
    margin: 0;
    text-align: center;
    width: 100px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    cursor: pointer;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    background: linear-gradient(#fafafa, #eee);
    border: none; /* if the user users a <button> */
    }
    #tabs ::slotted([aria-selected="true"]) {
    font-weight: 600;
    background: white;
    box-shadow: none;
    }
    #tabs ::slotted(:focus) {
    z-index: 1; /* make sure focus ring doesn't get buried */
    }
    #panels ::slotted([aria-hidden="true"]) {
    display: none;
    }
    </style>
    <div id="tabs">
    <slot id="tabsSlot" name="title"></slot>
    </div>
    <div id="panels">
    <slot id="panelsSlot"></slot>
    </div>
    `;
    }
    /* Safari does not support #id prefixes on ::slotted
    See https://bugs.webkit.org/show_bug.cgi?id=160538 */
    #tabs ::slotted(*) {
    font: 400 16px/22px 'Roboto';
    padding: 16px 8px;
    margin: 0;
    text-align: center;
    width: 100px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    cursor: pointer;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    background: linear-gradient(#fafafa, #eee);
    border: none; /* if the user users a <button> */

    get selected() {
    return this.#selected;
    }
    #tabs ::slotted([aria-selected="true"]) {
    font-weight: 600;
    background: white;
    box-shadow: none;

    set selected(idx) {
    this.#selected = idx;
    this.selectTab(idx);

    // Updated the element's selected attribute value when
    // backing property changes.
    this.setAttribute('selected', idx);
    }
    #tabs ::slotted(:focus) {
    z-index: 1; /* make sure focus ring doesn't get buried */

    connectedCallback() {
    this.setAttribute('role', 'tablist');

    this.#tabsSlot = this.#shadowRoot.querySelector('#tabsSlot');
    const panelsSlot = this.#shadowRoot.querySelector('#panelsSlot');

    this.tabs = this.#tabsSlot.assignedNodes({ flatten: true });
    this.panels = panelsSlot
    .assignedNodes({ flatten: true })
    .filter((el) => el.nodeType === Node.ELEMENT_NODE);

    // Add aria role="tabpanel" to each content panel.
    for (const panel of this.panels) {
    panel.setAttribute('role', 'tabpanel');
    panel.setAttribute('tabindex', 0);
    }

    // Referernces to we can remove listeners later.
    this.#boundOnTitleClick = this.#onTitleClick.bind(this);
    this.#boundOnKeyDown = this.#onKeyDown.bind(this);

    this.#tabsSlot.addEventListener('click', this.#boundOnTitleClick);
    this.#tabsSlot.addEventListener('keydown', this.#boundOnKeyDown);

    this.selected = this.#findFirstSelectedTab() || 0;
    }
    #panels ::slotted([aria-hidden="true"]) {
    display: none;

    disconnectedCallback() {
    this.#tabsSlot.removeEventListener('click', this.#boundOnTitleClick);
    this.#tabsSlot.removeEventListener('keydown', this.#boundOnKeyDown);
    }
    </style>
    <div id="tabs">
    <slot id="tabsSlot" name="title"></slot>
    </div>
    <div id="panels">
    <slot id="panelsSlot"></slot>
    </div>
    `;
    }

    get selected() {
    return selected_;
    }

    set selected(idx) {
    selected_ = idx;
    this._selectTab(idx);
    #onTitleClick(e) {
    if (e.target.slot === 'title') {
    this.selected = this.tabs.indexOf(e.target);
    e.target.focus();
    }
    }

    // Updated the element's selected attribute value when
    // backing property changes.
    this.setAttribute('selected', idx);
    }

    connectedCallback() {
    this.setAttribute('role', 'tablist');

    const tabsSlot = this.shadowRoot.querySelector('#tabsSlot');
    const panelsSlot = this.shadowRoot.querySelector('#panelsSlot');

    this.tabs = tabsSlot.assignedNodes({flatten: true});
    this.panels = panelsSlot.assignedNodes({flatten: true}).filter(el => {
    return el.nodeType === Node.ELEMENT_NODE;
    });

    // Add aria role="tabpanel" to each content panel.
    for (let [i, panel] of this.panels.entries()) {
    panel.setAttribute('role', 'tabpanel');
    panel.setAttribute('tabindex', 0);
    }

    // Save refer to we can remove listeners later.
    this._boundOnTitleClick = this._onTitleClick.bind(this);
    this._boundOnKeyDown = this._onKeyDown.bind(this);

    tabsSlot.addEventListener('click', this._boundOnTitleClick);
    tabsSlot.addEventListener('keydown', this._boundOnKeyDown);

    this.selected = this._findFirstSelectedTab() || 0;
    }

    disconnectedCallback() {
    const tabsSlot = this.shadowRoot.querySelector('#tabsSlot');
    tabsSlot.removeEventListener('click', this._boundOnTitleClick);
    tabsSlot.removeEventListener('keydown', this._boundOnKeyDown);
    }

    _onTitleClick(e) {
    if (e.target.slot === 'title') {
    this.selected = this.tabs.indexOf(e.target);
    e.target.focus();
    }
    }

    _onKeyDown(e) {
    switch (e.code) {
    case 'ArrowUp':
    case 'ArrowLeft':
    e.preventDefault();
    var idx = this.selected - 1;
    idx = idx < 0 ? this.tabs.length - 1 : idx;
    this.tabs[idx].click();
    break;
    case 'ArrowDown':
    case 'ArrowRight':
    e.preventDefault();
    var idx = this.selected + 1;
    this.tabs[idx % this.tabs.length].click();
    break;
    default:
    break;
    }
    }
    #onKeyDown(e) {
    switch (e.code) {
    case 'ArrowUp':
    case 'ArrowLeft':
    e.preventDefault();
    var idx = this.selected - 1;
    idx = idx < 0 ? this.tabs.length - 1 : idx;
    this.tabs[idx].click();
    break;
    case 'ArrowDown':
    case 'ArrowRight':
    e.preventDefault();
    var idx = this.selected + 1;
    this.tabs[idx % this.tabs.length].click();
    break;
    default:
    break;
    }
    }

    _findFirstSelectedTab() {
    let selectedIdx;
    for (let [i, tab] of this.tabs.entries()) {
    tab.setAttribute('role', 'tab');
    #findFirstSelectedTab() {
    let selectedIdx;
    for (let [i, tab] of this.tabs.entries()) {
    tab.setAttribute('role', 'tab');

    // Allow users to declaratively select a tab
    // Highlight last tab which has the selected attribute.
    if (tab.hasAttribute('selected')) {
    selectedIdx = i;
    }
    }
    return selectedIdx;
    }

    // Allow users to declaratively select a tab
    // Highlight last tab which has the selected attribute.
    if (tab.hasAttribute('selected')) {
    selectedIdx = i;
    selectTab(idx = null) {
    for (let [i, tab] of this.tabs.entries()) {
    const select = i === idx;
    tab.setAttribute('tabindex', select ? 0 : -1);
    tab.setAttribute('aria-selected', select);
    this.panels[i].setAttribute('aria-hidden', !select);
    }
    }
    }
    }
    return selectedIdx;
    }

    _selectTab(idx = null) {
    for (let i = 0, tab; tab = this.tabs[i]; ++i) {
    let select = i === idx;
    tab.setAttribute('tabindex', select ? 0 : -1);
    tab.setAttribute('aria-selected', select);
    this.panels[i].setAttribute('aria-hidden', !select);
    }
    }

    });

    })();
    </script>
    );
    })();
    </script>

    <div id="app"></div>
  2. @ebidel ebidel revised this gist Aug 5, 2016. 1 changed file with 3 additions and 0 deletions.
    3 changes: 3 additions & 0 deletions fancy-tabs-demo.html
    View file
    Original file line number Diff line number Diff line change
    @@ -134,6 +134,9 @@
    background: white;
    box-shadow: none;
    }
    #tabs ::slotted(:focus) {
    z-index: 1; /* make sure focus ring doesn't get buried */
    }
    #panels ::slotted([aria-hidden="true"]) {
    display: none;
    }
  3. @ebidel ebidel revised this gist Aug 5, 2016. 1 changed file with 3 additions and 3 deletions.
    6 changes: 3 additions & 3 deletions fancy-tabs-demo.html
    View file
    Original file line number Diff line number Diff line change
    @@ -44,9 +44,9 @@
    </style>

    <fancy-tabs background>
    <h2 slot="title">Tab 1</h2>
    <h2 slot="title" selected>Tab 2</h2>
    <h2 slot="title">Tab 3</h2>
    <button slot="title">Tab 1</button>
    <button slot="title" selected>Tab 2</button>
    <button slot="title">Tab 3</button>
    <section>content panel 1</section>
    <section>content panel 2</section>
    <section>content panel 3</section>
  4. @ebidel ebidel revised this gist Aug 5, 2016. 1 changed file with 3 additions and 0 deletions.
    3 changes: 3 additions & 0 deletions fancy-tabs-demo.html
    View file
    Original file line number Diff line number Diff line change
    @@ -74,6 +74,8 @@ <h2 slot="title">Tab 3</h2>

    let selected_ = null;

    // See https://www.w3.org/TR/wai-aria-practices-1.1/#tabpanel

    customElements.define('fancy-tabs', class extends HTMLElement {

    constructor() {
    @@ -172,6 +174,7 @@ <h2 slot="title">Tab 3</h2>
    // Add aria role="tabpanel" to each content panel.
    for (let [i, panel] of this.panels.entries()) {
    panel.setAttribute('role', 'tabpanel');
    panel.setAttribute('tabindex', 0);
    }

    // Save refer to we can remove listeners later.
  5. @ebidel ebidel revised this gist Aug 5, 2016. 1 changed file with 6 additions and 3 deletions.
    9 changes: 6 additions & 3 deletions fancy-tabs-demo.html
    View file
    Original file line number Diff line number Diff line change
    @@ -199,15 +199,18 @@ <h2 slot="title">Tab 3</h2>

    _onKeyDown(e) {
    switch (e.code) {
    case 'ArrowUp':
    case 'ArrowLeft':
    e.preventDefault();
    var idx = Math.max(0, this.selected - 1);
    var idx = this.selected - 1;
    idx = idx < 0 ? this.tabs.length - 1 : idx;
    this.tabs[idx].click();
    break;
    case 'ArrowDown':
    case 'ArrowRight':
    e.preventDefault();
    var idx = Math.min(this.selected + 1, this.tabs.length - 1);
    this.tabs[idx].click();
    var idx = this.selected + 1;
    this.tabs[idx % this.tabs.length].click();
    break;
    default:
    break;
  6. @ebidel ebidel revised this gist Aug 5, 2016. 1 changed file with 0 additions and 1 deletion.
    1 change: 0 additions & 1 deletion fancy-tabs-demo.html
    View file
    Original file line number Diff line number Diff line change
    @@ -172,7 +172,6 @@ <h2 slot="title">Tab 3</h2>
    // Add aria role="tabpanel" to each content panel.
    for (let [i, panel] of this.panels.entries()) {
    panel.setAttribute('role', 'tabpanel');
    panel.setAttribute('tabindex', 0);
    }

    // Save refer to we can remove listeners later.
  7. @ebidel ebidel revised this gist Aug 5, 2016. 1 changed file with 60 additions and 51 deletions.
    111 changes: 60 additions & 51 deletions fancy-tabs-demo.html
    View file
    Original file line number Diff line number Diff line change
    @@ -1,3 +1,4 @@

    <script>
    function execPolyfill() {

    @@ -43,9 +44,9 @@
    </style>

    <fancy-tabs background>
    <button slot="title">Tab 1</button>
    <button slot="title" selected>Tab 2</button>
    <button slot="title">Tab 3</button>
    <h2 slot="title">Tab 1</h2>
    <h2 slot="title" selected>Tab 2</h2>
    <h2 slot="title">Tab 3</h2>
    <section>content panel 1</section>
    <section>content panel 2</section>
    <section>content panel 3</section>
    @@ -67,27 +68,14 @@

    // Feature detect
    if (!(window.customElements && document.body.attachShadow)) {
    let tabs = document.querySelector('fancy-tabs');
    tabs.innerHTML = "<h3 style='margin-top:32px;'>Your browser doesn't support Shadow DOM and Custom Elements v1.</h3>";
    document.querySelector('fancy-tabs').innerHTML = "<b>Your browser doesn't support Shadow DOM and Custom Elements v1.</b>";
    return;
    }

    let selected_ = null;

    customElements.define('fancy-tabs', class extends HTMLElement {

    get selected() {
    return selected_;
    }

    set selected(idx) {
    selected_ = idx;
    this._selectTab(idx);

    // Updated the selected attribute's value when backing property changes.
    this.setAttribute('selected', idx);
    }

    constructor() {
    super(); // always call super() first in the ctor.

    @@ -139,12 +127,12 @@
    background: linear-gradient(#fafafa, #eee);
    border: none; /* if the user users a <button> */
    }
    #tabs ::slotted([selected]) {
    #tabs ::slotted([aria-selected="true"]) {
    font-weight: 600;
    background: white;
    box-shadow: none;
    }
    #panels ::slotted(*:not([selected])) {
    #panels ::slotted([aria-hidden="true"]) {
    display: none;
    }
    </style>
    @@ -155,11 +143,24 @@
    <slot id="panelsSlot"></slot>
    </div>
    `;
    }

    get selected() {
    return selected_;
    }

    this.setAttribute('role', 'tablist');
    set selected(idx) {
    selected_ = idx;
    this._selectTab(idx);

    // Updated the element's selected attribute value when
    // backing property changes.
    this.setAttribute('selected', idx);
    }

    connectedCallback() {
    this.setAttribute('role', 'tablist');

    const tabsSlot = this.shadowRoot.querySelector('#tabsSlot');
    const panelsSlot = this.shadowRoot.querySelector('#panelsSlot');

    @@ -170,46 +171,57 @@

    // Add aria role="tabpanel" to each content panel.
    for (let [i, panel] of this.panels.entries()) {
    panel.setAttribute('role', 'tabpanel');
    panel.setAttribute('role', 'tabpanel');
    panel.setAttribute('tabindex', 0);
    }

    this._onTitleClick = e => {
    if (e.target.slot === 'title') {
    this.selected = this.tabs.indexOf(e.target);
    }
    };

    tabsSlot.addEventListener('click', this._onTitleClick);
    // Save refer to we can remove listeners later.
    this._boundOnTitleClick = this._onTitleClick.bind(this);
    this._boundOnKeyDown = this._onKeyDown.bind(this);

    tabsSlot.addEventListener('click', this._boundOnTitleClick);
    tabsSlot.addEventListener('keydown', this._boundOnKeyDown);

    this.selected = this._findFirstSelectedTab() || 0;
    }

    disconnectedCallback() {
    // Cleanup listeners.
    const titles = this.shadowRoot.querySelector('#titles');
    titles.removeEventListener('click', this._onTitleClick);
    const tabsSlot = this.shadowRoot.querySelector('#tabsSlot');
    tabsSlot.removeEventListener('click', this._boundOnTitleClick);
    tabsSlot.removeEventListener('keydown', this._boundOnKeyDown);
    }

    _addA11yToTab(el) {
    el.setAttribute('tabindex', 0);
    el.setAttribute('role', 'tab');

    // Simulate clicks when users hit Enter.
    if (el.localName !== 'button') {
    el.addEventListener('keydown', e => {
    if (e.keyCode === 32 || e.keyCode === 13) {
    el.click();
    }
    });
    _onTitleClick(e) {
    if (e.target.slot === 'title') {
    this.selected = this.tabs.indexOf(e.target);
    e.target.focus();
    }
    }

    _onKeyDown(e) {
    switch (e.code) {
    case 'ArrowLeft':
    e.preventDefault();
    var idx = Math.max(0, this.selected - 1);
    this.tabs[idx].click();
    break;
    case 'ArrowRight':
    e.preventDefault();
    var idx = Math.min(this.selected + 1, this.tabs.length - 1);
    this.tabs[idx].click();
    break;
    default:
    break;
    }
    }

    _findFirstSelectedTab() {
    let selectedIdx;
    for (let [i, tab] of this.tabs.entries()) {
    this._addA11yToTab(tab);
    tab.setAttribute('role', 'tab');

    // Highlight first tab with selected attribute.
    // Allow users to declaratively select a tab
    // Highlight last tab which has the selected attribute.
    if (tab.hasAttribute('selected')) {
    selectedIdx = i;
    }
    @@ -219,13 +231,10 @@

    _selectTab(idx = null) {
    for (let i = 0, tab; tab = this.tabs[i]; ++i) {
    if (i === idx) {
    tab.setAttribute('selected', '');
    this.panels[i].setAttribute('selected', '');
    } else {
    tab.removeAttribute('selected');
    this.panels[i].removeAttribute('selected');
    }
    let select = i === idx;
    tab.setAttribute('tabindex', select ? 0 : -1);
    tab.setAttribute('aria-selected', select);
    this.panels[i].setAttribute('aria-hidden', !select);
    }
    }

  8. @ebidel ebidel revised this gist Aug 4, 2016. 1 changed file with 2 additions and 1 deletion.
    3 changes: 2 additions & 1 deletion fancy-tabs-demo.html
    View file
    Original file line number Diff line number Diff line change
    @@ -67,7 +67,8 @@

    // Feature detect
    if (!(window.customElements && document.body.attachShadow)) {
    document.querySelector('fancy-tabs').innerHTML = "<h3>Your browser doesn't support Shadow DOM and Custom Elements v1.</h3>";
    let tabs = document.querySelector('fancy-tabs');
    tabs.innerHTML = "<h3 style='margin-top:32px;'>Your browser doesn't support Shadow DOM and Custom Elements v1.</h3>";
    return;
    }

  9. @ebidel ebidel revised this gist Aug 4, 2016. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion fancy-tabs-demo.html
    View file
    Original file line number Diff line number Diff line change
    @@ -67,7 +67,7 @@

    // Feature detect
    if (!(window.customElements && document.body.attachShadow)) {
    document.querySelector('fancy-tabs').innerHTML = "<b>Your browser doesn't support Shadow DOM and Custom Elements v1.</b>";
    document.querySelector('fancy-tabs').innerHTML = "<h3>Your browser doesn't support Shadow DOM and Custom Elements v1.</h3>";
    return;
    }

  10. @ebidel ebidel revised this gist Aug 4, 2016. 1 changed file with 10 additions and 8 deletions.
    18 changes: 10 additions & 8 deletions fancy-tabs-demo.html
    View file
    Original file line number Diff line number Diff line change
    @@ -52,14 +52,14 @@
    </fancy-tabs>

    <!-- Using <a> instead of h2 still works! -->
    <!--<fancy-tabs background>
    <!-- <fancy-tabs background>
    <a slot="title">Title 1</a>
    <a slot="title" selected>Title 2</a>
    <a slot="title">Title 3</a>
    <section>content panel 1</section>
    <section>content panel 2</section>
    <section>content panel 3</section>
    </fancy-tabs>-->
    </fancy-tabs> -->

    <script>
    (function() {
    @@ -136,7 +136,7 @@
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    background: linear-gradient(#fafafa, #eee);
    border: none;
    border: none; /* if the user users a <button> */
    }
    #tabs ::slotted([selected]) {
    font-weight: 600;
    @@ -194,11 +194,13 @@
    el.setAttribute('role', 'tab');

    // Simulate clicks when users hit Enter.
    el.addEventListener('keydown', e => {
    if (e.keyCode === 32 || e.keyCode === 13) {
    el.click();
    }
    });
    if (el.localName !== 'button') {
    el.addEventListener('keydown', e => {
    if (e.keyCode === 32 || e.keyCode === 13) {
    el.click();
    }
    });
    }
    }

    _findFirstSelectedTab() {
  11. @ebidel ebidel revised this gist Aug 4, 2016. 1 changed file with 13 additions and 7 deletions.
    20 changes: 13 additions & 7 deletions fancy-tabs-demo.html
    View file
    Original file line number Diff line number Diff line change
    @@ -43,9 +43,9 @@
    </style>

    <fancy-tabs background>
    <h2 slot="title">Tab 1</h2>
    <h2 slot="title" selected>Tab 2</h2>
    <h2 slot="title">Tab 3</h2>
    <button slot="title">Tab 1</button>
    <button slot="title" selected>Tab 2</button>
    <button slot="title">Tab 3</button>
    <section>content panel 1</section>
    <section>content panel 2</section>
    <section>content panel 3</section>
    @@ -82,7 +82,7 @@ <h2 slot="title">Tab 3</h2>
    set selected(idx) {
    selected_ = idx;
    this._selectTab(idx);

    // Updated the selected attribute's value when backing property changes.
    this.setAttribute('selected', idx);
    }
    @@ -118,7 +118,12 @@ <h2 slot="title">Tab 3</h2>
    -webkit-user-select: none;
    user-select: none;
    }
    #tabsSlot::slotted(*) {
    #tabs slot {
    display: inline-flex; /* Safari bug. Treats <slot> as a parent */
    }
    /* Safari does not support #id prefixes on ::slotted
    See https://bugs.webkit.org/show_bug.cgi?id=160538 */
    #tabs ::slotted(*) {
    font: 400 16px/22px 'Roboto';
    padding: 16px 8px;
    margin: 0;
    @@ -131,13 +136,14 @@ <h2 slot="title">Tab 3</h2>
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    background: linear-gradient(#fafafa, #eee);
    border: none;
    }
    #tabsSlot::slotted([selected]) {
    #tabs ::slotted([selected]) {
    font-weight: 600;
    background: white;
    box-shadow: none;
    }
    #panelsSlot::slotted(*:not([selected])) {
    #panels ::slotted(*:not([selected])) {
    display: none;
    }
    </style>
  12. @ebidel ebidel revised this gist Aug 3, 2016. 1 changed file with 1 addition and 2 deletions.
    3 changes: 1 addition & 2 deletions fancy-tabs-demo.html
    View file
    Original file line number Diff line number Diff line change
    @@ -24,6 +24,7 @@
    }).call(this)
    }

    // Remove check when https://github.com/webcomponents/webcomponentsjs/issues/548 is fixed.
    if (!!!window.customElements) {
    execPolyfill();
    }
    @@ -90,8 +91,6 @@ <h2 slot="title">Tab 3</h2>
    super(); // always call super() first in the ctor.

    // Create shadow DOM for the component.
    console.log(this);

    let shadowRoot = this.attachShadow({mode: 'open'});
    shadowRoot.innerHTML = `
    <style>
  13. @ebidel ebidel revised this gist Aug 3, 2016. 1 changed file with 22 additions and 28 deletions.
    50 changes: 22 additions & 28 deletions fancy-tabs-demo.html
    View file
    Original file line number Diff line number Diff line change
    @@ -1,4 +1,8 @@
    <script>
    function execPolyfill() {

    (function(){
    // CustomElementsV1.min.js v1 polyfill from https://github.com/webcomponents/webcomponentsjs/tree/v1/src/CustomElements/v1.
    /*
    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
    @@ -7,34 +11,22 @@
    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
    */
    // CustomElements.js v1 polyfill from https://github.com/webcomponents/webcomponentsjs/tree/v1/src/CustomElements/v1.
    var CustomElementDefinition;
    (function(){function q(a){return m.test(a)&&-1===r.indexOf(a)}function e(){this._definitions=new Map;this._constructors=new Map;this._whenDefinedMap=new Map;this._observers=new Set;this._attributeObserver=new MutationObserver(this._handleAttributeChange.bind(this));this._newInstance=null;this.polyfilled=!0;this.enableFlush=!1;this._observeRoot(document)}var g=document,h=window,r="annotation-xml color-profile font-face font-face-src font-face-uri font-face-format font-face-name missing-glyph".split(" "),m=
    /^[a-z][.0-9_a-z]*-[\-.0-9_a-z]*$/;e.prototype={define:function(a,b,c){function d(a){var b=e[a];if(void 0!==b&&"function"!==typeof b)throw Error(f+" '"+a+"' is not a Function");return b}a=a.toString().toLowerCase();if("function"!==typeof b)throw new TypeError("constructor must be a Constructor");if(!q(a))throw new SyntaxError("The element name '"+a+"' is not valid.");if(this._definitions.has(a))throw Error("An element with name '"+a+"' is already defined");if(this._constructors.has(b))throw Error("Definition failed for '"+
    a+"': The constructor is already used.");var f=a,e=b.prototype;if("object"!==typeof e)throw new TypeError("Definition failed for '"+a+"': constructor.prototype must be an object");c=d("connectedCallback");var h=d("disconnectedCallback"),k=d("attributeChangedCallback");this._definitions.set(f,{name:a,localName:f,constructor:b,connectedCallback:c,disconnectedCallback:h,attributeChangedCallback:k,observedAttributes:b.observedAttributes||[]});this._constructors.set(b,f);this._addNodes(g.childNodes);if(a=
    this._whenDefinedMap.get(f))a.resolve(void 0),this._whenDefinedMap["delete"](f)},get:function(a){return(a=this._definitions.get(a))?a.constructor:void 0},whenDefined:function(a){if(!m.test(a))return Promise.reject(new SyntaxError("The element name '"+a+"' is not valid."));if(this._definitions.has(a))return Promise.resolve();var b={promise:null};b.promise=new Promise(function(a,d){b.resolve=a});this._whenDefinedMap.set(a,b);return b.promise},flush:function(){this.enableFlush&&(console.warn("flush!!!"),
    this._observers.forEach(function(a){this._handleMutations(a.takeRecords())},this))},_setNewInstance:function(a){this._newInstance=a},_observeRoot:function(a){a.__observer=new MutationObserver(this._handleMutations.bind(this));a.__observer.observe(a,{childList:!0,subtree:!0});this.enableFlush&&this._observers.add(a.__observer)},_unobserveRoot:function(a){a.__observer&&(a.__observer.disconnect(),a.__observer=null,this.enableFlush&&this._observers["delete"](a.__observer))},_handleMutations:function(a){for(var b=
    0;b<a.length;b++){var c=a[b];"childList"===c.type&&(this._addNodes(c.addedNodes),this._removeNodes(c.removedNodes))}},_addNodes:function(a){for(var b=0;b<a.length;b++){var c=a[b];if(c.nodeType===Node.ELEMENT_NODE){this._unobserveRoot(c);c=g.createTreeWalker(c,NodeFilter.SHOW_ELEMENT,null,!1);do{var d=c.currentNode,f=this._definitions.get(d.localName);f&&(d.__upgraded||this._upgradeElement(d,f,!0),d.__upgraded&&!d.__attached&&(d.__attached=!0,f&&f.connectedCallback&&f.connectedCallback.call(d)));d.shadowRoot&&
    this._addNodes(d.shadowRoot.childNodes);if("LINK"===d.tagName){var e=function(){var a=d;return function(){a.removeEventListener("load",e);this._observeRoot(a["import"]);this._addNodes(a["import"].childNodes)}.bind(this)}.call(this);d["import"]?e():d.addEventListener("load",e)}}while(c.nextNode())}}},_removeNodes:function(a){for(var b=0;b<a.length;b++){var c=a[b];if(c.nodeType===Node.ELEMENT_NODE){this._observeRoot(c);c=g.createTreeWalker(c,NodeFilter.SHOW_ELEMENT,null,!1);do{var d=c.currentNode;if(d.__upgraded&&
    d.__attached){d.__attached=!1;var f=this._definitions.get(d.localName);f&&f.disconnectedCallback&&f.disconnectedCallback.call(d)}}while(c.nextNode())}}},_upgradeElement:function(a,b,c){a.__proto__=b.constructor.prototype;c&&(this._setNewInstance(a),a.__upgraded=!0,new b.constructor,console.assert(null==this._newInstance));c=b.observedAttributes;if(b.attributeChangedCallback&&0<c.length)for(this._attributeObserver.observe(a,{attributes:!0,attributeOldValue:!0,attributeFilter:c}),b=0;b<c.length;b++){var d=
    c[b];if(a.hasAttribute(d)){var f=a.getAttribute(d);a.attributeChangedCallback(d,null,f)}}},_handleAttributeChange:function(a){for(var b=0;b<a.length;b++){var c=a[b];if("attributes"===c.type){var d=c.attributeName,f=c.oldValue,e=c.target,g=e.getAttribute(d);e.attributeChangedCallback(d,f,g,c.attributeNamespace)}}}};window.CustomElementsRegistry=e;e.prototype.define=e.prototype.define;e.prototype.get=e.prototype.get;e.prototype.whenDefined=e.prototype.whenDefined;e.prototype.flush=e.prototype.flush;
    e.prototype.polyfilled=e.prototype.polyfilled;e.prototype.enableFlush=e.prototype.enableFlush;var k=h.HTMLElement;h.HTMLElement=function(){var a=h.customElements;if(a._newInstance){var b=a._newInstance;a._newInstance=null;return b}if(this.constructor)return a=a._constructors.get(this.constructor),g._createElement(a,!1);throw Error("unknown constructor. Did you call customElements.define()?");};h.HTMLElement.prototype=Object.create(k.prototype);Object.defineProperty(h.HTMLElement.prototype,"constructor",
    {value:h.HTMLElement});for(var k="Button Canvas Data Head Mod TableCell TableCol Anchor Area Base Body BR DataList Details Dialog Div DList Embed FieldSet Form Heading HR Html IFrame Image Input Keygen Label Legend LI Link Map Media Menu MenuItem Meta Meter Object OList OptGroup Option Output Paragraph Param Picture Pre Progress Quote Script Select Slot Source Span Style TableCaption Table TableRow TableSection Template TextArea Time Title Track UList Unknown".split(" "),l=0;l<k.length;l++){var n=
    window["HTML"+k[l]+"Element"];n&&(n.prototype.__proto__=h.HTMLElement.prototype)}var t=g.createElement;g._createElement=function(a,b){var c=h.customElements,d=t.call(g,a),e=c._definitions.get(a.toLowerCase());e&&c._upgradeElement(d,e,b);c._observeRoot(d);return d};g.createElement=function(a){return g._createElement(a,!0)};var u=g.createElementNS;g.createElementNS=function(a,b){return"http://www.w3.org/1999/xhtml"===a?g.createElement(b):u.call(document,a,b)};var p=Element.prototype.attachShadow;p&&
    Object.defineProperty(Element.prototype,"attachShadow",{value:function(a){a=p.call(this,a);h.customElements._observeRoot(a);return a}});window.customElements=new e})();

    (function () {
    var origHTMLElement = HTMLElement;
    window.HTMLElement = function () {
    // prefer new.target for elements that call super() constructors or
    // Reflect.construct directly
    var newTarget = new.target || this.constructor;
    return Reflect.construct(origHTMLElement, [], newTarget);
    };
    HTMLElement.prototype = Object.create(origHTMLElement);
    Object.defineProperty(HTMLElement.prototype, 'constructor', { value: HTMLElement });
    // TODO: patch all native subclasses of HTMLElement
    })();
    'use strict';(function(){function q(a){return l.test(a)&&-1===r.indexOf(a)}function e(){this.a=new Map;this.l=new Map;this.o=new Map;this.m=new Set;this.D=new MutationObserver(this.F.bind(this));this.f=null;this.L=!0;this.h=!1;this.g(document)}var g=document,f=window,r="annotation-xml color-profile font-face font-face-src font-face-uri font-face-format font-face-name missing-glyph".split(" "),l=/^[a-z][.0-9_a-z]*-[\-.0-9_a-z]*$/;e.prototype={J:function(a,b){function c(a){var b=m[a];if(void 0!==b&&
    "function"!==typeof b)throw Error(d+" '"+a+"' is not a Function");return b}a=a.toString().toLowerCase();if("function"!==typeof b)throw new TypeError("constructor must be a Constructor");if(!q(a))throw new SyntaxError("The element name '"+a+"' is not valid.");if(this.a.has(a))throw Error("An element with name '"+a+"' is already defined");if(this.l.has(b))throw Error("Definition failed for '"+a+"': The constructor is already used.");var d=a,m=b.prototype;if("object"!==typeof m)throw new TypeError("Definition failed for '"+
    a+"': constructor.prototype must be an object");var e=c("connectedCallback"),f=c("disconnectedCallback"),h=c("attributeChangedCallback");this.a.set(d,{name:a,localName:d,constructor:b,w:e,A:f,v:h,K:b.observedAttributes||[]});this.l.set(b,d);this.b(g.childNodes);if(e=this.o.get(d))e.resolve(void 0),this.o.delete(d)},get:function(a){return(a=this.a.get(a))?a.constructor:void 0},M:function(a){if(!l.test(a))return Promise.reject(new SyntaxError("The element name '"+a+"' is not valid."));if(this.a.has(a))return Promise.resolve();
    var b={B:null};b.B=new Promise(function(a){b.resolve=a});this.o.set(a,b);return b.B},C:function(){this.h&&(console.warn("flush!!!"),this.m.forEach(function(a){this.s(a.takeRecords())},this))},H:function(a){this.f=a},g:function(a){a.c=new MutationObserver(this.s.bind(this));a.c.observe(a,{childList:!0,subtree:!0});this.h&&this.m.add(a.c)},I:function(a){a.c&&(a.c.disconnect(),a.c=null,this.h&&this.m.delete(a.c))},s:function(a){for(var b=0;b<a.length;b++){var c=a[b];"childList"===c.type&&(this.b(c.addedNodes),
    this.G(c.removedNodes))}},b:function(a){for(var b=0;b<a.length;b++){var c=a[b];if(c.nodeType===Node.ELEMENT_NODE){this.I(c);c=g.createTreeWalker(c,NodeFilter.SHOW_ELEMENT,null,!1);do{var d=c.currentNode,e=this.a.get(d.localName);e&&(d.j||this.u(d,e,!0),d.j&&!d.i&&(d.i=!0,e&&e.w&&e.w.call(d)));d.shadowRoot&&this.b(d.shadowRoot.childNodes);if("LINK"===d.tagName){var f=function(){var a=d;return function(){a.removeEventListener("load",f);this.g(a.import);this.b(a.import.childNodes)}.bind(this)}.call(this);
    d.import?f():d.addEventListener("load",f)}}while(c.nextNode())}}},G:function(a){for(var b=0;b<a.length;b++){var c=a[b];if(c.nodeType===Node.ELEMENT_NODE){this.g(c);c=g.createTreeWalker(c,NodeFilter.SHOW_ELEMENT,null,!1);do{var d=c.currentNode;if(d.j&&d.i){d.i=!1;var e=this.a.get(d.localName);e&&e.A&&e.A.call(d)}}while(c.nextNode())}}},u:function(a,b,c){a.__proto__=b.constructor.prototype;c&&(this.H(a),a.j=!0,new b.constructor,console.assert(null==this.f));c=b.K;if(b.v&&0<c.length)for(this.D.observe(a,
    {attributes:!0,attributeOldValue:!0,attributeFilter:c}),b=0;b<c.length;b++){var d=c[b];if(a.hasAttribute(d)){var e=a.getAttribute(d);a.v(d,null,e)}}},F:function(a){for(var b=0;b<a.length;b++){var c=a[b];if("attributes"===c.type){var d=c.attributeName,e=c.oldValue,f=c.target,g=f.getAttribute(d);f.attributeChangedCallback(d,e,g,c.attributeNamespace)}}}};window.CustomElementsRegistry=e;e.prototype.define=e.prototype.J;e.prototype.get=e.prototype.get;e.prototype.whenDefined=e.prototype.M;e.prototype.flush=
    e.prototype.C;e.prototype.polyfilled=e.prototype.L;e.prototype.enableFlush=e.prototype.h;var h=f.HTMLElement;f.HTMLElement=function(){var a=f.customElements;if(a.f){var b=a.f;a.f=null;return b}if(this.constructor)return a=a.l.get(this.constructor),g.b(a,!1);throw Error("unknown constructor. Did you call customElements.define()?");};f.HTMLElement.prototype=Object.create(h.prototype);Object.defineProperty(f.HTMLElement.prototype,"constructor",{value:f.HTMLElement});for(var h="Button Canvas Data Head Mod TableCell TableCol Anchor Area Base Body BR DataList Details Dialog Div DList Embed FieldSet Form Heading HR Html IFrame Image Input Keygen Label Legend LI Link Map Media Menu MenuItem Meta Meter Object OList OptGroup Option Output Paragraph Param Picture Pre Progress Quote Script Select Slot Source Span Style TableCaption Table TableRow TableSection Template TextArea Time Title Track UList Unknown".split(" "),
    k=0;k<h.length;k++){var n=window["HTML"+h[k]+"Element"];n&&(n.prototype.__proto__=f.HTMLElement.prototype)}var t=g.createElement;g.b=function(a,b){var c=f.customElements,d=t.call(g,a),e=c.a.get(a.toLowerCase());e&&c.u(d,e,b);c.g(d);return d};g.createElement=function(a){return g.b(a,!0)};var u=g.createElementNS;g.createElementNS=function(a,b){return"http://www.w3.org/1999/xhtml"===a?g.createElement(b):u.call(document,a,b)};var p=Element.prototype.attachShadow;p&&Object.defineProperty(Element.prototype,
    "attachShadow",{value:function(a){a=p.call(this,a);f.customElements.g(a);return a}});window.customElements=new e})();
    }).call(this)
    }

    if (!!!window.customElements) {
    execPolyfill();
    }
    </script>

    <style>
    @@ -98,6 +90,8 @@ <h2 slot="title">Tab 3</h2>
    super(); // always call super() first in the ctor.

    // Create shadow DOM for the component.
    console.log(this);

    let shadowRoot = this.attachShadow({mode: 'open'});
    shadowRoot.innerHTML = `
    <style>
  14. @ebidel ebidel revised this gist Aug 3, 2016. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion fancy-tabs-demo.html
    View file
    Original file line number Diff line number Diff line change
    @@ -73,7 +73,7 @@ <h2 slot="title">Tab 3</h2>
    'use strict';

    // Feature detect
    if (!(window.customElements && HTMLElement.prototype.attachShadow)) {
    if (!(window.customElements && document.body.attachShadow)) {
    document.querySelector('fancy-tabs').innerHTML = "<b>Your browser doesn't support Shadow DOM and Custom Elements v1.</b>";
    return;
    }
  15. @ebidel ebidel revised this gist Aug 3, 2016. 1 changed file with 13 additions and 14 deletions.
    27 changes: 13 additions & 14 deletions fancy-tabs-demo.html
    View file
    Original file line number Diff line number Diff line change
    @@ -8,20 +8,6 @@
    subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
    */
    // CustomElements.js v1 polyfill from https://github.com/webcomponents/webcomponentsjs/tree/v1/src/CustomElements/v1.

    (function () {
    var origHTMLElement = HTMLElement;
    window.HTMLElement = function () {
    // prefer new.target for elements that call super() constructors or
    // Reflect.construct directly
    var newTarget = new.target || this.constructor;
    return Reflect.construct(origHTMLElement, [], newTarget);
    };
    HTMLElement.prototype = Object.create(origHTMLElement);
    Object.defineProperty(HTMLElement.prototype, 'constructor', { value: HTMLElement });
    // TODO: patch all native subclasses of HTMLElement
    })();

    var CustomElementDefinition;
    (function(){function q(a){return m.test(a)&&-1===r.indexOf(a)}function e(){this._definitions=new Map;this._constructors=new Map;this._whenDefinedMap=new Map;this._observers=new Set;this._attributeObserver=new MutationObserver(this._handleAttributeChange.bind(this));this._newInstance=null;this.polyfilled=!0;this.enableFlush=!1;this._observeRoot(document)}var g=document,h=window,r="annotation-xml color-profile font-face font-face-src font-face-uri font-face-format font-face-name missing-glyph".split(" "),m=
    /^[a-z][.0-9_a-z]*-[\-.0-9_a-z]*$/;e.prototype={define:function(a,b,c){function d(a){var b=e[a];if(void 0!==b&&"function"!==typeof b)throw Error(f+" '"+a+"' is not a Function");return b}a=a.toString().toLowerCase();if("function"!==typeof b)throw new TypeError("constructor must be a Constructor");if(!q(a))throw new SyntaxError("The element name '"+a+"' is not valid.");if(this._definitions.has(a))throw Error("An element with name '"+a+"' is already defined");if(this._constructors.has(b))throw Error("Definition failed for '"+
    @@ -36,6 +22,19 @@
    {value:h.HTMLElement});for(var k="Button Canvas Data Head Mod TableCell TableCol Anchor Area Base Body BR DataList Details Dialog Div DList Embed FieldSet Form Heading HR Html IFrame Image Input Keygen Label Legend LI Link Map Media Menu MenuItem Meta Meter Object OList OptGroup Option Output Paragraph Param Picture Pre Progress Quote Script Select Slot Source Span Style TableCaption Table TableRow TableSection Template TextArea Time Title Track UList Unknown".split(" "),l=0;l<k.length;l++){var n=
    window["HTML"+k[l]+"Element"];n&&(n.prototype.__proto__=h.HTMLElement.prototype)}var t=g.createElement;g._createElement=function(a,b){var c=h.customElements,d=t.call(g,a),e=c._definitions.get(a.toLowerCase());e&&c._upgradeElement(d,e,b);c._observeRoot(d);return d};g.createElement=function(a){return g._createElement(a,!0)};var u=g.createElementNS;g.createElementNS=function(a,b){return"http://www.w3.org/1999/xhtml"===a?g.createElement(b):u.call(document,a,b)};var p=Element.prototype.attachShadow;p&&
    Object.defineProperty(Element.prototype,"attachShadow",{value:function(a){a=p.call(this,a);h.customElements._observeRoot(a);return a}});window.customElements=new e})();

    (function () {
    var origHTMLElement = HTMLElement;
    window.HTMLElement = function () {
    // prefer new.target for elements that call super() constructors or
    // Reflect.construct directly
    var newTarget = new.target || this.constructor;
    return Reflect.construct(origHTMLElement, [], newTarget);
    };
    HTMLElement.prototype = Object.create(origHTMLElement);
    Object.defineProperty(HTMLElement.prototype, 'constructor', { value: HTMLElement });
    // TODO: patch all native subclasses of HTMLElement
    })();
    </script>

    <style>
  16. @ebidel ebidel revised this gist Aug 3, 2016. 1 changed file with 14 additions and 0 deletions.
    14 changes: 14 additions & 0 deletions fancy-tabs-demo.html
    View file
    Original file line number Diff line number Diff line change
    @@ -8,6 +8,20 @@
    subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
    */
    // CustomElements.js v1 polyfill from https://github.com/webcomponents/webcomponentsjs/tree/v1/src/CustomElements/v1.

    (function () {
    var origHTMLElement = HTMLElement;
    window.HTMLElement = function () {
    // prefer new.target for elements that call super() constructors or
    // Reflect.construct directly
    var newTarget = new.target || this.constructor;
    return Reflect.construct(origHTMLElement, [], newTarget);
    };
    HTMLElement.prototype = Object.create(origHTMLElement);
    Object.defineProperty(HTMLElement.prototype, 'constructor', { value: HTMLElement });
    // TODO: patch all native subclasses of HTMLElement
    })();

    var CustomElementDefinition;
    (function(){function q(a){return m.test(a)&&-1===r.indexOf(a)}function e(){this._definitions=new Map;this._constructors=new Map;this._whenDefinedMap=new Map;this._observers=new Set;this._attributeObserver=new MutationObserver(this._handleAttributeChange.bind(this));this._newInstance=null;this.polyfilled=!0;this.enableFlush=!1;this._observeRoot(document)}var g=document,h=window,r="annotation-xml color-profile font-face font-face-src font-face-uri font-face-format font-face-name missing-glyph".split(" "),m=
    /^[a-z][.0-9_a-z]*-[\-.0-9_a-z]*$/;e.prototype={define:function(a,b,c){function d(a){var b=e[a];if(void 0!==b&&"function"!==typeof b)throw Error(f+" '"+a+"' is not a Function");return b}a=a.toString().toLowerCase();if("function"!==typeof b)throw new TypeError("constructor must be a Constructor");if(!q(a))throw new SyntaxError("The element name '"+a+"' is not valid.");if(this._definitions.has(a))throw Error("An element with name '"+a+"' is already defined");if(this._constructors.has(b))throw Error("Definition failed for '"+
  17. @ebidel ebidel revised this gist Aug 3, 2016. 1 changed file with 23 additions and 12 deletions.
    35 changes: 23 additions & 12 deletions fancy-tabs-demo.html
    View file
    Original file line number Diff line number Diff line change
    @@ -1,16 +1,27 @@
    <script>
    /**
    * @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
    */
    // @version 0.7.21-b77ca74
    // From https://github.com/webcomponents/webcomponentsjs/tree/v1
    "undefined"==typeof WeakMap&&!function(){var e=Object.defineProperty,t=Date.now()%1e9,n=function(){this.name="__st"+(1e9*Math.random()>>>0)+(t++ +"__")};n.prototype={set:function(t,n){var o=t[this.name];return o&&o[0]===t?o[1]=n:e(t,this.name,{value:[t,n],writable:!0}),this},get:function(e){var t;return(t=e[this.name])&&t[0]===e?t[1]:void 0},"delete":function(e){var t=e[this.name];return t&&t[0]===e?(t[0]=t[1]=void 0,!0):!1},has:function(e){var t=e[this.name];return t?t[0]===e:!1}},window.WeakMap=n}(),function(e){function t(e){E.push(e),b||(b=!0,w(o))}function n(e){return window.ShadowDOMPolyfill&&window.ShadowDOMPolyfill.wrapIfNeeded(e)||e}function o(){b=!1;var e=E;E=[],e.sort(function(e,t){return e.uid_-t.uid_});var t=!1;e.forEach(function(e){var n=e.takeRecords();r(e),n.length&&(e.callback_(n,e),t=!0)}),t&&o()}function r(e){e.nodes_.forEach(function(t){var n=v.get(t);n&&n.forEach(function(t){t.observer===e&&t.removeTransientObservers()})})}function i(e,t){for(var n=e;n;n=n.parentNode){var o=v.get(n);if(o)for(var r=0;r<o.length;r++){var i=o[r],a=i.options;if(n===e||a.subtree){var d=t(a);d&&i.enqueue(d)}}}}function a(e){this.callback_=e,this.nodes_=[],this.records_=[],this.uid_=++_}function d(e,t){this.type=e,this.target=t,this.addedNodes=[],this.removedNodes=[],this.previousSibling=null,this.nextSibling=null,this.attributeName=null,this.attributeNamespace=null,this.oldValue=null}function s(e){var t=new d(e.type,e.target);return t.addedNodes=e.addedNodes.slice(),t.removedNodes=e.removedNodes.slice(),t.previousSibling=e.previousSibling,t.nextSibling=e.nextSibling,t.attributeName=e.attributeName,t.attributeNamespace=e.attributeNamespace,t.oldValue=e.oldValue,t}function u(e,t){return y=new d(e,t)}function c(e){return N?N:(N=s(y),N.oldValue=e,N)}function l(){y=N=void 0}function f(e){return e===N||e===y}function m(e,t){return e===t?e:N&&f(e)?N:null}function p(e,t,n){this.observer=e,this.target=t,this.options=n,this.transientObservedNodes=[]}if(!e.JsMutationObserver){var w,v=new WeakMap;if(/Trident|Edge/.test(navigator.userAgent))w=setTimeout;else if(window.setImmediate)w=window.setImmediate;else{var h=[],g=String(Math.random());window.addEventListener("message",function(e){if(e.data===g){var t=h;h=[],t.forEach(function(e){e()})}}),w=function(e){h.push(e),window.postMessage(g,"*")}}var b=!1,E=[],_=0;a.prototype={observe:function(e,t){if(e=n(e),!t.childList&&!t.attributes&&!t.characterData||t.attributeOldValue&&!t.attributes||t.attributeFilter&&t.attributeFilter.length&&!t.attributes||t.characterDataOldValue&&!t.characterData)throw new SyntaxError;var o=v.get(e);o||v.set(e,o=[]);for(var r,i=0;i<o.length;i++)if(o[i].observer===this){r=o[i],r.removeListeners(),r.options=t;break}r||(r=new p(this,e,t),o.push(r),this.nodes_.push(e)),r.addListeners()},disconnect:function(){this.nodes_.forEach(function(e){for(var t=v.get(e),n=0;n<t.length;n++){var o=t[n];if(o.observer===this){o.removeListeners(),t.splice(n,1);break}}},this),this.records_=[]},takeRecords:function(){var e=this.records_;return this.records_=[],e}};var y,N;p.prototype={enqueue:function(e){var n=this.observer.records_,o=n.length;if(n.length>0){var r=n[o-1],i=m(r,e);if(i)return void(n[o-1]=i)}else t(this.observer);n[o]=e},addListeners:function(){this.addListeners_(this.target)},addListeners_:function(e){var t=this.options;t.attributes&&e.addEventListener("DOMAttrModified",this,!0),t.characterData&&e.addEventListener("DOMCharacterDataModified",this,!0),t.childList&&e.addEventListener("DOMNodeInserted",this,!0),(t.childList||t.subtree)&&e.addEventListener("DOMNodeRemoved",this,!0)},removeListeners:function(){this.removeListeners_(this.target)},removeListeners_:function(e){var t=this.options;t.attributes&&e.removeEventListener("DOMAttrModified",this,!0),t.characterData&&e.removeEventListener("DOMCharacterDataModified",this,!0),t.childList&&e.removeEventListener("DOMNodeInserted",this,!0),(t.childList||t.subtree)&&e.removeEventListener("DOMNodeRemoved",this,!0)},addTransientObserver:function(e){if(e!==this.target){this.addListeners_(e),this.transientObservedNodes.push(e);var t=v.get(e);t||v.set(e,t=[]),t.push(this)}},removeTransientObservers:function(){var e=this.transientObservedNodes;this.transientObservedNodes=[],e.forEach(function(e){this.removeListeners_(e);for(var t=v.get(e),n=0;n<t.length;n++)if(t[n]===this){t.splice(n,1);break}},this)},handleEvent:function(e){switch(e.stopImmediatePropagation(),e.type){case"DOMAttrModified":var t=e.attrName,n=e.relatedNode.namespaceURI,o=e.target,r=new u("attributes",o);r.attributeName=t,r.attributeNamespace=n;var a=e.attrChange===MutationEvent.ADDITION?null:e.prevValue;i(o,function(e){return!e.attributes||e.attributeFilter&&e.attributeFilter.length&&-1===e.attributeFilter.indexOf(t)&&-1===e.attributeFilter.indexOf(n)?void 0:e.attributeOldValue?c(a):r});break;case"DOMCharacterDataModified":var o=e.target,r=u("characterData",o),a=e.prevValue;i(o,function(e){return e.characterData?e.characterDataOldValue?c(a):r:void 0});break;case"DOMNodeRemoved":this.addTransientObserver(e.target);case"DOMNodeInserted":var d,s,f=e.target;"DOMNodeInserted"===e.type?(d=[f],s=[]):(d=[],s=[f]);var m=f.previousSibling,p=f.nextSibling,r=u("childList",e.target.parentNode);r.addedNodes=d,r.removedNodes=s,r.previousSibling=m,r.nextSibling=p,i(e.relatedNode,function(e){return e.childList?r:void 0})}l()}},e.JsMutationObserver=a,e.MutationObserver||(e.MutationObserver=a,a._isPolyfilled=!0)}}(self),function(e){"use strict";if(!window.performance){var t=Date.now();window.performance={now:function(){return Date.now()-t}}}window.requestAnimationFrame||(window.requestAnimationFrame=function(){var e=window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame;return e?function(t){return e(function(){t(performance.now())})}:function(e){return window.setTimeout(e,1e3/60)}}()),window.cancelAnimationFrame||(window.cancelAnimationFrame=function(){return window.webkitCancelAnimationFrame||window.mozCancelAnimationFrame||function(e){clearTimeout(e)}}());var n=function(){var e=document.createEvent("Event");return e.initEvent("foo",!0,!0),e.preventDefault(),e.defaultPrevented}();if(!n){var o=Event.prototype.preventDefault;Event.prototype.preventDefault=function(){this.cancelable&&(o.call(this),Object.defineProperty(this,"defaultPrevented",{get:function(){return!0},configurable:!0}))}}var r=/Trident/.test(navigator.userAgent);if((!window.CustomEvent||r&&"function"!=typeof window.CustomEvent)&&(window.CustomEvent=function(e,t){t=t||{};var n=document.createEvent("CustomEvent");return n.initCustomEvent(e,Boolean(t.bubbles),Boolean(t.cancelable),t.detail),n},window.CustomEvent.prototype=window.Event.prototype),!window.Event||r&&"function"!=typeof window.Event){var i=window.Event;window.Event=function(e,t){t=t||{};var n=document.createEvent("Event");return n.initEvent(e,Boolean(t.bubbles),Boolean(t.cancelable)),n},window.Event.prototype=i.prototype}}(window.WebComponents),window.CustomElements=window.CustomElements||{flags:{}},function(e){var t=e.flags,n=[],o=function(e){n.push(e)},r=function(){n.forEach(function(t){t(e)})};e.addModule=o,e.initializeModules=r,e.hasNative=Boolean(document.registerElement),e.isIE=/Trident/.test(navigator.userAgent),e.useNative=!t.register&&e.hasNative&&!window.ShadowDOMPolyfill&&(!window.HTMLImports||window.HTMLImports.useNative)}(window.CustomElements),window.CustomElements.addModule(function(e){function t(e,t){n(e,function(e){return t(e)?!0:void o(e,t)}),o(e,t)}function n(e,t,o){var r=e.firstElementChild;if(!r)for(r=e.firstChild;r&&r.nodeType!==Node.ELEMENT_NODE;)r=r.nextSibling;for(;r;)t(r,o)!==!0&&n(r,t,o),r=r.nextElementSibling;return null}function o(e,n){for(var o=e.shadowRoot;o;)t(o,n),o=o.olderShadowRoot}function r(e,t){i(e,t,[])}function i(e,t,n){if(e=window.wrap(e),!(n.indexOf(e)>=0)){n.push(e);for(var o,r=e.querySelectorAll("link[rel="+a+"]"),d=0,s=r.length;s>d&&(o=r[d]);d++)o["import"]&&i(o["import"],t,n);t(e)}}var a=window.HTMLImports?window.HTMLImports.IMPORT_LINK_TYPE:"none";e.forDocumentTree=r,e.forSubtree=t}),window.CustomElements.addModule(function(e){function t(e,t){return n(e,t)||o(e,t)}function n(t,n){return e.upgrade(t,n)?!0:void(n&&a(t))}function o(e,t){b(e,function(e){return n(e,t)?!0:void 0})}function r(e){N.push(e),y||(y=!0,setTimeout(i))}function i(){y=!1;for(var e,t=N,n=0,o=t.length;o>n&&(e=t[n]);n++)e();N=[]}function a(e){_?r(function(){d(e)}):d(e)}function d(e){e.__upgraded__&&!e.__attached&&(e.__attached=!0,e.attachedCallback&&e.attachedCallback())}function s(e){u(e),b(e,function(e){u(e)})}function u(e){_?r(function(){c(e)}):c(e)}function c(e){e.__upgraded__&&e.__attached&&(e.__attached=!1,e.detachedCallback&&e.detachedCallback())}function l(e){for(var t=e,n=window.wrap(document);t;){if(t==n)return!0;t=t.parentNode||t.nodeType===Node.DOCUMENT_FRAGMENT_NODE&&t.host}}function f(e){if(e.shadowRoot&&!e.shadowRoot.__watched){g.dom&&console.log("watching shadow-root for: ",e.localName);for(var t=e.shadowRoot;t;)w(t),t=t.olderShadowRoot}}function m(e,n){if(g.dom){var o=n[0];if(o&&"childList"===o.type&&o.addedNodes&&o.addedNodes){for(var r=o.addedNodes[0];r&&r!==document&&!r.host;)r=r.parentNode;var i=r&&(r.URL||r._URL||r.host&&r.host.localName)||"";i=i.split("/?").shift().split("/").pop()}console.group("mutations (%d) [%s]",n.length,i||"")}var a=l(e);n.forEach(function(e){"childList"===e.type&&(M(e.addedNodes,function(e){e.localName&&t(e,a)}),M(e.removedNodes,function(e){e.localName&&s(e)}))}),g.dom&&console.groupEnd()}function p(e){for(e=window.wrap(e),e||(e=window.wrap(document));e.parentNode;)e=e.parentNode;var t=e.__observer;t&&(m(e,t.takeRecords()),i())}function w(e){if(!e.__observer){var t=new MutationObserver(m.bind(this,e));t.observe(e,{childList:!0,subtree:!0}),e.__observer=t}}function v(e){e=window.wrap(e),g.dom&&console.group("upgradeDocument: ",e.baseURI.split("/").pop());var n=e===window.wrap(document);t(e,n),w(e),g.dom&&console.groupEnd()}function h(e){E(e,v)}var g=e.flags,b=e.forSubtree,E=e.forDocumentTree,_=window.MutationObserver._isPolyfilled&&g["throttle-attached"];e.hasPolyfillMutations=_,e.hasThrottledAttached=_;var y=!1,N=[],M=Array.prototype.forEach.call.bind(Array.prototype.forEach),O=Element.prototype.createShadowRoot;O&&(Element.prototype.createShadowRoot=function(){var e=O.call(this);return window.CustomElements.watchShadow(this),e}),e.watchShadow=f,e.upgradeDocumentTree=h,e.upgradeDocument=v,e.upgradeSubtree=o,e.upgradeAll=t,e.attached=a,e.takeRecords=p}),window.CustomElements.addModule(function(e){function t(t,o){if("template"===t.localName&&window.HTMLTemplateElement&&HTMLTemplateElement.decorate&&HTMLTemplateElement.decorate(t),!t.__upgraded__&&t.nodeType===Node.ELEMENT_NODE){var r=t.getAttribute("is"),i=e.getRegisteredDefinition(t.localName)||e.getRegisteredDefinition(r);if(i&&(r&&i.tag==t.localName||!r&&!i["extends"]))return n(t,i,o)}}function n(t,n,r){return a.upgrade&&console.group("upgrade:",t.localName),n.is&&t.setAttribute("is",n.is),o(t,n),t.__upgraded__=!0,i(t),r&&e.attached(t),e.upgradeSubtree(t,r),a.upgrade&&console.groupEnd(),t}function o(e,t){Object.__proto__?e.__proto__=t.prototype:(r(e,t.prototype,t["native"]),e.__proto__=t.prototype)}function r(e,t,n){for(var o={},r=t;r!==n&&r!==HTMLElement.prototype;){for(var i,a=Object.getOwnPropertyNames(r),d=0;i=a[d];d++)o[i]||(Object.defineProperty(e,i,Object.getOwnPropertyDescriptor(r,i)),o[i]=1);r=Object.getPrototypeOf(r)}}function i(e){e.createdCallback&&e.createdCallback()}var a=e.flags;e.upgrade=t,e.upgradeWithDefinition=n,e.implementPrototype=o}),window.CustomElements.addModule(function(e){function t(t,o){var s=o||{};if(!t)throw new Error("document.registerElement: first argument `name` must not be empty");if(t.indexOf("-")<0)throw new Error("document.registerElement: first argument ('name') must contain a dash ('-'). Argument provided was '"+String(t)+"'.");if(r(t))throw new Error("Failed to execute 'registerElement' on 'Document': Registration failed for type '"+String(t)+"'. The type name is invalid.");if(u(t))throw new Error("DuplicateDefinitionError: a type with name '"+String(t)+"' is already registered");return s.prototype||(s.prototype=Object.create(HTMLElement.prototype)),s.__name=t.toLowerCase(),s.lifecycle=s.lifecycle||{},s.ancestry=i(s["extends"]),a(s),d(s),n(s.prototype),c(s.__name,s),s.ctor=l(s),s.ctor.prototype=s.prototype,s.prototype.constructor=s.ctor,e.ready&&h(document),s.ctor}function n(e){if(!e.setAttribute._polyfilled){var t=e.setAttribute;e.setAttribute=function(e,n){o.call(this,e,n,t)};var n=e.removeAttribute;e.removeAttribute=function(e){o.call(this,e,null,n)},e.setAttribute._polyfilled=!0}}function o(e,t,n){e=e.toLowerCase();var o=this.getAttribute(e);n.apply(this,arguments);var r=this.getAttribute(e);this.attributeChangedCallback&&r!==o&&this.attributeChangedCallback(e,o,r)}function r(e){for(var t=0;t<y.length;t++)if(e===y[t])return!0}function i(e){var t=u(e);return t?i(t["extends"]).concat([t]):[]}function a(e){for(var t,n=e["extends"],o=0;t=e.ancestry[o];o++)n=t.is&&t.tag;e.tag=n||e.__name,n&&(e.is=e.__name)}function d(e){if(!Object.__proto__){var t=HTMLElement.prototype;if(e.is){var n=document.createElement(e.tag);t=Object.getPrototypeOf(n)}for(var o,r=e.prototype,i=!1;r;)r==t&&(i=!0),o=Object.getPrototypeOf(r),o&&(r.__proto__=o),r=o;i||console.warn(e.tag+" prototype not found in prototype chain for "+e.is),e["native"]=t}}function s(e){return b(O(e.tag),e)}function u(e){return e?N[e.toLowerCase()]:void 0}function c(e,t){N[e]=t}function l(e){return function(){return s(e)}}function f(e,t,n){return e===M?m(t,n):D(e,t)}function m(e,t){e&&(e=e.toLowerCase()),t&&(t=t.toLowerCase());var n=u(t||e);if(n){if(e==n.tag&&t==n.is)return new n.ctor;if(!t&&!n.is)return new n.ctor}var o;return t?(o=m(e),o.setAttribute("is",t),o):(o=O(e),e.indexOf("-")>=0&&E(o,HTMLElement),o)}function p(e,t){var n=e[t];e[t]=function(){var e=n.apply(this,arguments);return g(e),e}}var w,v=e.isIE,h=e.upgradeDocumentTree,g=e.upgradeAll,b=e.upgradeWithDefinition,E=e.implementPrototype,_=e.useNative,y=["annotation-xml","color-profile","font-face","font-face-src","font-face-uri","font-face-format","font-face-name","missing-glyph"],N={},M="http://www.w3.org/1999/xhtml",O=document.createElement.bind(document),D=document.createElementNS.bind(document);w=Object.__proto__||_?function(e,t){return e instanceof t}:function(e,t){if(e instanceof t)return!0;for(var n=e;n;){if(n===t.prototype)return!0;n=n.__proto__}return!1},p(Node.prototype,"cloneNode"),p(document,"importNode"),v&&!function(){var e=document.importNode;document.importNode=function(){var t=e.apply(document,arguments);if(t.nodeType==t.DOCUMENT_FRAGMENT_NODE){var n=document.createDocumentFragment();return n.appendChild(t),n}return t}}(),document.registerElement=t,document.createElement=m,document.createElementNS=f,e.registry=N,e["instanceof"]=w,e.reservedTagList=y,e.getRegisteredDefinition=u,document.register=document.registerElement}),function(e){function t(){i(window.wrap(document)),window.CustomElements.ready=!0;var e=window.requestAnimationFrame||function(e){setTimeout(e,16)};e(function(){setTimeout(function(){window.CustomElements.readyTime=Date.now(),window.HTMLImports&&(window.CustomElements.elapsed=window.CustomElements.readyTime-window.HTMLImports.readyTime),document.dispatchEvent(new CustomEvent("WebComponentsReady",{bubbles:!0}))})})}var n=e.useNative,o=e.initializeModules;e.isIE;if(n){var r=function(){};e.watchShadow=r,e.upgrade=r,e.upgradeAll=r,e.upgradeDocumentTree=r,e.upgradeSubtree=r,e.takeRecords=r,e["instanceof"]=function(e,t){return e instanceof t}}else o();var i=e.upgradeDocumentTree,a=e.upgradeDocument;if(window.wrap||(window.ShadowDOMPolyfill?(window.wrap=window.ShadowDOMPolyfill.wrapIfNeeded,window.unwrap=window.ShadowDOMPolyfill.unwrapIfNeeded):window.wrap=window.unwrap=function(e){return e}),window.HTMLImports&&(window.HTMLImports.__importsParsingHook=function(e){e["import"]&&a(wrap(e["import"]))}),"complete"===document.readyState||e.flags.eager)t();else if("interactive"!==document.readyState||window.attachEvent||window.HTMLImports&&!window.HTMLImports.ready){var d=window.HTMLImports&&!window.HTMLImports.ready?"HTMLImportsLoaded":"DOMContentLoaded";window.addEventListener(d,t)}else t()}(window.CustomElements);
    /*
    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
    */
    // CustomElements.js v1 polyfill from https://github.com/webcomponents/webcomponentsjs/tree/v1/src/CustomElements/v1.
    var CustomElementDefinition;
    (function(){function q(a){return m.test(a)&&-1===r.indexOf(a)}function e(){this._definitions=new Map;this._constructors=new Map;this._whenDefinedMap=new Map;this._observers=new Set;this._attributeObserver=new MutationObserver(this._handleAttributeChange.bind(this));this._newInstance=null;this.polyfilled=!0;this.enableFlush=!1;this._observeRoot(document)}var g=document,h=window,r="annotation-xml color-profile font-face font-face-src font-face-uri font-face-format font-face-name missing-glyph".split(" "),m=
    /^[a-z][.0-9_a-z]*-[\-.0-9_a-z]*$/;e.prototype={define:function(a,b,c){function d(a){var b=e[a];if(void 0!==b&&"function"!==typeof b)throw Error(f+" '"+a+"' is not a Function");return b}a=a.toString().toLowerCase();if("function"!==typeof b)throw new TypeError("constructor must be a Constructor");if(!q(a))throw new SyntaxError("The element name '"+a+"' is not valid.");if(this._definitions.has(a))throw Error("An element with name '"+a+"' is already defined");if(this._constructors.has(b))throw Error("Definition failed for '"+
    a+"': The constructor is already used.");var f=a,e=b.prototype;if("object"!==typeof e)throw new TypeError("Definition failed for '"+a+"': constructor.prototype must be an object");c=d("connectedCallback");var h=d("disconnectedCallback"),k=d("attributeChangedCallback");this._definitions.set(f,{name:a,localName:f,constructor:b,connectedCallback:c,disconnectedCallback:h,attributeChangedCallback:k,observedAttributes:b.observedAttributes||[]});this._constructors.set(b,f);this._addNodes(g.childNodes);if(a=
    this._whenDefinedMap.get(f))a.resolve(void 0),this._whenDefinedMap["delete"](f)},get:function(a){return(a=this._definitions.get(a))?a.constructor:void 0},whenDefined:function(a){if(!m.test(a))return Promise.reject(new SyntaxError("The element name '"+a+"' is not valid."));if(this._definitions.has(a))return Promise.resolve();var b={promise:null};b.promise=new Promise(function(a,d){b.resolve=a});this._whenDefinedMap.set(a,b);return b.promise},flush:function(){this.enableFlush&&(console.warn("flush!!!"),
    this._observers.forEach(function(a){this._handleMutations(a.takeRecords())},this))},_setNewInstance:function(a){this._newInstance=a},_observeRoot:function(a){a.__observer=new MutationObserver(this._handleMutations.bind(this));a.__observer.observe(a,{childList:!0,subtree:!0});this.enableFlush&&this._observers.add(a.__observer)},_unobserveRoot:function(a){a.__observer&&(a.__observer.disconnect(),a.__observer=null,this.enableFlush&&this._observers["delete"](a.__observer))},_handleMutations:function(a){for(var b=
    0;b<a.length;b++){var c=a[b];"childList"===c.type&&(this._addNodes(c.addedNodes),this._removeNodes(c.removedNodes))}},_addNodes:function(a){for(var b=0;b<a.length;b++){var c=a[b];if(c.nodeType===Node.ELEMENT_NODE){this._unobserveRoot(c);c=g.createTreeWalker(c,NodeFilter.SHOW_ELEMENT,null,!1);do{var d=c.currentNode,f=this._definitions.get(d.localName);f&&(d.__upgraded||this._upgradeElement(d,f,!0),d.__upgraded&&!d.__attached&&(d.__attached=!0,f&&f.connectedCallback&&f.connectedCallback.call(d)));d.shadowRoot&&
    this._addNodes(d.shadowRoot.childNodes);if("LINK"===d.tagName){var e=function(){var a=d;return function(){a.removeEventListener("load",e);this._observeRoot(a["import"]);this._addNodes(a["import"].childNodes)}.bind(this)}.call(this);d["import"]?e():d.addEventListener("load",e)}}while(c.nextNode())}}},_removeNodes:function(a){for(var b=0;b<a.length;b++){var c=a[b];if(c.nodeType===Node.ELEMENT_NODE){this._observeRoot(c);c=g.createTreeWalker(c,NodeFilter.SHOW_ELEMENT,null,!1);do{var d=c.currentNode;if(d.__upgraded&&
    d.__attached){d.__attached=!1;var f=this._definitions.get(d.localName);f&&f.disconnectedCallback&&f.disconnectedCallback.call(d)}}while(c.nextNode())}}},_upgradeElement:function(a,b,c){a.__proto__=b.constructor.prototype;c&&(this._setNewInstance(a),a.__upgraded=!0,new b.constructor,console.assert(null==this._newInstance));c=b.observedAttributes;if(b.attributeChangedCallback&&0<c.length)for(this._attributeObserver.observe(a,{attributes:!0,attributeOldValue:!0,attributeFilter:c}),b=0;b<c.length;b++){var d=
    c[b];if(a.hasAttribute(d)){var f=a.getAttribute(d);a.attributeChangedCallback(d,null,f)}}},_handleAttributeChange:function(a){for(var b=0;b<a.length;b++){var c=a[b];if("attributes"===c.type){var d=c.attributeName,f=c.oldValue,e=c.target,g=e.getAttribute(d);e.attributeChangedCallback(d,f,g,c.attributeNamespace)}}}};window.CustomElementsRegistry=e;e.prototype.define=e.prototype.define;e.prototype.get=e.prototype.get;e.prototype.whenDefined=e.prototype.whenDefined;e.prototype.flush=e.prototype.flush;
    e.prototype.polyfilled=e.prototype.polyfilled;e.prototype.enableFlush=e.prototype.enableFlush;var k=h.HTMLElement;h.HTMLElement=function(){var a=h.customElements;if(a._newInstance){var b=a._newInstance;a._newInstance=null;return b}if(this.constructor)return a=a._constructors.get(this.constructor),g._createElement(a,!1);throw Error("unknown constructor. Did you call customElements.define()?");};h.HTMLElement.prototype=Object.create(k.prototype);Object.defineProperty(h.HTMLElement.prototype,"constructor",
    {value:h.HTMLElement});for(var k="Button Canvas Data Head Mod TableCell TableCol Anchor Area Base Body BR DataList Details Dialog Div DList Embed FieldSet Form Heading HR Html IFrame Image Input Keygen Label Legend LI Link Map Media Menu MenuItem Meta Meter Object OList OptGroup Option Output Paragraph Param Picture Pre Progress Quote Script Select Slot Source Span Style TableCaption Table TableRow TableSection Template TextArea Time Title Track UList Unknown".split(" "),l=0;l<k.length;l++){var n=
    window["HTML"+k[l]+"Element"];n&&(n.prototype.__proto__=h.HTMLElement.prototype)}var t=g.createElement;g._createElement=function(a,b){var c=h.customElements,d=t.call(g,a),e=c._definitions.get(a.toLowerCase());e&&c._upgradeElement(d,e,b);c._observeRoot(d);return d};g.createElement=function(a){return g._createElement(a,!0)};var u=g.createElementNS;g.createElementNS=function(a,b){return"http://www.w3.org/1999/xhtml"===a?g.createElement(b):u.call(document,a,b)};var p=Element.prototype.attachShadow;p&&
    Object.defineProperty(Element.prototype,"attachShadow",{value:function(a){a=p.call(this,a);h.customElements._observeRoot(a);return a}});window.customElements=new e})();
    </script>

    <style>
  18. @ebidel ebidel revised this gist Aug 3, 2016. 1 changed file with 15 additions and 0 deletions.
    15 changes: 15 additions & 0 deletions fancy-tabs-demo.html
    View file
    Original file line number Diff line number Diff line change
    @@ -1,3 +1,18 @@
    <script>
    /**
    * @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
    */
    // @version 0.7.21-b77ca74
    // From https://github.com/webcomponents/webcomponentsjs/tree/v1
    "undefined"==typeof WeakMap&&!function(){var e=Object.defineProperty,t=Date.now()%1e9,n=function(){this.name="__st"+(1e9*Math.random()>>>0)+(t++ +"__")};n.prototype={set:function(t,n){var o=t[this.name];return o&&o[0]===t?o[1]=n:e(t,this.name,{value:[t,n],writable:!0}),this},get:function(e){var t;return(t=e[this.name])&&t[0]===e?t[1]:void 0},"delete":function(e){var t=e[this.name];return t&&t[0]===e?(t[0]=t[1]=void 0,!0):!1},has:function(e){var t=e[this.name];return t?t[0]===e:!1}},window.WeakMap=n}(),function(e){function t(e){E.push(e),b||(b=!0,w(o))}function n(e){return window.ShadowDOMPolyfill&&window.ShadowDOMPolyfill.wrapIfNeeded(e)||e}function o(){b=!1;var e=E;E=[],e.sort(function(e,t){return e.uid_-t.uid_});var t=!1;e.forEach(function(e){var n=e.takeRecords();r(e),n.length&&(e.callback_(n,e),t=!0)}),t&&o()}function r(e){e.nodes_.forEach(function(t){var n=v.get(t);n&&n.forEach(function(t){t.observer===e&&t.removeTransientObservers()})})}function i(e,t){for(var n=e;n;n=n.parentNode){var o=v.get(n);if(o)for(var r=0;r<o.length;r++){var i=o[r],a=i.options;if(n===e||a.subtree){var d=t(a);d&&i.enqueue(d)}}}}function a(e){this.callback_=e,this.nodes_=[],this.records_=[],this.uid_=++_}function d(e,t){this.type=e,this.target=t,this.addedNodes=[],this.removedNodes=[],this.previousSibling=null,this.nextSibling=null,this.attributeName=null,this.attributeNamespace=null,this.oldValue=null}function s(e){var t=new d(e.type,e.target);return t.addedNodes=e.addedNodes.slice(),t.removedNodes=e.removedNodes.slice(),t.previousSibling=e.previousSibling,t.nextSibling=e.nextSibling,t.attributeName=e.attributeName,t.attributeNamespace=e.attributeNamespace,t.oldValue=e.oldValue,t}function u(e,t){return y=new d(e,t)}function c(e){return N?N:(N=s(y),N.oldValue=e,N)}function l(){y=N=void 0}function f(e){return e===N||e===y}function m(e,t){return e===t?e:N&&f(e)?N:null}function p(e,t,n){this.observer=e,this.target=t,this.options=n,this.transientObservedNodes=[]}if(!e.JsMutationObserver){var w,v=new WeakMap;if(/Trident|Edge/.test(navigator.userAgent))w=setTimeout;else if(window.setImmediate)w=window.setImmediate;else{var h=[],g=String(Math.random());window.addEventListener("message",function(e){if(e.data===g){var t=h;h=[],t.forEach(function(e){e()})}}),w=function(e){h.push(e),window.postMessage(g,"*")}}var b=!1,E=[],_=0;a.prototype={observe:function(e,t){if(e=n(e),!t.childList&&!t.attributes&&!t.characterData||t.attributeOldValue&&!t.attributes||t.attributeFilter&&t.attributeFilter.length&&!t.attributes||t.characterDataOldValue&&!t.characterData)throw new SyntaxError;var o=v.get(e);o||v.set(e,o=[]);for(var r,i=0;i<o.length;i++)if(o[i].observer===this){r=o[i],r.removeListeners(),r.options=t;break}r||(r=new p(this,e,t),o.push(r),this.nodes_.push(e)),r.addListeners()},disconnect:function(){this.nodes_.forEach(function(e){for(var t=v.get(e),n=0;n<t.length;n++){var o=t[n];if(o.observer===this){o.removeListeners(),t.splice(n,1);break}}},this),this.records_=[]},takeRecords:function(){var e=this.records_;return this.records_=[],e}};var y,N;p.prototype={enqueue:function(e){var n=this.observer.records_,o=n.length;if(n.length>0){var r=n[o-1],i=m(r,e);if(i)return void(n[o-1]=i)}else t(this.observer);n[o]=e},addListeners:function(){this.addListeners_(this.target)},addListeners_:function(e){var t=this.options;t.attributes&&e.addEventListener("DOMAttrModified",this,!0),t.characterData&&e.addEventListener("DOMCharacterDataModified",this,!0),t.childList&&e.addEventListener("DOMNodeInserted",this,!0),(t.childList||t.subtree)&&e.addEventListener("DOMNodeRemoved",this,!0)},removeListeners:function(){this.removeListeners_(this.target)},removeListeners_:function(e){var t=this.options;t.attributes&&e.removeEventListener("DOMAttrModified",this,!0),t.characterData&&e.removeEventListener("DOMCharacterDataModified",this,!0),t.childList&&e.removeEventListener("DOMNodeInserted",this,!0),(t.childList||t.subtree)&&e.removeEventListener("DOMNodeRemoved",this,!0)},addTransientObserver:function(e){if(e!==this.target){this.addListeners_(e),this.transientObservedNodes.push(e);var t=v.get(e);t||v.set(e,t=[]),t.push(this)}},removeTransientObservers:function(){var e=this.transientObservedNodes;this.transientObservedNodes=[],e.forEach(function(e){this.removeListeners_(e);for(var t=v.get(e),n=0;n<t.length;n++)if(t[n]===this){t.splice(n,1);break}},this)},handleEvent:function(e){switch(e.stopImmediatePropagation(),e.type){case"DOMAttrModified":var t=e.attrName,n=e.relatedNode.namespaceURI,o=e.target,r=new u("attributes",o);r.attributeName=t,r.attributeNamespace=n;var a=e.attrChange===MutationEvent.ADDITION?null:e.prevValue;i(o,function(e){return!e.attributes||e.attributeFilter&&e.attributeFilter.length&&-1===e.attributeFilter.indexOf(t)&&-1===e.attributeFilter.indexOf(n)?void 0:e.attributeOldValue?c(a):r});break;case"DOMCharacterDataModified":var o=e.target,r=u("characterData",o),a=e.prevValue;i(o,function(e){return e.characterData?e.characterDataOldValue?c(a):r:void 0});break;case"DOMNodeRemoved":this.addTransientObserver(e.target);case"DOMNodeInserted":var d,s,f=e.target;"DOMNodeInserted"===e.type?(d=[f],s=[]):(d=[],s=[f]);var m=f.previousSibling,p=f.nextSibling,r=u("childList",e.target.parentNode);r.addedNodes=d,r.removedNodes=s,r.previousSibling=m,r.nextSibling=p,i(e.relatedNode,function(e){return e.childList?r:void 0})}l()}},e.JsMutationObserver=a,e.MutationObserver||(e.MutationObserver=a,a._isPolyfilled=!0)}}(self),function(e){"use strict";if(!window.performance){var t=Date.now();window.performance={now:function(){return Date.now()-t}}}window.requestAnimationFrame||(window.requestAnimationFrame=function(){var e=window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame;return e?function(t){return e(function(){t(performance.now())})}:function(e){return window.setTimeout(e,1e3/60)}}()),window.cancelAnimationFrame||(window.cancelAnimationFrame=function(){return window.webkitCancelAnimationFrame||window.mozCancelAnimationFrame||function(e){clearTimeout(e)}}());var n=function(){var e=document.createEvent("Event");return e.initEvent("foo",!0,!0),e.preventDefault(),e.defaultPrevented}();if(!n){var o=Event.prototype.preventDefault;Event.prototype.preventDefault=function(){this.cancelable&&(o.call(this),Object.defineProperty(this,"defaultPrevented",{get:function(){return!0},configurable:!0}))}}var r=/Trident/.test(navigator.userAgent);if((!window.CustomEvent||r&&"function"!=typeof window.CustomEvent)&&(window.CustomEvent=function(e,t){t=t||{};var n=document.createEvent("CustomEvent");return n.initCustomEvent(e,Boolean(t.bubbles),Boolean(t.cancelable),t.detail),n},window.CustomEvent.prototype=window.Event.prototype),!window.Event||r&&"function"!=typeof window.Event){var i=window.Event;window.Event=function(e,t){t=t||{};var n=document.createEvent("Event");return n.initEvent(e,Boolean(t.bubbles),Boolean(t.cancelable)),n},window.Event.prototype=i.prototype}}(window.WebComponents),window.CustomElements=window.CustomElements||{flags:{}},function(e){var t=e.flags,n=[],o=function(e){n.push(e)},r=function(){n.forEach(function(t){t(e)})};e.addModule=o,e.initializeModules=r,e.hasNative=Boolean(document.registerElement),e.isIE=/Trident/.test(navigator.userAgent),e.useNative=!t.register&&e.hasNative&&!window.ShadowDOMPolyfill&&(!window.HTMLImports||window.HTMLImports.useNative)}(window.CustomElements),window.CustomElements.addModule(function(e){function t(e,t){n(e,function(e){return t(e)?!0:void o(e,t)}),o(e,t)}function n(e,t,o){var r=e.firstElementChild;if(!r)for(r=e.firstChild;r&&r.nodeType!==Node.ELEMENT_NODE;)r=r.nextSibling;for(;r;)t(r,o)!==!0&&n(r,t,o),r=r.nextElementSibling;return null}function o(e,n){for(var o=e.shadowRoot;o;)t(o,n),o=o.olderShadowRoot}function r(e,t){i(e,t,[])}function i(e,t,n){if(e=window.wrap(e),!(n.indexOf(e)>=0)){n.push(e);for(var o,r=e.querySelectorAll("link[rel="+a+"]"),d=0,s=r.length;s>d&&(o=r[d]);d++)o["import"]&&i(o["import"],t,n);t(e)}}var a=window.HTMLImports?window.HTMLImports.IMPORT_LINK_TYPE:"none";e.forDocumentTree=r,e.forSubtree=t}),window.CustomElements.addModule(function(e){function t(e,t){return n(e,t)||o(e,t)}function n(t,n){return e.upgrade(t,n)?!0:void(n&&a(t))}function o(e,t){b(e,function(e){return n(e,t)?!0:void 0})}function r(e){N.push(e),y||(y=!0,setTimeout(i))}function i(){y=!1;for(var e,t=N,n=0,o=t.length;o>n&&(e=t[n]);n++)e();N=[]}function a(e){_?r(function(){d(e)}):d(e)}function d(e){e.__upgraded__&&!e.__attached&&(e.__attached=!0,e.attachedCallback&&e.attachedCallback())}function s(e){u(e),b(e,function(e){u(e)})}function u(e){_?r(function(){c(e)}):c(e)}function c(e){e.__upgraded__&&e.__attached&&(e.__attached=!1,e.detachedCallback&&e.detachedCallback())}function l(e){for(var t=e,n=window.wrap(document);t;){if(t==n)return!0;t=t.parentNode||t.nodeType===Node.DOCUMENT_FRAGMENT_NODE&&t.host}}function f(e){if(e.shadowRoot&&!e.shadowRoot.__watched){g.dom&&console.log("watching shadow-root for: ",e.localName);for(var t=e.shadowRoot;t;)w(t),t=t.olderShadowRoot}}function m(e,n){if(g.dom){var o=n[0];if(o&&"childList"===o.type&&o.addedNodes&&o.addedNodes){for(var r=o.addedNodes[0];r&&r!==document&&!r.host;)r=r.parentNode;var i=r&&(r.URL||r._URL||r.host&&r.host.localName)||"";i=i.split("/?").shift().split("/").pop()}console.group("mutations (%d) [%s]",n.length,i||"")}var a=l(e);n.forEach(function(e){"childList"===e.type&&(M(e.addedNodes,function(e){e.localName&&t(e,a)}),M(e.removedNodes,function(e){e.localName&&s(e)}))}),g.dom&&console.groupEnd()}function p(e){for(e=window.wrap(e),e||(e=window.wrap(document));e.parentNode;)e=e.parentNode;var t=e.__observer;t&&(m(e,t.takeRecords()),i())}function w(e){if(!e.__observer){var t=new MutationObserver(m.bind(this,e));t.observe(e,{childList:!0,subtree:!0}),e.__observer=t}}function v(e){e=window.wrap(e),g.dom&&console.group("upgradeDocument: ",e.baseURI.split("/").pop());var n=e===window.wrap(document);t(e,n),w(e),g.dom&&console.groupEnd()}function h(e){E(e,v)}var g=e.flags,b=e.forSubtree,E=e.forDocumentTree,_=window.MutationObserver._isPolyfilled&&g["throttle-attached"];e.hasPolyfillMutations=_,e.hasThrottledAttached=_;var y=!1,N=[],M=Array.prototype.forEach.call.bind(Array.prototype.forEach),O=Element.prototype.createShadowRoot;O&&(Element.prototype.createShadowRoot=function(){var e=O.call(this);return window.CustomElements.watchShadow(this),e}),e.watchShadow=f,e.upgradeDocumentTree=h,e.upgradeDocument=v,e.upgradeSubtree=o,e.upgradeAll=t,e.attached=a,e.takeRecords=p}),window.CustomElements.addModule(function(e){function t(t,o){if("template"===t.localName&&window.HTMLTemplateElement&&HTMLTemplateElement.decorate&&HTMLTemplateElement.decorate(t),!t.__upgraded__&&t.nodeType===Node.ELEMENT_NODE){var r=t.getAttribute("is"),i=e.getRegisteredDefinition(t.localName)||e.getRegisteredDefinition(r);if(i&&(r&&i.tag==t.localName||!r&&!i["extends"]))return n(t,i,o)}}function n(t,n,r){return a.upgrade&&console.group("upgrade:",t.localName),n.is&&t.setAttribute("is",n.is),o(t,n),t.__upgraded__=!0,i(t),r&&e.attached(t),e.upgradeSubtree(t,r),a.upgrade&&console.groupEnd(),t}function o(e,t){Object.__proto__?e.__proto__=t.prototype:(r(e,t.prototype,t["native"]),e.__proto__=t.prototype)}function r(e,t,n){for(var o={},r=t;r!==n&&r!==HTMLElement.prototype;){for(var i,a=Object.getOwnPropertyNames(r),d=0;i=a[d];d++)o[i]||(Object.defineProperty(e,i,Object.getOwnPropertyDescriptor(r,i)),o[i]=1);r=Object.getPrototypeOf(r)}}function i(e){e.createdCallback&&e.createdCallback()}var a=e.flags;e.upgrade=t,e.upgradeWithDefinition=n,e.implementPrototype=o}),window.CustomElements.addModule(function(e){function t(t,o){var s=o||{};if(!t)throw new Error("document.registerElement: first argument `name` must not be empty");if(t.indexOf("-")<0)throw new Error("document.registerElement: first argument ('name') must contain a dash ('-'). Argument provided was '"+String(t)+"'.");if(r(t))throw new Error("Failed to execute 'registerElement' on 'Document': Registration failed for type '"+String(t)+"'. The type name is invalid.");if(u(t))throw new Error("DuplicateDefinitionError: a type with name '"+String(t)+"' is already registered");return s.prototype||(s.prototype=Object.create(HTMLElement.prototype)),s.__name=t.toLowerCase(),s.lifecycle=s.lifecycle||{},s.ancestry=i(s["extends"]),a(s),d(s),n(s.prototype),c(s.__name,s),s.ctor=l(s),s.ctor.prototype=s.prototype,s.prototype.constructor=s.ctor,e.ready&&h(document),s.ctor}function n(e){if(!e.setAttribute._polyfilled){var t=e.setAttribute;e.setAttribute=function(e,n){o.call(this,e,n,t)};var n=e.removeAttribute;e.removeAttribute=function(e){o.call(this,e,null,n)},e.setAttribute._polyfilled=!0}}function o(e,t,n){e=e.toLowerCase();var o=this.getAttribute(e);n.apply(this,arguments);var r=this.getAttribute(e);this.attributeChangedCallback&&r!==o&&this.attributeChangedCallback(e,o,r)}function r(e){for(var t=0;t<y.length;t++)if(e===y[t])return!0}function i(e){var t=u(e);return t?i(t["extends"]).concat([t]):[]}function a(e){for(var t,n=e["extends"],o=0;t=e.ancestry[o];o++)n=t.is&&t.tag;e.tag=n||e.__name,n&&(e.is=e.__name)}function d(e){if(!Object.__proto__){var t=HTMLElement.prototype;if(e.is){var n=document.createElement(e.tag);t=Object.getPrototypeOf(n)}for(var o,r=e.prototype,i=!1;r;)r==t&&(i=!0),o=Object.getPrototypeOf(r),o&&(r.__proto__=o),r=o;i||console.warn(e.tag+" prototype not found in prototype chain for "+e.is),e["native"]=t}}function s(e){return b(O(e.tag),e)}function u(e){return e?N[e.toLowerCase()]:void 0}function c(e,t){N[e]=t}function l(e){return function(){return s(e)}}function f(e,t,n){return e===M?m(t,n):D(e,t)}function m(e,t){e&&(e=e.toLowerCase()),t&&(t=t.toLowerCase());var n=u(t||e);if(n){if(e==n.tag&&t==n.is)return new n.ctor;if(!t&&!n.is)return new n.ctor}var o;return t?(o=m(e),o.setAttribute("is",t),o):(o=O(e),e.indexOf("-")>=0&&E(o,HTMLElement),o)}function p(e,t){var n=e[t];e[t]=function(){var e=n.apply(this,arguments);return g(e),e}}var w,v=e.isIE,h=e.upgradeDocumentTree,g=e.upgradeAll,b=e.upgradeWithDefinition,E=e.implementPrototype,_=e.useNative,y=["annotation-xml","color-profile","font-face","font-face-src","font-face-uri","font-face-format","font-face-name","missing-glyph"],N={},M="http://www.w3.org/1999/xhtml",O=document.createElement.bind(document),D=document.createElementNS.bind(document);w=Object.__proto__||_?function(e,t){return e instanceof t}:function(e,t){if(e instanceof t)return!0;for(var n=e;n;){if(n===t.prototype)return!0;n=n.__proto__}return!1},p(Node.prototype,"cloneNode"),p(document,"importNode"),v&&!function(){var e=document.importNode;document.importNode=function(){var t=e.apply(document,arguments);if(t.nodeType==t.DOCUMENT_FRAGMENT_NODE){var n=document.createDocumentFragment();return n.appendChild(t),n}return t}}(),document.registerElement=t,document.createElement=m,document.createElementNS=f,e.registry=N,e["instanceof"]=w,e.reservedTagList=y,e.getRegisteredDefinition=u,document.register=document.registerElement}),function(e){function t(){i(window.wrap(document)),window.CustomElements.ready=!0;var e=window.requestAnimationFrame||function(e){setTimeout(e,16)};e(function(){setTimeout(function(){window.CustomElements.readyTime=Date.now(),window.HTMLImports&&(window.CustomElements.elapsed=window.CustomElements.readyTime-window.HTMLImports.readyTime),document.dispatchEvent(new CustomEvent("WebComponentsReady",{bubbles:!0}))})})}var n=e.useNative,o=e.initializeModules;e.isIE;if(n){var r=function(){};e.watchShadow=r,e.upgrade=r,e.upgradeAll=r,e.upgradeDocumentTree=r,e.upgradeSubtree=r,e.takeRecords=r,e["instanceof"]=function(e,t){return e instanceof t}}else o();var i=e.upgradeDocumentTree,a=e.upgradeDocument;if(window.wrap||(window.ShadowDOMPolyfill?(window.wrap=window.ShadowDOMPolyfill.wrapIfNeeded,window.unwrap=window.ShadowDOMPolyfill.unwrapIfNeeded):window.wrap=window.unwrap=function(e){return e}),window.HTMLImports&&(window.HTMLImports.__importsParsingHook=function(e){e["import"]&&a(wrap(e["import"]))}),"complete"===document.readyState||e.flags.eager)t();else if("interactive"!==document.readyState||window.attachEvent||window.HTMLImports&&!window.HTMLImports.ready){var d=window.HTMLImports&&!window.HTMLImports.ready?"HTMLImportsLoaded":"DOMContentLoaded";window.addEventListener(d,t)}else t()}(window.CustomElements);
    </script>

    <style>
    body {
    margin: 0;
  19. @ebidel ebidel revised this gist Aug 3, 2016. 1 changed file with 1 addition and 0 deletions.
    1 change: 1 addition & 0 deletions fancy-tabs-demo.html
    View file
    Original file line number Diff line number Diff line change
    @@ -35,6 +35,7 @@ <h2 slot="title">Tab 3</h2>

    // Feature detect
    if (!(window.customElements && HTMLElement.prototype.attachShadow)) {
    document.querySelector('fancy-tabs').innerHTML = "<b>Your browser doesn't support Shadow DOM and Custom Elements v1.</b>";
    return;
    }

  20. @ebidel ebidel revised this gist Aug 3, 2016. 1 changed file with 3 additions and 9 deletions.
    12 changes: 3 additions & 9 deletions fancy-tabs-demo.html
    View file
    Original file line number Diff line number Diff line change
    @@ -1,11 +1,10 @@
    <style>
    /*html {
    background: #777;
    }*/
    body {
    margin: 0;
    }
    /*fancy-tabs {
    /* Style the element from the outside */
    /*
    fancy-tabs {
    margin-bottom: 32px;
    --background-color: black;
    }*/
    @@ -99,11 +98,6 @@ <h2 slot="title">Tab 3</h2>
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    background: linear-gradient(#fafafa, #eee);
    /* border-top: 1px solid #ccc;
    border-left: 1px solid #ccc;
    border-right: 1px solid #ccc; */
    /* box-shadow: inset 0 -2px 2px #ccc; */
    }
    #tabsSlot::slotted([selected]) {
    font-weight: 600;
  21. @ebidel ebidel revised this gist Aug 2, 2016. 1 changed file with 4 additions and 2 deletions.
    6 changes: 4 additions & 2 deletions fancy-tabs-demo.html
    View file
    Original file line number Diff line number Diff line change
    @@ -1,6 +1,8 @@
    <style>
    html {
    /*background: #777;*/
    /*html {
    background: #777;
    }*/
    body {
    margin: 0;
    }
    /*fancy-tabs {
  22. @ebidel ebidel revised this gist Aug 2, 2016. 1 changed file with 4 additions and 5 deletions.
    9 changes: 4 additions & 5 deletions fancy-tabs-demo.html
    View file
    Original file line number Diff line number Diff line change
    @@ -1,14 +1,13 @@
    <!--
    <style>
    html {
    background: #777;
    /*background: #777;*/
    margin: 0;
    }
    fancy-tabs {
    /*fancy-tabs {
    margin-bottom: 32px;
    --background-color: black;
    }
    }*/
    </style>
    -->

    <fancy-tabs background>
    <h2 slot="title">Tab 1</h2>
  23. @ebidel ebidel revised this gist Aug 2, 2016. 1 changed file with 1 addition and 0 deletions.
    1 change: 1 addition & 0 deletions fancy-tabs-demo.html
    View file
    Original file line number Diff line number Diff line change
    @@ -33,6 +33,7 @@ <h2 slot="title">Tab 3</h2>
    (function() {
    'use strict';

    // Feature detect
    if (!(window.customElements && HTMLElement.prototype.attachShadow)) {
    return;
    }
  24. @ebidel ebidel renamed this gist Aug 2, 2016. 1 changed file with 22 additions and 0 deletions.
    22 changes: 22 additions & 0 deletions gistfile1.txt → fancy-tabs-demo.html
    View file
    Original file line number Diff line number Diff line change
    @@ -1,3 +1,15 @@
    <!--
    <style>
    html {
    background: #777;
    }
    fancy-tabs {
    margin-bottom: 32px;
    --background-color: black;
    }
    </style>
    -->

    <fancy-tabs background>
    <h2 slot="title">Tab 1</h2>
    <h2 slot="title" selected>Tab 2</h2>
    @@ -7,6 +19,16 @@ <h2 slot="title">Tab 3</h2>
    <section>content panel 3</section>
    </fancy-tabs>

    <!-- Using <a> instead of h2 still works! -->
    <!--<fancy-tabs background>
    <a slot="title">Title 1</a>
    <a slot="title" selected>Title 2</a>
    <a slot="title">Title 3</a>
    <section>content panel 1</section>
    <section>content panel 2</section>
    <section>content panel 3</section>
    </fancy-tabs>-->

    <script>
    (function() {
    'use strict';
  25. @ebidel ebidel created this gist Aug 2, 2016.
    175 changes: 175 additions & 0 deletions gistfile1.txt
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,175 @@
    <fancy-tabs background>
    <h2 slot="title">Tab 1</h2>
    <h2 slot="title" selected>Tab 2</h2>
    <h2 slot="title">Tab 3</h2>
    <section>content panel 1</section>
    <section>content panel 2</section>
    <section>content panel 3</section>
    </fancy-tabs>

    <script>
    (function() {
    'use strict';

    if (!(window.customElements && HTMLElement.prototype.attachShadow)) {
    return;
    }

    let selected_ = null;

    customElements.define('fancy-tabs', class extends HTMLElement {

    get selected() {
    return selected_;
    }

    set selected(idx) {
    selected_ = idx;
    this._selectTab(idx);

    // Updated the selected attribute's value when backing property changes.
    this.setAttribute('selected', idx);
    }

    constructor() {
    super(); // always call super() first in the ctor.

    // Create shadow DOM for the component.
    let shadowRoot = this.attachShadow({mode: 'open'});
    shadowRoot.innerHTML = `
    <style>
    :host {
    display: inline-block;
    width: 650px;
    font-family: 'Roboto Slab';
    contain: content;
    }
    :host([background]) {
    background: var(--background-color, #9E9E9E);
    border-radius: 10px;
    padding: 10px;
    }
    #panels {
    box-shadow: 0 2px 2px rgba(0, 0, 0, .3);
    background: white;
    border-radius: 3px;
    padding: 16px;
    height: 250px;
    overflow: auto;
    }
    #tabs {
    display: inline-flex;
    -webkit-user-select: none;
    user-select: none;
    }
    #tabsSlot::slotted(*) {
    font: 400 16px/22px 'Roboto';
    padding: 16px 8px;
    margin: 0;
    text-align: center;
    width: 100px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    cursor: pointer;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    background: linear-gradient(#fafafa, #eee);

    /* border-top: 1px solid #ccc;
    border-left: 1px solid #ccc;
    border-right: 1px solid #ccc; */
    /* box-shadow: inset 0 -2px 2px #ccc; */
    }
    #tabsSlot::slotted([selected]) {
    font-weight: 600;
    background: white;
    box-shadow: none;
    }
    #panelsSlot::slotted(*:not([selected])) {
    display: none;
    }
    </style>
    <div id="tabs">
    <slot id="tabsSlot" name="title"></slot>
    </div>
    <div id="panels">
    <slot id="panelsSlot"></slot>
    </div>
    `;

    this.setAttribute('role', 'tablist');
    }

    connectedCallback() {
    const tabsSlot = this.shadowRoot.querySelector('#tabsSlot');
    const panelsSlot = this.shadowRoot.querySelector('#panelsSlot');

    this.tabs = tabsSlot.assignedNodes({flatten: true});
    this.panels = panelsSlot.assignedNodes({flatten: true}).filter(el => {
    return el.nodeType === Node.ELEMENT_NODE;
    });

    // Add aria role="tabpanel" to each content panel.
    for (let [i, panel] of this.panels.entries()) {
    panel.setAttribute('role', 'tabpanel');
    }

    this._onTitleClick = e => {
    if (e.target.slot === 'title') {
    this.selected = this.tabs.indexOf(e.target);
    }
    };

    tabsSlot.addEventListener('click', this._onTitleClick);

    this.selected = this._findFirstSelectedTab() || 0;
    }

    disconnectedCallback() {
    // Cleanup listeners.
    const titles = this.shadowRoot.querySelector('#titles');
    titles.removeEventListener('click', this._onTitleClick);
    }

    _addA11yToTab(el) {
    el.setAttribute('tabindex', 0);
    el.setAttribute('role', 'tab');

    // Simulate clicks when users hit Enter.
    el.addEventListener('keydown', e => {
    if (e.keyCode === 32 || e.keyCode === 13) {
    el.click();
    }
    });
    }

    _findFirstSelectedTab() {
    let selectedIdx;
    for (let [i, tab] of this.tabs.entries()) {
    this._addA11yToTab(tab);

    // Highlight first tab with selected attribute.
    if (tab.hasAttribute('selected')) {
    selectedIdx = i;
    }
    }
    return selectedIdx;
    }

    _selectTab(idx = null) {
    for (let i = 0, tab; tab = this.tabs[i]; ++i) {
    if (i === idx) {
    tab.setAttribute('selected', '');
    this.panels[i].setAttribute('selected', '');
    } else {
    tab.removeAttribute('selected');
    this.panels[i].removeAttribute('selected');
    }
    }
    }

    });

    })();
    </script>