rails_modal_manager 1.0.28 → 1.0.29

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: ebcb6d9bc5128b747b71ad201b2e9fad380dc7d788064b373ff8b320ea79c47e
-  data.tar.gz: fad2c3da1a425a4f565eafac8d22b3ae58393964494eff0ee5d854aee9a431aa
+  metadata.gz: 91f9473faad23228686f9fe959c83c9c048bdc814ecd3ed7e492eeac5ec10e6b
+  data.tar.gz: 6b81119b8eaa385bfe34ba0aad7fda92d5ff89c6a425a4328e38b81355b2d141
 SHA512:
-  metadata.gz: e319bb433378cc2eb60025c84f98c8fa47286334895e9b588b80c5cc5b0c6476c6cfe5b444261048c8fc736994ffd8f7b9d4c7ca24de4fa44a9570104fb69d2f
-  data.tar.gz: 1fd5038104cff012f5ba60f92cea95eea006e95b5c6f6ff8b592031ffcd586342a0a166c03cc000daa70301d4958dfeb4ef39f67815ba9cd32c4dc21bf0c106b
+  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/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.28"
+  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.28
+  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