Add lightbox

CHANGELOG.md

@@ -30,6 +30,7 @@
 - Remove some rounded and shadow utilities
 - Add btn--rounded
 - Rename layout utilities
+- Add lightbox component
 
 ## [0.0.35] - 2024-09-10
 - New gap utilities values.

README.md

@@ -19,7 +19,7 @@ bin/rails generate css_zero:install
 Add only the components you need. (Optional)
 
 ```
-bin/rails generate css_zero:add accordion alert avatar badge breadcrumb button card carousel collapsible dialog flash fullscreen hotkey input input_concerns layouts pagination progress prose sheet skeleton switch table tabs upload_preview toggle web_share
+bin/rails generate css_zero:add accordion alert avatar badge breadcrumb button card carousel collapsible dialog flash fullscreen hotkey input input_concerns layouts lightbox pagination progress prose sheet skeleton switch table tabs upload_preview toggle web_share
 ```
 
 ### Requirements

lib/generators/css_zero/add/USAGE

@@ -2,7 +2,7 @@ Description:
     This will add components into your project.
 
 Components:
-  accordion alert avatar badge breadcrumb button card carousel collapsible dialog flash fullscreen hotkey input input_concerns layouts pagination progress prose sheet skeleton switch table tabs upload_preview toggle web_share
+  accordion alert avatar badge breadcrumb button card carousel collapsible dialog flash fullscreen hotkey input input_concerns layouts lightbox pagination progress prose sheet skeleton switch table tabs upload_preview toggle web_share
 
 Example:
     bin/rails generate css_zero:add [components...]

lib/generators/css_zero/add/resources.yml

@@ -50,6 +50,12 @@ input_concerns:
 layouts:
   - app/assets/stylesheets/layouts.css
   - app/assets/images/menu.svg
+lightbox:
+  - app/assets/stylesheets/lightbox.css
+  - app/javascript/controllers/lightbox_controller.js
+  - app/assets/images/download.svg
+  - app/assets/images/share.svg
+  - app/assets/images/x.svg
 pagination:
   - app/assets/images/chevron-right.svg
   - app/assets/images/chevron-left.svg

lib/generators/css_zero/add/templates/app/assets/stylesheets/lightbox.css

@@ -0,0 +1,41 @@
+:root {
+  --lightbox-padding: var(--size-4);
+}
+
+.lightbox {
+  background-color: rgba(0, 0, 0, .8);
+  block-size: 100dvh;
+  max-block-size: unset;
+  inline-size: 100dvw;
+  max-inline-size: unset;
+  padding: var(--lightbox-padding);
+
+  &[open] {
+    display: grid;
+    place-items: center;
+  }
+}
+
+.lightbox__close {
+  align-self: start;
+  grid-area: 1/1;
+  justify-self: end;
+}
+
+.lightbox__download {
+  align-self: end;
+  grid-area: 1/1;
+  justify-self: end;
+}
+
+.lightbox__share {
+  align-self: start;
+  grid-area: 1/1;
+  justify-self: start;
+}
+
+.lightbox__image {
+  grid-area: 1/1;
+  max-inline-size: calc(100dvw - (var(--lightbox-padding) * 2));
+  max-block-size:  calc(100dvh - (var(--lightbox-padding) * 2));
+}

lib/generators/css_zero/add/templates/app/javascript/controllers/lightbox_controller.js

@@ -0,0 +1,26 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = [ "dialog", "zoomedImage", "download", "share" ]
+
+  show(event) {
+    this.dialogTarget.showModal()
+    this.#set(event.target.parentNode)
+  }
+
+  close() {
+    this.dialogTarget.close()
+  }
+
+  reset() {
+    this.zoomedImageTarget.src = ""
+    this.downloadTarget.href = ""
+    this.shareTarget.dataset.webShareFileValue = "";
+  }
+
+  #set(target) {
+    this.zoomedImageTarget.src = target.href
+    this.downloadTarget.href = target.dataset.lightboxUrlValue;
+    this.shareTarget.dataset.webShareFileValue = target.dataset.lightboxUrlValue;
+  }
+}