cacert-testmgr/external/ZendFramework-1.9.5/externals/dojo/dojox/widget/Standby.js

224 lines
7.5 KiB
JavaScript
Raw Permalink Normal View History

dojo.provide("dojox.widget.Standby");
dojo.require("dijit._Widget");
dojo.require("dijit._Templated");
dojo.require("dojo.fx");
dojo.experimental("dojox.widget.Standby");
dojo.declare("dojox.widget.Standby",[dijit._Widget, dijit._Templated],{
// summary:
// A widget designed to act as a Standby/Busy/Disable/Blocking widget to indicate a
// particular DOM node is processing and cannot be clicked on at this time.
// This widget uses absolute positioning to apply the overlay and image.
//
// image:
// A URL to an image to center within the blocking overlay. The default is a basic spinner.
//
// imageText:
// Text to set on the ALT tag of the image. The default is 'Please wait...'
//
// color:
// The color to use for the translucent overlay. Text string such as: darkblue, #FE02FD, etc.
templatePath: dojo.moduleUrl("dojox", "widget/Standby/Standby.html"),
_underlayNode: null, //The node that is the translucent underlay for the image that blocks access to the target.
_imageNode: null, // The image node where we attach and define the image to display.
image: dojo.moduleUrl("dojox", "widget/Standby/images/loading.gif").toString(), //The image
imageText: "Please Wait...", //Text for the ALT tag.
_displayed: false, //display status
_resizeCheck: null, //Handle to interval function that chects the target for changes.
target: "", //The target to overlay when active. Can be a widget id, a dom id, or a direct node reference.
color: "#C0C0C0", //Default color for the translucent overlay. (light gray.)
startup: function(args){
// summary:
// Over-ride of the basic widget startup function. Configures the target node and sets the image to use.
if(typeof this.target === "string"){
var w = dijit.byId(this.target);
if(w){
this.target = w.domNode;
}else{
this.target = dojo.byId(this.target);
}
}
dojo.style(this._underlayNode, "display", "none");
dojo.style(this._imageNode, "display", "none");
dojo.style(this._underlayNode, "backgroundColor", this.color);
dojo.attr(this._imageNode, "src", this.image);
dojo.attr(this._imageNode, "alt", this.imageText);
this.connect(this._underlayNode, "onclick", "_ignore");
//Last thing to do is move the widgets parent, if any, to the current document body. Avoids having to deal with
//parent relative/absolute mess. Otherwise positioning goes goofy.
if(this.domNode.parentNode && this.domNode.parentNode != dojo.body()){
dojo.body().appendChild(this.domNode);
}
},
show: function() {
// summary:
// Function to display the blocking overlay and busy/status icon
if(!this._displayed){
this._displayed = true;
this._size();
this._fadeIn();
}
},
hide: function(){
// summary:
// Function to hide the blocking overlay and status icon.
if(this._displayed){
this._size();
this._fadeOut();
this._displayed = false;
if (this._resizeCheck !== null) {
clearInterval(this._resizeCheck);
this._resizeCheck = null;
}
}
},
_size: function(){
// summary:
// Internal function that handles resizing the overlay and centering of the image on window resizing.
if(this._displayed){
//Show the image and make sure the zIndex is set high.
var curStyle = dojo.style(this._imageNode, "display");
dojo.style(this._imageNode, "display", "block");
var box = dojo.coords(this.target);
var img = dojo.marginBox(this._imageNode);
dojo.style(this._imageNode, "display", curStyle);
dojo.style(this._imageNode, "zIndex", "10000");
//Need scroll positions as it needs to alter ABS positioning.
var sVal = dojo._docScroll();
if(!sVal){
sVal = {x:0,y:0};
}
//Address margins as they shift the position..
var marginLeft = dojo.style(this.target, "marginLeft");
if(dojo.isWebKit && marginLeft){
//Webkit works differently here. Needs to be doubled.
//Don't ask me why. :)
marginLeft = marginLeft*2;
}
if(marginLeft){
box.w = box.w - marginLeft;
}
if (!dojo.isWebKit) {
//Webkit and others work differently here.
var marginRight = dojo.style(this.target, "marginRight");
if(marginRight){
box.w = box.w - marginRight;
}
}
var marginTop = dojo.style(this.target, "marginTop");
if(marginTop){
box.h = box.h - marginTop;
}
var marginBottom = dojo.style(this.target, "marginBottom");
if(marginBottom){
box.h = box.h - marginBottom;
}
if(box.h > 0 && box.w > 0){
//Set position and size of the blocking div overlay.
dojo.style(this._underlayNode, "width", box.w + "px");
dojo.style(this._underlayNode, "height", box.h + "px");
dojo.style(this._underlayNode, "top", (box.y + sVal.y) + "px");
dojo.style(this._underlayNode, "left", (box.x + sVal.x) + "px");
//Apply curving styles if present.
var cloneStyles = function(list, scope){
dojo.forEach(list, function(style){
dojo.style(this._underlayNode,style,dojo.style(this.target,style));
}, scope);
};
var styles = ["borderRadius", "borderTopLeftRadius", "borderTopRightRadius","borderBottomLeftRadius", "borderBottomRightRadius"];
cloneStyles(styles, this);
if(!dojo.isIE){
//Browser specific styles to try and clone if non-IE.
styles = ["MozBorderRadius", "MozBorderRadiusTopleft", "MozBorderRadiusTopright","MozBorderRadiusBottomleft", "MozBorderRadiusBottomright",
"WebkitBorderRadius", "WebkitBorderTopLeftRadius", "WebkitBorderTopRightRadius", "WebkitBorderBottomLeftRadius","WebkitBorderBottomRightRadius"
];
cloneStyles(styles, this);
}
var imgTop = (box.h/2) - (img.h/2);
var imgLeft = (box.w/2) - (img.w/2);
dojo.style(this._imageNode, "top", (imgTop + box.y + sVal.y) + "px");
dojo.style(this._imageNode, "left", (imgLeft + box.x + sVal.x) + "px");
dojo.style(this._underlayNode, "display", "block");
dojo.style(this._imageNode, "display", "block");
}else{
//Target has no size, display nothing on it!
dojo.style(this._underlayNode, "display", "none");
dojo.style(this._imageNode, "display", "none");
}
if (this._resizeCheck === null) {
//Set an interval timer that checks the target size and scales as needed.
//Checking every 10th of a second seems to generate a fairly smooth update.
var self = this;
this._resizeCheck = setInterval(function(){self._size();}, 100);
}
}
},
_fadeIn: function(){
// summary:
// Internal function that does the opacity style fade in animation.
var underlayNodeAnim = dojo.animateProperty({node: this._underlayNode, properties: {opacity: {start: 0, end: 0.75}}});
var imageAnim = dojo.animateProperty({node: this._imageNode, properties: {opacity: {start: 0, end: 1}}});
var anim = dojo.fx.combine([underlayNodeAnim,imageAnim]);
anim.play();
},
_fadeOut: function(){
// summary:
// Internal function that does the opacity style fade out animation.
var self = this;
var underlayNodeAnim = dojo.animateProperty({
node: this._underlayNode,
properties: {opacity: {start: 0.75, end: 0}},
onEnd: function() {
dojo.style(self._underlayNode, "display", "none");
}
});
var imageAnim = dojo.animateProperty({
node: this._imageNode,
properties: {opacity: {start: 1, end: 0}},
onEnd: function() {
dojo.style(self._imageNode, "display", "none");
}
});
var anim = dojo.fx.combine([underlayNodeAnim,imageAnim]);
anim.play();
},
_ignore: function(event){
if(event){
event.preventDefault();
event.stopPropagation();
}
},
uninitialize: function(){
// summary:
// Over-ride to hide the widget, which clears intervals, before cleanup.
this.hide();
}
});