Source: public/src/others/optionsScreen.js

/** @module others/optionsScreen */

import $ from 'jquery';
import { ajax, rmlOpts, hooks } from '../util';

/**
 * Do the options screen with a nav bar (WordPress standard). This
 * nav bar is not ReactJS.
 */
export default function() {
    // Append to known option
    const container = $('<div class="rml-options"><nav><ul></ul></nav></div>').insertBefore($('[for="rml_load_frontend"]').parents('table').prev()),
        headline = $('<h2>Real Media Library</h2>').insertBefore(container),
        nav = container.find('nav ul');
    let navLiCnt = 0;
    $('<a target="_blank" href="https://matthias-web.com/wordpress/real-media-library/add-ons/"><strong>Browse Add-Ons</strong></a>').insertAfter(headline);
                        
    // Search the option panels
    $('table.form-table').each(function() {
        const oHeadline = $(this).prev();
        let sHeadline = oHeadline.html();
        if (sHeadline && sHeadline.indexOf('RealMediaLibrary') === 0) {
            sHeadline = sHeadline.split(":", 2)[1];
            
            // Append headline to options panel
            const li = $('<li class="nav-tab ' + ((navLiCnt === 0) ? 'nav-tab-active' : '') + '">' + sHeadline + '</li>').appendTo(nav),
                section = $(this).appendTo(container);
                
            !navLiCnt && section.show();
            li.click(function() {
                container.children('table').hide();
                nav.find('.nav-tab-active').removeClass('nav-tab-active');
                $(this).addClass('nav-tab-active');
                section.show(); 
            });
            
            oHeadline.remove();
            navLiCnt++;
        }
    });
}

/**
 * When a .rml-rest-button is pressed show a loading indicator and send
 * the request to the REST server.
 */
$(() => $(document).on('click', '.rml-rest-button', function(e) {
    let { url, method, ...data } = $(this).data(), btn = $(this);
    if (window.confirm(rmlOpts.lang.areYouSure)) {
        btn.html('<div class="spinner is-active" style="float: initial;margin: 0;"></div>');
        btn.attr('disabled', 'disabled');
        
        /**
         * Fired when a button with class .rml-rest-button gets clicked and
         * the POST data is prepared so you can modify it. The $url is the
         * data-url attribute of the button. You also have to define a
         * data-method attribute.
         * 
         * @event module:util/hooks#rest/button/prepare/$url
         * @param {object} data The data
         * @this jQuery
         */
        hooks.call('rest/button/prepare/' + url, [ data ], btn);
        ajax(url, { method, data }).then((...args) => {
            btn.html('<i class="fa fa-check"></i> ' + rmlOpts.lang.success).attr("disabled", false);
            
            /**
             * Fired when a button with class .rml-rest-button is successfully saved.
             * 
             * @event module:util/hooks#rest/button/success/$url
             * @param {mixed} args... The $.ajax success arguments
             * @param {string} method The method
             * @param {object} data The data
             * @this jQuery
             */
            hooks.call('rest/button/success/' + url, [ ...args, method, data ], btn);
        }, (...args) => {
            btn.html('<i class="fa fa-warning"></i> ' + rmlOpts.lang.failed).attr("disabled", false);
            
            /**
             * Fired when a button with class .rml-rest-button is successfully saved.
             * 
             * @event module:util/hooks#rest/button/error/$url
             * @param {mixed} args... The $.ajax success arguments
             * @param {string} method The method
             * @param {object} data The data
             * @this jQuery
             */
            hooks.call('rest/button/error/' + url, [ ...args, method, data ], btn);
        });
    }
    e.preventDefault();
    return false;
}));

hooks.register('rest/button/success/export', (response) => {
    $('#rml_export_data textarea').get(0).value = response;
});

hooks.register('rest/button/prepare/import', (data) => {
    data.import = encodeURIComponent($("#rml_import_data textarea").get(0).value);
});