Fork me on GitHub

API Documentation


Warning: DOMDocument::loadHTMLFile() [domdocument.loadhtmlfile]: htmlParseEntityRef: no name in jsdoc/symbols/src/src_preloader_glge_filepreloader.js.html, line: 99 in /homepages/22/d163487924/htdocs/glge/wp-content/themes/glge/manual.php on line 29

Warning: DOMDocument::loadHTMLFile() [domdocument.loadhtmlfile]: htmlParseEntityRef: no name in jsdoc/symbols/src/src_preloader_glge_filepreloader.js.html, line: 99 in /homepages/22/d163487924/htdocs/glge/wp-content/themes/glge/manual.php on line 29
  1 /*
  2 Copyright (c) 2011 Martin Ruenz
  3 
  4 Permission is hereby granted, free of charge, to any person obtaining a copy
  5  of this software and associated documentation files (the "Software"), to deal
  6  in the Software without restriction, including without limitation the rights
  7  to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
  8  copies of the Software, and to permit persons to whom the Software is
  9  furnished to do so, subject to the following conditions:
 10 
 11 The above copyright notice and this permission notice shall be included in
 12  all copies or substantial portions of the Software.
 13 
 14 THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
 15  IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
 16  FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 17  AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 18  LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 19  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 20  THE SOFTWARE.
 21 */
 22 
 23 /**
 24  * @fileOverview Base class for preloaders. Enables the handling of multiple files.
 25  * @name glge_filepreloader.js
 26  * @author seamonkey@uni-koblenz.de
 27  */
 28 
 29 
 30 (function(GLGE){
 31 
 32 
 33 
 34 
 35 /**
 36 * @class FilePreloader class
 37 * @augments GLGE.Events
 38 */
 39 GLGE.FilePreloader=function(){
 40 	this.files=[];
 41 }
 42 
 43 GLGE.augment(GLGE.Events,GLGE.FilePreloader);
 44 
 45 GLGE.FilePreloader.prototype.loadedBytes=0;
 46 GLGE.FilePreloader.prototype.totalBytes=0;
 47 GLGE.FilePreloader.prototype.numLoadedFiles=0;
 48 GLGE.FilePreloader.prototype.numTotalFiles=0;
 49 GLGE.FilePreloader.prototype.sizesCount=0;		/** @description Specifies how many file sizes has been collected */
 50 GLGE.FilePreloader.prototype.progress=0; 		/** @description 0 - 100 */
 51 GLGE.FilePreloader.prototype.files=null; 		/** @description List of files. file: {	"url":url,"loaded":fileloaded,"size":filesize,"bytesLoaded":loadedSize,
 52 											"type":'xml'/'image',"callback":called when loaded,"content":content, "preloader":GLGE.FilePreloader} */
 53 /**
 54 * Add a file which has to be loaded
 55 * @param {string} url 		The url of the file.
 56 * @param {string} type 		Defines the type of the requested file. "image" or "xml"
 57 * @param {function} [callback] 	Call this function when the file is loaded and pass the loaded content.
 58 * @public
 59 */
 60 GLGE.FilePreloader.prototype.addFile=function(url, type, callback){
 61 	//if(this.files.indexOf(url) != -1) return;
 62 	
 63 	this.files.push({"url":url,"loaded":false,"size":-1,"bytesLoaded":0,"type":type,"callback":callback,"content":null,"preloader":this});
 64 	this.numTotalFiles++;
 65 }
 66 
 67 /**
 68 * Same as addFile. But instead of creating a new file object use an existing one.
 69 * @param {object} file	The file to add.
 70 * @public
 71 */
 72 GLGE.FilePreloader.prototype.addFileRef=function(file){
 73 	//if(this.files.indexOf(url) != -1) return;
 74 	
 75 	this.files.push(file);
 76 	this.numTotalFiles++;
 77 }
 78 
 79 /**
 80 * This function accumulates the size of all files. When done it triggers loadFiles(). It has to be called for each file.
 81 * @param {object} file	Current file.
 82 * @private
 83 */
 84 GLGE.FilePreloader.prototype.accumulateFileSize=function(file)
 85 {
 86 	var req = new XMLHttpRequest();
 87 	req.preloader = this;
 88 	req.active = true;
 89 	req.file = file;
 90 	req.overrideMimeType("text/xml");
 91 	req.onreadystatechange = function() {
 92 		if(this.readyState  > 1 && req.active)
 93 		{
 94 			this.active = false;
 95 
 96 			this.file.size = parseFloat(this.getResponseHeader('Content-length'));
 97 			this.preloader.totalBytes += this.file.size;
 98 			
 99 			if(++this.preloader.sizesCount >= this.preloader.files.length) // are all file sizes collected?
100 				this.preloader.loadFiles();
101 			
102 			this.abort();
103 			this.onreadystatechange = null;
104 		}
105 	};
106 	req.open("GET", file.url, true);
107 	req.send("");
108 }
109 
110 /**
111 * Start loading
112 * @public
113 */
114 GLGE.FilePreloader.prototype.start=function(){
115 	for(i in this.files)
116 		this.accumulateFileSize(this.files[i]);
117 }
118 
119 /**
120 * Load files. Assumes that the file sizes have been accumulated.
121 * @private
122 */
123 GLGE.FilePreloader.prototype.loadFiles=function(){
124 	
125 	for(i in this.files){
126 		var file = this.files[i];
127 		if(file.type == "image")
128 		{
129 			// only update the preloader, when the file is completely loaded (no ajax)
130 			
131 			var image = new Image();
132 			file.content = image;
133 			var that = this;
134 			image.file = file;
135 			image.onload = function(){ that.fileLoaded(this.file, this.file.size); } 
136 			image.src=file.url;
137 		}else{
138 			// update the preloader each 0.1 seconds (ajax)
139 			
140 			var req = new XMLHttpRequest();
141 			req.overrideMimeType("text/xml");
142 			req.preloader = this;
143 			req.file = file;
144 			
145 146 			var updateTrigger = setInterval (function ()
147 			{
148 				if (req.readyState == 3)
149 				{
150 					// TODO: Check if the file reference is always correct
151 					var stepBytes = req.responseText.length - file.bytesLoaded;
152 					file.bytesLoaded = req.responseText.length;
153 					req.preloader.update(stepBytes);
154 				}
155 				
156 			}, 100);
157 			
158 			req.onreadystatechange = function() {
159 				if(this.readyState  >= 4)
160 				{	
161 					clearInterval(updateTrigger);
162 					this.file.content = this.responseXML;
163 					
164 					var stepBytes = this.responseText.length - this.file.bytesLoaded;
165 					
166 					this.preloader.update(stepBytes);
167 					this.preloader.fileLoaded(this.file, stepBytes);
168 				}
169 			};
170 			
171 			req.open("GET", file.url, true);
172 			req.send();
173 				
174 		}
175 	}
176 }
177 
178 /**
179  * This functions updates the progress.
180  * @param {number} stepBytes	Amount of bytes that have been loaded since the last call. 
181  * @private
182  */
183 GLGE.FilePreloader.prototype.update=function(stepBytes){
184 	this.loadedBytes += stepBytes;
185 	this.progress = (100.0 * this.loadedBytes) / this.totalBytes;
186 
187 	this.fireEvent("progress", {"progress":this.progress, "stepBytes":stepBytes, "loadedBytes":this.loadedBytes, "totalBytes":this.totalBytes, "loadedFiles": this.numLoadedFiles, "totalFiles": this.numTotalFiles}); 
188 }
189 
190 /**
191  * Called when a file has been loaded. This function triggers an event and updates the state.
192  * @param {object} file		The file that has been loaded.
193  * @param {number} stepBytes	Amount of bytes that have been loaded since the last call. 
194  * @private
195  */
196 GLGE.FilePreloader.prototype.fileLoaded=function(file, stepBytes){
197 
198 	this.numLoadedFiles++;
199 	
200 	// update file
201 	file.loaded = true;
202 	file.bytesLoaded = file.size;	
203 	
204 	// update progress
205 	if(this.numLoadedFiles >= this.files.length){
206 		this.progress = 100;
207 		this.fireEvent("downloadComplete", {"file":file,"stepBytes":stepBytes});
208 	}else{
209 		this.update(stepBytes);
210 	}
211 	
212 	// events
213 	this.fireEvent("fileLoaded", {"file":file,"stepBytes":stepBytes});
214 	if(file.callback) file.callback(file);
215 }
216 
217 /**
218  * This function returns a list (an array) of all loaded files.
219  * @public
220  */
221 GLGE.FilePreloader.prototype.getLoadedFiles=function(){
222 	var result = [];
223 	for(i in this.files)
224 		if(this.files[i].loaded)
225 			result.push(this.files[i]);
226 	return result;
227 }
228 
229 /**
230  * This function returns information about one file.
231  * @param {string} url	The url of the file.
232  * @public
233  */
234 GLGE.FilePreloader.prototype.getFile=function(url){
235 	for(i in this.files)
236 		if(this.files[i].url==url)
237 			return this.files[i];
238 	return -1;
239 }
240 
241 
242 })(GLGE);
243