jennschiffer.com
make8bitart.com
1(function () {
2 const draggydivs = document.getElementsByClassName("draggydiv");
3 const minimizedList = document.getElementById("draggydivs-minimized");
4 let buttonsDrag = [];
5 let buttonsMinimize = [];
6 let zIndex = 1000;
7 let pos = { x: 0, y: 0 };
8 let currentDraggy;
9
10 // event helpers
11 const minimizeDraggydiv = (draggydiv, inURL) => {
12 if (!minimizedList) {
13 minimizedList = document.createElement("ul");
14 minimizedList.className = "draggydivs-minimized";
15 document.body.appendChild(minimizedList);
16 }
17
18 const minimizedItem = document.createElement("li");
19 const minimizedItemTitle = draggydiv.getAttribute("title");
20 minimizedItem.innerHTML = `<a class="draggydiv-title" href=#>${minimizedItemTitle}</a>`;
21 minimizedList.appendChild(minimizedItem);
22
23 minimizedItem.addEventListener("click", onMinimizedItemClick);
24
25 draggydiv.style.display = "none";
26 };
27
28 const expandDraggydiv = (draggydiv, inURL) => {
29 zIndex++;
30 draggydiv.style.zIndex = zIndex;
31 draggydiv.style.display = "block";
32
33 const menuItems = document.querySelectorAll(".draggydiv-title");
34 [].forEach.call(menuItems, function (item) {
35 if (item.innerHTML == draggydiv.title) {
36 item.closest("li").remove();
37 }
38 });
39
40 const { top } = draggydiv.getBoundingClientRect();
41 window.scrollTo(0, top);
42 };
43
44 // event callbacks
45 const onDragClick = (e) => {
46 pos = { x: e.pageX, y: e.pageY };
47 currentDraggy = e.target.closest(".draggydiv");
48
49 document.addEventListener("mousemove", onMove);
50 document.addEventListener("touchmove", onMove);
51 document.addEventListener("mouseup", onMouseUp);
52 document.addEventListener("touchend", onMouseUp);
53
54 zIndex++;
55 currentDraggy.style.zIndex = zIndex;
56 };
57
58 const onMinimizeClick = (e) => {
59 minimizeDraggydiv(e.target.closest(".draggydiv"));
60 };
61
62 const onMinimizedItemClick = (e) => {
63 e.preventDefault();
64 const thisMinimizedItem = e.target;
65 const thisMinimizedItemTitle = thisMinimizedItem.innerHTML;
66
67 const draggyToExpand = document.querySelector(
68 `[title="${thisMinimizedItemTitle}"]`
69 );
70 expandDraggydiv(draggyToExpand);
71 };
72
73 const onMove = (e) => {
74 const curr = { x: e.pageX, y: e.pageY };
75 const dx = curr.x - pos.x;
76 const dy = curr.y - pos.y;
77
78 const currentDraggyStyle = getComputedStyle(currentDraggy);
79
80 currentDraggy.style.setProperty(
81 "left",
82 parseInt(currentDraggyStyle.left) + dx + "px",
83 "important"
84 );
85 currentDraggy.style.setProperty(
86 "top",
87 parseInt(currentDraggyStyle.top) + dy + "px",
88 "important"
89 );
90
91 pos = curr;
92 };
93
94 const onMouseUp = (e) => {
95 document.removeEventListener("mousemove", onMove);
96 document.removeEventListener("touchmove", onMove);
97 document.removeEventListener("mouseup", onMouseUp);
98 document.removeEventListener("touchend", onMouseUp);
99 };
100
101 // init draggydiv styling and button events
102 const draggyPromises = [];
103 for (let i = 0; i < draggydivs.length; i++) {
104 const thisDraggyPromise = new Promise((resolve, reject) => {
105 draggydivs[i].style.top = parseInt(draggydivs[i].offsetTop) + "px";
106 draggydivs[i].style.left = parseInt(draggydivs[i].offsetLeft) + "px";
107 draggydivs[i].style.width = parseInt(draggydivs[i].offsetWidth) + "px";
108 draggydivs[i].style.zIndex = zIndex;
109 resolve(draggydivs[i]);
110 });
111 draggyPromises.push(thisDraggyPromise);
112
113 zIndex++;
114
115 buttonsDrag = buttonsDrag.concat(
116 Array.prototype.slice.call(
117 draggydivs[i].getElementsByClassName("draggydivs-drag")
118 )
119 );
120 buttonsMinimize = buttonsMinimize.concat(
121 Array.prototype.slice.call(
122 draggydivs[i].getElementsByClassName("draggydivs-minimize")
123 )
124 );
125
126 for (let j = 0; j < buttonsDrag.length; j++) {
127 buttonsDrag[j].addEventListener("mousedown", onDragClick);
128 buttonsDrag[j].addEventListener("touchstart", onDragClick);
129 }
130
131 for (let k = 0; k < buttonsMinimize.length; k++) {
132 buttonsMinimize[k].addEventListener("click", onMinimizeClick);
133 }
134
135 // if draggydiv initially has "draggydivs-init-closed" class, minimize
136 if (draggydivs[i].classList.contains("draggydivs-init-closed")) {
137 minimizeDraggydiv(draggydivs[i], true);
138 }
139 }
140 Promise.all(draggyPromises).then((draggydivVals) => {
141 draggydivVals.forEach((draggydiv) => {
142 draggydiv.style.position = "absolute";
143 });
144 });
145})();