diff options
| author | Ken D'Ambrosio <ken@jots.org> | 2026-05-10 14:38:04 +0000 |
|---|---|---|
| committer | Ken D'Ambrosio <ken@jots.org> | 2026-05-10 14:38:04 +0000 |
| commit | a7c16b99a4284826ac5ac0ace4ee0f760a548ff4 (patch) | |
| tree | c8cb3679de1a88d3d8a54f787462aae944c91114 /views | |
| parent | fa36e54d878a3274f7728eb0b84c351b33f3c6ed (diff) | |
Add slideshow: root-level, shuffle, fullscreen, click-to-album
- Root slideshow: all_media_entries walks the full media tree so
/slideshow/ shows every photo across all albums; Slideshow button
always appears on the root album page
- Shuffle and Full screen checkboxes sit next to the Slideshow button
on the album page; options pass as ?shuffle=1&fullscreen=1 URL params
- Fullscreen uses a tap-to-activate overlay (browsers block auto-entry
on page load); webkit-prefixed for Safari; ⛶ button and F key for
mid-session toggle
- Fullscreen mode hides controls, counter, caption bar, and site header
- Exiting fullscreen auto-pauses so the current photo stays visible
- Click/tap anywhere in the stage navigates to the photo's album
lightbox; reads the live src attribute instead of ssIdx to avoid a
race where ssIdx advances during the cross-fade while the old photo
is still on screen
- layout.erb excluded from slideshow (layout: false) so the site header
never appears there
- CSS cache-busted with ?v=2
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Diffstat (limited to 'views')
| -rw-r--r-- | views/album.erb | 8 | ||||
| -rw-r--r-- | views/layout.erb | 2 | ||||
| -rw-r--r-- | views/slideshow.erb | 14 |
3 files changed, 12 insertions, 12 deletions
diff --git a/views/album.erb b/views/album.erb index 961b26a..c99ec3c 100644 --- a/views/album.erb +++ b/views/album.erb @@ -11,8 +11,10 @@ <h1><%= @title %></h1> <% if @desc %><p class="album-desc"><%= @desc %></p><% end %> <div class="album-actions"> - <% if @entries.any? { |e| %i[image video].include?(e[:type]) } %> - <a href="/slideshow/<%= @rel %>" class="btn">Slideshow</a> + <% if @rel.empty? ? @albums.any? : @entries.any? { |e| %i[image video].include?(e[:type]) } %> + <a href="/slideshow/<%= @rel %>" id="ss-launch" data-base="/slideshow/<%= @rel %>" class="btn">Slideshow</a> + <label class="ss-opt-label"><input type="checkbox" id="ss-opt-shuffle"> Shuffle</label> + <label class="ss-opt-label"><input type="checkbox" id="ss-opt-fullscreen"> Full screen</label> <% end %> </div> </div> @@ -103,4 +105,4 @@ const ENTRIES = <%= @entries.map { |e| e.merge(src: "/media/#{file_rel}") }.to_json %>; </script> -<script src="/js/album.js?v=2"></script> +<script src="/js/album.js?v=3"></script> diff --git a/views/layout.erb b/views/layout.erb index 3e798c4..1683bd0 100644 --- a/views/layout.erb +++ b/views/layout.erb @@ -4,7 +4,7 @@ <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title><%= @title %> — Albumen</title> - <link rel="stylesheet" href="/css/style.css"> + <link rel="stylesheet" href="/css/style.css?v=2"> </head> <body> <header class="site-header"> diff --git a/views/slideshow.erb b/views/slideshow.erb index 847da65..dfdf523 100644 --- a/views/slideshow.erb +++ b/views/slideshow.erb @@ -4,7 +4,7 @@ <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title><%= @title %> — Slideshow</title> - <link rel="stylesheet" href="/css/style.css"> + <link rel="stylesheet" href="/css/style.css?v=2"> </head> <body class="slideshow-page"> <div id="slideshow"> @@ -18,9 +18,10 @@ </div> <div id="ss-controls"> <a href="/browse/<%= @rel %>" class="btn btn-sm">← Album</a> - <button onclick="ssPrev()" class="btn btn-sm">‹ Prev</button> + <button onclick="ssPrev()" class="btn btn-sm">‹ Prev</button> <button onclick="ssToggle()" id="ss-play-btn" class="btn btn-sm">⏸ Pause</button> - <button onclick="ssNext()" class="btn btn-sm">Next ›</button> + <button onclick="ssNext()" class="btn btn-sm">Next ›</button> + <button onclick="ssFsToggle()" class="btn btn-sm" title="Toggle full screen (F)">⛶</button> <label class="ss-interval-label"> Interval <input type="number" id="ss-interval" value="4" min="1" max="60" step="1"> s @@ -30,12 +31,9 @@ </div> <script> - const SS_ENTRIES = <%= @entries.map { |e| - file_rel = @rel.empty? ? e[:name] : "#{@rel}/#{e[:name]}" - e.merge(src: "/media/#{file_rel}") - }.to_json %>; + const SS_ENTRIES = <%= @entries.map { |e| e.merge(src: "/media/#{e[:file_rel]}") }.to_json %>; const SS_REL = <%= @rel.to_json %>; </script> - <script src="/js/slideshow.js"></script> + <script src="/js/slideshow.js?v=2"></script> </body> </html> |