A dead simple parsys show/hide for Flex Container

flexShowHide.js

/*
 *  Copyright 2020 Adobe
 *
 *  Licensed under the Apache License, Version 2.0 (the "License");
 *  you may not use this file except in compliance with the License.
 *  You may obtain a copy of the License at
 *
 *      http://www.apache.org/licenses/LICENSE-2.0
 *
 *  Unless required by applicable law or agreed to in writing, software
 *  distributed under the License is distributed on an "AS IS" BASIS,
 *  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 *  See the License for the specific language governing permissions and
 *  limitations under the License.
 */

const flexShowHide = ($, ns, $document) => {
    /* eslint-disable strict */

    'use strict';

    if (!ns) return;

    /**
     *
     * Dependencies
     *
     */

    const { EditorFrame } = ns;

    /**
     *
     * Constants
     *
     */

    const ACTION_ICON = 'viewOff';
    const ACTION_TITLE = 'Show Hide';
    const ACTION_NAME = 'SHOW_HIDE';
    const CQ_RESPONSIVE = 'cq:responsive';

    const sendRequest = (editable, url, data) => {
        $.ajax({
            url,
            type: 'POST',
            data,
            complete() {
                ns.edit.actions.doRefresh(editable.getParent().getParent());
            },
        });
    };

    const hasBreakpoint = url => $.ajax({ url: `${url}.json`, type: 'get' });

    const showHide = (editable) => {
        const breakpoint = ns.responsive.getCurrentBreakpoint();
        const url = `${editable.path}/${CQ_RESPONSIVE}/${breakpoint}`;

        hasBreakpoint(url).always(xhr =>
            (xhr.status === 404
                ? sendRequest(editable, url, 'behavior=hide')
                : sendRequest(editable, url, ':operation=delete')));
    };

    const showHideAction = new ns.ui.ToolbarAction({
        name: ACTION_NAME,
        icon: ACTION_ICON,
        text: ACTION_TITLE,
        execute: (editable) => {
            showHide(editable);
        },
        condition: editable => editable.getParent().type === 'dexter/components/super/parsys',
        isNonMulti: true,
    });

    // When the Edit Layer gets activated
    $document.on('cq-layer-activated', (event) => {
        if (event.layer === 'Edit') {
            // Register an additional action
            EditorFrame.editableToolbar.registerAction(ACTION_NAME, showHideAction);
        }
    });
};

export default flexShowHide;