rails_modal_manager 1.0.40 → 1.0.41

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 0df266d9e80cbe4f6999522dfc7d42dd07614651f4e85fca57cd43bd59bd1f56
-  data.tar.gz: fd760622af26da416a71bf8928ae5247db821de551111f6b60d54c9f9462b01b
+  metadata.gz: 5884364bb07444f45c08e4733c5623883a775592ba853a1275f5f2bd84bb5c03
+  data.tar.gz: 06a78be76359c81f55ec9e904488a1f3d961fdababf4bb8b31c24d0d19a8b7e1
 SHA512:
-  metadata.gz: b121a1d40ea4d3f3f368e4f3cf69de017f2afa3fc999c3bc03377a376d0011912d970966e34d6d5310e42d5c65c2dc8aeeb1c5b398bfb7b53da14d5459d48a15
-  data.tar.gz: 169d8b9067a9ea55f0749324e1a349a634f0741a42c776b30e9410478dc20e6d0f1be3f50d2f0c30a048a4a00a45ee2cc9db92f10e1759de3817294e2b2e2fde
+  metadata.gz: 985fca2add00de7fca1c9c5d05d66be9b8a6dbc208526de6811dad2c4b27977be9aa332dce1287d561d0fe04c3ec365768abbeeac89f582f07af8250aed843e2
+  data.tar.gz: ab10ad1ad3a86cd5a6ad64af536d015cbfeccc030523e03c980c74cb042cab25bd70bd936cd7247980097a18140d2c0969f18c9afb6c6df8fc66301c959c4232

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

@@ -11,7 +11,7 @@ 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
@@ -20,6 +20,17 @@ export default class extends Controller {
     if (modal) {
       modal.addEventListener('rmm-sidebar:toggled', this.handleSidebarToggled)
     }
+
+    // Title 더블클릭 이벤트 리스너 추가
+    this.setupTitleEdit()
+  }
+
+  setupTitleEdit() {
+    const titleEl = this.element.querySelector('.rmm-header-title')
+    if (titleEl) {
+      titleEl.addEventListener('dblclick', (e) => this.editTitle(e))
+      titleEl.style.cursor = 'default'
+    }
   }
 
   disconnect() {
@@ -173,4 +184,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.41"
 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.41
 platform: ruby
 authors:
 - reshacs