tag adding feature for images

1 files changed, 446 insertions, 0 deletions

diff --git a/static/scripts/tagEditor.js b/static/scripts/tagEditor.js
new file mode 100644
index 0000000..95ba3ec
--- /dev/null
+++ b/static/scripts/tagEditor.js
@@ -0,0 +1,446 @@
+class TagEditor {
+    constructor() {
+        this.debounceTimer = null;
+        this.selectedSuggestionIndex = -1;
+        this.currentInput = null;
+        this.init();
+    }
+
+    init() {
+        document.addEventListener('DOMContentLoaded', () => {
+            this.bindEvents();
+        });
+    }
+
+    bindEvents() {
+        const tagInputs = document.querySelectorAll('.tag-input');
+        const tagRemoveBtns = document.querySelectorAll('.tag-remove-btn');
+
+        tagInputs.forEach(input => {
+            input.addEventListener('input', (e) => this.handleInput(e));
+            input.addEventListener('keydown', (e) => this.handleKeydown(e));
+            input.addEventListener('blur', (e) => this.handleBlur(e));
+            input.addEventListener('focus', (e) => this.handleFocus(e));
+        });
+
+        tagRemoveBtns.forEach(btn => {
+            btn.addEventListener('click', (e) => this.removeTag(e));
+        });
+
+        // Close suggestions when clicking outside
+        document.addEventListener('click', (e) => {
+            if (!e.target.closest('.tag-input-wrapper')) {
+                this.hideSuggestions();
+            }
+        });
+    }
+
+    handleInput(e) {
+        const input = e.target;
+        const query = input.value.trim();
+        const tagType = input.dataset.type;
+
+        clearTimeout(this.debounceTimer);
+
+        if (query.length < 2) {
+            this.hideSuggestions();
+            return;
+        }
+
+        input.classList.add('loading');
+
+        this.debounceTimer = setTimeout(() => {
+            this.searchTags(query, tagType, input);
+        }, 300);
+    }
+
+    handleKeydown(e) {
+        const suggestionsContainer = this.getSuggestionsContainer(e.target);
+        const suggestions = suggestionsContainer.querySelectorAll('.tag-suggestion');
+
+        switch (e.key) {
+            case 'ArrowDown':
+                e.preventDefault();
+                this.selectedSuggestionIndex = Math.min(this.selectedSuggestionIndex + 1, suggestions.length - 1);
+                this.updateSuggestionSelection(suggestions);
+                break;
+
+            case 'ArrowUp':
+                e.preventDefault();
+                this.selectedSuggestionIndex = Math.max(this.selectedSuggestionIndex - 1, -1);
+                this.updateSuggestionSelection(suggestions);
+                break;
+
+            case 'Enter':
+                e.preventDefault();
+                if (this.selectedSuggestionIndex >= 0 && suggestions[this.selectedSuggestionIndex]) {
+                    this.selectSuggestion(suggestions[this.selectedSuggestionIndex]);
+                } else {
+                    this.addTagFromInput(e.target);
+                }
+                break;
+
+            case 'Escape':
+                this.hideSuggestions();
+                e.target.blur();
+                break;
+        }
+    }
+
+    handleBlur(e) {
+        // Delay hiding suggestions to allow for clicks
+        setTimeout(() => {
+            this.hideSuggestions();
+        }, 200);
+    }
+
+    handleFocus(e) {
+        this.currentInput = e.target;
+        const query = e.target.value.trim();
+        if (query.length >= 2) {
+            this.searchTags(query, e.target.dataset.type, e.target);
+        }
+    }
+
+    async searchTags(query, tagType, input) {
+        try {
+            const postId = this.getPostIdFromUrl();
+            const response = await fetch(`/tags/search_for_image.json?q=${encodeURIComponent(query)}&type=${tagType}&image_id=${postId}`);
+            const data = await response.json();
+
+            input.classList.remove('loading');
+            this.showSuggestions(data, input, query);
+        } catch (error) {
+            console.error('Search failed:', error);
+            input.classList.remove('loading');
+            this.hideSuggestions();
+        }
+    }
+
+    showSuggestions(data, input, query) {
+        const suggestionsContainer = this.getSuggestionsContainer(input);
+        const { tags, can_create } = data;
+        const expectedTagType = input.dataset.type;
+
+        let html = '';
+
+        // Existing tags - only show tags that match the expected type
+        tags.forEach(tag => {
+            if (tag.type === expectedTagType) {
+                html += `
+                    <div class="tag-suggestion" data-tag-id="${tag.ID}" data-tag-name="${tag.name}" data-tag-type="${tag.type}">
+                        <span class="tag-suggestion-name" style="color: ${this.getTagTypeColor(tag.type)};">${tag.name}</span>
+                        <span class="tag-suggestion-count">(${tag.count})</span>
+                    </div>
+                `;
+            }
+        });
+
+        // Create new tag option - only show if no exact match found and user can create tags
+        const exactMatch = tags.some(tag => tag.name.toLowerCase() === query.toLowerCase() && tag.type === expectedTagType);
+        const hasMatchingTypeTags = tags.some(tag => tag.type === expectedTagType);
+
+        if (can_create && !exactMatch && !hasMatchingTypeTags) {
+            html += `
+                <div class="tag-suggestion tag-suggestion-create" data-create="true" data-tag-name="${query}" data-tag-type="${expectedTagType}">
+                    <span class="tag-suggestion-name">Create "${query}" as ${expectedTagType}</span>
+                    <span class="tag-suggestion-count">New tag</span>
+                </div>
+            `;
+        }
+
+        suggestionsContainer.innerHTML = html;
+
+        if (html) {
+            suggestionsContainer.classList.add('show');
+            this.bindSuggestionEvents(suggestionsContainer);
+            this.selectedSuggestionIndex = -1;
+        } else {
+            suggestionsContainer.classList.remove('show');
+        }
+    }
+
+    bindSuggestionEvents(container) {
+        const suggestions = container.querySelectorAll('.tag-suggestion');
+        suggestions.forEach((suggestion, index) => {
+            suggestion.addEventListener('click', () => this.selectSuggestion(suggestion));
+            suggestion.addEventListener('mouseenter', () => {
+                this.selectedSuggestionIndex = index;
+                this.updateSuggestionSelection(suggestions);
+            });
+        });
+    }
+
+    updateSuggestionSelection(suggestions) {
+        suggestions.forEach((suggestion, index) => {
+            if (index === this.selectedSuggestionIndex) {
+                suggestion.classList.add('selected');
+            } else {
+                suggestion.classList.remove('selected');
+            }
+        });
+    }
+
+    async selectSuggestion(suggestion) {
+        const tagName = suggestion.dataset.tagName;
+        const tagType = suggestion.dataset.tagType;
+        const isCreate = suggestion.dataset.create === 'true';
+
+        try {
+            await this.addTag(tagName, tagType);
+            this.hideSuggestions();
+
+            if (this.currentInput) {
+                this.currentInput.value = '';
+            }
+        } catch (error) {
+            console.error('Failed to add tag:', error);
+            let errorMessage = error.message;
+
+            // Handle specific cross-category errors
+            if (errorMessage.includes('already exists as') || errorMessage.includes('previously existed as')) {
+                errorMessage = `Tag "${tagName}" ${errorMessage}`;
+            }
+
+            this.showError(errorMessage);
+        }
+    }
+
+    async addTagFromInput(input) {
+        const tagName = input.value.trim();
+        const tagType = input.dataset.type;
+
+        if (!tagName) return;
+
+        try {
+            await this.addTag(tagName, tagType);
+            input.value = '';
+            this.hideSuggestions();
+        } catch (error) {
+            console.error('Failed to add tag:', error);
+            let errorMessage = error.message;
+
+            // Handle specific cross-category errors
+            if (errorMessage.includes('already exists as') || errorMessage.includes('previously existed as')) {
+                errorMessage = `Tag "${tagName}" ${errorMessage}`;
+            }
+
+            this.showError(errorMessage);
+        }
+    }
+
+    async addTag(tagName, tagType) {
+        // Validate that we're adding to the correct category
+        if (!tagType || !['general', 'artist', 'character', 'copyright', 'meta'].includes(tagType)) {
+            throw new Error('Invalid tag type');
+        }
+
+        const postId = this.getPostIdFromUrl();
+        const response = await fetch(`/tags/add_to_image.json?image_id=${postId}`, {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+            },
+            body: JSON.stringify({
+                tag_name: tagName,
+                tag_type: tagType
+            })
+        });
+
+        if (!response.ok) {
+            const error = await response.json();
+            throw new Error(error.error || 'Failed to add tag');
+        }
+
+        const result = await response.json();
+        if (result.success) {
+            // Validate that the returned tag matches the requested type
+            if (result.tag.type !== tagType) {
+                throw new Error(`Tag type mismatch: expected ${tagType}, got ${result.tag.type}`);
+            }
+            this.addTagToUI(result.tag, tagType);
+        }
+    } async removeTag(e) {
+        e.preventDefault();
+        e.stopPropagation();
+
+        const tagId = e.target.dataset.tagId;
+        const tagItem = e.target.closest('.tag-item');
+
+        try {
+            const postId = this.getPostIdFromUrl();
+
+            const response = await fetch(`/tags/remove_from_image.json?image_id=${postId}`, {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify({
+                    tag_id: parseInt(tagId)
+                })
+            });
+
+            if (!response.ok) {
+                throw new Error('Failed to remove tag');
+            }
+
+            const result = await response.json();
+            if (result.success) {
+                const category = tagItem.closest('.tag-category');
+                const tagList = category.querySelector('.tag-list');
+
+                tagItem.style.animation = 'fadeOut 0.3s ease';
+                setTimeout(() => {
+                    tagItem.remove();
+                    this.updateTagCount(category);
+
+                    // Check if no tags remain and add "No tags" message
+                    const remainingTags = tagList.querySelectorAll('.tag-item');
+                    if (remainingTags.length === 0) {
+                        const tagType = category.dataset.type;
+                        const noTagsDiv = document.createElement('div');
+                        noTagsDiv.className = 'no-tags';
+                        noTagsDiv.textContent = `No ${tagType} tags`;
+                        tagList.appendChild(noTagsDiv);
+                    }
+                }, 300);
+            }
+        } catch (error) {
+            console.error('Failed to remove tag:', error);
+            this.showError('Failed to remove tag');
+        }
+    } addTagToUI(tag, expectedTagType) {
+        // Validate that the tag type matches what we expect
+        if (tag.type !== expectedTagType) {
+            console.error(`Tag type mismatch: expected ${expectedTagType}, got ${tag.type}`);
+            this.showError(`Cannot add ${tag.type} tag "${tag.name}" to ${expectedTagType} section`);
+            return;
+        }
+
+        const tagList = document.getElementById(`tag-list-${expectedTagType}`);
+
+        // Check if tag already exists in this category
+        const existingTag = tagList.querySelector(`[data-tag-id="${tag.ID}"]`);
+        if (existingTag) {
+            return; // Tag already exists, don't add duplicate
+        }
+
+        // Also check if tag exists in any other category (cross-category validation)
+        const allTagLists = document.querySelectorAll('.tag-list');
+        for (let otherList of allTagLists) {
+            if (otherList.id !== `tag-list-${expectedTagType}`) {
+                const existingInOther = otherList.querySelector(`[data-tag-id="${tag.ID}"]`);
+                if (existingInOther) {
+                    console.warn(`Tag "${tag.name}" already exists in another category`);
+                    return;
+                }
+            }
+        }
+
+        const noTagsElement = tagList.querySelector('.no-tags');
+
+        if (noTagsElement) {
+            noTagsElement.remove();
+        }
+
+        const tagItem = document.createElement('div');
+        tagItem.className = 'tag-item';
+        tagItem.dataset.tagId = tag.ID;
+        tagItem.style.animation = 'fadeIn 0.3s ease';
+
+        tagItem.innerHTML = `
+            <a href="/tags/${tag.name}" class="tag-link" style="color: ${this.getTagTypeColor(tag.type)};">
+                ${tag.name}
+            </a>
+            ${tag.parent ? `<span class="tag-parent-indicator" title="Child of ${tag.parent.name}">⬆</span>` : ''}
+            ${tag.children && tag.children.length > 0 ? `<span class="tag-children-indicator" title="Has ${tag.children.length} children">⬇</span>` : ''}
+            <button type="button" class="tag-remove-btn" data-tag-id="${tag.ID}" title="Remove tag">×</button>
+        `;
+
+        tagList.appendChild(tagItem);
+
+        // Bind remove event
+        tagItem.querySelector('.tag-remove-btn').addEventListener('click', (e) => this.removeTag(e));
+
+        // Update count
+        this.updateTagCount(tagList.closest('.tag-category'));
+    }
+
+    updateTagCount(category) {
+        const tagList = category.querySelector('.tag-list');
+        const countElement = category.querySelector('.tag-count');
+        const tagItems = tagList.querySelectorAll('.tag-item');
+
+        countElement.textContent = `(${tagItems.length})`;
+    }
+
+    getSuggestionsContainer(input) {
+        return input.parentElement.querySelector('.tag-suggestions');
+    }
+
+    hideSuggestions() {
+        const allSuggestions = document.querySelectorAll('.tag-suggestions');
+        allSuggestions.forEach(container => {
+            container.classList.remove('show');
+        });
+        this.selectedSuggestionIndex = -1;
+    }
+
+    getPostIdFromUrl() {
+        const match = window.location.pathname.match(/\/posts\/(\d+)/);
+        return match ? match[1] : null;
+    }
+
+    getTagTypeColor(tagType) {
+        const colors = {
+            general: '#4ECDC4',
+            artist: '#FF6B9D',
+            character: '#FFB347',
+            copyright: '#A8E6CF',
+            meta: '#DDA0DD'
+        };
+        return colors[tagType] || '#E6E6FA';
+    }
+
+    showError(message) {
+        // Find the tag editor container and add error message
+        const tagEditor = document.querySelector('.tag-editor');
+
+        // Remove any existing error
+        const existingError = tagEditor.querySelector('.error');
+        if (existingError) {
+            existingError.remove();
+        }
+
+        // Create standard error div
+        const errorDiv = document.createElement('div');
+        errorDiv.className = 'error';
+        errorDiv.textContent = message;
+
+        // Insert at the top of tag editor
+        tagEditor.insertBefore(errorDiv, tagEditor.firstChild);
+
+        // Remove after 3 seconds
+        setTimeout(() => {
+            errorDiv.remove();
+        }, 3000);
+    }
+}
+
+// CSS animations for tag items
+const style = document.createElement('style');
+style.textContent = `
+    @keyframes fadeIn {
+        from { opacity: 0; transform: translateY(-10px); }
+        to { opacity: 1; transform: translateY(0); }
+    }
+    
+    @keyframes fadeOut {
+        from { opacity: 1; transform: translateY(0); }
+        to { opacity: 0; transform: translateY(-10px); }
+    }
+`;
+document.head.appendChild(style);
+
+// Initialize the tag editor
+new TagEditor();