Lightbox fallback without :target

4 files changed, 60 insertions, 68 deletions

diff --git a/src/objects/_lightbox.scss b/src/objects/_lightbox.scss
index 02714d7..5562696 100644
--- a/src/objects/_lightbox.scss
+++ b/src/objects/_lightbox.scss
@@ -12,17 +12,8 @@
     @include materialize-at-root(meta.module-variables('vars'));
 
     @include bem.object('lightbox') {
-        box-sizing:            border-box;
-        display:               grid;
-        flex:                  1 1 auto;
-        grid-template-areas:
-            'header     header     header'
-            'prev       content    next'
-            'thumbnails thumbnails thumbnails'
-            'footer     footer     footer';
-        grid-template-rows:    auto minmax(0, 1fr) auto auto;
-        grid-template-columns: auto minmax(0, 1fr) auto;
-        min-block-size:        0;
+        flex:           1 1 auto;
+        min-block-size: 0;
 
         @include bem.elem('header') {
             display:             flex;
@@ -34,56 +25,17 @@
 
         @include bem.elem('img') {
             box-sizing:      border-box;
-            display:         none;
+            display:         block;
             grid-area:       content;
             place-self:      center;
             max-inline-size: 100%;
-            max-block-size:  100%;
+            max-block-size:  80vh;
             padding:         props.get(vars.$pad);
-
-            @include bem.sibling-elem('img') {
-                @include bem.modifier('default') {
-                    display: block;
-
-                    @include bem.next-elem('nav-btn') {
-                        display: block;
-    
-                        @include bem.next-elem('nav-btn') {
-                            display: block;
-                        }
-                    }
-                }
-            }
-
-            @include bem.multi('&:target', 'is' 'visible') {
-                display: block;
-
-                @include bem.next-elem('nav-btn') {
-                    display: block;
-
-                    @include bem.next-elem('nav-btn') {
-                        display: block;
-                    }
-                }
-
-                @include bem.sibling-elem('img') {
-                    @include bem.modifier('default') {
-                        display: none;
-
-                        @include bem.next-elem('nav-btn') {
-                            display: none;
-        
-                            @include bem.next-elem('nav-btn') {
-                                display: none;
-                            }
-                        }
-                    }
-                }
-            }
+            margin-inline:   auto;
         }
 
         @include bem.elem('thumbnails') {
-            display:            flex;
+            display:            none;
             grid-area:          thumbnails;
             gap:                props.get(vars.$thumbnail--spacing);
             padding:            props.get(vars.$pad);
@@ -91,14 +43,6 @@
             overflow:           auto;
         }
 
-        @include bem.elem('footer') {
-            display:        flex;
-            grid-area:      footer;
-            align-items:    flex-start;
-            padding-block:  0 props.get(vars.$pad);
-            padding-inline: props.get(vars.$pad);
-        }
-
         @include bem.elem('thumbnail') {
             position:       relative;
             flex:           0 0 auto;
@@ -163,6 +107,7 @@
         }
 
         @include bem.elem('close-btn') {
+            display:            none;
             flex:               0 0 auto;
             margin-block-start: calc(-.5 * props.get(vars.$pad));
             margin-inline:      auto calc(-.5 * props.get(vars.$pad));
@@ -205,6 +150,38 @@
             }
         }
 
+        @include bem.modifier('interactive') {
+            display:               grid;
+            grid-template-areas:
+                'header     header     header'
+                'prev       content    next'
+                'thumbnails thumbnails thumbnails';
+            grid-template-rows:    auto minmax(0, 1fr) auto auto;
+            grid-template-columns: auto minmax(0, 1fr) auto;
+
+            @include bem.elem('img') {
+                display:        none;
+                max-block-size: 100%;
+                margin-inline:  0;
+
+                @include bem.multi('&:target', 'is' 'visible') {
+                    display: block;
+                }
+            }
+
+            @include bem.elem('thumbnails') {
+                display: flex;
+            }
+
+            @include bem.elem('close-btn') {
+                display: block;
+            }
+
+            @include bem.elem('nav-btn') {
+                display: block;
+            }
+        }
+
         @each $theme in map.keys(props.get(vars.$static-themes)) {
             @include bem.modifier(string.slice($theme, 3)) {
                 color: props.get(vars.$static-themes, $theme, --text);
diff --git a/tpl/objects/backdrop.pug b/tpl/objects/backdrop.pug
index 227700c..f577961 100644
--- a/tpl/objects/backdrop.pug
+++ b/tpl/objects/backdrop.pug
@@ -8,7 +8,10 @@ mixin backdrop
             classes[attributes.class] = true;
         }
 
-        let styles = { width: '100%', 'min-height': '5em', 'max-height': '40em' }
+        let styles = { width: '100%', 'min-height': '5em' }
+        if (attributes.maxHeight) {
+            styles['max-height'] = '40em';
+        }
         if (attributes.pad) {
             styles['padding'] = '2em';
         }
diff --git a/tpl/objects/lightbox.pug b/tpl/objects/lightbox.pug
index 02a3200..85c468f 100644
--- a/tpl/objects/lightbox.pug
+++ b/tpl/objects/lightbox.pug
@@ -4,6 +4,7 @@ mixin lightbox(images)
     -
         let classes = {
             'o-lightbox': true,
+            'o-lightbox--interactive': attributes.interactive,
         }
         let linksClasses = {
             's-links': true,
@@ -19,15 +20,14 @@ mixin lightbox(images)
             div(class=linksClasses)
                 block
             +action-button(theme=attributes.theme pill=true quiet=true icon='x' class='o-lightbox__close-btn')
+
         each img, i in images
-            img.o-lightbox__img(src=images[i] id='image-' + i)
-            +action-button(theme=attributes.theme pill=true quiet=true icon='chevron-left' class='o-lightbox__nav-btn o-lightbox__nav-btn--prev')
-            +action-button(theme=attributes.theme pill=true quiet=true icon='chevron-right' class='o-lightbox__nav-btn o-lightbox__nav-btn--next')
+            img(src=images[i] id=('image-' + i) class=`o-lightbox__img ${attributes.interactive && !i ? 'is-visible' : ''}`)
 
-        img.o-lightbox__img.o-lightbox__img--default(src=images[0])
         if images.length > 1
             +action-button(theme=attributes.theme pill=true quiet=true icon='chevron-left' class='o-lightbox__nav-btn o-lightbox__nav-btn--prev')
             +action-button(theme=attributes.theme pill=true quiet=true icon='chevron-right' class='o-lightbox__nav-btn o-lightbox__nav-btn--next')
+
         .o-lightbox__thumbnails
             each img, i in images
                 - classes = i === 0 ? 'is-selected' : ''
diff --git a/tpl/views/lightbox.pug b/tpl/views/lightbox.pug
index 4eb234a..7e366c0 100644
--- a/tpl/views/lightbox.pug
+++ b/tpl/views/lightbox.pug
@@ -1,5 +1,5 @@
 mixin view-lightbox 
-    +view('lightbox', 'Lightbox')
+    +view('lightbox', 'Lightbox')(wide=true)
         .c-box
             +lightbox(['avatar.png', 'ava_feralbot.png', 'volpeon_spooky.png'])
                 = "Let's try multiple links! "
@@ -37,3 +37,15 @@ mixin view-lightbox
                     = ' '
                     a(href="https://mk.vulpes.one/files/081e0684-08dc-4a42-b810-b0ac63ec7d06")
                         = "https://mk.vulpes.one/files/081e0684-08dc-4a42-b810-b0ac63ec7d06"
+
+        +backdrop(maxHeight=true)
+            +lightbox(['avatar.png', 'ava_feralbot.png', 'volpeon_spooky.png'])(theme='static-white' interactive=true)
+                = "Let's try multiple links! "
+                a(href="https://mk.vulpes.one/files/3023f361-124a-4c80-bb69-9535e47c2925")
+                    = "https://mk.vulpes.one/files/3023f361-124a-4c80-bb69-9535e47c2925"
+                = ' '
+                a(href="https://mk.vulpes.one/files/741dcfd3-6a26-48ae-8985-d0c3ccca016c")
+                    = "https://mk.vulpes.one/files/741dcfd3-6a26-48ae-8985-d0c3ccca016c"
+                = ' '
+                a(href="https://mk.vulpes.one/files/081e0684-08dc-4a42-b810-b0ac63ec7d06")
+                    = "https://mk.vulpes.one/files/081e0684-08dc-4a42-b810-b0ac63ec7d06"