agrynco
aba4173827
Share template keys across email and push with independent editors and revisions. Render localized actions and preserve version-one delivery. Ref: IT-1627
174 lines
8.9 KiB
JavaScript
174 lines
8.9 KiB
JavaScript
(() => {
|
|
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 = !!form.querySelector('.validation-summary-errors');
|
|
const sampleValues = new Map();
|
|
|
|
function escapeHtml(value) {
|
|
return String(value).replaceAll('&', '&').replaceAll('<', '<')
|
|
.replaceAll('>', '>').replaceAll('"', '"').replaceAll("'", ''');
|
|
}
|
|
|
|
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) {
|
|
return text.replace(/\{\{([^{}]+)\}\}/g, (placeholder, name) => {
|
|
if (!sampleValues.has(name)) return placeholder;
|
|
const value = sampleValues.get(name);
|
|
return html ? escapeHtml(value) : value;
|
|
});
|
|
}
|
|
|
|
function updatePreview() {
|
|
const pane = activePane();
|
|
const push = !!document.getElementById('previewTitle');
|
|
document.getElementById('previewLanguage').textContent = pane?.querySelector('.language-code').value ?? '(no versions)';
|
|
const heading = pane?.querySelector(push ? '[data-content="title"]' : '[data-content="subject"]')?.value ?? '';
|
|
const body = pane?.querySelector(push ? '[data-content="body"]' : '[data-content="text"]')?.value ?? '';
|
|
document.getElementById(push ? 'previewTitle' : 'previewSubject').textContent = interpolate(heading);
|
|
document.getElementById(push ? 'previewBody' : 'previewText').textContent = interpolate(body);
|
|
updateHtmlPreview(pane);
|
|
updateActionsPreview(pane);
|
|
}
|
|
|
|
function updateActionsPreview(pane) {
|
|
const container = document.getElementById('previewActions');
|
|
if (!container) return;
|
|
container.replaceChildren();
|
|
const hint = document.getElementById('previewDefaultAction');
|
|
try {
|
|
const actions = JSON.parse(pane?.querySelector('[data-content="actions"]')?.value || '{}');
|
|
if (!actions || (actions.buttons !== undefined && !Array.isArray(actions.buttons))) throw new Error();
|
|
(actions.buttons ?? []).forEach(item => {
|
|
const button = document.createElement('button');
|
|
button.type = 'button';
|
|
button.className = 'btn btn-outline-primary btn-sm';
|
|
button.textContent = interpolate(item.label);
|
|
button.title = `Action: ${item.action}. Preview only.`;
|
|
container.append(button);
|
|
});
|
|
hint.textContent = actions.defaultAction ? `Notification tap: ${actions.defaultAction}` : 'No notification tap action configured.';
|
|
} catch {
|
|
hint.textContent = 'Invalid actions JSON. Use defaultAction and buttons with action and label.';
|
|
}
|
|
}
|
|
|
|
function updateHtmlPreview(pane) {
|
|
const frame = document.getElementById('previewHtmlFrame');
|
|
if (!frame) return;
|
|
const html = interpolate(pane?.querySelector('[data-content="html"]')?.value ?? '', true);
|
|
frame.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 = ''; }
|
|
});
|
|
|
|
const navigationDialog = document.createElement('dialog');
|
|
navigationDialog.className = 'template-unsaved-dialog';
|
|
navigationDialog.setAttribute('aria-labelledby', 'unsaved-title');
|
|
navigationDialog.innerHTML = '<h2 id="unsaved-title" class="h5">Unsaved changes</h2><p>Save this channel before leaving, or discard its unsaved changes.</p><div class="d-flex flex-wrap gap-2"><button type="button" class="btn btn-primary" data-keep-editing>Keep editing</button><button type="button" class="btn btn-outline-danger" data-discard-changes>Discard changes</button></div>';
|
|
document.body.append(navigationDialog);
|
|
let pendingNavigation;
|
|
navigationDialog.querySelector('[data-keep-editing]').addEventListener('click', () => navigationDialog.close());
|
|
navigationDialog.querySelector('[data-discard-changes]').addEventListener('click', () => {
|
|
dirty = false;
|
|
navigationDialog.close();
|
|
window.location.assign(pendingNavigation);
|
|
});
|
|
document.addEventListener('click', event => {
|
|
const link = event.target.closest('a');
|
|
if (!dirty || !link || link.target === '_blank') return;
|
|
event.preventDefault();
|
|
pendingNavigation = link.href;
|
|
navigationDialog.showModal();
|
|
});
|
|
|
|
renderSamples();
|
|
})();
|