119 lines
2.9 KiB
JavaScript
Executable File
119 lines
2.9 KiB
JavaScript
Executable File
let side_bar=document.getElementById('side_bar')
|
|
let width=side_bar.clientWidth
|
|
side_bar.style.left=-(width)+'px'
|
|
|
|
function animate({timing,draw,duration,on_done}){
|
|
start = performance.now();
|
|
requestAnimationFrame(function animate(time){
|
|
let timeFraction = (time - start) / duration;
|
|
if (timeFraction>1) timeFraction = 1;
|
|
let progress = timing(timeFraction)
|
|
draw(progress);
|
|
if(timeFraction<1){
|
|
requestAnimationFrame(animate)
|
|
} else {
|
|
if(typeof on_done === "function") on_done();
|
|
}
|
|
})
|
|
}
|
|
|
|
function open_sb(){
|
|
side_bar.style.opacity="1";
|
|
animate({
|
|
duration: 400,
|
|
timing(timeFraction){
|
|
return Math.pow(timeFraction,2);
|
|
},
|
|
draw(progress){
|
|
side_bar.style.left=(progress*width)-width+'px'
|
|
}
|
|
});
|
|
}
|
|
function close_sb(){
|
|
animate({
|
|
duration: 800,
|
|
timing(timeFraction){
|
|
return Math.pow(timeFraction, 2);
|
|
},
|
|
draw(progress){
|
|
document.getElementById("side_bar").style.left=((1-progress)*width)-width+'px'
|
|
},
|
|
on_done(){
|
|
side_bar.style.opacity="0";
|
|
}
|
|
});
|
|
}
|
|
|
|
|
|
fetch('assets/fetch-content-list.php?type=partial',{
|
|
cache:'no-cache'
|
|
})
|
|
.then(response=>response.json())
|
|
.then(res=>{
|
|
let folder='assets/'
|
|
input_str=''
|
|
for(i in res){
|
|
if(res[i].match(/.png|.PNG|.jpg|.JPG|.jpeg|.JPEG|.gif|.GIF/g)){
|
|
input_str+='<div class="image_box_img_wrap"><div><img src="'+folder+res[i]+'" /></div></div>'
|
|
} else if(res[i].match(/.mp4|.MP4/g)){
|
|
input_str+='<div class="image_box_img_wrap">'+
|
|
'<video class="videos" width="100%" height="100%'+
|
|
'" controls><source src=\''+folder+res[i]+
|
|
'\' type="video/mp4"></video></div>';
|
|
}
|
|
}
|
|
|
|
document.getElementById('image_box_container').innerHTML=input_str
|
|
})
|
|
|
|
image_container_child_width=0
|
|
image_container_child_count=0
|
|
function set_size(){
|
|
let img_wrap=document.getElementsByClassName("image_box_img_wrap")
|
|
image_container_child_width=img_wrap[0].clientWidth
|
|
image_container_child_count=img_wrap.length-1
|
|
setTimeout(set_size,1000)
|
|
}
|
|
setTimeout(set_size,1000)
|
|
|
|
|
|
last_index=0
|
|
last_pos=0
|
|
index=0
|
|
move_image_box_locked=false
|
|
function move_image_box(dir){
|
|
if(move_image_box_locked==false){
|
|
move_image_box_locked=true
|
|
let direction=''
|
|
let sub=''
|
|
if(dir=="+"){
|
|
index=index+1
|
|
direction=''
|
|
sub=''
|
|
} else {
|
|
direction='1-'
|
|
index-=1
|
|
sub='-'+image_container_child_width
|
|
}
|
|
animate({
|
|
duration:800,
|
|
timing(TF){
|
|
return Math.pow(TF,2);
|
|
},
|
|
draw(Prog){
|
|
document.getElementById("image_box_container").scrollLeft=(eval(direction+Prog)*(image_container_child_width))+eval(last_pos+sub)+(10*index)
|
|
},
|
|
on_done(){
|
|
last_pos=(image_container_child_width*index);
|
|
if(index<0){
|
|
index=0;
|
|
last_pos=0;
|
|
}
|
|
if(index>image_container_child_count){ index=image_container_child_count; last_pos=(image_container_child_width*index); }
|
|
move_image_box_locked=false
|
|
}
|
|
})
|
|
}
|
|
|
|
}
|