first client ver

1 files changed, 58 insertions, 0 deletions

diff --git a/client/public/stuff.ts b/client/public/stuff.ts
new file mode 100644
index 0000000..5d7e882
--- /dev/null
+++ b/client/public/stuff.ts
@@ -0,0 +1,58 @@
+export const sidebar = document.getElementById('sidebar')!
+export const backdrop = document.getElementById('sidebar-backdrop')!
+export const toggle = document.getElementById('sidebar-toggle')!
+export const close = document.getElementById('sidebar-close')!
+
+export const openSidebar = () => {
+    sidebar.classList.add('open')
+    backdrop.classList.add('open')
+    toggle.setAttribute('aria-expanded', 'true')
+    document.body.style.overflow = 'hidden'
+}
+export const closeSidebar = () => {
+    sidebar.classList.remove('open')
+    backdrop.classList.remove('open')
+    toggle.setAttribute('aria-expanded', 'false')
+    document.body.style.overflow = ''
+}
+
+toggle.addEventListener('click', () => sidebar.classList.contains('open') ? closeSidebar() : openSidebar())
+close.addEventListener('click', closeSidebar)
+backdrop.addEventListener('click', closeSidebar)
+document.addEventListener('keydown', e => { if (e.key === 'Escape') closeSidebar() })
+window.addEventListener('resize', () => { if (window.innerWidth > 680) closeSidebar() })
+
+document.querySelectorAll('s-item').forEach(item => {
+    item.addEventListener('click', function () {
+        document.querySelectorAll('s-item').forEach(i => i.removeAttribute('active'))
+        //@ts-expect-error
+        this.setAttribute('active', '')
+        if (window.innerWidth <= 680) closeSidebar()
+    })
+})
+
+export const showModal = () => {
+    document.getElementById('modal-backdrop')!.classList.add('modal-open')
+    document.getElementById('modal-el')!.focus()
+}
+export const hideModal = () => { document.getElementById('modal-backdrop')!.classList.remove('modal-open') }
+export const setModalHTML = (html: string) => {
+    document.getElementById('modal-el')!.innerHTML = html
+    showModal()
+}
+export const getModal = () => document.getElementById('modal-el')
+
+// document.getElementById('modal-backdrop')!.addEventListener('click', e => { if (e.target === document.getElementById('modal-backdrop')) hideModal() })
+
+export const createPillHTML = (label: string, html: string, fullWidth = false) =>
+    `<pill${fullWidth ? ' full' : ''}><p>${label}</p><elm>${html}</elm></pill>`
+
+document.addEventListener('DOMContentLoaded', () => {
+    document.querySelectorAll('input[type="range"]').forEach(slider => {
+        const valEl = slider.parentElement?.querySelector('val')
+        if (valEl) {
+            valEl.textContent = (slider as any).value
+            slider.addEventListener('input', () => valEl.textContent = (slider as any).value)
+        }
+    })
+})
\ No newline at end of file