Unify/application/demo/fileManager/fileManager.icon.js

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

	}

}