Progress.js
1.55 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
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
/**
* Progress.js
*
* Released under LGPL License.
* Copyright (c) 1999-2015 Ephox Corp. All rights reserved
*
* License: http://www.tinymce.com/license
* Contributing: http://www.tinymce.com/contributing
*/
/**
* Progress control.
*
* @-x-less Progress.less
* @class tinymce.ui.Progress
* @extends tinymce.ui.Control
*/
define("tinymce/ui/Progress", [
"tinymce/ui/Widget"
], function(Widget) {
"use strict";
return Widget.extend({
Defaults: {
value: 0
},
init: function(settings) {
var self = this;
self._super(settings);
self.classes.add('progress');
if (!self.settings.filter) {
self.settings.filter = function(value) {
return Math.round(value);
};
}
},
renderHtml: function() {
var self = this, id = self._id, prefix = this.classPrefix;
return (
'<div id="' + id + '" class="' + self.classes + '">' +
'<div class="' + prefix + 'bar-container">' +
'<div class="' + prefix + 'bar"></div>' +
'</div>' +
'<div class="' + prefix + 'text">0%</div>' +
'</div>'
);
},
postRender: function() {
var self = this;
self._super();
self.value(self.settings.value);
return self;
},
bindStates: function() {
var self = this;
function setValue(value) {
value = self.settings.filter(value);
self.getEl().lastChild.innerHTML = value + '%';
self.getEl().firstChild.firstChild.style.width = value + '%';
}
self.state.on('change:value', function(e) {
setValue(e.value);
});
setValue(self.state.get('value'));
return self._super();
}
});
});