108 lines
2.4 KiB
JavaScript
108 lines
2.4 KiB
JavaScript
|
|
||
|
|
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';
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
|