Rename scripts => js & css => sass

resources/js/galeri.js

@@ -0,0 +1,28 @@
+let fullscreen = document.getElementById("fullscreen");
+let img = document.getElementById("fullscreen-img");
+let header = document.getElementById("header");
+let container = document.getElementById("container");
+
+function hideEverything(bool) {
+    if (bool) {
+        header.style.display = "none";
+        container.style.display = "none";
+    } else {
+        header.style.display = "flex";
+        container.style.display = "grid";
+    }
+}
+
+window.onclick = e => {
+    let el = e.target;
+    if (el.classList.contains("photo") || el.id === "fullscreen-img") {
+        if (fullscreen.style.display === "flex") {
+            fullscreen.style.display = "none";
+            hideEverything(false);
+        } else {
+            img.src = el.src;
+            fullscreen.style.display = "flex";
+            hideEverything(true);
+        }
+    }
+}

resources/js/index.js

@@ -0,0 +1,15 @@
+const observer = new IntersectionObserver(entries => {
+    entries.forEach(entry => {
+        if (entry.isIntersecting) {
+            if (entry.target.classList.contains('reverse'))
+                entry.target.classList.add('table-item-animation-reverse');
+            else
+                entry.target.classList.add('table-item-animation');
+        }
+    });
+});
+
+let targets = document.querySelectorAll('.table-item');
+targets.forEach(target => {
+    observer.observe(target);
+})

resources/js/main.js

@@ -0,0 +1,37 @@
+const SCROLL_MIN = 100;
+const $scroll_to_top = document.querySelector("#scroll-to-top");
+const $drawer = document.querySelector("#drawer");
+const $drawer_item = document.querySelectorAll(".drawer-item");
+
+function checkScroll() {
+    if (document.documentElement.scrollTop > SCROLL_MIN || document.body.scrollTop > SCROLL_MIN) {
+        $scroll_to_top.style.display = "block";
+    } else {
+        $scroll_to_top.style.display = "none";
+    }
+}
+
+function scrollToTop() {
+    document.documentElement.scrollTop = 0;
+    document.body.scrollTop = 0;
+}
+
+async function toggleDropdown() {
+    let expanded = $drawer.classList.contains("expanded");
+    if (expanded) {
+        for (let i = 0; i < $drawer_item.length; i++) {
+            $drawer_item[i].classList.toggle("visible");
+        }
+        $drawer.classList.toggle("expanded");
+        $scroll_to_top.style.display = "block";
+    } else {
+        $drawer.classList.toggle("expanded");
+        $scroll_to_top.style.display = "none";
+        await new Promise(r => setTimeout(r, 250));
+        for (let i = 0; i < $drawer_item.length; i++) {
+            $drawer_item[i].classList.toggle("visible");
+        }
+    }
+}
+
+window.addEventListener('scroll', checkScroll);