rails_modal_manager 1.0.15 → 1.0.17

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 736e63cc3f81769e168c0945753f8cc1f2f4a8e840fb18a6768f10a76e80f7cc
-  data.tar.gz: 8d4cd784e878b2ff7fd5baca62d25c8b9fbd0aefc53caae82f86710805a2f4b5
+  metadata.gz: ddf5144ec6b2d218fcd7dcce4525caeb858a563bf0c500598e2495fbacc9ac0d
+  data.tar.gz: 6e14143e1f18ea4f21df847705f4d660f69fccd1dc03df7d63512b9d4cc73b13
 SHA512:
-  metadata.gz: 235e07f2e6e39617031bf18115bbf775345488aa369331acf2803cd12a0607464b2b4e2507c807957665e85b67731850ee7f84db37b034b00e53cd83773e950f
-  data.tar.gz: b9aca2397fdeb003b14ba3f368f76cb60aed7744486534df7fb81de688730b0c5c58144c297a30bb90df98166229b05cb745ef8ef7e00a88db3972b3d68e8c7c
+  metadata.gz: 551384565588799321b3c4cd9431ec59ae66241b00ae80033972c808a393187f0ea6bcf297c13f04059c5b497706ff15969175a7b7bb7e725bbac5b411589c50
+  data.tar.gz: 58e4cbc16201e1524a439b54ca74a1311c3e67146ad6c0158d29bdbb5ba869b45cb89e8fae2c04fd7243ba91add145ec44e7977d7998be13f5182d0361e8cfdb

data/README.md

@@ -3,7 +3,7 @@
 Rails 애플리케이션을 위한 고급 모달 매니저입니다.
 `@reshacs/react-modal-manager`에서 포팅되었습니다.
 
-**Version:** 1.0.12
+**Version:** 1.0.17
 
 ---
 
@@ -789,6 +789,21 @@ MIT License
 
 ## 변경 이력
 
+### v1.0.17
+
+- **모바일 최대화 모달 사이드바 개선**: 최대화된 모달에서 사이드바가 접혔을 때 아이콘만 표시 (데스크톱과 동일한 UX)
+- **모바일 기본크기 버튼 숨김**: 모바일에서 크기 컨트롤의 기본크기 버튼 숨김 처리
+- **모바일 사이드바 리셋 개선**: 모달 닫힘 시 모바일에서 사이드바가 항상 접힌 상태로 리셋
+- **mobile_default_maximized 옵션 수정**: ERB 템플릿에서 누락된 data 속성 추가
+
+### v1.0.16
+
+- **모달 상태 리셋 개선**: 모달 닫힘 시 사이드바와 서브메뉴가 첫 번째 항목으로 자동 리셋
+
+### v1.0.13 ~ v1.0.15
+
+- 내부 개선 및 버그 수정
+
 ### v1.0.12
 
 - **최소화된 모달 자동 복원**: `openModal()` 호출 시 해당 모달이 이미 열려있고 최소화된 상태라면 자동으로 복원되도록 개선

data/app/assets/stylesheets/rails_modal_manager.css

@@ -696,6 +696,28 @@
     opacity: 1;
     visibility: visible;
   }
+
+  /* When modal is maximized on mobile, show collapsed sidebar with icons only */
+  .rmm-modal.rmm-size-full .rmm-sidebar {
+    position: relative;
+    top: auto;
+    transform: none;
+  }
+
+  .rmm-modal.rmm-size-full .rmm-sidebar.rmm-sidebar-collapsed {
+    width: var(--rmm-sidebar-collapsed-width);
+    min-width: var(--rmm-sidebar-collapsed-width);
+  }
+
+  .rmm-modal.rmm-size-full .rmm-sidebar:not(.rmm-sidebar-collapsed) {
+    width: var(--rmm-sidebar-width);
+    min-width: var(--rmm-sidebar-width);
+  }
+
+  /* Hide overlay for maximized modal since sidebar is inline */
+  .rmm-modal.rmm-size-full .rmm-sidebar-overlay {
+    display: none;
+  }
 }
 
 /* ============================================
@@ -1226,11 +1248,15 @@
   height: 14px;
 }
 
-/* Hide drag handle on mobile */
+/* Hide drag handle and default size button on mobile */
 @media (max-width: 768px) {
   .rmm-drag-handle {
     display: none;
   }
+
+  .rmm-default-size-btn {
+    display: none;
+  }
 }
 
 /* ============================================

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

@@ -345,6 +345,9 @@ export default class extends Controller {
     const modal = this.element
     const overlay = this.getOverlay()
 
+    // Reset sidebar and submenu to first item before hiding
+    this.resetSidebarAndSubmenu()
+
     modal.classList.remove('rmm-active')
     if (overlay) overlay.classList.remove('rmm-active')
 
@@ -359,6 +362,38 @@ export default class extends Controller {
     }, this.animationDurationValue)
   }
 
+  /**
+   * Reset sidebar and submenu controllers to first item
+   * Called when modal is closed to ensure clean state on next open
+   */
+  resetSidebarAndSubmenu() {
+    const modal = this.element
+
+    // Reset sidebar controller
+    const sidebarElement = modal.querySelector('[data-controller*="rmm-sidebar"]')
+    if (sidebarElement) {
+      const sidebarController = this.application.getControllerForElementAndIdentifier(
+        sidebarElement,
+        'rmm-sidebar'
+      )
+      if (sidebarController && typeof sidebarController.resetToFirst === 'function') {
+        sidebarController.resetToFirst()
+      }
+    }
+
+    // Reset all submenu controllers
+    const submenuElements = modal.querySelectorAll('[data-controller*="rmm-submenu"]')
+    submenuElements.forEach(submenuElement => {
+      const submenuController = this.application.getControllerForElementAndIdentifier(
+        submenuElement,
+        'rmm-submenu'
+      )
+      if (submenuController && typeof submenuController.resetToFirst === 'function') {
+        submenuController.resetToFirst()
+      }
+    })
+  }
+
   // ============================================
   // Styles
   // ============================================

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

@@ -40,14 +40,10 @@ export default class extends Controller {
       this.element.classList.add('rmm-sidebar-collapsed')
     }
 
-    // Find initial active item and restore its state
+    // Find initial active item
     const activeItem = this.element.querySelector('.rmm-sidebar-item.rmm-active')
     if (activeItem) {
       this.currentItemId = activeItem.dataset.itemId
-      // Restore panel and submenu state for the active item
-      // This ensures content is properly displayed when modal is reopened
-      this.switchPanel(activeItem)
-      this.switchSubmenuGroup(activeItem)
     }
 
     // Listen for toggle event from header button
@@ -205,4 +201,34 @@ export default class extends Controller {
     this.collapsedValue = true
     this.element.classList.add('rmm-sidebar-collapsed')
   }
+
+  /**
+   * Reset sidebar to first item
+   * Called by modal controller when modal is closed
+   */
+  resetToFirst() {
+    const firstItem = this.element.querySelector('.rmm-sidebar-item')
+    if (!firstItem) return
+
+    // Remove active from all items
+    this.element.querySelectorAll('.rmm-sidebar-item').forEach(el => {
+      el.classList.remove('rmm-active')
+    })
+
+    // Add active to first item
+    firstItem.classList.add('rmm-active')
+    this.currentItemId = firstItem.dataset.itemId
+
+    // On mobile, ensure sidebar is collapsed
+    if (window.innerWidth < 768) {
+      this.collapsedValue = true
+      this.element.classList.add('rmm-sidebar-collapsed')
+    }
+
+    // Switch content panel
+    this.switchPanel(firstItem)
+
+    // Switch submenu group
+    this.switchSubmenuGroup(firstItem)
+  }
 }

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

@@ -45,17 +45,10 @@ export default class extends Controller {
     this.ajaxCache = new Map()
     this.currentItemId = null
 
-    // Find initial active item and restore its state
+    // Find initial active item
     const activeItem = this.element.querySelector('.rmm-submenu-item.rmm-active')
     if (activeItem) {
       this.currentItemId = activeItem.dataset.itemId
-      // Restore panel state for the active item
-      // This ensures content is properly displayed when modal is reopened
-      if (this.loadModeValue === 'ajax') {
-        this.loadAjaxContent(activeItem)
-      } else {
-        this.switchPanel(activeItem)
-      }
     }
   }
 
@@ -235,4 +228,32 @@ export default class extends Controller {
       }
     }
   }
+
+  /**
+   * Reset submenu to first item
+   * Called by modal controller when modal is closed
+   */
+  resetToFirst() {
+    const firstItem = this.element.querySelector('.rmm-submenu-item')
+    if (!firstItem) return
+
+    // Remove active from all items
+    this.element.querySelectorAll('.rmm-submenu-item').forEach(el => {
+      el.classList.remove('rmm-active')
+    })
+
+    // Add active to first item
+    firstItem.classList.add('rmm-active')
+    this.currentItemId = firstItem.dataset.itemId
+
+    // Switch panel
+    if (this.loadModeValue === 'ajax') {
+      this.loadAjaxContent(firstItem)
+    } else {
+      this.switchPanel(firstItem)
+    }
+
+    // Clear AJAX cache
+    this.ajaxCache.clear()
+  }
 }

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

@@ -93,7 +93,7 @@
     <% if show_size_controls %>
       <%# Default size button - restores to original size %>
       <button type="button"
-              class="rmm-header-btn"
+              class="rmm-header-btn rmm-default-size-btn"
               data-action="click->rmm-header#restoreDefaultSize"
               title="기본 크기">
         <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">

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

@@ -83,6 +83,7 @@
   header_buttons ||= []
   extra_class ||= ""
   extra_data ||= {}
+  mobile_default_maximized ||= false
 
   # Build CSS classes
   modal_classes = ["rmm-modal", "rmm-size-#{size}", "rmm-position-#{position}"]
@@ -112,6 +113,7 @@
     rmm_modal_min_height_value: min_height,
     rmm_modal_height_value: height,
     rmm_modal_animation_duration_value: animation_duration,
+    rmm_modal_mobile_default_maximized_value: mobile_default_maximized,
     action: "click->rmm-modal#handleClick"
   }
   data_attrs[:rmm_modal_parent_modal_id_value] = parent_modal_id if parent_modal_id

data/lib/rails_modal_manager/version.rb

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

metadata

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