@checksub_team/peaks_timeline 1.4.36 → 1.4.37
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +530 -0
- package/COPYING +165 -165
- package/package.json +88 -88
- package/peaks.js +492 -309
- package/src/data-retriever.js +89 -89
- package/src/default-segment-marker.js +132 -132
- package/src/invoker.js +81 -81
- package/src/keyboard-handler.js +112 -112
- package/src/line-indicator.js +377 -377
- package/src/line.js +678 -678
- package/src/lines.js +427 -427
- package/src/main.js +702 -702
- package/src/mode-layer.js +391 -391
- package/src/player.js +178 -178
- package/src/playhead-layer.js +423 -423
- package/src/segment-shape.js +354 -354
- package/src/segment.js +263 -263
- package/src/segments-group.js +765 -765
- package/src/source-group.js +987 -987
- package/src/source.js +688 -688
- package/src/sources-layer.js +592 -592
- package/src/timeline-axis.js +238 -238
- package/src/timeline-segments.js +395 -395
- package/src/timeline-sources.js +431 -431
- package/src/timeline-zoomview.js +880 -880
- package/src/utils.js +339 -339
- package/src/waveform-shape.js +216 -216
package/src/data-retriever.js
CHANGED
|
@@ -1,90 +1,90 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* @file
|
|
3
|
-
*
|
|
4
|
-
* Retrieving functions for external or internal media data.
|
|
5
|
-
*
|
|
6
|
-
* @module data-retriever
|
|
7
|
-
*/
|
|
8
|
-
|
|
9
|
-
define([
|
|
10
|
-
'./data'
|
|
11
|
-
], function(Data) {
|
|
12
|
-
'use strict';
|
|
13
|
-
|
|
14
|
-
/**
|
|
15
|
-
* Creates a DataRetriever that will look for and download sources data.
|
|
16
|
-
*
|
|
17
|
-
* @class
|
|
18
|
-
* @alias DataRetriever
|
|
19
|
-
*
|
|
20
|
-
* @param {Peaks} peaks
|
|
21
|
-
*/
|
|
22
|
-
|
|
23
|
-
function DataRetriever(peaks) {
|
|
24
|
-
this._peaks = peaks;
|
|
25
|
-
this._data = {};
|
|
26
|
-
this._waitingForData = {};
|
|
27
|
-
}
|
|
28
|
-
|
|
29
|
-
/**
|
|
30
|
-
* Retrieves data for the given source.
|
|
31
|
-
*
|
|
32
|
-
* @param {Source} options
|
|
33
|
-
*/
|
|
34
|
-
|
|
35
|
-
DataRetriever.prototype.retrieveData = function(source) {
|
|
36
|
-
this._retrieveDataByUrl(source, source.previewUrl);
|
|
37
|
-
this._retrieveDataByUrl(source, source.binaryUrl);
|
|
38
|
-
};
|
|
39
|
-
|
|
40
|
-
DataRetriever.prototype._retrieveDataByUrl = function(source, url) {
|
|
41
|
-
if (url && url !== '') {
|
|
42
|
-
if (!this._data[url]) {
|
|
43
|
-
this._retireveDataOnline(source, url);
|
|
44
|
-
}
|
|
45
|
-
else {
|
|
46
|
-
if (this._data[url].isComplete()) {
|
|
47
|
-
this._peaks.emit('data.retrieved', this._data[url], source, url);
|
|
48
|
-
}
|
|
49
|
-
else {
|
|
50
|
-
this._waitingForData[url].push(source);
|
|
51
|
-
}
|
|
52
|
-
}
|
|
53
|
-
}
|
|
54
|
-
};
|
|
55
|
-
|
|
56
|
-
DataRetriever.prototype._retireveDataOnline = function(source, url) {
|
|
57
|
-
var self = this;
|
|
58
|
-
|
|
59
|
-
var data = new Data();
|
|
60
|
-
|
|
61
|
-
this._data[url] = data;
|
|
62
|
-
this._waitingForData[url] = [source];
|
|
63
|
-
|
|
64
|
-
fetch(url)
|
|
65
|
-
.then(function(response) {
|
|
66
|
-
return response.blob();
|
|
67
|
-
})
|
|
68
|
-
.then(function(blob) {
|
|
69
|
-
var type = blob.type;
|
|
70
|
-
|
|
71
|
-
if (type) {
|
|
72
|
-
type = type.split('/')[0];
|
|
73
|
-
}
|
|
74
|
-
else {
|
|
75
|
-
type = 'other';
|
|
76
|
-
}
|
|
77
|
-
|
|
78
|
-
data.type = type;
|
|
79
|
-
data.content = URL.createObjectURL(blob);
|
|
80
|
-
|
|
81
|
-
if (self._waitingForData[url]) {
|
|
82
|
-
self._waitingForData[url].forEach(function(src) {
|
|
83
|
-
self._peaks.emit('data.retrieved', data, src, url);
|
|
84
|
-
});
|
|
85
|
-
}
|
|
86
|
-
});
|
|
87
|
-
};
|
|
88
|
-
|
|
89
|
-
return DataRetriever;
|
|
1
|
+
/**
|
|
2
|
+
* @file
|
|
3
|
+
*
|
|
4
|
+
* Retrieving functions for external or internal media data.
|
|
5
|
+
*
|
|
6
|
+
* @module data-retriever
|
|
7
|
+
*/
|
|
8
|
+
|
|
9
|
+
define([
|
|
10
|
+
'./data'
|
|
11
|
+
], function(Data) {
|
|
12
|
+
'use strict';
|
|
13
|
+
|
|
14
|
+
/**
|
|
15
|
+
* Creates a DataRetriever that will look for and download sources data.
|
|
16
|
+
*
|
|
17
|
+
* @class
|
|
18
|
+
* @alias DataRetriever
|
|
19
|
+
*
|
|
20
|
+
* @param {Peaks} peaks
|
|
21
|
+
*/
|
|
22
|
+
|
|
23
|
+
function DataRetriever(peaks) {
|
|
24
|
+
this._peaks = peaks;
|
|
25
|
+
this._data = {};
|
|
26
|
+
this._waitingForData = {};
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
/**
|
|
30
|
+
* Retrieves data for the given source.
|
|
31
|
+
*
|
|
32
|
+
* @param {Source} options
|
|
33
|
+
*/
|
|
34
|
+
|
|
35
|
+
DataRetriever.prototype.retrieveData = function(source) {
|
|
36
|
+
this._retrieveDataByUrl(source, source.previewUrl);
|
|
37
|
+
this._retrieveDataByUrl(source, source.binaryUrl);
|
|
38
|
+
};
|
|
39
|
+
|
|
40
|
+
DataRetriever.prototype._retrieveDataByUrl = function(source, url) {
|
|
41
|
+
if (url && url !== '') {
|
|
42
|
+
if (!this._data[url]) {
|
|
43
|
+
this._retireveDataOnline(source, url);
|
|
44
|
+
}
|
|
45
|
+
else {
|
|
46
|
+
if (this._data[url].isComplete()) {
|
|
47
|
+
this._peaks.emit('data.retrieved', this._data[url], source, url);
|
|
48
|
+
}
|
|
49
|
+
else {
|
|
50
|
+
this._waitingForData[url].push(source);
|
|
51
|
+
}
|
|
52
|
+
}
|
|
53
|
+
}
|
|
54
|
+
};
|
|
55
|
+
|
|
56
|
+
DataRetriever.prototype._retireveDataOnline = function(source, url) {
|
|
57
|
+
var self = this;
|
|
58
|
+
|
|
59
|
+
var data = new Data();
|
|
60
|
+
|
|
61
|
+
this._data[url] = data;
|
|
62
|
+
this._waitingForData[url] = [source];
|
|
63
|
+
|
|
64
|
+
fetch(url)
|
|
65
|
+
.then(function(response) {
|
|
66
|
+
return response.blob();
|
|
67
|
+
})
|
|
68
|
+
.then(function(blob) {
|
|
69
|
+
var type = blob.type;
|
|
70
|
+
|
|
71
|
+
if (type) {
|
|
72
|
+
type = type.split('/')[0];
|
|
73
|
+
}
|
|
74
|
+
else {
|
|
75
|
+
type = 'other';
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
data.type = type;
|
|
79
|
+
data.content = URL.createObjectURL(blob);
|
|
80
|
+
|
|
81
|
+
if (self._waitingForData[url]) {
|
|
82
|
+
self._waitingForData[url].forEach(function(src) {
|
|
83
|
+
self._peaks.emit('data.retrieved', data, src, url);
|
|
84
|
+
});
|
|
85
|
+
}
|
|
86
|
+
});
|
|
87
|
+
};
|
|
88
|
+
|
|
89
|
+
return DataRetriever;
|
|
90
90
|
});
|
|
@@ -1,132 +1,132 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* @file
|
|
3
|
-
*
|
|
4
|
-
* Defines the {@link DefaultSegmentMarker} class.
|
|
5
|
-
*
|
|
6
|
-
* @module default-segment-marker
|
|
7
|
-
*/
|
|
8
|
-
|
|
9
|
-
define([
|
|
10
|
-
'./utils',
|
|
11
|
-
'konva'
|
|
12
|
-
], function(
|
|
13
|
-
Utils,
|
|
14
|
-
Konva) {
|
|
15
|
-
'use strict';
|
|
16
|
-
|
|
17
|
-
/**
|
|
18
|
-
* Creates a segment marker handle.
|
|
19
|
-
*
|
|
20
|
-
* @class
|
|
21
|
-
* @alias DefaultSegmentMarker
|
|
22
|
-
*
|
|
23
|
-
* @param {CreateSegmentMarkerOptions} options
|
|
24
|
-
*/
|
|
25
|
-
|
|
26
|
-
function DefaultSegmentMarker(options) {
|
|
27
|
-
this._options = options;
|
|
28
|
-
}
|
|
29
|
-
|
|
30
|
-
DefaultSegmentMarker.prototype.init = function(group) {
|
|
31
|
-
this._handleWidth = this._options.segmentWidth;
|
|
32
|
-
this._handleHeight = this._options.segmentHeight;
|
|
33
|
-
|
|
34
|
-
this._group = group;
|
|
35
|
-
|
|
36
|
-
// var handleX = -(this._handleWidth / 2) + 0.5; // Place in the middle of the marker
|
|
37
|
-
|
|
38
|
-
var time = this._options.startMarker ? this._options.segment.startTime :
|
|
39
|
-
this._options.segment.endTime;
|
|
40
|
-
|
|
41
|
-
// Label - create with default y, the real value is set in fitToView().
|
|
42
|
-
this._label = new Konva.Text({
|
|
43
|
-
x: 0,
|
|
44
|
-
y: 0,
|
|
45
|
-
text: Utils.removeLineBreaks(Utils.formatTime(time, false)),
|
|
46
|
-
fontSize: 10,
|
|
47
|
-
fontFamily: 'sans-serif',
|
|
48
|
-
fontStyle: 'bold',
|
|
49
|
-
fill: this._options.segment.handleTextColor,
|
|
50
|
-
textAlign: 'center'
|
|
51
|
-
});
|
|
52
|
-
|
|
53
|
-
this._label.hide();
|
|
54
|
-
|
|
55
|
-
// Handle - create with default y, the real value is set in fitToView().
|
|
56
|
-
if (this._options.segment.editable && this._options.showSegmentMarkers) {
|
|
57
|
-
this._handle = new Konva.Rect({
|
|
58
|
-
x: 0,
|
|
59
|
-
y: this._options.y,
|
|
60
|
-
width: this._handleWidth,
|
|
61
|
-
height: this._handleHeight,
|
|
62
|
-
opacity: 0
|
|
63
|
-
});
|
|
64
|
-
}
|
|
65
|
-
|
|
66
|
-
var positionX = this._options.startMarker ? -this._label.width() - 1 : this._handleWidth + 1;
|
|
67
|
-
|
|
68
|
-
this._label.setX(positionX);
|
|
69
|
-
|
|
70
|
-
group.add(this._label);
|
|
71
|
-
|
|
72
|
-
if (this._handle) {
|
|
73
|
-
group.add(this._handle);
|
|
74
|
-
}
|
|
75
|
-
|
|
76
|
-
this.bindEventHandlers(group);
|
|
77
|
-
};
|
|
78
|
-
|
|
79
|
-
DefaultSegmentMarker.prototype.getHandleWidth = function() {
|
|
80
|
-
return this._handleWidth;
|
|
81
|
-
};
|
|
82
|
-
|
|
83
|
-
DefaultSegmentMarker.prototype.bindEventHandlers = function(group) {
|
|
84
|
-
var self = this;
|
|
85
|
-
|
|
86
|
-
if (self._options.draggable) {
|
|
87
|
-
group.on('dragstart', function() {
|
|
88
|
-
self._label.show();
|
|
89
|
-
self._options.group.draw();
|
|
90
|
-
});
|
|
91
|
-
|
|
92
|
-
group.on('dragend', function() {
|
|
93
|
-
self._label.hide();
|
|
94
|
-
self._options.group.draw();
|
|
95
|
-
});
|
|
96
|
-
}
|
|
97
|
-
|
|
98
|
-
if (self._handle) {
|
|
99
|
-
self._handle.on('mouseover touchstart', function() {
|
|
100
|
-
self._options.view.setCursor('ew-resize');
|
|
101
|
-
self._label.show();
|
|
102
|
-
self._group.moveToTop();
|
|
103
|
-
self._options.view.drawSourcesLayer();
|
|
104
|
-
});
|
|
105
|
-
|
|
106
|
-
self._handle.on('mouseout touchend', function() {
|
|
107
|
-
self._options.view.setCursor('default');
|
|
108
|
-
self._label.hide();
|
|
109
|
-
self._options.view.drawSourcesLayer();
|
|
110
|
-
});
|
|
111
|
-
}
|
|
112
|
-
};
|
|
113
|
-
|
|
114
|
-
DefaultSegmentMarker.prototype.getWidth = function() {
|
|
115
|
-
return this._handle ? this._handle.width() : 0;
|
|
116
|
-
};
|
|
117
|
-
|
|
118
|
-
DefaultSegmentMarker.prototype.setWidth = function(value) {
|
|
119
|
-
if (this._handle) {
|
|
120
|
-
this._handle.width(value);
|
|
121
|
-
if (!this._options.startMarker) {
|
|
122
|
-
this._label.setX(value + 1);
|
|
123
|
-
}
|
|
124
|
-
}
|
|
125
|
-
};
|
|
126
|
-
|
|
127
|
-
DefaultSegmentMarker.prototype.timeUpdated = function(time) {
|
|
128
|
-
this._label.setText(Utils.formatTime(time, false));
|
|
129
|
-
};
|
|
130
|
-
|
|
131
|
-
return DefaultSegmentMarker;
|
|
132
|
-
});
|
|
1
|
+
/**
|
|
2
|
+
* @file
|
|
3
|
+
*
|
|
4
|
+
* Defines the {@link DefaultSegmentMarker} class.
|
|
5
|
+
*
|
|
6
|
+
* @module default-segment-marker
|
|
7
|
+
*/
|
|
8
|
+
|
|
9
|
+
define([
|
|
10
|
+
'./utils',
|
|
11
|
+
'konva'
|
|
12
|
+
], function(
|
|
13
|
+
Utils,
|
|
14
|
+
Konva) {
|
|
15
|
+
'use strict';
|
|
16
|
+
|
|
17
|
+
/**
|
|
18
|
+
* Creates a segment marker handle.
|
|
19
|
+
*
|
|
20
|
+
* @class
|
|
21
|
+
* @alias DefaultSegmentMarker
|
|
22
|
+
*
|
|
23
|
+
* @param {CreateSegmentMarkerOptions} options
|
|
24
|
+
*/
|
|
25
|
+
|
|
26
|
+
function DefaultSegmentMarker(options) {
|
|
27
|
+
this._options = options;
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
DefaultSegmentMarker.prototype.init = function(group) {
|
|
31
|
+
this._handleWidth = this._options.segmentWidth;
|
|
32
|
+
this._handleHeight = this._options.segmentHeight;
|
|
33
|
+
|
|
34
|
+
this._group = group;
|
|
35
|
+
|
|
36
|
+
// var handleX = -(this._handleWidth / 2) + 0.5; // Place in the middle of the marker
|
|
37
|
+
|
|
38
|
+
var time = this._options.startMarker ? this._options.segment.startTime :
|
|
39
|
+
this._options.segment.endTime;
|
|
40
|
+
|
|
41
|
+
// Label - create with default y, the real value is set in fitToView().
|
|
42
|
+
this._label = new Konva.Text({
|
|
43
|
+
x: 0,
|
|
44
|
+
y: 0,
|
|
45
|
+
text: Utils.removeLineBreaks(Utils.formatTime(time, false)),
|
|
46
|
+
fontSize: 10,
|
|
47
|
+
fontFamily: 'sans-serif',
|
|
48
|
+
fontStyle: 'bold',
|
|
49
|
+
fill: this._options.segment.handleTextColor,
|
|
50
|
+
textAlign: 'center'
|
|
51
|
+
});
|
|
52
|
+
|
|
53
|
+
this._label.hide();
|
|
54
|
+
|
|
55
|
+
// Handle - create with default y, the real value is set in fitToView().
|
|
56
|
+
if (this._options.segment.editable && this._options.showSegmentMarkers) {
|
|
57
|
+
this._handle = new Konva.Rect({
|
|
58
|
+
x: 0,
|
|
59
|
+
y: this._options.y,
|
|
60
|
+
width: this._handleWidth,
|
|
61
|
+
height: this._handleHeight,
|
|
62
|
+
opacity: 0
|
|
63
|
+
});
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
var positionX = this._options.startMarker ? -this._label.width() - 1 : this._handleWidth + 1;
|
|
67
|
+
|
|
68
|
+
this._label.setX(positionX);
|
|
69
|
+
|
|
70
|
+
group.add(this._label);
|
|
71
|
+
|
|
72
|
+
if (this._handle) {
|
|
73
|
+
group.add(this._handle);
|
|
74
|
+
}
|
|
75
|
+
|
|
76
|
+
this.bindEventHandlers(group);
|
|
77
|
+
};
|
|
78
|
+
|
|
79
|
+
DefaultSegmentMarker.prototype.getHandleWidth = function() {
|
|
80
|
+
return this._handleWidth;
|
|
81
|
+
};
|
|
82
|
+
|
|
83
|
+
DefaultSegmentMarker.prototype.bindEventHandlers = function(group) {
|
|
84
|
+
var self = this;
|
|
85
|
+
|
|
86
|
+
if (self._options.draggable) {
|
|
87
|
+
group.on('dragstart', function() {
|
|
88
|
+
self._label.show();
|
|
89
|
+
self._options.group.draw();
|
|
90
|
+
});
|
|
91
|
+
|
|
92
|
+
group.on('dragend', function() {
|
|
93
|
+
self._label.hide();
|
|
94
|
+
self._options.group.draw();
|
|
95
|
+
});
|
|
96
|
+
}
|
|
97
|
+
|
|
98
|
+
if (self._handle) {
|
|
99
|
+
self._handle.on('mouseover touchstart', function() {
|
|
100
|
+
self._options.view.setCursor('ew-resize');
|
|
101
|
+
self._label.show();
|
|
102
|
+
self._group.moveToTop();
|
|
103
|
+
self._options.view.drawSourcesLayer();
|
|
104
|
+
});
|
|
105
|
+
|
|
106
|
+
self._handle.on('mouseout touchend', function() {
|
|
107
|
+
self._options.view.setCursor('default');
|
|
108
|
+
self._label.hide();
|
|
109
|
+
self._options.view.drawSourcesLayer();
|
|
110
|
+
});
|
|
111
|
+
}
|
|
112
|
+
};
|
|
113
|
+
|
|
114
|
+
DefaultSegmentMarker.prototype.getWidth = function() {
|
|
115
|
+
return this._handle ? this._handle.width() : 0;
|
|
116
|
+
};
|
|
117
|
+
|
|
118
|
+
DefaultSegmentMarker.prototype.setWidth = function(value) {
|
|
119
|
+
if (this._handle) {
|
|
120
|
+
this._handle.width(value);
|
|
121
|
+
if (!this._options.startMarker) {
|
|
122
|
+
this._label.setX(value + 1);
|
|
123
|
+
}
|
|
124
|
+
}
|
|
125
|
+
};
|
|
126
|
+
|
|
127
|
+
DefaultSegmentMarker.prototype.timeUpdated = function(time) {
|
|
128
|
+
this._label.setText(Utils.formatTime(time, false));
|
|
129
|
+
};
|
|
130
|
+
|
|
131
|
+
return DefaultSegmentMarker;
|
|
132
|
+
});
|
package/src/invoker.js
CHANGED
|
@@ -1,81 +1,81 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* @file
|
|
3
|
-
*
|
|
4
|
-
* Defines the {@link invoker} class.
|
|
5
|
-
*
|
|
6
|
-
* @module invoker
|
|
7
|
-
*/
|
|
8
|
-
|
|
9
|
-
define([
|
|
10
|
-
], function() {
|
|
11
|
-
'use strict';
|
|
12
|
-
|
|
13
|
-
/**
|
|
14
|
-
* An invoker class for throttling.
|
|
15
|
-
*
|
|
16
|
-
* @class
|
|
17
|
-
* @alias Invoker
|
|
18
|
-
*/
|
|
19
|
-
|
|
20
|
-
function Invoker() {
|
|
21
|
-
this._throttledFunc = {};
|
|
22
|
-
}
|
|
23
|
-
|
|
24
|
-
Invoker.prototype.throttle = function(id, func, wait) {
|
|
25
|
-
var self = this;
|
|
26
|
-
|
|
27
|
-
if (this._throttledFunc[id]) {
|
|
28
|
-
// Already limiting
|
|
29
|
-
this._throttledFunc[id].func = func;
|
|
30
|
-
this._throttledFunc[id].continue = true;
|
|
31
|
-
}
|
|
32
|
-
else {
|
|
33
|
-
// Create a limit
|
|
34
|
-
this._throttledFunc[id] = {
|
|
35
|
-
func: func,
|
|
36
|
-
timer: null,
|
|
37
|
-
continue: true
|
|
38
|
-
};
|
|
39
|
-
|
|
40
|
-
this._throttledFunc[id].timer = setInterval(function() {
|
|
41
|
-
if (self._throttledFunc[id].continue) {
|
|
42
|
-
func();
|
|
43
|
-
self._throttledFunc[id].continue = false;
|
|
44
|
-
}
|
|
45
|
-
else {
|
|
46
|
-
clearInterval(self._throttledFunc[id].timer);
|
|
47
|
-
delete self._throttledFunc[id];
|
|
48
|
-
}
|
|
49
|
-
}, wait);
|
|
50
|
-
}
|
|
51
|
-
};
|
|
52
|
-
|
|
53
|
-
Invoker.prototype.debounce = function(func, wait, immediate) {
|
|
54
|
-
var timeout;
|
|
55
|
-
|
|
56
|
-
return function executedFunction() {
|
|
57
|
-
// eslint-disable-next-line consistent-this
|
|
58
|
-
var _self = this;
|
|
59
|
-
var args = arguments;
|
|
60
|
-
|
|
61
|
-
function later() {
|
|
62
|
-
timeout = null;
|
|
63
|
-
if (!immediate) {
|
|
64
|
-
func.apply(_self, args);
|
|
65
|
-
}
|
|
66
|
-
}
|
|
67
|
-
|
|
68
|
-
var callNow = immediate && !timeout;
|
|
69
|
-
|
|
70
|
-
clearTimeout(timeout);
|
|
71
|
-
|
|
72
|
-
timeout = setTimeout(later, wait);
|
|
73
|
-
|
|
74
|
-
if (callNow) {
|
|
75
|
-
func.apply(_self, args);
|
|
76
|
-
}
|
|
77
|
-
};
|
|
78
|
-
};
|
|
79
|
-
|
|
80
|
-
return Invoker;
|
|
81
|
-
});
|
|
1
|
+
/**
|
|
2
|
+
* @file
|
|
3
|
+
*
|
|
4
|
+
* Defines the {@link invoker} class.
|
|
5
|
+
*
|
|
6
|
+
* @module invoker
|
|
7
|
+
*/
|
|
8
|
+
|
|
9
|
+
define([
|
|
10
|
+
], function() {
|
|
11
|
+
'use strict';
|
|
12
|
+
|
|
13
|
+
/**
|
|
14
|
+
* An invoker class for throttling.
|
|
15
|
+
*
|
|
16
|
+
* @class
|
|
17
|
+
* @alias Invoker
|
|
18
|
+
*/
|
|
19
|
+
|
|
20
|
+
function Invoker() {
|
|
21
|
+
this._throttledFunc = {};
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
Invoker.prototype.throttle = function(id, func, wait) {
|
|
25
|
+
var self = this;
|
|
26
|
+
|
|
27
|
+
if (this._throttledFunc[id]) {
|
|
28
|
+
// Already limiting
|
|
29
|
+
this._throttledFunc[id].func = func;
|
|
30
|
+
this._throttledFunc[id].continue = true;
|
|
31
|
+
}
|
|
32
|
+
else {
|
|
33
|
+
// Create a limit
|
|
34
|
+
this._throttledFunc[id] = {
|
|
35
|
+
func: func,
|
|
36
|
+
timer: null,
|
|
37
|
+
continue: true
|
|
38
|
+
};
|
|
39
|
+
|
|
40
|
+
this._throttledFunc[id].timer = setInterval(function() {
|
|
41
|
+
if (self._throttledFunc[id].continue) {
|
|
42
|
+
func();
|
|
43
|
+
self._throttledFunc[id].continue = false;
|
|
44
|
+
}
|
|
45
|
+
else {
|
|
46
|
+
clearInterval(self._throttledFunc[id].timer);
|
|
47
|
+
delete self._throttledFunc[id];
|
|
48
|
+
}
|
|
49
|
+
}, wait);
|
|
50
|
+
}
|
|
51
|
+
};
|
|
52
|
+
|
|
53
|
+
Invoker.prototype.debounce = function(func, wait, immediate) {
|
|
54
|
+
var timeout;
|
|
55
|
+
|
|
56
|
+
return function executedFunction() {
|
|
57
|
+
// eslint-disable-next-line consistent-this
|
|
58
|
+
var _self = this;
|
|
59
|
+
var args = arguments;
|
|
60
|
+
|
|
61
|
+
function later() {
|
|
62
|
+
timeout = null;
|
|
63
|
+
if (!immediate) {
|
|
64
|
+
func.apply(_self, args);
|
|
65
|
+
}
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
var callNow = immediate && !timeout;
|
|
69
|
+
|
|
70
|
+
clearTimeout(timeout);
|
|
71
|
+
|
|
72
|
+
timeout = setTimeout(later, wait);
|
|
73
|
+
|
|
74
|
+
if (callNow) {
|
|
75
|
+
func.apply(_self, args);
|
|
76
|
+
}
|
|
77
|
+
};
|
|
78
|
+
};
|
|
79
|
+
|
|
80
|
+
return Invoker;
|
|
81
|
+
});
|