2415 lines
88 KiB
JavaScript
2415 lines
88 KiB
JavaScript
const state = {
|
||
page: null,
|
||
templates: [],
|
||
selected: null,
|
||
clipboard: null,
|
||
drag: null,
|
||
dragTarget: null,
|
||
dirty: false,
|
||
filePickerActive: false,
|
||
mediaUploadActive: false,
|
||
filePickerResetTimer: null,
|
||
deleteConfirmResolve: null,
|
||
collectionOpenState: new Map(),
|
||
};
|
||
|
||
const SECTIONS_REGION_ID = "sections";
|
||
const SECTIONS_REGION_LABEL = "Секции";
|
||
|
||
const el = {
|
||
regions: document.querySelector("#regions"),
|
||
addBlock: document.querySelector("#add-block"),
|
||
reload: document.querySelector("#reload"),
|
||
save: document.querySelector("#save"),
|
||
render: document.querySelector("#render"),
|
||
dirtyState: document.querySelector("#dirty-state"),
|
||
status: document.querySelector("#status"),
|
||
empty: document.querySelector("#empty-state"),
|
||
form: document.querySelector("#block-form"),
|
||
selectedRegion: document.querySelector("#selected-region"),
|
||
selectedTitle: document.querySelector("#selected-title"),
|
||
id: document.querySelector("#block-id"),
|
||
label: document.querySelector("#block-label"),
|
||
template: document.querySelector("#block-template"),
|
||
anchor: document.querySelector("#block-anchor"),
|
||
enabled: document.querySelector("#block-enabled"),
|
||
contentFields: document.querySelector("#content-fields"),
|
||
json: document.querySelector("#block-json"),
|
||
moveUp: document.querySelector("#move-up"),
|
||
moveDown: document.querySelector("#move-down"),
|
||
duplicate: document.querySelector("#duplicate"),
|
||
copy: document.querySelector("#copy"),
|
||
pasteAfter: document.querySelector("#paste-after"),
|
||
deleteBlock: document.querySelector("#delete-block"),
|
||
templateModal: document.querySelector("#template-modal"),
|
||
templateList: document.querySelector("#template-list"),
|
||
templateModalClose: document.querySelector("#template-modal-close"),
|
||
templateModalCancel: document.querySelector("#template-modal-cancel"),
|
||
deleteModal: document.querySelector("#delete-modal"),
|
||
deleteModalTitle: document.querySelector("#delete-modal-title"),
|
||
deleteModalBody: document.querySelector("#delete-modal-body"),
|
||
deleteModalCancel: document.querySelector("#delete-modal-cancel"),
|
||
deleteModalConfirm: document.querySelector("#delete-modal-confirm"),
|
||
};
|
||
|
||
const STATIC_FALLBACK = {
|
||
id: "static-elements",
|
||
type: "staticElements",
|
||
adminLabel: "Статичные элементы",
|
||
enabled: true,
|
||
content: {
|
||
navigation: {
|
||
logoSrc: "./assets/webflow/images/69ad964d951f9d17cc5a919e_logo-app.svg",
|
||
logoAlt: "главная",
|
||
brandLabel: "NODE.DC",
|
||
links: [
|
||
{ enabled: true, label: "О продукте", href: "", target: "index.html#features", linkMode: "target", linkTarget: "" },
|
||
{ enabled: true, label: "Лист ожидания", href: "", target: "index.html#hero", linkMode: "target", linkTarget: "" },
|
||
{
|
||
enabled: true,
|
||
label: "Документация",
|
||
href: "https://docs.ssscript.app/",
|
||
target: "",
|
||
linkMode: "href",
|
||
linkTarget: "_blank",
|
||
},
|
||
{ enabled: true, label: "Тарифы", href: "", target: "index.html#pricing-wrap", linkMode: "target", linkTarget: "" },
|
||
],
|
||
},
|
||
notifications: [
|
||
{
|
||
enabled: true,
|
||
eyebrowHtml: '<span class="darker-70">ДАЛЕЕ</span> — ИЮЛЬ 2026',
|
||
eyebrowClass: "red-txt gray",
|
||
title: "Открытая бета",
|
||
body: "Открываем доступ всем. Будем собирать и отлаживать вместе.",
|
||
},
|
||
{
|
||
enabled: true,
|
||
eyebrowHtml: '<span class="darker-70">ДАЛЕЕ</span> —<span class="darker-70"> </span>ИЮЛЬ 2026',
|
||
eyebrowClass: "red-txt gray",
|
||
title: "Альфа для Founder-доступа",
|
||
body: "На второй фазе тестирования бета открыта для всех подписчиков Founder-тарифа.",
|
||
},
|
||
{
|
||
enabled: true,
|
||
eyebrowHtml: "СЕЙЧАС",
|
||
eyebrowClass: "red-txt",
|
||
title: "Инвайты в закрытую бету уже отправлены.",
|
||
body: "Сейчас тестируем базовую функциональность и ИИ-интеграцию. ",
|
||
},
|
||
],
|
||
dock: {
|
||
items: [
|
||
{
|
||
enabled: true,
|
||
title: "NODE.DC",
|
||
href: "javascript:void(0)",
|
||
linkTarget: "",
|
||
targetId: "app-data",
|
||
iconSrc: "./assets/webflow/images/69ad964d951f9d17cc5a919e_logo-app.svg",
|
||
iconAlt: "Иконка NODE.DC",
|
||
className: "dock-icon ssscript",
|
||
iconClass: "logo",
|
||
dividerBefore: false,
|
||
},
|
||
{
|
||
enabled: true,
|
||
title: "Корзина",
|
||
href: "javascript:void(0)",
|
||
linkTarget: "",
|
||
targetId: "",
|
||
iconSrc: "./assets/webflow/images/69a9ae818a76c773dc3cf7bc_trash.avif",
|
||
iconAlt: "Белая иконка корзины.",
|
||
className: "dock-icon no-bg",
|
||
iconClass: "dock-app-img trash",
|
||
dividerBefore: true,
|
||
},
|
||
],
|
||
demoFileLabel: "демо-видео.txt",
|
||
},
|
||
assets: {
|
||
webglModelSrc: "./assets/custom/icon.glb",
|
||
logoPng: "./assets/custom/logo.png",
|
||
logoPngAlt: "Логотип NODE.DC",
|
||
appIconSrc: "./assets/webflow/images/69ad964d951f9d17cc5a919e_logo-app.svg",
|
||
appIconAlt: "Иконка NODE.DC",
|
||
appWordmarkSrc: "./assets/webflow/images/69ad96a28b06b7552a339137_logtype.svg?v=node-dc",
|
||
appWordmarkAlt: "Логотип NODE.DC",
|
||
},
|
||
},
|
||
editableFields: [
|
||
field("content.navigation.logoSrc", "Логотип в шапке", "media", "attr", "Шапка: логотип"),
|
||
field("content.navigation.logoAlt", "Логотип в шапке: alt", "text", "text", "Шапка: логотип"),
|
||
field("content.navigation.brandLabel", "Бренд в шапке", "text", "text", "Шапка: логотип"),
|
||
collection(
|
||
"content.navigation.links",
|
||
"Кнопки шапки",
|
||
"Шапка: ссылки",
|
||
{ enabled: true, label: "Новая ссылка", href: "", target: "index.html#", linkMode: "target", linkTarget: "" },
|
||
[
|
||
field("label", "Текст кнопки", "text", "text", "Шапка: ссылки"),
|
||
field("linkMode", "Источник ссылки", "link-mode", "attr", "Шапка: ссылки"),
|
||
],
|
||
),
|
||
collection(
|
||
"content.notifications",
|
||
"Уведомления",
|
||
"Уведомления",
|
||
{
|
||
enabled: true,
|
||
eyebrowHtml: "СЕЙЧАС",
|
||
eyebrowClass: "red-txt gray",
|
||
title: "Новое уведомление",
|
||
body: "Текст уведомления.",
|
||
},
|
||
[
|
||
field("eyebrowHtml", "Дата / статус", "html", "html", "Уведомления"),
|
||
field("eyebrowClass", "CSS-класс статуса", "text", "attr", "Уведомления"),
|
||
field("title", "Заголовок", "text", "text", "Уведомления"),
|
||
field("body", "Текст", "textarea", "text", "Уведомления"),
|
||
],
|
||
),
|
||
collection(
|
||
"content.dock.items",
|
||
"Иконки dock-панели",
|
||
"Dock",
|
||
{
|
||
enabled: true,
|
||
title: "Новое приложение",
|
||
href: "javascript:void(0)",
|
||
linkTarget: "",
|
||
targetId: "",
|
||
iconSrc: "./assets/webflow/images/69ad964d951f9d17cc5a919e_logo-app.svg",
|
||
iconAlt: "Иконка приложения",
|
||
className: "dock-icon ssscript",
|
||
iconClass: "logo",
|
||
dividerBefore: false,
|
||
},
|
||
[
|
||
field("enabled", "Отображение", "boolean", "boolean", "Dock"),
|
||
field("title", "Название", "text", "text", "Dock"),
|
||
field("href", "Ссылка / адрес", "url", "attr", "Dock"),
|
||
field("linkTarget", "Target ссылки", "text", "attr", "Dock"),
|
||
field("targetId", "ID окна / приложения", "text", "attr", "Dock"),
|
||
field("iconSrc", "Иконка", "media", "attr", "Dock"),
|
||
field("iconAlt", "Alt иконки", "text", "text", "Dock"),
|
||
field("dividerBefore", "Разделитель слева", "boolean", "boolean", "Dock"),
|
||
],
|
||
),
|
||
field("content.dock.demoFileLabel", "Dock: подпись демо-файла", "text", "text", "Dock"),
|
||
field("content.assets.webglModelSrc", "WebGL-модель логотипа", "media", "attr", "Модель и логотипы"),
|
||
field("content.assets.logoPng", "PNG-логотип", "media", "attr", "Модель и логотипы"),
|
||
field("content.assets.logoPngAlt", "PNG-логотип: alt", "text", "text", "Модель и логотипы"),
|
||
field("content.assets.appIconSrc", "Иконка приложения", "media", "attr", "Модель и логотипы"),
|
||
field("content.assets.appIconAlt", "Иконка приложения: alt", "text", "text", "Модель и логотипы"),
|
||
field("content.assets.appWordmarkSrc", "Wordmark приложения", "media", "attr", "Модель и логотипы"),
|
||
field("content.assets.appWordmarkAlt", "Wordmark приложения: alt", "text", "text", "Модель и логотипы"),
|
||
],
|
||
};
|
||
|
||
const GROUP_COPY = {
|
||
"Шапка: логотип": "Статичный знак верхней mac-панели: файл логотипа, alt и брендовая подпись.",
|
||
"Шапка: ссылки": "Пункты навигации верхней mac-панели. Каждый пункт можно добавить, удалить и переставить.",
|
||
Уведомления: "Карточки уведомлений справа сверху. Порядок в админке соответствует порядку на сайте.",
|
||
Dock: "Нижняя системная панель: приложения, корзина, ссылки и подписи файлов.",
|
||
"Модель и логотипы": "Базовые ассеты статичного слоя: GLB-модель, PNG/SVG-логотипы и alt-тексты.",
|
||
Заголовок: "Главный заголовок и вводный текст выбранной секции.",
|
||
"Верхний информационный блок": "Верхняя пара: длинный текст и крупный заголовок над медиаслайдером.",
|
||
"Нижний информационный блок": "Нижняя зеркальная пара: крупный заголовок и длинный текст под медиаслайдером.",
|
||
"Тезисы первого экрана": "Четыре смысловых тезиса вокруг формы раннего доступа.",
|
||
"Карточка доступа": "Единый компонент окна заявки: редактируется здесь и повторяется в нижнем блоке запроса DEMO.",
|
||
Форма: "Плейсхолдеры, кнопки, success/failure состояния формы.",
|
||
"Юридический блок": "Политики, права и нижний текст формы.",
|
||
"Видео-окно": "Окно демо-видео и подключенный медиа-файл.",
|
||
Пункты: "Текстовые пункты внутри секции.",
|
||
Слайдер: "Видео-превью и подписи карточек внутри горизонтального слайдера.",
|
||
Скролл: "Скорость локальной прокрутки внутри блока: меньше значение — спокойнее шаг, больше — быстрее.",
|
||
"Один клик": "Подблок про быстрое добавление и настройку компонентов.",
|
||
MCP: "Подблок про MCP-сервер и контекст Webflow.",
|
||
"Окно FAQ": "Название окна FAQ и служебные подписи mail-интерфейса.",
|
||
Отправитель: "Профиль отправителя в FAQ: аватар, имя и подписи письма.",
|
||
FAQ: "Вопросы и ответы mail-интерфейса. Каждый пункт можно добавить, удалить и переставить.",
|
||
CTA: "Финальный призыв к действию: заголовок, пояснение, кнопка и ссылка.",
|
||
"Центральный текст": "Отдельный центрированный текстовый блок: надзаголовок, крупная строка и три подписи.",
|
||
Тарифы: "Окно тарифной таблицы: планы, цены, кнопки и примечания.",
|
||
"Строки тарифов": "Повторяемые строки тарифной таблицы и значения по каждому плану.",
|
||
"Медиа-галерея": "Окна с изображениями, подписи файлов и связанные иконки.",
|
||
"Карточки скриншотов": "Скриншоты в виде окон и файлов: каждый элемент можно скрыть, переставить, дублировать или удалить.",
|
||
"TXT-файлы": "Список файлов листа ожидания: название окна, подпись и текст внутри файла.",
|
||
Футер: "Брендовый блок, копирайт и базовые ассеты футера.",
|
||
"Навигация футера": "Ссылки навигационной колонки футера. Каждый пункт можно скрыть, переставить, дублировать или удалить.",
|
||
"Контактные ссылки": "Ссылки контактной колонки футера. Каждый пункт можно скрыть, переставить, дублировать или удалить.",
|
||
Политики: "Нижняя строка политик и условия отображения.",
|
||
Контент: "Остальные typed-поля выбранного блока.",
|
||
};
|
||
|
||
const MEDIA_ACCEPT = "image/*,video/*,.gif,.webm,.mov,.mp4,.m4v,.avi,.mkv,.glb,.gltf,.svg,.avif,.webp,.woff,.woff2";
|
||
const mediaFilePicker = createMediaFilePicker();
|
||
const collectionItemRuntimeKeys = new WeakMap();
|
||
let collectionItemRuntimeKeyCounter = 0;
|
||
|
||
function field(path, label, kind = "text", renderAs = kind === "html" ? "html" : "text", group = null, options = {}) {
|
||
return { path, label, kind, renderAs, group: group || inferFieldGroup(path), ...options };
|
||
}
|
||
|
||
function collection(path, label, group, itemTemplate, itemFields) {
|
||
return {
|
||
path,
|
||
label,
|
||
kind: "collection",
|
||
renderAs: "collection",
|
||
group,
|
||
itemTemplate,
|
||
itemFields,
|
||
};
|
||
}
|
||
|
||
function setStatus(message) {
|
||
el.status.textContent = message;
|
||
}
|
||
|
||
function setDirty(isDirty, message = null) {
|
||
state.dirty = isDirty;
|
||
el.dirtyState.dataset.dirty = String(isDirty);
|
||
el.dirtyState.textContent = isDirty ? "Есть несохранённые изменения" : "Синхронизировано";
|
||
|
||
if (message) {
|
||
setStatus(message);
|
||
}
|
||
}
|
||
|
||
function markDirty(message = null) {
|
||
setDirty(true, message);
|
||
}
|
||
|
||
function createMediaFilePicker() {
|
||
const input = document.createElement("input");
|
||
input.type = "file";
|
||
input.accept = MEDIA_ACCEPT;
|
||
input.className = "admin-file-picker-input";
|
||
input.tabIndex = -1;
|
||
input.setAttribute("aria-hidden", "true");
|
||
document.body.append(input);
|
||
return input;
|
||
}
|
||
|
||
function setFilePickerActive(active) {
|
||
state.filePickerActive = active;
|
||
|
||
if (active) {
|
||
document.body.dataset.filePickerActive = "true";
|
||
} else {
|
||
delete document.body.dataset.filePickerActive;
|
||
}
|
||
}
|
||
|
||
function recoverEditorSurface() {
|
||
if (!activeBlock()) return;
|
||
el.empty.classList.add("hidden");
|
||
el.form.classList.remove("hidden");
|
||
}
|
||
|
||
function scheduleFilePickerRecovery(delay = 360) {
|
||
window.clearTimeout(state.filePickerResetTimer);
|
||
state.filePickerResetTimer = window.setTimeout(() => {
|
||
if (state.mediaUploadActive) return;
|
||
setFilePickerActive(false);
|
||
recoverEditorSurface();
|
||
}, delay);
|
||
}
|
||
|
||
function clone(value) {
|
||
return JSON.parse(JSON.stringify(value));
|
||
}
|
||
|
||
function getByPath(source, path) {
|
||
return path.split(".").reduce((value, key) => value?.[key], source);
|
||
}
|
||
|
||
function setByPath(source, path, nextValue) {
|
||
const keys = path.split(".");
|
||
const lastKey = keys.pop();
|
||
let target = source;
|
||
|
||
keys.forEach((key, index) => {
|
||
const nextKey = keys[index + 1] ?? lastKey;
|
||
|
||
if (target[key] == null || typeof target[key] !== "object") {
|
||
target[key] = /^\d+$/.test(nextKey) ? [] : {};
|
||
}
|
||
|
||
target = target[key];
|
||
});
|
||
|
||
target[lastKey] = nextValue;
|
||
}
|
||
|
||
const LINK_WINDOW_TARGETS = new Set(["_blank", "_self", "_parent", "_top"]);
|
||
|
||
function isWindowTarget(value) {
|
||
return LINK_WINDOW_TARGETS.has(String(value || "").trim());
|
||
}
|
||
|
||
function isExternalHref(value) {
|
||
return /^(https?:)?\/\//i.test(String(value || "")) || /^(mailto:|tel:)/i.test(String(value || ""));
|
||
}
|
||
|
||
function normalizeChoiceLink(item, fallback = {}) {
|
||
if (!item || typeof item !== "object") return;
|
||
|
||
let href = item.href ?? fallback.href ?? "";
|
||
let target = item.target ?? fallback.target ?? "";
|
||
let linkTarget = item.linkTarget ?? fallback.linkTarget ?? "";
|
||
|
||
if (isWindowTarget(target)) {
|
||
linkTarget ||= target;
|
||
target = "";
|
||
}
|
||
|
||
const inferredMode = isExternalHref(href) ? "href" : "target";
|
||
const linkMode = item.linkMode === "href" || item.linkMode === "target" ? item.linkMode : inferredMode;
|
||
|
||
if (linkMode === "target" && !target && href && !isExternalHref(href)) {
|
||
target = href;
|
||
href = "";
|
||
}
|
||
|
||
item.enabled = item.enabled !== false;
|
||
item.href = href;
|
||
item.target = target;
|
||
item.linkMode = linkMode;
|
||
item.linkTarget = linkTarget;
|
||
}
|
||
|
||
function normalizeChoiceLinks(items, fallbacks = []) {
|
||
if (!Array.isArray(items)) return;
|
||
items.forEach((item, index) => normalizeChoiceLink(item, fallbacks[index] || fallbacks[0] || {}));
|
||
}
|
||
|
||
function inferFieldGroup(path) {
|
||
if (path.startsWith("content.navigation.")) return "Шапка";
|
||
if (path.startsWith("content.notifications.")) return "Уведомления";
|
||
if (path.startsWith("content.dock.")) return "Dock";
|
||
if (path.startsWith("content.assets.")) return "Модель и логотипы";
|
||
if (path.startsWith("content.cards.")) return "Тезисы первого экрана";
|
||
if (path.startsWith("content.app.") || path.startsWith("content.accessCard.")) return "Карточка доступа";
|
||
if (path.startsWith("content.form.")) return "Форма";
|
||
if (path === "content.legalHtml" || path.startsWith("content.legal.")) return "Юридический блок";
|
||
if (path === "content.windowTitle" || path === "content.videoSrc") return "Видео-окно";
|
||
if (path.startsWith("content.features.")) return "Пункты";
|
||
if (path.startsWith("content.scroll.")) return "Скролл";
|
||
if (path.startsWith("content.sliderItems.")) return "Слайдер";
|
||
if (path.startsWith("content.bottomInfo.")) return "Нижний информационный блок";
|
||
if (path.startsWith("content.oneClick.")) return "Один клик";
|
||
if (path.startsWith("content.mcp.")) return "MCP";
|
||
if (path.startsWith("content.faq.")) return "FAQ";
|
||
if (path.startsWith("content.cta.")) return "CTA";
|
||
if (path.startsWith("content.plans.") || path.startsWith("content.pricing.")) return "Тарифы";
|
||
if (path.startsWith("content.pricingCells.")) return "Строки тарифов";
|
||
if (path === "content.galleryItems" || path.startsWith("content.galleryItems.")) return "Карточки скриншотов";
|
||
if (path === "content.filesEnabled" || path.startsWith("content.files.")) return "TXT-файлы";
|
||
if (path === "content.footer.policyEnabled" || path === "content.footer.policyHtml") return "Политики";
|
||
if (path.startsWith("content.footer.navLinks.")) return "Навигация футера";
|
||
if (path.startsWith("content.footer.contactLinks.")) return "Контактные ссылки";
|
||
if (path.startsWith("content.footer.")) return "Футер";
|
||
if (path.startsWith("content.heading.") || path === "content.introHtml") return "Заголовок";
|
||
return "Контент";
|
||
}
|
||
|
||
function createDefaultDockItems(dock = {}, assets = {}) {
|
||
return [
|
||
{
|
||
enabled: true,
|
||
title: "NODE.DC",
|
||
href: "javascript:void(0)",
|
||
linkTarget: "",
|
||
targetId: dock.appTarget || "app-data",
|
||
iconSrc: assets.appIconSrc || STATIC_FALLBACK.content.assets.appIconSrc,
|
||
iconAlt: assets.appIconAlt || STATIC_FALLBACK.content.assets.appIconAlt,
|
||
className: "dock-icon ssscript",
|
||
iconClass: "logo",
|
||
dividerBefore: false,
|
||
},
|
||
{
|
||
enabled: true,
|
||
title: "Корзина",
|
||
href: "javascript:void(0)",
|
||
linkTarget: "",
|
||
targetId: "",
|
||
iconSrc: "./assets/webflow/images/69a9ae818a76c773dc3cf7bc_trash.avif",
|
||
iconAlt: dock.trashAlt || "Белая иконка корзины.",
|
||
className: "dock-icon no-bg",
|
||
iconClass: "dock-app-img trash",
|
||
dividerBefore: true,
|
||
},
|
||
];
|
||
}
|
||
|
||
function normalizeDock(dock, assets = {}) {
|
||
const fallbackItems = createDefaultDockItems(dock, assets);
|
||
|
||
if (!Array.isArray(dock.items)) {
|
||
dock.items = fallbackItems;
|
||
} else {
|
||
dock.items = dock.items.map((item, index) => {
|
||
const fallback = fallbackItems[index] || fallbackItems[0];
|
||
return {
|
||
enabled: item.enabled !== false,
|
||
title: item.title || fallback.title || `Элемент ${index + 1}`,
|
||
href: item.href ?? fallback.href ?? "",
|
||
linkTarget: item.linkTarget ?? fallback.linkTarget ?? "",
|
||
targetId: item.targetId ?? fallback.targetId ?? "",
|
||
iconSrc: item.iconSrc || fallback.iconSrc,
|
||
iconAlt: item.iconAlt || item.alt || fallback.iconAlt,
|
||
className: item.className || fallback.className || "dock-icon ssscript",
|
||
iconClass: item.iconClass || fallback.iconClass || "logo",
|
||
dividerBefore: Boolean(item.dividerBefore),
|
||
};
|
||
});
|
||
}
|
||
|
||
dock.demoFileLabel ||= STATIC_FALLBACK.content.dock.demoFileLabel;
|
||
delete dock.appTarget;
|
||
delete dock.trashAlt;
|
||
}
|
||
|
||
function ensureStaticElements() {
|
||
if (!state.page.staticElements) {
|
||
state.page.staticElements = clone(STATIC_FALLBACK);
|
||
return;
|
||
}
|
||
|
||
state.page.staticElements.id ||= STATIC_FALLBACK.id;
|
||
state.page.staticElements.type ||= STATIC_FALLBACK.type;
|
||
state.page.staticElements.adminLabel ||= STATIC_FALLBACK.adminLabel;
|
||
state.page.staticElements.enabled = true;
|
||
state.page.staticElements.content ||= clone(STATIC_FALLBACK.content);
|
||
state.page.staticElements.content.navigation ||= clone(STATIC_FALLBACK.content.navigation);
|
||
state.page.staticElements.content.navigation.logoSrc ||= STATIC_FALLBACK.content.navigation.logoSrc;
|
||
state.page.staticElements.content.navigation.links ||= clone(STATIC_FALLBACK.content.navigation.links);
|
||
normalizeChoiceLinks(state.page.staticElements.content.navigation.links, STATIC_FALLBACK.content.navigation.links);
|
||
state.page.staticElements.content.notifications ||= clone(STATIC_FALLBACK.content.notifications);
|
||
state.page.staticElements.content.notifications.forEach((notification, index) => {
|
||
notification.enabled = notification.enabled !== false;
|
||
notification.eyebrowClass ||= STATIC_FALLBACK.content.notifications[index]?.eyebrowClass || "red-txt gray";
|
||
});
|
||
state.page.staticElements.content.assets ||= clone(STATIC_FALLBACK.content.assets);
|
||
state.page.staticElements.content.dock ||= clone(STATIC_FALLBACK.content.dock);
|
||
normalizeDock(state.page.staticElements.content.dock, state.page.staticElements.content.assets);
|
||
state.page.staticElements.editableFields = clone(STATIC_FALLBACK.editableFields);
|
||
}
|
||
|
||
function ensureSectionsRegion() {
|
||
const regions = Array.isArray(state.page.regions) ? state.page.regions : [];
|
||
const blocks = regions.flatMap((region) =>
|
||
(region.blocks ?? []).map((block) => {
|
||
block.region ||= region.id;
|
||
return block;
|
||
}),
|
||
);
|
||
|
||
state.page.regions = [
|
||
{
|
||
id: SECTIONS_REGION_ID,
|
||
label: SECTIONS_REGION_LABEL,
|
||
description: "Единый порядок секций главной страницы.",
|
||
blocks,
|
||
},
|
||
];
|
||
}
|
||
|
||
function sectionsRegionIndex() {
|
||
return Math.max(
|
||
0,
|
||
state.page.regions.findIndex((region) => region.id === SECTIONS_REGION_ID),
|
||
);
|
||
}
|
||
|
||
function isStaticSelection() {
|
||
return state.selected?.kind === "static";
|
||
}
|
||
|
||
function activeRegion() {
|
||
if (!state.selected) return null;
|
||
|
||
if (isStaticSelection()) {
|
||
return {
|
||
id: "static",
|
||
label: "Статичные элементы",
|
||
description: "Shell-слой страницы: шапка, уведомления, dock и базовые ассеты.",
|
||
};
|
||
}
|
||
|
||
return state.page.regions[state.selected.regionIndex];
|
||
}
|
||
|
||
function activeBlock() {
|
||
if (!state.selected) return null;
|
||
|
||
if (isStaticSelection()) {
|
||
return state.page.staticElements;
|
||
}
|
||
|
||
const region = activeRegion();
|
||
if (!region || state.selected.blockIndex == null) return null;
|
||
return region.blocks[state.selected.blockIndex];
|
||
}
|
||
|
||
function uniqueId(base) {
|
||
const ids = new Set([
|
||
state.page.staticElements?.id,
|
||
...state.page.regions.flatMap((region) => region.blocks.map((block) => block.id)),
|
||
]);
|
||
let candidate = `${base}-copy`;
|
||
let index = 2;
|
||
|
||
while (ids.has(candidate)) {
|
||
candidate = `${base}-copy-${index}`;
|
||
index += 1;
|
||
}
|
||
|
||
return candidate;
|
||
}
|
||
|
||
function uniqueBlockId(base) {
|
||
return uniqueId(safeBucketSegment(base || "block").replace(/-copy(?:-\d+)?$/, ""));
|
||
}
|
||
|
||
function truncateText(value, maxLength = 22) {
|
||
if (!value) return "";
|
||
return value.length > maxLength ? `${value.slice(0, maxLength - 1)}…` : value;
|
||
}
|
||
|
||
function fileNameFromUrl(value) {
|
||
if (!value) return "Файл не выбран";
|
||
|
||
try {
|
||
const clean = value.split("?")[0].split("#")[0];
|
||
return decodeURIComponent(clean.slice(clean.lastIndexOf("/") + 1)) || value;
|
||
} catch {
|
||
return value;
|
||
}
|
||
}
|
||
|
||
function safeBucketSegment(value) {
|
||
const safe = String(value || "site")
|
||
.normalize("NFKD")
|
||
.replace(/[^\w.-]+/g, "-")
|
||
.replace(/^-+|-+$/g, "")
|
||
.toLowerCase();
|
||
|
||
return safe || "site";
|
||
}
|
||
|
||
function adminPreviewUrl(value) {
|
||
if (!value) return "";
|
||
if (/^(blob:|data:|https?:|\/)/i.test(value)) return value;
|
||
if (value.startsWith("./")) return `.${value}`;
|
||
return value;
|
||
}
|
||
|
||
function mediaKindFromValue(value) {
|
||
if (!value) return null;
|
||
if (/\.(mp4|webm|mov|m4v|avi|mkv)(\?.*)?$/i.test(value)) return "video";
|
||
if (/\.(png|jpe?g|gif|svg|avif|webp)(\?.*)?$/i.test(value)) return "image";
|
||
return null;
|
||
}
|
||
|
||
function shouldWarnAboutSolidLogoBackground(editableField) {
|
||
const path = String(editableField?.path || "").toLowerCase();
|
||
const label = String(editableField?.label || "").toLowerCase();
|
||
return /logo|icon|wordmark|логотип|икон/.test(`${path} ${label}`);
|
||
}
|
||
|
||
function uploadBucketForField(block, editableField) {
|
||
const path = editableField.path.toLowerCase();
|
||
const currentValue = String(getByPath(block, editableField.path) ?? "").toLowerCase();
|
||
const blockSegment = safeBucketSegment(block?.id || block?.type || "site");
|
||
let root = "images";
|
||
|
||
if (path.includes("webgl") || currentValue.endsWith(".glb") || currentValue.endsWith(".gltf")) root = "models";
|
||
if (path.includes("video") || path.includes("media") || path.includes("sliders") || path.includes("slideritems")) root = "media";
|
||
if (path.includes("font") || /\.(woff2?|ttf|otf)(\?.*)?$/i.test(currentValue)) root = "fonts";
|
||
|
||
return `${root}/${blockSegment}`;
|
||
}
|
||
|
||
function blockIcon(block) {
|
||
const id = block.id || "";
|
||
const type = block.type || "";
|
||
|
||
if (id === "static-elements") return "SE";
|
||
if (id.includes("gallery") || id.includes("screenshot")) return "SC";
|
||
if (id.includes("hero")) return "H";
|
||
if (id.includes("feature") || id.includes("video")) return "V";
|
||
if (id.includes("component")) return "C";
|
||
if (id.includes("modes")) return "AI";
|
||
if (id.includes("faq")) return "Q";
|
||
if (id.includes("pricing")) return "P";
|
||
if (id.includes("waitlist")) return "W";
|
||
if (id.includes("footer")) return "F";
|
||
if (type.includes("Cta")) return "GO";
|
||
return "B";
|
||
}
|
||
|
||
function readFileAsDataUrl(file) {
|
||
return new Promise((resolve, reject) => {
|
||
const reader = new FileReader();
|
||
reader.addEventListener("load", () => resolve(String(reader.result)));
|
||
reader.addEventListener("error", () => reject(reader.error ?? new Error("Не удалось прочитать файл")));
|
||
reader.readAsDataURL(file);
|
||
});
|
||
}
|
||
|
||
function labelForRegion(region) {
|
||
if (region.id === SECTIONS_REGION_ID || region.id === "beforeCViz" || region.id === "cViz") return SECTIONS_REGION_LABEL;
|
||
return region.label || region.id;
|
||
}
|
||
|
||
function blockMeta(block) {
|
||
return block.template || block.type || block.id;
|
||
}
|
||
|
||
function cleanupDragState() {
|
||
state.drag = null;
|
||
state.dragTarget = null;
|
||
document.querySelectorAll(".dragging, .drag-over, .sorting-source, .sorting-active").forEach((node) => {
|
||
node.classList.remove("dragging", "drag-over", "sorting-source", "sorting-active");
|
||
});
|
||
document.querySelectorAll(".sortable-ghost, .sortable-placeholder").forEach((node) => node.remove());
|
||
}
|
||
|
||
function createSortableGhost(source, event) {
|
||
const rect = source.getBoundingClientRect();
|
||
const ghost = source.cloneNode(true);
|
||
|
||
ghost.classList.add("sortable-ghost");
|
||
ghost.style.width = `${rect.width}px`;
|
||
ghost.style.height = `${rect.height}px`;
|
||
ghost.dataset.dragOffsetX = String(event.clientX - rect.left);
|
||
ghost.dataset.dragOffsetY = String(event.clientY - rect.top);
|
||
document.body.append(ghost);
|
||
moveSortableGhost(ghost, event);
|
||
|
||
return ghost;
|
||
}
|
||
|
||
function moveSortableGhost(ghost, event) {
|
||
ghost.style.left = `${event.clientX - Number(ghost.dataset.dragOffsetX || 0)}px`;
|
||
ghost.style.top = `${event.clientY - Number(ghost.dataset.dragOffsetY || 0)}px`;
|
||
}
|
||
|
||
function createSortablePlaceholder(source) {
|
||
const rect = source.getBoundingClientRect();
|
||
const placeholder = document.createElement("div");
|
||
|
||
placeholder.className = "sortable-placeholder";
|
||
placeholder.style.height = `${rect.height}px`;
|
||
return placeholder;
|
||
}
|
||
|
||
function pointInsideRect(event, rect) {
|
||
return event.clientX >= rect.left && event.clientX <= rect.right && event.clientY >= rect.top && event.clientY <= rect.bottom;
|
||
}
|
||
|
||
function movePlaceholderByPoint({ event, list, source, placeholder, selector }) {
|
||
const rect = list.getBoundingClientRect();
|
||
if (!pointInsideRect(event, rect)) return;
|
||
|
||
const candidates = [...list.querySelectorAll(selector)].filter((node) => node !== source && node !== placeholder);
|
||
|
||
for (const candidate of candidates) {
|
||
const candidateRect = candidate.getBoundingClientRect();
|
||
if (event.clientY < candidateRect.top + candidateRect.height / 2) {
|
||
list.insertBefore(placeholder, candidate);
|
||
return;
|
||
}
|
||
}
|
||
|
||
list.append(placeholder);
|
||
}
|
||
|
||
function sortablePlaceholderIndex({ list, placeholder, source, selector }) {
|
||
return [...list.querySelectorAll(`${selector}, .sortable-placeholder`)]
|
||
.filter((node) => node === placeholder || node !== source)
|
||
.indexOf(placeholder);
|
||
}
|
||
|
||
function moveBlockWithinRegionToIndex(regionIndex, fromIndex, toIndex) {
|
||
const region = state.page.regions[regionIndex];
|
||
if (!region || fromIndex === toIndex || toIndex < 0) {
|
||
cleanupDragState();
|
||
return;
|
||
}
|
||
|
||
const [block] = region.blocks.splice(fromIndex, 1);
|
||
region.blocks.splice(Math.min(toIndex, region.blocks.length), 0, block);
|
||
state.selected = { kind: "block", regionIndex, blockIndex: Math.min(toIndex, region.blocks.length - 1) };
|
||
cleanupDragState();
|
||
renderAll();
|
||
markDirty("Порядок блоков изменён локально. Нажмите «Сохранить модель» или «Обновить index.html».");
|
||
}
|
||
|
||
function startPointerDrag(event, button, dragContext) {
|
||
if (event.button !== 0) return;
|
||
event.preventDefault();
|
||
event.stopPropagation();
|
||
|
||
const list = button.closest(".block-list");
|
||
if (!list) return;
|
||
|
||
const placeholder = createSortablePlaceholder(button);
|
||
const ghost = createSortableGhost(button, event);
|
||
|
||
state.drag = dragContext;
|
||
state.dragTarget = dragContext;
|
||
button.classList.add("dragging", "sorting-source");
|
||
list.classList.add("sorting-active");
|
||
button.after(placeholder);
|
||
|
||
const onMove = (moveEvent) => {
|
||
moveSortableGhost(ghost, moveEvent);
|
||
movePlaceholderByPoint({
|
||
event: moveEvent,
|
||
list,
|
||
source: button,
|
||
placeholder,
|
||
selector: ".block-btn.has-drag-handle",
|
||
});
|
||
};
|
||
|
||
const onFinish = () => {
|
||
document.removeEventListener("pointermove", onMove);
|
||
document.removeEventListener("pointerup", onFinish);
|
||
document.removeEventListener("pointercancel", onCancel);
|
||
|
||
const nextIndex = sortablePlaceholderIndex({
|
||
list,
|
||
placeholder,
|
||
source: button,
|
||
selector: ".block-btn.has-drag-handle",
|
||
});
|
||
moveBlockWithinRegionToIndex(dragContext.regionIndex, dragContext.blockIndex, nextIndex);
|
||
};
|
||
|
||
const onCancel = () => {
|
||
document.removeEventListener("pointermove", onMove);
|
||
document.removeEventListener("pointerup", onFinish);
|
||
document.removeEventListener("pointercancel", onCancel);
|
||
cleanupDragState();
|
||
};
|
||
|
||
document.addEventListener("pointermove", onMove);
|
||
document.addEventListener("pointerup", onFinish);
|
||
document.addEventListener("pointercancel", onCancel);
|
||
}
|
||
|
||
function reorderBlockWithinRegion(from, to) {
|
||
if (!from || from.regionIndex !== to.regionIndex || from.blockIndex === to.blockIndex) {
|
||
cleanupDragState();
|
||
return;
|
||
}
|
||
|
||
const region = state.page.regions[from.regionIndex];
|
||
if (!region) {
|
||
cleanupDragState();
|
||
return;
|
||
}
|
||
|
||
const [block] = region.blocks.splice(from.blockIndex, 1);
|
||
let insertIndex = to.blockIndex;
|
||
if (from.blockIndex < to.blockIndex) insertIndex -= 1;
|
||
region.blocks.splice(insertIndex, 0, block);
|
||
state.selected = { kind: "block", regionIndex: from.regionIndex, blockIndex: insertIndex };
|
||
cleanupDragState();
|
||
renderAll();
|
||
markDirty("Порядок блоков изменён локально. Нажмите «Сохранить модель» или «Обновить index.html».");
|
||
}
|
||
|
||
function renderBlockButton({ list, block, meta, active, disabled, onClick, dragContext = null }) {
|
||
const button = document.createElement("div");
|
||
const icon = document.createElement("span");
|
||
const copy = document.createElement("span");
|
||
const name = document.createElement("span");
|
||
const description = document.createElement("span");
|
||
const canDrag = Boolean(dragContext);
|
||
|
||
button.role = "button";
|
||
button.tabIndex = 0;
|
||
button.className = `block-btn${active ? " active" : ""}${disabled ? " disabled" : ""}${canDrag ? " has-drag-handle" : ""}`;
|
||
button.dataset.adminBlockId = block.id || "";
|
||
button.dataset.adminBlockType = block.type || "";
|
||
button.dataset.adminBlockTemplate = block.template || "";
|
||
if (canDrag) {
|
||
button.dataset.regionIndex = String(dragContext.regionIndex);
|
||
button.dataset.blockIndex = String(dragContext.blockIndex);
|
||
}
|
||
icon.className = "block-icon";
|
||
icon.textContent = blockIcon(block);
|
||
copy.className = "block-copy";
|
||
name.className = "block-name";
|
||
name.textContent = block.adminLabel || block.id;
|
||
description.className = "block-meta";
|
||
description.textContent = meta;
|
||
copy.append(name, description);
|
||
button.append(icon, copy);
|
||
|
||
if (canDrag) {
|
||
const handle = document.createElement("span");
|
||
handle.className = "block-drag-handle";
|
||
handle.draggable = false;
|
||
handle.title = "Перетащить блок";
|
||
handle.setAttribute("aria-label", "Перетащить блок");
|
||
handle.textContent = "⋮⋮";
|
||
handle.addEventListener("click", (event) => event.stopPropagation());
|
||
handle.addEventListener("pointerdown", (event) => startPointerDrag(event, button, dragContext));
|
||
handle.addEventListener("dragstart", (event) => {
|
||
state.drag = dragContext;
|
||
button.classList.add("dragging");
|
||
event.dataTransfer.effectAllowed = "move";
|
||
event.dataTransfer.setData("text/plain", `${dragContext.regionIndex}:${dragContext.blockIndex}`);
|
||
});
|
||
handle.addEventListener("dragend", cleanupDragState);
|
||
handle.addEventListener("keydown", (event) => event.stopPropagation());
|
||
button.append(handle);
|
||
}
|
||
|
||
if (canDrag) {
|
||
button.addEventListener("dragover", (event) => {
|
||
if (!state.drag || state.drag.regionIndex !== dragContext.regionIndex) return;
|
||
event.preventDefault();
|
||
event.dataTransfer.dropEffect = "move";
|
||
button.classList.add("drag-over");
|
||
});
|
||
button.addEventListener("dragleave", () => button.classList.remove("drag-over"));
|
||
button.addEventListener("drop", (event) => {
|
||
event.preventDefault();
|
||
button.classList.remove("drag-over");
|
||
reorderBlockWithinRegion(state.drag, dragContext);
|
||
});
|
||
}
|
||
|
||
button.addEventListener("click", onClick);
|
||
button.addEventListener("keydown", (event) => {
|
||
if (event.key !== "Enter" && event.key !== " ") return;
|
||
event.preventDefault();
|
||
onClick(event);
|
||
});
|
||
list.append(button);
|
||
}
|
||
|
||
function renderRegions() {
|
||
el.regions.innerHTML = "";
|
||
|
||
const staticNode = document.createElement("section");
|
||
const staticTitle = document.createElement("h3");
|
||
const staticList = document.createElement("div");
|
||
|
||
staticTitle.className = "region-title";
|
||
staticTitle.textContent = "Static";
|
||
staticList.className = "block-list";
|
||
renderBlockButton({
|
||
list: staticList,
|
||
block: state.page.staticElements,
|
||
meta: "shell · nav · notifications · dock",
|
||
active: isStaticSelection(),
|
||
disabled: false,
|
||
onClick: () => {
|
||
state.selected = { kind: "static" };
|
||
renderAll();
|
||
},
|
||
});
|
||
staticNode.append(staticTitle, staticList);
|
||
el.regions.append(staticNode);
|
||
|
||
state.page.regions.forEach((region, regionIndex) => {
|
||
const regionNode = document.createElement("section");
|
||
const title = document.createElement("h3");
|
||
const list = document.createElement("div");
|
||
|
||
title.className = "region-title";
|
||
title.textContent = labelForRegion(region);
|
||
list.className = "block-list";
|
||
|
||
region.blocks.forEach((block, blockIndex) => {
|
||
const isActive =
|
||
state.selected?.kind === "block" &&
|
||
state.selected?.regionIndex === regionIndex &&
|
||
state.selected?.blockIndex === blockIndex;
|
||
|
||
renderBlockButton({
|
||
list,
|
||
block,
|
||
meta: blockMeta(block),
|
||
active: isActive,
|
||
disabled: block.enabled === false,
|
||
dragContext: { regionIndex, blockIndex },
|
||
onClick: () => {
|
||
state.selected = { kind: "block", regionIndex, blockIndex };
|
||
renderAll();
|
||
},
|
||
});
|
||
});
|
||
|
||
regionNode.append(title, list);
|
||
el.regions.append(regionNode);
|
||
});
|
||
}
|
||
|
||
function blockTemplates() {
|
||
const regionIndex = sectionsRegionIndex();
|
||
|
||
return state.templates.map((template) => {
|
||
return {
|
||
...template,
|
||
regionIndex,
|
||
regionLabel: SECTIONS_REGION_LABEL,
|
||
};
|
||
});
|
||
}
|
||
|
||
function renderTemplateModal() {
|
||
el.templateList.innerHTML = "";
|
||
|
||
for (const template of blockTemplates()) {
|
||
const card = document.createElement("button");
|
||
const icon = document.createElement("span");
|
||
const copy = document.createElement("span");
|
||
const title = document.createElement("span");
|
||
const meta = document.createElement("span");
|
||
const region = document.createElement("span");
|
||
|
||
card.type = "button";
|
||
card.className = "template-card";
|
||
icon.className = "template-card-icon";
|
||
icon.textContent = blockIcon(template.block);
|
||
copy.className = "template-card-copy";
|
||
title.className = "template-card-title";
|
||
title.textContent = template.block.adminLabel || template.block.id;
|
||
meta.className = "template-card-meta";
|
||
meta.textContent = blockMeta(template.block);
|
||
region.className = "template-card-region";
|
||
region.textContent = `Добавится в: ${template.regionLabel}`;
|
||
copy.append(title, meta, region);
|
||
card.append(icon, copy);
|
||
card.addEventListener("click", () => addBlockFromTemplate(template.key));
|
||
el.templateList.append(card);
|
||
}
|
||
}
|
||
|
||
function openTemplateModal() {
|
||
renderTemplateModal();
|
||
el.templateModal.classList.remove("hidden");
|
||
el.templateList.querySelector("button")?.focus();
|
||
}
|
||
|
||
function closeTemplateModal() {
|
||
el.templateModal.classList.add("hidden");
|
||
el.addBlock.focus();
|
||
}
|
||
|
||
function closeDeleteModal(confirmed = false) {
|
||
const resolve = state.deleteConfirmResolve;
|
||
|
||
state.deleteConfirmResolve = null;
|
||
el.deleteModal.classList.add("hidden");
|
||
if (resolve) resolve(confirmed);
|
||
}
|
||
|
||
function requestDeleteConfirmation({
|
||
title = "Подтвердите действие",
|
||
body = "Вы действительно подтвердить удаление элемента?",
|
||
} = {}) {
|
||
if (state.deleteConfirmResolve) closeDeleteModal(false);
|
||
|
||
return new Promise((resolve) => {
|
||
state.deleteConfirmResolve = resolve;
|
||
el.deleteModalTitle.textContent = title;
|
||
el.deleteModalBody.textContent = body;
|
||
el.deleteModal.classList.remove("hidden");
|
||
el.deleteModalConfirm.focus();
|
||
});
|
||
}
|
||
|
||
function addBlockFromTemplate(templateKey) {
|
||
const template = blockTemplates().find((candidate) => candidate.key === templateKey);
|
||
if (!template) return;
|
||
|
||
const region = state.page.regions[template.regionIndex];
|
||
const block = clone(template.block);
|
||
|
||
block.id = uniqueBlockId(block.id);
|
||
block.enabled = true;
|
||
block.scopeIds = true;
|
||
region.blocks.push(block);
|
||
state.selected = { kind: "block", regionIndex: template.regionIndex, blockIndex: region.blocks.length - 1 };
|
||
closeTemplateModal();
|
||
renderAll();
|
||
markDirty(`Добавлен блок «${block.adminLabel || block.id}». Нажмите «Сохранить модель» или «Обновить index.html».`);
|
||
}
|
||
|
||
function setStructuralControlsDisabled(disabled) {
|
||
for (const control of [el.moveUp, el.moveDown, el.duplicate, el.copy, el.pasteAfter, el.deleteBlock]) {
|
||
control.disabled = disabled;
|
||
}
|
||
}
|
||
|
||
function renderEditorError(error) {
|
||
console.error(error);
|
||
el.empty.classList.add("hidden");
|
||
el.form.classList.remove("hidden");
|
||
el.contentFields.innerHTML = "";
|
||
|
||
const note = document.createElement("div");
|
||
note.className = "empty-note editor-error-note";
|
||
note.textContent = `Редактор не смог отрисовать поля блока: ${error.message}`;
|
||
el.contentFields.append(note);
|
||
setStatus(`Ошибка редактора: ${error.message}`);
|
||
}
|
||
|
||
function renderEditor() {
|
||
const region = activeRegion();
|
||
const block = activeBlock();
|
||
const isStatic = isStaticSelection();
|
||
|
||
if (!block) {
|
||
el.empty.classList.remove("hidden");
|
||
el.form.classList.add("hidden");
|
||
el.selectedRegion.textContent = "NODE.DC / Выберите блок";
|
||
el.selectedTitle.textContent = "Контентный слой";
|
||
return;
|
||
}
|
||
|
||
el.empty.classList.add("hidden");
|
||
el.form.classList.remove("hidden");
|
||
el.form.dataset.static = String(isStatic);
|
||
el.selectedRegion.textContent = `NODE.DC / ${region.label || region.id}`;
|
||
el.selectedTitle.textContent = block.adminLabel || block.id;
|
||
el.id.value = block.id || "";
|
||
el.label.value = block.adminLabel || "";
|
||
el.template.value = block.template || block.type || "";
|
||
el.anchor.value = block.anchor || "";
|
||
el.enabled.checked = block.enabled !== false;
|
||
el.id.readOnly = isStatic;
|
||
el.anchor.disabled = isStatic;
|
||
el.enabled.disabled = isStatic;
|
||
el.enabled.closest(".toggle-row").hidden = isStatic;
|
||
setStructuralControlsDisabled(isStatic);
|
||
|
||
try {
|
||
renderContentFields(block);
|
||
} catch (error) {
|
||
renderEditorError(error);
|
||
}
|
||
|
||
el.json.value = JSON.stringify(block, null, 2);
|
||
}
|
||
|
||
function renderAll() {
|
||
try {
|
||
renderRegions();
|
||
renderEditor();
|
||
} catch (error) {
|
||
console.error(error);
|
||
setStatus(`Ошибка рендера админки: ${error.message}`);
|
||
}
|
||
}
|
||
|
||
function syncBlockFromFields() {
|
||
const block = activeBlock();
|
||
if (!block) return;
|
||
|
||
syncContentFields();
|
||
block.adminLabel = el.label.value.trim() || block.adminLabel || block.id;
|
||
|
||
if (!isStaticSelection()) {
|
||
block.id = el.id.value.trim();
|
||
block.anchor = el.anchor.value.trim() || null;
|
||
block.enabled = el.enabled.checked;
|
||
}
|
||
|
||
el.json.value = JSON.stringify(block, null, 2);
|
||
renderRegions();
|
||
markDirty();
|
||
}
|
||
|
||
function groupEditableFields(block) {
|
||
const groups = new Map();
|
||
|
||
for (const editableField of block.editableFields ?? []) {
|
||
const groupName = editableField.group || inferFieldGroup(editableField.path);
|
||
if (!groups.has(groupName)) groups.set(groupName, []);
|
||
groups.get(groupName).push(editableField);
|
||
}
|
||
|
||
return groups;
|
||
}
|
||
|
||
function resetMediaPreview(preview, hint) {
|
||
preview.classList.remove("is-image", "is-video", "is-solid-dark");
|
||
preview.innerHTML = "";
|
||
preview.title = "";
|
||
if (hint) hint.textContent = "";
|
||
}
|
||
|
||
function analyzeLogoPreview(image, preview, hint, editableField) {
|
||
if (!hint || !shouldWarnAboutSolidLogoBackground(editableField)) return;
|
||
|
||
try {
|
||
const sampleSize = 24;
|
||
const canvas = document.createElement("canvas");
|
||
const context = canvas.getContext("2d", { willReadFrequently: true });
|
||
if (!context) return;
|
||
|
||
canvas.width = sampleSize;
|
||
canvas.height = sampleSize;
|
||
context.drawImage(image, 0, 0, sampleSize, sampleSize);
|
||
const data = context.getImageData(0, 0, sampleSize, sampleSize).data;
|
||
let opaque = 0;
|
||
let edgeOpaque = 0;
|
||
let edgeDark = 0;
|
||
|
||
for (let y = 0; y < sampleSize; y += 1) {
|
||
for (let x = 0; x < sampleSize; x += 1) {
|
||
const offset = (y * sampleSize + x) * 4;
|
||
const alpha = data[offset + 3];
|
||
if (alpha < 240) continue;
|
||
|
||
opaque += 1;
|
||
const isEdge = x <= 1 || y <= 1 || x >= sampleSize - 2 || y >= sampleSize - 2;
|
||
const isDark = data[offset] + data[offset + 1] + data[offset + 2] < 66;
|
||
|
||
if (isEdge) {
|
||
edgeOpaque += 1;
|
||
if (isDark) edgeDark += 1;
|
||
}
|
||
}
|
||
}
|
||
|
||
const total = sampleSize * sampleSize;
|
||
const edgeRatio = edgeOpaque ? edgeDark / edgeOpaque : 0;
|
||
const opaqueRatio = opaque / total;
|
||
|
||
if (opaqueRatio > 0.92 && edgeRatio > 0.82) {
|
||
preview.classList.add("is-solid-dark");
|
||
hint.textContent = "Файл с непрозрачным тёмным фоном. Для логотипа на тёмном интерфейсе лучше PNG/SVG с прозрачностью.";
|
||
}
|
||
} catch {
|
||
// External images can be blocked by canvas CORS. Preview still works, just without diagnostics.
|
||
}
|
||
}
|
||
|
||
function renderMediaPreview(preview, value, hint = null, editableField = null) {
|
||
resetMediaPreview(preview, hint);
|
||
|
||
const src = adminPreviewUrl(value);
|
||
const kind = mediaKindFromValue(value);
|
||
|
||
if (!src) {
|
||
preview.textContent = "FILE";
|
||
return;
|
||
}
|
||
|
||
if (kind === "video") {
|
||
const video = document.createElement("video");
|
||
preview.classList.add("is-video");
|
||
video.src = src;
|
||
video.autoplay = true;
|
||
video.loop = true;
|
||
video.muted = true;
|
||
video.playsInline = true;
|
||
preview.append(video);
|
||
return;
|
||
}
|
||
|
||
if (kind === "image") {
|
||
const image = document.createElement("img");
|
||
preview.classList.add("is-image");
|
||
image.src = src;
|
||
image.alt = "";
|
||
image.loading = "lazy";
|
||
image.addEventListener("load", () => analyzeLogoPreview(image, preview, hint, editableField));
|
||
image.addEventListener("error", () => {
|
||
resetMediaPreview(preview, hint);
|
||
preview.textContent = "FILE";
|
||
if (hint) hint.textContent = "Превью не загрузилось. Проверьте путь или внешний URL.";
|
||
});
|
||
preview.append(image);
|
||
return;
|
||
}
|
||
|
||
preview.textContent = "FILE";
|
||
}
|
||
|
||
function updateMediaFieldValue({ block, editableField, hiddenInput, urlInput, fileName, preview, hint, value }) {
|
||
hiddenInput.value = value;
|
||
urlInput.value = value;
|
||
fileName.textContent = truncateText(fileNameFromUrl(value), 28);
|
||
fileName.title = fileNameFromUrl(value);
|
||
setByPath(block, editableField.path, value);
|
||
renderMediaPreview(preview, value, hint, editableField);
|
||
|
||
if (activeBlock() === block) {
|
||
el.json.value = JSON.stringify(block, null, 2);
|
||
}
|
||
|
||
markDirty();
|
||
}
|
||
|
||
async function uploadMediaFile({ block, editableField, hiddenInput, urlInput, fileName, preview, hint, error, setSource, file }) {
|
||
if (!file) return;
|
||
|
||
state.mediaUploadActive = true;
|
||
setFilePickerActive(true);
|
||
recoverEditorSurface();
|
||
error.textContent = "";
|
||
fileName.textContent = "Сохраняем в assets...";
|
||
|
||
try {
|
||
const formData = new FormData();
|
||
formData.append("file", file, file.name);
|
||
formData.append("fileName", file.name);
|
||
formData.append("mimeType", file.type || "application/octet-stream");
|
||
formData.append("bucket", uploadBucketForField(block, editableField));
|
||
|
||
const response = await fetch("/api/upload/asset", {
|
||
method: "POST",
|
||
body: formData,
|
||
});
|
||
const payload = await response.json().catch(() => ({
|
||
ok: false,
|
||
error: `Сервер вернул ${response.status}`,
|
||
}));
|
||
|
||
if (!response.ok || !payload.ok) {
|
||
throw new Error(payload.error || "Файл не удалось сохранить");
|
||
}
|
||
|
||
updateMediaFieldValue({
|
||
block,
|
||
editableField,
|
||
hiddenInput,
|
||
urlInput,
|
||
fileName,
|
||
preview,
|
||
hint,
|
||
value: payload.url,
|
||
});
|
||
setSource("file");
|
||
markDirty(`Файл сохранён: ${payload.url}. Нажмите «Сохранить модель», чтобы записать путь в content/pages/home.json.`);
|
||
} catch (uploadError) {
|
||
error.textContent = uploadError.message;
|
||
fileName.textContent = truncateText(fileNameFromUrl(hiddenInput.value), 28);
|
||
setStatus(`Ошибка загрузки: ${uploadError.message}`);
|
||
} finally {
|
||
state.mediaUploadActive = false;
|
||
mediaFilePicker.value = "";
|
||
setFilePickerActive(false);
|
||
recoverEditorSurface();
|
||
}
|
||
}
|
||
|
||
function openMediaFilePicker(context) {
|
||
setFilePickerActive(true);
|
||
recoverEditorSurface();
|
||
window.clearTimeout(state.filePickerResetTimer);
|
||
|
||
mediaFilePicker.accept = MEDIA_ACCEPT;
|
||
mediaFilePicker.value = "";
|
||
mediaFilePicker.oncancel = () => {
|
||
setFilePickerActive(false);
|
||
recoverEditorSurface();
|
||
};
|
||
mediaFilePicker.onchange = async () => {
|
||
const file = mediaFilePicker.files?.[0];
|
||
|
||
if (!file) {
|
||
setFilePickerActive(false);
|
||
recoverEditorSurface();
|
||
return;
|
||
}
|
||
|
||
await uploadMediaFile({ ...context, file });
|
||
};
|
||
|
||
window.addEventListener(
|
||
"focus",
|
||
() => {
|
||
window.setTimeout(() => {
|
||
if (state.mediaUploadActive || mediaFilePicker.files?.length) return;
|
||
setFilePickerActive(false);
|
||
recoverEditorSurface();
|
||
}, 180);
|
||
},
|
||
{ once: true },
|
||
);
|
||
|
||
try {
|
||
mediaFilePicker.click();
|
||
} catch (error) {
|
||
setFilePickerActive(false);
|
||
recoverEditorSurface();
|
||
context.error.textContent = error.message;
|
||
setStatus(`Ошибка открытия выбора файла: ${error.message}`);
|
||
}
|
||
}
|
||
|
||
function renderMediaField({ block, editableField, grid }) {
|
||
const value = getByPath(block, editableField.path) ?? "";
|
||
const container = document.createElement("div");
|
||
const labelRow = document.createElement("div");
|
||
const labelText = document.createElement("span");
|
||
const kind = document.createElement("span");
|
||
const hiddenInput = document.createElement("input");
|
||
const control = document.createElement("div");
|
||
const fileControl = document.createElement("div");
|
||
const fileButton = document.createElement("button");
|
||
const fileName = document.createElement("span");
|
||
const urlInput = document.createElement("input");
|
||
const sourceSwitch = document.createElement("div");
|
||
const fileSourceButton = document.createElement("button");
|
||
const urlSourceButton = document.createElement("button");
|
||
const preview = document.createElement("div");
|
||
const path = document.createElement("span");
|
||
const hint = document.createElement("span");
|
||
const error = document.createElement("span");
|
||
let source = /^(https?:)?\/\//i.test(value) ? "url" : "file";
|
||
|
||
function setSource(nextSource) {
|
||
source = nextSource;
|
||
fileControl.hidden = source !== "file";
|
||
urlInput.hidden = source !== "url";
|
||
fileSourceButton.dataset.active = String(source === "file");
|
||
urlSourceButton.dataset.active = String(source === "url");
|
||
}
|
||
|
||
container.className = "field-control wide service-media-field";
|
||
labelRow.className = "field-label-row";
|
||
labelText.className = "field-label-text";
|
||
labelText.textContent = editableField.label || editableField.path;
|
||
kind.className = "field-kind";
|
||
kind.textContent = editableField.kind || "media";
|
||
labelRow.append(labelText, kind);
|
||
|
||
hiddenInput.className = "service-media-hidden-input";
|
||
hiddenInput.type = "hidden";
|
||
hiddenInput.dataset.path = editableField.path;
|
||
hiddenInput.value = value;
|
||
|
||
control.className = "service-media-control";
|
||
|
||
fileControl.className = "service-media-file-control";
|
||
fileButton.className = "service-media-file-button";
|
||
fileButton.type = "button";
|
||
fileButton.textContent = "Выберите файл";
|
||
fileName.className = "service-media-file-name";
|
||
fileName.textContent = truncateText(fileNameFromUrl(value), 28);
|
||
fileName.title = fileNameFromUrl(value);
|
||
fileControl.append(fileButton, fileName);
|
||
|
||
urlInput.className = "service-media-url-input";
|
||
urlInput.type = "text";
|
||
urlInput.placeholder = "https://...";
|
||
urlInput.autocomplete = "off";
|
||
urlInput.value = value;
|
||
|
||
sourceSwitch.className = "service-media-source-switch";
|
||
sourceSwitch.setAttribute("aria-label", `${editableField.label || editableField.path}: источник`);
|
||
fileSourceButton.className = "service-media-source-button";
|
||
fileSourceButton.type = "button";
|
||
fileSourceButton.title = "Файл с диска";
|
||
fileSourceButton.setAttribute("aria-label", "Файл с диска");
|
||
fileSourceButton.textContent = "HD";
|
||
urlSourceButton.className = "service-media-source-button";
|
||
urlSourceButton.type = "button";
|
||
urlSourceButton.title = "Внешняя ссылка";
|
||
urlSourceButton.setAttribute("aria-label", "Внешняя ссылка");
|
||
urlSourceButton.textContent = "URL";
|
||
sourceSwitch.append(fileSourceButton, urlSourceButton);
|
||
|
||
preview.className = "service-media-preview";
|
||
renderMediaPreview(preview, value, hint, editableField);
|
||
|
||
path.className = "field-path";
|
||
path.textContent = `${editableField.path} -> assets/uploads/${uploadBucketForField(block, editableField)}`;
|
||
hint.className = "media-upload-hint";
|
||
error.className = "media-upload-error";
|
||
|
||
fileSourceButton.addEventListener("click", () => setSource("file"));
|
||
urlSourceButton.addEventListener("click", () => {
|
||
setSource("url");
|
||
urlInput.focus();
|
||
});
|
||
|
||
urlInput.addEventListener("input", () => {
|
||
updateMediaFieldValue({
|
||
block,
|
||
editableField,
|
||
hiddenInput,
|
||
urlInput,
|
||
fileName,
|
||
preview,
|
||
hint,
|
||
value: urlInput.value,
|
||
});
|
||
});
|
||
|
||
fileButton.addEventListener("pointerdown", () => {
|
||
setFilePickerActive(true);
|
||
scheduleFilePickerRecovery();
|
||
});
|
||
fileButton.addEventListener("click", () => {
|
||
openMediaFilePicker({
|
||
block,
|
||
editableField,
|
||
hiddenInput,
|
||
urlInput,
|
||
fileName,
|
||
preview,
|
||
hint,
|
||
error,
|
||
setSource,
|
||
});
|
||
});
|
||
|
||
setSource(source);
|
||
control.append(fileControl, urlInput, sourceSwitch, preview);
|
||
container.append(labelRow, hiddenInput, control, path, hint, error);
|
||
grid.append(container);
|
||
}
|
||
|
||
function collectionItems(block, editableField) {
|
||
const value = getByPath(block, editableField.path);
|
||
if (Array.isArray(value)) return value;
|
||
|
||
const nextValue = [];
|
||
setByPath(block, editableField.path, nextValue);
|
||
return nextValue;
|
||
}
|
||
|
||
function collectionItemTitle(item, index) {
|
||
return item?.adminLabel || item?.title || item?.name || item?.label || item?.question || item?.windowTitle || `Элемент ${index + 1}`;
|
||
}
|
||
|
||
function collectionItemTemplate(editableField) {
|
||
if (editableField.itemTemplate) return clone(editableField.itemTemplate);
|
||
|
||
const item = {};
|
||
for (const itemField of editableField.itemFields ?? []) {
|
||
setByPath(item, itemField.path, itemField.defaultValue ?? "");
|
||
}
|
||
return item;
|
||
}
|
||
|
||
function uniqueCollectionItemId(items, baseId) {
|
||
const root = String(baseId || "item").trim() || "item";
|
||
const ids = new Set(items.map((item) => item?.id).filter(Boolean));
|
||
if (!ids.has(root)) return root;
|
||
|
||
let index = 2;
|
||
while (ids.has(`${root}-${index}`)) {
|
||
index += 1;
|
||
}
|
||
return `${root}-${index}`;
|
||
}
|
||
|
||
function prepareCollectionItemForInsert(items, item) {
|
||
const nextItem = clone(item);
|
||
|
||
if (Object.prototype.hasOwnProperty.call(nextItem, "id")) {
|
||
nextItem.id = uniqueCollectionItemId(items, nextItem.id);
|
||
}
|
||
|
||
return nextItem;
|
||
}
|
||
|
||
function collectionInstanceKey(block, editableField) {
|
||
return `${block?.id || "static-elements"}::${editableField.path}`;
|
||
}
|
||
|
||
function collectionItemKey(item, index) {
|
||
if (item && typeof item === "object") {
|
||
if (item.id) return `id:${item.id}`;
|
||
|
||
let runtimeKey = collectionItemRuntimeKeys.get(item);
|
||
if (!runtimeKey) {
|
||
collectionItemRuntimeKeyCounter += 1;
|
||
runtimeKey = `runtime:${collectionItemRuntimeKeyCounter}`;
|
||
collectionItemRuntimeKeys.set(item, runtimeKey);
|
||
}
|
||
|
||
return runtimeKey;
|
||
}
|
||
|
||
return `value:${index}:${String(item)}`;
|
||
}
|
||
|
||
function collectionOpenKeys(block, editableField, items) {
|
||
const key = collectionInstanceKey(block, editableField);
|
||
let openKeys = state.collectionOpenState.get(key);
|
||
|
||
if (!openKeys) {
|
||
openKeys = new Set();
|
||
if (items.length > 0 && items.length <= 8) {
|
||
openKeys.add(collectionItemKey(items[0], 0));
|
||
}
|
||
state.collectionOpenState.set(key, openKeys);
|
||
}
|
||
|
||
return openKeys;
|
||
}
|
||
|
||
function fieldInputValue(input) {
|
||
if (input.type === "checkbox") return input.checked;
|
||
|
||
if (input.dataset.valueType === "number" || input.type === "range" || input.type === "number") {
|
||
const value = Number.parseFloat(input.value);
|
||
return Number.isFinite(value) ? value : 0;
|
||
}
|
||
|
||
return input.value;
|
||
}
|
||
|
||
function syncFieldValue(block, path, input) {
|
||
setByPath(block, path, fieldInputValue(input));
|
||
el.json.value = JSON.stringify(block, null, 2);
|
||
markDirty();
|
||
}
|
||
|
||
function renderBooleanField({ block, editableField, grid }) {
|
||
const label = document.createElement("label");
|
||
const labelRow = document.createElement("span");
|
||
const labelText = document.createElement("span");
|
||
const kind = document.createElement("span");
|
||
const path = document.createElement("span");
|
||
const input = document.createElement("input");
|
||
|
||
label.className = "field-control boolean-field";
|
||
labelRow.className = "field-label-row";
|
||
labelText.className = "field-label-text";
|
||
labelText.textContent = editableField.label || editableField.path;
|
||
kind.className = "field-kind";
|
||
kind.textContent = editableField.kind || "boolean";
|
||
path.className = "field-path";
|
||
path.textContent = editableField.path;
|
||
labelRow.append(labelText, kind);
|
||
|
||
input.dataset.path = editableField.path;
|
||
input.type = "checkbox";
|
||
input.checked = Boolean(getByPath(block, editableField.path));
|
||
|
||
input.addEventListener("change", () => {
|
||
const active = activeBlock();
|
||
if (!active) return;
|
||
syncFieldValue(active, editableField.path, input);
|
||
});
|
||
|
||
label.append(labelRow, input, path);
|
||
grid.append(label);
|
||
}
|
||
|
||
function formatRangeValue(value, editableField) {
|
||
const step = Number.parseFloat(editableField.step ?? 1);
|
||
const precision = Number.isFinite(step) && step > 0 && step < 1 ? String(step).split(".")[1]?.length || 0 : 0;
|
||
return `${Number(value).toFixed(precision)}${editableField.suffix || ""}`;
|
||
}
|
||
|
||
function renderRangeField({ block, editableField, grid }) {
|
||
const label = document.createElement("label");
|
||
const labelRow = document.createElement("span");
|
||
const labelText = document.createElement("span");
|
||
const kind = document.createElement("span");
|
||
const path = document.createElement("span");
|
||
const control = document.createElement("span");
|
||
const input = document.createElement("input");
|
||
const output = document.createElement("span");
|
||
const min = Number.parseFloat(editableField.min ?? 0);
|
||
const max = Number.parseFloat(editableField.max ?? 1);
|
||
const step = Number.parseFloat(editableField.step ?? 0.01);
|
||
const rawValue = Number.parseFloat(getByPath(block, editableField.path));
|
||
const value = Number.isFinite(rawValue) ? rawValue : min;
|
||
|
||
label.className = "field-control range-field wide";
|
||
labelRow.className = "field-label-row";
|
||
labelText.className = "field-label-text";
|
||
labelText.textContent = editableField.label || editableField.path;
|
||
kind.className = "field-kind";
|
||
kind.textContent = editableField.kind || "range";
|
||
path.className = "field-path";
|
||
path.textContent = editableField.path;
|
||
control.className = "range-control";
|
||
output.className = "range-value";
|
||
labelRow.append(labelText, kind);
|
||
|
||
input.dataset.path = editableField.path;
|
||
input.dataset.valueType = "number";
|
||
input.type = "range";
|
||
input.min = Number.isFinite(min) ? String(min) : "0";
|
||
input.max = Number.isFinite(max) ? String(max) : "1";
|
||
input.step = Number.isFinite(step) ? String(step) : "0.01";
|
||
input.value = String(value);
|
||
output.textContent = formatRangeValue(value, editableField);
|
||
|
||
input.addEventListener("input", () => {
|
||
const active = activeBlock();
|
||
if (!active) return;
|
||
output.textContent = formatRangeValue(input.value, editableField);
|
||
syncFieldValue(active, editableField.path, input);
|
||
});
|
||
|
||
control.append(input, output);
|
||
label.append(labelRow, control, path);
|
||
grid.append(label);
|
||
}
|
||
|
||
function renderNumberField({ block, editableField, grid }) {
|
||
const label = document.createElement("label");
|
||
const labelRow = document.createElement("span");
|
||
const labelText = document.createElement("span");
|
||
const kind = document.createElement("span");
|
||
const path = document.createElement("span");
|
||
const control = document.createElement("span");
|
||
const input = document.createElement("input");
|
||
const suffix = document.createElement("span");
|
||
const rawValue = Number.parseFloat(getByPath(block, editableField.path));
|
||
const fallback = Number.parseFloat(editableField.defaultValue ?? editableField.min ?? 0);
|
||
const value = Number.isFinite(rawValue) ? rawValue : fallback;
|
||
|
||
label.className = "field-control number-field";
|
||
labelRow.className = "field-label-row";
|
||
labelText.className = "field-label-text";
|
||
labelText.textContent = editableField.label || editableField.path;
|
||
kind.className = "field-kind";
|
||
kind.textContent = editableField.kind || "number";
|
||
path.className = "field-path";
|
||
path.textContent = editableField.path;
|
||
control.className = "number-control";
|
||
suffix.className = "number-suffix";
|
||
suffix.textContent = editableField.suffix || "";
|
||
labelRow.append(labelText, kind);
|
||
|
||
input.dataset.path = editableField.path;
|
||
input.dataset.valueType = "number";
|
||
input.type = "number";
|
||
input.value = Number.isFinite(value) ? String(value) : "0";
|
||
input.autocomplete = "off";
|
||
|
||
if (editableField.min != null) input.min = String(editableField.min);
|
||
if (editableField.max != null) input.max = String(editableField.max);
|
||
if (editableField.step != null) input.step = String(editableField.step);
|
||
|
||
input.addEventListener("input", () => {
|
||
const active = activeBlock();
|
||
if (!active) return;
|
||
syncFieldValue(active, editableField.path, input);
|
||
});
|
||
|
||
control.append(input);
|
||
if (suffix.textContent) control.append(suffix);
|
||
label.append(labelRow, control, path);
|
||
grid.append(label);
|
||
}
|
||
|
||
function siblingFieldPath(path, siblingKey) {
|
||
const keys = path.split(".");
|
||
keys[keys.length - 1] = siblingKey;
|
||
return keys.join(".");
|
||
}
|
||
|
||
function renderLinkModeField({ block, field, grid }) {
|
||
const container = document.createElement("div");
|
||
const labelRow = document.createElement("div");
|
||
const labelText = document.createElement("span");
|
||
const kind = document.createElement("span");
|
||
const hiddenMode = document.createElement("input");
|
||
const rows = document.createElement("div");
|
||
const path = document.createElement("span");
|
||
const hrefPath = siblingFieldPath(field.path, field.hrefPath || "href");
|
||
const targetPath = siblingFieldPath(field.path, field.targetPath || "target");
|
||
const currentMode = getByPath(block, field.path) === "href" ? "href" : "target";
|
||
|
||
function createRow({ mode, title, inputPath, placeholder }) {
|
||
const row = document.createElement("label");
|
||
const check = document.createElement("input");
|
||
const caption = document.createElement("span");
|
||
const input = document.createElement("input");
|
||
|
||
row.className = "link-mode-row";
|
||
check.type = "checkbox";
|
||
check.checked = currentMode === mode;
|
||
check.setAttribute("aria-label", `${title}: использовать`);
|
||
caption.textContent = title;
|
||
input.dataset.path = inputPath;
|
||
input.type = "text";
|
||
input.autocomplete = "off";
|
||
input.placeholder = placeholder;
|
||
input.value = getByPath(block, inputPath) ?? "";
|
||
|
||
check.addEventListener("change", () => {
|
||
if (!check.checked) {
|
||
check.checked = true;
|
||
return;
|
||
}
|
||
|
||
const active = activeBlock();
|
||
if (!active) return;
|
||
hiddenMode.value = mode;
|
||
setByPath(active, field.path, mode);
|
||
rows.querySelectorAll('input[type="checkbox"]').forEach((candidate) => {
|
||
candidate.checked = candidate === check;
|
||
});
|
||
el.json.value = JSON.stringify(active, null, 2);
|
||
markDirty(mode === "href" ? "Активен внешний адрес." : "Активен Target.");
|
||
});
|
||
|
||
input.addEventListener("input", () => {
|
||
const active = activeBlock();
|
||
if (!active) return;
|
||
syncFieldValue(active, inputPath, input);
|
||
});
|
||
|
||
row.append(check, caption, input);
|
||
return row;
|
||
}
|
||
|
||
container.className = "field-control wide link-mode-field";
|
||
labelRow.className = "field-label-row";
|
||
labelText.className = "field-label-text";
|
||
labelText.textContent = field.label || "Источник ссылки";
|
||
kind.className = "field-kind";
|
||
kind.textContent = "link";
|
||
labelRow.append(labelText, kind);
|
||
|
||
hiddenMode.type = "hidden";
|
||
hiddenMode.dataset.path = field.path;
|
||
hiddenMode.value = currentMode;
|
||
rows.className = "link-mode-grid";
|
||
rows.append(
|
||
createRow({ mode: "href", title: "Адрес", inputPath: hrefPath, placeholder: "https://..." }),
|
||
createRow({ mode: "target", title: "Target", inputPath: targetPath, placeholder: "index.html#section" }),
|
||
);
|
||
|
||
path.className = "field-path";
|
||
path.textContent = `${field.path} · ${hrefPath} · ${targetPath}`;
|
||
container.append(labelRow, hiddenMode, rows, path);
|
||
grid.append(container);
|
||
}
|
||
|
||
function renderHeaderBooleanToggle({ block, editableField, head }) {
|
||
const label = document.createElement("label");
|
||
const input = document.createElement("input");
|
||
const text = document.createElement("span");
|
||
|
||
label.className = "group-head-toggle";
|
||
input.dataset.path = editableField.path;
|
||
input.type = "checkbox";
|
||
input.checked = Boolean(getByPath(block, editableField.path));
|
||
text.textContent = "Отображение";
|
||
|
||
input.addEventListener("change", () => {
|
||
const active = activeBlock();
|
||
if (!active) return;
|
||
syncFieldValue(active, editableField.path, input);
|
||
});
|
||
|
||
label.append(input, text);
|
||
head.append(label);
|
||
}
|
||
|
||
function renderCollectionScalarField({ block, field, grid }) {
|
||
if (field.kind === "link-mode") {
|
||
renderLinkModeField({ block, field, grid });
|
||
return;
|
||
}
|
||
|
||
if (field.kind === "boolean") {
|
||
renderBooleanField({ block, editableField: field, grid });
|
||
return;
|
||
}
|
||
|
||
if (field.kind === "range") {
|
||
renderRangeField({ block, editableField: field, grid });
|
||
return;
|
||
}
|
||
|
||
if (field.kind === "number") {
|
||
renderNumberField({ block, editableField: field, grid });
|
||
return;
|
||
}
|
||
|
||
const label = document.createElement("label");
|
||
const labelRow = document.createElement("span");
|
||
const labelText = document.createElement("span");
|
||
const kind = document.createElement("span");
|
||
const path = document.createElement("span");
|
||
const value = getByPath(block, field.path) ?? "";
|
||
const isLong = field.kind === "html" || field.kind === "textarea";
|
||
const input = isLong ? document.createElement("textarea") : document.createElement("input");
|
||
|
||
label.className = `field-control${isLong ? " wide" : ""}`;
|
||
labelRow.className = "field-label-row";
|
||
labelText.className = "field-label-text";
|
||
labelText.textContent = field.label || field.path;
|
||
kind.className = "field-kind";
|
||
kind.textContent = field.kind || "text";
|
||
path.className = "field-path";
|
||
path.textContent = field.path;
|
||
labelRow.append(labelText, kind);
|
||
|
||
input.dataset.path = field.path;
|
||
input.value = value;
|
||
|
||
if (!isLong) {
|
||
input.type = "text";
|
||
input.autocomplete = "off";
|
||
}
|
||
|
||
input.addEventListener("input", () => {
|
||
const active = activeBlock();
|
||
if (!active) return;
|
||
syncFieldValue(active, field.path, input);
|
||
});
|
||
|
||
label.append(labelRow, input, path);
|
||
grid.append(label);
|
||
}
|
||
|
||
function startCollectionPointerDrag(event, card, items, index, rerender) {
|
||
if (event.button !== 0) return;
|
||
event.preventDefault();
|
||
event.stopPropagation();
|
||
|
||
const list = card.closest(".collection-list");
|
||
if (!list) return;
|
||
|
||
const placeholder = createSortablePlaceholder(card);
|
||
const ghost = createSortableGhost(card, event);
|
||
|
||
card.classList.add("dragging", "sorting-source");
|
||
list.classList.add("sorting-active");
|
||
card.after(placeholder);
|
||
|
||
const onMove = (moveEvent) => {
|
||
moveSortableGhost(ghost, moveEvent);
|
||
movePlaceholderByPoint({
|
||
event: moveEvent,
|
||
list,
|
||
source: card,
|
||
placeholder,
|
||
selector: ".collection-item-card",
|
||
});
|
||
};
|
||
|
||
const onFinish = () => {
|
||
document.removeEventListener("pointermove", onMove);
|
||
document.removeEventListener("pointerup", onFinish);
|
||
document.removeEventListener("pointercancel", onCancel);
|
||
|
||
const nextIndex = sortablePlaceholderIndex({
|
||
list,
|
||
placeholder,
|
||
source: card,
|
||
selector: ".collection-item-card",
|
||
});
|
||
|
||
cleanupDragState();
|
||
|
||
if (nextIndex < 0 || nextIndex === index) return;
|
||
const [moved] = items.splice(index, 1);
|
||
items.splice(Math.min(nextIndex, items.length), 0, moved);
|
||
rerender("Порядок элементов коллекции изменён локально.");
|
||
};
|
||
|
||
const onCancel = () => {
|
||
document.removeEventListener("pointermove", onMove);
|
||
document.removeEventListener("pointerup", onFinish);
|
||
document.removeEventListener("pointercancel", onCancel);
|
||
cleanupDragState();
|
||
};
|
||
|
||
document.addEventListener("pointermove", onMove);
|
||
document.addEventListener("pointerup", onFinish);
|
||
document.addEventListener("pointercancel", onCancel);
|
||
}
|
||
|
||
function renderCollectionField({ block, editableField, grid }) {
|
||
const items = collectionItems(block, editableField);
|
||
const openKeys = collectionOpenKeys(block, editableField, items);
|
||
const container = document.createElement("section");
|
||
const head = document.createElement("div");
|
||
const title = document.createElement("div");
|
||
const addButton = document.createElement("button");
|
||
const list = document.createElement("div");
|
||
|
||
function rerender(message = null) {
|
||
el.json.value = JSON.stringify(block, null, 2);
|
||
renderContentFields(block);
|
||
markDirty(message);
|
||
}
|
||
|
||
container.className = "collection-field";
|
||
head.className = "collection-head";
|
||
title.className = "collection-title";
|
||
title.textContent = editableField.label || editableField.path;
|
||
addButton.className = "collection-add-btn";
|
||
addButton.type = "button";
|
||
addButton.title = `Добавить элемент в «${editableField.label || editableField.path}»`;
|
||
addButton.setAttribute("aria-label", addButton.title);
|
||
addButton.textContent = "+";
|
||
addButton.addEventListener("click", () => {
|
||
const nextItem = prepareCollectionItemForInsert(items, collectionItemTemplate(editableField));
|
||
items.push(nextItem);
|
||
openKeys.add(collectionItemKey(nextItem, items.length - 1));
|
||
rerender(`Добавлен элемент в «${editableField.label || editableField.path}».`);
|
||
});
|
||
head.append(title, addButton);
|
||
|
||
list.className = "collection-list";
|
||
|
||
items.forEach((item, index) => {
|
||
const itemKey = collectionItemKey(item, index);
|
||
const details = document.createElement("details");
|
||
const summary = document.createElement("summary");
|
||
const summaryTitle = document.createElement("span");
|
||
const controls = document.createElement("span");
|
||
const dragHandle = document.createElement("button");
|
||
const body = document.createElement("div");
|
||
const itemGrid = document.createElement("div");
|
||
const hasVisibilityToggle =
|
||
item &&
|
||
typeof item === "object" &&
|
||
(Object.prototype.hasOwnProperty.call(item, "enabled") ||
|
||
Object.prototype.hasOwnProperty.call(editableField.itemTemplate ?? {}, "enabled"));
|
||
|
||
details.className = "collection-item-card";
|
||
details.classList.toggle("is-hidden", item?.enabled === false);
|
||
details.open = openKeys.has(itemKey);
|
||
details.addEventListener("toggle", () => {
|
||
if (details.open) openKeys.add(itemKey);
|
||
else openKeys.delete(itemKey);
|
||
});
|
||
summary.className = "collection-summary";
|
||
summaryTitle.className = "collection-summary-title";
|
||
summaryTitle.textContent = collectionItemTitle(item, index);
|
||
controls.className = "collection-item-actions";
|
||
dragHandle.className = "collection-drag-handle";
|
||
dragHandle.type = "button";
|
||
dragHandle.title = "Перетащить элемент";
|
||
dragHandle.setAttribute("aria-label", "Перетащить элемент");
|
||
dragHandle.innerHTML =
|
||
'<svg viewBox="0 0 12 18" aria-hidden="true" focusable="false"><circle cx="4" cy="4" r="1.25"></circle><circle cx="8" cy="4" r="1.25"></circle><circle cx="4" cy="9" r="1.25"></circle><circle cx="8" cy="9" r="1.25"></circle><circle cx="4" cy="14" r="1.25"></circle><circle cx="8" cy="14" r="1.25"></circle></svg>';
|
||
dragHandle.addEventListener("click", (event) => {
|
||
event.preventDefault();
|
||
event.stopPropagation();
|
||
});
|
||
dragHandle.addEventListener("pointerdown", (event) => startCollectionPointerDrag(event, details, items, index, rerender));
|
||
|
||
if (hasVisibilityToggle) {
|
||
if (!Object.prototype.hasOwnProperty.call(item, "enabled")) item.enabled = true;
|
||
|
||
const visibilityToggle = document.createElement("span");
|
||
const visibilityInput = document.createElement("input");
|
||
const visibilityText = document.createElement("span");
|
||
|
||
visibilityToggle.className = "collection-visibility-toggle";
|
||
visibilityToggle.title = "Скрыть/показать";
|
||
visibilityToggle.setAttribute("aria-label", "Скрыть/показать");
|
||
visibilityInput.type = "checkbox";
|
||
visibilityInput.checked = item.enabled !== false;
|
||
visibilityText.textContent = "Показать";
|
||
visibilityToggle.addEventListener("click", (event) => event.stopPropagation());
|
||
visibilityInput.addEventListener("click", (event) => event.stopPropagation());
|
||
visibilityInput.addEventListener("change", () => {
|
||
item.enabled = visibilityInput.checked;
|
||
rerender(visibilityInput.checked ? "Элемент коллекции показан локально." : "Элемент коллекции скрыт локально.");
|
||
});
|
||
visibilityToggle.append(visibilityInput, visibilityText);
|
||
controls.append(visibilityToggle);
|
||
}
|
||
|
||
[
|
||
["↑", "Поднять", () => {
|
||
if (index === 0) return;
|
||
const [moved] = items.splice(index, 1);
|
||
items.splice(index - 1, 0, moved);
|
||
rerender("Порядок элементов коллекции изменён локально.");
|
||
}],
|
||
["↓", "Опустить", () => {
|
||
if (index >= items.length - 1) return;
|
||
const [moved] = items.splice(index, 1);
|
||
items.splice(index + 1, 0, moved);
|
||
rerender("Порядок элементов коллекции изменён локально.");
|
||
}],
|
||
["⧉", "Дублировать", () => {
|
||
const nextItem = prepareCollectionItemForInsert(items, item);
|
||
items.splice(index + 1, 0, nextItem);
|
||
if (details.open) openKeys.add(collectionItemKey(nextItem, index + 1));
|
||
rerender("Элемент коллекции продублирован локально.");
|
||
}],
|
||
["⌫", "Удалить", async () => {
|
||
const confirmed = await requestDeleteConfirmation();
|
||
if (!confirmed) return;
|
||
openKeys.delete(itemKey);
|
||
items.splice(index, 1);
|
||
rerender("Элемент коллекции удалён локально.");
|
||
}],
|
||
].forEach(([symbol, titleText, handler]) => {
|
||
const button = document.createElement("button");
|
||
button.className = "collection-icon-btn";
|
||
button.type = "button";
|
||
button.title = titleText;
|
||
button.setAttribute("aria-label", titleText);
|
||
button.textContent = symbol;
|
||
button.addEventListener("click", (event) => {
|
||
event.preventDefault();
|
||
event.stopPropagation();
|
||
Promise.resolve(handler()).catch((error) => setStatus(`Ошибка действия коллекции: ${error.message}`));
|
||
});
|
||
controls.append(button);
|
||
});
|
||
controls.append(dragHandle);
|
||
|
||
summary.append(summaryTitle, controls);
|
||
body.className = "collection-item-body";
|
||
itemGrid.className = "group-grid";
|
||
|
||
for (const itemField of editableField.itemFields ?? []) {
|
||
const nestedField = {
|
||
...itemField,
|
||
path: `${editableField.path}.${index}.${itemField.path}`,
|
||
label: itemField.label || itemField.path,
|
||
group: editableField.group,
|
||
};
|
||
|
||
if (nestedField.kind === "media") {
|
||
renderMediaField({ block, editableField: nestedField, grid: itemGrid });
|
||
} else {
|
||
renderCollectionScalarField({ block, field: nestedField, grid: itemGrid });
|
||
}
|
||
}
|
||
|
||
body.append(itemGrid);
|
||
details.append(summary, body);
|
||
list.append(details);
|
||
});
|
||
|
||
container.append(head, list);
|
||
grid.append(container);
|
||
}
|
||
|
||
function renderContentFields(block) {
|
||
el.contentFields.innerHTML = "";
|
||
|
||
if (!block.editableFields?.length) {
|
||
const note = document.createElement("div");
|
||
note.className = "empty-note";
|
||
note.textContent = "Для этого блока typed-поля ещё не выделены. Пока доступно редактирование через JSON.";
|
||
el.contentFields.append(note);
|
||
return;
|
||
}
|
||
|
||
for (const [groupName, fields] of groupEditableFields(block)) {
|
||
const group = document.createElement("section");
|
||
const head = document.createElement("div");
|
||
const titleWrap = document.createElement("div");
|
||
const title = document.createElement("h3");
|
||
const desc = document.createElement("p");
|
||
const grid = document.createElement("div");
|
||
|
||
group.className = "content-group";
|
||
head.className = "group-head";
|
||
title.textContent = groupName;
|
||
desc.className = "group-desc";
|
||
desc.textContent = GROUP_COPY[groupName] || GROUP_COPY["Контент"];
|
||
titleWrap.append(title, desc);
|
||
head.append(titleWrap);
|
||
grid.className = "group-grid";
|
||
|
||
const headerFields = fields.filter((field) => field.kind === "boolean" && field.headerToggle);
|
||
const bodyFields = fields.filter((field) => !headerFields.includes(field));
|
||
headerFields.forEach((editableField) => renderHeaderBooleanToggle({ block, editableField, head }));
|
||
|
||
for (const editableField of bodyFields) {
|
||
if (editableField.kind === "collection") {
|
||
renderCollectionField({ block, editableField, grid });
|
||
continue;
|
||
}
|
||
|
||
if (editableField.kind === "media") {
|
||
renderMediaField({ block, editableField, grid });
|
||
continue;
|
||
}
|
||
|
||
if (editableField.kind === "link-mode") {
|
||
renderLinkModeField({ block, field: editableField, grid });
|
||
continue;
|
||
}
|
||
|
||
if (editableField.kind === "boolean") {
|
||
renderBooleanField({ block, editableField, grid });
|
||
continue;
|
||
}
|
||
|
||
if (editableField.kind === "range") {
|
||
renderRangeField({ block, editableField, grid });
|
||
continue;
|
||
}
|
||
|
||
if (editableField.kind === "number") {
|
||
renderNumberField({ block, editableField, grid });
|
||
continue;
|
||
}
|
||
|
||
const label = document.createElement("label");
|
||
const labelRow = document.createElement("span");
|
||
const labelText = document.createElement("span");
|
||
const kind = document.createElement("span");
|
||
const path = document.createElement("span");
|
||
const value = getByPath(block, editableField.path) ?? "";
|
||
const isLong = editableField.kind === "html" || editableField.kind === "textarea";
|
||
const input = isLong ? document.createElement("textarea") : document.createElement("input");
|
||
|
||
label.className = `field-control${isLong ? " wide" : ""}`;
|
||
labelRow.className = "field-label-row";
|
||
labelText.className = "field-label-text";
|
||
labelText.textContent = editableField.label || editableField.path;
|
||
kind.className = "field-kind";
|
||
kind.textContent = editableField.kind || "text";
|
||
path.className = "field-path";
|
||
path.textContent = editableField.path;
|
||
labelRow.append(labelText, kind);
|
||
|
||
input.dataset.path = editableField.path;
|
||
input.value = value;
|
||
|
||
if (!isLong) {
|
||
input.type = "text";
|
||
input.autocomplete = "off";
|
||
}
|
||
|
||
input.addEventListener("input", () => {
|
||
const active = activeBlock();
|
||
if (!active) return;
|
||
syncFieldValue(active, editableField.path, input);
|
||
});
|
||
|
||
label.append(labelRow, input, path);
|
||
grid.append(label);
|
||
}
|
||
|
||
group.append(head, grid);
|
||
el.contentFields.append(group);
|
||
}
|
||
}
|
||
|
||
function syncContentFields() {
|
||
const block = activeBlock();
|
||
if (!block) return;
|
||
|
||
for (const input of el.contentFields.querySelectorAll("[data-path]")) {
|
||
setByPath(block, input.dataset.path, fieldInputValue(input));
|
||
}
|
||
}
|
||
|
||
function syncBlockFromJson() {
|
||
if (!state.selected) return false;
|
||
|
||
try {
|
||
const parsed = JSON.parse(el.json.value);
|
||
if (isStaticSelection()) {
|
||
state.page.staticElements = parsed;
|
||
} else {
|
||
const region = activeRegion();
|
||
if (!region) return false;
|
||
region.blocks[state.selected.blockIndex] = parsed;
|
||
}
|
||
renderAll();
|
||
markDirty("JSON блока применён локально. Нажмите «Сохранить модель», чтобы записать файл.");
|
||
return true;
|
||
} catch (error) {
|
||
setStatus(`Ошибка JSON: ${error.message}`);
|
||
return false;
|
||
}
|
||
}
|
||
|
||
async function loadPage() {
|
||
const [pageResponse, templatesResponse] = await Promise.all([
|
||
fetch("/api/page/home"),
|
||
fetch("/api/block-templates/home"),
|
||
]);
|
||
|
||
if (!pageResponse.ok) throw new Error(await pageResponse.text());
|
||
if (!templatesResponse.ok) throw new Error(await templatesResponse.text());
|
||
|
||
state.page = await pageResponse.json();
|
||
state.templates = await templatesResponse.json();
|
||
ensureStaticElements();
|
||
ensureSectionsRegion();
|
||
state.selected = { kind: "static" };
|
||
renderAll();
|
||
setDirty(false);
|
||
setStatus("Модель home.json загружена.");
|
||
}
|
||
|
||
async function persistPage() {
|
||
if (activeBlock()) syncBlockFromFields();
|
||
|
||
const response = await fetch("/api/page/home", {
|
||
method: "PUT",
|
||
headers: { "content-type": "application/json" },
|
||
body: JSON.stringify(state.page),
|
||
});
|
||
|
||
if (!response.ok) throw new Error(await response.text());
|
||
}
|
||
|
||
async function savePage() {
|
||
await persistPage();
|
||
setDirty(false);
|
||
setStatus("Модель сохранена в content/pages/home.json. Для публичной страницы нажмите «Обновить index.html».");
|
||
}
|
||
|
||
async function renderHome() {
|
||
await persistPage();
|
||
const response = await fetch("/api/render/home", { method: "POST" });
|
||
const payload = await response.json();
|
||
|
||
if (!response.ok || !payload.ok) {
|
||
throw new Error(payload.error || "Render failed");
|
||
}
|
||
|
||
setDirty(false);
|
||
setStatus(payload.stdout ? `Модель сохранена. ${payload.stdout}` : "Модель сохранена, index.html пересобран.");
|
||
}
|
||
|
||
function moveSelected(delta) {
|
||
if (isStaticSelection()) return;
|
||
const region = activeRegion();
|
||
const index = state.selected?.blockIndex;
|
||
if (!region || index == null) return;
|
||
|
||
const nextIndex = index + delta;
|
||
if (nextIndex < 0 || nextIndex >= region.blocks.length) return;
|
||
|
||
const [block] = region.blocks.splice(index, 1);
|
||
region.blocks.splice(nextIndex, 0, block);
|
||
state.selected.blockIndex = nextIndex;
|
||
renderAll();
|
||
markDirty("Порядок блоков изменён локально. Нажмите «Сохранить модель» или «Обновить index.html».");
|
||
}
|
||
|
||
function duplicateSelected() {
|
||
if (isStaticSelection()) return;
|
||
const region = activeRegion();
|
||
const block = activeBlock();
|
||
if (!region || !block) return;
|
||
|
||
const duplicate = clone(block);
|
||
duplicate.id = uniqueId(block.id);
|
||
duplicate.adminLabel = `${block.adminLabel || block.id} — копия`;
|
||
duplicate.scopeIds = true;
|
||
region.blocks.splice(state.selected.blockIndex + 1, 0, duplicate);
|
||
state.selected.blockIndex += 1;
|
||
renderAll();
|
||
markDirty(`Блок «${duplicate.adminLabel || duplicate.id}» продублирован локально.`);
|
||
}
|
||
|
||
function copySelected() {
|
||
if (isStaticSelection()) return;
|
||
const block = activeBlock();
|
||
if (!block) return;
|
||
|
||
state.clipboard = clone(block);
|
||
setStatus(`Скопирован блок: ${block.adminLabel || block.id}`);
|
||
}
|
||
|
||
function pasteAfterSelected() {
|
||
if (isStaticSelection()) return;
|
||
const region = activeRegion();
|
||
if (!region || !state.clipboard) return;
|
||
|
||
const pasted = clone(state.clipboard);
|
||
pasted.id = uniqueId(pasted.id);
|
||
pasted.adminLabel = `${pasted.adminLabel || pasted.id} — вставка`;
|
||
pasted.scopeIds = true;
|
||
region.blocks.splice(state.selected.blockIndex + 1, 0, pasted);
|
||
state.selected.blockIndex += 1;
|
||
renderAll();
|
||
markDirty(`Блок «${pasted.adminLabel || pasted.id}» вставлен локально.`);
|
||
}
|
||
|
||
async function deleteSelected() {
|
||
if (isStaticSelection()) return;
|
||
const region = activeRegion();
|
||
if (!region || state.selected.blockIndex == null) return;
|
||
|
||
const confirmed = await requestDeleteConfirmation();
|
||
if (!confirmed) return;
|
||
|
||
region.blocks.splice(state.selected.blockIndex, 1);
|
||
state.selected.blockIndex = Math.min(state.selected.blockIndex, region.blocks.length - 1);
|
||
if (state.selected.blockIndex < 0) state.selected = { kind: "static" };
|
||
renderAll();
|
||
markDirty("Блок удалён локально. Нажмите «Сохранить модель» или «Обновить index.html».");
|
||
}
|
||
|
||
for (const input of [el.id, el.label, el.anchor, el.enabled]) {
|
||
input.addEventListener("input", syncBlockFromFields);
|
||
input.addEventListener("change", syncBlockFromFields);
|
||
}
|
||
|
||
el.json.addEventListener("blur", () => {
|
||
if (state.filePickerActive || state.mediaUploadActive) {
|
||
recoverEditorSurface();
|
||
return;
|
||
}
|
||
|
||
syncBlockFromJson();
|
||
});
|
||
el.addBlock.addEventListener("click", openTemplateModal);
|
||
el.templateModalClose.addEventListener("click", closeTemplateModal);
|
||
el.templateModalCancel.addEventListener("click", closeTemplateModal);
|
||
el.templateModal.addEventListener("click", (event) => {
|
||
if (event.target === el.templateModal) closeTemplateModal();
|
||
});
|
||
el.deleteModalCancel.addEventListener("click", () => closeDeleteModal(false));
|
||
el.deleteModalConfirm.addEventListener("click", () => closeDeleteModal(true));
|
||
el.deleteModal.addEventListener("click", (event) => {
|
||
if (event.target === el.deleteModal) closeDeleteModal(false);
|
||
});
|
||
document.addEventListener("keydown", (event) => {
|
||
if (event.key !== "Escape") return;
|
||
|
||
if (!el.deleteModal.classList.contains("hidden")) {
|
||
closeDeleteModal(false);
|
||
return;
|
||
}
|
||
|
||
if (!el.templateModal.classList.contains("hidden")) {
|
||
closeTemplateModal();
|
||
}
|
||
});
|
||
el.reload.addEventListener("click", () => loadPage().catch((error) => setStatus(error.message)));
|
||
el.save.addEventListener("click", () => savePage().catch((error) => setStatus(error.message)));
|
||
el.render.addEventListener("click", () => renderHome().catch((error) => setStatus(error.message)));
|
||
el.moveUp.addEventListener("click", () => moveSelected(-1));
|
||
el.moveDown.addEventListener("click", () => moveSelected(1));
|
||
el.duplicate.addEventListener("click", duplicateSelected);
|
||
el.copy.addEventListener("click", copySelected);
|
||
el.pasteAfter.addEventListener("click", pasteAfterSelected);
|
||
el.deleteBlock.addEventListener("click", () => deleteSelected().catch((error) => setStatus(`Ошибка удаления: ${error.message}`)));
|
||
|
||
window.addEventListener("error", (event) => {
|
||
recoverEditorSurface();
|
||
setStatus(`Ошибка JS: ${event.message}`);
|
||
});
|
||
|
||
window.addEventListener("unhandledrejection", (event) => {
|
||
recoverEditorSurface();
|
||
const reason = event.reason instanceof Error ? event.reason.message : String(event.reason);
|
||
setStatus(`Ошибка JS: ${reason}`);
|
||
});
|
||
|
||
loadPage().catch((error) => setStatus(error.message));
|