8398c9048d
code was modified slightly, so the code differs from the original downloadable 1.9.5 version
223 lines
7.5 KiB
JavaScript
Executable file
223 lines
7.5 KiB
JavaScript
Executable file
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();
|
|
}
|
|
|
|
});
|