maquina 0.2.1 → 0.2.2

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 253e32217b0c2f5e0a8a352ff4ac26a1e0d904184293205135f1d60fd43392d2
-  data.tar.gz: a347016c5e76c08fc3165662b47684ff181667a4bea70c25e340bc71e760b1cc
+  metadata.gz: 040c1d643734bb33ae456b0bd092b87b250d0b4d56f03548d569594f3d6892f3
+  data.tar.gz: a17889606d8033a9e068cd212d5557f7cc77b60fd8f82d7f6f951974a526866f
 SHA512:
-  metadata.gz: 77c5d7eb9e6927194b0ea5635f8a535b898010b755e42e254258e2af675c6c4ba08c70372141056e2fd296008d7a120d938019f5fa55966d3d3314cc61744621
-  data.tar.gz: 1013008ff3b86923b4d055c894d62e01ba23e84c4cad7d029454d1d8f9e80865ac038be1f5693c39a9828cebec1fc57c0a6591d6b16c4c7d134a83d321ef4acd
+  metadata.gz: 4654d0514915f2fe7d7577ad73487a78d5b0036df114c82950a80e8f737a5b9d92bf7b163eeb316c2758428c80e0fe5dc52b13563cfeb9a2666323b62a4c773f
+  data.tar.gz: fe807c89c747bcf9b7fc95b7590edcd331b0ee6eab5e966ebe5576fb48e580bc445552d3e5d0fd4d773cf8b36054e8b2e9c90c0d9a1c29631c96312d0b0a670e

data/Gemfile.lock

@@ -1,7 +1,7 @@
 PATH
   remote: .
   specs:
-    maquina (0.2.1)
+    maquina (0.2.2)
       action_policy (~> 0.6.3)
       bcrypt (~> 3.1.7)
       importmap-rails (~> 1.2.0)

data/app/assets/javascripts/maquina/controllers/backdrop_controller.js

@@ -0,0 +1,10 @@
+import { Controller } from "@hotwired/stimulus"
+import { useTransition } from "stimulus-use";
+
+export default class extends Controller {
+  static targets = ["backdrop"]
+
+  connect() {
+    useTransition(this, { element: this.backdropTarget })
+  }
+}

data/app/assets/javascripts/maquina/controllers/modal_controller.js

@@ -2,38 +2,92 @@ import { Controller } from "@hotwired/stimulus"
 import { useTransition } from "stimulus-use"
 
 export default class extends Controller {
-  static targets = ["content", "container", "frame"]
+  static targets = ["modal", "container", "frame", "form", "submit"]
+  static outlets = ["backdrop"]
 
   connect() {
-    useTransition(this, { element: this.contentTarget })
+    this.timeouts = []
+    this.root = document.querySelector("html")
 
-    this.resultCallback = this.modalResult.bind(this)
-    addEventListener("turbo:submit-end", this.resultCallback)
+    useTransition(this, { element: this.modalTarget })
+
+    if (this.hasFormTarget) addEventListener("turbo:submit-end", this.submitResult.bind(this))
   }
 
   disconnect() {
-    removeEventListener("turbo:submit-end", this.resultCallback)
+    this.timeouts.forEach(t => clearTimeout(t))
+
+    if (this.hasFormTarget) removeEventListener("turbo:submit-end", this.submitResult.bind(this))
   }
 
-  modalResult(event) {
-    if (event.detail.fetchResponse.response.status == 202) {
-      this.toggleModal(event)
+  submitResult(event) {
+    if (this.hasFormTarget) this.submitTarget.removeAttribute("disabled")
+
+    const status = event.detail.fetchResponse.response.status
+    if (status == 201 || status == 202) {
+      this.close(event)
     }
   }
 
-  toggleModal(event) {
+  submit(event) {
     event.preventDefault()
 
-    if (this.hasFrameTarget && this.contentTarget.classList.contains("hidden")) {
-      let url = event.target.getAttribute("href") || this.element.dataset["frameSrc"]
-      this.frameTarget.setAttribute("src", url)
-    } else if (!this.contentTarget.classList.contains("hidden")) {
-      this.frameTarget.setAttribute("src", "")
-      this.frameTarget.innerText = ""
+    if (!this.hasFormTarget) {
+      return
     }
 
-    document.documentElement.classList.toggle("overflow-hidden")
-    this.containerTarget.classList.toggle("hidden")
+    this.submitTarget.setAttribute("disabled", "true")
+    this.formTarget.requestSubmit()
+  }
+
+  open(event) {
+    event.preventDefault()
+
+    this.configureModal(event.target)
+    this.root.classList.toggle("overflow-hidden")
+
+    this.toggleBackdrop()
+    this.toggleTransition()
+  }
+
+  close(event) {
+    event.preventDefault()
+
+    this.timeouts.forEach(t => clearTimeout(t))
+
+    this.root.classList.toggle("overflow-hidden")
     this.toggleTransition()
+    this.toggleBackdrop()
+
+
+    this.timeouts.push(
+      setTimeout(() => this.restoreModal(), 500)
+    )
+  }
+
+  configureModal(target) {
+    if (this.hasSubmitTarget) {
+      const label = target.dataset["submit-label"]
+      this.submitTarget.innerText = label
+    }
+
+    const url = target.getAttribute("href")
+    this.frameTarget.setAttribute("src", url)
+
+    this.containerTarget.classList.toggle("hidden")
+  }
+
+  restoreModal() {
+    this.containerTarget.classList.toggle("hidden")
+
+    if (this.hasSubmitTarget) {
+      this.submitTarget.innerText = ""
+      this.submitTarget.removeAttribute("disabled")
+    }
+    this.frameTarget.setAttribute("src", "")
+  }
+
+  toggleBackdrop() {
+    this.backdropOutlets.forEach(backdrop => backdrop.toggleTransition())
   }
 }

data/app/assets/javascripts/maquina/controllers/modal_open_controller.js

@@ -5,6 +5,6 @@ export default class extends Controller {
 
   open(event) {
     event.preventDefault()
-    this.modalOutlets.forEach(modal => modal.toggleModal(event))
+    this.modalOutlets.forEach(modal => modal.open(event))
   }
 }

data/app/views/maquina/application/form.rb

@@ -30,7 +30,7 @@ module Maquina
 
             div(class: "pt-5") do
               div(class: "flex justify-end") do
-                link_to t("helpers.cancel"), collection_path, class: "button", data: @modal ? {action: "modal#toggleModal"} : {turbo_frame: :_top}
+                link_to t("helpers.cancel"), collection_path, class: "button", data: @modal ? {action: "modal#close"} : {turbo_frame: :_top}
                 form.submit class: "ml-3 button button-accented"
               end
             end

data/app/views/maquina/application/index_modal.rb

@@ -7,11 +7,13 @@ module Maquina
       register_element :turbo_frame
 
       def template
-        div(data_controller: "modal", class: "modal", data_frame_src: "") do
-          div(class: "fixed inset-0 z-30 hidden overflow-y-auto", aria_labelledby: "modal-title", role: "dialog",
+        div(data_controller: "modal", class: "modal", data_modal_backdrop_outlet: ".modal-backdrop") do
+          div(class: "hidden fixed inset-0 z-30 overflow-y-auto", aria_labelledby: "modal-title", role: "dialog",
             aria_modal: "true", data_modal_target: "container") do
             div(class: "flex items-end justify-center min-h-screen px-4 pt-4 pb-20 text-center sm:block sm:p-0") do
-              div(class: "fixed inset-0 transition-opacity",
+              div(class: "hidden fixed inset-0 transition-opacity modal-backdrop",
+                data_controller: "backdrop",
+                data_backdrop_target: "backdrop",
                 data_transition_enter: "ease-out duration-300",
                 data_transition_enter_active: "opacity-0",
                 data_transition_enter_to: "opacity-100",
@@ -22,8 +24,8 @@ module Maquina
                 div(class: "fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity", aria_hidden: "true")
               end
               span(class: "hidden sm:inline-block sm:align-middle sm:h-screen", aria_hidden: "true") { "​" }
-              div(class: "inline-block align-bottom bg-white rounded-lg px-4 pt-5 pb-4 text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full sm:p-6",
-                data_modal_target: "content",
+              div(class: "hidden inline-block align-bottom bg-white rounded-lg px-4 pt-5 pb-4 text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full sm:p-6",
+                data_modal_target: "modal",
                 data_transition_enter: "ease-out duration-300",
                 data_transition_enter_active: "opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95",
                 data_transition_enter_to: "opacity-100 translate-y-0 sm:scale-100",

data/app/views/maquina/sessions/form.rb

@@ -47,8 +47,8 @@ module Maquina
       def field_attributes(field_name, scope = nil)
         scope ||= "sessions"
         {
-          maxlength: t("maxlength.#{scope}.#{field_name}", default: t("maxlength.default")),
-          placeholder: t("placeholder.#{scope}.#{field_name}", default: "")
+          maxlength: t("helpers.maxlength.#{scope}.#{field_name}", default: t("helpers.maxlength.default")),
+          placeholder: t("helpers.placeholder.#{scope}.#{field_name}", default: "")
         }
       end
     end

data/config/locales/forms.en.yml

@@ -3,7 +3,8 @@ en:
     maquina/plan:
       title: Configure a plan for your customers
     maquina/invitation:
-      title: User will receive an invitation to join this application in the provided email.
+      title: Invite user to collaborate
+      description: User will receive an invitation to join this application in the provided email.
 
   form:
     sessions:
@@ -26,18 +27,6 @@ en:
     maquina/invitation:
       email: Enter user's email
 
-  maxlength:
-    default: 30
-
-    maquina/plan:
-      name: 60
-      trial: 3
-      price: 9
-
-    sessions:
-      email: 60
-      password: 60
-
   help:
     maquina/plan:
       name: Descriptive plan name
@@ -56,3 +45,14 @@ en:
       maquina/invitation:
         create: Send invitation
 
+    maxlength:
+      default: 30
+
+      maquina/plan:
+        name: 60
+        trial: 3
+        price: 9
+
+      sessions:
+        email: 60
+        password: 60

data/lib/maquina/version.rb

@@ -1,3 +1,3 @@
 module Maquina
-  VERSION = "0.2.1"
+  VERSION = "0.2.2"
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: maquina
 version: !ruby/object:Gem::Version
-  version: 0.2.1
+  version: 0.2.2
 platform: ruby
 authors:
 - Mario Alberto Chávez
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2023-09-04 00:00:00.000000000 Z
+date: 2023-09-06 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rails
@@ -307,6 +307,7 @@ files:
 - app/assets/javascripts/maquina/application.js
 - app/assets/javascripts/maquina/controllers/alert_controller.js
 - app/assets/javascripts/maquina/controllers/application.js
+- app/assets/javascripts/maquina/controllers/backdrop_controller.js
 - app/assets/javascripts/maquina/controllers/file_controller.js
 - app/assets/javascripts/maquina/controllers/index.js
 - app/assets/javascripts/maquina/controllers/mobile_menu_controller.js