Lorem Ipsum Dialog (original)

Screenshot

Description

Disclaimer: As I am the developer of both the plugin Lorem Ipsum and xd-dialog-helper, I want to mention the fact that I'm the plugin's developer here for full disclosure. As the plugin is free, however, and uses the library, I think it's a great example of how the library actually got used.

The main dialog of the "real" Lorem Ipsum plugin for Adobe XD CC by Pablo Klaschka (website. Among other things, it

• has full localization, thanks to the xd-localization-helper library
• "remembers" user input via the xd-storage-helper
• Automatically sets focus to the Ok button so that a user can simply press the Return-key after opening the dialog to confirm the settings (which are the same as when the plugin got used previously)
• adds a corporate-colored bar at the top

Code

Please note that the plugin is also using xd-storage-helper and xd-localization-helper – two other MIT-licensed Open-Source libraries for XD plugin development, which is why, e.g., labels have lang.get(key) constructs instead of strings (the function simply returns the localized version of the string with the specified key.

/*
 * Copyright (c) 2019. by Pablo Klaschka
 */

const storage = require('xd-storage-helper');
const lang = require('xd-localization-helper');
const dialogHelper = require('xd-dialog-helper');


/**
 * @throws {Error} error when dialog gets canceled
 */
async function modalAsync() {
    const uiOptions = await storage.get('loremOptions', {
        text: 'lorem-lat',
        terminationString: 'n/a',
        includeLineBreaks: true,
        trim: false
    });

    try {
        const loremOptions = await dialogHelper.showDialog('lorem-main', 'Lorem Ipsum',
            [
                {
                    id: 'description',
                    type: dialogHelper.types.TEXT,
                    label: lang.get('modal-lorem-description')
                },
                {
                    type: dialogHelper.types.SELECT,
                    options: [
                        {value: 'lorem-lat', label: 'Lorem Ipsum (Latin, Standard)'},
                        {value: 'cicero-lat', label: 'Cicero (Latin)'},
                        {value: 'cicero-en', label: 'Cicero (English)'},
                        {value: 'pangram-en', label: 'Pangram (English)'},
                        {value: 'pangram-de', label: 'Pangram (German)'},
                        {value: 'pangram-es', label: 'Pangram (Espagnol)'},
                        {value: 'pangram-fr', label: 'Pangram (Français)'}
                    ],
                    id: 'text',
                    label: lang.get('modal-lorem-text-label'),
                    value: uiOptions.text
                },
                {
                    type: dialogHelper.types.SELECT,
                    id: 'terminationString',
                    label: lang.get('modal-lorem-terminate-label'),
                    options: [
                        {value: 'n/a', label: lang.get('modal-lorem-terminate-none')},
                        {value: '.', label: lang.get('modal-lorem-terminate-period')},
                        {value: '…', label: lang.get('modal-lorem-terminate-ellipsis')},
                    ],
                    value: uiOptions.terminationString
                },
                {
                    type: dialogHelper.types.CHECKBOX,
                    id: 'includeLineBreaks',
                    label: lang.get('modal-lorem-includeLineBreaks-label'),
                    value: uiOptions.includeLineBreaks
                },
                {
                    type: dialogHelper.types.CHECKBOX,
                    id: 'trim',
                    label: lang.get('modal-lorem-trim-label'),
                    value: uiOptions.trim
                }
            ],
            {
                okButtonText: lang.get('modal-lorem-btn-ok'),
                cancelButtonText:
                    lang.get('modal-lorem-btn-cancel'),
                width:
                    400,
                css: `
                header {
                    background: #2D4E64;
                    height: 16px;
                    position: absolute;
                    left: 0;
                    top: 0;
                    right: 0;
                }
                input[type="checkbox"] {
                    width: 18px;
                }`,
                onBeforeShow:
                    htmlDialogElement => {
                        htmlDialogElement.appendChild(document.createElement('header'));
                        document.getElementById('lorem-main-dialogHelperBtnOk')
                                                    .setAttribute('autofocus', 'autofocus');
                    }
            });
        await storage.set('loremOptions', loremOptions);
        return loremOptions;
    } catch (e) {
        throw new Error('User canceled dialog');
    }
}

module.exports = showModal;