rails_modal_manager 1.0.60 → 1.0.61

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 87d8b1b59e52bb56527c8c36d3d2848e7ee1c89eb215acaa63c94d2155f43f75
-  data.tar.gz: ecd6594800a1efc07f7b206fb02946500dd251c4415c8eb8bfb7a800a2ec2a14
+  metadata.gz: '09dbfd6b3213ab34ae1874fa5e785061ae3e896415949b76fc54d8504df04420'
+  data.tar.gz: f64b4b8b42503cbea4dcdfcf7bf439353456f055863803af2628e39b71859b91
 SHA512:
-  metadata.gz: 7e7917843b1919d861d35f46cbeefcb6bf59d0dcef492d4919ab9488d838f6361fa0ae994c6a8a0711d4601c14b071360ca6d0dea4a27ba7f3d8f82076860607
-  data.tar.gz: b9c82943073405e3875d96a327951ff3bb27aba67160d626f90387dbd88ad59688d254ef2eea6bc933c73e3efdc7d60c8c530a679d658f137e8888a2482f72d5
+  metadata.gz: de7b11bb9f2ea74aa9afb1c61dec4069e544ec98132aefc9e19f513b9baa26d246cb43d4f7de214ee9646eb6e27e81e76c176721bee0a2e0e765d0668980c8fd
+  data.tar.gz: 62a26a444c72824cc5964d14004bdf879505b983bd2016a769d2d53c5998b05107ec17ef4974a28e80f32f29b139024e8338411ce737cb673f8661debe9fa224

data/app/assets/stylesheets/rails_modal_manager.css

@@ -2418,3 +2418,36 @@
     visibility: hidden !important;
   }
 }
+
+
+/* ============================================
+   v1.0.61 — Shell (placeholder) modal
+   openModalShell() 로 띄운 틀과, 틀을 제자리 교체할 때의 «애니메이션 없이 즉시» 표시
+   ============================================ */
+.rmm-modal.rmm-instant,
+.rmm-overlay.rmm-instant {
+  transition: none !important;
+}
+
+.rmm-shell-skeleton {
+  padding: 20px;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.rmm-shell-line {
+  height: 14px;
+  border-radius: 6px;
+  background: linear-gradient(90deg, #eef2f6 25%, #f8fafc 37%, #eef2f6 63%);
+  background-size: 400% 100%;
+  animation: rmm-shell-shimmer 1.4s ease infinite;
+}
+.rmm-shell-line-sm { width: 35%; }
+.rmm-shell-line-md { width: 60%; }
+.rmm-shell-line-lg { width: 90%; }
+
+@keyframes rmm-shell-shimmer {
+  0% { background-position: 100% 50%; }
+  100% { background-position: 0 50%; }
+}

data/app/helpers/rails_modal_manager/modal_helper.rb

@@ -42,6 +42,38 @@ module RailsModalManager
       )
     end
 
+    # Render the shell (placeholder) modal template — v1.0.61+
+    # Render once in the layout. openModalShell() clones it to show a modal frame immediately
+    # while the real modal is fetched; replaceModalShell() swaps it in place (same history entry).
+    # The block is the loading body (skeleton); a built-in skeleton is used when omitted.
+    #
+    # @example In layout
+    #   <%= rmm_modal_shell_template %>
+    #   <%= rmm_modal_shell_template { render "shared/modal_skeleton" } %>
+    #
+    def rmm_modal_shell_template(options = {}, &block)
+      content = block_given? ? capture(&block) : rmm_default_shell_skeleton
+      modal = render(
+        partial: "rails_modal_manager/modal",
+        locals: {
+          title: "__RMM_SHELL_TITLE__",
+          size: "md",
+          draggable: false,
+          resizable: false,
+          minimizable: false,
+          close_on_overlay: true,
+          enable_history_stack: true
+        }.merge(options).merge(modal_id: "__RMM_SHELL__", block_content: content)
+      )
+      content_tag(:template, modal, id: "rmm-modal-shell-template")
+    end
+
+    def rmm_default_shell_skeleton
+      content_tag(:div, class: "rmm-shell-skeleton", "aria-hidden": "true") do
+        safe_join(%w[lg md lg sm md lg].map { |w| content_tag(:div, "", class: "rmm-shell-line rmm-shell-line-#{w}") })
+      end
+    end
+
     # Render the global taskbar component
     # Should be included once in the layout, typically at the end of body
     #

data/app/javascript/rails_modal_manager/controllers/rmm_modal_controller.js

@@ -148,8 +148,17 @@ export default class extends Controller {
       return // Already open
     }
 
+    // v1.0.61+: 자리표시(shell) 모달 인계 — replaceModalShell() 이 data-rmm-adopt-shell 로 지정.
+    // 틀이 이미 차지한 브라우저 history 칸과 포커스 복귀 대상을 넘겨받고, 틀은 애니메이션 없이 걷어낸다.
+    const adoptShellId = this.element.dataset.rmmAdoptShell
+    let shell = null
+    if (adoptShellId) {
+      delete this.element.dataset.rmmAdoptShell
+      shell = this._takeOverShell(adoptShellId, modalId)
+    }
+
     // Save previous focus
-    this.previousFocus = document.activeElement
+    this.previousFocus = shell ? shell.previousFocus : document.activeElement
 
     // Check for saved size (use persistentId or modalId)
     let initialSize = this.sizeValue
@@ -196,8 +205,9 @@ export default class extends Controller {
       historyStackManager.addHisData('modal', modalId, () => this.close('history'))
     }
 
-    // Show modal with animation
-    this.showModal()
+    // Show modal with animation (틀 인계 시에는 제자리 교체 — 열림 애니메이션 없이 즉시)
+    this.showModal({ instant: !!shell })
+    if (shell) shell.remove()
 
     // Add event listeners
     this.addEventListeners()
@@ -372,7 +382,7 @@ export default class extends Controller {
   // Animation
   // ============================================
 
-  showModal() {
+  showModal({ instant = false } = {}) {
     const modal = this.element
     const overlay = this.getOverlay()
 
@@ -382,8 +392,7 @@ export default class extends Controller {
     // Apply depth class for visual hierarchy (parent/child/grandchild)
     this.applyDepthClass()
 
-    // Start animation
-    requestAnimationFrame(() => {
+    const activate = () => {
       modal.classList.add('rmm-active')
       if (overlay) overlay.classList.add('rmm-active')
 
@@ -391,7 +400,54 @@ export default class extends Controller {
       if (this.focusTrapValue) {
         this.setupFocusTrap()
       }
-    })
+    }
+
+    if (instant) {
+      // v1.0.61+: 틀(shell) 교체 — 같은 태스크 안에서 틀 제거와 함께 반영돼 중간 프레임이 그려지지 않는다
+      modal.classList.add('rmm-instant')
+      if (overlay) overlay.classList.add('rmm-instant')
+      activate()
+      requestAnimationFrame(() => requestAnimationFrame(() => {
+        modal.classList.remove('rmm-instant')
+        if (overlay) overlay.classList.remove('rmm-instant')
+      }))
+      return
+    }
+
+    // Start animation
+    requestAnimationFrame(activate)
+  }
+
+  /**
+   * v1.0.61+: 자리표시(shell) 모달의 자리를 넘겨받는다.
+   * - history: 틀이 push 한 칸을 그대로 두고 id·닫기 함수만 이 모달로 이관(replaceHisData)
+   * - store: 틀을 조용히 제거(z-index 는 이 모달이 이어서 받는다)
+   * 틀이 이미 닫혔으면(뒤로가기·ESC 등) null — 호출 측(replaceModalShell)이 먼저 걸러낸다.
+   * @returns {{ previousFocus: Element|null, remove: Function }|null}
+   */
+  _takeOverShell(shellId, modalId) {
+    if (!modalStore.getModalConfig(shellId)) return null
+    const shellEl = document.getElementById(shellId)
+    const shellCtrl = shellEl && this.application.getControllerForElementAndIdentifier(shellEl, 'rmm-modal')
+    const previousFocus = shellCtrl ? shellCtrl.previousFocus : null
+
+    if (this.enableHistoryStackValue) {
+      historyStackManager.replaceHisData('modal', shellId, modalId, () => this.close('history'))
+    } else {
+      // 이 모달은 history 를 쓰지 않는다 — 틀의 칸은 일반 닫기처럼 되돌린다
+      historyStackManager.removeHisData('modal', shellId)
+    }
+    modalStore.unregisterCloseCallback(shellId)
+    modalStore.closeModal(shellId)
+
+    return {
+      previousFocus,
+      remove: () => {
+        const overlayEl = document.getElementById(`${shellId}-overlay`)
+        if (overlayEl) overlayEl.remove()
+        if (shellEl) shellEl.remove()
+      }
+    }
   }
 
   /**

data/app/javascript/rails_modal_manager/history_stack_manager.js

@@ -199,6 +199,33 @@ function silentRemoveHisData(type, id) {
   return true;
 }
 
+/**
+ * Hand an existing history entry over to another target without touching browser history (v1.0.61+).
+ * Used when a placeholder («shell») modal is swapped for the real modal: the pushState made when the
+ * shell opened stays as-is, only the entry's id and close function move to the real modal, so the
+ * back button closes the real modal and no orphan history state is left behind.
+ * @param {string} type - Target type ('modal', ...)
+ * @param {string} oldId - Current owner id
+ * @param {string} newId - New owner id
+ * @param {Function} close - New close function (optional)
+ * @returns {boolean} Whether the entry was found and handed over
+ */
+function replaceHisData(type, oldId, newId, close) {
+  if (typeof window === 'undefined') return false;
+  if (!isEnabledForDevice(type)) return false;
+
+  const hisData = loadHisData();
+  const item = hisData.find((entry) => entry.type === type && entry.id === oldId);
+  if (!item) return false;
+
+  if (item.closeKey) closeFunctions.delete(item.closeKey);
+  item.id = newId;
+  item.closeKey = generateUUID();
+  if (close) closeFunctions.set(item.closeKey, close);
+  saveHisData(hisData);
+  return true;
+}
+
 /**
  * Remove multiple items from history stack at once
  * - Remove all specified items from stack
@@ -392,6 +419,7 @@ const historyStackManager = {
   removeHisData,
   removeMultipleHisData,
   silentRemoveHisData,
+  replaceHisData,
   popHisData,
   moveToTop,
 

data/app/javascript/rails_modal_manager/index.js

@@ -8,7 +8,7 @@
  * @license MIT
  */
 
-export const VERSION = "1.0.34"
+export const VERSION = "1.0.61"
 
 // Import core modules for internal use
 import modalStore, { MODAL_CONSTANTS, SIZE_CONFIG, POSITION_CONFIG, CASCADE_OFFSET, modalSizeStorage, modalUtils } from "rails_modal_manager/modal_store"
@@ -192,6 +192,134 @@ export function closeModal(modalId, source = 'programmatic') {
   }
 }
 
+// ============================================
+// Shell (placeholder) modal — v1.0.61+
+// ============================================
+// 서버 응답을 기다리는 동안 «모달 틀»을 먼저 띄우고, 실제 모달이 오면 그 자리를 제자리 교체한다.
+// 틀 마크업은 레이아웃에 한 번 렌더한 rmm_modal_shell_template(<template>)을 복제한다 — gem 의
+// 모달 파셜 그대로이므로 헤더·오버레이·크기 규칙이 실제 모달과 같다.
+
+const SHELL_TEMPLATE_ID = 'rmm-modal-shell-template'
+const SHELL_ID_TOKEN = '__RMM_SHELL__'
+const SHELL_TITLE_TOKEN = '__RMM_SHELL_TITLE__'
+
+function escapeHtml(value) {
+  return String(value).replace(/[&<>"']/g, (c) => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' }[c]))
+}
+
+/**
+ * Whether shell modals are available (the layout rendered rmm_modal_shell_template)
+ * @returns {boolean}
+ */
+export function modalShellAvailable() {
+  return !!document.getElementById(SHELL_TEMPLATE_ID)
+}
+
+/**
+ * Open a placeholder («shell») modal immediately while the real modal is being fetched.
+ * Pass the same size/height/persistentId as the real modal so the swap does not jump.
+ * @param {string} shellId - Unique id for the shell (e.g. `${modalId}-shell`)
+ * @param {Object} options
+ * @param {string} options.title - Header title while loading
+ * @param {string} options.size - 'fit'|'xss'|'xs'|'sm'|'md'|'lg'|'xl'|'full'
+ * @param {string} options.height - e.g. '90vh'
+ * @param {string} options.persistentId - Same persistent_id as the real modal (saved size is shared)
+ * @param {boolean} options.mobileDefaultMaximized
+ * @param {boolean} options.closeOnOverlay
+ * @returns {string|null} shellId, or null when the template is missing (caller falls back)
+ */
+export function openModalShell(shellId, options = {}) {
+  const template = document.getElementById(SHELL_TEMPLATE_ID)
+  if (!template || !shellId) return null
+  // 같은 id 의 틀이 아직 열려 있으면(같은 대상 재클릭) 그대로 쓴다. 닫히는 중·잔재면 즉시 걷어낸다 —
+  // 닫힘 애니메이션을 기다리는 사이 새 틀을 같은 id 로 넣으면 옛 틀의 정리가 새 틀을 지울 수 있다.
+  if (isModalShellOpen(shellId)) return shellId
+  removeShellDom(shellId)
+
+  const html = template.innerHTML
+    .split(SHELL_ID_TOKEN).join(shellId)
+    .split(SHELL_TITLE_TOKEN).join(escapeHtml(options.title || ''))
+  const temp = document.createElement('div')
+  temp.innerHTML = html
+  const modal = temp.querySelector(`#${CSS.escape(shellId)}`)
+  if (!modal) return null
+
+  const set = (name, value) => { if (value !== undefined && value !== null) modal.setAttribute(`data-rmm-modal-${name}-value`, String(value)) }
+  set('size', options.size)
+  set('height', options.height)
+  set('persistent-id', options.persistentId)
+  set('mobile-default-maximized', options.mobileDefaultMaximized)
+  set('close-on-overlay', options.closeOnOverlay)
+  const overlay = temp.querySelector(`#${CSS.escape(shellId)}-overlay`)
+  if (overlay && options.closeOnOverlay !== undefined) {
+    overlay.setAttribute('data-rmm-overlay-close-on-click-value', String(options.closeOnOverlay))
+  }
+  // connect() 가 openValue=true 를 보고 곧바로 연다
+  modal.setAttribute('data-rmm-modal-open-value', 'true')
+  modal.classList.add('rmm-shell')
+
+  const container = document.getElementById('child-modals-container') || document.body
+  while (temp.firstChild) container.appendChild(temp.firstChild)
+  return shellId
+}
+
+/**
+ * Whether the shell is still open (not closed by back button / ESC / overlay while loading)
+ * @param {string} shellId
+ * @returns {boolean}
+ */
+export function isModalShellOpen(shellId) {
+  return !!modalStore.getModalConfig(shellId)
+}
+
+/**
+ * Swap the shell for the real modal in place. The real modal must already be in the DOM (closed).
+ * The real modal inherits the shell's history entry, focus-return target and stacking slot, and
+ * appears without the opening animation.
+ * @param {string} shellId
+ * @param {string} modalId - The real modal's id
+ * @returns {boolean} false when the shell was already closed — the caller should discard the real modal
+ */
+export function replaceModalShell(shellId, modalId) {
+  const modalElement = document.getElementById(modalId)
+  if (!modalElement) return false
+  if (!isModalShellOpen(shellId)) {
+    discardModalShell(shellId)
+    return false
+  }
+  modalElement.dataset.rmmAdoptShell = shellId
+  openModal(modalId)
+  return true
+}
+
+/**
+ * Close (if open) and remove a shell — e.g. when fetching the real modal failed.
+ * @param {string} shellId
+ */
+function removeShellDom(shellId) {
+  const overlay = document.getElementById(`${shellId}-overlay`)
+  const shell = document.getElementById(shellId)
+  if (overlay) overlay.remove()
+  if (shell) shell.remove()
+}
+
+export function discardModalShell(shellId) {
+  const shell = document.getElementById(shellId)
+  if (!shell) return
+  // 정리 대상은 지금 시점의 요소로 고정(나중에 같은 id 로 들어온 새 틀을 건드리지 않게)
+  const overlay = document.getElementById(`${shellId}-overlay`)
+  const removeDom = () => {
+    if (overlay && overlay.parentNode) overlay.remove()
+    if (shell.parentNode) shell.remove()
+  }
+  if (isModalShellOpen(shellId)) {
+    shell.addEventListener('rmm-modal:closed', removeDom, { once: true })
+    closeModal(shellId)
+  } else {
+    removeDom()
+  }
+}
+
 /**
  * Close the topmost modal
  * @returns {string|null} The closed modal's ID or null if no modal was open

data/lib/rails_modal_manager/version.rb

@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 
 module RailsModalManager
-  VERSION = "1.0.60"
+  VERSION = "1.0.61"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: rails_modal_manager
 version: !ruby/object:Gem::Version
-  version: 1.0.60
+  version: 1.0.61
 platform: ruby
 authors:
 - reshacs