First commit

engine/preloader.js

@@ -0,0 +1,178 @@
+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};