diff options
Diffstat (limited to 'loader.js')
| -rw-r--r-- | loader.js | 248 |
1 files changed, 248 insertions, 0 deletions
diff --git a/loader.js b/loader.js new file mode 100644 index 0000000..5695edd --- /dev/null +++ b/loader.js @@ -0,0 +1,248 @@ +/** + * Loader. + * @module loader + */ + +/* sets up a loading panel with a title, progress bar and a set of steps */ + + +function step( order, description, type, barSpace, incrementCount ){ + + this.TYPE_FILLER = 0; + this.TYPE_DRIVEN = 1; + + this.type = type; + + this.incrementCount = incrementCount; + + this.order = order; + + /* reserve this much space on the progress bar + for this step */ + + this.barSpace = barSpace; + + this.description = description; + + this.WAITING = 0; + this.HAPPENING = 1; + this.COMPLETED = 2; + + this.state = this.WAITING; + + this.template = ""; + this.domNode; + + this.increments = 0; +} + +step.prototype.complete = function(){ + this.domNode.className = 'successImage'; +} + +step.prototype.spin = function(){ + this.domNode.className = 'loadingImage'; +} + +step.prototype.getStepNode = function(){ + + var stepNode = document.createElement( 'div' ); + stepNode.className = 'step'; + stepNode.innerHTML = '<div class="visual">' + + '<div id="step' + this.order + '"></div>' + + '</div>' + + '<div class="verbal">' + this.description + '</div>'; + + this.domNode = stepNode.firstChild.firstChild; + + return stepNode; +} + +step.prototype.transition = function(){ + switch( this.state ){ + + case this.WAITING: + this.state = this.HAPPENING; + /* add happening class */ + break; + + case this.HAPPENING: + this.state = this.COMPLETED; + /* add completed class */ + break; + } +} + +function loader( domNode, subject, length ){ + + this.domNode = domNode; + + this.content; + + this.length = length; + + this.title = subject; + + this.steps = []; + + this.PROGRESS_BAR_LENGTH = length; + + /* Let's say that the first 40px are reserved for initialization */ + + this.PROGRESS_FIRST_SECTION_LENGTH = 40; + + this.FILLER_TIMEOUT = 200; + + this.progressbar = 'progressbar'; + + this.template = '<div class="loader">' + + '<div class="about">Setting up workspace</div>' + + '<div class="progressbar">' + + '<progress id ="' + this.progressbar + '" max="' + this.length + '" value="0"></progress>' + + '</div>' + + '<div id="steps" class="steps">' + + '</div>' + + '</div>'; + + this.initialize(); + + this.interval; + + this.currentStep = 0; +} + +/* want to fill time in a first section - to fake progress + while we wait for real progress indication to begin */ + +loader.prototype.animateFirstSection = function(){ + +} + +loader.prototype.showFillerProgress = function(){ + + var splashProgress = document.getElementById( this.progressbar ); + + var cs = this.steps[ this.currentStep ]; + + var barSpace = 0; + + for( var s = 1; s <= cs.order; s++ ){ + barSpace = barSpace + this.steps[s].barSpace; + } + + if( splashProgress ) { + var increment = ( barSpace - splashProgress.value )/5; + splashProgress.value = splashProgress.value + increment; + console.log( splashProgress.value ); + } +} + +loader.prototype.startFillerProgress = function(){ + var myloader = this; + this.interval = setInterval( function(){ myloader.showFillerProgress() }, this.FILLER_TIMEOUT ); +} + +loader.prototype.completeFillerProgress = function (){ + clearInterval( this.interval ); +} + +loader.prototype.nextStep = function(){ + + var myStep; + + /* complete current step */ + + if( this.currentStep > 0 ){ + + myStep = this.steps[this.currentStep]; + + switch( myStep.type ){ + + case myStep.TYPE_FILLER: + this.completeFillerProgress(); + myStep.complete(); + break; + + case myStep.TYPE_DRIVEN: + myStep.complete(); + break; + } + } + + /* initaliate next step */ + + this.currentStep = this.currentStep + 1; + + myStep = this.steps[this.currentStep]; + + switch( myStep.type ){ + + case myStep.TYPE_FILLER: + this.startFillerProgress(); + myStep.spin(); + break; + + case myStep.TYPE_DRIVEN: + myStep.spin(); + break; + } +} + +loader.prototype.initialize = function(){ + this.content = document.getElementById( this.domNode ); + this.content.innerHTML = this.template; + var splashProgress = document.getElementById( this.progressbar ); + splashProgress.value = 0; + // this.startInitializationProgress(); +} + +loader.prototype.emptySteps = function(){ + var stepsNode = document.getElementById( 'steps' ); + while( stepsNode.firstChild ){ + stepsNode.removeChild( stepsNode.firstChild ) ; + } +} + +loader.prototype.drawSteps = function(){ + + this.emptySteps(); + + var stepsNode = document.getElementById( 'steps' ); + + for( var step in this.steps ){ + var nextStep = this.steps[step]; + stepsNode.appendChild( nextStep.getStepNode() ); + } +} + +/* Newly provided steps need to begin at 1 */ + +loader.prototype.addStep = function( step ){ + this.steps[step.order] = step; + + if( !this.currentStep ){ + this.curentStep = step; + } + + this.drawSteps(); +} + +loader.prototype.setProgressLength = function( length ){ + +} + +loader.prototype.increment = function(){ + var cs = this.steps[ this.currentStep ]; + cs.increments = cs.increments + 1; + var splashProgress = document.getElementById( this.progressbar ); + var increment = cs.barSpace / cs.incrementCount; + splashProgress.value = splashProgress.value + increment; + + if( cs.increments === cs.incrementCount ){ + this.nextStep(); + } +} + +loader.prototype.setInitialProgressLength = function( length ){ + +}
\ No newline at end of file |