campingmontagut/web/static/camper.js

/**
 * SPDX-FileCopyrightText: 2023 jordi fita mas <jordi@tandem.blog>
 * SPDX-License-Identifier: AGPL-3.0-only
 */

function ready(fn) {
    if (document.readyState !== 'loading') {
        fn();
    } else {
        document.addEventListener('DOMContentLoaded', fn);
    }
}

ready(function () {
    const snackBar = Object.assign(
        document.body.appendChild(document.createElement('section')),
        {
            id: 'snackbar',
        }
    );

    const errorMessage = snackBar.appendChild(document.createElement('div'));
    errorMessage.setAttribute('role', 'alert');

    const openClass = 'open';
    const toasts = [];
    let timeoutId = null;

    function showError(message) {
        toasts.push(message);
        popUp();
    }

    function popUp() {
        if (toasts.length === 0) {
            return;
        }
        if (errorMessage.classList.contains(openClass)) {
            dismiss();
            return;
        }
        if (errorMessage.innerText !== "") {
            // it will show after remove calls popUp again.
            return;
        }
        errorMessage.innerText = toasts[0];
        errorMessage.classList.add(openClass);
        timeoutId = setTimeout(dismiss, 4000);
    }

    function dismiss() {
        if (!errorMessage.classList.contains(openClass)) {
            // already dismissed
            return;
        }
        errorMessage.classList.remove(openClass);
        clearTimeout(timeoutId);
        timeoutId = setTimeout(remove, 350);
    }

    function remove() {
        clearTimeout(timeoutId);
        toasts.splice(0, 1);
        errorMessage.innerText = "";
        popUp();
    }

    document.body.addEventListener('htmx:error', function (evt) {
        const errorInfo = evt.detail.errorInfo;
        const error = errorInfo.xhr && errorInfo.xhr.responseText || errorInfo.error;
        showError(error);
    });
})

ready(function () {
    const textareas = document.querySelectorAll('textarea.html');
    for (const textarea of textareas) {
        const canvas = document.createElement('div');
        textarea.parentNode.insertBefore(canvas, textarea.nextSibling);
        textarea.style.display = 'none';

        const textareaStorage = (editor) => {
            editor.Storage.add('textarea', {
                load() {
                    editor.setComponents(textarea.value);
                },
                store(data) {
                    const component = editor.Pages.getSelected().getMainComponent();
                    textarea.value = component.getInnerHTML();
                },
            });
        }

        const editor = grapesjs.init({
            container: canvas,
            height: '500px',
            width: 'auto',
            plugins: [
                textareaStorage,
                'gjs-blocks-basic',
                'grapesjs-plugin-ckeditor',
                'grapesjs-preset-webpage',
            ],
            storageManager: {
                type: 'textarea',
                autosave: true,
                autoload: true,
                stepsBeforeSave: 1,
            },
        });
    }

})