Skip to content

Instantly share code, notes, and snippets.

@davidlwatsonjr
Last active March 28, 2016 20:54
Show Gist options
  • Save davidlwatsonjr/48af6b8dd333d283ac95 to your computer and use it in GitHub Desktop.
Save davidlwatsonjr/48af6b8dd333d283ac95 to your computer and use it in GitHub Desktop.
HSL Clock web component
<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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment