haha

resources/js/le_script.js

@@ -0,0 +1,107 @@
+
+var cases = document.getElementsByClassName("case");
+
+var cases_el = document.getElementById("cases");
+
+for (let i = cases.length - 1; i >= 0; i--) {	
+	toggle_case(cases[i]);	
+	draggable(cases[i]);
+	initial_height_closed(cases[i]);
+}
+
+function draggable(e) {
+	var  x, y, x_offset, y_offset, dragged = false;
+
+	function drag_start(el) {
+		console.log("start");
+		el = el || window.event;
+		el.preventDefault();
+		x = el.clientX || el.targetTouches[0].pageX;
+		y = el.clientY || el.targetTouches[0].pageY;
+		x_offset = x - parseInt(e.offsetLeft);
+		y_offset = y - parseInt(e.offsetTop);
+		document.onmouseup = drag_stop;
+		document.ontouchend = drag_stop;
+		document.onmousemove = drag;
+		document.ontouchmove = drag;
+		// el.target.focus();
+	}
+
+	function drag(el) {
+		el = el || window.event;
+		el.preventDefault();
+
+		let cx = el.clientX || el.touches[el.touches.length].pageX;
+		let cy = el.clientY || el.touches[el.touches.length].pageY;
+
+		if ((cx !== x) & (cy !== y)) {
+			e.style.left = (cx - x_offset) + "px";
+			e.style.top = (cy - y_offset) + "px";			
+			if (!dragged)
+				fix_cases_el_height(e);
+			dragged = true;
+		}
+	}
+
+	function drag_stop(el) {
+		el = el || window.event;
+		el.preventDefault();		
+		document.onmouseup = null;
+		document.ontouchend = null;
+		document.onmousemove = null;
+		document.ontouchmove = null;
+
+		let cx = el.clientX || el.touches[el.touches.length].pageX;
+		let cy = el.clientY || el.touches[el.touches.length].pageY;
+
+		// if no move then collapse
+		if ((cx == x) & (cy == y)) {
+			toggle_case(e);
+		}
+	}
+
+	e.onmousedown = drag_start;
+	e.touchstart = drag_start;
+
+}
+
+function initial_height_closed(c) {
+	c.initial_height_closed = c.offsetHeight;
+}
+
+function toggle_case(c) {	
+	for (let i = c.children.length - 1; i >= 1; i--) {
+		c.children[i].classList.toggle('hidden');		
+		c.opened = !c.children[i].classList.contains('hidden')
+	}
+
+
+	if(c.opened) {
+		// c.style.removeProperty('height');		
+		c.classList.remove('close');
+		fix_cases_height();
+	} else {
+		c.classList.add('close');
+	}
+}
+
+function fix_cases_height(){
+	for (let i = cases.length - 1; i >= 0; i--) {	
+		if (!cases[i].opened) {
+			cases[i].classList.add('close');
+		}
+	}
+}
+
+function fix_cases_el_height(e){
+	let h = cases_el.offsetHeight;
+	// e.style.position = 'absolute';
+	for (let i = cases.length - 1; i >= 0; i--) {	
+		cases[i].style.position = 'absolute';
+	}
+
+	cases_el.style.height = h + 'px';
+}
+
+
+