164 lines
2.5 KiB
JavaScript
164 lines
2.5 KiB
JavaScript
|
|
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 );
|
|
|
|
}
|
|
|
|
} |