First commit

application/demo/fileManager/fileManager.icon.deleteButton.js

@@ -0,0 +1,102 @@
+
+import icon			from "/elements/icon.js";
+
+
+
+#ifdef SERVER
+
+	import fs		from "fs";
+
+#endif
+
+
+const delay = time => new Promise(res=>setTimeout(res,time));
+
+
+export default class deleteFileIconButton extends icon{
+
+	width				= 24;
+
+	height				= 24;
+
+	propegateEvent		= false;
+
+	boxMarginTop		= "-12px";
+
+    boxBorderRadius		= 14;
+
+    boxBackground		= "#ffffffbf";
+
+    boxWidth			= "fit-content";
+
+    boxPadding			= 2;
+
+    boxPosition			= "absolute";
+
+    boxMarginLeft		= -8;
+
+    boxDisplay			= "none";
+
+
+   	async click() {
+
+    	this.parent.opacity 	= "0%";
+
+    	await delay(200)
+
+    	this.parent.background	= "none";
+
+    	this.parent.width		= 0;
+
+    	this.parent.margin		= 0;
+
+    	this.parent.padding		= 0;
+
+    	this.parent.border		= "none"
+
+    	await delay(200)
+
+    	this.parent.hide();
+
+    	this.parent.remove();
+
+    	var fileName	= this.parent.value;
+
+    	await this.removeFile( fileName );
+
+    }
+
+    node async removeFile( fileName ) {
+
+    	var absolutePath	= path.resolve( "./assets/uploads/" + fileName );
+
+    	console.log("Removing file test", absolutePath);
+
+    	if( fs.existsSync( absolutePath ) ) {
+
+    		fs.unlinkSync( absolutePath );
+
+    		console.log("File is removed.");
+
+    	} else {
+
+    		console.log("File does not exist.");
+
+    	}
+
+    }
+
+	constructor() {
+
+		super("close.svg")
+
+	}
+
+	create() {
+
+		this.hide();
+
+	}
+
+
+}

application/demo/fileManager/fileManager.icon.js

@@ -0,0 +1,164 @@
+
+import icon				from "/elements/icon.js";
+
+import deleteButton		from "./fileManager.icon.deleteButton.js";
+
+
+export default class fileIcon extends icon{
+
+	boxSizing			= "border-box"
+
+	border				= "none"
+
+	opacity				= "100%"
+
+	fontSize			= "0"
+
+	propegateEvent		= false;
+
+	backgroundSize		= "cover!important"
+
+	width				= 60;
+
+	height				= 60;
+
+	borderRadius		= 12;
+
+	margin				= 6;
+
+	display				= "block";
+
+	float				= "left";
+
+	layers				= 1;
+
+	border				= "2px solid #F7FAFC"
+
+	cursor				= "pointer";
+
+
+	deleteButton		= new deleteButton();
+
+	mode				= "show";
+
+	//transition			= "2s"
+
+	toggleEditMode() {
+
+		if( this.mode == "show" ) {
+
+			this.deleteButton.show();
+
+			this.mode = "edit";
+
+			this.rotateAnimation.play();
+
+		} else {
+
+			this.deleteButton.hide();
+
+			this.mode = "show";
+
+			this.rotateAnimation.stop();
+
+		}
+
+	}
+
+	create() {
+
+		this.setImage( "'/assets/uploads/" + this.value + "'" );
+
+		this.createKeyFrame();
+
+		this.opacityAnimation.play();
+
+	}
+
+	createKeyFrame() {
+
+		this.rotateAnimation = this.createAnimation("rotateAnimation");
+
+		var randomTime	= "0."+ 2 + Math.floor(Math.random() *1000);
+
+		this.rotateAnimation.setDuration( randomTime +"s" );
+
+		this.rotateAnimation.setIterationCount("infinite");
+
+
+		var key = this.rotateAnimation.createKeyFrame( 0 );
+
+		key.setProperty( "rotate", "3deg" );
+
+
+		var key = this.rotateAnimation.createKeyFrame( 50 );
+
+		key.setProperty( "rotate", "-3deg" );
+
+
+		var key = this.rotateAnimation.createKeyFrame( 100 );
+
+		key.setProperty( "rotate", "3deg" );
+
+
+
+		this.opacityAnimation = this.createAnimation("opacityAnimation");
+
+		this.opacityAnimation.setIterationCount("1");
+
+		this.opacityAnimation.setDuration( "0.9s" );
+
+		this.opacityAnimation.setFillMode( "forwards" );
+
+		
+
+
+		var key = this.opacityAnimation.createKeyFrame( 0 );
+
+		key.setProperty( "opacity", "0" );
+		key.setProperty( "display", "none" );
+
+
+		var key = this.opacityAnimation.createKeyFrame( 1 );
+
+		key.setProperty( "opacity", "0" );
+		key.setProperty( "display", "block" );
+
+
+		var key = this.opacityAnimation.createKeyFrame( 100 );
+
+		key.setProperty( "display", "block" );
+		key.setProperty( "opacity", "100%" );
+
+	}
+
+
+	mouseover() {
+
+		this.border	= "2px solid rgb(125 177 211)";
+
+	}
+
+	mouseleave() {
+
+		this.border	= "2px solid #F7FAFC";
+
+		//this.rotateAnimation.stop();
+
+	}
+
+	async click() {
+
+		var previewWindow = this.parent.parent.previewWindow;	
+
+		previewWindow.setTitle( this.value );
+
+		previewWindow.show("block");
+
+		previewWindow.center();
+
+		previewWindow.setImage( "/assets/uploads/" + this.value  );
+
+	}
+
+}

application/demo/fileManager/fileManager.imagePreviewWindow.js

@@ -0,0 +1,70 @@
+
+import draggable 			from '/elements/window/draggable.js';
+
+import page 				from '/elements/page.js';
+
+import windowHeader 		from '/elements/window/header.js';
+
+import previewImage 		from './preview/previewWindow.image.js';
+
+
+export default class imagePreviewWindow extends draggable{
+	
+	selector				= "#application";
+
+	backdropFilter			= "blur(22px)";
+
+	paddingBottom			= 30;
+
+	display					= "none"
+
+
+	#ifdef WINDOWS
+
+		#ifdef LIGHT
+
+			background				= "rgb(255 255 255 / 75%)"
+			
+		#endif
+
+		#ifdef DARK
+
+			background				= "#202020cc"
+
+		#endif
+
+	#endif
+
+	create() {
+
+		this.center();
+
+		this.hide();
+
+	}
+
+
+
+	width				= 600;
+
+
+	flexDirection		= "column";
+
+	borderRadius		= 12;
+
+	windowHeader		= new windowHeader();
+
+	previewImage		= new previewImage();
+
+	setTitle( title ) {
+
+		this.windowHeader.setTitle( title );
+	}
+
+	setImage( path ) {
+
+		this.previewImage.setImage( path )
+
+	}
+
+}

application/demo/fileManager/fileManager.js

@@ -0,0 +1,44 @@
+
+
+import fileupload 				from './fileManager.upload.js';
+
+import fileList					from "./fileManager.list.js";
+
+import removeIcons				from "./fileManager.removeIcons.js";
+
+import header 					from '/elements/header.js';
+
+import page 					from '/elements/page.js';
+
+import previewWindow			from "./fileManager.imagePreviewWindow.js"
+
+import fileChooser 				from '/elements/fileChooser/fileChooser.js';
+
+
+export default class fileManager extends page{
+
+
+	width					= "100%"
+
+	minHeight				= 350;
+
+	flexDirection			= "column"
+	
+	uploadHeader			= new header("Upload");
+
+	fileupload				= new fileupload();
+
+	filesHeader				= new header("Files");
+
+	removeIcons				= new removeIcons();
+
+	fileList				= new fileList();
+
+	previewWindow			= new previewWindow();
+
+
+	fileChooser				= new fileChooser();
+
+
+
+}

application/demo/fileManager/fileManager.list.js

@@ -0,0 +1,55 @@
+
+
+import fileIcon 	from 		"./fileManager.icon.js";
+
+import panel		from		"/elements/panel/row.js";
+
+#ifdef SERVER
+
+	import fs		from "fs";
+
+	import path		from "path";
+
+#endif
+
+export default class fileList extends panel{
+
+	margin	= 20;
+
+	padding	= 20;
+
+	display	= "block";
+
+	async create() {
+
+		this.empty();
+
+		var files = await this.readFiles();
+
+	}
+
+	node async readFiles() {
+
+		var absolutePath	= path.resolve( "./assets/uploads/" );
+
+		var files			= fs.readdirSync( absolutePath );
+
+		for (var i = 0; i < files.length; i++) {
+
+			var file 				= files[i];
+
+
+			var currentFileIcon		= new fileIcon();
+
+			currentFileIcon.value	= file;
+
+			this.add( currentFileIcon );
+			
+
+		}
+
+		return files;
+
+	}
+
+}

application/demo/fileManager/fileManager.removeIcons.js

@@ -0,0 +1,74 @@
+
+import icon 		from "/elements/icon.js";
+
+
+export default class removeIcons extends icon{
+	
+	width		= 14;
+
+	height		= 14;
+
+	margin		= 4;
+
+	propegateEvent	= false;
+
+	backgroundSize	= "contain!important"
+
+
+	cursor			= "pointer";
+
+	boxMarginTop	= "17px";
+
+    boxBorderRadius	= 14;
+
+    boxBackground	= "#ffffffbf";
+
+    boxWidth		= "fit-content";
+
+    boxPadding		= 2;
+
+    //boxPosition		= "";
+
+    boxMarginLeft	= 11;
+
+    boxMarginBottom	= -37;
+
+
+	constructor() {
+
+		super("edit.svg");
+
+	}
+
+	mode	= "normal";
+
+	click() {
+
+		var icons	= this.parent.fileList.getChildren();
+
+		for (var i = 0; i < icons.length; i++) {
+
+			var icon = icons[i];
+
+			icon.toggleEditMode();
+
+		}
+
+
+		if(this.mode == "normal") {
+
+			this.setImage("/assets/images/icons/stop.png")
+
+			this.mode = "wiggle";
+
+		} else {
+
+			this.mode = "normal";
+
+			this.setImage("/assets/images/icons/edit.svg")
+
+		}
+
+	}
+
+}

application/demo/fileManager/fileManager.upload.js

@@ -0,0 +1,150 @@
+
+import fileUpload 		from 	"/elements/fileUpload.js";
+
+import fileIcon 		from "./fileManager.icon.js";
+
+
+#ifdef SERVER
+
+	import fs			from "fs";
+
+	import path			from "path";
+
+	//import android	 from 'androidjs';
+
+#endif
+
+
+export default class stream extends fileUpload {
+
+	placeholder		= "Upload."
+
+	
+
+	margin	= 20;
+
+	stream;
+
+	type;
+/*
+	inputType		= "button";
+
+
+
+	click( event ) {
+
+		//this.android_file_chooser();
+
+
+		//var fileChooser	= this.parent.fileChooser;
+
+		//fileChooser.show("flex")
+
+		//fileChooser.open();
+
+	}
+*/
+	async change( event ) {
+
+		var input			= this.customElement;
+
+		var files			= input.files;
+
+		for (var i = 0; i < files.length; i++) {
+
+			var file 			= files[i];
+
+			var chunksize 		= 64 * 1024;
+
+			var offset 			= 0;
+
+			var filename		= file.name.replaceAll(" ", "_");
+
+			await this.createStream( filename );
+
+
+			while( offset < file.size ) {
+
+				const chunkfile = await file.slice( offset, offset + chunksize );
+
+				const chunk 	= await chunkfile.arrayBuffer();
+
+				var intChunk	= new Int8Array( chunk );
+
+				this.writeChunk( intChunk )
+
+				offset += chunksize;
+
+			}
+
+			await this.endstream();
+
+		}
+
+	}
+
+	node async createStream( filename ) {
+
+		var absolutePath	= path.resolve( "./assets/uploads/" + filename );
+
+		this.filename		= filename;
+
+		console.log("Writing file to path", absolutePath);
+
+		this.stream = fs.createWriteStream( absolutePath, { encoding: 'binary' } );
+
+		this.stream.on('finish', function() {
+
+			console.log('file has been written');
+
+		});
+
+	}
+
+
+	node async writeChunk( chunk ) {
+
+		this.stream.write( Buffer.from( Object.values( chunk ) ) );
+
+	}
+
+	node async endstream() {
+
+		this.stream.end();
+
+
+		var currentFileIcon		= new fileIcon();
+
+		currentFileIcon.value	= this.filename;
+
+		this.parent.fileList.add( currentFileIcon );
+
+	}
+
+	node async android_file_chooser() {
+
+		//const status = app.mobiledata.isEnabled();
+
+		//console.log(android);
+
+		//console.log("Mobile Data status: ", android);
+
+		//console.log(app.mobiledata.isEnabled());
+
+	}
+
+
+	//mouseover() {
+
+	//	console.log("mouseover??", this.parent.removeIcons)
+
+	//	if( this.parent.removeIcons.mode == "wiggle" ) {
+
+	//		this.parent.removeIcons.click();
+
+	//	}
+
+	//}
+
+
+}

application/demo/fileManager/preview/previewWindow.image.js

@@ -0,0 +1,24 @@
+
+import image	from "/elements/image.js";
+
+
+export default class previewImage extends image{
+	
+	layers				= 1;
+
+	width				= "90%"
+
+	//height	= "100%"
+
+	margin				= "0 auto";
+
+	backgroundSize		= "contain!important";
+
+	propegateEvent		= false;
+
+	borderRadius		= 12;
+
+	transition			= "1s"
+
+	maxHeight			= "87vh"
+}