rails_modal_manager 1.0.46 → 1.0.48

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 7dec9a40ef3da3620d41315569b51f9b0a3ac6a291bdd81edf77ca6271858464
-  data.tar.gz: 719e56407709affe6b21f781ad92cc5496f3ed1c13de711b6f4cbc3769915910
+  metadata.gz: ee19f493f83594ff6e4ff8c8d6ed72ce1015290dfe73b90c7064b8fc589ec516
+  data.tar.gz: 3442fbef22b38eb2f2f8bcf7dacf7328d221de6c7dead4f9e6c10b3ff75cdda1
 SHA512:
-  metadata.gz: 41af209ea06bad87c813444fe5a4e7ba074d685709d9f1dbf916e5dfbd983120d2445de1436bec01ee7b9d3b675084887824010e7ffce4704df4b0c4d74b3757
-  data.tar.gz: 14ed339f8138e4e4586f4b13d4fd078e570752bd92f2e7367d2d8c3b128dde332c12f755e7343be703e8810bf5f5f73abe623fbb25ccc740452befa6fc3bca65
+  metadata.gz: 8d809ba871b2859b7eaa62eb0cb9dac68b634ba675d5e5966879846a0caea647db95205bef602ac90fecc944d4391e5dd9bf671d71c5aa3cb36c8dd28f6645b3
+  data.tar.gz: 54d1785b5431878ae0ed8c7aaa075543a89dc3caf0a0636978d883a10b07332b37025b1ea9ef2c8754332770c5662565b28de02b2cd93ea078c18ab00aba6724

data/app/assets/stylesheets/rails_modal_manager.css

@@ -7,6 +7,27 @@
    CSS Variables (Light Theme)
    ============================================ */
 :root {
+  /* OS/브라우저 자동 폼 색상 대응 (input, scrollbar 등) */
+  color-scheme: light dark;
+
+  /* v1.0.48 — Motion 토큰 (기존 --rmm-animation-duration/timing 과 병행) */
+  --rmm-dur-fast: 140ms;
+  --rmm-dur-base: 220ms;
+  --rmm-dur-slow: 360ms;
+  --rmm-ease-standard: cubic-bezier(0.2, 0, 0, 1);
+  --rmm-ease-emphasized: cubic-bezier(0.3, 0, 0, 1);
+  --rmm-ease-decel: cubic-bezier(0, 0, 0, 1);
+  --rmm-ease-in:  cubic-bezier(0.64, 0, 0.78, 0);
+  --rmm-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
+
+  /* v1.0.48 — 포커스 링 / 드래그 강조 섀도 */
+  --rmm-ring-color: rgba(59, 130, 246, 0.55);
+  --rmm-ring: 0 0 0 2px var(--rmm-modal-bg, #ffffff), 0 0 0 4px var(--rmm-ring-color);
+  --rmm-elev-drag:
+    0 4px 8px rgba(0, 0, 0, 0.08),
+    0 24px 48px -12px rgba(0, 0, 0, 0.22),
+    0 48px 96px -32px rgba(0, 0, 0, 0.30);
+
   /* Modal */
   --rmm-modal-bg: #ffffff;
   --rmm-modal-border: rgba(0, 0, 0, 0.1);
@@ -159,6 +180,13 @@
   --rmm-taskbar-bg: #0f172a;
   --rmm-taskbar-item-bg: rgba(255, 255, 255, 0.1);
   --rmm-taskbar-item-hover: rgba(255, 255, 255, 0.15);
+
+  /* v1.0.48 — 다크 테마 ring/elev */
+  --rmm-ring-color: rgba(99, 179, 237, 0.65);
+  --rmm-elev-drag:
+    0 4px 8px rgba(0, 0, 0, 0.25),
+    0 24px 48px -12px rgba(0, 0, 0, 0.55),
+    0 48px 96px -32px rgba(0, 0, 0, 0.70);
 }
 
 /* ============================================
@@ -214,6 +242,7 @@
               transform var(--rmm-animation-duration) var(--rmm-animation-timing);
   overflow: hidden;
   max-height: 90vh;
+  max-height: min(90vh, 90dvh); /* v1.0.48 — iOS 주소창 대응, 미지원 브라우저는 위 값 사용 */
 }
 
 .rmm-modal.rmm-active {
@@ -1736,3 +1765,198 @@
     transform: translate(-50%, -50%) scale(1) !important;
   }
 }
+
+/* ============================================
+   v1.0.48 — Modernization port (from rails-modal-manager2)
+   ============================================
+   외부 API/클래스명/옵션은 전혀 바꾸지 않음. 아래 규칙들은 기존 규칙 뒤에
+   추가되어 시각적 품질만 끌어올림. 문제 발생 시 이 블록만 제거하면 완전 원복.
+*/
+
+/* 포커스 링: 키보드 탐색 시에만 나타남 (마우스 클릭 시 노출 안 함) */
+.rmm-modal :focus-visible,
+.rmm-overlay :focus-visible,
+.rmm-taskbar :focus-visible {
+  outline: none;
+  box-shadow: var(--rmm-ring);
+  border-radius: 6px;
+}
+
+/* 드래그 중 "들림" 효과 — JS가 이미 .rmm-dragging 클래스를 세팅함 */
+.rmm-modal.rmm-dragging {
+  box-shadow: var(--rmm-elev-drag);
+  transition: box-shadow var(--rmm-dur-fast) var(--rmm-ease-standard);
+}
+
+/* Depth 4, 5 자동 확장 — 기존 0~3 팔레트를 바탕으로 더 어둡게 섞어 생성
+   (color-mix 미지원 구형 브라우저는 depth-3 값으로 폴백) */
+@supports (color: color-mix(in srgb, red, blue)) {
+  :root {
+    --rmm-header-bg-depth-4: color-mix(in srgb, var(--rmm-header-bg-depth-3) 80%, #000 20%);
+    --rmm-header-text-depth-4: var(--rmm-header-text-depth-3);
+    --rmm-header-bg-depth-5: color-mix(in srgb, var(--rmm-header-bg-depth-3) 60%, #000 40%);
+    --rmm-header-text-depth-5: var(--rmm-header-text-depth-3);
+  }
+  .dark {
+    --rmm-header-bg-depth-4: color-mix(in srgb, var(--rmm-header-bg-depth-3) 80%, #000 20%);
+    --rmm-header-bg-depth-5: color-mix(in srgb, var(--rmm-header-bg-depth-3) 60%, #000 40%);
+  }
+}
+
+/* prefers-reduced-motion: 사용자가 OS 설정으로 모션 축소를 요청한 경우
+   모든 트랜지션/애니메이션을 거의 즉시 끝내 접근성 향상 */
+@media (prefers-reduced-motion: reduce) {
+  .rmm-overlay,
+  .rmm-modal,
+  .rmm-modal *,
+  .rmm-taskbar,
+  .rmm-sidebar,
+  .rmm-submenu,
+  .rmm-content-loader {
+    transition-duration: 0.01ms !important;
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+  }
+}
+
+/* ============================================
+   v1.0.48 — 애니메이션 고도화 (v2 이식)
+   ============================================
+   v1 의 기존 트랜지션 규칙 자체는 남아 있고, 여기서 **뒤에 오는 규칙으로**
+   duration/easing 만 재정의. 비대칭 이징 적용:
+     · 닫힘(기본 상태) : fast(140ms) + ease-in  → 빠르고 깔끔하게 사라짐
+     · 열림(.rmm-active): base(220ms) + ease-emphasized → 부드럽게 나타남
+     · 최소화            : slow(360ms) + ease-emphasized → taskbar 로 천천히 흡수
+   CSS cascade 순서 덕분에 별도 position 분기 오버라이드 없이도 적용됨.
+*/
+/* Overlay: 열림도 닫힘도 base(220ms) + ease-out — v2 방식.
+   **의도적으로 modal(fast exit) 보다 느리게** 사라지게 해서 배경 잔상이
+   남아 "잔향" 느낌. 또 기본 blur 를 8px + saturate 로 상향해 배경과의
+   대비를 강화 (v2 overlay 와 동급). */
+.rmm-overlay {
+  backdrop-filter: blur(8px) saturate(1.1);
+  -webkit-backdrop-filter: blur(8px) saturate(1.1);
+  transition: opacity    var(--rmm-dur-base) var(--rmm-ease-out),
+              visibility var(--rmm-dur-base) var(--rmm-ease-out);
+}
+/* 기존 .rmm-overlay-blur 는 더 강하게 — 중첩 모달 분리감 */
+.rmm-overlay.rmm-overlay-blur {
+  backdrop-filter: blur(16px) saturate(1.2);
+  -webkit-backdrop-filter: blur(16px) saturate(1.2);
+}
+
+/* ⚠️ 중요: CSS Transforms L2 스펙상 개별 `scale`/`translate` 는 `transform`
+   함수보다 **나중에 적용**됨. position-center 는 transform: translate(-50%,-50%)
+   로 중앙 정렬하는데, 이 상태에서 scale 개별 프로퍼티를 더하면 -50% 계산이
+   원본 박스 기준으로 유지되어 **열림/닫힘 시 우하단으로 쏠리는 현상** 발생.
+   → scale/translate 개별 프로퍼티를 쓰지 않고, 각 position 의 transform 체인
+     **내부**에 scale()/translateY() 를 포함시켜 중심점 일치 보장.
+     아래는 position 별 오버라이드. */
+.rmm-modal {
+  transform-origin: 50% 50%;
+  will-change: transform, opacity;
+  transition: opacity    var(--rmm-dur-fast) var(--rmm-ease-in),
+              visibility var(--rmm-dur-fast) var(--rmm-ease-in),
+              transform  var(--rmm-dur-fast) var(--rmm-ease-in),
+              box-shadow var(--rmm-dur-base) var(--rmm-ease-out);
+}
+.rmm-modal.rmm-active {
+  transition-duration: var(--rmm-dur-base);
+  transition-timing-function: var(--rmm-ease-emphasized);
+}
+
+/* Position-aware transform — scale/translateY 를 transform 체인 **내부**에
+   포함시켜 중심점 쏠림 방지. :not() 필터로 드래그/커스텀위치 상태 제외. */
+.rmm-modal.rmm-position-center:not(.rmm-dragging):not(.rmm-custom-position):not(.rmm-minimized) {
+  transform: translate(-50%, -50%) scale(0.94) translateY(14px);
+}
+.rmm-modal.rmm-position-center.rmm-active:not(.rmm-dragging):not(.rmm-custom-position):not(.rmm-minimized) {
+  transform: translate(-50%, -50%) scale(1) translateY(0);
+}
+
+.rmm-modal.rmm-position-top:not(.rmm-dragging):not(.rmm-custom-position):not(.rmm-minimized) {
+  transform: translateX(-50%) scale(0.94) translateY(-14px);
+}
+.rmm-modal.rmm-position-top.rmm-active:not(.rmm-dragging):not(.rmm-custom-position):not(.rmm-minimized) {
+  transform: translateX(-50%) scale(1) translateY(0);
+}
+
+.rmm-modal.rmm-position-bottom:not(.rmm-dragging):not(.rmm-custom-position):not(.rmm-minimized) {
+  transform: translateX(-50%) scale(0.94) translateY(14px);
+}
+.rmm-modal.rmm-position-bottom.rmm-active:not(.rmm-dragging):not(.rmm-custom-position):not(.rmm-minimized) {
+  transform: translateX(-50%) scale(1) translateY(0);
+}
+
+.rmm-modal.rmm-position-top-left:not(.rmm-dragging):not(.rmm-custom-position):not(.rmm-minimized),
+.rmm-modal.rmm-position-top-right:not(.rmm-dragging):not(.rmm-custom-position):not(.rmm-minimized),
+.rmm-modal.rmm-position-bottom-left:not(.rmm-dragging):not(.rmm-custom-position):not(.rmm-minimized),
+.rmm-modal.rmm-position-bottom-right:not(.rmm-dragging):not(.rmm-custom-position):not(.rmm-minimized) {
+  transform: scale(0.94) translateY(14px);
+}
+.rmm-modal.rmm-position-top-left.rmm-active:not(.rmm-dragging):not(.rmm-custom-position):not(.rmm-minimized),
+.rmm-modal.rmm-position-top-right.rmm-active:not(.rmm-dragging):not(.rmm-custom-position):not(.rmm-minimized),
+.rmm-modal.rmm-position-bottom-left.rmm-active:not(.rmm-dragging):not(.rmm-custom-position):not(.rmm-minimized),
+.rmm-modal.rmm-position-bottom-right.rmm-active:not(.rmm-dragging):not(.rmm-custom-position):not(.rmm-minimized) {
+  transform: scale(1) translateY(0);
+}
+
+/* PC size fixes (@media min-width: 769px) 가 position-center 에 !important 로
+   transform 을 덮어써 있음 → 같은 specificity + !important 로 재오버라이드 */
+@media (min-width: 769px) {
+  .rmm-modal.rmm-size-md.rmm-position-center:not(.rmm-dragging):not(.rmm-custom-position):not(.rmm-minimized),
+  .rmm-modal.rmm-size-lg.rmm-position-center:not(.rmm-dragging):not(.rmm-custom-position):not(.rmm-minimized),
+  .rmm-modal.rmm-size-xl.rmm-position-center:not(.rmm-dragging):not(.rmm-custom-position):not(.rmm-minimized) {
+    transform: translate(-50%, -50%) scale(0.94) translateY(14px) !important;
+  }
+  .rmm-modal.rmm-size-md.rmm-position-center.rmm-active:not(.rmm-dragging):not(.rmm-custom-position):not(.rmm-minimized),
+  .rmm-modal.rmm-size-lg.rmm-position-center.rmm-active:not(.rmm-dragging):not(.rmm-custom-position):not(.rmm-minimized),
+  .rmm-modal.rmm-size-xl.rmm-position-center.rmm-active:not(.rmm-dragging):not(.rmm-custom-position):not(.rmm-minimized) {
+    transform: translate(-50%, -50%) scale(1) translateY(0) !important;
+  }
+}
+
+/* 모바일(≤768px)도 기존 CSS 가 position-center 에 !important 걸고 있음 */
+@media (max-width: 768px) {
+  .rmm-modal.rmm-position-center:not(.rmm-dragging):not(.rmm-custom-position):not(.rmm-minimized) {
+    transform: translate(-50%, -50%) scale(0.94) translateY(14px) !important;
+  }
+  .rmm-modal.rmm-position-center.rmm-active:not(.rmm-dragging):not(.rmm-custom-position):not(.rmm-minimized) {
+    transform: translate(-50%, -50%) scale(1) translateY(0) !important;
+  }
+}
+
+/* 최소화: 기존 transform: scale(0.2) !important 그대로 사용. 이번엔 개별
+   scale/translate 프로퍼티를 안 쓰므로 따로 초기화할 것 없음. transition 만 재정의. */
+.rmm-modal.rmm-minimized {
+  transition: opacity    var(--rmm-dur-slow) var(--rmm-ease-emphasized),
+              visibility var(--rmm-dur-slow) var(--rmm-ease-emphasized),
+              transform  var(--rmm-dur-slow) var(--rmm-ease-emphasized) !important;
+}
+.rmm-overlay.rmm-minimized {
+  transition: opacity    var(--rmm-dur-slow) var(--rmm-ease-emphasized),
+              visibility var(--rmm-dur-slow) var(--rmm-ease-emphasized) !important;
+}
+
+/* ============================================
+   v1.0.48 — 모바일(≤768px) 헤더 컨트롤 정리
+   ============================================
+   터치 환경에서는 최소화 / 크기조절(최대화) / 기본크기 복원 버튼이 조작 실수를
+   유발하고 공간만 차지하므로 **resizable/minimizable 옵션과 무관하게** 숨김.
+   사이드바 토글, 커스텀 헤더 버튼, 닫기 버튼은 그대로 유지.
+   기존 line 1627 의 `.rmm-default-size-btn { display: none }` 규칙과 같은
+   breakpoint(768px)를 사용해 일관성 확보 + !important 로 확실히 덮어씀.
+*/
+@media (max-width: 768px) {
+  .rmm-header .rmm-minimize-btn,
+  .rmm-header .rmm-maximize-btn,
+  .rmm-header .rmm-default-size-btn {
+    display: none !important;
+  }
+  /* 구버전 ERB 폴백: 클래스 없는 최소화 버튼이 렌더되는 경우 */
+  .rmm-header .rmm-header-btn[data-action*="#minimize"],
+  .rmm-header .rmm-header-btn[data-action*="#maximize"],
+  .rmm-header .rmm-header-btn[data-action*="#restoreDefaultSize"] {
+    display: none !important;
+  }
+}

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

@@ -412,6 +412,9 @@ export default class extends Controller {
     const modal = this.element
     const overlay = this.getOverlay()
 
+    // 모달 내부 미디어(video, audio) 정지
+    this.stopMedia()
+
     // Reset sidebar and submenu to first item before hiding
     this.resetSidebarAndSubmenu()
 
@@ -497,6 +500,18 @@ export default class extends Controller {
     })
   }
 
+  /**
+   * Stop all media (video, audio) playing inside the modal
+   */
+  stopMedia() {
+    const mediaElements = this.element.querySelectorAll('video, audio')
+    mediaElements.forEach(media => {
+      if (!media.paused) {
+        media.pause()
+      }
+    })
+  }
+
   // ============================================
   // Styles
   // ============================================

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

@@ -117,7 +117,7 @@
 
     <% if minimizable %>
       <button type="button"
-              class="rmm-header-btn"
+              class="rmm-header-btn rmm-minimize-btn"
               data-action="click->rmm-header#minimize"
               title="최소화">
         <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">

data/lib/rails_modal_manager/version.rb

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

metadata

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