178 lines
4.0 KiB
JavaScript
178 lines
4.0 KiB
JavaScript
|
|
class preloader {
|
||
|
|
constructor( engine ) {
|
||
|
|
this.engine = engine;
|
||
|
|
|
||
|
|
this.items = [];
|
||
|
|
this.totalBytes = 0;
|
||
|
|
this.loadedBytes = 0;
|
||
|
|
/*
|
||
|
|
this.preloader_holder = document.createElement("div");
|
||
|
|
var preloader_inner = document.createElement("div");
|
||
|
|
this.preloader_text = document.createElement("div");
|
||
|
|
|
||
|
|
this.preloader_holder.className = "preloader_holder";
|
||
|
|
preloader_inner.className = "preloader circlechart";
|
||
|
|
|
||
|
|
|
||
|
|
this.preloader_text.className = "preloader_text";
|
||
|
|
|
||
|
|
this.preloader_holder.appendChild(preloader_inner);
|
||
|
|
this.preloader_holder.appendChild(this.preloader_text);
|
||
|
|
|
||
|
|
this.bar = new ldBar(".preloader");
|
||
|
|
*/
|
||
|
|
|
||
|
|
|
||
|
|
//engine.system.canvas.parentElement.appendChild(this.preloader_holder);
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
//console.log();
|
||
|
|
|
||
|
|
//var progressBarLoader = new ProgressBar.Line('.preloader');
|
||
|
|
//window.ProgressBar
|
||
|
|
/*
|
||
|
|
this.bar = new ProgressBar.SemiCircle(preloader_inner, {
|
||
|
|
strokeWidth: 6,
|
||
|
|
color: '#FFEA82',
|
||
|
|
trailColor: '#eee',
|
||
|
|
trailWidth: 1,
|
||
|
|
easing: 'easeInOut',
|
||
|
|
duration: 1400,
|
||
|
|
svgStyle: null,
|
||
|
|
text: {
|
||
|
|
value: '',
|
||
|
|
alignToBottom: false
|
||
|
|
},
|
||
|
|
from: {color: '#FFEA82'},
|
||
|
|
to: {color: '#ED6A5A'},
|
||
|
|
// Set default step function for all animate calls
|
||
|
|
step: (state, bar) => {
|
||
|
|
bar.path.setAttribute('stroke', state.color);
|
||
|
|
var value = Math.round(bar.value() * 100);
|
||
|
|
if (value === 0) {
|
||
|
|
bar.setText('');
|
||
|
|
} else {
|
||
|
|
bar.setText(value);
|
||
|
|
}
|
||
|
|
|
||
|
|
bar.text.style.color = state.color;
|
||
|
|
}
|
||
|
|
});
|
||
|
|
*/
|
||
|
|
//this.bar.animate(1.0); // Number from 0.0 to 1.0
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
formatSizeUnits(bytes){
|
||
|
|
if (bytes >= 1073741824) { bytes = (bytes / 1073741824).toFixed(2) + " GB"; }
|
||
|
|
else if (bytes >= 1048576) { bytes = (bytes / 1048576).toFixed(2) + " MB"; }
|
||
|
|
else if (bytes >= 1024) { bytes = (bytes / 1024).toFixed(2) + " KB"; }
|
||
|
|
else if (bytes > 1) { bytes = bytes + " bytes"; }
|
||
|
|
else if (bytes == 1) { bytes = bytes + " byte"; }
|
||
|
|
else { bytes = "0 bytes"; }
|
||
|
|
return bytes;
|
||
|
|
}
|
||
|
|
|
||
|
|
update(name, loaded, total){
|
||
|
|
if(!total)
|
||
|
|
var total = 206965373;
|
||
|
|
|
||
|
|
//if(loaded != infinity )
|
||
|
|
$(".preloader_text").text(this.formatSizeUnits(loaded) + " of the " + this.formatSizeUnits(total) );
|
||
|
|
//console.log(Math.round((loaded/total) * 100) / 100 );
|
||
|
|
|
||
|
|
this.engine.bar.set( Math.round((loaded/total) * 100) );
|
||
|
|
//this.bar.animate( Math.round((loaded/total) * 100) / 100 );
|
||
|
|
|
||
|
|
if(total < loaded){
|
||
|
|
$(".preloader").attr("data-stroke", "green");
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
itemByName( name ) {
|
||
|
|
|
||
|
|
for(var c = 0; c<this.items.length; c++) {
|
||
|
|
var item = this.items[c];
|
||
|
|
if(item.name = name) {
|
||
|
|
return item;
|
||
|
|
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
add( name, size ) {
|
||
|
|
|
||
|
|
function clone(obj) {
|
||
|
|
if (null == obj || "object" != typeof obj) return obj;
|
||
|
|
var copy = obj.constructor();
|
||
|
|
for (var attr in obj) {
|
||
|
|
if (obj.hasOwnProperty(attr)) copy[attr] = obj[attr];
|
||
|
|
}
|
||
|
|
return copy;
|
||
|
|
}
|
||
|
|
|
||
|
|
var loadingItem = {};
|
||
|
|
|
||
|
|
loadingItem.name = name;
|
||
|
|
loadingItem.size = clone(size);
|
||
|
|
|
||
|
|
console.log('add item', loadingItem );
|
||
|
|
this.items.push(loadingItem);
|
||
|
|
if(size)
|
||
|
|
this.totalBytes += size;
|
||
|
|
|
||
|
|
var name_split = name.split("/");
|
||
|
|
var name_short = name_split[name_split.length-1];
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
var div = document.createElement("div");
|
||
|
|
var rand_col = '#'+Math.floor(Math.random()*16777215).toString(16);
|
||
|
|
name_short = "";
|
||
|
|
|
||
|
|
var mbSize = size / 10000;
|
||
|
|
|
||
|
|
//if(mbSize > 80)
|
||
|
|
// $(div).text(name_short ).addClass("loading_item").css({"width": mbSize, "background": rand_col});
|
||
|
|
|
||
|
|
loadingItem.div = div;
|
||
|
|
|
||
|
|
//$(".preloader").append(div);
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
finish( name ) {
|
||
|
|
//console.log("finish callback", name, this);
|
||
|
|
|
||
|
|
$(".preloader_holder").fadeOut( "slow", function() {
|
||
|
|
// Animation complete.
|
||
|
|
});
|
||
|
|
//var item = this.itemByName(name);
|
||
|
|
|
||
|
|
//this.loadedBytes += item.size;
|
||
|
|
|
||
|
|
//console.log("finish item", item);
|
||
|
|
//var div = item.div;
|
||
|
|
|
||
|
|
//var percentage = (this.loadedBytes / 53460652);
|
||
|
|
//this.bar.animate(percentage);
|
||
|
|
|
||
|
|
//$(div).animate({width: 0});
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
export {preloader as default};
|