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
+
+}
+

application/elements/window/frostedGlass.js

@@ -0,0 +1,82 @@
+
+export default class frostedGlass{
+
+	//backgroundImage	= "url('/assets/images/frosted.png')";
+
+	backgroundSize;
+
+	backgroundPosition;
+	
+	clickPosition		= [0,0];
+
+
+
+	#ifdef WINDOWS
+
+		#ifdef DARK
+
+			//backgroundImage		= "url('/assets/images/wallpapers/ventura/darkBlur.png')";
+
+		#endif
+
+		#ifdef LIGHT
+
+			//backgroundImage		= "url('/assets/images/wallpapers/windows/lightBlur.png')";
+
+		#endif
+
+	#endif
+
+
+	#ifdef MACOS
+
+		#ifdef DARK
+
+			//backgroundImage		= "url('/assets/images/wallpapers/ventura/darkBlur.jpg')";
+
+		#endif
+
+		#ifdef LIGHT
+
+			//backgroundImage		= "url('/assets/images/wallpapers/ventura/light/lightBlur.jpg')";
+
+		#endif
+
+	#endif
+
+
+	updateBackgroundCoordinates() {
+
+		var backgroundSize			= window.innerWidth + "px " + window.innerHeight + "px"
+
+		this.backgroundSize			= backgroundSize;
+
+		this.boxBackgroundSize		= backgroundSize;
+
+
+		var boundBox				= this.defaultElement.getBoundingClientRect();
+
+		var x 						= boundBox.x * -1;
+
+		var y 						= boundBox.y * -1;
+
+		var backgroundPosition		= x + "px " + y + "px";
+
+		this.backgroundPosition		= backgroundPosition;
+
+	}
+
+	create() {
+
+		this.updateBackgroundCoordinates();
+
+	}
+
+
+	windowResize() {
+
+		this.updateBackgroundCoordinates();
+
+	}
+	
+}

application/elements/window/header.js

@@ -0,0 +1,276 @@
+
+
+import icon	from "/elements/icon.js";
+
+
+class maximizeButton extends icon{
+
+	margin	= 20;
+
+	cursor	= "pointer"
+
+	width	= 16;
+
+	height	= 16;
+
+	backgroundSize	= "contain!important";
+
+	#ifdef LIGHT
+
+		filter				= "invert(0)"
+		
+	#endif
+
+	#ifdef DARK
+
+		filter				= "invert(1)"
+
+	#endif
+
+
+	click() {
+
+		var window = this.parent.parent.parent;
+
+
+		if( window.state == "maximized" ) {
+
+			window.restore();
+
+			window.state	= "normal";
+
+			this.setImage("assets/images/icons/maximize.svg")
+
+		} else {
+
+			window.maximize();
+
+			window.state	= "maximized";
+
+			this.setImage("assets/images/icons/restore.svg")
+
+
+		}
+	}
+
+	constructor() {
+
+		super("maximize.svg")
+
+	}
+
+	transition	= "1s"
+
+}
+
+
+
+class closeButton extends icon{
+
+	margin	= 20;
+
+	cursor	= "pointer"
+
+	width	= 16;
+
+	height	= 16;
+
+	backgroundSize	= "contain!important";
+
+	#ifdef LIGHT
+
+		filter				= "invert(0)"
+		
+	#endif
+
+	#ifdef DARK
+
+		filter				= "invert(1)"
+
+	#endif
+
+
+	click() {
+
+		this.parent.parent.parent.hide();
+
+	}
+
+	constructor() {
+
+		super("close.svg")
+
+	}
+
+
+}
+
+
+class leftControl{
+
+
+
+	closeButton		= new closeButton();
+
+	maximizeButton	= new maximizeButton();
+
+	#ifdef DARK
+
+		color		= "#363636";
+
+	#endif
+
+	height		= "40px"
+
+	display		= "flex";
+
+	layers		= 1;
+
+	flex		= "1";
+
+	flexDirection	= "row"
+
+}
+
+class title{
+
+	//background	= "blue";
+
+	setTitle( title ) {
+
+		this.element.innerText = title;
+
+	}
+
+	padding		= 20;
+
+	height		= "40px"
+
+	display		= "block";
+
+	layers		= 1;
+
+}
+
+
+class rightControl{
+
+	//background	= "yellow";
+
+	height		= "40px"
+
+	display		= "block";
+
+	flex		= "1";
+
+	layers		= 1;
+
+}
+
+
+export default class windowHeader{
+
+
+
+	constructor( text, gridName ) {
+
+		this.title.text 		= text;
+		
+		this.gridArea 	= gridName;
+
+	}
+
+
+
+	setTitle( title ) {
+
+		this.title.setTitle( title );
+	}
+
+	boxShadow				= "0px 1px 1px 0px #00000008";
+
+	marginBottom			= 10;
+
+
+	leftControl		= new leftControl();
+
+	title			= new title();
+
+	rightControl	= new rightControl();
+
+
+
+	width			= "100%";
+
+	layers			= 1;
+
+	gridArea		= "passwordLabel";
+
+	color			= "black";
+
+	//padding			= 20;
+
+	fontWeight		= "bold";
+
+	fontSize		= 12;
+
+	#ifdef WINDOWS
+
+		#ifdef LIGHT
+
+
+
+
+		#endif
+
+
+		#ifdef DARK
+
+			color	= "white";
+
+		#endif
+	
+
+	#endif
+
+
+	#ifdef MACOS
+
+		borderTopLeftRadius		= "4px"
+
+		borderTopRightRadius	= "4px" 
+
+		//padding					= 10;
+
+		//paddingLeft				= 0;
+
+		boxWidth				= "100%";
+
+
+
+
+		#ifdef LIGHT
+
+			borderBottom			= "1px solid #f1f1f1";
+
+			background	= "white";
+
+
+		#endif
+
+
+		#ifdef DARK
+
+			color					= "white";
+
+			borderBottom			= "1px solid black";
+
+			background				= "#1c1c1c";
+
+		#endif
+	
+
+	#endif
+
+
+}