guillaume
/
whatcolorisit
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity
whatcolorisit/index.html

154 lines
4.2 KiB
HTML
Raw Normal View History

First simple version
2015-10-02 16:34:55 +02:00
<!doctype html>
<html>
<head>
<title>What color is it?</title>
<meta charset="utf-8" />
<meta name="viewport" content="user-scalable=yes,initial-scale=1" />
<style>
* { color: #fff; }
Add prototype, spectrum and controls
2015-10-02 16:35:46 +02:00
html, body, body > div { margin: 0; height: 100%; }
First simple version
2015-10-02 16:34:55 +02:00
div { text-align: center; }
h1 {
font-family: Verdana, Arial, sans-serif;
font-size: 4em;
}
h2 { font-family: courier; }
Add prototype, spectrum and controls
2015-10-02 16:35:46 +02:00
.spectrum {
height: 50px;
background-color: #000;
overflow: hidden;
}
.spectrum > div {
width: 1px;
height: 100%;
display: inline-block;
}
First simple version
2015-10-02 16:34:55 +02:00
</style>
<script type="text/javascript">
Add prototype, spectrum and controls
2015-10-02 16:35:46 +02:00
Date.today = function() {
now = new Date();
now.setHours(0);
now.setMinutes(0);
now.setSeconds(0);
now.setMilliseconds(0);
return now.getTime();
};
Date.prototype.toHexColor = function() {
First simple version
2015-10-02 16:34:55 +02:00
var hours, minutes, seconds;
total_seconds = this.getHours() * 3600 + this.getMinutes() * 60 + this.getSeconds();
var hex = Math.floor(total_seconds * 0xFFFFFF / 86400)
return "#" + ("000000" + hex.toString(16)).substr(-6)
};
Add prototype, spectrum and controls
2015-10-02 16:35:46 +02:00
Date.prototype.toRgbColor = function() {
return "rgb(" + Math.round(this.getHours() * 255 / 24) + ", " + Math.round(this.getMinutes() * 255 / 60) + ", " + Math.round(this.getSeconds() * 255 / 60) + ")";
};
Date.prototype.toHslColor = function() {
return "hsl(" + Math.round(this.getHours() * 360 / 24) + ", " + Math.round(this.getMinutes() + 20) + "%, " + Math.round(this.getSeconds() + 20) + "%)";
}
function WhatColorIsIt(mainDiv, toColor) {
this.mainDiv = mainDiv
this.toColor = toColor;
this.running = false;
this.mainDiv.style.transition = 'all 0.8s';
this.spectrumDiv = document.createElement('div');
this.spectrumDiv.className = 'spectrum';
this.controlsDiv = document.createElement('div');
this.controlsDiv.className = 'controls';
this.controlsDiv.style.cursor = 'pointer';
this.controlsDiv.textContent = '>';
this.controlsDiv.addEventListener('click', this.toggle.bind(this));
this.timeDiv = document.createElement('div');
this.timeDiv.className = 'time';
this.timeDiv.innerHTML = '<h1><time></time></h1><h2></h2>';
this.mainDiv.appendChild(this.spectrumDiv);
this.mainDiv.appendChild(this.timeDiv);
this.mainDiv.appendChild(this.controlsDiv);
First simple version
2015-10-02 16:34:55 +02:00
Add prototype, spectrum and controls
2015-10-02 16:35:46 +02:00
this.current();
};
WhatColorIsIt.prototype.spectrum = function(today) {
var tomorrow = today + 86400000;
var increment = (tomorrow - today) / this.spectrumDiv.offsetWidth;
First simple version
2015-10-02 16:34:55 +02:00
Add resize event listener to regenerate spectrum
2015-10-02 16:42:24 +02:00
this.spectrumDiv.innerHTML = '';
Add prototype, spectrum and controls
2015-10-02 16:35:46 +02:00
for(var i = today; i < tomorrow; i += increment) {
color = document.createElement('div');
color.style.background = this.toColor(new Date(i));
color.dataset.timestamp = i;
First simple version
2015-10-02 16:34:55 +02:00
Add prototype, spectrum and controls
2015-10-02 16:35:46 +02:00
color.addEventListener('mouseenter', function(e) {
this.process(new Date(parseInt(e.target.dataset.timestamp)))
}.bind(this));
this.spectrumDiv.appendChild(color);
First simple version
2015-10-02 16:34:55 +02:00
}
Add prototype, spectrum and controls
2015-10-02 16:35:46 +02:00
this.spectrumDiv.addEventListener('mouseenter', this.stop.bind(this));
this.spectrumDiv.addEventListener('mouseleave', this.start.bind(this));
};
WhatColorIsIt.prototype.current = function() {
this.process(new Date());
};
WhatColorIsIt.prototype.process = function(d) {
color = this.toColor(d);
this.timeDiv.querySelector('time').textContent = d.toLocaleTimeString();
this.timeDiv.querySelector('h2').textContent = color;
this.mainDiv.style.background = color;
}
WhatColorIsIt.prototype.run = function() {
this.spectrum(Date.today());
Add resize event listener to regenerate spectrum
2015-10-02 16:42:24 +02:00
window.addEventListener('resize', function() {
if(typeof resizewait != 'undefined') {
clearTimeout(resizewait);
}
resizewait = setTimeout(function() { this.spectrum(Date.today()); }.bind(this), 200);
}.bind(this));
Add prototype, spectrum and controls
2015-10-02 16:35:46 +02:00
this.start();
};
WhatColorIsIt.prototype.start = function() {
this.running = true;
this.controlsDiv.textContent = '||';
this.current();
this.interval = setInterval(this.current.bind(this), 1000);
};
WhatColorIsIt.prototype.stop = function() {
this.running = false;
this.controlsDiv.textContent = '>';
clearInterval(this.interval);
};
WhatColorIsIt.prototype.toggle = function() { this.running ? this.stop() : this.start() }
document.addEventListener("DOMContentLoaded", function() {
new WhatColorIsIt(document.getElementById('whatcolorisit'),
function(d) { return d.toHslColor(); }).run();
First simple version
2015-10-02 16:34:55 +02:00
});
</script>
</head>
<body>
Add prototype, spectrum and controls
2015-10-02 16:35:46 +02:00
<div id="whatcolorisit"></div>
First simple version
2015-10-02 16:34:55 +02:00
</body>
</html>