rails_modal_manager 1.0.40 → 1.0.42

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 0df266d9e80cbe4f6999522dfc7d42dd07614651f4e85fca57cd43bd59bd1f56
-  data.tar.gz: fd760622af26da416a71bf8928ae5247db821de551111f6b60d54c9f9462b01b
+  metadata.gz: ba14e569689588bb910cd5c3f2a8c7e192fa259152a6f189eb77e0e3931f9769
+  data.tar.gz: d6cf8d712324c8453db93c8ade54bdcd0fcc3d77e92a9ff614d8e929d1712262
 SHA512:
-  metadata.gz: b121a1d40ea4d3f3f368e4f3cf69de017f2afa3fc999c3bc03377a376d0011912d970966e34d6d5310e42d5c65c2dc8aeeb1c5b398bfb7b53da14d5459d48a15
-  data.tar.gz: 169d8b9067a9ea55f0749324e1a349a634f0741a42c776b30e9410478dc20e6d0f1be3f50d2f0c30a048a4a00a45ee2cc9db92f10e1759de3817294e2b2e2fde
+  metadata.gz: '0309e4dd66960b7e7b20944d93c348987fc2a7ab7d291e67856a4d079e259967283ef8b0be502fadf627513109fc79c9eb6bdedf164727c7595636cf8179667c'
+  data.tar.gz: 0dbc3f5ef3257b8cd99e518ca6423f6efdb7623a8b11955bfb8ef2531e08134a3a61e43d070d47a205b9a0a8de15bba06dbea0750f92a0f90b473a0a8fef468e

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

@@ -11,14 +11,31 @@ export default class extends Controller {
     defaultSize: { type: String, default: "md" },
   }
 
-  static targets = ["maximizeBtn", "sidebarToggle"]
+  static targets = ["maximizeBtn", "sidebarToggle", "title"]
 
   connect() {
     // Listen for sidebar toggled event to update icon
     this.handleSidebarToggled = this.handleSidebarToggled.bind(this)
+    this.handleModalClosed = this.handleModalClosed.bind(this)
+
     const modal = this.element.closest('.rmm-modal')
     if (modal) {
       modal.addEventListener('rmm-sidebar:toggled', this.handleSidebarToggled)
+      modal.addEventListener('rmm:closed', this.handleModalClosed)
+    }
+
+    // Title 더블클릭 이벤트 리스너 추가 및 원래 title 저장
+    this.setupTitleEdit()
+  }
+
+  setupTitleEdit() {
+    const titleEl = this.element.querySelector('.rmm-header-title')
+    if (titleEl) {
+      // 원래 title 저장 (모달 닫힐 때 복원용)
+      this.originalTitle = titleEl.textContent.trim()
+
+      titleEl.addEventListener('dblclick', (e) => this.editTitle(e))
+      titleEl.style.cursor = 'default'
     }
   }
 
@@ -26,6 +43,21 @@ export default class extends Controller {
     const modal = this.element.closest('.rmm-modal')
     if (modal) {
       modal.removeEventListener('rmm-sidebar:toggled', this.handleSidebarToggled)
+      modal.removeEventListener('rmm:closed', this.handleModalClosed)
+    }
+  }
+
+  // 모달 닫힐 때 title을 원래 값으로 복원
+  handleModalClosed() {
+    this.resetTitle()
+  }
+
+  resetTitle() {
+    if (!this.originalTitle) return
+
+    const titleEl = this.element.querySelector('.rmm-header-title')
+    if (titleEl) {
+      titleEl.textContent = this.originalTitle
     }
   }
 
@@ -173,4 +205,92 @@ export default class extends Controller {
       if (hiddenIcon) hiddenIcon.style.display = 'none'
     }
   }
+
+  // ============================================
+  // Title Edit (Double-click to edit)
+  // ============================================
+
+  editTitle(e) {
+    e.stopPropagation()
+    e.preventDefault()
+
+    const titleEl = e.currentTarget
+    if (!titleEl) return
+
+    // 이미 수정 중인 경우 무시
+    if (titleEl.querySelector('input')) return
+
+    const currentTitle = titleEl.textContent.trim()
+
+    // input 생성
+    const input = document.createElement('input')
+    input.type = 'text'
+    input.value = currentTitle
+    input.className = 'rmm-header-title-input'
+    input.style.cssText = `
+      width: 100%;
+      min-width: 100px;
+      max-width: 300px;
+      padding: 2px 6px;
+      border: 1px solid rgba(255,255,255,0.5);
+      border-radius: 4px;
+      font-size: inherit;
+      font-weight: inherit;
+      font-family: inherit;
+      background: rgba(0,0,0,0.2);
+      color: inherit;
+      outline: none;
+    `
+
+    // title 내용을 input으로 교체
+    titleEl.textContent = ''
+    titleEl.appendChild(input)
+    input.focus()
+    input.select()
+
+    // 저장 함수
+    const saveTitle = () => {
+      const newTitle = input.value.trim()
+      const finalTitle = newTitle || currentTitle
+
+      // title 업데이트
+      titleEl.textContent = finalTitle
+
+      // modalStore의 title도 업데이트
+      if (newTitle && newTitle !== currentTitle) {
+        this.updateModalTitle(finalTitle)
+      }
+    }
+
+    // blur 시 저장
+    input.addEventListener('blur', saveTitle, { once: true })
+
+    // Enter 시 저장, Escape 시 취소
+    input.addEventListener('keydown', (ke) => {
+      if (ke.key === 'Enter') {
+        ke.preventDefault()
+        input.blur()
+      } else if (ke.key === 'Escape') {
+        ke.preventDefault()
+        input.removeEventListener('blur', saveTitle)
+        titleEl.textContent = currentTitle
+      }
+    })
+  }
+
+  updateModalTitle(newTitle) {
+    const modal = this.getModalElement()
+    if (!modal) return
+
+    const modalId = modal.id || this.modalIdValue
+    if (!modalId) return
+
+    // modalStore에서 title 업데이트
+    import("rails_modal_manager/modal_store").then(module => {
+      const modalStore = module.default
+      if (modalStore && modalStore.updateModal) {
+        modalStore.updateModal(modalId, { title: newTitle })
+      }
+    })
+  }
 }

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

@@ -69,9 +69,21 @@ export default class extends Controller {
       const closeAllBtn = groups.length >= 2 ? this.renderCloseAllButton() : ''
       const items = groups.map((group, index) => this.renderTaskbarItem(group, index)).join('')
       this.itemsTarget.innerHTML = closeAllBtn + items
+
+      // 복구된 상태의 아이템에 더블클릭 이벤트 직접 추가
+      this.attachTitleEditListeners()
     }
   }
 
+  attachTitleEditListeners() {
+    const disabledItems = this.element.querySelectorAll('.rmm-taskbar-item-disabled')
+    disabledItems.forEach(item => {
+      // 기존 리스너 제거를 위해 새 함수 참조 저장
+      item._dblclickHandler = (e) => this.editTitle(e, item)
+      item.addEventListener('dblclick', item._dblclickHandler)
+    })
+  }
+
   renderCloseAllButton() {
     return `
       <button type="button" class="rmm-taskbar-close-all" data-action="click->rmm-taskbar#closeAll" title="최소화된 모달 모두 닫기">
@@ -89,6 +101,7 @@ export default class extends Controller {
     const disabledClass = isRestored ? ' rmm-taskbar-item-disabled' : ''
 
     // 드래그 이벤트 + 클릭 이벤트 (복구된 상태가 아닐 때만 클릭 이벤트 추가)
+    // 복구된 상태에서는 더블클릭으로 title 수정 가능 (attachTitleEditListeners에서 처리)
     const dragEvents = 'dragstart->rmm-taskbar#dragStart dragend->rmm-taskbar#dragEnd dragover->rmm-taskbar#dragOver drop->rmm-taskbar#drop dragenter->rmm-taskbar#dragEnter dragleave->rmm-taskbar#dragLeave'
     const clickEvent = isRestored ? '' : ' click->rmm-taskbar#restoreItem'
     const dataAction = `data-action="${dragEvents}${clickEvent}"`
@@ -270,6 +283,79 @@ export default class extends Controller {
     }
   }
 
+  // ============================================
+  // Title Edit (Double-click on disabled/restored item)
+  // ============================================
+
+  editTitle(e, itemElement = null) {
+    e.stopPropagation()
+    e.preventDefault()
+
+    const item = itemElement || e.currentTarget
+    const titleSpan = item.querySelector('.rmm-taskbar-item-title')
+    const rootModalId = item.dataset.rootId
+
+    if (!titleSpan || !rootModalId) return
+
+    // 이미 수정 중인 경우 무시
+    if (titleSpan.querySelector('input')) return
+
+    const currentTitle = titleSpan.textContent
+    const originalWidth = titleSpan.offsetWidth
+
+    // input 생성
+    const input = document.createElement('input')
+    input.type = 'text'
+    input.value = currentTitle
+    input.className = 'rmm-taskbar-title-input'
+    input.style.cssText = `
+      width: ${Math.max(originalWidth, 80)}px;
+      min-width: 80px;
+      max-width: 200px;
+      padding: 2px 4px;
+      border: 1px solid #60a5fa;
+      border-radius: 3px;
+      font-size: inherit;
+      font-family: inherit;
+      background: #1e293b;
+      color: #f1f5f9;
+      outline: none;
+    `
+
+    // title 내용을 input으로 교체
+    titleSpan.textContent = ''
+    titleSpan.appendChild(input)
+    input.focus()
+    input.select()
+
+    // 저장 함수
+    const saveTitle = () => {
+      const newTitle = input.value.trim()
+      if (newTitle && newTitle !== currentTitle) {
+        // taskbar title만 업데이트 (모달 title은 유지)
+        modalStore.updateTaskbarTitle(rootModalId, newTitle)
+      }
+      // input을 text로 다시 변경
+      titleSpan.textContent = newTitle || currentTitle
+    }
+
+    // blur 시 저장
+    input.addEventListener('blur', saveTitle, { once: true })
+
+    // Enter 시 저장, Escape 시 취소
+    input.addEventListener('keydown', (ke) => {
+      if (ke.key === 'Enter') {
+        ke.preventDefault()
+        input.blur()
+      } else if (ke.key === 'Escape') {
+        ke.preventDefault()
+        // blur 이벤트 제거하고 원래 title로 복원
+        input.removeEventListener('blur', saveTitle)
+        titleSpan.textContent = currentTitle
+      }
+    })
+  }
+
   escapeHtml(text) {
     const div = document.createElement('div')
     div.textContent = text

data/app/javascript/rails_modal_manager/modal_store.js

@@ -141,6 +141,19 @@ class ModalStore {
     this.notify();
   }
 
+  /**
+   * Update taskbar-only title for a modal group
+   * This does NOT change the actual modal title, only the taskbar display
+   * @param {string} rootModalId - Root modal ID of the group
+   * @param {string} newTitle - New title to display in taskbar
+   */
+  updateTaskbarTitle(rootModalId, newTitle) {
+    if (!this.activeModals[rootModalId]) return;
+
+    this.activeModals[rootModalId].taskbarTitle = newTitle;
+    this.notify();
+  }
+
   bringToFront(modalId) {
     if (!this.activeModals[modalId]) return;
     if (this.modalOrder[this.modalOrder.length - 1] === modalId) return;
@@ -626,10 +639,13 @@ class ModalStore {
       const leafConfig = this.activeModals[leafModalId];
       const rootConfig = this.activeModals[rootId];
 
+      // taskbarTitle이 있으면 우선 사용 (모달 title과 별도로 관리)
+      const displayTitle = rootConfig?.taskbarTitle || leafConfig?.title || leafModalId;
+
       return {
         rootModalId: rootId,
         leafModalId,
-        title: leafConfig?.title || leafModalId,
+        title: displayTitle,
         groupSize: allModalIds.length,
         zIndex: leafConfig?.zIndex || 0,
         modalIds: allModalIds,

data/lib/rails_modal_manager/version.rb

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

metadata

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