@componyx/ui 0.0.0-stage → 1.0.4

package/Editor/Modules/SourceViewBuilder.js

@@ -0,0 +1,212 @@
+/*! Componyx.UI | (c) E.H. Daanen / Componyx | BUSL-1.1 | componyx.com/license */
+componyx.UI.editor_modules = componyx.UI.editor_modules || {};
+/**
+ * SourceViewBuilder module — The source viewer.
+ * 
+ * @class SourceViewBuilder
+ * @memberof componyx.UI.editor_modules
+ * @ignore
+ */
+componyx.UI.editor_modules.SourceViewBuilder = class SourceViewBuilder
+{
+    constructor(targetNode, buttonCssClass = '', defTagName = 'span', rootItemText = 'root-item', voidNodeRegEx = null)
+    {
+        this.targetNode = targetNode;
+        this.buttonCssClass = buttonCssClass;
+        this.defTagName = defTagName;
+        this.rootItemText = rootItemText;
+        this.voidNodeRegEx = voidNodeRegEx;
+    }
+
+    outerHTML()
+    {
+        let rootItem = this.targetNode.querySelector('.item.root'),
+            tag = $lib.remove(rootItem.querySelector('.tag')),
+            content = this.targetNode.textContent;
+
+        rootItem.insertBefore(tag, rootItem.querySelector('.item')); // restore tag
+        return content;
+    }
+
+    build(sourceNode)
+    {
+        this.targetNode.innerHTML = '';
+
+        let me = this,
+            rootItem = $lib.element(this.targetNode, '', '', '', '', { className: 'item root' });
+
+        rootItem.onclick = me.select.bind(me, rootItem);
+        me.createButton(rootItem, { className: this.buttonCssClass, onclick: me.edit.bind(me, rootItem, true) });
+        $lib.element(rootItem, '', 'span', this.rootItemText, '', { className: 'tag' });
+        me.createEditBox(rootItem, true);
+        me.buildSection(sourceNode, rootItem);
+    }
+
+    buildSection(sourceNode, targetNode, beforeNode)
+    {
+        let me = this,
+            node = sourceNode.firstChild, nodeType, hasChildElements,
+            item, nodeName, tag;
+
+        while (node)
+        {
+            nodeType = node.nodeType;
+            nodeName = node.nodeName.toLowerCase();
+            hasChildElements = node.firstElementChild != null;
+
+            if (nodeType == 1)
+            {
+                item = $lib.element(targetNode, beforeNode, '', '', '', { className: 'item' });
+                item.onclick = me.select.bind(me, item);
+                me.createButton(item, { className: this.buttonCssClass, onclick: me.edit.bind(me, item, false) });
+
+                if (hasChildElements)
+                    $lib.element(item, '', this.defTagName, '', '', { className: 'expand', onclick: me.toggleExpand.bind(me, item) });
+                else
+                    item.className += ' childless';
+
+                me.createEditBox(item, false);
+
+                tag = $lib.element(item, '', this.defTagName, `<${nodeName}`, '', { className: 'tag' });
+
+                if (node.hasAttributes())
+                    me.buildAttributes(node, tag);
+
+                tag.appendChild(document.createTextNode('>'));
+
+                if (hasChildElements)
+                    me.buildSection(node, item);
+                else
+                    this.writeData(node, item);
+
+                if (node.hasChildNodes() || (!this.voidNodeRegEx || !nodeName.match(this.voidNodeRegEx)))
+                    tag = $lib.element(item, '', this.defTagName, `</${nodeName}>`, '', { className: 'end-tag' });
+            }
+            else
+                this.writeData(node, targetNode);
+
+            node = node.nextSibling;
+        }
+    }
+
+    createEditBox(item, isRoot)
+    {
+        $lib.element(item, '', 'span', '', '', {
+            className: 'edit-box',
+            contentEditable: true,
+            spellcheck: false,
+            onblur: this.edit.bind(this, item, isRoot)
+        });
+    }
+
+    writeData(node, targetNode)
+    {
+        let data = $lib.element(targetNode, '', this.defTagName),
+            nodeType = node.nodeType;
+
+        data.className = (nodeType == 8) ? 'data comment' : 'data';
+        data.textContent = (nodeType == 8) ? ` <!-- ${node.textContent} -->` : node.textContent;
+    }
+
+    buildAttributes(sourceNode, targetNode)
+    {
+        $lib.each(sourceNode.attributes, (attr) =>
+        {
+            targetNode.appendChild(document.createTextNode(' '));
+            $lib.element(targetNode, '', this.defTagName, attr.name, { class: 'attr-name' });
+            targetNode.appendChild(document.createTextNode('="'));
+            $lib.element(targetNode, '', this.defTagName, attr.value, { class: 'attr-value' });
+            targetNode.appendChild(document.createTextNode('"'));
+        });
+    }
+
+    createButton(item, props)
+    {
+        $lib.element(item, '', 'a', '', '', props);
+    }
+
+    toggleExpand(item, e)
+    {
+        item.classList.toggle('collapsed');
+        e.preventDefault();
+    }
+
+    select(item, e) 
+    {
+        if (!item)
+            return;
+
+        if (e)
+            e.stopPropagation();
+
+        if (item.classList.contains('edit-mode'))
+            return;
+
+        let selected = this.targetNode.querySelector('.selected');
+
+        if (selected == item)
+            return;
+
+        if (selected)
+            selected.classList.remove('selected', 'edit-mode');
+
+        item.classList.toggle('selected'); // shows edit button
+    }
+
+    edit(item, isRoot, e)
+    {
+        let edit = item.querySelector('.edit-box');
+
+        if (isRoot && this.saved)
+            return;
+
+        e.stopPropagation();
+
+        if (!item.classList.contains('edit-mode'))
+        {
+            item.classList.add('edit-mode'); // shows save icon
+
+            if (isRoot)
+                edit.textContent = this.outerHTML();
+            else
+                edit.textContent = item.textContent;
+
+            edit.focus();
+        }
+        else
+        {
+            item.classList.remove('edit-mode');
+            this.save(item, isRoot);
+        }
+    }
+
+    save(item, isRoot)
+    {
+        let edit = item.querySelector('.edit-box'),
+            parentNode = item.parentNode,
+            changedSource = $lib.element({ tag: 'template' });
+
+        if (isRoot)
+        {
+            parentNode = item;
+            item.querySelectorAll('.item').forEach(e => e.remove());
+        }
+
+        changedSource.innerHTML = edit.textContent;
+        edit.textContent = '';
+        this.buildSection(changedSource.content, parentNode, (isRoot) ? null : item); // rebuild, use original item as beforeElement
+
+        if (!isRoot)
+            item.remove(); // remove original item
+        else
+        { // avoid fireing edit event after save action
+            item.firstElementChild.outerHTML = item.firstElementChild.outerHTML;
+            item.firstElementChild.onclick = this.edit.bind(this, item, true);
+        }
+
+        this.select(isRoot ? item : parentNode.querySelector('.item'));
+    }
+};
+var SourceViewBuilder = componyx.UI.editor_modules.SourceViewBuilder;
+
+export { SourceViewBuilder as default };

package/Editor/Modules/SymbolPicker.js

@@ -0,0 +1,208 @@
+/*! Componyx.UI | (c) E.H. Daanen / Componyx | BUSL-1.1 | componyx.com/license */
+componyx.UI.editor_modules = componyx.UI.editor_modules || {};
+
+/**
+ * SymbolPicker module — builds and manages a categorised symbol/emoji picker box.
+ * One instance is created for emoji symbols and one for special characters.
+ *
+ * @class SymbolPicker
+ * @memberof componyx.UI.editor_modules
+ * @ignore
+ */
+componyx.UI.editor_modules.SymbolPicker = class SymbolPicker
+{
+    /**
+     * @param {componyx.UI.Editor} editor        The editor instance.
+     * @param {string}  cloneId                     Id of the base Box component to clone from.
+     * @param {string}  id                          Id that will be given to the new Box.
+     * @param {string}  pickerCssClass              Extra CSS class for the picker box.
+     * @param {string[]} catLabels                  Display labels for every category (index 0 = "All").
+     * @param {Array}   symbols                     Category data: [{name, values:[{value, name}]}].
+     */
+    constructor(editor, cloneId, id, pickerCssClass, catLabels, symbols)
+    {
+        this.editor = editor;
+        this.cf = editor.componentFactory;
+        this.symbols = symbols;
+        this.selectedCategory = undefined;
+        this.searchFilter = '';
+
+        this.categoriesEl = null;
+        this.symbolViewEl = null;
+        this.headerEl = null;
+        this.searchEl = null;
+        this.symbolsEl = null;
+        this.footerEl = null;
+        this.nameEl = null;
+
+        this.box = this.#createBox(id, cloneId, pickerCssClass, catLabels, symbols);
+    }
+
+    /**
+     * Shows the picker box anchored to the toolbar button for the given command.
+     * @param {Object} cmd  The command settings object (must have an `id` property).
+     */
+    show(cmd)
+    {
+        const button = $UI.store[this.editor.utility.getId(cmd.id)];
+        this.box.expander = button.element;
+        this.box.show();
+    }
+
+    /**
+     * Builds the DOM and Box component.
+     */
+    #createBox(id, cloneId, pickerCssClass, catLabels, symbols)
+    {
+        const editor = this.editor,
+            co = editor.classOption;
+
+        this.categoriesEl = $lib.element('', '', '', '', { class: editor.getCssClass(co.SYMBOL_CATEGORIES) });
+        this.symbolViewEl = $lib.element('', '', '', '', { class: editor.getCssClass(co.SYMBOL_VIEW) });
+        this.headerEl = $lib.element(this.symbolViewEl, '', 'header', '', { class: editor.getCssClass(co.SYMBOL_HEADER) });
+
+        this.searchEl = $lib.element(
+            this.headerEl, '', 'input', '',
+            { type: 'text', placeholder: editor.labels.symbolSearchInputPlaceholder },
+            {
+                onfocus: () => { editor.eventManager.disposeEvents(); },
+                onblur: () => { editor.eventManager.bindEvents(); },
+                oninput: this.#renderCategory.bind(this)
+            }
+        );
+
+        this.symbolsEl = $lib.element(this.symbolViewEl, '', '', '', { class: editor.getCssClass(co.SYMBOL_ITEMS) });
+        this.footerEl = $lib.element(this.symbolViewEl, '', 'footer', '', { class: editor.getCssClass(co.SYMBOL_FOOTER) });
+        this.nameEl = $lib.element(this.footerEl, '', 'span');
+
+        // "All" category link
+        $lib.element(this.categoriesEl, '', 'a', catLabels[0], { class: editor.getCssClass(co.SYMBOL_CATEGORY) }, { onclick: this.#selectCategory.bind(this, null) });
+
+        // Per-category links
+        $lib.each(symbols, (cat, index) =>
+        {
+            $lib.element(this.categoriesEl, '', 'a', catLabels[index + 1] || cat.name, { class: editor.getCssClass(co.SYMBOL_CATEGORY) }, { onclick: this.#selectCategory.bind(this, index) });
+        });
+
+        const cssClass = editor.getCssClass(co.SYMBOL_PICKER_BOX) + ' ' + pickerCssClass;
+        const box = this.cf.createBox(id, cloneId, editor.element, { cssClass: cssClass, content: [this.categoriesEl, this.symbolViewEl] });
+        box.animation.showType = box.animation.hideType = 0;
+        box.events.onShowComplete.priorityAdd(() => { this.#onShow(); });
+        box.events.onHideComplete.priorityAdd(() => { this.#onHide(); });
+
+        box.render();
+        return box;
+    }
+
+    /**
+ * Selects a category index (null = all) and re-renders the symbol grid.
+ * @param {number|null} cat
+ */
+    #selectCategory(cat)
+    {
+        if (cat === undefined)
+            this.selectedCategory = cat = null;
+        else if (cat === this.selectedCategory && this.searchFilter === this.searchEl.value)
+            return;
+
+        this.selectedCategory = cat;
+        this.#renderCategory();
+        this.#updateActiveCategory();
+    }
+
+    #updateActiveCategory()
+    {
+        const activeCssClass = this.editor.getCssClass(this.editor.classOption.ACTIVE);
+        const catCssClass = this.editor.getCssClass(this.editor.classOption.SYMBOL_CATEGORY);
+        const index = this.selectedCategory === null ? 0 : this.selectedCategory + 1;
+
+        this.categoriesEl.querySelectorAll(`.${catCssClass}`).forEach((el, i) =>
+            el.classList.toggle(activeCssClass, i === index));
+    }
+
+    /**
+     * (Re-)renders the symbol grid, applying the current category filter and search term.
+     */
+    #renderCategory()
+    {
+        const selCat = this.selectedCategory,
+            co = this.editor.classOption;
+
+        this.searchFilter = this.searchEl.value.toLowerCase();
+        this.symbolsEl.innerHTML = '';
+
+        $lib.each(this.symbols, (cat, index) =>
+        {
+            if (selCat != null && selCat !== index)
+                return;
+
+            $lib.each(cat.values, (symbol) =>
+            {
+                if (!this.searchFilter || (symbol.name || '').toLowerCase().includes(this.searchFilter))
+                {
+                    $lib.element(
+                        this.symbolsEl, '', 'a', symbol.value,
+                        { class: this.editor.getCssClass(co.SYMBOL), title: symbol.name },
+                        {
+                            onpointerover: this.#showInfo.bind(this, symbol),
+                            onfocus: this.#showInfo.bind(this, symbol),
+                            onclick: this.#selectSymbol.bind(this, symbol)
+                        }
+                    );
+                }
+            });
+
+            if (selCat != null)
+                return false; // stop after the selected category
+        });
+    }
+
+    #onShow()
+    {
+        const sr = this.editor.selectionRange;
+        this.editor.storeRange(sr.ensureTextRange(sr.getRange()).cloneRange());
+        this.searchEl.value = '';
+        this.#selectCategory(this.selectedCategory);
+    }
+
+    #onHide()
+    {
+        const stored = this.editor.getStoredRange(),
+            current = this.editor.selectionRange.getRange();
+
+        if (stored !== current)
+            this.editor.selectionRange.restoreRange(stored);
+
+        setTimeout(() => { this.editor.getEditorElement().focus(); }, 0);
+    }
+
+    #showInfo(symbol)
+    {
+        this.nameEl.textContent = symbol.name;
+    }
+
+    #selectSymbol(symbol, e)
+    {
+        const editor = this.editor;
+
+        editor.activateDocument();
+
+        if (!editor.contentManager.hasContent())
+            editor.contentManager.insertParagraph();
+
+        const node = editor.getDoc().createTextNode(symbol.value);
+
+        editor.contentManager.insertHTML({ node });
+
+        const sr = editor.selectionRange,
+            range = sr.ensureTextRange(sr.getRange());
+
+        editor.storeRange(range);
+        this.box.hide();
+        editor.toolbar.hideBoxes(e);
+    }
+};
+
+var SymbolPicker = componyx.UI.editor_modules.SymbolPicker;
+
+export { SymbolPicker as default };