diff --git a/copyparty/web/baguettebox.js b/copyparty/web/baguettebox.js index 39a9c8d1..cc5b2674 100644 --- a/copyparty/web/baguettebox.js +++ b/copyparty/web/baguettebox.js @@ -17,8 +17,10 @@ window.baguetteBox = (function () { titleTag: false, async: false, preload: 2, + refocus: true, afterShow: null, afterHide: null, + duringHide: null, onChange: null, }, overlay, slider, btnPrev, btnNext, btnHelp, btnAnim, btnRotL, btnRotR, btnSel, btnFull, btnVmode, btnClose, @@ -144,7 +146,7 @@ window.baguetteBox = (function () { selectorData.galleries.push(gallery); }); - return selectorData.galleries; + return [selectorData.galleries, options]; } function clearCachedData() { @@ -593,6 +595,9 @@ window.baguetteBox = (function () { if (overlay.style.display === 'none') return; + if (options.duringHide) + options.duringHide(); + sethash(''); unbindEvents(); try { @@ -613,7 +618,7 @@ window.baguetteBox = (function () { if (options.afterHide) options.afterHide(); - documentLastFocus && documentLastFocus.focus(); + options.refocus && documentLastFocus && documentLastFocus.focus(); isOverlayVisible = false; unvid(); unfig(); diff --git a/copyparty/web/browser.css b/copyparty/web/browser.css index 737e0a0f..8f35960c 100644 --- a/copyparty/web/browser.css +++ b/copyparty/web/browser.css @@ -1247,6 +1247,13 @@ html.y #widget.open { 0% {opacity:0} 100% {opacity:1} } +#ggrid>a.glow { + animation: gexit .6s ease-out; +} +@keyframes gexit { + 0% {box-shadow: 0 0 0 2em var(--a)} + 100% {box-shadow: 0 0 0em 0em var(--a)} +} #wzip a { font-size: .4em; margin: -.3em .1em; diff --git a/copyparty/web/browser.js b/copyparty/web/browser.js index 7d71d34a..0a8f4a78 100644 --- a/copyparty/web/browser.js +++ b/copyparty/web/browser.js @@ -194,6 +194,7 @@ var Ls = { "ct_thumb": "in grid-view, toggle icons or thumbnails$NHotkey: T", "ct_csel": "use CTRL and SHIFT for file selection in grid-view", + "ct_ihop": "when the image viewer is closed, scroll down to the last viewed file", "ct_dots": "show hidden files (if server permits)", "ct_dir1st": "sort folders before files", "ct_readme": "show README.md in folder listings", @@ -690,6 +691,7 @@ var Ls = { "ct_thumb": "vis miniatyrbilder istedenfor ikoner$NSnarvei: T", "ct_csel": "bruk tastene CTRL og SHIFT for markering av filer i ikonvisning", + "ct_ihop": "bla ned til sist viste bilde når bildeviseren lukkes", "ct_dots": "vis skjulte filer (gitt at serveren tillater det)", "ct_dir1st": "sorter slik at mapper kommer foran filer", "ct_readme": "vis README.md nedenfor filene", @@ -1185,6 +1187,7 @@ ebi('op_cfg').innerHTML = ( ' 田 the grid\n' + ' 🖼️ thumbs\n' + ' sel\n' + + ' g⮯\n' + ' dotfiles\n' + ' 📁 first\n' + ' 📜 readme\n' + @@ -4875,7 +4878,11 @@ var thegrid = (function () { if (r.bbox) baguetteBox.destroy(); - r.bbox = baguetteBox.run(isrc, { + var br = baguetteBox.run(isrc, { + duringHide: r.onhide, + afterShow: function () { + r.bbox_opts.refocus = true; + }, captions: function (g) { var idx = -1, h = '' + g; @@ -4891,7 +4898,44 @@ var thegrid = (function () { onChange: function (i) { sethash('g' + r.bbox[i].imageElement.getAttribute('ref')); } - })[0]; + }); + r.bbox = br[0][0]; + r.bbox_opts = br[1]; + }; + + r.onhide = function () { + if (!thegrid.ihop) + return; + + try { + var el = QS('#ggrid a[ref="' + location.hash.slice(2) + '"]'), + f = function () { + try { + el.focus(); + } + catch (ex) { } + }; + + f(); + setTimeout(f, 10); + setTimeout(f, 100); + setTimeout(f, 200); + // thx fullscreen api + + if (ANIM) { + clmod(el, 'glow', 1); + setTimeout(function () { + try { + clmod(el, 'glow'); + } + catch (ex) { } + }, 600); + } + r.bbox_opts.refocus = false; + } + catch (ex) { + console.log('ihop:', ex); + } }; r.set_crop = function (en) { @@ -4915,6 +4959,7 @@ var thegrid = (function () { }; bcfg_bind(r, 'thumbs', 'thumbs', true, r.setdirty); + bcfg_bind(r, 'ihop', 'ihop', true); bcfg_bind(r, 'crop', 'gridcrop', !dcrop.endsWith('n'), r.set_crop); bcfg_bind(r, 'x3', 'grid3x', dth3x.endsWith('y'), r.set_x3); bcfg_bind(r, 'sel', 'gridsel', false, r.loadsel);