// ---- panel pro práci s kartami ---------------------------------------------- // // Texty se přepisují přímo ve stránce — je u toho vidět výsledek v pravé // typografii. Co vidět není, řeší tenhle panel: pořadí karet, přidání a // smazání, barvy a odstíny. Dvojí ovládání je to schválně; formulář se // čtyřiceti políčky by byl přehlednější jen na papíře. var cmsPanelOpen = false; var cmsPanelFocus = null; // id karty, na kterou se panel zrovna dívá // Panel měl všechno rozbalené najednou — přes dvacet karet ve třech seznamech, // ve kterých se nedalo nic najít. Teď je zavřený a otevírá se to, na čem se // zrovna pracuje. Stav si pamatuje jen do zavření stránky; příště se začíná // znovu od přehledu, což je při úpravách ta správná výchozí poloha. var cmsOpen = {}; function cmsToggleSection(key) { cmsOpen[key] = !cmsOpen[key]; cmsRenderPanel(); } function cmsAcc(key, title, count, note, bodyFn) { var open = !!cmsOpen[key]; return '

' + '" + // Obsah se staví, až když je sekce otevřená — jinak by se při každém // překreslení zbytečně skládalo všechno. (open ? '

' + bodyFn() + "

" : "") + "

"; } function cmsSlug(s) { return String(s || "").normalize("NFD").replace(/[̀-ͯ]/g, "") .replace(/[^A-Za-z0-9]+/g, "-").replace(/^-+|-+$/g, "").toLowerCase() || "polozka"; } function cmsUniqueId(base) { var all = (STATE.logos || []).concat(STATE.logoTiles || [], STATE.materialsLabels || [], STATE.materialsBadges || []); var taken = {}; all.forEach(function (i) { taken[i.id] = 1; }); if (!taken[base]) return base; var n = 2; while (taken[base + "-" + n]) n++; return base + "-" + n; } // Nová karta musí mít stejný tvar slotů jako ty stávající, jinak by jí // chyběla tlačítka ke stažení. Vzorem je proto sousední karta. function cmsEmptyFormatsLike(sample) { var out = {}; var src = (sample && sample.formats) || null; if (src) { for (var g in src) { out[g] = {}; for (var f in src[g]) out[g][f] = { data: null, filename: null, link: null }; } return out; } // Úplně nová podsekce nemá od koho tvar opsat — vezme se ten, který karty // materiálu nabízejí. Bez toho by karta neměla žádná tlačítka ke stažení. var slots = (typeof FORMAT_SLOTS3 !== "undefined" && FORMAT_SLOTS3) || []; for (var i = 0; i < slots.length; i++) { var s2 = slots[i]; if (!out[s2.group]) out[s2.group] = {}; out[s2.group][s2.fmt] = { data: null, filename: null, link: null }; } return out; } // Položky v poli bez id (dlaždice, barvy v mřížce) je potřeba umět adresovat — // panel si je pojmenuje sám a id se pak uloží spolu s obsahem. function cmsEnsureIds(arr, prefix) { if (!arr) return arr; for (var i = 0; i < arr.length; i++) if (arr[i] && !arr[i].id) arr[i].id = prefix + "-" + i + "-" + Math.random().toString(36).slice(2, 7); return arr; } // Políčka umí sáhnout i o patro níž (ink.word) — barvy kresby jsou zanořené. function cmsFieldGet(obj, key) { var parts = String(key).split("."), node = obj; for (var i = 0; i < parts.length; i++) { if (node == null) return undefined; node = node[parts[i]]; } return node; } function cmsFieldSet(obj, key, val) { var parts = String(key).split("."), node = obj; for (var i = 0; i < parts.length - 1; i++) { if (node[parts[i]] == null || typeof node[parts[i]] !== "object") node[parts[i]] = {}; node = node[parts[i]]; } node[parts[parts.length - 1]] = val; } // Každý layout má vlastní tvar karet. má chuť pracuje se skupinou a variantou, // patron s nadpisem, podtitulkem a barvami kresby — společný formulář by // v jednom z nich nabízel políčka, která tam nikam nepatří. var CMS_LISTS_BY_LAYOUT = { machut: { logos: { label: "Varianty loga", arr: function () { return STATE.logos; }, title: function (it) { return it.group + " — " + it.variant; }, make: function (sample) { return { id: cmsUniqueId("logo-" + Date.now().toString(36)), group: (sample && sample.group) || "Logo", variant: "Nová varianta", desc: null, shape: (sample && sample.shape) || Object.keys(STATE.shapes || { tan: 1 })[0], aspect: (sample && sample.aspect) || "square", mark: sample && sample.mark ? { blob: sample.mark.blob, text: sample.mark.text } : { blob: "#000000", text: "#ffffff" }, formats: cmsEmptyFormatsLike(sample) }; }, fields: [ { key: "group", label: "Skupina", type: "text" }, { key: "variant", label: "Varianta", type: "text" }, { key: "desc", label: "Popis (nepovinný)", type: "textarea" }, { key: "shape", label: "Podklad karty", type: "select", options: function () { return Object.keys(STATE.shapes || {}); } }, { key: "aspect", label: "Tvar", type: "select", options: function () { return ["square", "wide"]; } } ] } }, patron: { logos: { label: "Pásy logotypu", nameKey: "sub", arr: function () { return STATE.logos; }, title: function (it) { return (it.title || it.id) + (it.sub ? " — " + it.sub : ""); }, make: function (sample) { var s = sample || {}, ink = s.ink || {}; return { id: cmsUniqueId("logo-" + Date.now().toString(36)), bg: s.bg || "#FFFFFF", title: s.title || "Varianta logotypu", sub: "nové provedení", titleColor: s.titleColor || "#6323F8", subColor: s.subColor || "#280F64", metaColor: s.metaColor || "#000000", art: s.art || "tagline", ink: { word: ink.word || "#280F64", bracket: ink.bracket || "#FAB400", tag: ink.tag || "#6023F8" }, formats: cmsEmptyFormatsLike(sample) }; }, fields: [ { key: "title", label: "Nadpis", type: "text" }, { key: "sub", label: "Podtitulek", type: "text" }, { key: "art", label: "Kresba", type: "select", options: function () { return ["tagline", "plain"]; } }, { key: "bg", label: "Pozadí pásu", type: "color" }, { key: "ink.word", label: "Barva nápisu", type: "color" }, { key: "ink.bracket", label: "Barva závorek", type: "color" }, { key: "ink.tag", label: "Barva tagline", type: "color" }, { key: "titleColor", label: "Barva nadpisu", type: "color" }, { key: "subColor", label: "Barva podtitulku", type: "color" }, { key: "metaColor", label: "Barva popisků", type: "color" } ] }, logoTiles: { label: "Logotyp na barevném pozadí", nameKey: "note", noFormats: true, arr: function () { return cmsEnsureIds(STATE.logoTiles, "dlazdice"); }, title: function (it) { return it.note || it.bg; }, make: function (sample) { var s = sample || {}, ink = s.ink || {}; return { id: cmsUniqueId("dlazdice"), bg: s.bg || "#FFFFFF", ink: { word: ink.word || "#280F64", bracket: ink.bracket || "#FAB400" } }; }, fields: [ { key: "bg", label: "Pozadí dlaždice", type: "color" }, { key: "ink.word", label: "Barva nápisu", type: "color" }, { key: "ink.bracket", label: "Barva závorek", type: "color" } ] }, colorGrid: { label: "Barevnost", nameKey: "name", noFormats: true, arr: function () { return cmsEnsureIds(STATE.colorGrid, "barva"); }, title: function (it) { return it.name || it.hex; }, make: function (sample) { var s = sample || {}; return { id: cmsUniqueId("barva"), name: "Nová barva", hex: s.hex || "#280F64", rgb: "0 | 0 | 0", pantone: "", cmyk: "0 | 0 | 0 | 0", ink: s.ink || "#FFFFFF" }; }, fields: [ { key: "name", label: "Název", type: "text" }, { key: "hex", label: "HEX", type: "color" }, { key: "rgb", label: "RGB", type: "text" }, { key: "pantone", label: "Pantone", type: "text" }, { key: "cmyk", label: "CMYK", type: "text" }, { key: "ink", label: "Barva textu na dlaždici", type: "color" } ] } } }; var CMS_LISTS = CMS_LISTS_BY_LAYOUT.machut; function cmsListsSync() { var kind = (STATE.layout && STATE.layout.kind) || "machut"; CMS_LISTS = CMS_LISTS_BY_LAYOUT[kind] || CMS_LISTS_BY_LAYOUT.machut; } // Bloky, které existují jen jednou — texty se v nich píšou přímo ve stránce, // tady zůstávají barvy a odkaz, na které se ve stránce kliknout nedá. var CMS_OBJECTS_BY_LAYOUT = { machut: [], patron: [ { key: "clearspace", label: "Ochranná zóna", obj: function () { return STATE.clearspace; }, fields: [ { key: "bg", label: "Pozadí sekce", type: "color" }, { key: "captionColor", label: "Barva popisku", type: "color" }, { key: "lineColor", label: "Barva kót", type: "color" }, { key: "guideInk", label: "Barva vodicích ploch", type: "color" } ] }, { key: "cta", label: "Odkaz na generátor", obj: function () { return STATE.cta; }, fields: [ { key: "href", label: "Odkaz", type: "text" }, { key: "bg", label: "Pozadí pásu", type: "color" }, { key: "headingColor", label: "Barva nadpisu", type: "color" }, { key: "bodyColor", label: "Barva textu", type: "color" }, { key: "buttonBg", label: "Pozadí tlačítka", type: "color" }, { key: "buttonTextColor", label: "Barva textu tlačítka", type: "color" } ] } ] }; // Prázdné pole ještě neznamená, že blok do layoutu patří — build zakládá // všechny klíče, takže patron má `colorRows: []` i `materialGroups: []`. // O tom, co se v panelu nabízí, rozhoduje layout, ne délka pole. var CMS_BLOCKS_BY_LAYOUT = { machut: { materials: true, colorRows: true }, patron: {} }; function cmsHasBlock(name) { var kind = (STATE.layout && STATE.layout.kind) || "machut"; return !!(CMS_BLOCKS_BY_LAYOUT[kind] || CMS_BLOCKS_BY_LAYOUT.machut)[name]; } function cmsObjects() { var kind = (STATE.layout && STATE.layout.kind) || "machut"; return CMS_OBJECTS_BY_LAYOUT[kind] || []; } function cmsObjHtml(key) { var def = null, all = cmsObjects(); for (var i = 0; i < all.length; i++) if (all[i].key === key) def = all[i]; var obj = def && def.obj(); if (!obj) return ""; return '

' + def.fields.map(function (f) { var id = "cmso-" + key + "-" + f.key; var val = cmsFieldGet(obj, f.key); val = val == null ? "" : String(val); var attr = 'id="' + id + '" data-obj="' + key + '" data-key="' + f.key + '"'; var input = f.type === "color" ? cmsColorInputs(attr, 'data-obj="' + key + '" data-key="' + f.key + '"', val) : ''; return '' + escapeHtml(f.label) + "" + input + ""; }).join("") + "

"; } function cmsObjInput(ev) { var t = ev.target; if (!t || !t.dataset || !t.dataset.obj) return false; var all = cmsObjects(), def = null; for (var i = 0; i < all.length; i++) if (all[i].key === t.dataset.obj) def = all[i]; var obj = def && def.obj(); if (!obj) return true; cmsFieldSet(obj, t.dataset.key, t.value); markUnsaved(); if (t.type === "color" || t.classList.contains("cms-hex")) { var sibs = t.parentNode.querySelectorAll("input"); for (var j = 0; j < sibs.length; j++) if (sibs[j] !== t) sibs[j].value = t.value; } rerenderAll(); return true; } // ---- paleta značky ----------------------------------------------------------- // // Barvy se v manuálu pořád dokola opakují: pozadí pásu, barva nadpisu, barva // kresby — vždycky některá z barev, které si manuál sám o pár sekcí výš // definuje. Vybírat je v systémovém dialogu znamená trefovat hex ručně a // splést se o odstín. Paleta je proto vypsaná rovnou u políčka a bere se // ze stavu, takže když redaktor barvu značky změní, změní se i nabídka. function cmsPaletteAdd(out, seen, hex, name) { if (!hex || typeof hex !== "string") return; var h = hex.trim().toUpperCase(); if (/^#[0-9A-F]{3}$/.test(h)) h = "#" + h[1] + h[1] + h[2] + h[2] + h[3] + h[3]; if (!/^#[0-9A-F]{6}$/.test(h) || seen[h]) return; seen[h] = 1; out.push({ hex: h, name: name || h }); } function cmsPalette() { var out = [], seen = {}; // Nejdřív barvy samotné značky, v pořadí, v jakém je manuál vypisuje. var grid = STATE.colorGrid || []; for (var i = 0; i < grid.length; i++) cmsPaletteAdd(out, seen, grid[i].hex, grid[i].name); var rows = STATE.colorRows || []; for (var r = 0; r < rows.length; r++) for (var c = 0; c < (rows[r] || []).length; c++) cmsPaletteAdd(out, seen, rows[r][c].hex, rows[r][c].label); // Pak barvy písma, které na nich manuál používá — bílá a černá značky bývají // vlastní odstín (#FFF0B4, #171717), ne čistá bílá a černá. for (var i2 = 0; i2 < grid.length; i2++) cmsPaletteAdd(out, seen, grid[i2].ink, "text"); for (var r2 = 0; r2 < rows.length; r2++) for (var c2 = 0; c2 < (rows[r2] || []).length; c2++) { var card = rows[r2][c2]; cmsPaletteAdd(out, seen, card.titleColor, "text"); cmsPaletteAdd(out, seen, card.descColor, "text"); cmsPaletteAdd(out, seen, card.metaColor, "text"); } cmsPaletteAdd(out, seen, "#FFFFFF", "bílá"); cmsPaletteAdd(out, seen, "#000000", "černá"); return out; } function cmsSwatchesHtml() { var pal = cmsPalette(); if (!pal.length) return ""; var s = ""; for (var i = 0; i < pal.length; i++) s += ''; return '' + s + ""; } // Jedno místo, kde se barevné políčko skládá — jinak by se paleta musela // dopisovat do pěti různých formulářů a v šestém by chyběla. function cmsPaletteListHtml() { var pal = cmsPalette(); if (!pal.length) return ""; var s = ""; for (var i = 0; i < pal.length; i++) s += ''; // Chrome a Safari umí paletu nabídnout i uvnitř systémového dialogu. Kde to // prohlížeč neumí, se datalist tiše ignoruje a zůstanou vzorníky v panelu. return '' + s + ""; } function cmsColorInputs(attrColor, attrHex, val) { return '' + '' + '' + '' + "" + cmsSwatchesHtml() + ""; } function cmsPickSwatch(ev, btn, hex) { // Tlačítko sedí uvnitř , takže bez tohohle by kliknutí propadlo na // políčko a otevřelo systémový dialog — přesně to, čemu se paleta vyhýbá. if (ev && ev.preventDefault) ev.preventDefault(); var wrap = btn.parentNode.parentNode; var inputs = wrap.querySelectorAll(".cms-colorrow input"); for (var i = 0; i < inputs.length; i++) inputs[i].value = hex; // Posíláme bublající input, aby se změna zpracovala stejnou cestou jako // ruční přepsání — panel poslouchá na jednom místě a nevěděl by o nás. inputs[0].dispatchEvent(new Event("input", { bubbles: true })); } // ---- podsekce Materiálu ------------------------------------------------------ // // Podklady etiket a Příznakové značky jsou dvě instance jedné věci: nadpis plus // mřížka karet. Panel je tak i obsluhuje — každá skupina se dá přejmenovat, // přesunout, zduplikovat i smazat, a přidat se dá další. function cmsGroups() { return STATE.materialGroups || (STATE.materialGroups = []); } function cmsGroupAt(gi) { return cmsGroups()[gi]; } function cmsGroupItemTitle(it) { return it.title || it.variant || it.id; } function cmsGroupNewItem(group) { var sample = group.items[group.items.length - 1]; var base = group.useTint !== false ? { title: "Nová plocha", subtitle: (sample && sample.subtitle) || "podkladová plocha", tint: (sample && sample.tint) || "#cccccc" } : { title: "Nová značka", desc: (sample && sample.desc) || "vlastní značka" }; base.id = cmsUniqueId(cmsSlug(group.id + "-" + Date.now().toString(36))); base.formats = cmsEmptyFormatsLike(sample); return base; } function cmsGroupItemFields(group) { return group.useTint !== false ? [{ key: "title", label: "Název", type: "text" }, { key: "subtitle", label: "Podtitulek", type: "text" }, { key: "tint", label: "Barva plochy", type: "color" }] : [{ key: "title", label: "Název", type: "text" }, { key: "desc", label: "Popisek", type: "text" }]; } function cmsGroupAdd() { var gs = cmsGroups(); gs.push({ id: cmsUniqueGroupId("sekce"), title: "Nová podsekce", sub: "", useTint: false, items: [] }); markUnsaved(); rerenderAll(); cmsRenderPanel(); } function cmsUniqueGroupId(base) { var taken = {}; cmsGroups().forEach(function (g) { taken[g.id] = 1; }); if (!taken[base]) return base; var n = 2; while (taken[base + "-" + n]) n++; return base + "-" + n; } function cmsGroupMove(gi, dir) { var gs = cmsGroups(), to = gi + dir; if (to < 0 || to >= gs.length) return; var t = gs[gi]; gs[gi] = gs[to]; gs[to] = t; markUnsaved(); rerenderAll(); cmsRenderPanel(); } function cmsGroupDuplicate(gi) { var gs = cmsGroups(), src = gs[gi]; if (!src) return; var copy = JSON.parse(JSON.stringify(src)); copy.id = cmsUniqueGroupId(cmsSlug(src.id) + "-kopie"); copy.title = (copy.title || "") + " (kopie)"; // Karty uvnitř potřebují vlastní id a prázdné soubory — ze stejného důvodu // jako u duplikátu jedné karty. copy.items.forEach(function (it) { it.id = cmsUniqueId(cmsSlug(copy.id + "-" + (it.title || "polozka"))); var f = it.formats || {}; for (var g in f) for (var k in f[g]) f[g][k] = { data: null, filename: null, link: null }; it.previewData = null; }); gs.splice(gi + 1, 0, copy); markUnsaved(); rerenderAll(); cmsRenderPanel(); showToast("Podsekce zkopírována. Soubory ke stažení zůstaly prázdné.", 7000); } function cmsGroupRemove(gi) { var g = cmsGroupAt(gi); if (!g) return; if (!window.confirm("Smazat podsekci „" + g.title + "“ i s " + g.items.length + " kartami?")) return; cmsGroups().splice(gi, 1); markUnsaved(); rerenderAll(); cmsRenderPanel(); } function cmsGroupItemAdd(gi) { var g = cmsGroupAt(gi); if (!g) return; var it = cmsGroupNewItem(g); g.items.push(it); cmsPanelFocus = it.id; markUnsaved(); rerenderAll(); cmsRenderPanel(); var card = document.querySelector('[data-card-id="' + it.id + '"]'); if (card) card.scrollIntoView({ block: "center", behavior: "smooth" }); } function cmsGroupItemMove(gi, idx, dir) { var g = cmsGroupAt(gi); if (!g) return; var to = idx + dir; if (to < 0 || to >= g.items.length) return; var t = g.items[idx]; g.items[idx] = g.items[to]; g.items[to] = t; markUnsaved(); rerenderAll(); cmsRenderPanel(); } function cmsGroupItemDuplicate(gi, idx) { var g = cmsGroupAt(gi); if (!g || !g.items[idx]) return; var copy = JSON.parse(JSON.stringify(g.items[idx])); copy.title = (copy.title || "") + " (kopie)"; copy.id = cmsUniqueId(cmsSlug(copy.title)); var f = copy.formats || {}; for (var k in f) for (var j in f[k]) f[k][j] = { data: null, filename: null, link: null }; copy.previewData = null; g.items.splice(idx + 1, 0, copy); cmsPanelFocus = copy.id; markUnsaved(); rerenderAll(); cmsRenderPanel(); showToast("Karta zkopírována. Soubory ke stažení zůstaly prázdné — nahraj je.", 7000); } function cmsGroupItemRemove(gi, idx) { var g = cmsGroupAt(gi); if (!g || !g.items[idx]) return; if (!window.confirm("Smazat „" + cmsGroupItemTitle(g.items[idx]) + "“?\n\nZ manuálu zmizí i tlačítka ke stažení.")) return; g.items.splice(idx, 1); markUnsaved(); rerenderAll(); cmsRenderPanel(); } function cmsGroupFieldHtml(gi, idx, f, item) { var val = item[f.key] == null ? "" : String(item[f.key]); var attr = 'data-group="' + gi + "," + idx + '" data-key="' + f.key + '"'; var input = f.type === "color" ? cmsColorInputs(attr, attr, val) : ''; return '' + escapeHtml(f.label) + "" + input + ""; } function cmsGroupsHtml() { var gs = cmsGroups(); var html = ""; for (var gi = 0; gi < gs.length; gi++) { var g = gs[gi]; var gOpen = !!cmsOpen["grp:" + g.id]; html += '

' + '" + '' + '" + '" + '' + '' + "

" + (!gOpen ? "" : '

' + 'Nadpis' + 'Podtitulek' + 'Poměr náhledu" + 'Vzhled náhledu" + "

"); if (!gOpen) { html += "

"; continue; } html += '

' + '" + '' + '" + '" + '' + '' + "
" + (open ? '
' + cmsGroupItemFields(g).map(function (f) { return cmsGroupFieldHtml(gi, i, f, it); }).join("") + cmsFormatsHtml(it) + "
" : "") + "

'; } return html + ''; } // Políčka podsekcí a jejich karet. function cmsGroupInput(ev) { var t = ev.target; if (!t || !t.dataset) return false; if (t.dataset.grpmeta !== undefined) { var g = cmsGroupAt(Number(t.dataset.grpmeta)); if (!g) return true; if (t.dataset.key === "useTint") g.useTint = t.value === "true"; else if (t.dataset.key === "ratio") g.ratio = t.value ? Number(t.value) : null; else g[t.dataset.key] = t.value; markUnsaved(); rerenderAll(); if (t.dataset.key === "useTint") cmsRenderPanel(); return true; } if (!t.dataset.group) return false; var p = t.dataset.group.split(","); var grp = cmsGroupAt(+p[0]); var item = grp && grp.items[+p[1]]; if (!item) return true; item[t.dataset.key] = t.value; markUnsaved(); if (t.type === "color" || t.classList.contains("cms-hex")) { var sibs = t.parentNode.querySelectorAll("input"); for (var i = 0; i < sibs.length; i++) if (sibs[i] !== t) sibs[i].value = t.value; } rerenderAll(); return true; } function cmsMove(listKey, idx, dir) { var arr = CMS_LISTS[listKey].arr(); var to = idx + dir; if (to < 0 || to >= arr.length) return; var tmp = arr[idx]; arr[idx] = arr[to]; arr[to] = tmp; markUnsaved(); rerenderAll(); cmsRenderPanel(); } function cmsAdd(listKey) { var arr = CMS_LISTS[listKey].arr(); var item = CMS_LISTS[listKey].make(arr[arr.length - 1]); arr.push(item); cmsPanelFocus = item.id; markUnsaved(); rerenderAll(); cmsRenderPanel(); var el = document.getElementById("dlbtn-" + item.id + "-rgb-pdf") || document.getElementById("dlbtn-" + item.id + "-rgb-svg"); if (el) el.scrollIntoView({ block: "center", behavior: "smooth" }); } // Duplikát převezme texty, barvy i tvar karty — tedy práci, která se dělá // znovu nejhůř. Soubory ke stažení ale NE: kopie karty „Negativní varianta" // s podstrčeným souborem od pozitivní je přesně ten druh chyby, kterou by // v manuálu nikdo nehledal, dokud by si ji klient nestáhl do tiskárny. function cmsDuplicate(listKey, idx) { var def = CMS_LISTS[listKey]; var arr = def.arr(); var src = arr[idx]; if (!src) return; var copy = JSON.parse(JSON.stringify(src)); var nameKey = def.nameKey || (copy.variant !== undefined ? "variant" : "title"); copy[nameKey] = (copy[nameKey] || def.label || "kopie") + " (kopie)"; copy.id = cmsUniqueId(cmsSlug(copy[nameKey])); var f = copy.formats || {}; for (var g in f) for (var k in f[g]) f[g][k] = { data: null, filename: null, link: null }; copy.previewData = null; arr.splice(idx + 1, 0, copy); cmsPanelFocus = copy.id; markUnsaved(); rerenderAll(); cmsRenderPanel(); var card = document.querySelector('[data-card-id="' + copy.id + '"]'); if (card) card.scrollIntoView({ block: "center", behavior: "smooth" }); if (def.noFormats) { showToast("Zkopírováno.", 4000); return; } showToast("Karta zkopírována. Soubory ke stažení zůstaly prázdné — nahraj je.", 7000); } // Smazání karty vezme s sebou i odkazy na její soubory. Samotné soubory // zůstanou ležet — mazat cizí data na základě jednoho kliknutí by bylo horší // než pár osiřelých souborů, které nikomu nevadí. function cmsRemove(listKey, idx) { var arr = CMS_LISTS[listKey].arr(); var it = arr[idx]; if (!it) return; var d = CMS_LISTS[listKey]; if (!window.confirm("Smazat „" + d.title(it) + "“?" + (d.noFormats ? "" : "\n\nZ manuálu zmizí i tlačítka ke stažení. Nahrané soubory zůstanou v úložišti."))) return; arr.splice(idx, 1); if (cmsPanelFocus === it.id) cmsPanelFocus = null; markUnsaved(); rerenderAll(); cmsRenderPanel(); } function cmsFieldHtml(listKey, idx, f, item) { var id = "cmsf-" + listKey + "-" + idx + "-" + f.key.replace(/\./g, "_"); var raw = cmsFieldGet(item, f.key); var val = raw == null ? "" : String(raw); var attr = 'id="' + id + '" data-list="' + listKey + '" data-idx="' + idx + '" data-key="' + f.key + '"'; var input; if (f.type === "textarea") { input = '"; } else if (f.type === "select") { var opts = f.options().map(function (o) { return '"; }).join(""); input = '"; } else if (f.type === "color") { input = cmsColorInputs(attr, 'data-list="' + listKey + '" data-idx="' + idx + '" data-key="' + f.key + '"', val); } else { input = ''; } return '' + escapeHtml(f.label) + "" + input + ""; } function cmsListHtml(listKey) { var def = CMS_LISTS[listKey]; var arr = def.arr(); if (!arr) return ""; var rows = ""; for (var i = 0; i < arr.length; i++) { var it = arr[i]; var open = cmsPanelFocus === it.id; rows += '

' + '

' + '" + '' + '" + '" + '' + '' + "" + "

" + (open ? '

' + def.fields.map(function (f) { return cmsFieldHtml(listKey, i, f, it); }).join("") + (def.noFormats ? "" : cmsFormatsHtml(it)) + "

" : "") + "

"; } return '

' + rows + "" + ''; } function cmsFocus(id) { cmsPanelFocus = cmsPanelFocus === id ? null : id; cmsRevealSection(id); cmsRenderPanel(); var card = document.querySelector('[data-card-id="' + id + '"]'); if (card) card.scrollIntoView({ block: "center", behavior: "smooth" }); } // Aby se dalo na kartu odkázat zvenčí, musí se otevřít i sekce, ve které leží. function cmsRevealSection(id) { if ((STATE.logos || []).some(function (l) { return l.id === id; })) { cmsOpen["list:logos"] = true; return; } var gs = cmsGroups(); for (var i = 0; i < gs.length; i++) { if ((gs[i].items || []).some(function (it) { return it.id === id; })) { cmsOpen.groups = true; cmsOpen["grp:" + gs[i].id] = true; return; } } } function cmsRenderPanel() { var el = document.getElementById("cms-panel"); if (!el) return; el.hidden = !(adminUnlocked && cmsPanelOpen); if (el.hidden) { cmsToolsHome(); return; } cmsListsSync(); // Panel se překresluje po každém kliknutí. Bez tohohle by po zaškrtnutí // formátu odskočil na začátek a člověk by se k té kartě prokoukával znovu. var keepTop = el.scrollTop; var html = '

Obsah' + '

'; if (!adminMode) { // Přihlášený, ale úpravy vypnuté: manuál vypadá jako pro návštěvníka // a v panelu je jen to, čím se úpravy zapnou. html += '

Zapni Úpravy obsahu dole a můžeš přepisovat texty přímo ve stránce i skládat karty tady.

' + '

'; // Nastroje jsou presunuty uzel, ne kopie - innerHTML by je zahodil // i s jejich posluchaci. Pred prekreslenim se proto vrati do paticky. cmsToolsHome(); el.innerHTML = html; cmsMoveTools(); return; } html += '

Texty přepisuješ přímo ve stránce. Tady je pořadí karet, jejich přidání, barvy a formáty ke stažení. Klikni na sekci, kterou chceš upravovat.

'; var order = cmsSecOrder(); if (order) html += cmsAcc("sections", "Sekce manuálu", order.length, "pořadí a nadpisy", cmsSectionsHtml); for (var k in CMS_LISTS) { if (!CMS_LISTS[k].arr()) continue; (function (key) { html += cmsAcc("list:" + key, CMS_LISTS[key].label, CMS_LISTS[key].arr().length, "", function () { return cmsListHtml(key); }); })(k); } // Materiál zná zatím jen má chuť; jinde by panel nabízel blok, který se // do stránky nemá kam vykreslit. if (STATE.materialGroups && cmsHasBlock("materials")) { var gs = cmsGroups(); var karet = gs.reduce(function (a, g) { return a + (g.items || []).length; }, 0); html += cmsAcc("groups", "Podsekce materiálu", gs.length, gs.length ? karet + " karet" : "", cmsGroupsHtml); } if (STATE.colorRows && cmsHasBlock("colorRows")) { html += cmsAcc("colors", "Barevnost", STATE.colorRows.length, "", cmsColorsHtml); } var objs = cmsObjects(); for (var oi = 0; oi < objs.length; oi++) { (function (o) { if (!o.obj()) return; html += cmsAcc("obj:" + o.key, o.label, null, "barvy a odkaz", function () { return cmsObjHtml(o.key); }); })(objs[oi]); } html += '

' + cmsPaletteListHtml(); cmsToolsHome(); el.innerHTML = html; cmsMoveTools(); el.scrollTop = keepTop; } // Nástroje (úpravy, uložit, stáhnout, záloha) bydlí v patičce, ale po // přihlášení se přestěhují sem dolů. Přesouvá se celý uzel, ne jeho kopie — // tlačítka si tak nesou své posluchače a nemusí se nic přepojovat. function cmsMoveTools() { var slot = document.getElementById("cms-tools"); var tools = document.getElementById("admin-tools"); if (!slot || !tools) return; slot.appendChild(tools); var note = document.getElementById("admin-note"); if (note) slot.appendChild(note); // Zamknout patří sem taky: otevřený panel patičku překrývá, takže tlačítko // v ní by bylo pod ním a nešlo by se odhlásit. var gate = document.getElementById("admin-gate"); if (gate) slot.appendChild(gate); } // Po zamčení nebo zavření panelu se vrátí, odkud přišly — jinak by zůstaly // viset ve skrytém panelu a při dalším přihlášení nebylo co přesouvat. function cmsToolsHome() { var tools = document.getElementById("admin-tools"); var toolsHome = document.getElementById("admin-tools-home"); if (tools && toolsHome && tools.parentNode !== toolsHome) toolsHome.appendChild(tools); var note = document.getElementById("admin-note"); var noteHome = document.getElementById("admin-note-home"); if (note && noteHome && note.parentNode !== noteHome) noteHome.appendChild(note); var gate = document.getElementById("admin-gate"); var gateHome = document.getElementById("admin-gate-home"); if (gate && gateHome && gate.parentNode !== gateHome) gateHome.appendChild(gate); } function cmsTogglePanel() { cmsPanelOpen = !cmsPanelOpen; cmsRenderPanel(); } // Políčka panelu píšou rovnou do stavu. Barvy se překreslují hned, aby bylo // vidět, co se děje; u textů by překreslení sebralo kurzor, tak se u nich čeká // na opuštění políčka. function cmsPanelInput(ev) { var t = ev.target; if (cmsFormatInput(ev)) return; if (cmsGroupInput(ev)) return; if (cmsColorInput(ev)) return; if (cmsObjInput(ev)) return; if (cmsSecInput(ev)) return; if (!t || !t.dataset || !t.dataset.list) return; var def = CMS_LISTS[t.dataset.list]; if (!def) return; var item = def.arr()[Number(t.dataset.idx)]; if (!item) return; var v = t.value; cmsFieldSet(item, t.dataset.key, v === "" && t.dataset.key === "desc" ? null : v); markUnsaved(); if (t.type === "color" || t.classList.contains("cms-hex") || t.tagName === "SELECT") { var pair = t.parentNode && t.parentNode.querySelectorAll ? t.parentNode.querySelectorAll("input") : []; for (var i = 0; i < pair.length; i++) if (pair[i] !== t) pair[i].value = v; rerenderAll(); } } function cmsPanelChange(ev) { var t = ev.target; if (!t || !t.dataset) return; // Název sekce se v seznamu přepíše, až když se políčko opustí — překreslovat // panel při každém znaku by bralo kurzor. if (t.dataset.sec !== undefined) { if (t.dataset.key === "num" || t.dataset.key === "title") cmsRenderPanel(); return; } if (!t.dataset.list) return; if (t.type === "color" || t.tagName === "SELECT") return; // už překresleno rerenderAll(); } // ---- sekce manuálu ----------------------------------------------------------- // // U layoutu, který se skládá z pořadí sekcí (patron), jde pořadí i obsah // nejvyšší úrovně řídit odtud: přidat sekci, přejmenovat ji, posunout, smazat. // Obsah sekce se pak upravuje ve vlastním bloku níž v panelu. var cmsSecOpen = -1; function cmsSecOrder() { return (STATE.sections && STATE.sections.order) || null; } function cmsSecKinds() { return (typeof P_SECTION_KINDS !== "undefined" && P_SECTION_KINDS) || []; } function cmsSecKindLabel(kind) { var k = cmsSecKinds(); for (var i = 0; i < k.length; i++) if (k[i].kind === kind) return k[i].label; return kind; } var CMS_SEC_FIELDS = [ { key: "num", label: "Číslo (prázdné = bez čísla)", type: "text" }, { key: "title", label: "Nadpis (prázdný = bez nadpisu)", type: "text" }, { key: "anchor", label: "Kotva pro obsah", type: "text" }, { key: "bg", label: "Pozadí", type: "color" }, { key: "padTop", label: "Odsazení nahoře (px)", type: "text" }, { key: "padBottom", label: "Odsazení dole (px)", type: "text" }, { key: "rule", label: "Linka pod sekcí", type: "select", options: function () { return ["ne", "ano"]; } } ]; function cmsSecToggle(i) { cmsSecOpen = cmsSecOpen === i ? -1 : i; cmsRenderPanel(); } function cmsSecMove(i, dir) { var o = cmsSecOrder(); if (!o) return; var to = i + dir; if (to < 0 || to >= o.length) return; var t = o[i]; o[i] = o[to]; o[to] = t; if (cmsSecOpen === i) cmsSecOpen = to; else if (cmsSecOpen === to) cmsSecOpen = i; markUnsaved(); rerenderAll(); cmsRenderPanel(); } function cmsSecAdd() { var o = cmsSecOrder(); if (!o) return; var sel = document.getElementById("cms-sec-kind"); var kind = (sel && sel.value) || (cmsSecKinds()[0] || {}).kind; if (!kind) return; var label = cmsSecKindLabel(kind); o.push({ kind: kind, num: "", title: label, anchor: "section-" + cmsSlug(label), padTop: 120, padBottom: 80, bg: "#FFFFFF" }); cmsSecOpen = o.length - 1; markUnsaved(); rerenderAll(); cmsRenderPanel(); } function cmsSecRemove(i) { var o = cmsSecOrder(); if (!o || !o[i]) return; if (!window.confirm("Odebrat sekci \u201e" + (o[i].title || cmsSecKindLabel(o[i].kind)) + "\u201c z manuálu?\n\nObsah sekce (karty, barvy, soubory) zůstane uložený — sekci lze zase přidat.")) return; o.splice(i, 1); cmsSecOpen = -1; markUnsaved(); rerenderAll(); cmsRenderPanel(); } function cmsSecFieldHtml(i, f, sec) { var id = "cmss-" + i + "-" + f.key; var raw = f.key === "rule" ? (sec.rule ? "ano" : "ne") : sec[f.key]; var val = raw == null ? "" : String(raw); var attr = 'id="' + id + '" data-sec="' + i + '" data-key="' + f.key + '"'; var input; if (f.type === "select") { input = '"; } else if (f.type === "color") { input = cmsColorInputs(attr, 'data-sec="' + i + '" data-key="' + f.key + '"', val || "#FFFFFF"); } else { input = ''; } return '' + escapeHtml(f.label) + "" + input + ""; } function cmsSectionsHtml() { var o = cmsSecOrder(); if (!o) return ""; var rows = ""; for (var i = 0; i < o.length; i++) { var sec = o[i], open = cmsSecOpen === i; var name = (sec.num ? sec.num + " " : "") + (sec.title || cmsSecKindLabel(sec.kind)); rows += '

' + '

' + '" + '' + '" + '" + '' + "" + "

" + (open ? '

Obsah: ' + escapeHtml(cmsSecKindLabel(sec.kind)) + " \u2014 upravuje se ve vlastním bloku níž v panelu.

" + CMS_SEC_FIELDS.map(function (f) { return cmsSecFieldHtml(i, f, sec); }).join("") + "

" : "") + "

"; } var opts = cmsSecKinds().map(function (k) { return '"; }).join(""); return '

' + rows + "" + (opts ? '

Přidat sekci' + '" + '' + 'Obsah v obsahu manuálu (číslo a název v rozcestníku) se nepřepisuje sám — uprav ho přímo ve stránce.

' : ""); } function cmsSecInput(ev) { var t = ev.target; if (!t || !t.dataset || t.dataset.sec === undefined) return false; var o = cmsSecOrder(); var sec = o && o[Number(t.dataset.sec)]; if (!sec) return true; var key = t.dataset.key, v = t.value; if (key === "rule") sec.rule = v === "ano"; else if (key === "padTop" || key === "padBottom") sec[key] = v === "" ? 0 : Number(v); else if (key === "num" || key === "title") sec[key] = v; else sec[key] = v; markUnsaved(); if (t.type === "color" || t.classList.contains("cms-hex")) { var sibs = t.parentNode.querySelectorAll("input"); for (var j = 0; j < sibs.length; j++) if (sibs[j] !== t) sibs[j].value = v; } rerenderAll(); return true; } // ---- barevnost --------------------------------------------------------------- // // Barevnost není mřížka karet, ale řady o jedné nebo dvou kartách, některé // s připojenými pruhy odstínů. Pořadí se proto řeší po řadách, ne po kartách — // přesouvat kartu mezi řadami by znamenalo rozhodovat za redaktora, co se má // stát se šířkou zbytku řady. var CMS_COLOR_FIELDS = [ { key: "label", label: "Název", type: "text" }, { key: "desc", label: "Popis", type: "text" }, { key: "hex", label: "HEX", type: "color" }, { key: "rgb", label: "RGB", type: "text" }, { key: "cmyk", label: "CMYK", type: "text" }, { key: "pantone", label: "Pantone", type: "text" }, { key: "pantoneNote", label: "Poznámka k Pantone", type: "text" }, { key: "titleColor", label: "Barva názvu", type: "color" }, { key: "descColor", label: "Barva popisu", type: "color" }, { key: "metaColor", label: "Barva hodnot", type: "color" } ]; function cmsColorCard(r, c) { var row = STATE.colorRows[r]; return row && row[c]; } function cmsColorField(r, c, f) { var item = cmsColorCard(r, c); var val = item[f.key] == null ? "" : String(item[f.key]); var attr = 'data-color="' + r + "," + c + '" data-key="' + f.key + '"'; var input; if (f.type === "color") { input = cmsColorInputs(attr, attr, val); } else { input = ''; } return '' + escapeHtml(f.label) + "" + input + ""; } function cmsTintsHtml(r, c) { var item = cmsColorCard(r, c); var have = item.tints || []; var boxes = [75, 50, 25].map(function (p) { var on = have.indexOf(p) !== -1; return ' " + p + "%"; }).join(""); return '

Odstíny

' + boxes + "

"; } function cmsToggleTint(r, c, pct, on) { var item = cmsColorCard(r, c); if (!item) return; var t = (item.tints || []).slice(); var i = t.indexOf(pct); if (on && i === -1) t.push(pct); if (!on && i !== -1) t.splice(i, 1); // Pruhy jdou na artboardu odshora dolů 75 → 50 → 25. t.sort(function (a, b) { return b - a; }); item.tints = t; markUnsaved(); rerenderAll(); cmsRenderPanel(); } // Barvy žádné soubory ke stažení nemají, takže jejich kopie může být úplná. function cmsColorCardDuplicate(r, c) { var row = STATE.colorRows[r]; if (!row || !row[c] || row.length >= 2) return; var copy = JSON.parse(JSON.stringify(row[c])); copy.label = (copy.label || "") + " (kopie)"; row.splice(c + 1, 0, copy); markUnsaved(); rerenderAll(); cmsRenderPanel(); } function cmsColorRowDuplicate(r) { var row = STATE.colorRows[r]; if (!row) return; STATE.colorRows.splice(r + 1, 0, JSON.parse(JSON.stringify(row))); markUnsaved(); rerenderAll(); cmsRenderPanel(); } function cmsColorRowMove(r, dir) { var to = r + dir; if (to < 0 || to >= STATE.colorRows.length) return; var tmp = STATE.colorRows[r]; STATE.colorRows[r] = STATE.colorRows[to]; STATE.colorRows[to] = tmp; markUnsaved(); rerenderAll(); cmsRenderPanel(); } function cmsColorNew(sample) { return { label: "Nová barva", desc: null, hex: "#cccccc", rgb: "204 / 204 / 204", cmyk: "0 / 0 / 0 / 20", pantone: "—", pantoneNote: "—", titleColor: (sample && sample.titleColor) || "#171717", descColor: (sample && sample.descColor) || "#171717", metaColor: (sample && sample.metaColor) || "#171717", tints: [] }; } function cmsColorRowAdd() { var last = STATE.colorRows[STATE.colorRows.length - 1]; STATE.colorRows.push([cmsColorNew(last && last[0])]); markUnsaved(); rerenderAll(); cmsRenderPanel(); } function cmsColorCardAdd(r) { var row = STATE.colorRows[r]; if (!row || row.length >= 2) return; // na artboardu jsou nejvýš dvě v řadě row.push(cmsColorNew(row[0])); markUnsaved(); rerenderAll(); cmsRenderPanel(); } function cmsColorCardRemove(r, c) { var row = STATE.colorRows[r]; if (!row) return; var name = row[c] && row[c].label; if (!window.confirm("Smazat barvu „" + name + "“?")) return; row.splice(c, 1); if (!row.length) STATE.colorRows.splice(r, 1); markUnsaved(); rerenderAll(); cmsRenderPanel(); } function cmsColorsHtml() { if (!STATE.colorRows) return ""; var html = '

' + '' + (r + 1) + ". řada" + '' + '" + '" + (row.length < 2 ? '' : "") + '' + "
"; for (var c = 0; c < row.length; c++) { html += '
' + "" + escapeHtml(row[c].label || "—") + "" + '' + (row.length < 2 ? '' : "") + '' + "
" + '
' + CMS_COLOR_FIELDS.map(function (f) { return cmsColorField(r, c, f); }).join("") + cmsTintsHtml(r, c) + "
"; } html += "

'; } // Políčka barevnosti mají vlastní obsluhu — adresují se řadou a sloupcem, // ne id, protože karty barev žádné nemají. function cmsColorInput(ev) { var t = ev.target; if (!t || !t.dataset) return false; if (t.dataset.tint) { var p = t.dataset.tint.split(","); cmsToggleTint(+p[0], +p[1], +p[2], t.checked); return true; } if (!t.dataset.color) return false; var rc = t.dataset.color.split(","); var item = cmsColorCard(+rc[0], +rc[1]); if (!item) return true; item[t.dataset.key] = t.value === "" && t.dataset.key === "desc" ? null : t.value; markUnsaved(); if (t.type === "color") { var sibs = t.parentNode.querySelectorAll("input"); for (var i = 0; i < sibs.length; i++) if (sibs[i] !== t) sibs[i].value = t.value; } rerenderAll(); return true; } // ---- které formáty karta nabízí --------------------------------------------- // // CMYK export nedává smysl všude a některá značka chce naopak SVG tam, kde ho // engine dřív nenabízel. Sloty proto nejsou pevné: co je v kartě zaškrtnuté, // to se vykreslí jako tlačítko ke stažení. // // Odškrtnutí formátu, ve kterém už soubor leží, se ptá — odkaz by se ztratil // a člověk by si toho všiml, až by ho někdo sháněl. var FMT_CHOICES = [ { group: "rgb", fmts: ["svg", "pdf", "png", "jpg"] }, { group: "cmyk", fmts: ["pdf", "svg", "eps"] }, { group: "pantone", fmts: ["pdf", "eps"] }, // Balíček se vším — vlastní řádek, protože ZIP není barevný prostor. { group: "bundle", fmts: ["zip"] } ]; var FMT_GROUP_LABELS = { rgb: "RGB", cmyk: "CMYK", pantone: "PANTONE", bundle: "BALÍČEK" }; function cmsHasFile(slot) { return !!(slot && (slot.data || slot.link)); } function cmsToggleFormat(itemId, group, fmt, on) { var item = findItemById(itemId); if (!item) return; if (!item.formats) item.formats = {}; if (on) { if (!item.formats[group]) item.formats[group] = {}; var have = item.formats[group][fmt]; if (have) { delete have.off; } else { // Klíče se vykreslují v pořadí, v jakém vznikly, takže nový formát se // nevloží na konec, ale na své místo — jinak by PDF přibylo za JPG. var want = ["svg", "png", "pdf", "jpg", "eps", "zip"]; var merged = {}, existing = item.formats[group]; Object.keys(existing).concat([fmt]).sort(function (a, b) { var ia = want.indexOf(a), ib = want.indexOf(b); return (ia === -1 ? 99 : ia) - (ib === -1 ? 99 : ib); }).forEach(function (k) { merged[k] = existing[k] || { data: null, filename: null, link: null }; }); item.formats[group] = merged; } } else { var slot = item.formats[group] && item.formats[group][fmt]; if (!slot) return; // Soubor se nemaže, jen se schová i s tlačítkem. Vrátit se dá kdykoli. slot.off = true; } markUnsaved(); rerenderAll(); cmsRenderPanel(); } function cmsFormatsHtml(item) { var rows = FMT_CHOICES.map(function (c) { var boxes = c.fmts.map(function (f) { var slot = item.formats && item.formats[c.group] && item.formats[c.group][f]; var on = !!(slot && !slot.off); return '' + ' " + f.toUpperCase() + (cmsHasFile(slot) ? " •" : "") + ""; }).join(""); return '

' + (FMT_GROUP_LABELS[c.group] || c.group.toUpperCase()) + "" + '

' + boxes + "

"; }).join(""); return '

Formáty ke stažení' + rows + 'Tečka = soubor je nahraný. Odškrtnutím zmizí tlačítko, soubor zůstane uložený.' + '

"; } // Uvnitř jedné sekce má mít nabídka ke stažení stejný tvar — jinak to vypadá, // že na některé varianty se zapomnělo. Kopíruje se jen sada formátů, soubory // zůstávají každé kartě její. function cmsFormatsToAll(itemId) { var src = findItemById(itemId); if (!src) return; var peers = null; if ((STATE.logos || []).indexOf(src) !== -1) peers = STATE.logos; else { var gs = STATE.materialGroups || []; for (var i = 0; i < gs.length && !peers; i++) { if ((gs[i].items || []).indexOf(src) !== -1) peers = gs[i].items; } } if (!peers) return; if (!window.confirm("Nastavit stejnou sadu formátů u všech " + peers.length + " karet v téhle sekci?\n\nNahrané soubory zůstanou, jen se u vypnutých formátů skryje tlačítko.")) return; peers.forEach(function (it) { if (it === src) return; var next = {}; for (var g in src.formats) { next[g] = {}; for (var f in src.formats[g]) { var old = (it.formats && it.formats[g] && it.formats[g][f]) || { data: null, filename: null, link: null }; if (src.formats[g][f].off) old.off = true; else delete old.off; next[g][f] = old; } } // Formáty, které zdroj nemá, se u ostatních jen schovají — soubory v nich // by se jinak ztratily bez varování. for (var g2 in (it.formats || {})) { for (var f2 in it.formats[g2]) { if (next[g2] && next[g2][f2]) continue; if (!next[g2]) next[g2] = {}; var keep = it.formats[g2][f2]; keep.off = true; next[g2][f2] = keep; } } it.formats = next; }); markUnsaved(); rerenderAll(); cmsRenderPanel(); } function cmsFormatInput(ev) { var t = ev.target; if (!t || !t.dataset || !t.dataset.fmt) return false; var p = t.dataset.fmt.split(","); cmsToggleFormat(p[0], p[1], p[2], t.checked); return true; }

logomanuál

Obsah