insertr/insertr-cli/assets/lib/insertr.js

var Insertr = (function () {
    'use strict';

    /**
     * InsertrCore - Core functionality for content management
     */
    class InsertrCore {
        constructor(options = {}) {
            this.options = {
                apiEndpoint: options.apiEndpoint || '/api/content',
                siteId: options.siteId || 'default',
                ...options
            };
        }
        
        // Find all enhanced elements on the page
        findEnhancedElements() {
            return document.querySelectorAll('[data-insertr-enhanced="true"]');
        }
        
        // Get element metadata
        getElementMetadata(element) {
            return {
                contentId: element.getAttribute('data-content-id'),
                contentType: element.getAttribute('data-content-type'),
                element: element
            };
        }
        
        // Get all elements with their metadata
        getAllElements() {
            const elements = this.findEnhancedElements();
            return Array.from(elements).map(el => this.getElementMetadata(el));
        }
    }

    /**
     * InsertrEditor - Visual editing functionality
     */
    class InsertrEditor {
        constructor(core, options = {}) {
            this.core = core;
            this.options = options;
            this.isActive = false;
        }
        
        start() {
            if (this.isActive) return;
            
            console.log('🚀 Starting Insertr Editor');
            this.isActive = true;
            
            // Add editor styles
            this.addEditorStyles();
            
            // Initialize all enhanced elements
            const elements = this.core.getAllElements();
            console.log(`📝 Found ${elements.length} editable elements`);
            
            elements.forEach(meta => this.initializeElement(meta));
        }
        
        initializeElement(meta) {
            const { element, contentId, contentType } = meta;
            
            // Add visual indicators
            element.style.cursor = 'pointer';
            element.style.position = 'relative';
            
            // Add interaction handlers
            this.addHoverEffects(element);
            this.addClickHandler(element, meta);
        }
        
        addHoverEffects(element) {
            element.addEventListener('mouseenter', () => {
                element.classList.add('insertr-editing-hover');
            });
            
            element.addEventListener('mouseleave', () => {
                element.classList.remove('insertr-editing-hover');
            });
        }
        
        addClickHandler(element, meta) {
            element.addEventListener('click', (e) => {
                e.preventDefault();
                this.openEditor(meta);
            });
        }
        
        openEditor(meta) {
            const { contentId, contentType, element } = meta;
            const currentContent = element.textContent.trim();
            
            // For now, use a simple prompt (will be replaced with proper modal)
            const newContent = prompt(
                `Edit ${contentType} content (ID: ${contentId}):`, 
                currentContent
            );
            
            if (newContent !== null && newContent !== currentContent) {
                this.updateContent(meta, newContent);
            }
        }
        
        updateContent(meta, newContent) {
            const { element } = meta;
            
            // Update the element content
            element.textContent = newContent;
            
            // TODO: Save to backend API
            console.log(`💾 Content updated:`, meta.contentId, newContent);
        }
        
        addEditorStyles() {
            const styles = `
            .insertr-editing-hover {
                outline: 2px dashed #007cba !important;
                outline-offset: 2px !important;
                background-color: rgba(0, 124, 186, 0.05) !important;
            }
            
            [data-insertr-enhanced="true"]:hover::after {
                content: "✏️ " attr(data-content-type);
                position: absolute;
                top: -25px;
                left: 0;
                background: #007cba;
                color: white;
                padding: 2px 6px;
                font-size: 11px;
                border-radius: 3px;
                white-space: nowrap;
                z-index: 1000;
                font-family: monospace;
            }
        `;
            
            const styleSheet = document.createElement('style');
            styleSheet.type = 'text/css';
            styleSheet.innerHTML = styles;
            document.head.appendChild(styleSheet);
        }
    }

    /**
     * Insertr - The Tailwind of CMS
     * Main library entry point
     */


    // Create global Insertr instance
    window.Insertr = {
        // Core functionality
        core: null,
        editor: null,
        
        // Initialize the library
        init(options = {}) {
            console.log('🔧 Insertr v1.0.0 initializing...');
            
            this.core = new InsertrCore(options);
            this.editor = new InsertrEditor(this.core, options);
            
            // Auto-initialize if DOM is ready
            if (document.readyState === 'loading') {
                document.addEventListener('DOMContentLoaded', () => this.start());
            } else {
                this.start();
            }
            
            return this;
        },
        
        // Start the editor
        start() {
            if (this.editor) {
                this.editor.start();
            }
        },
        
        // Version info
        version: '1.0.0'
    };

    // Auto-initialize in development mode
    if (document.querySelector('[data-insertr-enhanced]')) {
        window.Insertr.init();
    }

    var index = window.Insertr;

    return index;

})();