mirror of
https://github.com/Alfresco/alfresco-community-repo.git
synced 2025-08-14 17:58:59 +00:00
New build scripts
git-svn-id: https://svn.alfresco.com/repos/alfresco-enterprise/alfresco/HEAD/root@5282 c4b6b30b-aa2e-2d43-bbcb-ca4b014f7261
This commit is contained in:
Gavin Cornwell
362
source/web/scripts/ajax/dojo/src/widget/ProgressBar.js
Normal file
362
source/web/scripts/ajax/dojo/src/widget/ProgressBar.js
Normal file
@@ -0,0 +1,362 @@
|
||||
/*
|
||||
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,
|
||||
{
|
||||
// summary:
|
||||
// a progress widget, with some calculation and server polling capabilities
|
||||
//
|
||||
// description:
|
||||
// (implementation) four overlapped divs:
|
||||
// (1) lower z-index
|
||||
// (4) higher z-index
|
||||
// back and front percent label have the same content: when the vertical line (*)
|
||||
// partially hides the backPercentLabel, the frontPercentLabel becomes visible
|
||||
//
|
||||
// ________________________(1)_containerNode_________________________________
|
||||
// |__(3)_internalProgress____________ |
|
||||
// | | <--- (*) |
|
||||
// | (4) frontPercentLabel | (2) backPercentLabel |
|
||||
// |__________________________________| |
|
||||
// |__________________________________________________________________________|
|
||||
//
|
||||
// usage:
|
||||
// <div dojoType="ProgressBar" frontBarClass="..." backBarClass="..."
|
||||
// backBarClass="..." frontBarClass="..." duration="..."
|
||||
// showOnlyIntegers="true|false" width="..." height="..." dataSource="..."
|
||||
// pollInterval="..."
|
||||
// hasText="true|false" isVertical="true|false"
|
||||
// progressValue="..." maxProgressValue="..."></div>
|
||||
|
||||
// progressValue: String
|
||||
// initial progress value.
|
||||
// with "%": percentual value, 0% <= progressValue <= 100%
|
||||
// or without "%": absolute value, 0 <= progressValue <= maxProgressValue
|
||||
progressValue: 0,
|
||||
|
||||
// maxProgressValue: Float
|
||||
// max sample number
|
||||
maxProgressValue: 100,
|
||||
|
||||
// width: Integer
|
||||
// ProgressBar width (pixel)
|
||||
width: 300,
|
||||
|
||||
// height: Integer
|
||||
// ProgressBar height, (pixel)
|
||||
height: 30,
|
||||
|
||||
// frontPercentClass: String
|
||||
// css class for frontPercentLabel (4)
|
||||
frontPercentClass: "frontPercent",
|
||||
|
||||
// backPercentClass: String
|
||||
// css class for backPercentLabel (2)
|
||||
backPercentClass: "backPercent",
|
||||
|
||||
// frontBarClass: String
|
||||
// css class for containerNode (1)
|
||||
frontBarClass: "frontBar",
|
||||
|
||||
// backBarClass: String
|
||||
// css class for internalProgress (3)
|
||||
backBarClass: "backBar",
|
||||
|
||||
// hasText: Boolean
|
||||
// if true, the percent label is visible
|
||||
hasText: false,
|
||||
|
||||
// isVertical: Boolean
|
||||
// if true, the widget is vertical
|
||||
isVertical: false,
|
||||
|
||||
// showOnlyIntegers: Boolean
|
||||
// if true, the percent label shows only integer values
|
||||
showOnlyIntegers: false,
|
||||
|
||||
// dataSource: String
|
||||
// dataSource uri for server polling
|
||||
dataSource: "",
|
||||
|
||||
// pollInterval: Integer
|
||||
// server poll interval
|
||||
pollInterval: 3000,
|
||||
|
||||
// duration: Integer
|
||||
// duration of the animation
|
||||
duration: 1000,
|
||||
|
||||
templatePath: dojo.uri.dojoUri("src/widget/templates/ProgressBar.html"),
|
||||
templateCssPath: dojo.uri.dojoUri("src/widget/templates/ProgressBar.css"),
|
||||
|
||||
|
||||
// attach points
|
||||
containerNode: null,
|
||||
internalProgress: null,
|
||||
|
||||
// private members
|
||||
_pixelUnitRatio: 0.0,
|
||||
_pixelPercentRatio: 0.0,
|
||||
_unitPercentRatio: 0.0,
|
||||
_unitPixelRatio: 0.0,
|
||||
_floatDimension: 0.0,
|
||||
_intDimension: 0,
|
||||
_progressPercentValue: "0%",
|
||||
_floatMaxProgressValue: 0.0,
|
||||
_dimension: "width",
|
||||
_pixelValue: 0,
|
||||
_oInterval: null,
|
||||
_animation: null,
|
||||
_animationStopped: true,
|
||||
_progressValueBak: false,
|
||||
_hasTextBak: false,
|
||||
|
||||
// public functions
|
||||
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){
|
||||
// summary: shows or hides the labels
|
||||
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; // <-- to avoid memory leaks in IE
|
||||
}
|
||||
);
|
||||
},
|
||||
getMaxProgressValue: function(){
|
||||
// summary: returns the maxProgressValue
|
||||
return this.maxProgressValue;
|
||||
},
|
||||
setMaxProgressValue: function(maxValue, noRender){
|
||||
// summary: sets the maxProgressValue
|
||||
// if noRender is true, only sets the internal max progress value
|
||||
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){
|
||||
// summary: sets the progressValue
|
||||
// if value ends width "%", does a normalization
|
||||
// if noRender is true, only sets the internal value: useful if
|
||||
// there is a setMaxProgressValue call
|
||||
if (!this._animationStopped){
|
||||
return;
|
||||
}
|
||||
// transformations here
|
||||
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(){
|
||||
// summary: returns the progressValue
|
||||
return this.progressValue;
|
||||
},
|
||||
getProgressPercentValue: function(){
|
||||
// summary: returns the percentual progressValue
|
||||
return this._progressPercentValue;
|
||||
},
|
||||
setDataSource: function(dataSource){
|
||||
// summary: sets the dataSource
|
||||
this.dataSource = dataSource;
|
||||
},
|
||||
setPollInterval: function(pollInterval){
|
||||
// summary: sets the pollInterval
|
||||
this.pollInterval = pollInterval;
|
||||
},
|
||||
start: function(){
|
||||
// summary: starts the server polling
|
||||
var _showFunction = dojo.lang.hitch(this, this._showRemoteProgress);
|
||||
this._oInterval = setInterval(_showFunction, this.pollInterval);
|
||||
},
|
||||
startAnimation: function(){
|
||||
// summary: starts the left-right animation, useful when
|
||||
// the user doesn't know how much time the operation will last
|
||||
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(){
|
||||
// summary: stops the left-right animation
|
||||
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(){
|
||||
// summary: renders the ProgressBar, based on current values
|
||||
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(){
|
||||
}
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user