MenuPanel.js

/**
 * @module package/quiqqer/menu/bin/Controls/Independent/MenuPanel
 * @author www.pcsg.de (Henning Leutz)
 */
define('package/quiqqer/menu/bin/Controls/Independent/MenuPanel', [

    'qui/QUI',
    'qui/controls/desktop/Panel',
    'qui/controls/sitemap/Map',
    'qui/controls/sitemap/Item',
    'qui/controls/windows/Confirm',
    'qui/controls/contextmenu/Menu',
    'qui/controls/contextmenu/Item',
    'qui/controls/contextmenu/Separator',
    'controls/lang/InputMultiLang',
    'Ajax',
    'Locale',
    'package/quiqqer/menu/bin/classes/IndependentHandler',

    'Mustache',
    'text!package/quiqqer/menu/bin/Controls/Independent/MenuPanel.ItemCard.html',
    'text!package/quiqqer/menu/bin/Controls/Independent/MenuPanel.Settings.html',
    'css!package/quiqqer/menu/bin/Controls/Independent/MenuPanel.css'

], function (QUI, QUIPanel, QUIMap, QUIMapItem, QUIConfirm,
             QUIContextMenu, QUIContextMenuItem, QUIContextSeparator, InputMultiLang,
             QUIAjax, QUILocale, IndependentHandler, Mustache, templateItemCard, templateSettings) {
    "use strict";

    const lg = 'quiqqer/menu';

    return new Class({

        Extends: QUIPanel,
        Type   : 'package/quiqqer/menu/bin/Controls/Independent/MenuPanel',

        Binds: [
            '$onShow',
            '$onCreate',
            '$onInject',
            '$openItem',
            '$onContextMenu',
            '$startDeSelect',
            '$openMenuSettings',
            'addItem',
            'save',
        ],

        options: {
            menuId: false
        },

        initialize: function (options) {
            this.parent(options);

            this.$ActiveItem = null;
            this.$ActiveMapItem = null;

            this.$title = null;
            this.$workingTitle = null;
            this.$data = null;

            this.$Map = null;
            this.setAttribute('#id', this.getAttribute('menuId'));

            this.addEvents({
                onShow  : this.$onShow,
                onInject: this.$onInject,
                onCreate: this.$onCreate
            });
        },

        $onCreate: function () {
            this.getContent().addClass('quiqqer-menu-menuPanel');

            // buttons
            this.addButton({
                name  : 'save',
                text  : QUILocale.get('quiqqer/core', 'save'),
                events: {
                    click: this.save
                }
            });

            /*
            this.addButton({
                name  : 'add',
                text  : QUILocale.get('quiqqer/core', 'add'),
                events: {
                    click: () => {
                        this.addItem();
                    }
                }
            });
            */

            this.addButton({
                textimage: 'fa fa-paint-brush',
                name     : 'clearcache',
                text     : QUILocale.get(lg, 'cache.clear.button.title'),
                styles   : {
                    'float': 'right'
                },
                events   : {
                    click: (Btn) => {
                        Btn.disable();
                        Btn.setAttribute('textimage', 'fa fa-spinner fa-spin');
                        QUIAjax.post('package_quiqqer_menu_ajax_backend_independent_clearCache', () => {
                            Btn.setAttribute('textimage', 'fa fa-bars');
                            Btn.enable();

                            QUI.getMessageHandler(function (QUI) {
                                QUI.addSuccess(
                                    QUILocale.get('quiqqer/menu', 'message.menu.publish.successful')
                                );
                            });
                        }, {
                            'package': 'quiqqer/menu',
                            menuId   : this.getAttribute('menuId')
                        });
                    }
                }
            });

            /*
            this.addButton({
                name    : 'delete',
                disabled: true,
                text    : QUILocale.get('quiqqer/core', 'remove'),
                events  : {
                    click: this.addItem
                }
            });
            */

            // content
            this.$MapContainer = new Element('div', {
                'class': 'quiqqer-menu-menuPanel-mapContainer'
            }).inject(this.getContent());

            this.$InnerContainer = new Element('div', {
                'class': 'quiqqer-menu-menuPanel-innerContainer'
            }).inject(this.getContent());

            this.$Map = new QUIMap({}).inject(this.$MapContainer);
        },

        $onInject: function () {
            this.Loader.show();

            Promise.all([
                IndependentHandler.getMenu(this.getAttribute('menuId')),
                this.$getMenuData()
            ]).then((result) => {
                const menuData = result[0];
                const data = result[1];

                this.$data = menuData;
                this.$title = data.title;
                this.$workingTitle = data.workingTitle;

                this.setAttribute('title', menuData.title);
                this.setAttribute('icon', 'fa fa-bars');
                this.refresh();

                const Start = new QUIMapItem({
                    value : 'start',
                    icon  : 'fa fa-home',
                    text  : menuData.title,
                    events: {
                        click   : this.$openMenuSettings,
                        deSelect: this.$startDeSelect,

                        contextMenu: (Item, event) => {
                            event.stop();

                            const pos = Item.getElm().getPosition();
                            const Menu = new QUIContextMenu({
                                events: {
                                    onBlur: function (Instance) {
                                        Instance.hide();
                                        Instance.destroy();
                                    }
                                }
                            });

                            Menu.appendChild(new QUIContextMenuItem({
                                icon  : 'fa fa-level-down',
                                text  : QUILocale.get(lg, 'context.menu.insertChild'),
                                events: {
                                    click: () => {
                                        this.addItem(Item);
                                    }
                                }
                            }));

                            if (Item.getChildren().length > 1) {
                                Menu.appendChild(new QUIContextMenuItem({
                                    icon  : 'fa fa-sort',
                                    text  : QUILocale.get(lg, 'context.menu.sort'),
                                    events: {
                                        click: () => {
                                            this.sortChildren(Item);
                                        }
                                    }
                                }));
                            }

                            Menu.inject(document.body);
                            Menu.setPosition(pos.x, pos.y + 30);
                            Menu.setTitle(Item.getAttribute('text'));
                            Menu.show();
                            Menu.focus();
                        }
                    }
                }).inject(this.$Map);

                Start.click();

                // build sitemap
                if (menuData.data !== null &&
                    typeof menuData.data.children !== 'undefined' &&
                    menuData.data.children.length
                ) {
                    const buildChildren = (Parent, children) => {
                        let i, len, data, Item, text;

                        for (i = 0, len = children.length; i < len; i++) {
                            data = children[i];
                            text = data.titleFrontend;

                            if (text === '' || text === '###') {
                                text = '?';
                            }

                            Item = new QUIMapItem({
                                text     : text,
                                icon     : data.typeIcon,
                                itemTitle: data.title,
                                itemType : data.type,
                                itemIcon : data.icon,
                                itemData : data.data,
                                events   : {
                                    click      : this.$openItem,
                                    contextMenu: this.$onContextMenu
                                }
                            });

                            Parent.appendChild(Item);

                            if (typeof data.data.status !== 'undefined' && data.data.status === 0) {
                                Item.deactivate();
                            }

                            if (typeof data.children !== 'undefined' && data.children.length) {
                                buildChildren(Item, data.children);
                            }
                        }
                    };

                    buildChildren(Start, menuData.data.children);
                }

                Start.open();
                this.Loader.hide();
            });
        },

        $onShow: function () {

        },

        save: function () {
            this.Loader.show();
            this.$unloadCurrentItem();

            // map to array
            const toArray = function (Item) {
                let items = Item.getChildren();

                if (Item.getType() === 'qui/controls/sitemap/Map') {
                    items = Item.$items;
                }

                let children = [];

                for (let i = 0, len = items.length; i < len; i++) {
                    children.push(toArray(items[i]));
                }

                if (Item.getType() === 'qui/controls/sitemap/Map') {
                    return {
                        children: children
                    };
                }

                return {
                    icon    : Item.getAttribute('itemIcon'),
                    title   : Item.getAttribute('itemTitle'),
                    type    : Item.getAttribute('itemType'),
                    data    : Item.getAttribute('itemData'),
                    children: children
                };
            };

            this.setMenuTitle();

            let result = toArray(this.$Map.firstChild());

            return this.$refreshItemDisplay().then(() => {
                return IndependentHandler.saveMenu(
                    this.getAttribute('menuId'),
                    JSON.encode(this.$title),
                    JSON.encode(this.$workingTitle),
                    result
                );
            }).then(() => {
                this.Loader.hide();
            });
        },

        /**
         * Set the title of this.$Map, so the title changes in the left panel.
         * Also set menu title and working title to the variables:
         *   this.$title
         *   this.$workingTitle
         *
         * This function is a small workaround for this user flow:
         *   "User change the menu title (and working title) and save directly the menu by clicking save-button".
         */
        setMenuTitle: function() {
            const selected = this.$Map.getSelectedChildren();

            if (selected.length === 1 && selected[0].getAttribute('value') !== 'start') {
                return;
            }

            const Title = this.$InnerContainer.getElement('[name="title"]');
            const WorkingTitle = this.$InnerContainer.getElement('[name="workingTitle"]');

            if (!Title) {
                return;
            }

            selected[0].setAttribute('itemTitle', Title.value);

            this.$title = JSON.decode(Title.value);
            this.$workingTitle = JSON.decode(WorkingTitle.value);

            let current = QUILocale.getCurrent();

            if (current in this.$title) {
                selected[0].setAttribute('text', this.$title[current]);
                selected[0].setAttribute('title', this.$title[current]);
            }
        },

        addItem: function (Parent, where) {
            if (typeof where === 'undefined') {
                where = 'bottom';
            }

            if (typeof Parent === 'undefined') {
                const items = this.$Map.getSelectedChildren();

                if (items.length) {
                    Parent = items[0];
                } else {
                    Parent = this.$Map;
                }
            }

            new QUIConfirm({
                icon     : 'fa fa-plus',
                title    : QUILocale.get(lg, 'quiqqer.menu.independent.addItem.title'),
                maxHeight: 550,
                maxWidth : 700,
                autoclose: false,
                events   : {
                    onOpen: (Win) => {
                        const Content = Win.getContent();

                        Win.Loader.show();

                        Content.set(
                            'html',

                            `<p>`+ QUILocale.get(lg, 'create.window.text') +
                            '</p>' +
                            '<form style="width: 100%;">' +
                            '   <div class="qui-menuPanel-optionList"></div>' +
                            '</form>'
                        );

                        IndependentHandler.getItemTypes().then((list) => {
                            this.$createOptionList(list, Content);

                            return QUI.parse(Win.getContent());
                        }).then(function () {
                            Win.Loader.hide();
                        });
                    },

                    onSubmit: (Win) => {
                        const Content = Win.getContent();
                        const Form = Content.getElement('form');

                        let type = Form.elements.itemType.value;

                        const Option = Form.getElement(
                            '[value="' + CSS.escape(type) + '"]'
                        );

                        let itemAttributes = {
                            text     : '',
                            icon     : Option.get('data-icon'),
                            itemTitle: '',
                            itemType : Form.elements.itemType.value,
                            itemIcon : '',
                            events   : {
                                click      : this.$openItem,
                                contextMenu: this.$onContextMenu
                            }
                        };

                        let Child;

                        if (where === 'bottom') {
                            Child = new QUIMapItem(itemAttributes);
                            Parent.appendChild(Child);

                            if (typeof Parent === 'function') {
                                Parent.open();
                            }
                        } else {
                            Child = new QUIMapItem(itemAttributes);
                            Parent.appendChild(Child, where);
                        }

                        Win.close();

                        this.save().then(() => {
                            Child.click();
                            this.$ActiveMapItem = Child;

                            return this.$refreshItemDisplay();
                        });
                    }
                }
            }).open();
        },

        /**
         * opens the item type change confirm window
         *
         * @param Item
         */
        changeItemType: function (Item) {
            if (typeof Item === 'undefined') {
                return;
            }

            const itemType = Item.getAttribute('itemType');

            new QUIConfirm({
                icon     : 'fa fa-edit',
                title    : QUILocale.get(lg, 'quiqqer.menu.independent.changeItemType.title'),
                maxHeight: 550,
                maxWidth : 700,
                autoclose: false,
                events   : {
                    onOpen: (Win) => {
                        const Content = Win.getContent();

                        Content.set(
                            'html',

                            `<p>`+ QUILocale.get(lg, 'quiqqer.menu.independent.changeItemType.message') +
                            '</p>' +
                            '<form style="width: 100%;">' +
                            '   <div class="qui-menuPanel-optionList"></div>' +
                            '</form>'
                        );

                        Win.Loader.show();

                        IndependentHandler.getItemTypes().then((list) => {
                            this.$createOptionList(list, Content, itemType);

                            return QUI.parse(Win.getContent());
                        }).then(function () {
                            Win.Loader.hide();
                        });
                    },

                    onSubmit: (Win) => {
                        Win.Loader.show();

                        const Content = Win.getContent();
                        const Form = Content.getElement('form');

                        const type = Form.elements.itemType.value;
                        const Option = Form.getElement(
                            '[value="' + CSS.escape(type) + '"]'
                        );

                        Item.setAttribute('itemType', type);
                        Item.setAttribute('icon', Option.get('data-icon'));

                        if (this.$ActiveMapItem && this.$ActiveMapItem === Item) {
                            Item.click();
                            this.$unloadCurrentItem();
                            this.$refreshItemDisplay().catch(console.error);
                        }

                        Win.close();
                    }
                }
            }).open();
        },

        /**
         * Create custom option list based on passed list of menu types
         *
         * @param list
         * @param Content
         * @param selected
         */
        $createOptionList: function(list, Content, selected = false) {
            const OptionsList = Content.getElement('.qui-menuPanel-optionList'),
                selectedItem = selected ? selected : 'QUI\\Menu\\Independent\\Items\\Site';

            const toggleSelected = function(event) {
                OptionsList.getElements('label').forEach(function(Label) {
                    Label.classList.remove('checked');
                });

                event.target.getParent('label').classList.add('checked');
            };

            for (let i = 0, len = list.length; i < len; i++) {
                const Item = list[i];
                const Label = new Element('label', {
                    'class': 'qui-menuPanel-optionList__option',
                    html: Mustache.render(templateItemCard, {
                        title: Item.title,
                        desc: Item.desc,
                        icon: Item.icon,
                        value: Item.class
                    })
                });

                if (Item.class === selectedItem) {
                    Label.querySelector('input').checked = true;
                    Label.classList.add('checked');
                }

                Label.inject(OptionsList);
                Label.getElement('input').addEventListener('change', toggleSelected);
            }
        },

        /**
         * @param Item
         */
        sortChildren: function (Item) {
            if (typeof Item === 'undefined') {
                return;
            }

            require([
                'package/quiqqer/menu/bin/Controls/Independent/MenuItemsSorting'
            ], function (MenuItemSorting) {
                new MenuItemSorting({
                    Item  : Item,
                    events: {
                        onSubmit: function (Instance, list) {
                            Item.$items = list;
                            Item.refresh();
                        }
                    }
                }).open();
            });
        },

        /**
         * opens the item - display the item data
         *
         * @param Item
         */
        $openItem: function (Item) {
            this.Loader.show();
            this.$unloadCurrentItem();

            return this.$refreshItemDisplay().then(() => {
                this.$InnerContainer.set('html', '');
                this.$ActiveItem = null;
                this.$ActiveMapItem = null;

                return IndependentHandler.getItemTypes();
            }).then((list) => {
                let control = '';
                let type = Item.getAttribute('itemType');

                for (let i = 0, len = list.length; i < len; i++) {
                    if (list[i].class === type) {
                        control = list[i].jsControl;
                        break;
                    }
                }

                if (control === '') {
                    this.Loader.hide();
                    return;
                }

                require([control], (cls) => {
                    const SitemapItem = this.$getActiveSitemapItem();
                    this.$ActiveMapItem = this.$getActiveSitemapItem();

                    this.$ActiveItem = new cls({
                        title : SitemapItem.getAttribute('itemTitle'),
                        type  : SitemapItem.getAttribute('itemType'),
                        icon  : SitemapItem.getAttribute('itemIcon'),
                        data  : SitemapItem.getAttribute('itemData'),
                        events: {
                            load: () => {
                                this.Loader.hide();
                            }
                        }
                    }).inject(this.$InnerContainer);
                }, (err) => {
                    console.error(err);
                    this.Loader.hide();
                });
            });
        },

        $openMenuSettings: function () {
            this.Loader.show();
            this.$unloadCurrentItem();

            return this.$refreshItemDisplay().then(() => {
                this.$ActiveItem = null;
                this.$ActiveMapItem = null;
                this.$InnerContainer.set('html', Mustache.render(templateSettings, {
                    title        : QUILocale.get('quiqqer/menu', 'menu.title'),
                    workingTitle: QUILocale.get('quiqqer/menu', 'menu.workingTitle')
                }));

                const TitleNode = this.$InnerContainer.getElement('[name="title"]'),
                WorkingTitleNode = this.$InnerContainer.getElement('[name="workingTitle"]');

                TitleNode.set('value', JSON.stringify(this.$title));
                WorkingTitleNode.set('value', JSON.stringify(this.$workingTitle));
            }).then(() => {
                return QUI.parse(this.$InnerContainer);
            }).then(() => {
                // set values

                this.Loader.hide();
            });
        },

        $startDeSelect: function () {
            const Title = this.$InnerContainer.getElement('[name="title"]');
            const WorkingTitle = this.$InnerContainer.getElement('[name="workingTitle"]');

            if (!Title) {
                return;
            }

            // save first item
            const selected = this.$Map.getSelectedChildren();

            if (selected.length === 1 && selected[0].getAttribute('value') === 'start' && Title) {
                selected[0].setAttribute('itemTitle', Title.value);

                this.$title = JSON.decode(Title.value);
                this.$workingTitle = JSON.decode(WorkingTitle.value);

                let current = QUILocale.getCurrent();

                if (current in this.$title) {
                    selected[0].setAttribute('text', this.$title[current]);
                    selected[0].setAttribute('title', this.$title[current]);
                }
            }
        },

        /**
         * Unloads the current sitemap item
         * The save method of the current active control is executed
         */
        $unloadCurrentItem: function () {
            if (!this.$ActiveItem) {
                return;
            }

            if (typeof this.$ActiveItem.save !== 'function') {
                return;
            }

            const data = this.$ActiveItem.save();

            if (!this.$ActiveMapItem) {
                return;
            }

            const ActiveItem = this.$ActiveMapItem;

            ActiveItem.setAttribute('itemTitle', data.title);
            ActiveItem.setAttribute('itemIcon', data.icon);
            ActiveItem.setAttribute('itemData', data.data);
        },

        /**
         * Refresh the name of the active map item
         *
         * @returns {Promise}
         */
        $refreshItemDisplay: function () {
            const Item = this.$ActiveMapItem;

            if (Item === null) {
                return Promise.resolve();
            }

            // check status
            const data = Item.getAttribute('itemData');

            if (typeof data.status !== 'undefined' && data.status === 0) {
                Item.deactivate();
            } else {
                Item.activate();
            }

            // check name
            return new Promise(function (resolve, reject) {
                QUIAjax.get('package_quiqqer_menu_ajax_backend_independent_getItemTitle', (name) => {
                    if (name === '') {
                        name = '?';
                    }

                    Item.setAttribute('text', name);
                    resolve();
                }, {
                    'package': 'quiqqer/menu',
                    item     : JSON.encode({
                        icon : Item.getAttribute('itemIcon'),
                        title: Item.getAttribute('itemTitle'),
                        type : Item.getAttribute('itemType'),
                        data : Item.getAttribute('itemData'),
                    }),
                    onError  : reject
                });
            });
        },

        /**
         * Return the active item of the sitemap
         *
         * @returns {null|*}
         */
        $getActiveSitemapItem: function () {
            const item = this.$Map.getSelectedChildren();

            if (item.length) {
                return item[0];
            }

            return null;
        },

        /**
         * Context menu für a sitemap item
         *
         * @param Item
         * @param event
         */
        $onContextMenu: function (Item, event) {
            event.stop();

            const pos = Item.getElm().getPosition();

            const Menu = new QUIContextMenu({
                events: {
                    onBlur: function (Instance) {
                        Instance.hide();
                        Instance.destroy();
                    }
                }
            });

            Menu.appendChild(new QUIContextMenuItem({
                icon  : 'fa fa-arrow-up',
                text  : QUILocale.get(lg, 'context.menu.insertBefore'),
                events: {
                    click: () => {
                        this.addItem(Item, 'before');
                    }
                }
            }));

            Menu.appendChild(new QUIContextMenuItem({
                icon  : 'fa fa-arrow-down',
                text  : QUILocale.get(lg, 'context.menu.insertAfter'),
                events: {
                    click: () => {
                        this.addItem(Item, 'after');
                    }
                }
            }));

            Menu.appendChild(new QUIContextMenuItem({
                icon  : 'fa fa-level-down',
                text  : QUILocale.get(lg, 'context.menu.insertChild'),
                events: {
                    click: () => {
                        this.addItem(Item);
                    }
                }
            }));

            Menu.appendChild(new QUIContextSeparator({}));

            Menu.appendChild(new QUIContextMenuItem({
                icon  : 'fa fa-edit',
                text  : QUILocale.get(lg, 'context.menu.changeType'),
                events: {
                    click: () => {
                        this.changeItemType(Item);
                    }
                }
            }));

            if (Item.getChildren().length > 1) {
                Menu.appendChild(new QUIContextMenuItem({
                    icon  : 'fa fa-sort',
                    text  : QUILocale.get(lg, 'context.menu.sort'),
                    events: {
                        click: () => {
                            this.sortChildren(Item);
                        }
                    }
                }));
            }

            Menu.appendChild(new QUIContextSeparator({}));

            Menu.appendChild(new QUIContextMenuItem({
                icon  : 'fa fa-trash',
                text  : QUILocale.get(lg, 'context.menu.deleteChild'),
                events: {
                    click: () => {
                        new QUIConfirm({
                            icon       : 'fa fa-trash',
                            texticon   : 'fa fa-trash',
                            title      : QUILocale.get(lg, 'window.deleteItem.title'),
                            information: QUILocale.get(lg, 'window.deleteItem.information', {
                                entry: Item.getAttribute('text')
                            }),
                            text       : QUILocale.get(lg, 'window.deleteItem.text'),
                            maxHeight  : 300,
                            maxWidth   : 500,
                            events     : {
                                submit: () => {
                                    Item.destroy();
                                    this.save();
                                }
                            }
                        }).open();
                    }
                }
            }));

            Menu.inject(document.body);
            Menu.setPosition(pos.x, pos.y + 30);
            Menu.setTitle(Item.getAttribute('text'));
            Menu.show();
            Menu.focus();
        },

        $getMenuData: function () {
            return new Promise((resolve, reject) => {
                QUIAjax.get('package_quiqqer_menu_ajax_backend_independent_getData', resolve, {
                    'package': 'quiqqer/menu',
                    id       : this.getAttribute('menuId'),
                    onError  : reject
                });
            });
        }
    });
});