rails_modal_manager 1.0.27 → 1.0.29

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: e919b275fd361881663b301cd23661d0ac6bb593c2798eb2a77b0bb231e4f4c1
-  data.tar.gz: 553fe6e5cc9235cd0c87997d07c630795893c235a79983416d8423d65a4f013d
+  metadata.gz: 91f9473faad23228686f9fe959c83c9c048bdc814ecd3ed7e492eeac5ec10e6b
+  data.tar.gz: 6b81119b8eaa385bfe34ba0aad7fda92d5ff89c6a425a4328e38b81355b2d141
 SHA512:
-  metadata.gz: 18794e80fb189d47781ba21e1a673499f459cabcc835509c97d87748d5ad16781634a2341796b3e14c45f6442a0af1643b80c0a534dbf3075696bf690a785396
-  data.tar.gz: 2f26034a4577fba61a50ab77292203df2c2f4916f4b9dbe8b9879ea30e93baeae66b896dd75f23d73f9713e80cee0f8171fcb24dab7d50b93348a18b95891b84
+  metadata.gz: 0c04a02908fc63c7e6343efa32171dbb2949dabbd35503638e44b6ec5a884b5d96faf979c98fa52ea4d5005bc538e664ab032a5d38514edbf363e5defe4d97fc
+  data.tar.gz: fa6749e2a862836755ad7de5cd46c4df4d3e546063524aaa0c6515c30b8060ea3972b66d6e2b3a08c9fe75a41291eec6c0797214cc85dccec26ea8fa76fe8dce

data/app/assets/stylesheets/rails_modal_manager.css

@@ -1292,3 +1292,73 @@
   white-space: nowrap;
   border: 0;
 }
+
+/* ============================================
+   Content Loading Overlay
+   ============================================ */
+.rmm-content-loader {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: rgba(255, 255, 255, 0.7);
+  z-index: 5;
+  opacity: 0;
+  visibility: hidden;
+  transition: opacity 0.2s ease, visibility 0.2s ease;
+}
+
+.dark .rmm-content-loader {
+  background: rgba(30, 41, 59, 0.7);
+}
+
+.rmm-content-loader.rmm-active {
+  opacity: 1;
+  visibility: visible;
+}
+
+/* Loading indicator wrapper */
+.rmm-content-loader-inner {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 12px;
+}
+
+/* Spinner sizes */
+.rmm-spinner-sm {
+  width: 20px;
+  height: 20px;
+  border-width: 2px;
+}
+
+.rmm-spinner-md {
+  width: 32px;
+  height: 32px;
+  border-width: 3px;
+}
+
+.rmm-spinner-lg {
+  width: 48px;
+  height: 48px;
+  border-width: 4px;
+}
+
+/* Loading text */
+.rmm-content-loader-text {
+  font-size: 14px;
+  color: var(--rmm-submenu-item-text);
+}
+
+/* Container with loading state (relative positioning for overlay) */
+.rmm-loading-container {
+  position: relative;
+  min-height: 100px;
+}
+
+/* Fade effect for content during loading */
+.rmm-loading-container.rmm-loading > *:not(.rmm-content-loader) {
+  opacity: 0.5;
+  transition: opacity 0.2s ease;
+}

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

@@ -205,19 +205,14 @@ export default class extends Controller {
         return
       }
 
-      // 서브메뉴가 있는 경우 forceReloadActive 호출하여 콘텐츠 새로고침
-      const submenuId = item.dataset.submenuId
-      if (submenuId) {
-        this.triggerSubmenuReload(submenuId)
-      }
-
-      // 이벤트 발생
+      // 이벤트만 발생 (커스텀 컨트롤러에서 콘텐츠 로드 처리)
+      // triggerSubmenuReload는 호출하지 않음 - 중복 로드 방지
       this.dispatch('itemSelect', {
         detail: {
           modalId: this.modalIdValue,
           itemId: item.dataset.itemId,
           itemLabel: item.dataset.itemLabel,
-          hasSubmenu: !!submenuId,
+          hasSubmenu: !!item.dataset.submenuId,
           isReselect: true,
         }
       })

data/app/javascript/rails_modal_manager/index.js

@@ -152,3 +152,92 @@ export function getOpenModalCount() {
 export function getModalStore() {
   return modalStore
 }
+
+// ============================================
+// Content Loader Functions
+// ============================================
+
+// Store for active loader timeouts (for delay feature)
+const loaderTimeouts = new Map()
+
+/**
+ * Show a content loader by ID
+ * @param {string} loaderId - The loader element's ID
+ * @param {Object} options - Options
+ * @param {number} options.delay - Delay in ms before showing (overrides data-rmm-loader-delay)
+ */
+export function showLoader(loaderId, options = {}) {
+  const loader = document.getElementById(loaderId)
+  if (!loader) return
+
+  // Clear any existing timeout
+  if (loaderTimeouts.has(loaderId)) {
+    clearTimeout(loaderTimeouts.get(loaderId))
+    loaderTimeouts.delete(loaderId)
+  }
+
+  // Get delay from options or data attribute
+  const delay = options.delay ?? parseInt(loader.dataset.rmmLoaderDelay || '0', 10)
+
+  // Also add loading class to parent container
+  const container = loader.parentElement
+  if (container && container.classList.contains('rmm-loading-container')) {
+    container.classList.add('rmm-loading')
+  }
+
+  if (delay > 0) {
+    // Show after delay
+    const timeout = setTimeout(() => {
+      loader.classList.add('rmm-active')
+      loader.setAttribute('aria-hidden', 'false')
+      loaderTimeouts.delete(loaderId)
+    }, delay)
+    loaderTimeouts.set(loaderId, timeout)
+  } else {
+    // Show immediately
+    loader.classList.add('rmm-active')
+    loader.setAttribute('aria-hidden', 'false')
+  }
+}
+
+/**
+ * Hide a content loader by ID
+ * @param {string} loaderId - The loader element's ID
+ */
+export function hideLoader(loaderId) {
+  const loader = document.getElementById(loaderId)
+  if (!loader) return
+
+  // Clear any pending timeout
+  if (loaderTimeouts.has(loaderId)) {
+    clearTimeout(loaderTimeouts.get(loaderId))
+    loaderTimeouts.delete(loaderId)
+  }
+
+  loader.classList.remove('rmm-active')
+  loader.setAttribute('aria-hidden', 'true')
+
+  // Remove loading class from parent container
+  const container = loader.parentElement
+  if (container && container.classList.contains('rmm-loading-container')) {
+    container.classList.remove('rmm-loading')
+  }
+}
+
+/**
+ * Check if a loader is currently active (visible or pending)
+ * @param {string} loaderId - The loader element's ID
+ * @returns {boolean}
+ */
+export function isLoaderActive(loaderId) {
+  const loader = document.getElementById(loaderId)
+  if (!loader) return false
+  return loader.classList.contains('rmm-active') || loaderTimeouts.has(loaderId)
+}
+
+// Register global functions for easy access
+if (typeof window !== 'undefined') {
+  window.rmmShowLoader = showLoader
+  window.rmmHideLoader = hideLoader
+  window.rmmIsLoaderActive = isLoaderActive
+}

data/app/views/rails_modal_manager/_content_loader.html.erb

@@ -0,0 +1,59 @@
+<%#
+  Rails Modal Manager - Content Loader Component
+
+  A reusable loading overlay with spinner that can be placed inside any container.
+  The container should have `position: relative` or use the `rmm-loading-container` class.
+
+  Usage:
+  ```erb
+  <div id="my-content" class="rmm-loading-container">
+    <%= render "rails_modal_manager/content_loader", loader_id: "my-loader" %>
+    <!-- Your content here -->
+  </div>
+  ```
+
+  Then control via JavaScript:
+  ```javascript
+  // Show loader
+  RailsModalManager.showLoader('my-loader')
+
+  // Hide loader
+  RailsModalManager.hideLoader('my-loader')
+
+  // Or using the global function
+  window.rmmShowLoader('my-loader')
+  window.rmmHideLoader('my-loader')
+  ```
+
+  Optional locals:
+    loader_id: String - Unique loader identifier (default: auto-generated)
+    size: String - sm, md, lg (default: "md")
+    text: String - Loading text (default: nil, no text shown)
+    delay: Number - Delay in ms before showing (default: 0)
+    active: Boolean - Initially active (default: false)
+%>
+<%
+  loader_id ||= "rmm-loader-#{SecureRandom.hex(4)}"
+  size ||= "md"
+  text ||= nil
+  delay ||= 0
+  active ||= false
+
+  loader_classes = ["rmm-content-loader"]
+  loader_classes << "rmm-active" if active
+
+  spinner_classes = ["rmm-spinner", "rmm-spinner-#{size}"]
+%>
+
+<div id="<%= loader_id %>"
+     class="<%= loader_classes.join(' ') %>"
+     data-rmm-loader
+     data-rmm-loader-delay="<%= delay %>"
+     aria-hidden="<%= !active %>">
+  <div class="rmm-content-loader-inner">
+    <div class="<%= spinner_classes.join(' ') %>"></div>
+    <% if text.present? %>
+      <span class="rmm-content-loader-text"><%= text %></span>
+    <% end %>
+  </div>
+</div>

data/lib/rails_modal_manager/version.rb

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

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: rails_modal_manager
 version: !ruby/object:Gem::Version
-  version: 1.0.27
+  version: 1.0.29
 platform: ruby
 authors:
 - reshacs
@@ -59,6 +59,7 @@ files:
 - app/javascript/rails_modal_manager/history_stack_manager.js
 - app/javascript/rails_modal_manager/index.js
 - app/javascript/rails_modal_manager/modal_store.js
+- app/views/rails_modal_manager/_content_loader.html.erb
 - app/views/rails_modal_manager/_footer.html.erb
 - app/views/rails_modal_manager/_header.html.erb
 - app/views/rails_modal_manager/_modal.html.erb