coveragebook_components 0.7.4 → 0.7.5

data/app/components/coco/base/modal/modal.js

@@ -4,9 +4,11 @@ export default CocoComponent("modal", () => {
   return {
     open: false,
     frame: null,
+    modal: null,
     options: ["dismissable", "closeOnSubmit"],
 
     init() {
+      this.modal = this;
       this.onFrameSubmitEnd = this.onFrameSubmitEnd.bind(this);
 
       this.frame = this.$el.closest("turbo-frame");
@@ -17,24 +19,34 @@ export default CocoComponent("modal", () => {
 
     show() {
       this.open = true;
+      setTimeout(() => {
+        this.$dispatch("modal:shown");
+      }, 400);
     },
 
     hide() {
       this.open = false;
-      setTimeout(() => this.clearFrame(), 100);
+      setTimeout(() => {
+        this.clearFrame();
+        this.$dispatch("modal:hidden");
+      }, 200);
     },
 
     dismiss(event) {
       if (this.$options.dismissable) this.hide();
     },
 
+    scrollTo(pos) {
+      this.$root.scrollTop = pos + this.contentOffsetTop;
+    },
+
     clearFrame() {
       this.frame.removeAttribute("src");
       this.frame.removeAttribute("complete");
       this.frame.innerHTML = "";
     },
 
-    onFrameSubmitEnd() {
+    onFrameSubmitEnd(event) {
       if (this.$options.closeOnSubmit && event.detail.success) {
         this.hide();
       }
@@ -44,11 +56,38 @@ export default CocoComponent("modal", () => {
       this.frame.removeEventListener("turbo:submit-end", this.onFrameSubmitEnd);
     },
 
+    get contentOffsetTop() {
+      return parseInt(
+        window.getComputedStyle(this.$refs.container).paddingTop,
+        10
+      );
+    },
+
     root: {
       "x-options": "options",
       "x-show": "open",
       "@keydown.escape.document": "dismiss",
       "@modal:hide.document": "hide",
     },
+
+    overlay: {
+      "x-show": "open",
+      "x-transition:enter": "overlay-enter",
+      "x-transition:enter-start": "overlay-enter-start",
+      "x-transition:enter-end": "overlay-enter-end",
+      "x-transition:leave": "overlay-leave",
+      "x-transition:leave-start": "overlay-leave-start",
+      "x-transition:leave-end": "overlay-leave-end",
+    },
+
+    container: {
+      "x-show": "open",
+      "x-transition:enter": "container-enter",
+      "x-transition:enter-start": "container-enter-start",
+      "x-transition:enter-end": "container-enter-end",
+      "x-transition:leave": "container-leave",
+      "x-transition:leave-start": "container-leave-start",
+      "x-transition:leave-end": "container-leave-end",
+    },
   };
 });

data/app/components/coco/base/modal/modal.rb

@@ -8,14 +8,20 @@ module Coco
 
     renders_one :title
 
-    renders_one :dialog, ->(**kwargs, &block) do
-      @dialog_content = capture { block.call }
-      Coco::ModalDialog.new(dismissable: get_option_value(:dismissable), **kwargs)
-    end
+    renders_one :container, types: {
+      dialog: ->(**kwargs, &block) do
+        @container_content = block
+        Coco::ModalDialog.new(dismissable: get_option_value(:dismissable), **kwargs)
+      end,
+
+      lightbox: ->(**kwargs, &block) do
+        Coco::ModalLightbox.new(dismissable: get_option_value(:dismissable), **kwargs)
+      end
+    }
 
     before_render do
-      if dialog? && title?
-        dialog.with_title { title.to_s }
+      if container? && title? && container.respond_to?(:with_title)
+        container.with_title { title.to_s }
       end
     end
 
@@ -36,11 +42,11 @@ module Coco
     end
 
     def modal_content
-      dialog? ? dialog : content
+      container? ? container : content
     end
 
     def content
-      @dialog_content || super
+      @container_content || super
     end
 
     def render_flash_messages

data/app/components/coco/base/modal_dialog/modal_dialog.css

@@ -4,7 +4,7 @@
     @apply max-w-2xl; /* temp until sizes added */
 
     .modal-dialog-header {
-      @apply relative flex items-center justify-center;
+      @apply relative flex items-center;
       @apply px-4 sm:px-8 h-14 sm:h-16 border-b border-gray-300 rounded-t-xl bg-white;
     }
 

data/app/components/coco/base/modal_dialog/modal_dialog.js

@@ -14,7 +14,7 @@ export default CocoComponent("modalDialog", () => {
     },
 
     close() {
-      this.$dispatch("modal:hide");
+      this.modal.hide();
     },
 
     onFrameLoad() {

data/app/components/coco/base/modal_lightbox/modal_lightbox.css

@@ -0,0 +1,35 @@
+@layer components {
+  [data-coco][data-component="modal-lightbox"] {
+    @apply relative;
+    width: fit-content;
+
+    .modal-lightbox-close {
+      @apply flex-none p-2 absolute -right-1.5 -top-1.5 sm:-right-4 sm:-top-4 rounded-full transition-all z-20;
+      @apply bg-background-dark-1 text-content-light-1;
+      @apply focus:ring-0 focus:outline-none text-content-light-1 shadow-md;
+    }
+
+    .modal-lightbox-content {
+      @apply rounded-xl overflow-hidden min-w-[100px] min-h-[100px] relative;
+      width: fit-content;
+    }
+
+    .modal-lightbox-loader {
+      @apply flex items-center justify-center absolute inset-0 opacity-70 bg-black/60 text-white;
+    }
+
+    .modal-lightbox-media {
+      @apply relative z-10;
+
+      img {
+        width: 100%;
+      }
+    }
+
+    &.loaded {
+      .modal-lightbox-content {
+        @apply shadow-2xl;
+      }
+    }
+  }
+}

data/app/components/coco/base/modal_lightbox/modal_lightbox.html.erb

@@ -0,0 +1,13 @@
+<%= render component_tag(x: {data: x_data("modalLightbox"), bind: "root"}) do %>
+  <button type="button" class="modal-lightbox-close" data-role="close" @click="close" x-show="loaded">
+    <%= coco_icon(:x, size: :md) %>
+  </button>
+  <div class="modal-lightbox-content" @click.outside="close">
+    <div class="modal-lightbox-loader" x-show="!loaded">
+      <%= coco_icon(:loader_2, spin: true) %>
+    </div>
+    <div class="modal-lightbox-media" x-ref="media" x-show="loaded">
+      <%= image %>
+    </div>
+  </div>
+<% end %>

data/app/components/coco/base/modal_lightbox/modal_lightbox.js

@@ -0,0 +1,35 @@
+import { CocoComponent } from "@js/coco";
+
+export default CocoComponent("modalLightbox", () => {
+  return {
+    loaded: false,
+
+    init() {
+      if (this.img.complete && this.img.naturalHeight !== 0) {
+        this.imageLoaded();
+      }
+    },
+
+    close() {
+      this.modal.hide();
+    },
+
+    imageLoaded() {
+      this.loaded = true;
+      this.$nextTick(() => {
+        const scrollTop = parseInt(this.img.dataset.scrollTop, 10);
+        if (!isNaN(scrollTop) && scrollTop !== 0) {
+          this.modal.scrollTo(scrollTop);
+        }
+      });
+    },
+
+    get img() {
+      return this.$refs.media.querySelector("img");
+    },
+
+    root: {
+      ":class": "{loaded}",
+    },
+  };
+});

data/app/components/coco/base/modal_lightbox/modal_lightbox.rb

@@ -0,0 +1,19 @@
+module Coco
+  class ModalLightbox < Coco::Component
+    include Concerns::AcceptsOptions
+
+    renders_one :image, ->(scroll_top: 0, **kwargs) do
+      coco_image(
+        x: {"on:load": "imageLoaded"},
+        data: {scroll_top: scroll_top.to_i, role: "image"},
+        **kwargs
+      )
+    end
+
+    before_render do
+      unless image?
+        raise ArgumentError, "An image is required for the lightbox"
+      end
+    end
+  end
+end

data/app/helpers/coco/base_helper.rb

@@ -35,7 +35,13 @@ module Coco
 
     def coco_modal_dialog(name = "default", **, &block)
       render(Coco::Modal.new(name: name, **)) do |modal|
-        modal.with_dialog(&block)
+        modal.with_container_dialog(&block)
+      end
+    end
+
+    def coco_modal_lightbox(name = "default", scroll_top: nil, **, &block)
+      render(Coco::Modal.new(name: name, scroll_top: scroll_top, **)) do |modal|
+        modal.with_container_lightbox(&block)
       end
     end
 

data/lib/coco.rb

@@ -1,3 +1,3 @@
 module Coco
-  VERSION = "0.7.4"
+  VERSION = "0.7.5"
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: coveragebook_components
 version: !ruby/object:Gem::Version
-  version: 0.7.4
+  version: 0.7.5
 platform: ruby
 authors:
 - Mark Perkins
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2023-10-05 00:00:00.000000000 Z
+date: 2023-10-10 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rails
@@ -1500,6 +1500,10 @@ files:
 - app/components/coco/base/modal_dialog/modal_dialog.html.erb
 - app/components/coco/base/modal_dialog/modal_dialog.js
 - app/components/coco/base/modal_dialog/modal_dialog.rb
+- app/components/coco/base/modal_lightbox/modal_lightbox.css
+- app/components/coco/base/modal_lightbox/modal_lightbox.html.erb
+- app/components/coco/base/modal_lightbox/modal_lightbox.js
+- app/components/coco/base/modal_lightbox/modal_lightbox.rb
 - app/components/coco/base/placeholder/placeholder.css
 - app/components/coco/base/placeholder/placeholder.html.erb
 - app/components/coco/base/placeholder/placeholder.rb