From 3c49f8f7cfb5d80d111576d20cee0c7d5459ff5c Mon Sep 17 00:00:00 2001 From: juanatsap Date: Tue, 2 Dec 2025 16:23:40 +0000 Subject: [PATCH] refactor: use idiomatic hyperscript selector syntax Replace verbose document.getElementById() and document.querySelectorAll() with cleaner hyperscript syntax: - #id for ID selectors - .class and the first .class for class selectors - query literals for complex selectors - #{variable} for dynamic ID interpolation Files changed: - utils._hs: scrollHeight, details, footer buttons, scrollToSection - zoom._hs: all zoom control element selectors (14 changes) - pdf-modal._hs: modal selector - keyboard._hs: dynamic toggle and modal selectors - contact-modal.html: response div and modal close - index.html: ninja-keys bar selector --- static/hyperscript/keyboard._hs | 6 +++--- static/hyperscript/pdf-modal._hs | 2 +- static/hyperscript/utils._hs | 14 ++++++------- static/hyperscript/zoom._hs | 22 ++++++++++---------- templates/index.html | 2 +- templates/partials/modals/contact-modal.html | 4 ++-- 6 files changed, 25 insertions(+), 25 deletions(-) diff --git a/static/hyperscript/keyboard._hs b/static/hyperscript/keyboard._hs index 3c9fd6a..f2ec770 100644 --- a/static/hyperscript/keyboard._hs +++ b/static/hyperscript/keyboard._hs @@ -8,9 +8,9 @@ -- Helper function to toggle a checkbox by ID (tries primary ID, then menu ID) -- Called from inline keyboard handler in body tag def handleToggleShortcut(toggleId, menuToggleId) - set toggle to document.getElementById(toggleId) + set toggle to #{toggleId} if toggle is null - set toggle to document.getElementById(menuToggleId) + set toggle to #{menuToggleId} end if toggle is not null set toggle.checked to (not toggle.checked) @@ -23,7 +23,7 @@ end -- ============================================================================== -- Helper function to open a modal dialog by ID def openModalShortcut(modalId) - set modal to document.getElementById(modalId) + set modal to #{modalId} if modal is not null call modal.showModal() end diff --git a/static/hyperscript/pdf-modal._hs b/static/hyperscript/pdf-modal._hs index 652dfe9..a148d5f 100644 --- a/static/hyperscript/pdf-modal._hs +++ b/static/hyperscript/pdf-modal._hs @@ -9,7 +9,7 @@ -- Called from each card's click event def selectPdfCard(card) -- Get the modal container - set modal to document.getElementById('pdf-modal') + set modal to #pdf-modal if modal is null then exit end -- Remove selected from all cards diff --git a/static/hyperscript/utils._hs b/static/hyperscript/utils._hs index ae46d99..448520c 100644 --- a/static/hyperscript/utils._hs +++ b/static/hyperscript/utils._hs @@ -67,8 +67,8 @@ def handleScroll() set isMenuOpen to menu.classList.contains('menu-open') -- Calculate if at bottom (within 50px) - set scrollHeight to document.documentElement.scrollHeight - set clientHeight to document.documentElement.clientHeight + set scrollHeight to the document's documentElement's scrollHeight + set clientHeight to the document's documentElement's clientHeight set isAtBottom to (scrollHeight - currentScroll - clientHeight) < 50 -- Reset keepHeaderVisible when scrolling up @@ -144,7 +144,7 @@ end -- Expand all
elements in the CV def expandAllSections(evt) if evt then call evt.preventDefault() end - set details to document.querySelectorAll('details') + set details to
for d in details set d's @open to '' end @@ -153,7 +153,7 @@ end -- Collapse all
elements in the CV def collapseAllSections(evt) if evt then call evt.preventDefault() end - set details to document.querySelectorAll('details') + set details to
for d in details call d.removeAttribute('open') end @@ -164,7 +164,7 @@ end -- ============================================================================== -- Adds/removes footer-hovered class to fixed buttons when hovering footer def setFooterHover(show) - set buttons to document.querySelectorAll('.download-btn, .print-friendly-btn, .shortcuts-btn, .info-button, .back-to-top, .color-theme-switcher') + set buttons to <.download-btn, .print-friendly-btn, .shortcuts-btn, .info-button, .back-to-top, .color-theme-switcher/> for btn in buttons if show add .footer-hovered to btn @@ -199,11 +199,11 @@ end -- Smooth scroll to a section by ID def scrollToSection(evt, sectionId) if evt then call evt.preventDefault() end - set el to document.getElementById(sectionId) + set el to #{sectionId} if el is not null call el.scrollIntoView({ behavior: 'smooth' }) -- Close the menu after navigation - set menu to document.querySelector('.navigation-menu') + set menu to the first .navigation-menu if menu is not null remove .menu-hover from menu remove .menu-open from menu diff --git a/static/hyperscript/zoom._hs b/static/hyperscript/zoom._hs index 1a0b665..e3e94fc 100644 --- a/static/hyperscript/zoom._hs +++ b/static/hyperscript/zoom._hs @@ -11,7 +11,7 @@ def handleZoomInput(slider) set zoomLevel to zoomValue / 100 -- Update display - set valueEl to document.getElementById('zoom-value-current') + set valueEl to #zoom-value-current if valueEl is not null put zoomValue into valueEl end @@ -19,7 +19,7 @@ def handleZoomInput(slider) set slider's @aria-valuetext to `${zoomValue}%` -- Toggle reset button class - set resetBtn to document.getElementById('zoom-reset') + set resetBtn to #zoom-reset if resetBtn is not null if zoomValue is not 100 add .zoom-not-default to resetBtn @@ -29,7 +29,7 @@ def handleZoomInput(slider) end -- Apply zoom to wrapper - set wrapper to document.getElementById('zoom-wrapper') + set wrapper to #zoom-wrapper if wrapper is not null set wrapper's *zoom to zoomLevel -- Handle width for zoom > 100% @@ -53,7 +53,7 @@ end -- ============================================================================== -- Called from reset button to reset zoom to 100% def handleZoomReset() - set slider to document.getElementById('zoom-slider') + set slider to #zoom-slider if slider is not null set slider.value to 100 call handleZoomInput(slider) @@ -73,7 +73,7 @@ def initZoomControl(control) -- Load saved zoom level set savedZoom to localStorage.getItem('cv-zoom') - set slider to document.getElementById('zoom-slider') + set slider to #zoom-slider if savedZoom and slider set slider.value to savedZoom call handleZoomInput(slider) @@ -83,7 +83,7 @@ def initZoomControl(control) set isVisible to localStorage.getItem('cv-zoom-visible') if isVisible is 'true' remove .zoom-hidden from control - set menuBtn to document.getElementById('show-zoom-menu-btn') + set menuBtn to #show-zoom-menu-btn if menuBtn is not null add .zoom-hidden to menuBtn end @@ -104,8 +104,8 @@ end -- ============================================================================== -- Show zoom control def showZoomControl() - set control to document.getElementById('zoom-control') - set menuBtn to document.getElementById('show-zoom-menu-btn') + set control to #zoom-control + set menuBtn to #show-zoom-menu-btn if control is not null remove .zoom-hidden from control set localStorage['cv-zoom-visible'] to 'true' @@ -117,8 +117,8 @@ end -- Hide zoom control def hideZoomControl() - set control to document.getElementById('zoom-control') - set menuBtn to document.getElementById('show-zoom-menu-btn') + set control to #zoom-control + set menuBtn to #show-zoom-menu-btn if control is not null add .zoom-hidden to control set localStorage['cv-zoom-visible'] to 'false' @@ -130,7 +130,7 @@ end -- Toggle zoom control visibility def toggleZoomControl() - set control to document.getElementById('zoom-control') + set control to #zoom-control if control is not null if control.classList.contains('zoom-hidden') call showZoomControl() diff --git a/templates/index.html b/templates/index.html index b4bf6ad..b68743c 100644 --- a/templates/index.html +++ b/templates/index.html @@ -6,7 +6,7 @@ on scroll from window call handleScroll() on keydown set tag to event.target.tagName - set ninjaKeys to document.getElementById('cmd-k-bar') + set ninjaKeys to #cmd-k-bar set ninjaOpen to (ninjaKeys is not null and ninjaKeys.opened) set skip to (tag is 'INPUT' or tag is 'TEXTAREA' or ninjaOpen) set noMod to (not event.ctrlKey and not event.metaKey and not event.altKey) diff --git a/templates/partials/modals/contact-modal.html b/templates/partials/modals/contact-modal.html index 0750467..fe07db2 100644 --- a/templates/partials/modals/contact-modal.html +++ b/templates/partials/modals/contact-modal.html @@ -29,7 +29,7 @@ hx-headers='{"X-Requested-With": "XMLHttpRequest"}' _="on htmx:afterRequest -- Check if response contains success message (not validation error) - set responseDiv to document.getElementById('contact-response') + set responseDiv to #contact-response if responseDiv is not null and responseDiv.querySelector('.contact-success') is not null -- Hide all form fields and show only success message set formFields to me.querySelectorAll('.form-group') @@ -39,7 +39,7 @@ add .hidden to me.querySelector('.form-actions') add .hidden to me.querySelector('.form-note') -- Close modal after 3 seconds - wait 3s then call document.getElementById('contact-modal').close() + wait 3s then call #contact-modal.close() end">