1318 |
alexandre_ |
1 |
/*
|
|
|
2 |
Copyright (c) 2004-2006, The Dojo Foundation
|
|
|
3 |
All Rights Reserved.
|
|
|
4 |
|
|
|
5 |
Licensed under the Academic Free License version 2.1 or above OR the
|
|
|
6 |
modified BSD license. For more information on Dojo licensing, see:
|
|
|
7 |
|
|
|
8 |
http://dojotoolkit.org/community/licensing.shtml
|
|
|
9 |
*/
|
|
|
10 |
|
1422 |
alexandre_ |
11 |
|
|
|
12 |
|
1318 |
alexandre_ |
13 |
dojo.provide("dojo.widget.ProgressBar");
|
|
|
14 |
dojo.require("dojo.widget.*");
|
|
|
15 |
dojo.require("dojo.event");
|
|
|
16 |
dojo.require("dojo.dom");
|
|
|
17 |
dojo.require("dojo.html.style");
|
|
|
18 |
dojo.require("dojo.string.*");
|
|
|
19 |
dojo.require("dojo.lfx.*");
|
|
|
20 |
dojo.widget.defineWidget("dojo.widget.ProgressBar", dojo.widget.HtmlWidget, {progressValue:0, maxProgressValue:100, width:300, height:30, frontPercentClass:"frontPercent", backPercentClass:"backPercent", frontBarClass:"frontBar", backBarClass:"backBar", hasText:false, isVertical:false, showOnlyIntegers:false, dataSource:"", pollInterval:3000, duration:1000, templateString:"<div dojoAttachPoint=\"containerNode\" style=\"position:relative;overflow:hidden\">\n\t<div style=\"position:absolute;display:none;width:100%;text-align:center\" dojoAttachPoint=\"backPercentLabel\" class=\"dojoBackPercentLabel\"></div>\n\t<div style=\"position:absolute;overflow:hidden;width:100%;height:100%\" dojoAttachPoint=\"internalProgress\">\n\t<div style=\"position:absolute;display:none;width:100%;text-align:center\" dojoAttachPoint=\"frontPercentLabel\" class=\"dojoFrontPercentLabel\"></div></div>\n</div>\n", templateCssString:".backBar{\n\tborder:1px solid #84a3d1;\n}\n.frontBar{\n\tbackground:url(\"images/bar.gif\") repeat bottom left;\n\tbackground-attachment: fixed;\n}\n.h-frontBar{\n\tbackground:url(\"images/h-bar.gif\") repeat bottom left;\n\tbackground-attachment: fixed;\n}\n.simpleFrontBar{\n\tbackground: red;\n}\n.frontPercent,.backPercent{\n\tfont:bold 13px helvetica;\n}\n.backPercent{\n\tcolor:#293a4b;\n}\n.frontPercent{\n\tcolor:#fff;\n}\n", templateCssPath:dojo.uri.moduleUri("dojo.widget", "templates/ProgressBar.css"), containerNode:null, internalProgress:null, _pixelUnitRatio:0, _pixelPercentRatio:0, _unitPercentRatio:0, _unitPixelRatio:0, _floatDimension:0, _intDimension:0, _progressPercentValue:"0%", _floatMaxProgressValue:0, _dimension:"width", _pixelValue:0, _oInterval:null, _animation:null, _animationStopped:true, _progressValueBak:false, _hasTextBak:false, fillInTemplate:function (args, frag) {
|
|
|
21 |
this.internalProgress.className = this.frontBarClass;
|
|
|
22 |
this.containerNode.className = this.backBarClass;
|
|
|
23 |
if (this.isVertical) {
|
|
|
24 |
this.internalProgress.style.bottom = "0px";
|
|
|
25 |
this.internalProgress.style.left = "0px";
|
|
|
26 |
this._dimension = "height";
|
|
|
27 |
} else {
|
|
|
28 |
this.internalProgress.style.top = "0px";
|
|
|
29 |
this.internalProgress.style.left = "0px";
|
|
|
30 |
this._dimension = "width";
|
|
|
31 |
}
|
|
|
32 |
this.frontPercentLabel.className = this.frontPercentClass;
|
|
|
33 |
this.backPercentLabel.className = this.backPercentClass;
|
|
|
34 |
this.progressValue = "" + this.progressValue;
|
|
|
35 |
this.domNode.style.height = this.height + "px";
|
|
|
36 |
this.domNode.style.width = this.width + "px";
|
|
|
37 |
this._intDimension = parseInt("0" + eval("this." + this._dimension));
|
|
|
38 |
this._floatDimension = parseFloat("0" + eval("this." + this._dimension));
|
|
|
39 |
this._pixelPercentRatio = this._floatDimension / 100;
|
|
|
40 |
this.setMaxProgressValue(this.maxProgressValue, true);
|
|
|
41 |
this.setProgressValue(dojo.string.trim(this.progressValue), true);
|
|
|
42 |
dojo.debug("float dimension: " + this._floatDimension);
|
|
|
43 |
dojo.debug("this._unitPixelRatio: " + this._unitPixelRatio);
|
|
|
44 |
this.showText(this.hasText);
|
|
|
45 |
}, showText:function (visible) {
|
|
|
46 |
if (visible) {
|
|
|
47 |
this.backPercentLabel.style.display = "block";
|
|
|
48 |
this.frontPercentLabel.style.display = "block";
|
|
|
49 |
} else {
|
|
|
50 |
this.backPercentLabel.style.display = "none";
|
|
|
51 |
this.frontPercentLabel.style.display = "none";
|
|
|
52 |
}
|
|
|
53 |
this.hasText = visible;
|
|
|
54 |
}, postCreate:function (args, frag) {
|
|
|
55 |
this.render();
|
|
|
56 |
}, _backupValues:function () {
|
|
|
57 |
this._progressValueBak = this.progressValue;
|
|
|
58 |
this._hasTextBak = this.hasText;
|
|
|
59 |
}, _restoreValues:function () {
|
|
|
60 |
this.setProgressValue(this._progressValueBak);
|
|
|
61 |
this.showText(this._hasTextBak);
|
|
|
62 |
}, _setupAnimation:function () {
|
|
|
63 |
var _self = this;
|
|
|
64 |
dojo.debug("internalProgress width: " + this.internalProgress.style.width);
|
|
|
65 |
this._animation = dojo.lfx.html.slideTo(this.internalProgress, {top:0, left:parseInt(this.width) - parseInt(this.internalProgress.style.width)}, parseInt(this.duration), null, function () {
|
|
|
66 |
var _backAnim = dojo.lfx.html.slideTo(_self.internalProgress, {top:0, left:0}, parseInt(_self.duration));
|
|
|
67 |
dojo.event.connect(_backAnim, "onEnd", function () {
|
|
|
68 |
if (!_self._animationStopped) {
|
|
|
69 |
_self._animation.play();
|
|
|
70 |
}
|
|
|
71 |
});
|
|
|
72 |
if (!_self._animationStopped) {
|
|
|
73 |
_backAnim.play();
|
|
|
74 |
}
|
|
|
75 |
_backAnim = null;
|
|
|
76 |
});
|
|
|
77 |
}, getMaxProgressValue:function () {
|
|
|
78 |
return this.maxProgressValue;
|
|
|
79 |
}, setMaxProgressValue:function (maxValue, noRender) {
|
|
|
80 |
if (!this._animationStopped) {
|
|
|
81 |
return;
|
|
|
82 |
}
|
|
|
83 |
this.maxProgressValue = maxValue;
|
|
|
84 |
this._floatMaxProgressValue = parseFloat("0" + this.maxProgressValue);
|
|
|
85 |
this._pixelUnitRatio = this._floatDimension / this.maxProgressValue;
|
|
|
86 |
this._unitPercentRatio = this._floatMaxProgressValue / 100;
|
|
|
87 |
this._unitPixelRatio = this._floatMaxProgressValue / this._floatDimension;
|
|
|
88 |
this.setProgressValue(this.progressValue, true);
|
|
|
89 |
if (!noRender) {
|
|
|
90 |
this.render();
|
|
|
91 |
}
|
|
|
92 |
}, setProgressValue:function (value, noRender) {
|
|
|
93 |
if (!this._animationStopped) {
|
|
|
94 |
return;
|
|
|
95 |
}
|
|
|
96 |
this._progressPercentValue = "0%";
|
|
|
97 |
var _value = dojo.string.trim("" + value);
|
|
|
98 |
var _floatValue = parseFloat("0" + _value);
|
|
|
99 |
var _intValue = parseInt("0" + _value);
|
|
|
100 |
var _pixelValue = 0;
|
|
|
101 |
if (dojo.string.endsWith(_value, "%", false)) {
|
|
|
102 |
this._progressPercentValue = Math.min(_floatValue.toFixed(1), 100) + "%";
|
|
|
103 |
_value = Math.min((_floatValue) * this._unitPercentRatio, this.maxProgressValue);
|
|
|
104 |
_pixelValue = Math.min((_floatValue) * this._pixelPercentRatio, eval("this." + this._dimension));
|
|
|
105 |
} else {
|
|
|
106 |
this.progressValue = Math.min(_floatValue, this.maxProgressValue);
|
|
|
107 |
this._progressPercentValue = Math.min((_floatValue / this._unitPercentRatio).toFixed(1), 100) + "%";
|
|
|
108 |
_pixelValue = Math.min(_floatValue / this._unitPixelRatio, eval("this." + this._dimension));
|
|
|
109 |
}
|
|
|
110 |
this.progressValue = dojo.string.trim(_value);
|
|
|
111 |
this._pixelValue = _pixelValue;
|
|
|
112 |
if (!noRender) {
|
|
|
113 |
this.render();
|
|
|
114 |
}
|
|
|
115 |
}, getProgressValue:function () {
|
|
|
116 |
return this.progressValue;
|
|
|
117 |
}, getProgressPercentValue:function () {
|
|
|
118 |
return this._progressPercentValue;
|
|
|
119 |
}, setDataSource:function (dataSource) {
|
|
|
120 |
this.dataSource = dataSource;
|
|
|
121 |
}, setPollInterval:function (pollInterval) {
|
|
|
122 |
this.pollInterval = pollInterval;
|
|
|
123 |
}, start:function () {
|
|
|
124 |
var _showFunction = dojo.lang.hitch(this, this._showRemoteProgress);
|
|
|
125 |
this._oInterval = setInterval(_showFunction, this.pollInterval);
|
|
|
126 |
}, startAnimation:function () {
|
|
|
127 |
if (this._animationStopped) {
|
|
|
128 |
this._backupValues();
|
|
|
129 |
this.setProgressValue("10%");
|
|
|
130 |
this._animationStopped = false;
|
|
|
131 |
this._setupAnimation();
|
|
|
132 |
this.showText(false);
|
|
|
133 |
this.internalProgress.style.height = "105%";
|
|
|
134 |
this._animation.play();
|
|
|
135 |
}
|
|
|
136 |
}, stopAnimation:function () {
|
|
|
137 |
if (this._animation) {
|
|
|
138 |
this._animationStopped = true;
|
|
|
139 |
this._animation.stop();
|
|
|
140 |
this.internalProgress.style.height = "100%";
|
|
|
141 |
this.internalProgress.style.left = "0px";
|
|
|
142 |
this._restoreValues();
|
|
|
143 |
this._setLabelPosition();
|
|
|
144 |
}
|
|
|
145 |
}, _showRemoteProgress:function () {
|
|
|
146 |
var _self = this;
|
|
|
147 |
if ((this.getMaxProgressValue() == this.getProgressValue()) && this._oInterval) {
|
|
|
148 |
clearInterval(this._oInterval);
|
|
|
149 |
this._oInterval = null;
|
|
|
150 |
this.setProgressValue("100%");
|
|
|
151 |
return;
|
|
|
152 |
}
|
|
|
153 |
var bArgs = {url:_self.dataSource, method:"POST", mimetype:"text/json", error:function (type, errorObj) {
|
|
|
154 |
dojo.debug("[ProgressBar] showRemoteProgress error");
|
|
|
155 |
}, load:function (type, data, evt) {
|
|
|
156 |
_self.setProgressValue((_self._oInterval ? data["progress"] : "100%"));
|
|
|
157 |
}};
|
|
|
158 |
dojo.io.bind(bArgs);
|
|
|
159 |
}, render:function () {
|
|
|
160 |
this._setPercentLabel(dojo.string.trim(this._progressPercentValue));
|
|
|
161 |
this._setPixelValue(this._pixelValue);
|
|
|
162 |
this._setLabelPosition();
|
|
|
163 |
}, _setLabelPosition:function () {
|
|
|
164 |
var _widthFront = dojo.html.getContentBox(this.frontPercentLabel).width;
|
|
|
165 |
var _heightFront = dojo.html.getContentBox(this.frontPercentLabel).height;
|
|
|
166 |
var _widthBack = dojo.html.getContentBox(this.backPercentLabel).width;
|
|
|
167 |
var _heightBack = dojo.html.getContentBox(this.backPercentLabel).height;
|
|
|
168 |
var _leftFront = (parseInt(this.width) - _widthFront) / 2 + "px";
|
|
|
169 |
var _bottomFront = (parseInt(this.height) - parseInt(_heightFront)) / 2 + "px";
|
|
|
170 |
var _leftBack = (parseInt(this.width) - _widthBack) / 2 + "px";
|
|
|
171 |
var _bottomBack = (parseInt(this.height) - parseInt(_heightBack)) / 2 + "px";
|
|
|
172 |
this.frontPercentLabel.style.left = _leftFront;
|
|
|
173 |
this.backPercentLabel.style.left = _leftBack;
|
|
|
174 |
this.frontPercentLabel.style.bottom = _bottomFront;
|
|
|
175 |
this.backPercentLabel.style.bottom = _bottomBack;
|
|
|
176 |
}, _setPercentLabel:function (percentValue) {
|
|
|
177 |
dojo.dom.removeChildren(this.frontPercentLabel);
|
|
|
178 |
dojo.dom.removeChildren(this.backPercentLabel);
|
|
|
179 |
var _percentValue = this.showOnlyIntegers == false ? percentValue : parseInt(percentValue) + "%";
|
|
|
180 |
this.frontPercentLabel.appendChild(document.createTextNode(_percentValue));
|
|
|
181 |
this.backPercentLabel.appendChild(document.createTextNode(_percentValue));
|
|
|
182 |
}, _setPixelValue:function (value) {
|
|
|
183 |
eval("this.internalProgress.style." + this._dimension + " = " + value + " + 'px'");
|
|
|
184 |
this.onChange();
|
|
|
185 |
}, onChange:function () {
|
|
|
186 |
}});
|
|
|
187 |
|