First commit

application/elements/window/draggable.js

@@ -0,0 +1,229 @@
+class vector2{
+
+	constructor( x, y ) {
+	
+		this.x = x;
+		this.y = y;
+	
+	}
+
+	x = 0;
+	y = 0;
+
+}
+
+function delay(time) {
+  return new Promise(resolve => setTimeout(resolve, time));
+}
+
+
+export default class draggable{
+
+	backfaceVisibility	 = false;
+
+	position	= "absolute";
+
+	zIndex;
+
+#ifdef CLIENT
+
+	propegateEvent		= false;
+
+	transition			= "none";
+
+
+	transform;
+
+	width;
+
+	height;
+
+	x;
+
+	y;
+
+
+	transition	= "width 1s, height 1s";
+
+	// Custom Properties
+	draggable			= true;
+
+	grab				= false;
+
+	lastPosition;
+
+	currentPosition		= new vector2( 0, 0 );
+
+	grabPosition		= new vector2( 0, 0 );
+
+
+	state				= "normal";
+
+
+	click() {
+
+		this.grab = false;
+
+	}
+
+	mouseout() {
+
+		//this.grab = false;
+
+	}
+
+
+	async render( delta ) {
+
+		#ifdef ANDROID
+
+			this.transform 			= "translate(0px, 0px)";
+
+			return true;
+
+		#endif
+
+		if( this.draggable ) {
+
+			if(!this.lastPosition) {
+
+				return false;
+
+			}
+
+			var x = 	this.lastPosition.x;
+
+			var y =  	this.lastPosition.y;
+
+		
+			if( this.grab ) {
+
+
+				var x = this.mouse.x - this.grabPosition.x + this.lastPosition.x;
+
+				var y = this.mouse.y - this.grabPosition.y + this.lastPosition.y;
+
+
+			}
+
+			this.transform 			= "translate3d("+ x+"px, "+ y +"px, 0)";
+
+			this.currentPosition	= new vector2( x , y );
+
+			if( this.updateBackgroundCoordinates ) {
+
+				this.updateBackgroundCoordinates();
+
+			}
+
+		}
+	}
+
+	maximize() {
+
+		this.restorePosition	= this.transform;
+
+		this.width				= "100vw";
+
+		this.height				= "100vh"
+
+		this.draggable 			= false;
+
+		this.transition			= "transform 0.1s, width 0.1s, height 0.1s";
+
+		this.transform 			= "translate3d(0px, 0px)";
+
+		this.state				= "maximized"
+
+		//this.lastPosition		= new vector2( 0,0 );
+
+	}
+
+	async restore() {
+
+		this.width	= "";
+
+		this.height	= "";
+
+		this.draggable 			= true;
+
+		await delay(1000);
+
+		this.transition			= "";
+
+	}
+
+
+
+	center() {
+
+		this.element.style.zIndex	= document.globalZIndex++;
+		
+		var domWindow		= document.defaultView;
+
+		this.windowHeight	= domWindow.innerHeight;
+
+		this.windowWidth	= domWindow.innerWidth;
+
+
+		var boundBox		= this.element.getBoundingClientRect();
+
+
+		var width				= boundBox.width;
+
+		var height			= boundBox.height;
+
+
+		var x						= this.windowWidth / 2 - ( width / 2 );
+
+		var y						= this.windowHeight / 2 - ( height / 2 ); 
+
+
+		this.lastPosition		= new vector2( Math.round(x), Math.round(y) );
+
+	}
+
+	mouseup() {
+	
+		this.grab 					= false;
+
+		this.border			= "none"
+
+		var boundBox				= this.defaultElement.getBoundingClientRect();
+
+		var x 						= boundBox.x;
+
+		var y 						= boundBox.y;
+
+		this.lastPosition			= this.currentPosition;
+
+
+
+	}
+	
+	async mousedown( event ) {
+
+		if( event.button != 0 ) {
+
+			return false;
+
+		}
+
+		if( !this.lastPosition ) {
+
+			this.lastPosition			= this.currentPosition;
+
+		}
+
+		this.element.style.zIndex	= document.globalZIndex++;
+
+		this.grab			= true;
+
+		this.grabPosition	= this.mouse;
+
+	}
+
+#endif
+
+}
+