txeo/cv-site
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
982257b4c1d031a03e44c4547f24d43473f90b31
cv-site/templates/partials/modals/shortcuts-modal.html
T
juanatsap 2d3d3de8cd feat: lazy load ninja-keys + HTML Invoker Commands API 
- Lazy load ninja-keys only on CMD+K press (0 requests on initial load)
- Use esm.sh bundled module (3 requests vs ~81 previously)
- Add esm.sh to CSP whitelist
- Implement HTML Invoker Commands API for modals:
  - commandfor="modal-id" + command="show-modal" for opening
  - commandfor="modal-id" + command="close" for closing
  - Removes need for onclick handlers on modal buttons
- Refactor index.html into layout partials (head, body-scripts)
- Add comprehensive tests for both features
2025-12-02 08:29:54 +00:00

165 lines
9.1 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
{{define "shortcuts-modal"}}
<!-- Keyboard Shortcuts Modal - Native Dialog -->
<dialog id="shortcuts-modal" class="info-modal no-print"
_="on click call closeOnBackdrop(me, event)">
<div class="info-modal-content">
<button class="info-modal-close" commandfor="shortcuts-modal" command="close" aria-label="{{.UI.ShortcutsModal.Close}}">
<iconify-icon icon="mdi:close" width="24" height="24"></iconify-icon>
</button>
<div class="info-modal-header">
<h2>{{.UI.ShortcutsModal.Title}}</h2>
<div class="info-modal-cv-title">
<span class="keyboard-icon-wrapper">
<iconify-icon icon="mdi:keyboard-outline" width="32" height="32"></iconify-icon>
</span>
{{.UI.ShortcutsModal.Subtitle}}
</div>
</div>
<div class="info-modal-body">
<!-- Zoom Shortcuts -->
<div class="shortcuts-section">
<h3 class="shortcuts-section-title">
<iconify-icon icon="mdi:magnify" width="20" height="20"></iconify-icon>
{{.UI.ShortcutsModal.Sections.Zoom.Title}}
</h3>
<div class="shortcuts-list">
<div class="shortcut-item">
<div class="shortcut-keys">
<kbd><iconify-icon icon="mdi:apple-keyboard-control" width="14" height="14"></iconify-icon></kbd> / <kbd><iconify-icon icon="mdi:apple-keyboard-command" width="14" height="14"></iconify-icon></kbd> <kbd>+</kbd>
</div>
<span class="shortcut-desc">{{.UI.ShortcutsModal.Sections.Zoom.ZoomIn.Description}}</span>
</div>
<div class="shortcut-item">
<div class="shortcut-keys">
<kbd><iconify-icon icon="mdi:apple-keyboard-control" width="14" height="14"></iconify-icon></kbd> / <kbd><iconify-icon icon="mdi:apple-keyboard-command" width="14" height="14"></iconify-icon></kbd> <kbd>−</kbd>
</div>
<span class="shortcut-desc">{{.UI.ShortcutsModal.Sections.Zoom.ZoomOut.Description}}</span>
</div>
<div class="shortcut-item">
<div class="shortcut-keys">
<kbd><iconify-icon icon="mdi:apple-keyboard-control" width="14" height="14"></iconify-icon></kbd> / <kbd><iconify-icon icon="mdi:apple-keyboard-command" width="14" height="14"></iconify-icon></kbd> <kbd>0</kbd>
</div>
<span class="shortcut-desc">{{.UI.ShortcutsModal.Sections.Zoom.ZoomReset.Description}}</span>
</div>
</div>
</div>
<!-- View Controls -->
<div class="shortcuts-section">
<h3 class="shortcuts-section-title">
<iconify-icon icon="mdi:tune-variant" width="20" height="20"></iconify-icon>
{{.UI.ShortcutsModal.Sections.ViewControls.Title}}
</h3>
<div class="shortcuts-list">
<div class="shortcut-item">
<div class="shortcut-keys">
<kbd><iconify-icon icon="mdi:keyboard-tab" width="14" height="14"></iconify-icon></kbd> to Length
</div>
<span class="shortcut-desc">{{.UI.ShortcutsModal.Sections.ViewControls.ToggleLength.Description}}</span>
</div>
<div class="shortcut-item">
<div class="shortcut-keys">
<kbd><iconify-icon icon="mdi:keyboard-tab" width="14" height="14"></iconify-icon></kbd> to Icons
</div>
<span class="shortcut-desc">{{.UI.ShortcutsModal.Sections.ViewControls.ToggleIcons.Description}}</span>
</div>
<div class="shortcut-item">
<div class="shortcut-keys">
<kbd><iconify-icon icon="mdi:keyboard-tab" width="14" height="14"></iconify-icon></kbd> to View
</div>
<span class="shortcut-desc">{{.UI.ShortcutsModal.Sections.ViewControls.ToggleTheme.Description}}</span>
</div>
</div>
</div>
<!-- Navigation -->
<div class="shortcuts-section">
<h3 class="shortcuts-section-title">
<iconify-icon icon="mdi:compass-outline" width="20" height="20"></iconify-icon>
{{.UI.ShortcutsModal.Sections.Navigation.Title}}
</h3>
<div class="shortcuts-list">
<div class="shortcut-item">
<div class="shortcut-keys">
Menu → Expand All
</div>
<span class="shortcut-desc">{{.UI.ShortcutsModal.Sections.Navigation.ExpandAll.Description}}</span>
</div>
<div class="shortcut-item">
<div class="shortcut-keys">
Menu → Collapse All
</div>
<span class="shortcut-desc">{{.UI.ShortcutsModal.Sections.Navigation.CollapseAll.Description}}</span>
</div>
<div class="shortcut-item">
<div class="shortcut-keys">
Click <kbd>↑</kbd> Button
</div>
<span class="shortcut-desc">{{.UI.ShortcutsModal.Sections.Navigation.ScrollToTop.Description}}</span>
</div>
</div>
</div>
<!-- Actions -->
<div class="shortcuts-section">
<h3 class="shortcuts-section-title">
<iconify-icon icon="mdi:lightning-bolt" width="20" height="20"></iconify-icon>
{{.UI.ShortcutsModal.Sections.Actions.Title}}
</h3>
<div class="shortcuts-list">
<div class="shortcut-item shortcut-highlight">
<div class="shortcut-keys">
<kbd><iconify-icon icon="mdi:apple-keyboard-command" width="14" height="14"></iconify-icon></kbd> / <kbd><iconify-icon icon="mdi:apple-keyboard-control" width="14" height="14"></iconify-icon></kbd> <kbd>K</kbd>
</div>
<span class="shortcut-desc">{{.UI.ShortcutsModal.Sections.Actions.CmdK.Description}}</span>
</div>
<div class="shortcut-item">
<div class="shortcut-keys">
<kbd><iconify-icon icon="mdi:apple-keyboard-control" width="14" height="14"></iconify-icon></kbd> / <kbd><iconify-icon icon="mdi:apple-keyboard-command" width="14" height="14"></iconify-icon></kbd> <kbd>P</kbd>
</div>
<span class="shortcut-desc">{{.UI.ShortcutsModal.Sections.Actions.Print.Description}}</span>
</div>
<div class="shortcut-item">
<div class="shortcut-keys">
<kbd><iconify-icon icon="mdi:keyboard-esc" width="14" height="14"></iconify-icon></kbd>
</div>
<span class="shortcut-desc">{{.UI.ShortcutsModal.Sections.Actions.CloseModal.Description}}</span>
</div>
<div class="shortcut-item">
<div class="shortcut-keys">
<kbd>?</kbd>
</div>
<span class="shortcut-desc">{{.UI.ShortcutsModal.Sections.Actions.ShowHelp.Description}}</span>
</div>
</div>
</div>
<!-- Browser Defaults -->
<div class="shortcuts-section">
<h3 class="shortcuts-section-title">
<iconify-icon icon="mdi:web" width="20" height="20"></iconify-icon>
{{.UI.ShortcutsModal.Sections.Browser.Title}}
</h3>
<div class="shortcuts-list">
<div class="shortcut-item">
<div class="shortcut-keys">
<kbd><iconify-icon icon="mdi:keyboard-tab" width="14" height="14"></iconify-icon></kbd>
</div>
<span class="shortcut-desc">{{.UI.ShortcutsModal.Sections.Browser.Tab.Description}}</span>
</div>
<div class="shortcut-item">
<div class="shortcut-keys">
<kbd><iconify-icon icon="mdi:keyboard-return" width="14" height="14"></iconify-icon></kbd> / <kbd><iconify-icon icon="mdi:keyboard-space" width="14" height="14"></iconify-icon></kbd>
</div>
<span class="shortcut-desc">{{.UI.ShortcutsModal.Sections.Browser.Enter.Description}}</span>
</div>
</div>
</div>
</div>
</div>
</dialog>
{{end}}
Reference in New Issue View Git Blame Copy Permalink