Configuration overhaul (big breaking changes)

[orestbida]

This issue will serve as a discussion. I'm open to suggestions like better naming proposals, refactoring or anything else which could make the configuration easier/simpler.

Issue: the current configuration object's structure is pretty chaotic, and there is no clear separation between translations and other (logical) config. options.

Proposed big main changes:

1. switch from the snake_case to the camelCase (personal preference: nicer to look at, fewer characters wasted)
2. rename a lot of options for the sake of clarity (e.g., the naming force_consent is misleading)
3. better translation management (with support for external json files)
4. make the HTML cookie_table completely optional
5. extract categories' definitions from languages object

Renames:

1. auto_run → autoShowModal
2. page_scripts → manageScriptTags
3. force_consent → disablePageInteraction
4. many others, simply due to the switch to the camelCase

Although there are a lot of changes, everything that was possible until now should still be achievable relatively easy.

Here is a first example/idea of how the new configuration object could look like, taking into account the above suggested changes:

const cc = window.initCookieConsent();

cc.run({
    root: null,                // previously could be specified using initCookieConsent(<root>);
    mode: 'opt-in',
    revision: 0,
    autoShow: true,       // previously "autorun"
    autoClearCookies: true,    // previously "autoclear_cookies"
    manageScriptTags: true,    // previously "page_scripts"
    disablePageInteraction: false,
    hideFromBots: true,

    cookie: { 
        name: 'cc_cookie',
        path: '/',
        domain: location.hostname,
        expiresAfterDays: 182,      // number or function returning a number
        sameSite: 'Lax'
    },

    onFirstConsent: function(){}, // previously "onFirstAction"
    onConsent: function(){},      // previously "onAccept"
    onChange: function(){},

    categories: {
        necessary: {
            enabled: true,
            readOnly: true
        },
        analytics: {
            enabled: false,
            readOnly: false,
            autoClear: {                            // optional
                cookies: [
                    {
                        name: /^(_ga|_gid)/,        // string or regex
                        domain: location.hostname,  // optional
                        path: '/'                   // optional
                    }
                ],
                reloadPage: false,                  // optional
            }
        }
    },

    guiOptions: {
        consentModal: {
            layout: 'cloud',
            position: 'bottom center',
            transition: 'slide',
            swapButtons: false
        },
        preferencesModal: {
            layout: 'box',
            // position: 'left',
            transition: 'slide'
        }
    },

    language: {
        default: 'en',      // previously "current_lang"
        autoDetect: null,   // previously "auto_language"

        translations: {
            de: '/assets/translations/de.json',
            it: '/assets/translations/it.json',
            en: {
                consentModal: {
                    title: 'We use cookies!',
                    description: 'Our website uses cookies to ensure ... ',
                    acceptAllBtn: 'Accept all',                   
                    acceptNecessaryBtn: 'Reject all',                  
                    showPreferencesBtn: 'Manage preferences',  // *new* optional
                    revisionMessage: 'Hey, we changed a few things since the last time you visisted!'
                },
                preferencesModal: {  // previously "settingsModal"
                    title: 'Manage cookie preferences',
                    acceptAllBtn: 'Accept all',
                    acceptNecessaryBtn: 'Reject all',
                    savePreferencesBtn: 'Accept current selection',
                    closeIconLabel: 'Close modal',
                    sections: [
                        {
                            title: 'Somebody said ... cookies?',
                            description: 'I want one!',
                        },
                        {
                            title: 'Strictly necessary cookies',
                            description: 'These cookies are essential for the prop',
                            linkedCategory: 'necessary',

                            cookieTable: {  // optional
                                headers: {
                                    name: 'Name',
                                    description: 'Description',
                                    provider: 'Provider'
                                },
                                body: [
                                    {
                                        name: '_ga_*, _gid',
                                        description: 'Used to track you ...',
                                        provider: 'Google Analytics'
                                    }
                                ]
                            }
                        }
                    ]
                }
            }
        }
    }
});

[superbiche]

@orestbida I really think moving the autoclear config away from the languages is the right move. This makes my suggestions in #250 mostly useless.

A few suggestions:

• autoclearCookies / autoclear shoud be autoClearCookies / autoClear. Would be even better if we kept only one key, maybe autoClearCookies as it's more obvious
• force_consent should be rename to be more obvious, like disablePageInteraction or event disableInteractionBeforeConsent, because it's actually what it does
• why categoryToggle, why not simply category so there's no confusion about what it is
• manageScriptTags => interceptScriptTags ?

[orestbida]

@superbiche yes!

• autoclear → autoClear & autoclearCookies → autoClearCookies
• disablePageInteraction is the sweet spot. Not as clear as disableInteractionBeforeConsent, but shorter to say the least

As for categoryToggle, I wanted something which hinted at the fact that a toggle (checkbox) would be generated and linked to that specific section/block; category alone does not convey this. Another suggestion could be linkedCategory.

[superbiche]

disablePageInteraction is the sweet spot

Agreed!

As for categoryToggle, I wanted something which hinted at the fact that a toggle (checkbox) would be generated and linked to that specific section/block;

Yeah I understand. I guess whatever works if it's properly documented.

[orestbida]

Callback functions were renamed:

• onFirstAction → onFirstConsent
• onAccept → onConsent

Other renames:

• acceptBtn → acceptAllBtn
• rejectBtn → acceptNecessaryBtn
• auto_lang → autoDetect (now as language's prop.)
• current_lang → default (now as language's prop.)