@componyx/ui 0.0.0-stage → 1.0.4

package/Editor/Modules/ListManager.js

@@ -0,0 +1,296 @@
+/*! Componyx.UI | (c) E.H. Daanen / Componyx | BUSL-1.1 | componyx.com/license */
+componyx.UI.editor_modules = componyx.UI.editor_modules || {};
+
+/**
+ * ListManager module - manages list operations.
+ * @class ListManager
+ * @memberof componyx.UI.editor_modules
+ * @ignore
+ */
+componyx.UI.editor_modules.ListManager = class ListManager
+{
+    constructor(editor)
+    {
+        this.editor = editor;
+        this.utility = editor.utility;
+    }
+
+    /**
+     * Toggles a list item node.
+     * @param {string} tag
+     * @param {boolean} on
+     */
+    toggleListItem(tag, on)
+    {
+        this.editor.activateDocument();
+
+        if (!this.editor.contentManager.hasContent())
+            this.editor.contentManager.insertParagraph();
+
+        let selection = this.editor.selectionRange,
+            range = selection.getRange(),
+            nodesInRange = selection.getNodesInRange(range),
+            selectedListItems = selection.getListItemNodesInRange(nodesInRange),
+            rootNodes = selection.getRootNodesInRange(range, nodesInRange, false),
+            marker = selection.createRangeMarker(selection.ensureTextRange(range)),
+            type = this.editor.menuManager.getSelectedItemId(tag),
+            prop = 'list-style-type',
+            styles = {}, clear = false;
+
+        if (type)
+            type = type.replace(`${tag}_`, '');
+
+        if (type == 'disc' || type == 'decimal')
+        {
+            clear = true;
+            styles[prop] = null;
+        }
+        else
+            styles[prop] = type;
+
+        $lib.each(rootNodes, (rootNode) =>
+        {
+            if (rootNode.nodeName == tag) // list-node
+            {
+                if (on)
+                    this.editor.format.updateNodeStyles(rootNode, styles, clear);
+                else
+                {
+                    let listNode = rootNode, parentListNode;
+
+                    while (listNode)
+                    {
+                        parentListNode = this.editor.nodeManager.getListNode(listNode.parentElement, this.editor.getEditorElement());
+                        this.decreaseListIndent(listNode, selectedListItems, (parentListNode) ? false : true);
+                        listNode = parentListNode;
+                    }
+                }
+            }
+            else
+            {
+                let layoutNode = this.editor.format.updateNodeStyles($lib.element('', '', tag), styles);
+
+                if (this.utility.listFilter.indexOf(rootNode.nodeName) == -1)
+                    layoutNode.appendChild($lib.element('', '', 'li'));
+
+                rootNode.style.removeProperty(prop);
+                this.editor.nodeManager.setBlockElement(rootNode, this.editor.nodeManager.getRootNode(layoutNode).cloneNode(true));
+            }
+        });
+
+        this.editor.history.addItem(range, marker);
+        this.editor.deactivateDocument();
+    }
+
+    /**
+     * Toggles a list item node type.
+     * @param {string} tag
+     */
+    toggleListItemType(tag)
+    {
+        this.toggleListItem(tag, true);
+    }
+
+    /**
+     * Increases the indent of the specified list-item node.
+     * @param {Node} node
+     */
+    increaseListIndent(node)
+    {
+        let nodeName = node.parentElement.nodeName,
+            list = node.querySelector(this.utility.listFilter),
+            prev = (node.previousElementSibling && node.previousElementSibling.nodeName == 'LI') ? node.previousElementSibling : null,
+            next = (node.nextElementSibling && node.nextElementSibling.nodeName == 'LI') ? node.nextElementSibling : null,
+            nextList = (next && next.firstChild && this.utility.listFilter.indexOf(next.firstChild.nodeName) > -1) ? next.firstChild : null,
+            removeList = (list) =>
+            {
+                let parentItem = list.parentElement;
+                list.remove();
+
+                if (!parentItem.childNodes.length)
+                    parentItem.remove();
+            };
+
+        if (prev)
+        {
+            let prevList = prev.querySelector(this.utility.listFilter);
+
+            if (!prevList)
+                prevList = $lib.element(prev, '', nodeName);
+
+            prevList.appendChild(node);
+
+            if (list)
+            {
+                prevList.insertBefore($lib.extract(list), node.nextSibling);
+                removeList(list);
+            }
+
+            if (nextList)
+            {
+                prevList.appendChild($lib.extract(nextList));
+                removeList(nextList);
+            }
+        }
+        else if (nextList)
+        {
+            nextList.insertBefore(node, nextList.firstChild);
+
+            if (list)
+            {
+                nextList.insertBefore($lib.extract(list), node.nextSibling);
+                removeList(list);
+            }
+        }
+        else if (list)
+        {
+            let liBefore = node.cloneNode(false);
+
+            liBefore.appendChild(this.editor.nodeManager.getNodesBefore(node, list));
+            list.insertBefore(liBefore, list.firstChild);
+            node.style.listStyleType = 'none';
+
+            let after = this.editor.nodeManager.sibling(list, node);
+
+            if (after)
+            {
+                list.remove();
+
+                let fragmentAfter = $lib.extract(node);
+
+                if (fragmentAfter.childNodes.length)
+                {
+                    let liAfter = node.cloneNode(false);
+                    liAfter.appendChild(fragmentAfter);
+                    list.appendChild(liAfter);
+                }
+
+                node.appendChild(list);
+            }
+        }
+        else // create deeper list
+        {
+            let li = node.cloneNode(true);
+
+            node.style.listStyleType = 'none';
+            node.innerHTML = '';
+            node.appendChild($lib.element('', '', nodeName, li));
+        }
+    }
+
+    /**
+     * Decreases the indent of the selected list-item nodes of the specified list node.
+     * @param {Node} listNode
+     * @param {Set<Node>} selectedListItems
+     * @param {boolean} removeSelected
+     */
+    decreaseListIndent(listNode, selectedListItems, removeSelected = true)
+    {
+        let li = listNode.firstElementChild,
+            listNodeParent = listNode.parentElement,
+            listNodeSibling = listNode.nextElementSibling,
+            fragmentSelected = this.editor.getDoc().createDocumentFragment(),
+            fragmentAfter = this.editor.getDoc().createDocumentFragment(),
+            childListNode, afterListNode, node, next, p;
+
+        while (li)
+        {
+            if (!selectedListItems.has(li))
+                li = (!next) ? li.nextElementSibling : null;
+            else
+            {
+                if (removeSelected)
+                    selectedListItems.delete(li);
+
+                next = li.nextElementSibling;
+                fragmentSelected.appendChild(li);
+                childListNode = li.querySelector(this.utility.listFilter);
+                li = next;
+
+                if (childListNode) // keep same depth level
+                    this.increaseListDepth(childListNode);
+            }
+        }
+
+        if (next) // copy to new list-node
+        {
+            node = next;
+
+            while (node)
+            {
+                next = node.nextElementSibling;
+                fragmentAfter.appendChild(node);
+                node = next;
+            }
+        }
+
+        if (listNodeParent.nodeName == 'LI') // add selected LI's to parent list-node
+        {
+            let lastItem = fragmentSelected.lastChild;
+            listNodeParent.parentElement.insertBefore(fragmentSelected, listNodeParent.nextElementSibling);
+
+            childListNode = listNodeParent.firstElementChild;
+
+            if (this.utility.listFilter.indexOf(childListNode.nodeName) > -1 && !childListNode.childNodes.length)
+                childListNode.remove();
+
+            if (fragmentAfter.childNodes.length)
+            {
+                afterListNode = lastItem.querySelector(this.utility.listFilter);
+
+                if (!afterListNode)
+                    afterListNode = $lib.element(lastItem, '', listNode.nodeName);
+            }
+        }
+        else // add selected LI's as P tags
+        {
+            while (node = fragmentSelected.firstChild)
+            {
+                p = $lib.element('', '', 'p', $lib.extract(node));
+                listNodeParent.insertBefore(p, listNodeSibling);
+                node.remove();
+            }
+
+            if (fragmentAfter.childNodes.length)
+            {
+                afterListNode = $lib.element('', '', listNode.nodeName);
+                listNodeParent.insertBefore(afterListNode, listNodeSibling);
+            }
+        }
+
+        if (afterListNode)
+            afterListNode.appendChild(fragmentAfter); // add unselected list-item's at the bottom
+
+        if (!listNode.childNodes.length)
+            listNode.remove();
+    }
+
+    /**
+     * Increases the depth of the list.
+     * @param {Node} listNode
+     */
+    increaseListDepth(listNode)
+    {
+        let ul = $lib.element('', '', listNode.nodeName),
+            li = $lib.element('', '', 'li', '', { style: 'list-style-type: none' });
+
+        $lib.surround(li, listNode);
+        $lib.surround(ul, li);
+    }
+
+    /**
+     * Returns a value indicating if the caret is at the start of a list item (<li>).
+     * @param {Range} range
+     */
+    isCaretAtListItemStart(range)
+    {
+        let sContainer = range.startContainer,
+            el = (sContainer.nodeType == 3) ? sContainer.parentElement : sContainer;
+
+        return (range.startOffset == 0 && el.nodeName == 'LI');
+    }
+};
+
+var ListManager = componyx.UI.editor_modules.ListManager;
+
+export { ListManager as default };

package/Editor/Modules/MenuManager.js

@@ -0,0 +1,388 @@
+/*! Componyx.UI | (c) E.H. Daanen / Componyx | BUSL-1.1 | componyx.com/license */
+componyx.UI.editor_modules = componyx.UI.editor_modules || {};
+
+/**
+ * MenuManager module - menu and toolbar operations.
+ * @class MenuManager
+ * @memberof componyx.UI.editor_modules
+ * @ignore
+ */
+componyx.UI.editor_modules.MenuManager = class MenuManager
+{
+    constructor(editor)
+    {
+        this.editor = editor;
+        this.cf = editor.componentFactory;
+        this.utility = editor.utility;
+        this.menu = null;
+        this.defaultMenuButton = null;
+    }
+
+    /**
+     * Loads a menu item
+     * @param {string} menuItemId
+     */
+    loadMenuItem(menuItemId)
+    {
+        return this.menu.loadItem(menuItemId);
+    }
+
+    /**
+     * Renders a menu item
+     * @param {string} itemId
+     */
+    renderMenuItem(itemId)
+    {
+        let itemPath = this.loadMenuItem(itemId);
+        if (itemPath)
+            this.menu.renderItem(itemPath.item);
+    }
+
+    /**
+     * Selects a menu item
+     * @param {string} menuItemId
+     */
+    selectMenuItem(menuItemId)
+    {
+        this.menu.selectItem(menuItemId);
+    }
+
+    /**
+     * Deselects a menu item
+     * @param {string} menuItemId
+     */
+    deselectMenuItem(menuItemId)
+    {
+        this.menu.deselectItem(menuItemId);
+    }
+
+    /**
+     * Gets selected item id
+     * @param {string} groupId
+     */
+    getSelectedItemId(groupId)
+    {
+        return this.menu.getSelectedItemId(groupId);
+    }
+
+    /**
+     * Gets the menu
+     */
+    getMenu()
+    {
+        return this.menu;
+    }
+
+    /** Creates the menu. */
+    async createMenu()
+    {
+        this.menu = this.cf.createMenu('Menu', this.editor.menuId, this.editor.element);
+
+        let list = this.menu.itemList;
+
+        this.#createDefaultMenuButton();
+        list.push(this.#createMenuItem({ id: 'Block' }));
+        list.push(this.#createMenuItem({ id: 'FontFamily' }));
+        list.push(this.#createMenuItem({ id: 'FontSize' }));
+        list.push(this.#createMenuItem({ id: 'Style' }));
+        list.push(this.#createMenuItem({ id: 'Align' }));
+        list.push(this.#createMenuItem({ id: 'LineHeight' }));
+        list.push(this.#createMenuItem({ id: 'OrderedList', cssClassItemGroup: 'item-group box ordered-list' }));
+        list.push(this.#createMenuItem({ id: 'UnorderedList', cssClassItemGroup: 'item-group box unordered-list' }));
+
+        this.#buildBlockMenu();
+        this.buildFontSizeMenu(this.editor.fontSizes);
+        this.#buildStyleMenu();
+        this.#buildAlignMenu();
+        this.#buildLineHeightMenu();
+        this.#buildListItemMenu(this.menu.itemList[6], 'OL', this.editor.orderedList);
+        this.#buildListItemMenu(this.menu.itemList[7], 'UL', this.editor.unorderedList);
+        await this.#buildFontFamilyMenu();
+
+    }
+
+    /**
+     * Builds the font size menu
+     * @param {string[]} fontSizes
+     */
+    buildFontSizeMenu(fontSizes)
+    {
+        let lastUnit,
+            rootItem = this.menu.itemList[2],
+            cat = 'fontSize';
+
+        if (!rootItem.itemList.length)
+            rootItem.itemList.push(this.#createDefaultMenuItem(cat, this.editor.setFontSize.bind(this.editor, null)));
+
+        $lib.each(fontSizes, (f) =>
+        {
+            let unit = f.replace(/([^\d])/g, '');
+            let item = {
+                id: `${cat}_${f}`,
+                value: f,
+                text: f,
+                command: this.editor.setFontSize.bind(this.editor, f),
+                radioGroupId: cat
+            };
+
+            if (lastUnit && unit != lastUnit)
+                item.cssClass = 'first-type';
+
+            rootItem.itemList.push(this.#createMenuItem(item));
+            lastUnit = unit;
+        });
+
+        rootItem.itemList.sort((a, b) =>
+        {
+            return parseFloat(a.value) - parseFloat(b.value)
+        });
+    }
+
+    /** Creates the default menu button. */
+    #createDefaultMenuButton()
+    {
+        this.defaultMenuButton = $UI.createComponent(componyx.UI.Button, {
+            id: this.utility.getId('DefaultMenuButton'),
+            primary: false
+        });
+    }
+
+    /**
+     * Creates a default menu item
+     * @param {string} cat
+     * @param {Function} command
+     */
+    #createDefaultMenuItem(cat, command)
+    {
+        return this.#createMenuItem({
+            id: `${cat}_Default`,
+            text: this.editor.labels.default,
+            radioGroupId: cat,
+            command: command
+        });
+    }
+
+    /**
+     * Creates a menu item.
+     * @param {Object} props
+     */
+    #createMenuItem(props)
+    {
+        props.type = 2; // radio button type
+
+        if (!props.buttonId)
+            props.buttonId = this.defaultMenuButton.id;
+
+        return new componyx.UI.Menu.Item(props);
+    }
+
+    /** Builds the block menu. */
+    #buildBlockMenu()
+    {
+        let item = this.menu.itemList[0],
+            groupId = 'block',
+            fn = (id, text, templateId, command, groupId) =>
+            {
+                return this.#createMenuItem({
+                    id: groupId + '_' + id,
+                    value: id,
+                    text: (this.editor.labels[id]) ? this.editor.labels[id] : text,
+                    templateId: templateId,
+                    command: command,
+                    radioGroupId: groupId
+                });
+            };
+
+        for (let i = 1; i < 7; ++i) // add headings
+        {
+            let id = `H${i}`;
+            item.itemList.push(fn(id, `Heading ${i}`, id + '_Template', this.editor.setBlock.bind(this.editor, `h${i}`, null), groupId));
+            this.menu.addTemplate(id + '_Template', `<h${i}>{text}</h${i}>`);
+        }
+
+        item.itemList.push(fn('P', `Paragraph`, 'Paragraph_Template', this.editor.setBlock.bind(this.editor, 'p', null), groupId));
+        this.menu.addTemplate('Paragraph_Template', `<p>{text}</p>`);
+
+        item.itemList.push(fn('PRE', `Pre`, 'Pre_Template', this.editor.setBlock.bind(this.editor, 'pre', null), groupId));
+        this.menu.addTemplate('Pre_Template', `<pre>{text}</pre>`);
+    }
+
+    /** Builds the font family menu. */
+    async #buildFontFamilyMenu()
+    {
+        let docFonts = document.fonts;
+        await docFonts.ready;
+        let seen = new Set();
+
+        const fonts = [];
+
+        if (this.editor.detectFonts)
+        {
+            docFonts.forEach((f) =>
+            {
+                let family = f.family;
+
+                if (!seen.has(family))
+                {
+                    fonts.push(family);
+                    seen.add(family);
+                }
+            });
+        }
+
+        if (this.editor.includeWebSafeFonts)
+        {
+            let webFonts = this.utility.webFonts;
+
+            $lib.each(webFonts, (f) =>
+            {
+                if (!seen.has(f) && docFonts.check(`12px "${f}"`))
+                {
+                    fonts.push(f);
+                    seen.add(f);
+                }
+            });
+        }
+
+        $lib.each(this.editor.fonts, (f) =>
+        {
+            if (!seen.has(f))
+            {
+                fonts.push(f);
+                seen.add(f);
+            }
+        });
+
+        $lib.each(this.editor.excludeFonts, (f) =>
+        {
+            if (seen.has(f))
+            {
+                let index = fonts.indexOf(f);
+                if (index > -1)
+                    fonts.splice(index, 1);
+            }
+        });
+
+        let rootItem = this.menu.itemList[1],
+            cat = 'fontFamily';
+
+        rootItem.itemList.push(this.#createDefaultMenuItem(cat, this.editor.setFontFamily.bind(this.editor, null)));
+
+        $lib.each(fonts.sort(), (f) =>
+        {
+            rootItem.itemList.push(this.#createMenuItem({
+                id: `${cat}_${f}`,
+                value: f,
+                text: f,
+                command: this.editor.setFontFamily.bind(this.editor, f),
+                radioGroupId: 'fontFamily'
+            }));
+        });
+    }
+
+    /** Builds the style menu. */
+    #buildStyleMenu()
+    {
+        let rootItem = this.menu.itemList[3],
+            templateId = 'StyleItem_Template';
+
+        this.menu.addTemplate(templateId, `<div class="style-item"><div class="preview {previewCssClass}"></div><div class="text">{text}</div></div>`);
+
+        $lib.each(this.editor.styles, (s) => 
+        {
+            rootItem.itemList.push(this.#createStyleItem(s));
+        });
+    }
+
+    /**
+     * Creates a style item.
+     * @param {Object} s
+     */
+    #createStyleItem(s)
+    {
+        let menuItem = this.#createMenuItem({
+            id: s.id,
+            text: s.name,
+            templateId: s.templateId || 'StyleItem_Template',
+            command: this.editor.setStyle.bind(this.editor, s),
+            radioGroupId: 'style',
+            isCategory: s.isCategory,
+            attributes: { previewCssClass: s.previewCssClass }
+        });
+
+        $lib.each(s.itemList, (item) =>
+        {
+            menuItem.itemList.push(this.#createStyleItem(item));
+        });
+
+        return menuItem;
+    }
+
+    /** Builds the alignment menu. */
+    #buildAlignMenu()
+    {
+        let rootItem = this.menu.itemList[4],
+            lbl = this.editor.labels,
+            cat = 'align',
+            iconPrefix = this.utility.iconPrefix;
+
+        rootItem.itemList.push(this.#createDefaultMenuItem(cat, this.editor.align.bind(this.editor, null)));
+
+        $lib.each([`${cat}Left`, `${cat}Center`, `${cat}Right`, `${cat}Justify`], (val) =>
+        {
+            let icon = `icon ${iconPrefix + val.replace('align', 'align-').toLowerCase()}`,
+                item = {
+                    id: val.replace('align', 'align_').toLowerCase(),
+                    text: `<span class="${icon}"></span>${lbl[val]}`,
+                    command: this.editor.align.bind(this.editor, val.toLowerCase().replace('align', '')),
+                    radioGroupId: cat
+                };
+            rootItem.itemList.push(this.#createMenuItem(item));
+        });
+    }
+
+    /** Builds the lineheight menu. */
+    #buildLineHeightMenu()
+    {
+        let rootItem = this.menu.itemList[5],
+            cat = 'lineHeight';
+
+        rootItem.itemList.push(this.#createDefaultMenuItem(cat, this.editor.lineHeight.bind(this.editor, null)));
+
+        $lib.each(this.editor.lineHeights, (val) =>
+        {
+            rootItem.itemList.push(this.#createMenuItem({
+                id: `${cat}_${val}`,
+                text: val,
+                command: this.editor.lineHeight.bind(this.editor, val),
+                radioGroupId: 'lineHeight',
+            }));
+        });
+    }
+
+    /**
+     * Builds the list-item menu.
+     * @param {Object} rootItem
+     * @param {string} prefix
+     * @param {Array} list
+     */
+    #buildListItemMenu(rootItem, prefix, list)
+    {
+        let iconPrefix = this.utility.iconPrefix;
+
+        $lib.each(list, (val) =>
+        {
+            rootItem.itemList.push(this.#createMenuItem({
+                id: `${prefix}_${val}`,
+                command: () => this.editor.listManager.toggleListItemType(prefix),
+                radioGroupId: prefix,
+                cssClassIcon: `icon ico-xl ${iconPrefix}list-${val.toLowerCase()}`,
+                hasIcon: true
+            }));
+        });
+    }
+};
+
+var MenuManager = componyx.UI.editor_modules.MenuManager;
+
+export { MenuManager as default };