選択したinputテキストをコンテキストメニューヘッダーに表示する

jdkfx · Aug 2, 2024 · 9bdb2e5 · 9bdb2e5
1 parent ba201cc
commit 9bdb2e5
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 0 deletions.
diff --git a/src/components/Dialog/DictionaryManageDialog.vue b/src/components/Dialog/DictionaryManageDialog.vue
@@ -130,6 +130,7 @@
                   ref="surfaceContextMenu"
                   :header="surfaceContextMenuHeader"
                   :menudata="surfaceContextMenudata"
+                  @beforeShow="readyForSurfaceContextMenu"
                 />
               </QInput>
             </div>
@@ -152,6 +153,7 @@
                   ref="yomiContextMenu"
                   :header="yomiContextMenuHeader"
                   :menudata="yomiContextMenudata"
+                  @beforeShow="readyForYomiContextMenu"
                 />
               </QInput>
             </div>
@@ -684,12 +686,14 @@ const {
   contextMenu: surfaceContextMenu,
   contextMenuHeader: surfaceContextMenuHeader,
   contextMenudata: surfaceContextMenudata,
+  readyForContextMenu: readyForSurfaceContextMenu,
 } = useRightClickContextMenu(surfaceInput, surface, ref("surface"));
 
 const {
   contextMenu: yomiContextMenu,
   contextMenuHeader: yomiContextMenuHeader,
   contextMenudata: yomiContextMenudata,
+  readyForContextMenu: readyForYomiContextMenu,
 } = useRightClickContextMenu(yomiInput, yomi, ref("yomi"));
 </script>
 

diff --git a/src/composables/useRightClickContextMenu.ts b/src/composables/useRightClickContextMenu.ts
@@ -20,7 +20,42 @@ export function useRightClickContextMenu(
   const inputSelection = new SelectionHelperForQInput(qInputRef);
 
   const contextMenu = ref<InstanceType<typeof ContextMenu>>();
+
   const contextMenuHeader = ref<string | undefined>("");
+  const readyForContextMenu = () => {
+    const MAX_HEADER_LENGTH = 15;
+    const SHORTED_HEADER_FRAGMENT_LENGTH = 5;
+
+    const getMenuItemButton = (label: string) => {
+      const item = contextMenudata.value.find((item) => item.label === label);
+      if (item?.type !== "button")
+        throw new Error("コンテキストメニューアイテムの取得に失敗しました。");
+      return item;
+    };
+
+    const text = inputSelection.getAsString();
+    if (text.length === 0) {
+      getMenuItemButton("切り取り").disabled = true;
+      getMenuItemButton("コピー").disabled = true;
+    } else {
+      getMenuItemButton("切り取り").disabled = false;
+      getMenuItemButton("コピー").disabled = false;
+      if (text.length > MAX_HEADER_LENGTH) {
+        contextMenuHeader.value =
+          text.length <= MAX_HEADER_LENGTH
+            ? text
+            : `${text.substring(
+                0,
+                SHORTED_HEADER_FRAGMENT_LENGTH,
+              )} ... ${text.substring(
+                text.length - SHORTED_HEADER_FRAGMENT_LENGTH,
+              )}`;
+      } else {
+        contextMenuHeader.value = text;
+      }
+    }
+  };
+
   const contextMenudata = ref<
     [
       MenuItemButton,
@@ -117,5 +152,6 @@ export function useRightClickContextMenu(
     contextMenu,
     contextMenuHeader,
     contextMenudata,
+    readyForContextMenu,
   };
 }