hrynco-notification-service/HrynCo.NotificationService.Web/wwwroot/js/email-template-editor.js

(() => {
    const form = document.getElementById('templateForm');
    const tabs = document.getElementById('languageTabs');
    const panes = document.getElementById('languagePanes');
    const activeField = document.getElementById('ActiveLanguageIndex');
    const variablesField = document.getElementById('VariablesJson');
    const samples = document.getElementById('previewVariables');
    let dirty = false;
    const sampleValues = new Map();

    function escapeHtml(value) {
        return String(value).replaceAll('&', '&amp;').replaceAll('<', '&lt;')
            .replaceAll('>', '&gt;').replaceAll('"', '&quot;').replaceAll("'", '&#39;');
    }

    function activePane() {
        return panes.querySelector('.language-pane:not([hidden])');
    }

    function selectPane(pane, focus = false) {
        Array.from(panes.children).forEach(item => { item.hidden = item !== pane; });
        Array.from(tabs.children).forEach(tab => {
            const selected = tab.dataset.pane === pane.id;
            tab.classList.toggle('active', selected);
            tab.setAttribute('aria-selected', String(selected));
            tab.tabIndex = selected ? 0 : -1;
            if (selected && focus) tab.focus();
        });
        activeField.value = Array.from(panes.children).indexOf(pane);
        updatePreview();
    }

    function readVariables() {
        const variables = JSON.parse(variablesField.value);
        if (!Array.isArray(variables)) throw new Error('Variables must be an array.');
        const names = new Set();
        variables.forEach(variable => {
            if (!variable || typeof variable.name !== 'string' || !variable.name.trim() || typeof variable.required !== 'boolean')
                throw new Error('Every variable needs a name and a boolean required property.');
            if (Object.keys(variable).some(key => !['name', 'required'].includes(key)))
                throw new Error('Use only name and required properties for each variable.');
            if (names.has(variable.name)) throw new Error('Variable names must be unique.');
            names.add(variable.name);
        });
        return variables;
    }

    function renderSamples() {
        const status = document.getElementById('previewStatus');
        samples.replaceChildren();
        try {
            const variables = readVariables();
            variables.forEach((variable, index) => {
                const wrapper = document.createElement('div');
                wrapper.className = 'mb-2';
                const label = document.createElement('label');
                label.htmlFor = `sample-${index}`;
                label.className = 'form-label';
                label.textContent = variable.name + (variable.required ? ' *' : '');
                const input = document.createElement('input');
                input.id = label.htmlFor;
                input.dataset.variableName = variable.name;
                input.className = 'form-control form-control-sm';
                input.value = sampleValues.get(variable.name) ?? `Sample ${variable.name}`;
                sampleValues.set(variable.name, input.value);
                input.addEventListener('input', () => { sampleValues.set(variable.name, input.value); updatePreview(); });
                wrapper.append(label, input);
                samples.append(wrapper);
            });
            status.textContent = 'Ready';
            status.className = 'badge text-bg-secondary';
        } catch (error) {
            status.textContent = error.message;
            status.className = 'badge text-bg-danger';
        }
        updatePreview();
    }

    function interpolate(text, html = false) {
        let result = text;
        samples.querySelectorAll('input').forEach(input => {
            const name = input.dataset.variableName;
            const value = html ? escapeHtml(input.value) : input.value;
            result = result.split(`{{${name}}}`).join(value);
        });
        return result;
    }

    function updatePreview() {
        const pane = activePane();
        if (!pane) {
            document.getElementById('previewLanguage').textContent = '(no versions)';
            document.getElementById('previewSubject').textContent = '';
            document.getElementById('previewText').textContent = '';
            document.getElementById('previewHtmlFrame').srcdoc = '';
            return;
        }
        document.getElementById('previewLanguage').textContent = pane.querySelector('.language-code').value;
        document.getElementById('previewSubject').textContent = interpolate(pane.querySelector('[data-content="subject"]').value);
        document.getElementById('previewText').textContent = interpolate(pane.querySelector('[data-content="text"]').value);
        const html = interpolate(pane.querySelector('[data-content="html"]').value, true);
        document.getElementById('previewHtmlFrame').srcdoc = `<!doctype html><html><head><meta charset="utf-8"><meta http-equiv="Content-Security-Policy" content="default-src 'none'; style-src 'unsafe-inline'; img-src data:; base-uri 'none'; form-action 'none'"><style>body{font-family:Arial,sans-serif;padding:20px;color:#1f2937;background:white}img{max-width:100%}</style></head><body>${html}</body></html>`;
    }

    tabs.addEventListener('click', event => {
        const tab = event.target.closest('[role="tab"]');
        if (tab) selectPane(document.getElementById(tab.dataset.pane));
    });
    tabs.addEventListener('keydown', event => {
        const offsets = { ArrowLeft: -1, ArrowRight: 1, Home: -tabs.children.length, End: tabs.children.length };
        if (!(event.key in offsets)) return;
        event.preventDefault();
        const buttons = Array.from(tabs.children);
        if (!buttons.length) return;
        let index = buttons.indexOf(event.target) + offsets[event.key];
        if (event.key === 'Home') index = 0;
        if (event.key === 'End') index = buttons.length - 1;
        const tab = buttons[(index + buttons.length) % buttons.length];
        selectPane(document.getElementById(tab.dataset.pane), true);
    });
    panes.addEventListener('input', updatePreview);
    variablesField.addEventListener('input', renderSamples);
    form.addEventListener('input', () => { dirty = true; });
    form.addEventListener('submit', () => { dirty = false; });
    window.addEventListener('beforeunload', event => {
        if (dirty) { event.preventDefault(); event.returnValue = ''; }
    });

    renderSamples();
})();