Update public/document_editor.js for document viewer

public/document_editor.js

@@ -0,0 +1,601 @@
+// Enhanced Document Viewer with Editing and Commenting
+(function() {
+    'use strict';
+
+    class DocumentEditor {
+        constructor() {
+            this.comments = {};
+            this.editMode = false;
+            this.currentDocId = null;
+            this.annotations = {};
+        }
+
+        enableEditMode(docId) {
+            this.editMode = true;
+            this.currentDocId = docId;
+
+            const contentArea = document.getElementById('document-content');
+            const content = contentArea.querySelector('.document-content');
+
+            if (content) {
+                content.contentEditable = true;
+                content.style.border = '2px dashed #ff4757';
+                content.style.padding = '20px';
+
+                // Add edit toolbar
+                this.createEditToolbar(contentArea);
+
+                // Enable text selection for commenting
+                this.enableTextSelection(content);
+            }
+        }
+
+        createEditToolbar(container) {
+            const toolbar = document.createElement('div');
+            toolbar.className = 'document-edit-toolbar';
+            toolbar.style.cssText = `
+                position: sticky;
+                top: 0;
+                background: #2c3e50;
+                padding: 10px;
+                display: flex;
+                gap: 10px;
+                z-index: 150;
+                border-radius: 4px;
+                margin-bottom: 10px;
+            `;
+
+            toolbar.innerHTML = `
+                <button class="edit-btn" data-action="bold" title="Bold">
+                    <b>B</b>
+                </button>
+                <button class="edit-btn" data-action="italic" title="Italic">
+                    <i>I</i>
+                </button>
+                <button class="edit-btn" data-action="underline" title="Underline">
+                    <u>U</u>
+                </button>
+                <button class="edit-btn" data-action="highlight" title="Highlight">
+                    🖍️
+                </button>
+                <div style="border-left: 1px solid #666; margin: 0 5px;"></div>
+                <button class="edit-btn" data-action="comment" title="Add Comment">
+                    💬
+                </button>
+                <button class="edit-btn" data-action="save" title="Save Changes">
+                    💾
+                </button>
+                <button class="edit-btn" data-action="export" title="Export PDF">
+                    📄
+                </button>
+                <div style="margin-left: auto;">
+                    <button class="edit-btn" data-action="exit" title="Exit Edit Mode">
+                        ✖️
+                    </button>
+                </div>
+            `;
+
+            // Style buttons
+            toolbar.querySelectorAll('.edit-btn').forEach(btn => {
+                btn.style.cssText = `
+                    padding: 6px 12px;
+                    background: #34495e;
+                    color: white;
+                    border: none;
+                    border-radius: 4px;
+                    cursor: pointer;
+                    font-size: 14px;
+                    transition: background 0.3s;
+                `;
+
+                btn.addEventListener('mouseover', () => {
+                    btn.style.background = '#ff4757';
+                });
+
+                btn.addEventListener('mouseout', () => {
+                    btn.style.background = '#34495e';
+                });
+
+                btn.addEventListener('click', (e) => {
+                    this.handleToolbarAction(e.currentTarget.dataset.action);
+                });
+            });
+
+            container.insertBefore(toolbar, container.firstChild);
+        }
+
+        handleToolbarAction(action) {
+            const content = document.querySelector('.document-content[contenteditable="true"]');
+
+            switch(action) {
+                case 'bold':
+                    document.execCommand('bold', false, null);
+                    break;
+                case 'italic':
+                    document.execCommand('italic', false, null);
+                    break;
+                case 'underline':
+                    document.execCommand('underline', false, null);
+                    break;
+                case 'highlight':
+                    this.highlightSelection();
+                    break;
+                case 'comment':
+                    this.addCommentToSelection();
+                    break;
+                case 'save':
+                    this.saveDocument();
+                    break;
+                case 'export':
+                    this.exportToPDF();
+                    break;
+                case 'exit':
+                    this.exitEditMode();
+                    break;
+            }
+        }
+
+        highlightSelection() {
+            const selection = window.getSelection();
+            if (selection.toString()) {
+                const range = selection.getRangeAt(0);
+                const span = document.createElement('span');
+                span.style.backgroundColor = '#fff59d';
+                span.className = 'document-highlight';
+
+                try {
+                    range.surroundContents(span);
+                } catch (e) {
+                    // Handle complex selections
+                    const contents = range.extractContents();
+                    span.appendChild(contents);
+                    range.insertNode(span);
+                }
+
+                selection.removeAllRanges();
+            }
+        }
+
+        addCommentToSelection() {
+            const selection = window.getSelection();
+            if (selection.toString()) {
+                const commentText = prompt('Add your comment:');
+                if (commentText) {
+                    const commentId = 'comment_' + Date.now();
+                    const range = selection.getRangeAt(0);
+
+                    // Create comment marker
+                    const marker = document.createElement('span');
+                    marker.className = 'comment-marker';
+                    marker.dataset.commentId = commentId;
+                    marker.style.cssText = `
+                        background: #ffe082;
+                        border-bottom: 2px solid #ff9800;
+                        cursor: pointer;
+                        position: relative;
+                    `;
+
+                    try {
+                        range.surroundContents(marker);
+                    } catch (e) {
+                        const contents = range.extractContents();
+                        marker.appendChild(contents);
+                        range.insertNode(marker);
+                    }
+
+                    // Store comment
+                    this.comments[commentId] = {
+                        text: commentText,
+                        author: 'Current User',
+                        timestamp: new Date().toISOString(),
+                        position: marker.getBoundingClientRect()
+                    };
+
+                    // Add click handler to show comment
+                    marker.addEventListener('click', () => {
+                        this.showComment(commentId);
+                    });
+
+                    // Show comment count badge
+                    this.updateCommentCount();
+
+                    selection.removeAllRanges();
+                }
+            } else {
+                alert('Please select text to comment on');
+            }
+        }
+
+        showComment(commentId) {
+            const comment = this.comments[commentId];
+            if (comment) {
+                // Remove existing comment popup
+                const existingPopup = document.querySelector('.comment-popup');
+                if (existingPopup) {
+                    existingPopup.remove();
+                }
+
+                // Create comment popup
+                const popup = document.createElement('div');
+                popup.className = 'comment-popup';
+                popup.style.cssText = `
+                    position: absolute;
+                    background: white;
+                    border: 1px solid #ccc;
+                    border-radius: 8px;
+                    padding: 15px;
+                    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
+                    z-index: 200;
+                    max-width: 300px;
+                    right: 20px;
+                    top: ${comment.position.top}px;
+                `;
+
+                popup.innerHTML = `
+                    <div style="display: flex; justify-content: space-between; margin-bottom: 10px;">
+                        <strong style="color: #2c3e50;">${comment.author}</strong>
+                        <button onclick="this.parentElement.parentElement.remove()"
+                                style="border: none; background: none; cursor: pointer; color: #999;">✖</button>
+                    </div>
+                    <p style="color: #333; margin: 10px 0;">${comment.text}</p>
+                    <small style="color: #999;">${new Date(comment.timestamp).toLocaleString()}</small>
+                    <div style="margin-top: 10px; padding-top: 10px; border-top: 1px solid #eee;">
+                        <input type="text" placeholder="Reply..."
+                               style="width: 100%; padding: 5px; border: 1px solid #ddd; border-radius: 4px;">
+                    </div>
+                `;
+
+                document.getElementById('document-viewer').appendChild(popup);
+            }
+        }
+
+        updateCommentCount() {
+            const count = Object.keys(this.comments).length;
+            let badge = document.querySelector('.comment-count-badge');
+
+            if (!badge) {
+                badge = document.createElement('div');
+                badge.className = 'comment-count-badge';
+                badge.style.cssText = `
+                    position: fixed;
+                    top: 80px;
+                    right: 20px;
+                    background: #ff9800;
+                    color: white;
+                    padding: 8px 12px;
+                    border-radius: 20px;
+                    font-weight: bold;
+                    z-index: 150;
+                `;
+                document.getElementById('document-viewer').appendChild(badge);
+            }
+
+            badge.textContent = `💬 ${count} Comments`;
+        }
+
+        saveDocument() {
+            const content = document.querySelector('.document-content[contenteditable="true"]');
+            if (content) {
+                const savedContent = content.innerHTML;
+                const docId = this.currentDocId || 'doc_' + Date.now();
+
+                // Save to localStorage (in real app, would save to backend)
+                const savedDoc = {
+                    id: docId,
+                    content: savedContent,
+                    comments: this.comments,
+                    annotations: this.annotations,
+                    lastModified: new Date().toISOString(),
+                    version: 1
+                };
+
+                localStorage.setItem(`navada_doc_${docId}`, JSON.stringify(savedDoc));
+
+                // Show success message
+                this.showNotification('Document saved successfully!', 'success');
+
+                return savedDoc;
+            }
+        }
+
+        exportToPDF() {
+            const content = document.querySelector('.document-content[contenteditable="true"]');
+            if (content) {
+                // In a real implementation, this would generate a proper PDF
+                // For now, we'll trigger a print dialog which can save as PDF
+                const printWindow = window.open('', '_blank');
+                printWindow.document.write(`
+                    <html>
+                        <head>
+                            <title>Document Export</title>
+                            <style>
+                                body { font-family: Arial, sans-serif; padding: 20px; }
+                                .comment-marker { background: #ffe082; }
+                                .document-highlight { background: #fff59d; }
+                            </style>
+                        </head>
+                        <body>
+                            ${content.innerHTML}
+                        </body>
+                    </html>
+                `);
+                printWindow.document.close();
+                printWindow.print();
+            }
+        }
+
+        exitEditMode() {
+            const content = document.querySelector('.document-content[contenteditable="true"]');
+            if (content) {
+                content.contentEditable = false;
+                content.style.border = 'none';
+            }
+
+            // Remove toolbar
+            const toolbar = document.querySelector('.document-edit-toolbar');
+            if (toolbar) {
+                toolbar.remove();
+            }
+
+            this.editMode = false;
+            this.showNotification('Edit mode disabled', 'info');
+        }
+
+        enableTextSelection(element) {
+            element.addEventListener('mouseup', () => {
+                const selection = window.getSelection();
+                if (selection.toString()) {
+                    this.showSelectionMenu(selection);
+                }
+            });
+        }
+
+        showSelectionMenu(selection) {
+            // Remove existing menu
+            const existingMenu = document.querySelector('.selection-menu');
+            if (existingMenu) {
+                existingMenu.remove();
+            }
+
+            const range = selection.getRangeAt(0);
+            const rect = range.getBoundingClientRect();
+
+            const menu = document.createElement('div');
+            menu.className = 'selection-menu';
+            menu.style.cssText = `
+                position: fixed;
+                top: ${rect.top - 40}px;
+                left: ${rect.left + (rect.width / 2) - 100}px;
+                background: #2c3e50;
+                border-radius: 4px;
+                padding: 5px;
+                display: flex;
+                gap: 5px;
+                z-index: 300;
+                box-shadow: 0 2px 8px rgba(0,0,0,0.2);
+            `;
+
+            const actions = [
+                { icon: '💬', action: 'comment', title: 'Comment' },
+                { icon: '🖍️', action: 'highlight', title: 'Highlight' },
+                { icon: '📝', action: 'note', title: 'Add Note' }
+            ];
+
+            actions.forEach(item => {
+                const btn = document.createElement('button');
+                btn.textContent = item.icon;
+                btn.title = item.title;
+                btn.style.cssText = `
+                    background: transparent;
+                    border: none;
+                    color: white;
+                    cursor: pointer;
+                    padding: 5px 10px;
+                    font-size: 16px;
+                `;
+
+                btn.addEventListener('click', () => {
+                    if (item.action === 'comment') {
+                        this.addCommentToSelection();
+                    } else if (item.action === 'highlight') {
+                        this.highlightSelection();
+                    } else if (item.action === 'note') {
+                        this.addNoteToSelection();
+                    }
+                    menu.remove();
+                });
+
+                menu.appendChild(btn);
+            });
+
+            document.body.appendChild(menu);
+
+            // Remove menu when clicking elsewhere
+            setTimeout(() => {
+                document.addEventListener('click', function removeMenu(e) {
+                    if (!menu.contains(e.target)) {
+                        menu.remove();
+                        document.removeEventListener('click', removeMenu);
+                    }
+                });
+            }, 100);
+        }
+
+        addNoteToSelection() {
+            const selection = window.getSelection();
+            if (selection.toString()) {
+                const noteText = prompt('Add your note:');
+                if (noteText) {
+                    const noteId = 'note_' + Date.now();
+                    const range = selection.getRangeAt(0);
+
+                    // Create note marker
+                    const marker = document.createElement('span');
+                    marker.className = 'note-marker';
+                    marker.dataset.noteId = noteId;
+                    marker.style.cssText = `
+                        background: #e1f5fe;
+                        border-bottom: 2px solid #03a9f4;
+                        cursor: help;
+                        position: relative;
+                    `;
+                    marker.title = noteText;
+
+                    try {
+                        range.surroundContents(marker);
+                    } catch (e) {
+                        const contents = range.extractContents();
+                        marker.appendChild(contents);
+                        range.insertNode(marker);
+                    }
+
+                    // Store note
+                    this.annotations[noteId] = {
+                        type: 'note',
+                        text: noteText,
+                        timestamp: new Date().toISOString()
+                    };
+
+                    selection.removeAllRanges();
+                }
+            }
+        }
+
+        showNotification(message, type = 'info') {
+            const notification = document.createElement('div');
+            notification.className = `document-notification ${type}`;
+            notification.style.cssText = `
+                position: fixed;
+                top: 20px;
+                right: 20px;
+                padding: 15px 20px;
+                border-radius: 8px;
+                color: white;
+                font-weight: 500;
+                z-index: 1000;
+                animation: slideIn 0.3s ease;
+                ${type === 'success' ? 'background: #27ae60;' : ''}
+                ${type === 'error' ? 'background: #e74c3c;' : ''}
+                ${type === 'info' ? 'background: #3498db;' : ''}
+            `;
+
+            notification.textContent = message;
+            document.body.appendChild(notification);
+
+            setTimeout(() => {
+                notification.style.animation = 'slideOut 0.3s ease';
+                setTimeout(() => notification.remove(), 300);
+            }, 3000);
+        }
+
+        // Collaborative features (simulation)
+        simulateCollaboration() {
+            // In a real app, this would use WebSockets
+            setInterval(() => {
+                const collaborators = ['Alice', 'Bob', 'Charlie'];
+                const randomUser = collaborators[Math.floor(Math.random() * collaborators.length)];
+
+                const cursor = document.createElement('div');
+                cursor.className = 'collaborator-cursor';
+                cursor.style.cssText = `
+                    position: absolute;
+                    width: 2px;
+                    height: 20px;
+                    background: #ff4757;
+                    top: ${Math.random() * 400}px;
+                    left: ${Math.random() * 600}px;
+                    z-index: 100;
+                `;
+
+                const label = document.createElement('div');
+                label.textContent = randomUser;
+                label.style.cssText = `
+                    position: absolute;
+                    top: -20px;
+                    left: 0;
+                    background: #ff4757;
+                    color: white;
+                    padding: 2px 6px;
+                    border-radius: 3px;
+                    font-size: 12px;
+                    white-space: nowrap;
+                `;
+
+                cursor.appendChild(label);
+
+                const viewer = document.getElementById('document-viewer');
+                if (viewer) {
+                    viewer.appendChild(cursor);
+
+                    // Remove after animation
+                    setTimeout(() => cursor.remove(), 5000);
+                }
+            }, 10000);
+        }
+    }
+
+    // Initialize editor
+    window.DocumentEditor = new DocumentEditor();
+
+    // Add edit button to document viewer header
+    function addEditButton() {
+        const interval = setInterval(() => {
+            const header = document.querySelector('.document-header');
+            if (header && !header.querySelector('.edit-document-btn')) {
+                const editBtn = document.createElement('button');
+                editBtn.className = 'edit-document-btn';
+                editBtn.textContent = '✏️ Edit';
+                editBtn.style.cssText = `
+                    padding: 6px 16px;
+                    background: #27ae60;
+                    color: white;
+                    border: none;
+                    border-radius: 4px;
+                    cursor: pointer;
+                    margin-right: 10px;
+                `;
+
+                editBtn.addEventListener('click', () => {
+                    window.DocumentEditor.enableEditMode('current');
+                });
+
+                const btnContainer = header.querySelector('div');
+                if (btnContainer) {
+                    btnContainer.insertBefore(editBtn, btnContainer.firstChild);
+                }
+
+                clearInterval(interval);
+            }
+        }, 1000);
+    }
+
+    // Initialize when DOM is ready
+    if (document.readyState === 'loading') {
+        document.addEventListener('DOMContentLoaded', addEditButton);
+    } else {
+        setTimeout(addEditButton, 1000);
+    }
+
+    // Add styles for animations
+    const style = document.createElement('style');
+    style.textContent = `
+        @keyframes slideIn {
+            from { transform: translateX(100%); opacity: 0; }
+            to { transform: translateX(0); opacity: 1; }
+        }
+        @keyframes slideOut {
+            from { transform: translateX(0); opacity: 1; }
+            to { transform: translateX(100%); opacity: 0; }
+        }
+        .collaborator-cursor {
+            animation: pulse 2s infinite;
+        }
+        @keyframes pulse {
+            0% { opacity: 1; }
+            50% { opacity: 0.5; }
+            100% { opacity: 1; }
+        }
+    `;
+    document.head.appendChild(style);
+
+})();