Features

• 0 dependencies - all shipped code is vanilla JS, minimalistic and performant. The only dependency is optional APM run for logging and debugging purposes.
• 0 css - library is style-agnostic. Specific events can add or remove classes up to your customization.
• Default field values - all fields can have default values set (i.e. country: USA).
• Flexible - any event, validation etc. can be easiely overridden with custom method.
• Internationalization - languages can be added by simply adding {languageCode}.json file in data/i18n directory.
• Modular and dynamic - specific, required module is loaded dynamically using new ESM feature. Same goes for country and state data.
• Multi-step forms - you can easiely create forms splitted into unlimited number of html pages, which keep passing query parameters until meeting the final page and performing request.
• Real time validation - input is validated instantly when typed. Invalid characters are prevented from inputting (except for copy-pase events, which are unhandled purposedly).
• Recurly v4 - updated from v3 that is soon end of support.

Usage

<script type="module">
    import { fcCampaign } from 'https://cdn.jsdelivr.net/npm/@fullcube/campaign@latest/dist/campaign.js';

    fcCampaign.bootstrap({
        /* -------------------------------------------------------------------------- */
        /*                                    Defaults                                */
        /* -------------------------------------------------------------------------- */

        // Specify modules you plan to use on a page.
        modules: [
            {
                name: 'add-member'
            }
        ],

        // Actions to be performed on submit button clicked. Modules are loaded on-demand through inspection of an array.
        actions: [
            {
                // Module name in kebab-case convention.
                module: 'add-prospect',

                // Action name in camelCase convention.
                name: 'addProspect'
            },
            {
                module: 'discord',
                name: 'login'
            }
        ],

        /* ------------------------------ Internal services ------------------------------- */
        api: {
            // API url.
            url: `https://api.fullcube.io/api/v1`,

            // ID of landing page in fullcube admin. Getter allows specifying additional logic.
            landingPage() {
                return {
                    id: `cjs-landingPage-1`
                };
            }
        },

        i18n: {
            // Specifies name of json file that will be loaded from path ${assets.path}/i18n/${i18n.language}.js
            language: 'en'
        },

        assets: {
            // Path to static resources required by certain modules like languages, countries, states etc. in JSON.
            path: `https://cdn.jsdelivr.net/npm/@fullcube/campaign@latest/dist/data`
        },

        dom: {
            // Classes added to elements when they are disabled.
            disabledClasses: [
                `bg-gray-500`,
                `-bg-blue-500`,
                `-hover:bg-blue-700`
            ],

            // Classes added to elements on error.
            errorClasses: [`border-red-500`],

            // Suffix of feedback HTMLElements (labels) like fc-firstName-feedback.
            feedbackSuffix: `feedback`,

            // Prefix for all HTMLElement's id's.
            idPrefix: `fc`
        }
    });
</script>

How it works?

1. Loads dynamically submodule based on configuration (i.e. add-prospect).
2. Loads page configuration from the API.
3. Binds to DOM elements with specific id's depending on loaded submodule (i.e. fc-firstName, fc-firstName-feedback; form, error and submit are obligatory).
4. Listens and reacts to input events.
5. On submit performs submodule action defined in configuration. When redirected - persists all existing query parameters along with data from filled form.

Project structure

Showcase

Contains example pages required for development setup.

Modules

Modules are parts of library loaded on demand. They define fields that are should be hijacked from DOM, their validation methods and actions available to perform on form submit via actions option. Logically, one module should handle single usual use case.

TODO

• Specific build targetting old browsers