Subversion Repositories Applications.papyrus

Rev

Rev 1372 | Only display areas with differences | Ignore whitespace | Details | Blame | Last modification | View Log | RSS feed

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