WebSAW-LOCAL/resources/js/app.js

128 lines
4.4 KiB
JavaScript

import './bootstrap';
document.addEventListener('DOMContentLoaded', function () {
// ----- Sidebar (app layout): toggle mobile, collapse desktop -----
var sidebar = document.getElementById('sidebar');
var sidebarOverlay = document.getElementById('sidebar-overlay');
var sidebarToggleBtns = document.querySelectorAll('[data-action="sidebar-toggle"]');
var sidebarCollapseBtn = document.querySelector('[data-action="sidebar-collapse"]');
function sidebarOpen() {
if (!sidebar || !sidebarOverlay) return;
sidebar.classList.remove('-translate-x-full');
sidebarOverlay.classList.add('active', 'opacity-100', 'pointer-events-auto');
}
function sidebarClose() {
if (!sidebar || !sidebarOverlay) return;
sidebar.classList.add('-translate-x-full');
sidebarOverlay.classList.remove('active', 'opacity-100', 'pointer-events-auto');
}
function sidebarToggle() {
if (!sidebar) return;
if (sidebar.classList.contains('-translate-x-full')) {
sidebarOpen();
} else {
sidebarClose();
}
}
sidebarToggleBtns.forEach(function (btn) {
btn.addEventListener('click', sidebarToggle);
});
if (sidebarOverlay) {
sidebarOverlay.addEventListener('click', sidebarClose);
}
if (sidebarCollapseBtn) {
sidebarCollapseBtn.addEventListener('click', function () {
if (!sidebar) return;
var collapsed = sidebar.getAttribute('data-collapsed') === 'true';
sidebar.setAttribute('data-collapsed', !collapsed);
sidebar.classList.toggle('sidebar-collapsed', !collapsed);
try {
localStorage.setItem('sidebarCollapsed', !collapsed);
} catch (e) {}
});
}
if (sidebar && window.matchMedia('(min-width: 768px)').matches) {
try {
if (localStorage.getItem('sidebarCollapsed') === 'true') {
sidebar.setAttribute('data-collapsed', 'true');
sidebar.classList.add('sidebar-collapsed');
}
} catch (e) {}
}
// ----- Nav drawer (guest layout) -----
var navToggle = document.getElementById('nav-toggle');
var navClose = document.getElementById('nav-close');
var navOverlay = document.getElementById('nav-overlay');
var navDrawer = document.getElementById('nav-drawer');
function navDrawerOpen() {
if (!navDrawer || !navOverlay) return;
navDrawer.classList.add('open');
navDrawer.setAttribute('aria-hidden', 'false');
navOverlay.classList.add('opacity-100', 'pointer-events-auto');
}
function navDrawerClose() {
if (!navDrawer || !navOverlay) return;
navDrawer.classList.remove('open');
navDrawer.setAttribute('aria-hidden', 'true');
navOverlay.classList.remove('opacity-100', 'pointer-events-auto');
}
if (navToggle) navToggle.addEventListener('click', navDrawerOpen);
if (navClose) navClose.addEventListener('click', navDrawerClose);
if (navOverlay) navOverlay.addEventListener('click', navDrawerClose);
document.querySelectorAll('.nav-drawer-link').forEach(function (link) {
link.addEventListener('click', navDrawerClose);
});
// ----- Shop filter toggle (mobile) -----
var filterToggle = document.getElementById('filter-toggle');
var filterPanel = document.getElementById('filter-panel');
var filterIcon = document.getElementById('filter-icon');
if (filterToggle && filterPanel) {
filterToggle.addEventListener('click', function () {
filterPanel.classList.toggle('hidden');
if (filterIcon) filterIcon.classList.toggle('rotate-180');
});
}
// ----- Recommendation sliders: update value display -----
document.querySelectorAll('input[type="range"][name^="priorities"]').forEach(function (el) {
var name = el.getAttribute('name');
var key = name && name.match(/\[(\w+)\]$/) ? name.match(/\[(\w+)\]/)[1] : null;
if (!key) return;
var valEl = document.getElementById('val-' + key);
function update() {
if (valEl) valEl.textContent = el.value;
}
el.addEventListener('input', update);
update();
});
// ----- Forms with data-confirm: confirm before submit -----
document.querySelectorAll('form[data-confirm]').forEach(function (form) {
form.addEventListener('submit', function (e) {
var msg = form.getAttribute('data-confirm') || 'Lanjutkan?';
if (!window.confirm(msg)) {
e.preventDefault();
}
});
});
// ----- Print buttons (invoice) -----
document.querySelectorAll('[data-action="print"]').forEach(function (btn) {
btn.addEventListener('click', function (e) {
e.preventDefault();
window.print();
});
});
});