spec_sample.js
1.9 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
(function () {
function start() {
this.tick();
this._interval = window.setInterval(this.tick.bind(this), 1000);
}
function stop() {
window.clearInterval(this._interval);
}
function fmt(n) {
return (n < 10 ? '0' : '') + n;
}
var TickTockClockPrototype = Object.create(HTMLElement.prototype, {
readyCallback: {
enumerable: true,
value: function () {
this._root = this.createShadowRoot();
this._root.appendChild(this.template.content.cloneNode());
if (this.parentElement) {
start.call(this);
}
}
},
insertedCallback: { value: start },
removedCallback: { value: stop },
tick: {
enumerable: true,
value: function () {
var now = new Date();
this._root.querySelector('hh').textContent = fmt(now.getHours());
this._root.querySelector('sep').style.visibility = now.getSeconds() % 2 ? 'visible' : 'hidden';
this._root.querySelector('mm').textContent = fmt(now.getMinutes());
}
}
});
window.TickTockClock = document.registerElement('tick-tock-clock', { prototype: TickTockClockPrototype });
Object.defineProperty(TickTockClockPrototype, 'template', {
get: function () {
var fragment = document.createDocumentFragment();
var div = fragment.appendChild(document.createElement('div'));
div.innerHTML = ' <span id="hh"></span> <span id="sep">:</span> <span id="mm"></span> ';
while (child = div.firstChild) {
fragment.insertBefore(child, div);
}
fragment.removeChild(div);
return { content: fragment };
}
});
}());