First commit

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