@sequent-org/moodboard 1.2.0 → 1.2.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sequent-org/moodboard",
-  "version": "1.2.0",
+  "version": "1.2.1",
   "type": "module",
   "description": "Interactive moodboard",
   "main": "./src/index.js",

package/src/index.js

@@ -1,2 +1,7 @@
-// Единственный экспорт пакета - готовый MoodBoard с UI
+// Основной экспорт пакета - готовый MoodBoard с UI
 export { MoodBoard } from './moodboard/MoodBoard.js';
+
+// Дополнительные экспорты для работы без bundler
+export { initMoodBoardNoBundler, quickInitMoodBoard, injectCriticalStyles } from './initNoBundler.js';
+export { StyleLoader } from './utils/styleLoader.js';
+export { EmojiLoaderNoBundler } from './utils/emojiLoaderNoBundler.js';

package/src/initNoBundler.js

@@ -0,0 +1,145 @@
+/**
+ * Инициализация MoodBoard для использования без bundler (в Laravel и др.)
+ */
+import { MoodBoard } from './moodboard/MoodBoard.js';
+import { StyleLoader } from './utils/styleLoader.js';
+import { EmojiLoaderNoBundler } from './utils/emojiLoaderNoBundler.js';
+
+/**
+ * Инициализирует MoodBoard с автоматической загрузкой стилей и ресурсов
+ * @param {string|HTMLElement} container - контейнер для MoodBoard
+ * @param {Object} options - опции MoodBoard
+ * @param {string} basePath - базовый путь к пакету (например: '/node_modules/moodboard-futurello/')
+ * @returns {Promise<MoodBoard>} готовый экземпляр MoodBoard
+ */
+export async function initMoodBoardNoBundler(container, options = {}, basePath = '') {
+    console.log('🚀 Инициализация MoodBoard без bundler...');
+    
+    // 1. Загружаем стили
+    const styleLoader = new StyleLoader();
+    await styleLoader.loadAllStyles(basePath);
+    
+    // 2. Инициализируем загрузчик эмоджи
+    const emojiLoader = new EmojiLoaderNoBundler();
+    emojiLoader.init(basePath);
+    
+    // 3. Загружаем эмоджи для использования в панели
+    const emojiGroups = await emojiLoader.loadEmojis();
+    
+    // 4. Передаем загрузчик эмоджи в опции
+    const enhancedOptions = {
+        ...options,
+        emojiLoader: emojiLoader,
+        emojiGroups: emojiGroups,
+        noBundler: true
+    };
+    
+    // 5. Создаем MoodBoard
+    const moodboard = new MoodBoard(container, enhancedOptions);
+    
+    console.log('✅ MoodBoard инициализирован без bundler');
+    
+    return moodboard;
+}
+
+/**
+ * Инжектирует критичные стили inline для мгновенного отображения
+ */
+export function injectCriticalStyles() {
+    const criticalCSS = `
+        /* Критичные стили для мгновенного отображения */
+        .moodboard-workspace {
+            position: relative;
+            width: 100%;
+            height: 100%;
+            overflow: hidden;
+            background: #f7fbff;
+        }
+        
+        .moodboard-toolbar {
+            position: absolute;
+            left: 20px;
+            top: 50%;
+            transform: translateY(-50%);
+            z-index: 1000;
+            background: white;
+            border-radius: 12px;
+            box-shadow: 0 4px 12px rgba(0,0,0,0.15);
+            padding: 8px;
+            display: flex;
+            flex-direction: column;
+            gap: 4px;
+        }
+        
+        .moodboard-topbar {
+            position: absolute;
+            top: 20px;
+            left: 20px;
+            right: 20px;
+            z-index: 1000;
+            background: white;
+            border-radius: 12px;
+            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
+            padding: 8px 16px;
+            display: flex;
+            align-items: center;
+            gap: 8px;
+            height: 44px;
+        }
+        
+        .moodboard-html-handles {
+            position: absolute;
+            top: 0;
+            left: 0;
+            pointer-events: none;
+            z-index: 999;
+        }
+        
+        /* Скрыть до полной загрузки стилей */
+        .moodboard-toolbar__popup,
+        .moodboard-properties-panel {
+            opacity: 0;
+            transition: opacity 0.3s ease;
+        }
+        
+        .moodboard-styles-loaded .moodboard-toolbar__popup,
+        .moodboard-styles-loaded .moodboard-properties-panel {
+            opacity: 1;
+        }
+    `;
+
+    const style = document.createElement('style');
+    style.id = 'moodboard-critical-styles';
+    style.textContent = criticalCSS;
+    document.head.appendChild(style);
+}
+
+/**
+ * Простая инициализация только с критичными стилями
+ * Для быстрого запуска, полные стили загружаются асинхронно
+ */
+export function quickInitMoodBoard(container, options = {}, basePath = '') {
+    // Инжектируем критичные стили сразу
+    injectCriticalStyles();
+    
+    // Загружаем полные стили асинхронно
+    const styleLoader = new StyleLoader();
+    styleLoader.loadAllStyles(basePath).then(() => {
+        // Добавляем класс для показа полностью загруженных стилей
+        if (typeof container === 'string') {
+            container = document.querySelector(container);
+        }
+        if (container) {
+            container.classList.add('moodboard-styles-loaded');
+        }
+    });
+    
+    // Создаем MoodBoard с fallback эмоджи
+    const moodboard = new MoodBoard(container, {
+        ...options,
+        noBundler: true,
+        skipEmojiLoader: true // Пропускаем автозагрузку эмоджи
+    });
+    
+    return moodboard;
+}

package/src/ui/Toolbar.js

@@ -906,24 +906,33 @@ export class Toolbar {
         this.emojiPopupEl = document.createElement('div');
         this.emojiPopupEl.className = 'moodboard-toolbar__popup moodboard-toolbar__popup--emoji';
         this.emojiPopupEl.style.display = 'none';
-        // Загружаем все изображения из папки src/assets/emodji (png/svg) через Vite import.meta.glob
-        const modules = import.meta.glob('../assets/emodji/**/*.{png,PNG,svg,SVG}', { eager: true, as: 'url' });
 
-        // Группируем по подпапкам внутри emodji (категории)
-        const entries = Object.entries(modules).sort(([a], [b]) => a.localeCompare(b));
-        const groups = new Map();
-        entries.forEach(([path, url]) => {
-            const marker = '/emodji/';
-            const idx = path.indexOf(marker);
-            let category = 'Разное';
-            if (idx >= 0) {
-                const after = path.slice(idx + marker.length);
-                const parts = after.split('/');
-                category = parts.length > 1 ? parts[0] : 'Разное';
-            }
-            if (!groups.has(category)) groups.set(category, []);
-            groups.get(category).push({ path, url });
-        });
+        // Определяем способ загрузки эмоджи
+        let groups = new Map();
+        
+        if (typeof import.meta !== 'undefined' && import.meta.glob) {
+            // Режим с bundler (Vite) - используем import.meta.glob
+            const modules = import.meta.glob('../assets/emodji/**/*.{png,PNG,svg,SVG}', { eager: true, as: 'url' });
+            
+            // Группируем по подпапкам внутри emodji (категории)
+            const entries = Object.entries(modules).sort(([a], [b]) => a.localeCompare(b));
+            entries.forEach(([path, url]) => {
+                const marker = '/emodji/';
+                const idx = path.indexOf(marker);
+                let category = 'Разное';
+                if (idx >= 0) {
+                    const after = path.slice(idx + marker.length);
+                    const parts = after.split('/');
+                    category = parts.length > 1 ? parts[0] : 'Разное';
+                }
+                if (!groups.has(category)) groups.set(category, []);
+                groups.get(category).push({ path, url });
+            });
+        } else {
+            // Режим без bundler - используем статичный список
+            console.log('🎭 Toolbar: Режим без bundler, используем статичные эмоджи');
+            groups = this.getFallbackEmojiGroups();
+        }
 
         // Задаем желаемый порядок категорий
         const ORDER = ['Смайлики', 'Жесты', 'Женские эмоции', 'Котики', 'Разное'];
@@ -1019,6 +1028,75 @@ export class Toolbar {
         this.container.appendChild(this.emojiPopupEl);
     }
 
+    /**
+     * Возвращает fallback группы эмоджи для работы без bundler
+     */
+    getFallbackEmojiGroups() {
+        const groups = new Map();
+        
+        // Определяем базовый путь для эмоджи
+        const basePath = this.getEmojiBasePath();
+        
+        // Статичный список эмоджи с реальными именами файлов
+        const fallbackEmojis = {
+            'Смайлики': [
+                '1f600.png', '1f601.png', '1f602.png', '1f603.png', '1f604.png',
+                '1f605.png', '1f606.png', '1f607.png', '1f609.png', '1f60a.png',
+                '1f60b.png', '1f60c.png', '1f60d.png', '1f60e.png', '1f60f.png',
+                '1f610.png', '1f611.png', '1f612.png', '1f613.png', '1f614.png',
+                '1f615.png', '1f616.png', '1f617.png', '1f618.png', '1f619.png'
+            ],
+            'Жесты': [
+                '1f446.png', '1f447.png', '1f448.png', '1f449.png', '1f44a.png',
+                '1f44b.png', '1f44c.png', '1f450.png', '1f4aa.png', '1f590.png',
+                '1f596.png', '1f64c.png', '1f64f.png', '270c.png', '270d.png'
+            ],
+            'Женские эмоции': [
+                '1f645.png', '1f646.png', '1f64b.png', '1f64d.png', '1f64e.png'
+            ],
+            'Котики': [
+                '1f638.png', '1f639.png', '1f63a.png', '1f63b.png', '1f63c.png',
+                '1f63d.png', '1f63e.png', '1f63f.png', '1f640.png'
+            ],
+            'Разное': [
+                '1f440.png', '1f441.png', '1f499.png', '1f4a1.png', '1f4a3.png',
+                '1f4a9.png', '1f4ac.png', '1f4af.png', '2764.png', '203c.png', '26d4.png'
+            ]
+        };
+
+        Object.entries(fallbackEmojis).forEach(([category, emojis]) => {
+            const emojiList = emojis.map(file => ({
+                path: `${basePath}${category}/${file}`,
+                url: `${basePath}${category}/${file}`
+            }));
+            groups.set(category, emojiList);
+        });
+
+        return groups;
+    }
+
+    /**
+     * Определяет базовый путь для эмоджи в зависимости от режима
+     */
+    getEmojiBasePath() {
+        // Проверяем, есть ли глобальная настройка базового пути
+        if (window.MOODBOARD_BASE_PATH) {
+            return `${window.MOODBOARD_BASE_PATH}src/assets/emodji/`;
+        }
+        
+        // Попытка определить автоматически
+        const scripts = document.querySelectorAll('script[src]');
+        for (const script of scripts) {
+            if (script.src.includes('moodboard') || script.src.includes('node_modules')) {
+                const baseUrl = new URL(script.src).origin;
+                return `${baseUrl}/node_modules/moodboard-futurello/src/assets/emodji/`;
+            }
+        }
+        
+        // Fallback: относительный путь
+        return './src/assets/emodji/';
+    }
+
     toggleEmojiPopup(anchorButton) {
         if (!this.emojiPopupEl) return;
         if (this.emojiPopupEl.style.display === 'none') {

package/src/utils/emojiLoaderNoBundler.js

@@ -0,0 +1,120 @@
+/**
+ * Загрузчик эмоджи для работы без bundler
+ * Заменяет import.meta.glob на динамическую загрузку
+ */
+export class EmojiLoaderNoBundler {
+    constructor() {
+        this.emojiCache = new Map();
+        this.basePath = '';
+    }
+
+    /**
+     * Инициализация с базовым путем
+     * @param {string} basePath - путь к папке с эмоджи (например: '/node_modules/moodboard-futurello/')
+     */
+    init(basePath = '') {
+        this.basePath = basePath;
+    }
+
+    /**
+     * Загружает список эмоджи из статичного индекса
+     * @returns {Promise<Map>} карта категорий и эмоджи
+     */
+    async loadEmojis() {
+        try {
+            // Попытка загрузить индекс эмоджи из JSON файла
+            const response = await fetch(`${this.basePath}src/assets/emodji/index.json`);
+            if (response.ok) {
+                const emojiIndex = await response.json();
+                return this.processEmojiIndex(emojiIndex);
+            }
+        } catch (error) {
+            console.warn('⚠️ Не удалось загрузить индекс эмоджи, используем fallback');
+        }
+
+        // Fallback: используем статичный список популярных эмоджи
+        return this.getFallbackEmojis();
+    }
+
+    /**
+     * Обрабатывает индекс эмоджи
+     * @param {Object} emojiIndex - индекс эмоджи из JSON
+     */
+    processEmojiIndex(emojiIndex) {
+        const groups = new Map();
+        
+        Object.entries(emojiIndex).forEach(([category, emojis]) => {
+            const emojiList = emojis.map(emoji => ({
+                path: `${this.basePath}src/assets/emodji/${category}/${emoji.file}`,
+                url: `${this.basePath}src/assets/emodji/${category}/${emoji.file}`
+            }));
+            groups.set(category, emojiList);
+        });
+
+        return groups;
+    }
+
+    /**
+     * Возвращает fallback список эмоджи
+     */
+    getFallbackEmojis() {
+        const groups = new Map();
+
+        // Статичный список популярных эмоджи
+        const fallbackEmojis = {
+            'Смайлики': [
+                '1f600.png', '1f601.png', '1f602.png', '1f603.png', '1f604.png',
+                '1f605.png', '1f606.png', '1f607.png', '1f608.png', '1f609.png',
+                '1f60a.png', '1f60b.png', '1f60c.png', '1f60d.png', '1f60e.png',
+                '1f60f.png', '1f610.png', '1f611.png', '1f612.png', '1f613.png',
+                '1f614.png', '1f615.png', '1f616.png', '1f617.png', '1f618.png',
+                '1f619.png', '1f61a.png', '1f61b.png', '1f61c.png', '1f61d.png',
+                '1f61e.png', '1f61f.png', '1f620.png', '1f621.png', '1f622.png'
+            ],
+            'Жесты': [
+                '1f44d.png', '1f44e.png', '1f44f.png', '1f450.png', '1f451.png',
+                '1f590.png', '270c.png', '1f91d.png', '1f64f.png', '1f44c.png'
+            ],
+            'Разное': [
+                '2764.png', '1f494.png', '1f49c.png', '1f49a.png', '1f495.png',
+                '1f496.png', '1f497.png', '1f498.png', '1f499.png', '1f49b.png'
+            ]
+        };
+
+        Object.entries(fallbackEmojis).forEach(([category, emojis]) => {
+            const emojiList = emojis.map(file => ({
+                path: `${this.basePath}src/assets/emodji/${category}/${file}`,
+                url: `${this.basePath}src/assets/emodji/${category}/${file}`
+            }));
+            groups.set(category, emojiList);
+        });
+
+        return groups;
+    }
+
+    /**
+     * Создает индексный JSON файл из существующих эмоджи
+     * Эта функция должна быть вызвана в dev режиме для генерации индекса
+     */
+    async generateEmojiIndex() {
+        // Эта функция может быть вызвана только в dev среде с bundler
+        if (typeof import.meta !== 'undefined' && import.meta.glob) {
+            const modules = import.meta.glob('../assets/emodji/**/*.{png,PNG}', { eager: true, as: 'url' });
+            const index = {};
+            
+            Object.keys(modules).forEach(path => {
+                const match = path.match(/\/emodji\/([^\/]+)\/([^\/]+)$/);
+                if (match) {
+                    const [, category, file] = match;
+                    if (!index[category]) index[category] = [];
+                    index[category].push({ file });
+                }
+            });
+
+            console.log('📁 Индекс эмоджи:', JSON.stringify(index, null, 2));
+            return index;
+        }
+        
+        return null;
+    }
+}

package/src/utils/styleLoader.js

@@ -0,0 +1,84 @@
+/**
+ * Утилита для загрузки CSS стилей без bundler
+ * Подключает все необходимые стили для MoodBoard
+ */
+export class StyleLoader {
+    constructor() {
+        this.loadedStyles = new Set();
+    }
+
+    /**
+     * Загружает все стили MoodBoard
+     * @param {string} basePath - базовый путь к node_modules или dist
+     */
+    async loadAllStyles(basePath = '') {
+        const styles = [
+            'src/ui/styles/workspace.css',
+            'src/ui/styles/toolbar.css', 
+            'src/ui/styles/topbar.css',
+            'src/ui/styles/panels.css'
+        ];
+
+        console.log('🎨 StyleLoader: Загружаем стили MoodBoard...');
+
+        for (const stylePath of styles) {
+            try {
+                await this.loadStyle(basePath + stylePath);
+                console.log(`✅ Стиль загружен: ${stylePath}`);
+            } catch (error) {
+                console.warn(`⚠️ Ошибка загрузки стиля ${stylePath}:`, error);
+            }
+        }
+
+        console.log('🎨 StyleLoader: Все стили загружены');
+    }
+
+    /**
+     * Загружает отдельный CSS файл
+     * @param {string} href - путь к CSS файлу
+     */
+    async loadStyle(href) {
+        // Проверяем, не загружен ли уже этот стиль
+        if (this.loadedStyles.has(href)) {
+            return;
+        }
+
+        return new Promise((resolve, reject) => {
+            // Создаем link элемент
+            const link = document.createElement('link');
+            link.rel = 'stylesheet';
+            link.type = 'text/css';
+            link.href = href;
+
+            // Обработчики загрузки
+            link.onload = () => {
+                this.loadedStyles.add(href);
+                resolve();
+            };
+            
+            link.onerror = () => {
+                reject(new Error(`Failed to load CSS: ${href}`));
+            };
+
+            // Добавляем в head
+            document.head.appendChild(link);
+        });
+    }
+
+    /**
+     * Загружает стили синхронно (для критичных стилей)
+     * @param {string} css - CSS код
+     * @param {string} id - уникальный ID для style элемента
+     */
+    injectInlineStyles(css, id = 'moodboard-styles') {
+        // Проверяем, не загружен ли уже
+        if (document.getElementById(id)) {
+            return;
+        }
+
+        const style = document.createElement('style');
+        style.id = id;
+        style.textContent = css;
+        document.head.appendChild(style);
+    }
+}