dbxapp 4.1.3
CMS, Shop, Workflows und modulare Geschäftsanwendungen
Loading...
Searching...
No Matches
modulesAdmin.js
Go to the documentation of this file.
1/*!
2 * @file modulesAdmin.js
3 * Modul-Verwaltung: DD-Gallery, Modul-Bilder (CMS-Medienbrowser), openWin
4 */
5(function (window, document) {
6 "use strict";
7
8 if (!window.dbx || !window.dbx.feature) {
9 return;
10 }
11
12 const dbx = window.dbx;
13 const LIB = "modulesAdmin";
14 const PANEL_UI_ID = "modules-admin";
15
16 function qs(el, sel) {
17 return el ? el.querySelector(sel) : null;
18 }
19
20 function qsa(el, sel) {
21 return el ? Array.prototype.slice.call(el.querySelectorAll(sel)) : [];
22 }
23
24 function moduleMessageRoot(node) {
25 if (node && node.nodeType === 1 && node.hasAttribute("data-module-messages")) {
26 return node;
27 }
28 return node && node.closest
29 ? (node.closest(".dbx-modules-admin") || node.closest(".dbx-modimg-manager"))
30 : document.querySelector(".dbx-modules-admin, .dbx-modimg-manager");
31 }
32
33 function moduleMessages(node) {
34 const root = moduleMessageRoot(node);
35 if (!root) {
36 return {};
37 }
38 if (root.__dbxModuleMessages) {
39 return root.__dbxModuleMessages;
40 }
41 try {
42 root.__dbxModuleMessages = JSON.parse(root.getAttribute("data-module-messages") || "{}");
43 } catch (ignore) {
44 root.__dbxModuleMessages = {};
45 }
46 return root.__dbxModuleMessages;
47 }
48
49 function moduleMsg(node, key, fallback, replacements) {
50 let value = String(moduleMessages(node)[key] || fallback || "");
51 Object.keys(replacements || {}).forEach(function (name) {
52 value = value.split("{" + name + "}").join(String(replacements[name]));
53 });
54 return value;
55 }
56
57 function modimgMediaCfg(root) {
58 root = root || document.querySelector(".dbx-modules-admin") || document;
59 return {
60 media: root.getAttribute("data-modimg-media") || "",
61 upload: root.getAttribute("data-modimg-upload") || "",
62 mediafolders: root.getAttribute("data-modimg-mediafolders") || "",
63 mediafoldercreate: root.getAttribute("data-modimg-mediafoldercreate") || "",
64 mediafolderdelete: root.getAttribute("data-modimg-mediafolderdelete") || "",
65 deletemedia: root.getAttribute("data-modimg-deletemedia") || "",
66 uploadmax: root.getAttribute("data-modimg-uploadmax") || ""
67 };
68 }
69
70 function panelMediaCfg(panel) {
71 const cfg = modimgMediaCfg(panel.closest(".dbx-modules-admin") || panel.closest(".dbx-modimg-manager") || document);
72 if (panel.getAttribute("data-modimg-media")) {
73 cfg.media = panel.getAttribute("data-modimg-media");
74 }
75 if (panel.getAttribute("data-modimg-upload")) {
76 cfg.upload = panel.getAttribute("data-modimg-upload");
77 }
78 if (panel.getAttribute("data-modimg-mediafolders")) {
79 cfg.mediafolders = panel.getAttribute("data-modimg-mediafolders");
80 }
81 if (panel.getAttribute("data-modimg-mediafoldercreate")) {
82 cfg.mediafoldercreate = panel.getAttribute("data-modimg-mediafoldercreate");
83 }
84 if (panel.getAttribute("data-modimg-mediafolderdelete")) {
85 cfg.mediafolderdelete = panel.getAttribute("data-modimg-mediafolderdelete");
86 }
87 if (panel.getAttribute("data-modimg-deletemedia")) {
88 cfg.deletemedia = panel.getAttribute("data-modimg-deletemedia");
89 }
90 if (panel.getAttribute("data-modimg-uploadmax")) {
91 cfg.uploadmax = panel.getAttribute("data-modimg-uploadmax");
92 }
93 return cfg;
94 }
95
96 function ensureCmsMediaBrowser() {
97 if (dbx.cmsMediaBrowser && typeof dbx.cmsMediaBrowser.open === "function") {
98 return Promise.resolve(true);
99 }
100 return new Promise(function (resolve) {
101 if (!dbx.load) {
102 resolve(false);
103 return;
104 }
105 dbx.load([
106 ["js", "lib", "ajax.js"],
107 ["js", "lib", "openWin.js"],
108 ["js", "lib", "cms.js"]
109 ], function () {
110 resolve(!!(dbx.cmsMediaBrowser && typeof dbx.cmsMediaBrowser.open === "function"));
111 });
112 });
113 }
114
115 function getActiveDdItem(galleryId) {
116 const gallery = document.getElementById(galleryId);
117 if (!gallery) {
118 return null;
119 }
120 return gallery.querySelector(".dbx-module-dd-item.is-active") || gallery.querySelector(".dbx-module-dd-item");
121 }
122
123 function openDdItem(item) {
124 if (!item || !dbx.openWin) {
125 return;
126 }
127 const url = item.getAttribute("data-edit-url") || "";
128 const title = item.getAttribute("data-edit-title") || "DD";
129 if (!url) {
130 return;
131 }
132 dbx.openWin.open({
133 url: url,
134 title: title,
135 width: "960",
136 height: "92%",
137 position: "center-top",
138 minimizable: 1,
139 maximizable: 1
140 });
141 }
142
143 function bindModuleDdGallery(root) {
144 const scope = root || document;
145
146 scope.querySelectorAll(".dbx-module-dd-gallery").forEach(function (gallery) {
147 if (gallery.dataset.ddBound === "1") {
148 return;
149 }
150 gallery.dataset.ddBound = "1";
151
152 gallery.querySelectorAll(".dbx-module-dd-item").forEach(function (item) {
153 item.addEventListener("click", function () {
154 gallery.querySelectorAll(".dbx-module-dd-item").forEach(function (node) {
155 node.classList.remove("is-active");
156 node.setAttribute("aria-selected", "false");
157 });
158 item.classList.add("is-active");
159 item.setAttribute("aria-selected", "true");
160 const panel = gallery.closest(".dbx-module-dd-gallery-panel");
161 const btn = panel ? panel.querySelector(".dbx-module-dd-open-btn") : null;
162 if (btn) {
163 btn.setAttribute("data-dd-active", item.getAttribute("data-edit-url") || "");
164 }
165 });
166 item.addEventListener("dblclick", function () {
167 openDdItem(item);
168 });
169 });
170 });
171
172 scope.querySelectorAll(".dbx-module-dd-open-btn").forEach(function (btn) {
173 if (btn.dataset.ddBound === "1") {
174 return;
175 }
176 btn.dataset.ddBound = "1";
177 const galleryId = btn.getAttribute("data-dd-select") || "";
178 btn.addEventListener("click", function () {
179 const item = getActiveDdItem(galleryId);
180 openDdItem(item);
181 });
182 });
183 }
184
185 function fetchJson(url, options) {
186 options = options || {};
187 if (!dbx.ajax || typeof dbx.ajax.request !== "function") {
188 return Promise.reject(new Error("ajax.js nicht geladen."));
189 }
190
191 return dbx.ajax.request({
192 url: url,
193 method: options.method || "GET",
194 mode: "json",
195 body: (typeof options.body !== "undefined") ? options.body : null,
196 headers: options.headers || {},
197 timeout: Number(options.timeout || 20000)
198 });
199 }
200
201 function updatePanelPreview(panel, items) {
202 const previewCol = qs(panel, "[data-module-images-preview]");
203 if (!previewCol) {
204 return;
205 }
206 const modul = panel.getAttribute("data-modul") || "";
207 const placeholder = panel.getAttribute("data-placeholder-url") || "";
208 const placeholderAlt = panel.getAttribute("data-placeholder-alt") || modul;
209 let url = "";
210 let label = modul;
211 let isPlaceholder = true;
212 if (items && items.length) {
213 url = items[0].url || "";
214 label = items[0].label || items[0].file || modul;
215 isPlaceholder = false;
216 }
217 if (!url) {
218 url = placeholder;
219 }
220 if (url) {
221 previewCol.innerHTML = '<img src="' + escapeAttr(url) + '" alt="' + escapeAttr(isPlaceholder ? placeholderAlt : label) + '" class="dbx-module-images-preview-img' + (isPlaceholder ? " is-placeholder" : "") + '" loading="lazy">';
222 return;
223 }
224 previewCol.innerHTML = '<span class="dbx-module-images-placeholder-icon" aria-hidden="true"><i class="bi bi-box-seam"></i></span>';
225 }
226
227 function updateSymbolPreview(panel, symbol) {
228 const previewCol = qs(panel, "[data-module-symbol-preview]");
229 if (!previewCol) {
230 return;
231 }
232 const modul = panel.getAttribute("data-modul") || "";
233 const placeholder = panel.getAttribute("data-placeholder-url") || "";
234 const placeholderAlt = panel.getAttribute("data-placeholder-alt") || modul;
235 symbol = symbol || {};
236 const url = symbol.url || placeholder;
237 const alt = symbol.alt || (symbol.url ? modul : placeholderAlt);
238 if (url) {
239 previewCol.innerHTML = '<img src="' + escapeAttr(url) + '" alt="' + escapeAttr(alt) + '" class="dbx-module-symbol-img' + (symbol.url ? "" : " is-placeholder") + '" loading="lazy">';
240 return;
241 }
242 previewCol.innerHTML = '<span class="dbx-module-images-placeholder-icon" aria-hidden="true"><i class="bi bi-box-seam"></i></span>';
243 }
244
245 function renderModuleImagesEmptyListHtml(node) {
246 return '<div class="dbx-module-images-empty-list text-muted small">'
247 + escapeHtml(moduleMsg(node, "no_module_images", "No module images"))
248 + '</div>';
249 }
250
251 const MOD_FILENAME_SEP = "__";
252
253 function stemForRuns(modul, run1, run2) {
254 let name = String(modul || "").trim();
255 run1 = String(run1 || "").trim();
256 run2 = String(run2 || "").trim();
257 if (!name || !run1) {
258 return name;
259 }
260 name += MOD_FILENAME_SEP + run1;
261 if (run2) {
262 name += MOD_FILENAME_SEP + run2;
263 }
264 return name;
265 }
266
267 function buildModuleImageCall(modul, params) {
268 const call = "dbx_modul=" + encodeURIComponent(modul || "");
269 if (params) {
270 return call + "&" + params;
271 }
272 return call;
273 }
274
275 function buildModulPreviewUrl(modul, run1, run2, params, panel) {
276 run1 = String(run1 || "").trim();
277 run2 = String(run2 || "").trim();
278 params = String(params || "");
279 if ((!run1 || !run2) && params) {
280 const m1 = params.match(/(?:^|&)dbx_run1=([^&]+)/);
281 const m2 = params.match(/(?:^|&)dbx_run2=([^&]+)/);
282 if (!run1 && m1) {
283 run1 = decodeURIComponent(m1[1].replace(/\+/g, " "));
284 }
285 if (!run2 && m2) {
286 run2 = decodeURIComponent(m2[1].replace(/\+/g, " "));
287 }
288 }
289 if (!run1 && panel) {
290 run1 = String(panel.getAttribute("data-default-run1") || "").trim();
291 }
292 if (!run2 && panel) {
293 run2 = String(panel.getAttribute("data-default-run2") || "").trim();
294 }
295 let url = "?dbx_modul=" + encodeURIComponent(modul || "");
296 if (run1) {
297 url += "&dbx_run1=" + encodeURIComponent(run1);
298 }
299 if (run2) {
300 url += "&dbx_run2=" + encodeURIComponent(run2);
301 }
302 return { url: url, run1: run1, run2: run2 };
303 }
304
305 function setActiveGalleryItem(panel, item) {
306 const list = qs(panel, "[data-module-images-list]");
307 if (!list) {
308 return;
309 }
310 qsa(list, ".dbx-module-images-item").forEach(function (el) {
311 el.classList.toggle("is-active", item && el === item);
312 });
313 }
314
315 function escapeHtml(text) {
316 return String(text || "")
317 .replace(/&/g, "&amp;")
318 .replace(/</g, "&lt;")
319 .replace(/>/g, "&gt;")
320 .replace(/"/g, "&quot;");
321 }
322
323 function escapeAttr(text) {
324 return escapeHtml(text);
325 }
326
327 function renderModuleImagesList(container, items) {
328 if (!container) {
329 return;
330 }
331 if (!items || !items.length) {
332 container.innerHTML = renderModuleImagesEmptyListHtml(container);
333 return;
334 }
335 container.innerHTML = items.map(function (item, index) {
336 const file = item.file || "";
337 const url = item.url || "";
338 const label = item.label || file;
339 const params = item.default_params || "";
340 const panel = container.closest(".dbx-module-images-panel");
341 const modul = panel ? (panel.getAttribute("data-modul") || "") : "";
342 const preview = buildModulPreviewUrl(modul, item.run1 || "", item.run2 || "", params, panel);
343 const run1 = preview.run1;
344 const run2 = preview.run2;
345 const call = buildModuleImageCall(modul, params);
346 const previewTitle = moduleMsg(panel, "module_preview", "Preview: {module}", { module: modul || "" });
347 const active = index === 0 ? " is-active" : "";
348 const previewBtn = (run1 || params)
349 ? '<a class="btn btn-outline-secondary btn-sm dbx-win dbx-module-images-preview" href="' + escapeAttr(preview.url) + '" data-url="' + escapeAttr(preview.url) + '" data-title="' + escapeAttr(previewTitle) + '" data-width="88%" data-height="88%" title="' + escapeAttr(moduleMsg(panel, "open_module", "Open module")) + '"><i class="bi bi-box-arrow-up-right"></i></a>'
350 : "";
351 return '<div class="dbx-module-images-item' + active + '" data-file="' + escapeAttr(file) + '" data-params="' + escapeAttr(params) + '" data-url="' + escapeAttr(url) + '" data-run1="' + escapeAttr(run1) + '" data-run2="' + escapeAttr(run2) + '">'
352 + '<span class="dbx-module-images-thumb"><img src="' + escapeAttr(url) + '" alt="' + escapeAttr(label) + '" loading="lazy"></span>'
353 + '<span class="dbx-module-images-meta"><code class="dbx-module-images-call">' + escapeHtml(call) + '</code>'
354 + '<span class="dbx-module-images-file">' + escapeHtml(file) + '</span></span>'
355 + '<span class="dbx-module-images-actions">'
356 + previewBtn
357 + '<button type="button" class="btn btn-outline-danger btn-sm dbx-module-images-remove" title="' + escapeAttr(moduleMsg(panel, "remove_image", "Remove image")) + '"><i class="bi bi-trash"></i></button>'
358 + '</span></div>';
359 }).join("");
360 }
361
362 function getPanelRunTarget(panel) {
363 const run1El = qs(panel, ".dbx-module-images-run1");
364 const run2El = qs(panel, ".dbx-module-images-run2");
365 let run1 = run1El ? String(run1El.value || "").trim() : "";
366 let run2 = run2El ? String(run2El.value || "").trim() : "";
367 if (!run1) {
368 run1 = String(panel.getAttribute("data-active-run1") || panel.getAttribute("data-default-run1") || "").trim();
369 }
370 if (!run2) {
371 run2 = String(panel.getAttribute("data-active-run2") || panel.getAttribute("data-default-run2") || "").trim();
372 }
373 return { run1: run1, run2: run2 };
374 }
375
376 function setPanelRunTarget(panel, run1, run2) {
377 const run1El = qs(panel, ".dbx-module-images-run1");
378 const run2El = qs(panel, ".dbx-module-images-run2");
379 if (run1El) {
380 run1El.value = run1 || "";
381 }
382 if (run2El) {
383 run2El.value = run2 || "";
384 }
385 panel.setAttribute("data-active-run1", run1 || "");
386 panel.setAttribute("data-active-run2", run2 || "");
387 updateFilenamePreview(panel);
388 }
389
390 function updateFilenamePreview(panel) {
391 const preview = qs(panel, ".dbx-module-images-filename-preview");
392 if (!preview) {
393 return;
394 }
395 const modul = preview.getAttribute("data-modul") || panel.getAttribute("data-modul") || "";
396 const target = getPanelRunTarget(panel);
397 if (!modul || !target.run1) {
398 preview.textContent = modul ? modul + "__run1.*" : "modul__run1.*";
399 return;
400 }
401 preview.textContent = stemForRuns(modul, target.run1, target.run2) + ".*";
402 }
403
404 function applyRunTargetToPanel(panel, run1, run2) {
405 setPanelRunTarget(panel, run1, run2);
406 }
407
408 function selectGalleryItem(panel, item) {
409 if (!panel || !item) {
410 return;
411 }
412 setActiveGalleryItem(panel, item);
413 setPanelRunTarget(panel, item.getAttribute("data-run1") || "", item.getAttribute("data-run2") || "");
414 const url = item.getAttribute("data-url") || "";
415 const label = qs(item, ".dbx-module-images-file") ? qs(item, ".dbx-module-images-file").textContent : "";
416 if (url) {
417 updatePanelPreview(panel, [{ url: url, label: label }]);
418 }
419 }
420
421 function bindModuleImagesPanel(panel) {
422 if (!panel || panel.dataset.modimgTargetBound === "1") {
423 return;
424 }
425 panel.dataset.modimgTargetBound = "1";
426 panel.addEventListener("input", function (e) {
427 if (e.target.closest(".dbx-module-images-run1, .dbx-module-images-run2")) {
428 const run1 = String((qs(panel, ".dbx-module-images-run1") || {}).value || "").trim();
429 const run2 = String((qs(panel, ".dbx-module-images-run2") || {}).value || "").trim();
430 panel.setAttribute("data-active-run1", run1);
431 panel.setAttribute("data-active-run2", run2);
432 updateFilenamePreview(panel);
433 }
434 });
435 updateFilenamePreview(panel);
436 const list = qs(panel, "[data-module-images-list]");
437 if (list) {
438 const items = [];
439 qsa(list, ".dbx-module-images-item").forEach(function (item) {
440 items.push({
441 file: item.getAttribute("data-file") || "",
442 url: item.getAttribute("data-url") || "",
443 label: item.getAttribute("data-file") || "",
444 default_params: item.getAttribute("data-params") || "",
445 run1: item.getAttribute("data-run1") || "",
446 run2: item.getAttribute("data-run2") || ""
447 });
448 });
449 if (items.length) {
450 updatePanelPreview(panel, items);
451 const first = qs(list, ".dbx-module-images-item");
452 if (first) {
453 selectGalleryItem(panel, first);
454 }
455 }
456 }
457 }
458
459 function bindModuleImagesPanels(scope) {
460 qsa(scope || document, ".dbx-module-images-panel").forEach(bindModuleImagesPanel);
461 }
462
463 function moduleImagesPanelFromTarget(target) {
464 if (!target || !target.closest) {
465 return null;
466 }
467 const panel = target.closest(".dbx-module-images-panel");
468 if (panel) {
469 return panel;
470 }
471 const modul = target.getAttribute("data-modul") || "";
472 if (!modul) {
473 return null;
474 }
475 return document.querySelector('.dbx-module-images-panel[data-modul="' + modul.replace(/"/g, '\\"') + '"]');
476 }
477
478 function applyModuleImageItems(panel, items) {
479 const list = qs(panel, "[data-module-images-list]");
480 const galleryHead = qs(panel, ".dbx-module-images-gallery-head .dbx-module-images-count");
481 if (list && Array.isArray(items)) {
482 renderModuleImagesList(list, items);
483 }
484 if (galleryHead) {
485 galleryHead.textContent = String((items && items.length) || 0);
486 }
487 if (items && items.length) {
488 updatePanelPreview(panel, items);
489 const first = list ? qs(list, ".dbx-module-images-item") : null;
490 if (first) {
491 selectGalleryItem(panel, first);
492 }
493 } else {
494 updatePanelPreview(panel, []);
495 setActiveGalleryItem(panel, null);
496 }
497 }
498
499 function addModuleImage(panel, row) {
500 if (row && Array.isArray(row.items)) {
501 applyModuleImageItems(panel, row.items);
502 return Promise.resolve({ ok: 1, items: row.items });
503 }
504
505 const modul = panel.getAttribute("data-modul") || "";
506 const addUrl = panel.getAttribute("data-add-url") || "";
507 const list = qs(panel, "[data-module-images-list]");
508 const target = getPanelRunTarget(panel);
509 if (!modul || !addUrl) {
510 return Promise.resolve(null);
511 }
512 if (!target.run1) {
513 window.alert(moduleMsg(panel, "run1_required", "Please enter dbx_run1."));
514 return Promise.resolve(null);
515 }
516 const mediaId = parseInt(row && row.id ? row.id : 0, 10);
517 const filePath = row && (row.file_path || row.filePath) ? (row.file_path || row.filePath) : "";
518 const payload = mediaId > 0 ? { media_id: mediaId } : { file_path: filePath };
519 if (!payload.media_id && !payload.file_path) {
520 return Promise.resolve(null);
521 }
522 payload.xmodul = modul;
523 payload.run1 = target.run1;
524 payload.run2 = target.run2;
525 return fetchJson(addUrl, {
526 method: "POST",
527 headers: { "Content-Type": "application/json" },
528 body: JSON.stringify(payload)
529 }).then(function (data) {
530 if (data && data.ok && data.items) {
531 applyModuleImageItems(panel, data.items);
532 } else if (data && data.msg) {
533 window.alert(data.msg);
534 }
535 return data;
536 }).catch(function (err) {
537 window.alert(err && err.message ? err.message : moduleMsg(panel, "image_import_error", "The image could not be imported."));
538 throw err;
539 });
540 }
541
542 function addModuleSymbol(panel, row) {
543 const modul = panel.getAttribute("data-modul") || "";
544 const addUrl = panel.getAttribute("data-symbol-add-url") || "";
545 if (!modul || !addUrl) {
546 return Promise.resolve(null);
547 }
548 const mediaId = parseInt(row && row.id ? row.id : 0, 10);
549 const filePath = row && (row.file_path || row.filePath) ? (row.file_path || row.filePath) : "";
550 const payload = mediaId > 0 ? { media_id: mediaId } : { file_path: filePath };
551 if (!payload.media_id && !payload.file_path) {
552 return Promise.resolve(null);
553 }
554 payload.xmodul = modul;
555
556 return fetchJson(addUrl, {
557 method: "POST",
558 headers: { "Content-Type": "application/json" },
559 body: JSON.stringify(payload)
560 }).then(function (data) {
561 if (data && data.ok && data.symbol) {
562 updateSymbolPreview(panel, data.symbol);
563 } else if (data && data.msg) {
564 window.alert(data.msg);
565 }
566 return data;
567 }).catch(function (err) {
568 window.alert(err && err.message ? err.message : moduleMsg(panel, "symbol_import_error", "The symbol image could not be imported."));
569 throw err;
570 });
571 }
572
573 function openModuleSymbolBrowser(panel) {
574 if (!panel) {
575 return;
576 }
577 const root = panel.closest(".dbx-modules-admin") || document.body;
578 const cfg = Object.assign({}, panelMediaCfg(panel));
579 cfg.media = panel.getAttribute("data-symbol-media-url") || cfg.media;
580 cfg.upload = panel.getAttribute("data-symbol-upload-url") || cfg.upload;
581 cfg.mediafolders = panel.getAttribute("data-symbol-mediafolders-url") || cfg.mediafolders;
582 cfg.mediafoldercreate = panel.getAttribute("data-symbol-mediafoldercreate-url") || cfg.mediafoldercreate;
583 cfg.mediafolderdelete = panel.getAttribute("data-symbol-mediafolderdelete-url") || cfg.mediafolderdelete;
584 cfg.deletemedia = panel.getAttribute("data-symbol-deletemedia-url") || cfg.deletemedia;
585
586 ensureCmsMediaBrowser().then(function (ok) {
587 if (!ok || !dbx.cmsMediaBrowser) {
588 return;
589 }
590 dbx.cmsMediaBrowser.open(root, cfg, {
591 mode: "pick",
592 mediaFolder: "img",
593 afterAssign: function (row) {
594 return addModuleSymbol(panel, row);
595 }
596 });
597 });
598 }
599
600 function openModuleImagesBrowser(panel) {
601 if (!panel) {
602 return;
603 }
604 const target = getPanelRunTarget(panel);
605 if (!target.run1) {
606 window.alert(moduleMsg(panel, "run1_required", "Please enter dbx_run1 for the image file name."));
607 return;
608 }
609 const modul = panel.getAttribute("data-modul") || "";
610 const root = panel.closest(".dbx-modules-admin") || panel.closest(".dbx-modimg-manager") || document.body;
611 const cfg = Object.assign({}, panelMediaCfg(panel));
612 const moduleUploadUrl = panel.getAttribute("data-module-upload-url") || "";
613 if (moduleUploadUrl) {
614 cfg.upload = moduleUploadUrl;
615 }
616
617 ensureCmsMediaBrowser().then(function (ok) {
618 if (!ok || !dbx.cmsMediaBrowser) {
619 return;
620 }
621 dbx.cmsMediaBrowser.open(root, cfg, {
622 mode: "pick",
623 mediaFolder: "mod",
624 formDataExtra: {
625 xmodul: modul,
626 run1: target.run1,
627 run2: target.run2
628 },
629 afterAssign: function (row) {
630 return addModuleImage(panel, row);
631 }
632 });
633 });
634 }
635
636 function bindModuleImages(scope) {
637 scope = scope || document;
638
639 scope.addEventListener("click", function (e) {
640 const symbolBtn = e.target.closest(".dbx-module-symbol-pick");
641 if (symbolBtn) {
642 e.preventDefault();
643 const panel = moduleImagesPanelFromTarget(symbolBtn);
644 if (panel) {
645 openModuleSymbolBrowser(panel);
646 }
647 return;
648 }
649
650 const pickBtn = e.target.closest(".dbx-module-images-pick, .dbx-module-images-pick-btn");
651 if (pickBtn) {
652 e.preventDefault();
653 const panel = moduleImagesPanelFromTarget(pickBtn);
654 if (panel) {
655 openModuleImagesBrowser(panel);
656 }
657 return;
658 }
659
660 const emptyPick = e.target.closest(".dbx-module-images-empty");
661 if (emptyPick && emptyPick.classList.contains("dbx-module-images-pick")) {
662 e.preventDefault();
663 const panel = emptyPick.closest(".dbx-module-images-panel");
664 if (panel) {
665 openModuleImagesBrowser(panel);
666 }
667 return;
668 }
669
670 const removeBtn = e.target.closest(".dbx-module-images-remove");
671 if (removeBtn) {
672 e.preventDefault();
673 e.stopPropagation();
674 const item = removeBtn.closest(".dbx-module-images-item");
675 const panel = removeBtn.closest(".dbx-module-images-panel");
676 if (!item || !panel) {
677 return;
678 }
679 const modul = panel.getAttribute("data-modul") || "";
680 const removeUrl = panel.getAttribute("data-remove-url") || "";
681 const file = item.getAttribute("data-file") || "";
682 if (!modul || !removeUrl || !file) {
683 return;
684 }
685 const panelRoot = panel.closest(".dbx-modules-admin") || panel.closest(".dbx-modimg-manager") || document.body;
686 removeBtn.disabled = true;
687 ensureConfirm().then(function (ok) {
688 if (!ok) {
689 window.alert(moduleMsg(panel, "confirm_unavailable", "The confirmation dialog could not be loaded."));
690 return null;
691 }
692 return dbx.confirm.open({
693 id: "module-image-remove-" + modul + "-" + Date.now(),
694 root: panelRoot,
695 source: removeBtn,
696 title: moduleMsg(panel, "image_delete_title", "Delete module call image"),
697 question: moduleMsg(panel, "image_delete_question", "Really delete the module call image {file}?", { file: "<strong>" + escapeHtml(file) + "</strong>" }),
698 hint: moduleMsg(panel, "image_delete_hint", "The image will be removed from the module image directory."),
699 buttons: "yesno",
700 labelyes: "<i class=\"bi bi-trash\"></i> " + escapeHtml(moduleMsg(panel, "delete_button", "Delete")),
701 labelno: "<i class=\"bi bi-x-lg\"></i> " + escapeHtml(moduleMsg(panel, "cancel_button", "Cancel")),
702 closable: true,
703 backdropclose: false,
704 escclose: true
705 });
706 }).then(function (result) {
707 if (!result || result.action !== "yes") {
708 return null;
709 }
710 return fetchJson(removeUrl, {
711 method: "POST",
712 headers: { "Content-Type": "application/json" },
713 body: JSON.stringify({ xmodul: modul, file: file, delete_file: 1 })
714 });
715 }).then(function (data) {
716 if (data && data.ok && data.items) {
717 applyModuleImageItems(panel, data.items);
718 } else if (data && data.msg) {
719 window.alert(data.msg);
720 }
721 }).catch(function (err) {
722 if (err && err.message) {
723 window.alert(err.message);
724 }
725 }).finally(function () {
726 removeBtn.disabled = false;
727 });
728 return;
729 }
730
731 const galleryItem = e.target.closest(".dbx-module-images-item");
732 if (galleryItem && !e.target.closest(".dbx-module-images-remove, .dbx-module-images-preview")) {
733 const panel = galleryItem.closest(".dbx-module-images-panel");
734 if (panel) {
735 selectGalleryItem(panel, galleryItem);
736 }
737 }
738 });
739
740 scope.addEventListener("focusin", function (e) {
741 const panel = e.target.closest && e.target.closest(".dbx-module-images-panel");
742 if (panel && !panel.dataset.modimgTargetBound) {
743 bindModuleImagesPanel(panel);
744 }
745 });
746 }
747
748 function syncAccessGroupScroll(target) {
749 const wraps = [];
750 if (target && target.classList && target.classList.contains("dbx-module-access-groups-scroll")) {
751 wraps.push(target);
752 } else if (target && target.querySelectorAll) {
753 qsa(target, ".dbx-module-access-groups-scroll").forEach(function (wrap) {
754 wraps.push(wrap);
755 });
756 } else {
757 qsa(document, ".dbx-module-access-groups-scroll").forEach(function (wrap) {
758 wraps.push(wrap);
759 });
760 }
761
762 wraps.forEach(function (wrap) {
763 const select = qs(wrap, ".dbx-module-access-groups");
764 if (!select) {
765 return;
766 }
767 const h = wrap.clientHeight;
768 if (h < 1) {
769 return;
770 }
771 const style = window.getComputedStyle(select);
772 const rowH = parseFloat(style.lineHeight) || (parseFloat(style.fontSize) * 1.45) || 20;
773 const padding = (parseFloat(style.paddingTop) || 0) + (parseFloat(style.paddingBottom) || 0);
774 const visible = Math.max(2, Math.floor((h - padding) / rowH));
775 select.size = visible;
776 });
777 }
778
779 function bindAccessGroupScroll(scope) {
780 scope = scope || document;
781 qsa(scope, ".dbx-module-access-groups-scroll").forEach(function (wrap) {
782 if (wrap.__dbxAccessScrollBound === "1") {
783 return;
784 }
785 wrap.__dbxAccessScrollBound = "1";
786 const sync = function () {
787 syncAccessGroupScroll(wrap);
788 };
789 sync();
790 if (typeof ResizeObserver !== "undefined") {
791 const ro = new ResizeObserver(sync);
792 ro.observe(wrap);
793 wrap.__dbxAccessScrollRo = ro;
794 }
795 });
796 }
797
798 function bindModuleAccess(scope) {
799 scope = scope || document;
800 qsa(scope, ".dbx-module-access-save").forEach(function (btn) {
801 if (btn.dataset.accessBound === "1") {
802 return;
803 }
804 btn.dataset.accessBound = "1";
805 btn.addEventListener("click", function () {
806 const panel = btn.closest(".dbx-module-access-panel");
807 if (!panel) {
808 return;
809 }
810 const modul = panel.getAttribute("data-modul") || "";
811 const saveUrl = btn.getAttribute("data-save-url") || "";
812 const select = qs(panel, ".dbx-module-access-groups");
813 const status = qs(panel, ".dbx-module-access-status");
814 if (!modul || !saveUrl || !select) {
815 return;
816 }
817 const groups = Array.prototype.slice.call(select.selectedOptions).map(function (opt) {
818 return opt.value;
819 });
820 btn.disabled = true;
821 if (status) {
822 status.textContent = moduleMsg(panel, "saving", "Saving …");
823 status.className = "dbx-module-access-status small text-muted";
824 }
825 fetchJson(saveUrl, {
826 method: "POST",
827 headers: { "Content-Type": "application/json" },
828 body: JSON.stringify({ xmodul: modul, groups: groups })
829 }).then(function (data) {
830 if (status) {
831 if (data && data.ok) {
832 status.textContent = data.msg || moduleMsg(panel, "saved", "Saved");
833 status.className = "dbx-module-access-status small is-ok";
834 } else {
835 status.textContent = (data && data.msg) ? data.msg : moduleMsg(panel, "save_failed", "Saving failed");
836 status.className = "dbx-module-access-status small is-error";
837 }
838 } else if (data && data.msg && !data.ok) {
839 window.alert(data.msg);
840 }
841 }).catch(function (err) {
842 if (status) {
843 status.textContent = err && err.message ? err.message : moduleMsg(panel, "save_failed", "Saving failed");
844 status.className = "dbx-module-access-status small is-error";
845 }
846 }).finally(function () {
847 btn.disabled = false;
848 });
849 });
850 });
851 }
852
853 function syncModulePanelToggleIcon(panel) {
854 const icon = qs(panel, ".dbx-module-toggle-icon");
855 const btn = qs(panel, ".dbx-module-panel-toggle-btn");
856 const isOpen = panel.classList.contains("is-open");
857 if (icon) {
858 icon.classList.toggle("bi-chevron-down", isOpen);
859 icon.classList.toggle("bi-chevron-right", !isOpen);
860 }
861 if (btn) {
862 btn.setAttribute("aria-expanded", isOpen ? "true" : "false");
863 }
864 }
865
866 function setModulePanelOpen(panel, open) {
867 panel.classList.toggle("is-open", !!open);
868 syncModulePanelToggleIcon(panel);
869 if (open) {
870 window.requestAnimationFrame(function () {
871 syncAccessGroupScroll(panel);
872 });
873 }
874 }
875
876 function bindModulePanels(root) {
877 root = root || document;
878 const saved = dbx.uiGet ? dbx.uiGet(LIB, PANEL_UI_ID, "openPanels", {}) : {};
879 const openPanels = (saved && typeof saved === "object" && !Array.isArray(saved)) ? saved : {};
880
881 qsa(root, ".dbx-module-panel-wrap").forEach(function (panel, index) {
882 const key = panel.getAttribute("data-module-ui-state") || ("module-" + index);
883 panel.setAttribute("data-module-ui-state", key);
884
885 if (Object.prototype.hasOwnProperty.call(openPanels, key)) {
886 setModulePanelOpen(panel, !!openPanels[key]);
887 } else {
888 syncModulePanelToggleIcon(panel);
889 }
890
891 if (panel.__dbxModuleToggleReady) {
892 return;
893 }
894 panel.__dbxModuleToggleReady = true;
895
896 function togglePanel() {
897 const nextOpen = !panel.classList.contains("is-open");
898 setModulePanelOpen(panel, nextOpen);
899 const state = dbx.uiGet ? dbx.uiGet(LIB, PANEL_UI_ID, "openPanels", {}) : {};
900 const next = (state && typeof state === "object" && !Array.isArray(state)) ? Object.assign({}, state) : {};
901 next[key] = nextOpen;
902 if (dbx.uiSet) {
903 dbx.uiSet(LIB, PANEL_UI_ID, "openPanels", next);
904 }
905 }
906
907 const toggleBtn = qs(panel, ".dbx-module-panel-toggle-btn");
908 if (toggleBtn) {
909 toggleBtn.addEventListener("click", function (e) {
910 e.preventDefault();
911 e.stopPropagation();
912 togglePanel();
913 });
914 }
915
916 const summaryMain = qs(panel, ".dbx-module-summary-main");
917 if (summaryMain) {
918 summaryMain.addEventListener("click", function (e) {
919 if (e.target.closest("input, label, .dbx-module-row-select")) {
920 return;
921 }
922 e.preventDefault();
923 togglePanel();
924 });
925 }
926 });
927 }
928
929 if (!document.__dbxModulePanelsBound) {
930 document.__dbxModulePanelsBound = true;
931 bindModulePanels(document);
932 }
933
934 function ensureConfirm() {
935 if (dbx.confirm && typeof dbx.confirm.open === "function") {
936 return Promise.resolve(true);
937 }
938 return new Promise(function (resolve) {
939 if (!dbx.loadFeature) {
940 resolve(false);
941 return;
942 }
943 dbx.loadFeature("confirm", function () {
944 resolve(!!(dbx.confirm && typeof dbx.confirm.open === "function"));
945 });
946 });
947 }
948
949 function updateActiveToggleButton(btn, active, responseLabel) {
950 const isActive = String(active) === "1";
951 btn.setAttribute("data-active", isActive ? "1" : "0");
952 btn.classList.toggle("btn-success", isActive);
953 btn.classList.toggle("btn-outline-secondary", !isActive);
954 btn.innerHTML = '<i class="bi ' + (isActive ? "bi-toggle-on" : "bi-toggle-off") + '"></i> '
955 + escapeHtml(responseLabel || moduleMsg(btn, isActive ? "active" : "inactive", isActive ? "Active" : "Inactive"));
956 }
957
958 function bindModuleBarActions(root) {
959 root = root || document;
960
961 qsa(root, ".dbx-module-active-toggle").forEach(function (btn) {
962 if (btn.dataset.modActiveBound === "1") {
963 return;
964 }
965 btn.dataset.modActiveBound = "1";
966 btn.addEventListener("click", function (e) {
967 e.preventDefault();
968 e.stopPropagation();
969 const url = btn.getAttribute("data-toggle-url") || "";
970 const modul = btn.getAttribute("data-modul") || "";
971 if (!url || !modul) {
972 return;
973 }
974 btn.disabled = true;
975 fetchJson(url, {
976 method: "POST",
977 headers: { "Content-Type": "application/json" },
978 body: JSON.stringify({ xmodul: modul })
979 }).then(function (data) {
980 if (data && data.ok) {
981 updateActiveToggleButton(btn, data.active, data.active_label);
982 const panel = btn.closest(".dbx-module-panel-wrap");
983 const row = btn.closest(".dbx-module-row");
984 if (panel) {
985 qsa(panel, "[data-module-status-badge]").forEach(function (badge) {
986 const isActive = String(data.active) === "1";
987 badge.textContent = data.active_label || moduleMsg(badge, isActive ? "active" : "inactive", isActive ? "Active" : "Inactive");
988 badge.classList.toggle("text-bg-success", isActive);
989 badge.classList.toggle("text-bg-secondary", !isActive);
990 });
991 }
992 if (row) {
993 row.classList.toggle("dbx-module-row-inactive", String(data.active) !== "1");
994 }
995 } else if (data && data.msg) {
996 window.alert(data.msg);
997 }
998 }).catch(function (err) {
999 window.alert(err && err.message ? err.message : moduleMsg(btn, "status_save_error", "Status could not be saved."));
1000 }).finally(function () {
1001 btn.disabled = false;
1002 });
1003 });
1004 });
1005
1006 qsa(root, ".dbx-module-delete-btn").forEach(function (btn) {
1007 if (btn.dataset.modDeleteBound === "1") {
1008 return;
1009 }
1010 btn.dataset.modDeleteBound = "1";
1011 btn.addEventListener("click", function (e) {
1012 e.preventDefault();
1013 e.stopPropagation();
1014 const url = btn.getAttribute("data-delete-url") || "";
1015 const modul = btn.getAttribute("data-modul") || "";
1016 const title = btn.getAttribute("data-title") || modul;
1017 const panelRoot = btn.closest(".dbx-modules-admin") || document.body;
1018 if (!url || !modul) {
1019 return;
1020 }
1021
1022 ensureConfirm().then(function (ok) {
1023 if (!ok) {
1024 dbx.warn("[modulesAdmin] " + moduleMsg(btn, "confirm_unavailable", "The confirmation dialog could not be loaded."));
1025 return null;
1026 }
1027 return dbx.confirm.open({
1028 id: "module-delete-" + modul + "-" + Date.now(),
1029 root: panelRoot,
1030 source: btn,
1031 title: moduleMsg(btn, "module_delete_title", "Delete module"),
1032 question: moduleMsg(btn, "module_delete_question", "Delete module {module} completely?", { module: "<strong>" + escapeHtml(title) + "</strong>" }),
1033 hint: moduleMsg(btn, "module_delete_hint", "The module directory and all its files will be removed permanently."),
1034 buttons: "yesno",
1035 labelyes: "<i class=\"bi bi-trash\"></i> " + escapeHtml(moduleMsg(btn, "delete_button", "Delete")),
1036 labelno: "<i class=\"bi bi-x-lg\"></i> " + escapeHtml(moduleMsg(btn, "cancel_button", "Cancel")),
1037 closable: true,
1038 backdropclose: false,
1039 escclose: true
1040 });
1041 }).then(function (result) {
1042 if (!result || result.action !== "yes") {
1043 return null;
1044 }
1045 return fetchJson(url, {
1046 method: "POST",
1047 headers: { "Content-Type": "application/json" },
1048 body: JSON.stringify({ xmodul: modul })
1049 });
1050 }).then(function (data) {
1051 if (!data) {
1052 return;
1053 }
1054 if (data.ok) {
1055 const row = btn.closest(".dbx-module-row");
1056 if (row) {
1057 row.remove();
1058 }
1059 } else if (data.msg) {
1060 window.alert(data.msg);
1061 }
1062 }).catch(function (err) {
1063 if (err && err.message) {
1064 window.alert(err.message);
1065 }
1066 });
1067 });
1068 });
1069 }
1070
1071 function bindModimgManager(root) {
1072 const manager = qs(root, ".dbx-modimg-manager");
1073 if (!manager || manager.dataset.modimgBound === "1") {
1074 return;
1075 }
1076 manager.dataset.modimgBound = "1";
1077 manager.classList.add("dbx-module-images-panel");
1078 if (!manager.getAttribute("data-module-images-list")) {
1079 const gallery = qs(manager, "[data-module-images-list]");
1080 if (gallery) {
1081 manager.setAttribute("data-module-images-list", "1");
1082 }
1083 }
1084 }
1085
1086 function initModulesAdmin(root) {
1087 bindModuleDdGallery(root || document);
1088 bindModimgManager(root || document);
1089 bindModuleImagesPanels(root || document);
1090 bindModuleAccess(root || document);
1091 bindAccessGroupScroll(root || document);
1092 bindModulePanels(root || document);
1093 bindModuleBarActions(root || document);
1094 syncAccessGroupScroll(root || document);
1095 }
1096
1097 if (!document.__dbxModuleImagesBound) {
1098 document.__dbxModuleImagesBound = true;
1099 bindModuleImages(document);
1100 }
1101
1102 dbx.modulesAdmin = {
1103 init: initModulesAdmin,
1104 openImagesBrowser: openModuleImagesBrowser,
1105 rescan: function (ctx) {
1106 const root = ctx && ctx.root ? ctx.root : (ctx || document);
1107 initModulesAdmin(root);
1108 }
1109 };
1110
1111 dbx.feature.register("modulesAdmin", {
1112 scope: "element",
1113 js: [
1114 ["js", "lib", "openWin.js"],
1115 ["js", "lib", "confirm.js"]
1116 ],
1117 css: [
1118 ["css", "root", "modules/dbxAdmin/tpl/css/modules-admin.css"],
1119 ["css", "design", "c-cms.css"]
1120 ],
1121 init: function (el) {
1122 dbx.modulesAdmin.init(el);
1123 },
1124 rescan: function (ctx) {
1125 dbx.modulesAdmin.rescan(ctx);
1126 }
1127 });
1128})(window, document);