paper-clock-selector.html

<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="../iron-flex-layout/iron-flex-layout-classes.html">
<link rel="import" href="../iron-resizable/iron-resizable-behavior.html">

<!--
@element paper-clock-selector
@blurb Only intended for use by paper-time-picker
-->

<dom-module id="paper-clock-selector">
  <template>
    <style>
      :host * {
        -webkit-tap-highlight-color: rgba(0,0,0,0);
      }

      :host {
        display: block;
        @apply(--paper-font-body1);
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        -khtml-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        pointer-events: none;
        @apply(--layout-horizontal);
        @apply(--layout-center-center);
      }
      #clock {
        display: block;
        overflow: visible;
      }
      #clock * {
        pointer-events: fill;
      }
      #face {
        fill: var(--divider-color);
        cursor: default;
      }
      .line {
        stroke-width: 2;
      }
      .dot {
        fill: var(--default-primary-color);
      }
      .line {
        stroke: var(--default-primary-color);
      }
      .clock-hand {
        z-index: 1;
      }
      .disc-large {
        z-index: 2;
        fill: var(--default-primary-color);
      }
      .disc-small {
        fill: var(--text-primary-color);
      }
      .clock-hand.no-dot .disc-small {
        fill: none;
        stroke: none;
      }
      .number text {
        z-index: 3;
        fill: var(--primary-text-color);
        @apply(--paper-font-subhead);
        pointer-events: none;
        dominant-baseline: middle;
        text-align: center;
        text-anchor: middle;
      }
      .clipping-enabled .number text.clipped {
        z-index: 4;
        fill: var(--text-primary-color);
        clip-path: url('#handClip');
      }
      .number text.clipped.text-primary-color {
        fill: var(--text-primary-color);
      }
      .select-area {
        cursor: pointer;
        fill-opacity: 0;
      }
      #clock.animating #clockHand,
      #clock.animating #clipCircle {
        transition: transform 150ms ease-in;
      }
    </style>
    <svg version="1.1" id="clock">
      <defs>
        <clipPath id="handClip">
          <circle id="clipCircle" r$="{{_selectorSize}}" cx$="{{_handX}}" cy$="{{_handY}}"></circle>
        </clipPath>
      </defs>
      <circle id="face" class="bg" r$="{{_radius}}" cx$="{{_radius}}" cy$="{{_radius}}"></circle>
      <g id="clockHand" class="clock-hand">
        <circle class="dot" r="2" cx$="{{_radius}}" cy$="{{_radius}}"></circle>
        <line class="line" x1$="{{_radius}}" y1$="{{_radius}}" x2$="{{_handX}}" y2$="{{_handY}}"></line>
        <circle class="disc-large" r$="{{_selectorSize}}" cx$="{{_handX}}" cy$="{{_handY}}"></circle>
        <circle class="disc-small" r$="{{_selectorDotSize}}" cx$="{{_handX}}" cy$="{{_handY}}"></circle>
      </g>
      <g id="numbers" class$="{{clippingEnabled}}"></g>
      <path class="select-area" on-tap="_onTouch" on-track="_onTouch"
        d$="{{_getSelectArea(_radius, _selectorInner, _selectorOuter)}}"></path>
    </svg>
  </template>
  <script>
    (function(){
      var SVG_NS = 'http://www.w3.org/2000/svg';

      // radius values as a percentage of the clock-face radius
      var MAX_VISIBLE = 12;

      var normalizeAngle = function(a) {
        // convert angle to a positive value between 0 and 360
        a = a ? a % 360 : 0;
        return a < 0 ? a + 360 : a;
      };
      function getShortestAngle(from, to) {
        var angle, offset = 0;
        from = from || 0;
        angle = normalizeAngle(from);
        if ( angle < 180 && (to > (angle + 180)) ) {
          offset = -360;
        }
        if ( angle >= 180 && (to <= (angle - 180)) ) {
          offset = 360;
        }
        return from + offset + (to - angle);
      }

      Polymer({
        is: 'paper-clock-selector',
        properties: {
          selected: {
            type: Number,
            notify: true,
            value: 0,
            observer: '_selectedChanged'
          },
          count: {
            type: Number,
            value: 0
          },
          step: {
            type: Number,
            value: 1,
            observer: '_stepChanged'
          },
          useZero: {
            type: Boolean,
            value: false
          },
          zeroPad: {
            type: Boolean,
            value: false,
            observer: '_zeroPadChanged'
          },
          animated: {
            type: Boolean,
            value: false
          },
          clippingEnabled: {
            type: String,
            value: 'clipping-enabled'
          }
        },
        listeners: {
          'iron-resize': '_updateSize'
        },
        observers: [
          '_populate(count, step, useZero)'
        ],
        behaviors: [
          Polymer.IronResizableBehavior
        ],
        ready: function() {
          // Relates to https://github.com/bendavis78/paper-time-picker/issues/29
          if (navigator.userAgent.search('Firefox') !== -1) {
            this.clippingEnabled = 'clipping-disabled';
          }
          this._transitionEvent = this.style.WebkitTransition ? 'transitionEnd' : 'webkitTransitionEnd';
          this._populate();
          this._selectedChanged(this.selected);
        },
        setClockHand: function(deg, animate, callback) {
          deg = normalizeAngle(deg);

          animate = typeof(animate) === 'undefined' ? this.animated : animate;
          animate = this._radius ? animate : false;

          this.$.clock.classList.remove('animating');

          var current, transform = this._getTransform(this.$.clockHand);
          if (transform) {
            current = parseInt(transform.match(/rotate\((-?\d+)deg\)/)[1]);
          } else {
            current = 0;
          }

          var rotate = getShortestAngle(current, deg);
          if (normalizeAngle(rotate) === current) {
            return this._setHandRotation(current);
          }

          if (!animate) {
            return this._setHandRotation(rotate);
          }

          this._once(this._transitionEvent, function() {
            if (callback) {
              callback();
            }
            this.$.clock.classList.remove('animating');
            this.fire('paper-clock-transition-end');
          }.bind(this), this.$.clockHand);

          this.$.clock.classList.add('animating');
          this.async(function() {
            this._setHandRotation(rotate);
          });

        },
        _getTransform: function(el) {
          return el.style.transform | el.style.webkitTransform | el.style.msTransform;
        },
        _setTransform: function(el, value) {
          el.style.msTransform = el.style.webkitTransform = el.style.transform = value;
        },
        _setTransformOrigin: function(el, value) {
          el.style.msTransformOrigin = el.style.webkitTransformOrigin = el.style.transformOrigin = value;
        },
        _setHandRotation: function(deg) {
          var hasLabel = ((deg / 360) * this.count) % this.step === 0 ;
          var transform = 'rotate(' + deg + 'deg)';
          this.$.clockHand.classList[['remove', 'add'][+hasLabel]]('no-dot');
          this._setTransform(this.$.clockHand, transform);
          this._setTransform(this.$.clipCircle, transform);
        },
        _selectedChanged: function(selected) {
          if (!this.count || isNaN(selected)) {
            return;
          }
          var value = selected % this.count;
          var idx = value;

          if (idx === 0 && !this.useZero) {
            value = this.count;
          }
          if (value !== this.selected) {
            this.selected = value;
            return;
          }
          this._vibrate();
          this.setClockHand((360 / this.count) * this.selected);

          if (this.clippingEnabled !== 'clipping-enabled') {
            var elements = this.querySelectorAll('.number text.clipped');
            for (var i = 0; i < elements.length; i++) {
              if (parseInt(elements[i].innerHTML) === this.selected) {
                elements[i].classList.add('text-primary-color');
              }
              else {
                elements[i].classList.remove('text-primary-color');
              }
            }
          }
        },
        _stepChanged: function(value, oldValue) {
          this._step = oldValue;
          if (!this.count || isNaN(value)) {
            return;
          }
          var minStep = Math.ceil(this.count / MAX_VISIBLE);
          if (value < minStep) {
            value = minStep;
          }
          this._step = value;
        },
        _populate: function() {
          delete this._resizedCache;
          var display, value, number;
          var $numbers = this.$.numbers;

          this.set('_numbers', []);
          this._stepChanged(this.step);

          // remove dom nodes since they'll be re-created
          while($numbers.firstChild) {
            $numbers.removeChild($numbers.firstChild);
          }

          var numbers = [];

          for (var i=0; i<this.count; i++) {
            value = i;
            display = null;
            if (i === 0 && !this.useZero) {
              value = this.count;
            }

            number = {
              index: i,
              value: value,
              display: value % this._step === 0,
              x: 0,
              y: 0,
              label: this._formatNumber(value)
            };

            number.dom = this._createNumberElement(number);
            numbers.push(number);
            $numbers.appendChild(number.dom.g);
          }
          this.set('_numbers', numbers);
          this._positionClockPoints();
        },
        _updateNumber: function(number) {
          var dom = number.dom;
          if (!dom) {
            return;
          }
          if (number.x && number.y && dom.text) {
            dom.text.setAttributeNS(null, 'x', number.x);
            dom.text.setAttributeNS(null, 'y', number.y);
            dom.text.textContent  = this._formatNumber(number.value);
            dom.textClipped.setAttributeNS(null, 'x', number.x);
            dom.textClipped.setAttributeNS(null, 'y', number.y);
            dom.textClipped.textContent = this._formatNumber(number.value);
          }
        },
        _createNumberElement: function(number) {
          // We can't use templates inside SVG elements, so we have to create
          // the numbers in dom and set up attribute bindings manually
          function create(type, classList) {
            var el = document.createElementNS(SVG_NS, type);
            if (classList) {
              classList.forEach(function(c) {
                el.classList.add(c);
              });
            }
            if (!Polymer.Settings.useNativeShadow) {
              el.classList.add('style-scope');
              el.classList.add('paper-clock-selector');
            }
            return el;
          }

          var g = create('g', ['number']);
          var text = null;
          var textClipped = null;
          if (number.display) {
            text = create('text');
            text.textContent = number.label;
            g.appendChild(text);
            textClipped = create('text', ['clipped']);
            textClipped.textContent = number.label;
            g.appendChild(textClipped);
          }

          return {g: g, text: text, textClipped: textClipped};
        },
        _updateSize: function() {
          var radius = Math.min(this.offsetWidth, this.offsetHeight) / 2;
          if (!radius || this._resizedCache === radius) {
            return;
          }
          this._radius = radius;
          this._selectorSize = 20;
          this._selectorDotSize = 3;
          this._padding = 2;
          this._positionClockPoints();

          this._resizedCache = this._radius;
          this.$.clock.style.width = (radius * 2) + 'px';
          this.$.clock.style.height = (radius * 2) + 'px';
          var v = radius + 'px ' + radius + 'px';
          this._setTransformOrigin(this.$.clockHand, v);
          this._setTransformOrigin(this.$.clipCircle, v);

          this.async(function() {
            // FIXME: this is hacky, but for some reason we need to wait a bit
            // to get an accurate measurement
            this._bounds = this.$.face.getBoundingClientRect();
          }.bind(this), 150);
        },
        _positionClockPoints: function() {
          if (!this._radius) {
            return;
          }

          this._selectorOuter = this._radius - this._padding * 2;
          this._selectorInner = this._selectorOuter - this._selectorSize * 2;
          var selectorCenter = this._selectorOuter - this._selectorSize;

          var numbers = this._numbers;
          var angle = (360 / this.count) * (Math.PI / 180);

          var a, number;
          for (var i=0; i<this.count; i++) {
            a = angle * i;
            number = numbers[i];
            number.x = this._radius + (Math.sin(a) * selectorCenter);
            number.y = this._radius - (Math.cos(a) * selectorCenter);
            this._updateNumber(number);
          }
          this._handX = this._numbers[0].x;
          this._handY = this._numbers[0].y;
        },
        _notifyNumberChanged: function(path) {
          var propPath, props = ['x', 'y'];
          for (var i=0; i<props.length; i++) {
            propPath = path + '.' + props[i];
            if (this.get(propPath)) {
              this.notifyPath(propPath, this.get(propPath));
            }
          }
        },
        _getSelectArea: function(radius, outer, inner) {
          return '\n' +
            'M ' + (radius - outer) + ' ' + radius + '\n' +
            'A ' + outer + ' ' + outer + ' 0 0 0 ' + (radius + outer) + ' ' + radius + '\n' +
            'A ' + outer + ' ' + outer + ' 0 0 0 ' + (radius - outer) + ' ' + radius + '\n' +
            'M ' + (radius - inner) + ' ' + radius + '\n' +
            'A ' + inner + ' ' + inner + ' 0 0 1 ' + (radius + inner) + ' ' + radius + '\n'+
            'A ' + inner + ' ' + inner + ' 0 0 1 ' + (radius - inner) + ' ' + radius;
        },
        _onTouch: function(event) {
          var x = event.detail.x - this._bounds.left - this._radius;
          var y = event.detail.y - this._bounds.top - this._radius;

          /* only rotate while in the touch area */
          var distance = Math.abs(Math.sqrt(Math.pow(x, 2) + Math.pow(y, 2)));
          if (distance < this._selectorInner || distance > this._selectorOuter) {
            return;
          }

          /* don't animate while tracking */
          this.animated = event.type !== 'track';

          // use coords to find angle from 12 o'clock position
          var theta = Math.atan(y / x);
          theta = (Math.PI / 2) + (x < 0 ? theta + Math.PI : theta);
          var intervalRad = (360 / this.count) * (Math.PI / 180);

          // determine the selected number
          this.selected = Math.round(theta / intervalRad);

          /* only fire selected when we've tapped or stopped tracking */
          if (event.type === 'tap' || event.detail.state === 'end') {
            this.fire('paper-clock-selected', {value: this.selected, animated: this.animated});
          }
        },
        _formatNumber: function(value) {
          if (this.zeroPad) {
            return ('0' + value).substr(-2);
          }
          return value.toString();
        },
        _getNumberClass: function(pfx, n, selected) {
          var cssClass = pfx;
          if (selected.value === n.value) {
            cssClass += ' selected';
          }
          return cssClass;
        },
        _vibrate: function() {
          this.debounce('vibrate', function() {
            if (navigator.vibrate) {
              navigator.vibrate(10);
            }
          });
        },
        _zeroPadChanged: function() {
          this._numbers.forEach(function(number) {
            this._updateNumber(number);
          }.bind(this));
        },
        _once: function(eventName, callback, node) {
          node = node || this;
          function onceCallback() {
            node.removeEventListener(eventName, onceCallback);
            callback.apply(null, arguments);
          }
          node.addEventListener(eventName, onceCallback);
        }
      });
    })();
  </script>
</dom-module>