rails_modal_manager 1.0.35 → 1.0.36

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 72c527ec9681356bcf4c0f3b9fd1d8c337a31764a79ff1a57801ec28bdc1cfef
-  data.tar.gz: c333ca2a7be2f4140f76e81ad5ad4d028524a90c7155001cfec70b4f064d511a
+  metadata.gz: 1e33e1757e9bc78d6b4e0b801af55ce709813f195254eb3196b8f8394a6afcce
+  data.tar.gz: 81818160c6846429dccc642893a95d2c98f0274406aaae378eff2a6e73ff2163
 SHA512:
-  metadata.gz: 0dd3f943bd13e8227f971ae76a52438b505a7412a684bd50c5ffcd56249dc6c4d38216b5f1bd690f640731c478a9fb7ec68ef857f8df697d7c02748f6487eccc
-  data.tar.gz: 5b3198913d43cdf59998c1602babdd3bbbae1ecb4976983a218a664d8ca57f0946e686fdfe51ec2e1c6c3a6b02397f199a4a96494812cedc9387ab4338d29681
+  metadata.gz: 2b826a9937d346a5163902fd6d6a47ba22816c99ffdcf52710cbe09f3feca7b2bc571b818eb0229f7092fd2615cda1772f7dd01a8a49bf817e454487179b5790
+  data.tar.gz: 05bf7a6f7cdbe61b203a44735b597bcd9a57b5fe9eff65b3779eb332cb63ead249118b4175ef52c1f363e0d68726434cc79225e1a540c5d95e0552c1e1917cbc

data/app/assets/stylesheets/rails_modal_manager.css

@@ -1561,58 +1561,6 @@
   }
 }
 
-/* MD, LG, XL 사이즈는 768px이 아닌 각자의 min-width 기준으로 모바일 스타일 적용
-   - MD: 960px 이상에서는 데스크톱 스타일 유지
-   - LG: 1152px 이상에서는 데스크톱 스타일 유지
-   - XL: 1344px 이상에서는 데스크톱 스타일 유지
-*/
-@media (min-width: 769px) {
-  /* MD: 769px ~ 960px 범위에서도 min-width 적용 */
-  .rmm-modal.rmm-size-md {
-    width: 50% !important;
-    min-width: min(960px, calc(100vw - 40px)) !important;
-    max-width: calc(100vw - 40px) !important;
-    left: 50% !important;
-    right: auto !important;
-  }
-  .rmm-modal.rmm-size-md.rmm-position-center {
-    transform: translate(-50%, -50%) !important;
-  }
-  .rmm-modal.rmm-size-md.rmm-position-center.rmm-active {
-    transform: translate(-50%, -50%) scale(1) !important;
-  }
-
-  /* LG: 769px ~ 1152px 범위에서도 min-width 적용 */
-  .rmm-modal.rmm-size-lg {
-    width: 60% !important;
-    min-width: min(1152px, calc(100vw - 40px)) !important;
-    max-width: calc(100vw - 40px) !important;
-    left: 50% !important;
-    right: auto !important;
-  }
-  .rmm-modal.rmm-size-lg.rmm-position-center {
-    transform: translate(-50%, -50%) !important;
-  }
-  .rmm-modal.rmm-size-lg.rmm-position-center.rmm-active {
-    transform: translate(-50%, -50%) scale(1) !important;
-  }
-
-  /* XL: 769px ~ 1344px 범위에서도 min-width 적용 */
-  .rmm-modal.rmm-size-xl {
-    width: 70% !important;
-    min-width: min(1344px, calc(100vw - 40px)) !important;
-    max-width: calc(100vw - 40px) !important;
-    left: 50% !important;
-    right: auto !important;
-  }
-  .rmm-modal.rmm-size-xl.rmm-position-center {
-    transform: translate(-50%, -50%) !important;
-  }
-  .rmm-modal.rmm-size-xl.rmm-position-center.rmm-active {
-    transform: translate(-50%, -50%) scale(1) !important;
-  }
-}
-
 /* ============================================
    Drag Handle
    ============================================ */
@@ -1732,3 +1680,55 @@
   opacity: 0.5;
   transition: opacity 0.2s ease;
 }
+
+/* ============================================
+   PC Size Fixes (min-width: 769px)
+   - 중간 크기 브라우저에서도 min-width 적용
+   - :not(.rmm-dragging):not(.rmm-custom-position)으로 드래그 중/후 제외
+   ============================================ */
+@media (min-width: 769px) {
+  /* MD: 769px ~ 960px 범위에서도 min-width 적용 */
+  .rmm-modal.rmm-size-md:not(.rmm-dragging):not(.rmm-custom-position) {
+    width: 50% !important;
+    min-width: min(960px, calc(100vw - 40px)) !important;
+    max-width: calc(100vw - 40px) !important;
+    left: 50% !important;
+    right: auto !important;
+  }
+  .rmm-modal.rmm-size-md.rmm-position-center:not(.rmm-dragging):not(.rmm-custom-position) {
+    transform: translate(-50%, -50%) !important;
+  }
+  .rmm-modal.rmm-size-md.rmm-position-center.rmm-active:not(.rmm-dragging):not(.rmm-custom-position) {
+    transform: translate(-50%, -50%) scale(1) !important;
+  }
+
+  /* LG: 769px ~ 1152px 범위에서도 min-width 적용 */
+  .rmm-modal.rmm-size-lg:not(.rmm-dragging):not(.rmm-custom-position) {
+    width: 60% !important;
+    min-width: min(1152px, calc(100vw - 40px)) !important;
+    max-width: calc(100vw - 40px) !important;
+    left: 50% !important;
+    right: auto !important;
+  }
+  .rmm-modal.rmm-size-lg.rmm-position-center:not(.rmm-dragging):not(.rmm-custom-position) {
+    transform: translate(-50%, -50%) !important;
+  }
+  .rmm-modal.rmm-size-lg.rmm-position-center.rmm-active:not(.rmm-dragging):not(.rmm-custom-position) {
+    transform: translate(-50%, -50%) scale(1) !important;
+  }
+
+  /* XL: 769px ~ 1344px 범위에서도 min-width 적용 */
+  .rmm-modal.rmm-size-xl:not(.rmm-dragging):not(.rmm-custom-position) {
+    width: 70% !important;
+    min-width: min(1344px, calc(100vw - 40px)) !important;
+    max-width: calc(100vw - 40px) !important;
+    left: 50% !important;
+    right: auto !important;
+  }
+  .rmm-modal.rmm-size-xl.rmm-position-center:not(.rmm-dragging):not(.rmm-custom-position) {
+    transform: translate(-50%, -50%) !important;
+  }
+  .rmm-modal.rmm-size-xl.rmm-position-center.rmm-active:not(.rmm-dragging):not(.rmm-custom-position) {
+    transform: translate(-50%, -50%) scale(1) !important;
+  }
+}

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

@@ -394,10 +394,18 @@ export default class extends Controller {
     // Reset sidebar and submenu to first item before hiding
     this.resetSidebarAndSubmenu()
 
+    // 닫기 애니메이션 시작 (현재 위치에서 닫힘)
     modal.classList.remove('rmm-active')
     if (overlay) overlay.classList.remove('rmm-active')
 
     setTimeout(() => {
+      // 애니메이션 완료 후 드래그로 인한 커스텀 위치 클래스 및 인라인 스타일 제거
+      modal.classList.remove('rmm-custom-position')
+      modal.classList.remove('rmm-dragging')
+      modal.style.top = ''
+      modal.style.left = ''
+      modal.style.transform = ''
+
       // Reset openValue to false so modal can be reopened
       // Use a flag to prevent openValueChanged from triggering close again
       this._closingProgrammatically = true
@@ -464,17 +472,34 @@ export default class extends Controller {
 
     // For full size, explicitly set full screen styles
     if (config.size === 'full' || config.isMaximized) {
-      modal.style.width = '100%'
-      modal.style.height = '100%'
-      modal.style.minWidth = '100%'
-      modal.style.maxHeight = '100%'
-      modal.style.top = '0'
-      modal.style.left = '0'
-      modal.style.right = '0'
-      modal.style.bottom = '0'
-      modal.style.transform = 'none'
-      modal.style.borderRadius = '0'
-      modal.style.margin = '0'
+      // 최소화된 모달이 있는지 store에서 확인하여 taskbar 높이 계산
+      const minimizedGroups = modalStore.getMinimizedModalGroups()
+      const hasMinimizedModals = minimizedGroups.length > 0
+      // CSS 변수에서 taskbar 높이 가져오기 (기본값 48px)
+      const taskbarHeight = hasMinimizedModals
+        ? parseInt(getComputedStyle(document.documentElement).getPropertyValue('--rmm-taskbar-height') || '48', 10)
+        : 0
+
+      // CSS !important를 덮어쓰기 위해 setProperty 사용
+      modal.style.setProperty('width', '100%', 'important')
+      modal.style.setProperty('min-width', '100%', 'important')
+      modal.style.setProperty('top', '0', 'important')
+      modal.style.setProperty('left', '0', 'important')
+      modal.style.setProperty('right', '0', 'important')
+      modal.style.setProperty('transform', 'none', 'important')
+      modal.style.setProperty('border-radius', '0', 'important')
+      modal.style.setProperty('margin', '0', 'important')
+
+      if (taskbarHeight > 0) {
+        // taskbar가 있으면 그 위까지만 표시
+        modal.style.setProperty('height', `calc(100% - ${taskbarHeight}px)`, 'important')
+        modal.style.setProperty('max-height', `calc(100% - ${taskbarHeight}px)`, 'important')
+        modal.style.setProperty('bottom', `${taskbarHeight}px`, 'important')
+      } else {
+        modal.style.setProperty('height', '100%', 'important')
+        modal.style.setProperty('max-height', '100%', 'important')
+        modal.style.setProperty('bottom', '0', 'important')
+      }
     } else {
       // Reset full-size specific styles
       modal.style.borderRadius = ''
@@ -595,6 +620,7 @@ export default class extends Controller {
       historyStackManager.moveToTop('modal', this.effectiveModalId)
     }
     this.isDragging = true
+    this.element.classList.add('rmm-dragging')
 
     const clientX = e.type.includes('touch') ? e.touches[0].clientX : e.clientX
     const clientY = e.type.includes('touch') ? e.touches[0].clientY : e.clientY
@@ -637,6 +663,9 @@ export default class extends Controller {
 
   handleDragEnd() {
     this.isDragging = false
+    this.element.classList.remove('rmm-dragging')
+    // 드래그 후 위치 유지를 위해 custom-position 클래스 추가
+    this.element.classList.add('rmm-custom-position')
 
     this.element.style.transition = ''
 

data/lib/rails_modal_manager/version.rb

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

metadata

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