tp-indicator.html

<link rel="import" href="../polymer/polymer.html">

<!--
`tp-indicator`
Line indicator view

@demo demo/index.html 
-->

<dom-module id="tp-indicator">
  <template>
    <style>
      :host {
        display: block;
      }
    </style>
    <div id="region" style="position: relative;"></div>
  </template>

  <script>
    'use strict';

    Polymer({

      is: 'tp-indicator',

      properties: {
        /* View width */
        width: {
          type: Number,
          value: 0,
        },
        /* View height */
        height: {
          type: Number,
          value: 120,
        }
      },

      /* type {Array<Object>} */
      _indicators: [],

      /* type {Number} */
      _width: 0,

      /* type {Number} */
      _height: 0,

      _adjust: function (indicator) {
        const v = indicator.direction === 'vertical';
        const style = indicator._element.style;
        style.width = (v ? 1 : this._width) + 'px';
        style.height = (v ? this._height : 1) + 'px';
        style.top = (v ? 0 : this._height * indicator.position) + 'px';
        style.left = (v ? this._width * indicator.position : 0) + 'px';
      },

      ready: function () {
        window.addEventListener('resize', e => {
          this.resize();
        }, false);
      },

      attached: function () {
        this.resize();
      },
      
      /**
       * Resizes the view.
       */
      resize: function () {
        this._width = this.get('width');
        this._height = this.get('height');
        if (!this._width)
          this._width = this.clientWidth;
        if (!this._height)
          this._height = this.clientHeight;

        const region = this.$.region;
        region.style.width = this._width + 'px';
        region.style.height = this._height + 'px';

        for (let indicator of this._indicators)
          this._adjust(indicator);
      },

      /**
       * Adds an indicator.
       * @param {Object} param object containing direction, position, color
       *   {String} direction 'vertical' or 'horizontal'
       *   {Number} position [0:1]
       *   {String} color indicator's color e.g., rgb(0,0,0)
       * @return {Number} indicator index
       */
      add: function (param) {
        const index = this._indicators.length;
        this._indicators.push(param);
        const element = document.createElement('div');
        element.style.position = 'absolute';
        element.style.backgroundColor = param.color;
        param._element = element;
        this._adjust(param);
        this.$.region.appendChild(element);
        return index;
      },

      /**
       * Updates an indicator.
       * @param {Number} index indicator index
       * @param {Number} position indicator position
       */
      update: function(index, position) {
        const indicator = this._indicators[index];
        if (!indicator)
          return;
        indicator.position = position;
        if (indicator.direction === 'vertical')
          indicator._element.style.left = this._width * position + 'px';
        else
          indicator._element.style.top = this._height * position + 'px';
      }
    });
  </script>
</dom-module>