HSL Clock web component

hsl-clock.html

<script>
(function() {
  var hslClock = Object.create(HTMLElement.prototype);

  hslClock._hueTranslate = 0;
  hslClock._saturationReverse = false;
  hslClock._luminosityReverse= false;
  hslClock._hideText = false;

  Object.defineProperty(hslClock, 'hueTranslate', {
    enumerable: true,
    get: function() {
      return this._hueTranslate;
    },
    set: function(value) {
      if (value === null) {
        return;
      }
      this._hueTranslate = parseInt(value, 10) || 0;
      this.setAttribute('hue-translate', this._hueTranslate);
    }
  });

  Object.defineProperty(hslClock, 'saturationReverse', {
    enumerable: true,
    get: function() {
      return this._saturationReverse;
    },
    set: function(value) {
      this._saturationReverse = (value !== null) && (value !== 'false');
      if (this._saturationReverse) {
        this.setAttribute('saturation-reverse', true);
      } else {
        this.removeAttribute('saturation-reverse');
      }
    }
  });

  Object.defineProperty(hslClock, 'luminosityReverse', {
    enumerable: true,
    get: function() {
      return this._luminosityReverse;
    },
    set: function(value) {
      this._luminosityReverse = (value !== null) && (value !== 'false');
      if (this._luminosityReverse) {
        this.setAttribute('luminosity-reverse', true);
      } else {
        this.removeAttribute('luminosity-reverse');
      }
    }
  });

  Object.defineProperty(hslClock, 'hideText', {
    enumerable: true,
    get: function() {
      return this._hideText;
    },
    set: function(value) {
      this._hideText = (value !== null) && (value !== 'false');
      if (this._hideText) {
        this.setAttribute('hide-text', true);
      } else {
        this.removeAttribute('hide-text');
      }
    }
  });

  hslClock.attributeChangedCallback = function(attr, oldVal, newVal) {
    switch(attr) {
      case 'hue-translate':
        this.hueTranslate = newVal;
        break;
      case 'saturation-reverse':
        this.saturationReverse = newVal;
        break;
      case 'luminosity-reverse':
        this.luminosityReverse = newVal;
        break;
      case 'hide-text':
        this.hideText = newVal;
        break;
      default:
        break;
    }
  };

  hslClock._getHSLColorFromDate = function(dateToConvert) {
    var millisecondsInAMinute = 60 * 1000;
    var millisecondsInAnHour = 60 * 60 * 1000;
    var millisecondsInADay = 24 * 60 * 60 * 1000;

    var millisecondsSinceMidnight = (dateToConvert.getHours() * 60 * 60 * 1000) + (dateToConvert.getMinutes() * 60) * 1000 + (dateToConvert.getSeconds() * 1000) + dateToConvert.getMilliseconds();
    var millisecondsSinceLastHour = (dateToConvert.getMinutes() * 60 * 1000) + (dateToConvert.getSeconds() * 1000) + dateToConvert.getMilliseconds();
    var millisecondsSinceLastMinute = (dateToConvert.getSeconds() * 1000) + dateToConvert.getMilliseconds();

    var fractionOfTodayGone = millisecondsSinceMidnight / millisecondsInADay;
    var fractionOfThisHourGone = millisecondsSinceLastHour / millisecondsInAnHour;
    var fractionOfThisMinuteGone = millisecondsSinceLastMinute / millisecondsInAMinute;

    var hue = Math.round(fractionOfThisHourGone * 360);
    var translatedHue = Math.round((hue + this.hueTranslate) % 360);
    var saturation = Math.round(2 * Math.abs((fractionOfThisMinuteGone - .5) * 100));
    this.saturationReverse && (saturation = 100 - saturation);
    var luminosity = Math.round((-2 * Math.abs(fractionOfTodayGone - .5) + 1) * 100);
    this.luminosityReverse && (luminosity = 100 - luminosity);

    var hslColorFromDate = 'hsl(' + translatedHue + ', ' + saturation + '%, ' + luminosity + '%)';

    return hslColorFromDate;
  };

  hslClock._updateBackgroundEveryXSeconds = function(x) {
    var that = this;
    var hslColorFromDate = this._getHSLColorFromDate(new Date());
    this.style.backgroundColor = hslColorFromDate;
    this.textContent = this.hideText ? '' : hslColorFromDate;
    window.setTimeout(function() {
      that._updateBackgroundEveryXSeconds(x);
    }, x * 1000);
  };

  hslClock.attachedCallback = function() {
    this.hueTranslate = this.getAttribute('hue-translate');
    this.saturationReverse = this.getAttribute('saturation-reverse');
    this.luminosityReverse = this.getAttribute('luminosity-reverse');
    this.hideText = this.getAttribute('hide-text');
    this._updateBackgroundEveryXSeconds(0.01);
  }

  window.HSLClockElement = document.registerElement('hsl-clock', {prototype: hslClock});
}());
</script>