rails_modal_manager 1.0.19 → 1.0.20

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: cef668111af06b98cc1ee5627a3c331c3baeb67a8e5cc0254597644eaa7226c2
-  data.tar.gz: cc54b9eaec7112a06b40f722de1b2b3d2d799e9310f14632bbdfb9a33616134b
+  metadata.gz: b16a0669fa5fe91e312533c15dcfa6f148427d727f873d16edec295b2a15249a
+  data.tar.gz: 6c6d80d7b5093a893860660d14acc22273d3caa09b5b65f68edc03522f6831ac
 SHA512:
-  metadata.gz: 38898bfe69ba690b37c5e58c960b21ba8c5b6405b1b6be9d547d568722a8e527a52ce14753667e78b38bfbb4f04647c76f1cfcd1cab2ccc62ccd42080d88affb
-  data.tar.gz: 4e5e50e11819160227ad23f5237a618f2812a762d0177f1045b387de9abd2a6aacf9d2945ea0d97e0d6c5841691f666a1162f8272de9ba7f2917d8df8e4d078b
+  metadata.gz: 504b04ee86bd7a93ef97e49107545a436e04f7a6774679022bed2db5ab235f938a89ab4e37c6062b738c8bdbada7552d7b9670836582ebec8841cc9009e0effb
+  data.tar.gz: a2f12d82a5996a8e949f0881b1e1c2769e430b4f7f6668488b649bcaaa30a0871c1424c442b9fb09ed125852dede6d8ca2db026c9c89c878749eefc86adf4667

data/app/assets/stylesheets/rails_modal_manager.css

@@ -718,6 +718,15 @@
   .rmm-modal.rmm-size-full .rmm-sidebar-overlay {
     display: none;
   }
+
+  /* 모바일+최대화 상태에서 사이드바 완전 숨김 모드 */
+  .rmm-modal.rmm-size-full .rmm-sidebar.rmm-sidebar-hidden {
+    width: 0;
+    min-width: 0;
+    padding: 0;
+    overflow: hidden;
+    border-right: none;
+  }
 }
 
 /* ============================================

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

@@ -151,11 +151,26 @@ export default class extends Controller {
   handleSidebarToggled(e) {
     if (!this.hasSidebarToggleTarget) return
 
-    const isCollapsed = e.detail.collapsed
+    const { collapsed, sidebarMode, isMobileMaximized } = e.detail
+
     const collapseIcon = this.sidebarToggleTarget.querySelector('.rmm-icon-collapse')
     const expandIcon = this.sidebarToggleTarget.querySelector('.rmm-icon-expand')
-
-    if (collapseIcon) collapseIcon.style.display = isCollapsed ? 'none' : 'block'
-    if (expandIcon) expandIcon.style.display = isCollapsed ? 'block' : 'none'
+    const hiddenIcon = this.sidebarToggleTarget.querySelector('.rmm-icon-hidden')
+
+    // 모바일+최대화 상태에서는 3단계 아이콘
+    if (isMobileMaximized && sidebarMode) {
+      if (collapseIcon) collapseIcon.style.display = sidebarMode === 'expanded' ? 'block' : 'none'
+      if (expandIcon) expandIcon.style.display = sidebarMode === 'icons' ? 'block' : 'none'
+      if (hiddenIcon) hiddenIcon.style.display = sidebarMode === 'hidden' ? 'block' : 'none'
+
+      // 툴팁 업데이트
+      const titles = { expanded: '아이콘으로', icons: '숨기기', hidden: '펼치기' }
+      this.sidebarToggleTarget.title = titles[sidebarMode] || ''
+    } else {
+      // 일반 상태: 기존 2단계 아이콘
+      if (collapseIcon) collapseIcon.style.display = collapsed ? 'none' : 'block'
+      if (expandIcon) expandIcon.style.display = collapsed ? 'block' : 'none'
+      if (hiddenIcon) hiddenIcon.style.display = 'none'
+    }
   }
 }

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

@@ -26,6 +26,8 @@ export default class extends Controller {
   static values = {
     modalId: String,
     collapsed: { type: Boolean, default: false },
+    // 모바일+최대화 상태에서의 사이드바 모드: 'expanded' | 'icons' | 'hidden'
+    sidebarMode: { type: String, default: 'icons' },
   }
 
   connect() {
@@ -34,6 +36,11 @@ export default class extends Controller {
     // 모바일 사이즈(768px 미만)에서는 기본적으로 사이드바를 닫힌 상태로 시작
     if (window.innerWidth < 768) {
       this.collapsedValue = true
+      // 모바일+최대화 상태 체크하여 초기 모드 설정
+      if (this.isMobileMaximized()) {
+        this.sidebarModeValue = 'icons'
+        this.applySidebarMode()
+      }
     }
 
     if (this.collapsedValue) {
@@ -56,6 +63,13 @@ export default class extends Controller {
   }
 
   toggle() {
+    // 모바일+최대화 상태에서는 3단계 토글
+    if (this.isMobileMaximized()) {
+      this.toggleMobileMaximized()
+      return
+    }
+
+    // 일반 상태: 기존 2단계 토글
     this.collapsedValue = !this.collapsedValue
     this.element.classList.toggle('rmm-sidebar-collapsed', this.collapsedValue)
 
@@ -64,6 +78,9 @@ export default class extends Controller {
       sidebarOpen: !this.collapsedValue,
     })
 
+    // 아이콘 업데이트
+    this.updateToggleIcon()
+
     // Dispatch toggled event so toggle button can update its icon
     const modal = this.element.closest('.rmm-modal')
     if (modal) {
@@ -74,6 +91,103 @@ export default class extends Controller {
     }
   }
 
+  /**
+   * 모바일+최대화 상태 여부 체크
+   */
+  isMobileMaximized() {
+    const modal = this.element.closest('.rmm-modal')
+    if (!modal) return false
+
+    const isMobile = window.innerWidth <= 768
+    const isMaximized = modal.classList.contains('rmm-size-full')
+
+    return isMobile && isMaximized
+  }
+
+  /**
+   * 모바일+최대화 상태에서의 3단계 토글
+   * expanded (펼침) → icons (아이콘) → hidden (숨김) → expanded
+   */
+  toggleMobileMaximized() {
+    const modes = ['expanded', 'icons', 'hidden']
+    const currentIndex = modes.indexOf(this.sidebarModeValue)
+    const nextIndex = (currentIndex + 1) % modes.length
+    this.sidebarModeValue = modes[nextIndex]
+
+    this.applySidebarMode()
+
+    // Update store
+    modalStore.updateModal(this.modalIdValue, {
+      sidebarOpen: this.sidebarModeValue === 'expanded',
+      sidebarMode: this.sidebarModeValue,
+    })
+
+    // Dispatch toggled event with mode info
+    const modal = this.element.closest('.rmm-modal')
+    if (modal) {
+      modal.dispatchEvent(new CustomEvent('rmm-sidebar:toggled', {
+        detail: {
+          collapsed: this.sidebarModeValue !== 'expanded',
+          sidebarMode: this.sidebarModeValue,
+          isMobileMaximized: true,
+        },
+        bubbles: false
+      }))
+    }
+  }
+
+  /**
+   * 사이드바 모드에 따른 CSS 클래스 적용
+   */
+  applySidebarMode() {
+    // 모든 모드 클래스 제거
+    this.element.classList.remove('rmm-sidebar-collapsed', 'rmm-sidebar-hidden')
+
+    switch (this.sidebarModeValue) {
+      case 'expanded':
+        this.collapsedValue = false
+        break
+      case 'icons':
+        this.collapsedValue = true
+        this.element.classList.add('rmm-sidebar-collapsed')
+        break
+      case 'hidden':
+        this.collapsedValue = true
+        this.element.classList.add('rmm-sidebar-hidden')
+        break
+    }
+
+    // 헤더의 사이드바 토글 아이콘도 직접 업데이트
+    this.updateToggleIcon()
+  }
+
+  /**
+   * 헤더의 사이드바 토글 버튼 아이콘 업데이트
+   */
+  updateToggleIcon() {
+    const modal = this.element.closest('.rmm-modal')
+    if (!modal) return
+
+    const toggleBtn = modal.querySelector('.rmm-sidebar-toggle')
+    if (!toggleBtn) return
+
+    const collapseIcon = toggleBtn.querySelector('.rmm-icon-collapse')
+    const expandIcon = toggleBtn.querySelector('.rmm-icon-expand')
+    const hiddenIcon = toggleBtn.querySelector('.rmm-icon-hidden')
+
+    if (this.isMobileMaximized()) {
+      // 모바일+최대화: 3단계 아이콘
+      if (collapseIcon) collapseIcon.style.display = this.sidebarModeValue === 'expanded' ? 'block' : 'none'
+      if (expandIcon) expandIcon.style.display = this.sidebarModeValue === 'icons' ? 'block' : 'none'
+      if (hiddenIcon) hiddenIcon.style.display = this.sidebarModeValue === 'hidden' ? 'block' : 'none'
+    } else {
+      // 일반: 2단계 아이콘
+      if (collapseIcon) collapseIcon.style.display = this.collapsedValue ? 'none' : 'block'
+      if (expandIcon) expandIcon.style.display = this.collapsedValue ? 'block' : 'none'
+      if (hiddenIcon) hiddenIcon.style.display = 'none'
+    }
+  }
+
   selectItem(e) {
     e.preventDefault()
     e.stopPropagation()
@@ -103,8 +217,14 @@ export default class extends Controller {
 
     // On mobile, close sidebar after selection
     if (window.innerWidth < 768) {
-      this.collapsedValue = true
-      this.element.classList.add('rmm-sidebar-collapsed')
+      // 모바일+최대화 상태에서는 아이콘 상태로 전환
+      if (this.isMobileMaximized()) {
+        this.sidebarModeValue = 'icons'
+        this.applySidebarMode()
+      } else {
+        this.collapsedValue = true
+        this.element.classList.add('rmm-sidebar-collapsed')
+      }
     }
 
     // Dispatch event
@@ -198,8 +318,14 @@ export default class extends Controller {
 
   // Mobile overlay click
   closeOverlay() {
-    this.collapsedValue = true
-    this.element.classList.add('rmm-sidebar-collapsed')
+    // 모바일+최대화 상태에서는 아이콘 상태로 전환
+    if (this.isMobileMaximized()) {
+      this.sidebarModeValue = 'icons'
+      this.applySidebarMode()
+    } else {
+      this.collapsedValue = true
+      this.element.classList.add('rmm-sidebar-collapsed')
+    }
   }
 
   /**
@@ -219,10 +345,16 @@ export default class extends Controller {
     firstItem.classList.add('rmm-active')
     this.currentItemId = firstItem.dataset.itemId
 
-    // On mobile, ensure sidebar is collapsed
+    // On mobile, ensure sidebar is collapsed/icons mode
     if (window.innerWidth < 768) {
-      this.collapsedValue = true
-      this.element.classList.add('rmm-sidebar-collapsed')
+      // 모바일+최대화 상태에서는 아이콘 상태로 초기화
+      if (this.isMobileMaximized()) {
+        this.sidebarModeValue = 'icons'
+        this.applySidebarMode()
+      } else {
+        this.collapsedValue = true
+        this.element.classList.add('rmm-sidebar-collapsed')
+      }
     }
 
     // Switch content panel

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

@@ -67,12 +67,18 @@
               data-rmm-header-target="sidebarToggle"
               data-action="click->rmm-header#toggleSidebar"
               title="사이드바 토글">
+        <%# 펼침 상태 -> 아이콘으로 (좌측 화살표) %>
         <svg class="rmm-icon-collapse" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
           <polyline points="15 18 9 12 15 6"></polyline>
         </svg>
+        <%# 아이콘 상태 -> 펼치기 (우측 화살표) %>
         <svg class="rmm-icon-expand" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="display: none;">
           <polyline points="9 18 15 12 9 6"></polyline>
         </svg>
+        <%# 숨김 상태 -> 보이기 (- 아이콘) - 모바일+최대화에서만 사용 %>
+        <svg class="rmm-icon-hidden" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="display: none;">
+          <line x1="5" y1="12" x2="19" y2="12"></line>
+        </svg>
       </button>
     <% end %>
     <h2 id="<%= modal_id %>-title" class="rmm-header-title"><%= title %></h2>

data/lib/rails_modal_manager/version.rb

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

metadata

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