editor.js/modules/toolbar/settings.js

/**
 * Toolbar settings
 *
 * @version 1.0.4
 */

module.exports = (function (settings) {

    let editor = codex.editor;

    settings.opened = false;

    settings.setting = null;
    settings.actions = null;

    settings.cover = null;

    /**
     * Append and open settings
     */
    settings.open = function (toolType) {

        /**
         * Append settings content
         * It's stored in tool.settings
         */
        if (!editor.tools[toolType] || !editor.tools[toolType].makeSettings ) {

            editor.core.log(`Plugin «${toolType}» has no settings`, 'warn');
            // editor.nodes.pluginSettings.innerHTML = `Плагин «${toolType}» не имеет настроек`;

        } else {

            /**
             * Draw settings block
             */
            var settingsBlock = editor.tools[toolType].makeSettings();

            editor.nodes.pluginSettings.appendChild(settingsBlock);

        }

        /** Open settings block */
        editor.nodes.blockSettings.classList.add('opened');
        editor.toolbar.settings.addDefaultSettings();
        this.opened = true;

    };

    /**
     * Close and clear settings
     */
    settings.close = function () {

        editor.nodes.blockSettings.classList.remove('opened');
        editor.nodes.pluginSettings.innerHTML = '';

        this.opened = false;

    };

    /**
     * @param {string} toolType - plugin type
     */
    settings.toggle = function ( toolType ) {

        if ( !this.opened ) {

            this.open(toolType);
            editor.anchors.settingsOpened(editor.content.currentNode);

        } else {

            this.close();

        }

    };

    /**
     * This function adds default core settings
     */
    settings.addDefaultSettings = function () {

        /** list of default settings */
        var feedModeToggler,
            anchorInput;

        /** Clear block and append initialized settings */
        editor.nodes.defaultSettings.innerHTML = '';


        /** Init all default setting buttons */
        feedModeToggler = editor.toolbar.settings.makeFeedModeToggler();
        anchorInput     = editor.toolbar.settings.makeAnchorInput();

        /**
         * Fill defaultSettings
         */

        /**
         * Input for anchor for block
         */
        editor.nodes.defaultSettings.appendChild(anchorInput);

        /**
         * Button that enables/disables Feed-mode
         * Feed-mode means that block will be showed in articles-feed like cover
         */
        editor.nodes.defaultSettings.appendChild(feedModeToggler);

    };

    /**
     * Cover setting.
     * This tune highlights block, so that it may be used for showing target block on main page
     * Draw different setting when block is marked for main page
     * If TRUE, then we show button that removes this selection
     * Also defined setting "Click" events will be listened and have separate callbacks
     *
     * @return {Element} node/button that we place in default settings block
     */
    settings.makeFeedModeToggler = function () {

        var isFeedModeActivated = editor.toolbar.settings.isFeedModeActivated(),
            setting,
            data;

        if (!isFeedModeActivated) {

            data = {
                innerHTML : '<i class="ce-icon-newspaper"></i>Вывести в ленте'
            };

        } else {

            data = {
                innerHTML : '<i class="ce-icon-newspaper"></i>Не выводить в ленте'
            };

        }

        setting = editor.draw.node('DIV', editor.ui.className.SETTINGS_ITEM, data);
        editor.listeners.add(setting, 'click', editor.toolbar.settings.updateFeedMode, false);

        return setting;

    };

    /**
     * Updates Feed-mode
     */
    settings.updateFeedMode = function () {

        var currentNode = editor.content.currentNode;

        currentNode.classList.toggle(editor.ui.className.BLOCK_IN_FEED_MODE);

        editor.toolbar.settings.close();

    };

    settings.isFeedModeActivated = function () {

        var currentBlock = editor.content.currentNode;

        if (currentBlock) {

            return currentBlock.classList.contains(editor.ui.className.BLOCK_IN_FEED_MODE);

        } else {

            return false;

        }

    };

    settings.makeAnchorInput = function () {

        var anchorWrapper = editor.draw.node('div', 'ce-settings__anchor-wrapper ce-settings__item', {}),
            hash   = editor.draw.node('i', 'ce-settings__anchor-hash', {}),
            anchor = editor.draw.node('input', 'ce-settings__anchor-input', { placeholder: 'Якорь' });

        editor.listeners.add(anchor, 'keydown', editor.anchors.keyDownOnAnchorInput );
        editor.listeners.add(anchor, 'keyup', editor.anchors.keyUpOnAnchorInput );
        editor.listeners.add(anchor, 'input', editor.anchors.anchorChanged );
        editor.listeners.add(anchor, 'blur', editor.anchors.anchorChanged );

        anchorWrapper.appendChild(hash);
        anchorWrapper.appendChild(anchor);

        editor.anchors.input = anchor;

        return anchorWrapper;

    };

    /**
     * Here we will draw buttons and add listeners to components
     */
    settings.makeRemoveBlockButton = function () {

        var removeBlockWrapper  = editor.draw.node('SPAN', 'ce-toolbar__remove-btn', {}),
            settingButton = editor.draw.node('SPAN', 'ce-toolbar__remove-setting', { innerHTML : '<i class="ce-icon-trash"></i>' }),
            actionWrapper = editor.draw.node('DIV', 'ce-toolbar__remove-confirmation', {}),
            confirmAction = editor.draw.node('DIV', 'ce-toolbar__remove-confirm', { textContent : 'Удалить блок' }),
            cancelAction  = editor.draw.node('DIV', 'ce-toolbar__remove-cancel', { textContent : 'Отмена' });

        editor.listeners.add(settingButton, 'click', editor.toolbar.settings.removeButtonClicked, false);

        editor.listeners.add(confirmAction, 'click', editor.toolbar.settings.confirmRemovingRequest, false);

        editor.listeners.add(cancelAction, 'click', editor.toolbar.settings.cancelRemovingRequest, false);

        actionWrapper.appendChild(confirmAction);
        actionWrapper.appendChild(cancelAction);

        removeBlockWrapper.appendChild(settingButton);
        removeBlockWrapper.appendChild(actionWrapper);

        /** Save setting */
        editor.toolbar.settings.setting = settingButton;
        editor.toolbar.settings.actions = actionWrapper;

        return removeBlockWrapper;

    };

    settings.removeButtonClicked = function () {

        var action = editor.toolbar.settings.actions;

        if (action.classList.contains('opened')) {

            editor.toolbar.settings.hideRemoveActions();

        } else {

            editor.toolbar.settings.showRemoveActions();

        }

        editor.toolbar.toolbox.close();
        editor.toolbar.settings.close();

    };

    settings.cancelRemovingRequest = function () {

        editor.toolbar.settings.actions.classList.remove('opened');

    };

    settings.confirmRemovingRequest = function () {

        var currentBlock = editor.content.currentNode,
            firstLevelBlocksCount;

        currentBlock.remove();

        firstLevelBlocksCount = editor.nodes.redactor.childNodes.length;

        /**
         * If all blocks are removed
         */
        if (firstLevelBlocksCount === 0) {

            /** update currentNode variable */
            editor.content.currentNode = null;

            /** Inserting new empty initial block */
            editor.ui.addInitialBlock();

        }

        editor.ui.saveInputs();

        editor.toolbar.close();

    };

    settings.showRemoveActions = function () {

        editor.toolbar.settings.actions.classList.add('opened');

    };

    settings.hideRemoveActions = function () {

        editor.toolbar.settings.actions.classList.remove('opened');

    };

    return settings;

})({});