forked from katspaugh/wavesurfer.js
-
Notifications
You must be signed in to change notification settings - Fork 0
/
wavesurfer.cursor.js
executable file
·62 lines (51 loc) · 1.73 KB
/
wavesurfer.cursor.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
'use strict';
WaveSurfer.Cursor = {
init: function (wavesurfer) {
var my = this;
this.wavesurfer = wavesurfer;
this.drawer = this.wavesurfer.drawer;
this.wrapper = this.drawer.wrapper;
this.wrapper.addEventListener('mousemove', function (e) {
my.updateCursorPosition(my.drawer.handleEvent(e));
});
this.wrapper.addEventListener('mouseenter', function (e) {
my.showCursor();
});
this.wrapper.addEventListener('mouseleave', function (e) {
my.hideCursor();
});
this.cursor = this.wrapper.appendChild(
this.drawer.style(document.createElement('wave'), {
position: 'absolute',
zIndex: 3,
left: 0,
top: 0,
bottom: 0,
width: '0',
display: 'block',
borderRightStyle: 'solid',
borderRightWidth: 1 + 'px',
borderRightColor: 'black',
opacity: '.25',
pointerEvents: 'none'
})
);
},
updateCursorPosition: function(progress) {
var pos = Math.round(this.drawer.width * progress) / this.drawer.params.pixelRatio - 1;
this.drawer.style(this.cursor, { left: pos + 'px' });
},
showCursor: function() {
this.drawer.style(this.cursor, { display: 'block' });
},
hideCursor: function() {
this.drawer.style(this.cursor, { display: 'none' });
}
};
WaveSurfer.util.extend(WaveSurfer.Cursor, WaveSurfer.Observer);
WaveSurfer.enableCursor = function () {
if (!this.cursor) {
this.cursor = Object.create(WaveSurfer.Cursor);
this.cursor.init(this);
}
};