New file |
0,0 → 1,185 |
/* |
Copyright (c) 2004-2006, The Dojo Foundation |
All Rights Reserved. |
|
Licensed under the Academic Free License version 2.1 or above OR the |
modified BSD license. For more information on Dojo licensing, see: |
|
http://dojotoolkit.org/community/licensing.shtml |
*/ |
|
dojo.provide("dojo.widget.ProgressBar"); |
dojo.require("dojo.widget.*"); |
dojo.require("dojo.event"); |
dojo.require("dojo.dom"); |
dojo.require("dojo.html.style"); |
dojo.require("dojo.string.*"); |
dojo.require("dojo.lfx.*"); |
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) { |
this.internalProgress.className = this.frontBarClass; |
this.containerNode.className = this.backBarClass; |
if (this.isVertical) { |
this.internalProgress.style.bottom = "0px"; |
this.internalProgress.style.left = "0px"; |
this._dimension = "height"; |
} else { |
this.internalProgress.style.top = "0px"; |
this.internalProgress.style.left = "0px"; |
this._dimension = "width"; |
} |
this.frontPercentLabel.className = this.frontPercentClass; |
this.backPercentLabel.className = this.backPercentClass; |
this.progressValue = "" + this.progressValue; |
this.domNode.style.height = this.height + "px"; |
this.domNode.style.width = this.width + "px"; |
this._intDimension = parseInt("0" + eval("this." + this._dimension)); |
this._floatDimension = parseFloat("0" + eval("this." + this._dimension)); |
this._pixelPercentRatio = this._floatDimension / 100; |
this.setMaxProgressValue(this.maxProgressValue, true); |
this.setProgressValue(dojo.string.trim(this.progressValue), true); |
dojo.debug("float dimension: " + this._floatDimension); |
dojo.debug("this._unitPixelRatio: " + this._unitPixelRatio); |
this.showText(this.hasText); |
}, showText:function (visible) { |
if (visible) { |
this.backPercentLabel.style.display = "block"; |
this.frontPercentLabel.style.display = "block"; |
} else { |
this.backPercentLabel.style.display = "none"; |
this.frontPercentLabel.style.display = "none"; |
} |
this.hasText = visible; |
}, postCreate:function (args, frag) { |
this.render(); |
}, _backupValues:function () { |
this._progressValueBak = this.progressValue; |
this._hasTextBak = this.hasText; |
}, _restoreValues:function () { |
this.setProgressValue(this._progressValueBak); |
this.showText(this._hasTextBak); |
}, _setupAnimation:function () { |
var _self = this; |
dojo.debug("internalProgress width: " + this.internalProgress.style.width); |
this._animation = dojo.lfx.html.slideTo(this.internalProgress, {top:0, left:parseInt(this.width) - parseInt(this.internalProgress.style.width)}, parseInt(this.duration), null, function () { |
var _backAnim = dojo.lfx.html.slideTo(_self.internalProgress, {top:0, left:0}, parseInt(_self.duration)); |
dojo.event.connect(_backAnim, "onEnd", function () { |
if (!_self._animationStopped) { |
_self._animation.play(); |
} |
}); |
if (!_self._animationStopped) { |
_backAnim.play(); |
} |
_backAnim = null; |
}); |
}, getMaxProgressValue:function () { |
return this.maxProgressValue; |
}, setMaxProgressValue:function (maxValue, noRender) { |
if (!this._animationStopped) { |
return; |
} |
this.maxProgressValue = maxValue; |
this._floatMaxProgressValue = parseFloat("0" + this.maxProgressValue); |
this._pixelUnitRatio = this._floatDimension / this.maxProgressValue; |
this._unitPercentRatio = this._floatMaxProgressValue / 100; |
this._unitPixelRatio = this._floatMaxProgressValue / this._floatDimension; |
this.setProgressValue(this.progressValue, true); |
if (!noRender) { |
this.render(); |
} |
}, setProgressValue:function (value, noRender) { |
if (!this._animationStopped) { |
return; |
} |
this._progressPercentValue = "0%"; |
var _value = dojo.string.trim("" + value); |
var _floatValue = parseFloat("0" + _value); |
var _intValue = parseInt("0" + _value); |
var _pixelValue = 0; |
if (dojo.string.endsWith(_value, "%", false)) { |
this._progressPercentValue = Math.min(_floatValue.toFixed(1), 100) + "%"; |
_value = Math.min((_floatValue) * this._unitPercentRatio, this.maxProgressValue); |
_pixelValue = Math.min((_floatValue) * this._pixelPercentRatio, eval("this." + this._dimension)); |
} else { |
this.progressValue = Math.min(_floatValue, this.maxProgressValue); |
this._progressPercentValue = Math.min((_floatValue / this._unitPercentRatio).toFixed(1), 100) + "%"; |
_pixelValue = Math.min(_floatValue / this._unitPixelRatio, eval("this." + this._dimension)); |
} |
this.progressValue = dojo.string.trim(_value); |
this._pixelValue = _pixelValue; |
if (!noRender) { |
this.render(); |
} |
}, getProgressValue:function () { |
return this.progressValue; |
}, getProgressPercentValue:function () { |
return this._progressPercentValue; |
}, setDataSource:function (dataSource) { |
this.dataSource = dataSource; |
}, setPollInterval:function (pollInterval) { |
this.pollInterval = pollInterval; |
}, start:function () { |
var _showFunction = dojo.lang.hitch(this, this._showRemoteProgress); |
this._oInterval = setInterval(_showFunction, this.pollInterval); |
}, startAnimation:function () { |
if (this._animationStopped) { |
this._backupValues(); |
this.setProgressValue("10%"); |
this._animationStopped = false; |
this._setupAnimation(); |
this.showText(false); |
this.internalProgress.style.height = "105%"; |
this._animation.play(); |
} |
}, stopAnimation:function () { |
if (this._animation) { |
this._animationStopped = true; |
this._animation.stop(); |
this.internalProgress.style.height = "100%"; |
this.internalProgress.style.left = "0px"; |
this._restoreValues(); |
this._setLabelPosition(); |
} |
}, _showRemoteProgress:function () { |
var _self = this; |
if ((this.getMaxProgressValue() == this.getProgressValue()) && this._oInterval) { |
clearInterval(this._oInterval); |
this._oInterval = null; |
this.setProgressValue("100%"); |
return; |
} |
var bArgs = {url:_self.dataSource, method:"POST", mimetype:"text/json", error:function (type, errorObj) { |
dojo.debug("[ProgressBar] showRemoteProgress error"); |
}, load:function (type, data, evt) { |
_self.setProgressValue((_self._oInterval ? data["progress"] : "100%")); |
}}; |
dojo.io.bind(bArgs); |
}, render:function () { |
this._setPercentLabel(dojo.string.trim(this._progressPercentValue)); |
this._setPixelValue(this._pixelValue); |
this._setLabelPosition(); |
}, _setLabelPosition:function () { |
var _widthFront = dojo.html.getContentBox(this.frontPercentLabel).width; |
var _heightFront = dojo.html.getContentBox(this.frontPercentLabel).height; |
var _widthBack = dojo.html.getContentBox(this.backPercentLabel).width; |
var _heightBack = dojo.html.getContentBox(this.backPercentLabel).height; |
var _leftFront = (parseInt(this.width) - _widthFront) / 2 + "px"; |
var _bottomFront = (parseInt(this.height) - parseInt(_heightFront)) / 2 + "px"; |
var _leftBack = (parseInt(this.width) - _widthBack) / 2 + "px"; |
var _bottomBack = (parseInt(this.height) - parseInt(_heightBack)) / 2 + "px"; |
this.frontPercentLabel.style.left = _leftFront; |
this.backPercentLabel.style.left = _leftBack; |
this.frontPercentLabel.style.bottom = _bottomFront; |
this.backPercentLabel.style.bottom = _bottomBack; |
}, _setPercentLabel:function (percentValue) { |
dojo.dom.removeChildren(this.frontPercentLabel); |
dojo.dom.removeChildren(this.backPercentLabel); |
var _percentValue = this.showOnlyIntegers == false ? percentValue : parseInt(percentValue) + "%"; |
this.frontPercentLabel.appendChild(document.createTextNode(_percentValue)); |
this.backPercentLabel.appendChild(document.createTextNode(_percentValue)); |
}, _setPixelValue:function (value) { |
eval("this.internalProgress.style." + this._dimension + " = " + value + " + 'px'"); |
this.onChange(); |
}, onChange:function () { |
}}); |
|