/
element.js
91 lines (79 loc) · 2.61 KB
/
element.js
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
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
function registerAsciinemaPlayerElement() {
var AsciinemaPlayerProto = Object.create(HTMLElement.prototype);
function merge() {
var merged = {};
for (var i=0; i<arguments.length; i++) {
var obj = arguments[i];
for (var attrname in obj) {
merged[attrname] = obj[attrname];
}
}
return merged;
}
AsciinemaPlayerProto.opt = function(attrName, optName, defaultValue, coerceFn) {
var obj = {};
var value = this.getAttribute(attrName);
if (value !== null) {
if (value === '' && defaultValue !== undefined) {
value = defaultValue;
} else if (coerceFn) {
value = coerceFn(value);
}
obj[optName] = value;
}
return obj;
};
AsciinemaPlayerProto.createdCallback = function() {
var self = this;
var opts = merge(
this.opt('cols', 'width', 0, parseInt),
this.opt('rows', 'height', 0, parseInt),
this.opt('autoplay', 'autoPlay', true, Boolean),
this.opt('preload', 'preload', true, Boolean),
this.opt('loop', 'loop', true, Boolean),
this.opt('start-at', 'startAt', 0, parseInt),
this.opt('speed', 'speed', 1, parseFloat),
this.opt('poster', 'poster'),
this.opt('font-size', 'fontSize'),
this.opt('theme', 'theme'),
this.opt('title', 'title'),
this.opt('author', 'author'),
this.opt('author-url', 'authorURL'),
this.opt('author-img-url', 'authorImgURL'),
{
onCanPlay: function() {
self.dispatchEvent(new CustomEvent("loadedmetadata"));
self.dispatchEvent(new CustomEvent("loadeddata"));
self.dispatchEvent(new CustomEvent("canplay"));
self.dispatchEvent(new CustomEvent("canplaythrough"));
},
onPlay: function() {
self.dispatchEvent(new CustomEvent("play"));
},
onPause: function() {
self.dispatchEvent(new CustomEvent("pause"));
}
}
);
this.player = asciinema.player.js.CreatePlayer(this, this.getAttribute('src'), opts);
};
AsciinemaPlayerProto.attachedCallback = function() {
var self = this;
setTimeout(function() {
self.dispatchEvent(new CustomEvent("attached"));
}, 0);
};
AsciinemaPlayerProto.detachedCallback = function() {
asciinema.player.js.UnmountPlayer(this);
this.player = undefined;
};
Object.defineProperty(AsciinemaPlayerProto, "currentTime", {
get: function() {
return this.player.getCurrentTime();
},
set: function(value) {
this.player.setCurrentTime(value);
}
});
document.registerElement('asciinema-player', { prototype: AsciinemaPlayerProto });
};