refactor: organize hyperscript code and implement mobile button layout
This commit includes two major improvements:
1. Hyperscript Code Organization:
- Extracted all hyperscript blocks >3 lines into reusable functions
- Created 6 new functions in functions._hs:
* toggleCVLength(isLong) - CV length toggle sync
* toggleIcons(showIcons) - Icons toggle sync
* toggleTheme(isClean) - Theme toggle sync
* syncPdfHover(show) - PDF button synchronized hover
* syncPrintHover(show) - Print button synchronized hover
* highlightZoomControl(show) - Zoom control highlight effect
- Reduced inline hyperscript from 11+ lines to 1-2 lines per element
- Updated 8 template files to use function calls:
* hamburger-menu.html
* view-controls.html
* action-buttons.html
* download-button.html
* print-friendly-button.html
* zoom-toggle-button.html
2. Mobile Button Layout (max-width: 900px):
- Repositioned three fixed buttons (PDF, Print, Info) horizontally at bottom center
- Print button perfectly centered in viewport
- Download button on left, Info button on right
- Hidden zoom and shortcuts buttons on mobile (available in hamburger menu)
- Removed conflicting old mobile styles that were hiding print button
- Smooth hover transitions maintained with proper transform calculations
Technical details:
- Used CSS transform with calc() for precise horizontal positioning
- Maintained hover effects with combined translateX/translateY transforms
- Ensured accessibility with proper ARIA labels and spacing
- All functions check element existence before manipulation
- LocalStorage sync maintained across desktop/mobile toggles
This commit is contained in:
@@ -126,6 +126,105 @@ def handleScroll()
|
||||
set :lastScroll to currentScroll
|
||||
end
|
||||
|
||||
-- ==============================================================================
|
||||
-- TOGGLE FUNCTIONS (for view controls)
|
||||
-- ==============================================================================
|
||||
|
||||
-- CV Length Toggle
|
||||
def toggleCVLength(isLong)
|
||||
set paper to the first .cv-paper
|
||||
set otherToggle to (#lengthToggle or #lengthToggleMenu)
|
||||
|
||||
if isLong
|
||||
remove .cv-short from paper
|
||||
add .cv-long to paper
|
||||
set localStorage['cv-length'] to 'long'
|
||||
if otherToggle exists set otherToggle's checked to true
|
||||
else
|
||||
remove .cv-long from paper
|
||||
add .cv-short to paper
|
||||
set localStorage['cv-length'] to 'short'
|
||||
if otherToggle exists set otherToggle's checked to false
|
||||
end
|
||||
end
|
||||
|
||||
-- Icons Toggle
|
||||
def toggleIcons(showIcons)
|
||||
set paper to the first .cv-paper
|
||||
set otherToggle to (#iconToggle or #iconToggleMenu)
|
||||
|
||||
if showIcons
|
||||
add .show-icons to paper
|
||||
set localStorage['cv-icons'] to 'true'
|
||||
if otherToggle exists set otherToggle's checked to true
|
||||
else
|
||||
remove .show-icons from paper
|
||||
set localStorage['cv-icons'] to 'false'
|
||||
if otherToggle exists set otherToggle's checked to false
|
||||
end
|
||||
end
|
||||
|
||||
-- Theme Toggle
|
||||
def toggleTheme(isClean)
|
||||
set container to the first .cv-container
|
||||
set otherToggle to (#themeToggle or #themeToggleMenu)
|
||||
|
||||
if isClean
|
||||
add .theme-clean to container
|
||||
set localStorage['cv-theme'] to 'clean'
|
||||
if otherToggle exists set otherToggle's checked to true
|
||||
else
|
||||
remove .theme-clean from container
|
||||
set localStorage['cv-theme'] to 'default'
|
||||
if otherToggle exists set otherToggle's checked to false
|
||||
end
|
||||
end
|
||||
|
||||
-- Synchronized Hover for PDF Buttons
|
||||
def syncPdfHover(show)
|
||||
set fixedBtn to #download-button
|
||||
set actionBarBtn to #action-bar-pdf-btn
|
||||
set menuBtn to the first .menu-pdf-btn
|
||||
|
||||
if show
|
||||
if fixedBtn exists add .pdf-hover-sync to fixedBtn
|
||||
if actionBarBtn exists add .pdf-hover-sync to actionBarBtn
|
||||
if menuBtn exists add .pdf-hover-sync to menuBtn
|
||||
else
|
||||
if fixedBtn exists remove .pdf-hover-sync from fixedBtn
|
||||
if actionBarBtn exists remove .pdf-hover-sync from actionBarBtn
|
||||
if menuBtn exists remove .pdf-hover-sync from menuBtn
|
||||
end
|
||||
end
|
||||
|
||||
-- Synchronized Hover for Print Buttons
|
||||
def syncPrintHover(show)
|
||||
set fixedBtn to #print-friendly-button
|
||||
set actionBarBtn to the first .action-bar-print-btn
|
||||
set menuBtn to the first .menu-print-btn
|
||||
|
||||
if show
|
||||
if fixedBtn exists add .print-hover-sync to fixedBtn
|
||||
if actionBarBtn exists add .print-hover-sync to actionBarBtn
|
||||
if menuBtn exists add .print-hover-sync to menuBtn
|
||||
else
|
||||
if fixedBtn exists remove .print-hover-sync from fixedBtn
|
||||
if actionBarBtn exists remove .print-hover-sync from actionBarBtn
|
||||
if menuBtn exists remove .print-hover-sync from menuBtn
|
||||
end
|
||||
end
|
||||
|
||||
-- Zoom Control Highlight
|
||||
def highlightZoomControl(show)
|
||||
set zoomControl to #zoom-control
|
||||
|
||||
if show
|
||||
if zoomControl exists add .zoom-highlight to zoomControl
|
||||
else
|
||||
if zoomControl exists remove .zoom-highlight from zoomControl
|
||||
end
|
||||
end
|
||||
|
||||
-- ==============================================================================
|
||||
-- KEYBOARD SHORTCUTS
|
||||
-- ==============================================================================
|
||||
|
||||
Reference in New Issue
Block a user