define("dojox/mobile/ProgressIndicator", [ "dojo/_base/config", "dojo/_base/declare", "dojo/_base/lang", "dojo/dom-class", "dojo/dom-construct", "dojo/dom-geometry", "dojo/dom-style", "dojo/has", "dijit/_Contained", "dijit/_WidgetBase" ], function(config, declare, lang, domClass, domConstruct, domGeometry, domStyle, has, Contained, WidgetBase){ // module: // dojox/mobile/ProgressIndicator var cls = declare("dojox.mobile.ProgressIndicator", [WidgetBase, Contained], { // summary: // A progress indication widget. // description: // ProgressIndicator is a round spinning graphical representation // that indicates the current task is ongoing. // interval: Number // The time interval in milliseconds for updating the spinning // indicator. interval: 100, // size: Number // The size of the indicator in pixels. size: 40, // removeOnStop: Boolean // If true, this widget is removed from the parent node // when stop() is called. removeOnStop: true, // startSpinning: Boolean // If true, calls start() to run the indicator at startup. startSpinning: false, // center: Boolean // If true, the indicator is displayed as center aligned. center: true, // colors: String[] // An array of indicator colors. 12 colors have to be given. // If colors are not specified, CSS styles // (mblProg0Color - mblProg11Color) are used. colors: null, /* internal properties */ // baseClass: String // The name of the CSS class of this widget. baseClass: "mblProgressIndicator", constructor: function(){ // summary: // Creates a new instance of the class. this.colors = []; this._bars = []; }, buildRendering: function(){ this.inherited(arguments); if(this.center){ domClass.add(this.domNode, "mblProgressIndicatorCenter"); } this.containerNode = domConstruct.create("div", {className:"mblProgContainer"}, this.domNode); this.spinnerNode = domConstruct.create("div", null, this.containerNode); for(var i = 0; i < 12; i++){ var div = domConstruct.create("div", {className:"mblProg mblProg"+i}, this.spinnerNode); this._bars.push(div); } this.scale(this.size); if(this.startSpinning){ this.start(); } }, scale: function(/*Number*/size){ // summary: // Changes the size of the indicator. // size: // The size of the indicator in pixels. var scale = size / 40; domStyle.set(this.containerNode, { webkitTransform: "scale(" + scale + ")", webkitTransformOrigin: "0 0" }); domGeometry.setMarginBox(this.domNode, {w:size, h:size}); domGeometry.setMarginBox(this.containerNode, {w:size / scale, h:size / scale}); }, start: function(){ // summary: // Starts the spinning of the ProgressIndicator. if(this.imageNode){ var img = this.imageNode; var l = Math.round((this.containerNode.offsetWidth - img.offsetWidth) / 2); var t = Math.round((this.containerNode.offsetHeight - img.offsetHeight) / 2); img.style.margin = t+"px "+l+"px"; return; } var cntr = 0; var _this = this; var n = 12; this.timer = setInterval(function(){ cntr--; cntr = cntr < 0 ? n - 1 : cntr; var c = _this.colors; for(var i = 0; i < n; i++){ var idx = (cntr + i) % n; if(c[idx]){ _this._bars[i].style.backgroundColor = c[idx]; }else{ domClass.replace(_this._bars[i], "mblProg" + idx + "Color", "mblProg" + (idx === n - 1 ? 0 : idx + 1) + "Color"); } } }, this.interval); }, stop: function(){ // summary: // Stops the spinning of the ProgressIndicator. if(this.timer){ clearInterval(this.timer); } this.timer = null; if(this.removeOnStop && this.domNode && this.domNode.parentNode){ this.domNode.parentNode.removeChild(this.domNode); } }, setImage: function(/*String*/file){ // summary: // Sets an indicator icon image file (typically animated GIF). // If null is specified, restores the default spinner. if(file){ this.imageNode = domConstruct.create("img", {src:file}, this.containerNode); this.spinnerNode.style.display = "none"; }else{ if(this.imageNode){ this.containerNode.removeChild(this.imageNode); this.imageNode = null; } this.spinnerNode.style.display = ""; } } }); cls._instance = null; cls.getInstance = function(props){ if(!cls._instance){ cls._instance = new cls(props); } return cls._instance; }; return cls; });