studio-variable/geoproject-app
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions
No description
17 commits 1 branch 0 tags 7.5 MiB
Find a file
isUnknown 07e5764ccd feat: implement page numbers, running titles, and smooth iframe transitions 
Add functional page number and running title toggles with proper positioning
for left/right pages. Implement smooth crossfade transitions between iframe
reloads to eliminate visual flicker during PagedJS rendering.

Page Numbers & Running Titles:
- Page numbers toggle: adds counter(page) to @bottom-left (left pages) or
  @bottom-right (right pages)
- Running title toggle: adds string(title) from h2 chapter titles
- Combined positioning: both elements appear side-by-side in same margin box
  - Left pages: "1 Chapter Title" in @bottom-left
  - Right pages: "Chapter Title 2" in @bottom-right
- Automatic CSS rule management: adds/removes @page:left, @page:right, and
  string-set rules based on checkbox state
- Bidirectional sync: checkboxes reflect existing CSS state on load

Smooth Iframe Transitions:
- Dual iframe system: two iframes alternate as visible/hidden
- Crossfade technique: hidden iframe loads new content while visible remains
  displayed, then smooth 300ms opacity transition
- Scroll preservation: saves scroll percentage from visible iframe, restores
  to hidden iframe after PagedJS render
- Collision prevention: isTransitioning flag prevents overlapping renders
- Active frame tracking: computed property ensures ElementPopup always
  references the visible iframe

Technical details:
- Uses srcdoc to inject HTML with dynamic CSS
- Z-index and opacity manipulation for layering
- CSS transitions (opacity 0.3s ease-in-out)
- Automatic frame swapping after transition completes

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
2025-12-04 15:27:23 +01:00
.vscode init with kirby, vue and pagedjs interactive 2025-11-24 14:01:48 +01:00
public feat: integrate Coloris color picker for background field 2025-12-04 15:03:29 +01:00
src feat: implement page numbers, running titles, and smooth iframe transitions 2025-12-04 15:27:23 +01:00
.gitignore init with kirby, vue and pagedjs interactive 2025-11-24 14:01:48 +01:00
claude.md init with kirby, vue and pagedjs interactive 2025-11-24 14:01:48 +01:00
index.html init with kirby, vue and pagedjs interactive 2025-11-24 14:01:48 +01:00
package-lock.json feat: integrate Coloris color picker for background field 2025-12-04 15:03:29 +01:00
package.json feat: integrate Coloris color picker for background field 2025-12-04 15:03:29 +01:00
README.md init with kirby, vue and pagedjs interactive 2025-11-24 14:01:48 +01:00
vite.config.js init with kirby, vue and pagedjs interactive 2025-11-24 14:01:48 +01:00

README.md

Vue 3 + Vite

This template should help get you started developing with Vue 3 in Vite. The template uses Vue 3 <script setup> SFCs, check out the script setup docs to learn more.

Learn more about IDE Support for Vue in the Vue Docs Scaling up Guide.