Commit dcd43d57 authored by Björn Bartels's avatar Björn Bartels
Browse files

update build, clean-up

parent a7ac92b0

build/default/audio-player.js

+230 −16
Original line number Diff line number Diff line 
import{html,PolymerElement}from"./node_modules/@polymer/polymer/polymer-element.js";import audioPlayer from"./src/js/audio-element-player.js";class AudioPlayer extends PolymerElement{static get svgIcons(){return html`

import { html, PolymerElement } from "./node_modules/@polymer/polymer/polymer-element.js";

import audioPlayer from './src/js/audio-element-player.js';

/**

 * `audio-player`

 * a basic audio-player (with playlist)

 *

 * @customElement

 * @polymer

 * @demo demo/index.html

 */



class AudioPlayer extends PolymerElement {

  static get svgIcons() {

    return html`

      <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="display: none;">

        <symbol id="icon-play" viewBox="0 0 163.861 163.861">

          <path fill="var(--button-icon-fill-color)" d="M34.857 3.613C20.084-4.861 8.107 2.081 8.107 19.106v125.637c0 17.042 11.977 23.975 26.75 15.509L144.67 97.275c14.778-8.477 14.778-22.211 0-30.686L34.857 3.613z"/>
@@ -42,7 +55,11 @@ import{html,PolymerElement}from"./node_modules/@polymer/polymer/polymer-element. 
        	<path fill="var(--button-icon-fill-color)" class="path1" d="M1024 256l-256-256v192c-130.772 0-230.752 31.208-305.65 95.408-5.25 4.5-10.284 9.1-15.162 13.774 27.52 38.164 48.716 77.516 67.772 115.090 48.322-58.402 118.054-96.272 253.040-96.272v384c-216.446 0-265.126-97.36-326.756-220.622-34.306-68.612-69.78-139.56-135.592-195.97-74.9-64.2-174.88-95.408-305.652-95.408v128c216.446 0 265.126 97.36 326.756 220.622 34.306 68.612 69.78 139.56 135.592 195.97 74.9 64.2 174.882 95.408 305.652 95.408v192l256-256-256-256 256-256zM0 704v128c130.772 0 230.75-31.208 305.65-95.408 5.25-4.498 10.284-9.1 15.162-13.776-27.52-38.162-48.718-77.516-67.772-115.090-48.32 58.402-118.052 96.274-253.040 96.274z"></path>

        </symbol>

      </svg>

    `}static get controls(){return html`

    `;

  }



  static get controls() {

    return html`

      <div class="controls">

        <span class="playback">

          <button action="play" title="start playback"><svg class="icon"><use xlink:href="#icon-play" /></svg></button>
@@ -61,9 +78,17 @@ import{html,PolymerElement}from"./node_modules/@polymer/polymer/polymer-element. 
          <button action="volume-up" title="turn volume up"><svg class="icon"><use xlink:href="#icon-volume-up" /></svg></button>

        </span>

      </div>

    `}static get tracklist(){return html`

    `;

  }



  static get tracklist() {

    return html`

      <ul class="tracklist"></ul>

    `}static get screen(){return html`

    `;

  }



  static get screen() {

    return html`

    <div class="info-box">

      <div class="track-info-box">

        <span class="track-title-text"></span>
@@ -74,16 +99,24 @@ import{html,PolymerElement}from"./node_modules/@polymer/polymer/polymer-element. 
      </div>

      ${this.progressbar}

    </div>

    `}static get progressbar(){return html`

    `;

  }



  static get progressbar() {

    return html`

    <div class="progress-box">

      <div class="progress-cell">

        <div class="progress">

          <div class="progress-buffer"></div>

          <div class="progress-indicator"></div>

          <button class="progress-indicator"></button>

        </div>

      </div>

    </div>

    `}static get template(){return html`

    `;

  }



  static get template() {

    return html`

      <style>

      :host {

        --button-text-color: #fefefe;
@@ -91,6 +124,7 @@ import{html,PolymerElement}from"./node_modules/@polymer/polymer/polymer-element. 
        --button-icon-fill-color-disabled: #dedede;

        --button-background-color: #094296;

        --button-background-color-hover: #1952A6;

        --button-background-color-active: #1952A6;

        --button-background-color-disabled: #4982D6;



        --playlist-border: 1px solid #094296;
@@ -98,13 +132,18 @@ import{html,PolymerElement}from"./node_modules/@polymer/polymer/polymer-element. 
        --playlist-hover-color: #A9E2FF;

        --playlist-separator: none;



        --progress-bar-color: #094296;

        --progress-bar-border: 1px solid #d9d9d9;

        --progress-indicator-color: #fefefe;

        --progress-background-color: #fefefe;



        --panel-spacing: 0.5rem;



        display: block;

      }



      [aria-hidden="true"] {

        display: none;

        display: none !important;

      }



      .title {
@@ -135,6 +174,10 @@ import{html,PolymerElement}from"./node_modules/@polymer/polymer/polymer-element. 
      :host button:hover {

        --button-background-color: var(--button-background-color-hover);

      }

      :host button:active,

      :host button[activated] {

        --button-background-color: var(--button-background-color-active);

      }

      :host button:disabled {

        --button-background-color: var(--button-background-color-disabled);

        --button-icon-fill-color: var(--button-icon-fill-color-disabled);
@@ -226,24 +269,25 @@ import{html,PolymerElement}from"./node_modules/@polymer/polymer/polymer-element. 
        position: relative;

      }

      .progress-box .progress-cell .progress {

        background: #fff;

        border: 1px solid #d9d9d9;

        background: var(--progress-background-color);

        border: var(--progress-bar-border);

        height: 8px;

        position: relative;

        width: auto;

      }

      .progress-box .progress-cell .progress .progress-buffer {

        background: #337ab7;

        background: var(--progress-bar-color);

        height: 100%;

        width: 0;

      }

      .progress-box .progress-cell .progress .progress-indicator {

        background: #fff;

        border: 1px solid #bebebe;

        background: var(--progress-indicator-color);

        border: var(--progress-bar-border);

        border-radius: 3px;

        cursor: pointer;

        height: 10px;

        height: 12px;

        left: 0;

        padding: 0;

        overflow: hidden;

        position: absolute;

        top: -2px;
@@ -256,7 +300,118 @@ import{html,PolymerElement}from"./node_modules/@polymer/polymer/polymer-element. 
      ${this.screen}

      ${this.controls}

      ${this.tracklist}

    `}static get properties(){return{title:{type:String,value:"audio-player",notify:!0,reflectToAttribute:!0},play:{type:Boolean,value:!0,notify:!0,reflectToAttribute:!0},stop:{type:Boolean,value:!0,notify:!0,reflectToAttribute:!0},pause:{type:Boolean,value:!1,notify:!0,reflectToAttribute:!0},prev:{type:Boolean,value:!1,notify:!0,reflectToAttribute:!0},next:{type:Boolean,value:!1,notify:!0,reflectToAttribute:!0},info:{type:Boolean,value:!0,notify:!0,reflectToAttribute:!0},progress:{type:Boolean,value:!0,notify:!0,reflectToAttribute:!0},time:{type:String,value:"remain",notify:!0,reflectToAttribute:!0},tracklist:{type:Boolean,value:!1,notify:!0,reflectToAttribute:!0}}}initDisplay(){if(!this.get("play")||"false"==this.get("play")){this.shadowRoot.querySelector("[action=\"play\"]").setAttribute("aria-hidden",!0)}if(!this.get("stop")||"false"==this.get("stop")){this.shadowRoot.querySelector("[action=\"stop\"]").setAttribute("aria-hidden",!0)}if(!this.get("pause")||"false"==this.get("pause")){this.shadowRoot.querySelector("[action=\"pause\"]").setAttribute("aria-hidden",!0)}if(!this.get("prev")||"false"==this.get("prev")){this.shadowRoot.querySelector("[action=\"prev\"]").setAttribute("aria-hidden",!0)}if(!this.get("next")||"false"==this.get("next")){this.shadowRoot.querySelector("[action=\"next\"]").setAttribute("aria-hidden",!0)}if(!this.get("info")||"false"==this.get("info")){this.shadowRoot.querySelector(".info-box").setAttribute("aria-hidden",!0)}if(!this.get("progress")||"false"==this.get("progress")){this.shadowRoot.querySelector(".progress-box").setAttribute("aria-hidden",!0)}if(!this.get("tracklist")||"false"==this.get("tracklist")){this.shadowRoot.querySelector(".tracklist").setAttribute("aria-hidden",!0)}}tracklistItem(item){return`

    `;

  }



  static get properties() {

    return {

      title: {

        type: String,

        value: 'audio-player',

        notify: true

      },

      play: {

        type: Boolean,

        value: true,

        notify: true

      },

      stop: {

        type: Boolean,

        value: true,

        notify: true

      },

      pause: {

        type: Boolean,

        value: false,

        notify: true

      },

      prev: {

        type: Boolean,

        value: false,

        notify: true

      },

      next: {

        type: Boolean,

        value: false,

        notify: true

      },

      repeat: {

        type: Boolean,

        value: false,

        notify: true

      },

      shuffle: {

        type: Boolean,

        value: false,

        notify: true

      },

      mute: {

        type: Boolean,

        value: false,

        notify: true

      },

      'volume-up': {

        type: Boolean,

        value: false,

        notify: true

      },

      'volume-down': {

        type: Boolean,

        value: false,

        notify: true

      },

      info: {

        type: Boolean,

        value: true,

        notify: true

      },

      progress: {

        type: Boolean,

        value: true,

        notify: true

      },

      time: {

        type: String,

        value: 'remain',

        notify: true

      },

      tracklist: {

        type: Boolean,

        value: false,

        notify: true

      }

    };

  }



  initDisplay() {

    // element attributes/properties

    let buttons = ['play', 'pause', 'stop', 'prev', 'next', 'repeat', 'shuffle', 'mute', 'volume-up', 'volume-down'];

    let panels = ['info', 'progress', 'tracklist'];

    buttons.forEach(button => {

      let $button = this.shadowRoot.querySelector(`[action="${button}"]`);

      if (!$button) return;



      if (!this.get(button) || this.get(button) == 'false') {

        $button.setAttribute('aria-hidden', true);

      } else {

        $button.removeAttribute('aria-hidden');

      }

    });

    panels.forEach(panel => {

      let $panel = this.shadowRoot.querySelector(`[class*="${panel}" i]`);



      if ($panel) {

        if (!this.get(panel) || this.get(panel) == 'false') {

          $panel.setAttribute('aria-hidden', true);

        } else {

          $panel.removeAttribute('aria-hidden');

        }

      }

    });

  }



  tracklistItem(item) {

    return `

    <li class="play-list-row" data-track-row="${item.index}">

      <button class="small-toggle-btn" title="toggle playback of track no. ${item.index}">

        <svg class="icon play"><use xlink:href="#icon-play" /></svg>
@@ -265,4 +420,63 @@ import{html,PolymerElement}from"./node_modules/@polymer/polymer/polymer-element. 
      <span class="track-number">${item.index}.</span>

      <span class="track-title"><a class="playlist-track" href="#" data-play-track="${item.index}">${item.title}</a></span>

    </li>

    `}initTracklist(){let sources=this.sources,tracklist=this.shadowRoot.querySelector(".tracklist");sources.forEach((source,index)=>{let item={index:index+1,title:source.getAttribute("title"),src:source.getAttribute("src")},listItem=this.tracklistItem(item);tracklist.innerHTML+=listItem});let slotted=this.shadowRoot.querySelector("slot").assignedNodes(),trackNumber=1;slotted.forEach((source,index)=>{if(source instanceof HTMLSourceElement)source.dataset.trackNumber=trackNumber++})}get sources(){return this.querySelectorAll("source[src$=\".mp3\" i]")}get audioelement(){return this.shadowRoot.querySelector("audio")}get videoelement(){return this.shadowRoot.querySelector("video")}ready(){super.ready();this.initDisplay();this.initTracklist();this.audioPlayer=new audioPlayer(this);this.audioPlayer.initPlayer()}}window.customElements.define("audio-player",AudioPlayer);
 
 No newline at end of file
 
    `;

  }



  initTracklist() {

    let sources = this.sources;

    let tracklist = this.shadowRoot.querySelector('.tracklist');

    sources.forEach((source, index) => {

      let item = {

        index: index + 1,

        title: source.getAttribute('title'),

        src: source.getAttribute('src')

      };

      let listItem = this.tracklistItem(item);

      tracklist.innerHTML += listItem;

    });

    let slotted = this.shadowRoot.querySelector('slot').assignedNodes();

    let trackNumber = 1;

    slotted.forEach(source => {

      if (source instanceof HTMLSourceElement) source.dataset.trackNumber = trackNumber++;

    });

  }



  initPropertyChangeEvents() {

    let props = ['play', 'pause', 'stop', 'prev', 'next', 'repeat', 'shuffle', 'mute', 'volume-up', 'volume-down', 'info', 'progress', 'tracklist'];

    let $this = this;

    props.forEach(prop => {

      let eventName = `${prop}-changed`;

      $this.addEventListener(eventName, e => {

        console.log('prop changed:', prop, e);

        $this.initDisplay.apply($this);

      }, false);

    });

  }



  get sources() {

    return this.querySelectorAll('source[src$=".mp3" i]');

  }



  get audioelement() {

    return this.shadowRoot.querySelector('audio');

  }



  get videoelement() {

    return this.shadowRoot.querySelector('video');

  }



  ready() {

    super.ready(); // element's "on-ready"...



    this.initDisplay();

    this.initTracklist();

    this.initPropertyChangeEvents();

    this.audioPlayer = new audioPlayer(this); //this.audioPlayer = new audioPlayer({host: this.shadowRoot})



    this.audioPlayer.initPlayer();

  }



}



window.customElements.define('audio-player', AudioPlayer);
 
 No newline at end of file

build/default/node_modules/@polymer/polymer/lib/elements/dom-module.js

+175 −1
Original line number Diff line number Diff line 
import"../utils/boot.js";import{resolveUrl,pathFromUrl}from"../utils/resolve-url.js";import{strictTemplatePolicy}from"../utils/settings.js";let modules={},lcModules={};function setModule(id,module){modules[id]=lcModules[id.toLowerCase()]=module}function findModule(id){return modules[id]||lcModules[id.toLowerCase()]}function styleOutsideTemplateCheck(inst){if(inst.querySelector("style")){console.warn("dom-module %s has style outside template",inst.id)}}export class DomModule extends HTMLElement{static get observedAttributes(){return["id"]}static import(id,selector){if(id){let m=findModule(id);if(m&&selector){return m.querySelector(selector)}return m}return null}attributeChangedCallback(name,old,value,namespace){if(old!==value){this.register()}}get assetpath(){if(!this.__assetpath){const owner=window.HTMLImports&&HTMLImports.importForElement?HTMLImports.importForElement(this)||document:this.ownerDocument,url=resolveUrl(this.getAttribute("assetpath")||"",owner.baseURI);this.__assetpath=pathFromUrl(url)}return this.__assetpath}register(id){id=id||this.id;if(id){if(strictTemplatePolicy&&findModule(id)!==void 0){setModule(id,null);throw new Error(`strictTemplatePolicy: dom-module ${id} re-registered`)}this.id=id;setModule(id,this);styleOutsideTemplateCheck(this)}}}DomModule.prototype.modules=modules;customElements.define("dom-module",DomModule);
 
 No newline at end of file
 
/**

@license

Copyright (c) 2017 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

*/

import '../utils/boot.js';

import { resolveUrl, pathFromUrl } from '../utils/resolve-url.js';

import { strictTemplatePolicy } from '../utils/settings.js';

let modules = {};

let lcModules = {};

/**

 * Sets a dom-module into the global registry by id.

 *

 * @param {string} id dom-module id

 * @param {DomModule} module dom-module instance

 * @return {void}

 */



function setModule(id, module) {

  // store id separate from lowercased id so that

  // in all cases mixedCase id will stored distinctly

  // and lowercase version is a fallback

  modules[id] = lcModules[id.toLowerCase()] = module;

}

/**

 * Retrieves a dom-module from the global registry by id.

 *

 * @param {string} id dom-module id

 * @return {DomModule!} dom-module instance

 */





function findModule(id) {

  return modules[id] || lcModules[id.toLowerCase()];

}



function styleOutsideTemplateCheck(inst) {

  if (inst.querySelector('style')) {

    console.warn('dom-module %s has style outside template', inst.id);

  }

}

/**

 * The `dom-module` element registers the dom it contains to the name given

 * by the module's id attribute. It provides a unified database of dom

 * accessible via its static `import` API.

 *

 * A key use case of `dom-module` is for providing custom element `<template>`s

 * via HTML imports that are parsed by the native HTML parser, that can be

 * relocated during a bundling pass and still looked up by `id`.

 *

 * Example:

 *

 *     <dom-module id="foo">

 *       <img src="stuff.png">

 *     </dom-module>

 *

 * Then in code in some other location that cannot access the dom-module above

 *

 *     let img = customElements.get('dom-module').import('foo', 'img');

 *

 * @customElement

 * @extends HTMLElement

 * @summary Custom element that provides a registry of relocatable DOM content

 *   by `id` that is agnostic to bundling.

 * @unrestricted

 */





export class DomModule extends HTMLElement {

  static get observedAttributes() {

    return ['id'];

  }

  /**

   * Retrieves the element specified by the css `selector` in the module

   * registered by `id`. For example, this.import('foo', 'img');

   * @param {string} id The id of the dom-module in which to search.

   * @param {string=} selector The css selector by which to find the element.

   * @return {Element} Returns the element which matches `selector` in the

   * module registered at the specified `id`.

   *

   * @export

   * @nocollapse Referred to indirectly in style-gather.js

   */





  static import(id, selector) {

    if (id) {

      let m = findModule(id);



      if (m && selector) {

        return m.querySelector(selector);

      }



      return m;

    }



    return null;

  }

  /* eslint-disable no-unused-vars */



  /**

   * @param {string} name Name of attribute.

   * @param {?string} old Old value of attribute.

   * @param {?string} value Current value of attribute.

   * @param {?string} namespace Attribute namespace.

   * @return {void}

   * @override

   */





  attributeChangedCallback(name, old, value, namespace) {

    if (old !== value) {

      this.register();

    }

  }

  /* eslint-enable no-unused-args */



  /**

   * The absolute URL of the original location of this `dom-module`.

   *

   * This value will differ from this element's `ownerDocument` in the

   * following ways:

   * - Takes into account any `assetpath` attribute added during bundling

   *   to indicate the original location relative to the bundled location

   * - Uses the HTMLImports polyfill's `importForElement` API to ensure

   *   the path is relative to the import document's location since

   *   `ownerDocument` is not currently polyfilled

   */





  get assetpath() {

    // Don't override existing assetpath.

    if (!this.__assetpath) {

      // note: assetpath set via an attribute must be relative to this

      // element's location; accomodate polyfilled HTMLImports

      const owner = window.HTMLImports && HTMLImports.importForElement ? HTMLImports.importForElement(this) || document : this.ownerDocument;

      const url = resolveUrl(this.getAttribute('assetpath') || '', owner.baseURI);

      this.__assetpath = pathFromUrl(url);

    }



    return this.__assetpath;

  }

  /**

   * Registers the dom-module at a given id. This method should only be called

   * when a dom-module is imperatively created. For

   * example, `document.createElement('dom-module').register('foo')`.

   * @param {string=} id The id at which to register the dom-module.

   * @return {void}

   */





  register(id) {

    id = id || this.id;



    if (id) {

      // Under strictTemplatePolicy, reject and null out any re-registered

      // dom-module since it is ambiguous whether first-in or last-in is trusted

      if (strictTemplatePolicy && findModule(id) !== undefined) {

        setModule(id, null);

        throw new Error(`strictTemplatePolicy: dom-module ${id} re-registered`);

      }



      this.id = id;

      setModule(id, this);

      styleOutsideTemplateCheck(this);

    }

  }



}

DomModule.prototype['modules'] = modules;

customElements.define('dom-module', DomModule);
 
 No newline at end of file

build/default/node_modules/@polymer/polymer/lib/mixins/element-mixin.js

+865 −1

File changed.

Preview size limit exceeded, changes collapsed.

build/default/node_modules/@polymer/polymer/lib/mixins/properties-changed.js

+600 −1

File changed.

Preview size limit exceeded, changes collapsed.

build/default/node_modules/@polymer/polymer/lib/mixins/properties-mixin.js

+250 −1

File changed.

Preview size limit exceeded, changes collapsed.