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
