Source: public/src/rml_shortcode.js

/** 
 * Startup file for the MCE visual editor to create the shortcode modal.
 * 
 * @module rml_shortcode
 */
import tinymce from 'tinymce';
import rmlOpts from 'rmlopts';
import { ajax, hooks } from './util';

const TAG = 'folder-gallery';

/**
 * This function is fired, when the dialog button "OK" gets pressed.
 * 
 * @this tinymce.Editor instance
 */
function submit({ data }) {
    if (!data) {
        return;
    }
    
    const { fid, link, columns, orderby, size } = data;
    if (fid > -1) {
        let shortcode = `[${TAG} fid="${fid}"`;
        
        link && link !== 'post' && (shortcode += ` link="${link}"`);
        columns && +columns !== 3 && (shortcode += ` columns="${columns}"`);
        if (orderby === true) {
            shortcode += ` orderby="rand"`;
        }else{
            shortcode += ` orderby="rml"`;
        }
        size && size !== 'thumbnail' && (shortcode += ` size="${size}"`);
        
        let sdata = { shortcode };
        
        /**
         * The shortcode gets generated. You are able to modify the shortcut
         * depending on the modal data.
         * 
         * @event module:util/hooks#shortcode/dialog/insert
         * @param {object} shortcodeData
         * @param {object} shortcodeData.shortcode The shortcode which you can modify
         * @param {object} data The data from the dialog
         */
        hooks.call('shortcode/dialog/insert', [ sdata, data ], this);
        
        sdata.shortcode += ']';
        
        this.insertContent(sdata.shortcode); 
    }
}

tinymce.PluginManager.add(TAG, (editor, url) => {
    // Command
    editor.addCommand('folder_gallery_popup', async (ui, v) => {
        // Create tree for listbox
        editor.setProgressState(true);
        const { slugs: { names, slugs, types } } = await ajax('tree');
        names.shift();
        slugs.shift();
        types.shift();
        const listValues = slugs.map((id, i) => ({
            text: names[i],
            value: id,
            disabled: [1].indexOf(types[i]) > -1
        }));
        editor.setProgressState(false);
        
        // Prepare dialog
        const { fid = '', link = '', columns = '3', orderby = '', size = '' } = v || {},
            columnsValue = [1, 2, 3, 4, 5, 6, 7, 8, 9].map(i => ({ text: ''+i, value: ''+i })),
            { mce } = rmlOpts;
            
        // Show dialog
        let options = {
            title: mce.mceButtonTooltip,
            onsubmit: submit.bind(editor),
            body: [{ // Add folder select
                type: 'listbox',
                name: 'fid',
                label: mce.mceBodyGallery,
                value: fid,
                'values': listValues,
                tooltip: mce.mceListBoxDirsTooltip
            }, { // Add link to select
                type: 'listbox',
                name: 'link',
                label: mce.mceBodyLinkTo,
                value: link,
                'values': mce.mceBodyLinkToValues
            }, { // Add columns (1-9) to select
                type: 'listbox',
                name: 'columns',
                label: mce.mceBodyColumns,
                value: columns,
                'values': columnsValue
            }, { // Add random order checkbox
                type: 'checkbox',
                name: 'orderby',
                label: mce.mceBodyRandomOrder,
                value: orderby
            }, { // Add size to select
                type: 'listbox',
                name: 'size',
                label: mce.mceBodySize,
                value: size,
                'values': mce.mceBodySizeValues
            }]
        };
        
        /**
         * The shortcode dialog gets opened. You can modify the fields.
         * 
         * @event module:util/hooks#shortcode/dialog/open
         * @param {object} options The options
         * @param {object} editor The editor instance
         */
        hooks.call('shortcode/dialog/open', [ options, editor ]);
        editor.windowManager.open(options);
    });
    
    // Add tinymce button
    rmlOpts && editor.addButton(TAG, {
        icon: ' rmlicon-gallery',
        tooltip: rmlOpts.mce.mceButtonTooltip,
        cmd: 'folder_gallery_popup'
    });
});