init

assets/index.js

@@ -0,0 +1,118 @@
+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
+			}
+		})
+	}
+	
+}