diff --git a/web/js/main.js b/web/js/main.js index c78c683..07bcdd4 100644 --- a/web/js/main.js +++ b/web/js/main.js @@ -166,6 +166,18 @@ app.registerExtension({ }, // --- Related Tags Settings --- + { + id: id + ".related_tags_trigger_mode", + name: "Related Tags Trigger Mode", + description: "Trigger mode for related tags (click or ctrl+click)", + type: "combo", + options: ["click", "ctrl+Click"], + defaultValue: "click", + category: [name, "Related Tags", "Trigger Mode"], + onChange: (newVal, oldVal) => { + settingValues.relatedTagsTriggerMode = newVal; + } + }, { id: id + ".related_tags_position", name: "Default Display Position", diff --git a/web/js/related-tags.js b/web/js/related-tags.js index bd03b2e..53e66e5 100644 --- a/web/js/related-tags.js +++ b/web/js/related-tags.js @@ -288,48 +288,48 @@ class RelatedTagsUI { // Create header row this.header = document.createElement('div'); this.header.id = 'related-tags-header'; - + // Create header text div for the left side this.headerText = document.createElement('div'); this.headerText.className = 'related-tags-header-text'; this.headerText.textContent = 'Related Tags'; this.header.appendChild(this.headerText); - + // Create header controls for the right side this.headerControls = document.createElement('div'); this.headerControls.className = 'related-tags-header-controls'; - + // Create layout toggle button this.toggleLayoutBtn = document.createElement('button'); this.toggleLayoutBtn.className = 'related-tags-layout-toggle'; this.toggleLayoutBtn.title = 'Toggle between vertical and horizontal layout'; - this.toggleLayoutBtn.innerHTML = settingValues.relatedTagsDisplayPosition === 'vertical' + this.toggleLayoutBtn.innerHTML = settingValues.relatedTagsDisplayPosition === 'vertical' ? '↔️' // Click to change display horizontally : '↕️'; // Click to change display vertically - + // Add click handler for layout toggle this.toggleLayoutBtn.addEventListener('click', (e) => { // Toggle the layout setting - settingValues.relatedTagsDisplayPosition = + settingValues.relatedTagsDisplayPosition = settingValues.relatedTagsDisplayPosition === 'vertical' ? 'horizontal' : 'vertical'; - + // Update the button icon - this.toggleLayoutBtn.innerHTML = settingValues.relatedTagsDisplayPosition === 'vertical' + this.toggleLayoutBtn.innerHTML = settingValues.relatedTagsDisplayPosition === 'vertical' ? '↔️' // Click to change display horizontally : '↕️'; // Click to change display vertically - + // Update the panel position this.#updatePosition(); this.root.style.display = 'block'; - + // Prevent default behavior e.preventDefault(); e.stopPropagation(); }); - + this.headerControls.appendChild(this.toggleLayoutBtn); this.header.appendChild(this.headerControls); - + this.root.appendChild(this.header); // Create a tbody for the tags @@ -388,7 +388,7 @@ class RelatedTagsUI { this.target = textareaElement; this.relatedTags = searchRelatedTags(this.currentTag); - if(this.selectedIndex == -1) { + if (this.selectedIndex == -1) { this.selectedIndex = 0; // Reset selection to the first item } @@ -680,7 +680,7 @@ class RelatedTagsUI { return area; } - + /** * Extracts existing tags from the textarea. * @returns {Set} Set of existing tags in the textarea @@ -814,6 +814,11 @@ export class RelatedTagsEventHandler { * @returns */ handleClick(event) { + // Check trigger mode from settings + if (settingValues.relatedTagsTriggerMode === 'ctrl+Click' && !event.ctrlKey) { + return; // Only respond to Ctrl+Click when in ctrlClick mode + } + const textareaElement = event.target; this.relatedTagsUI.updateDisplay(textareaElement); } diff --git a/web/js/settings.js b/web/js/settings.js index 03c8875..2629dc0 100644 --- a/web/js/settings.js +++ b/web/js/settings.js @@ -7,6 +7,8 @@ export const settingValues = { enableRelatedTags: true, maxRelatedTags: 20, relatedTagsDisplayPosition: 'horizontal', // 'horizontal' or 'vertical' + relatedTagsTriggerMode: 'click', // Options: 'click', 'ctrl+Click' + // Internal logic settings _useFallbackAttachmentForEventListener: false, // Fallback to attach event listener if not using jQuery