diff options
Diffstat (limited to 'internal/web/templates/dashboard/design.html')
| -rw-r--r-- | internal/web/templates/dashboard/design.html | 76 |
1 files changed, 15 insertions, 61 deletions
diff --git a/internal/web/templates/dashboard/design.html b/internal/web/templates/dashboard/design.html index 261eb69..71597e8 100644 --- a/internal/web/templates/dashboard/design.html +++ b/internal/web/templates/dashboard/design.html @@ -181,6 +181,18 @@ {{range .Data.perPage}}<option value="{{.}}"{{if eq . $t.PostsPerPage}} selected{{end}}>{{.}}</option>{{end}} </select></label> </div> + <div class="row"> + <label>{{t "On listings show"}}<br><select name="list_style"> + <option value="full"{{if eq $t.ListStyle "full"}} selected{{end}}>{{t "The whole post"}}</option> + <option value="summary"{{if eq $t.ListStyle "summary"}} selected{{end}}>{{t "A summary and a “Read more” link"}}</option> + </select></label> + <label>{{t "Featured image on the post page"}}<br><select name="post_image"> + <option value="top"{{if eq $t.PostImage "top"}} selected{{end}}>{{t "Above the text"}}</option> + <option value="bottom"{{if eq $t.PostImage "bottom"}} selected{{end}}>{{t "Below the text"}}</option> + <option value="list"{{if eq $t.PostImage "list"}} selected{{end}}>{{t "Only on listings"}}</option> + </select></label> + </div> + <p class="muted small">{{t "A summary is the post up to a line with <!--more-->, or its first paragraphs. A post's featured image is picked on the post form and shown as a thumbnail on listings."}}</p> <h3>{{t "Around the posts"}}</h3> <p class="muted small">{{t "Your own HTML before and after the posts — an intro box, a newsletter form, a badge…"}}</p> {{template "arealist" (dict "area" "above" "root" .)}} @@ -260,19 +272,8 @@ </details> </div> -{{/* The library panel: filled by the script from /files?kind=image as JSON, one page at a time. */}} -<div class="picker" id="picker" hidden> - <div class="picker-box"> - <div class="picker-head"> - <input type="search" placeholder="{{t "Filter by name…"}}" aria-label="{{t "Filter by name…"}}"> - <span class="muted small pcount">{{tf "%d images" .Data.imageCount}}</span> - <button type="button" class="secondary small" data-pick="close">{{t "Close"}}</button> - </div> - <div class="picks"></div> - <p class="muted small pnone" hidden>{{t "No images match."}}</p> - <div class="pager"><button type="button" class="mini" data-pick="prev">← {{t "Newer"}}</button> <span class="pnum"></span> <button type="button" class="mini" data-pick="next">{{t "Older"}} →</button></div> - </div> -</div> +{{/* The library panel behind the image pickers (partials/imagelib.html). */}} +{{template "imagelib" (dict "sub" $sub "count" .Data.imageCount)}} <script> (function () { @@ -303,7 +304,7 @@ return row; } form.addEventListener("click", function (e) { - var b = e.target.closest("[data-act],[data-menu],[data-pick],.preset"); + var b = e.target.closest("[data-act],[data-menu],.preset"); // the image pickers are imagelib's if (!b) return; var row = b.closest(".modrow"), list = row && row.parentNode; switch (b.getAttribute("data-act")) { @@ -336,7 +337,6 @@ q("[name=link_hover_custom]").checked = q("[name=nav_hover_custom]").checked = false; touch(); return; } - pickAction(b); }); form.addEventListener("change", function (e) { var t = e.target; @@ -379,52 +379,6 @@ q("[name=at]").value = section(); // so the page comes back to the section in view }); - // ---- the image library panel: one shared panel, fetched page by page - var panel = document.getElementById("picker"), pick = null, page = 1, filter = "", timer; - if (!window.fetch) { qa(".imagepick .jsonly").forEach(function (el) { el.hidden = true; }); qa(".imagepick select").forEach(function (el) { el.className = ""; }); return; } - function pickAction(b) { - var act = b.getAttribute("data-pick"), ip = b.closest(".imagepick"); - if (act === "open") { pick = ip; panel.hidden = false; q("input", panel).value = filter = ""; load(1); q("input", panel).focus(); } - else if (act === "clear") { choose(ip, "none", ""); } - } - panel.addEventListener("click", function (e) { - var b = e.target.closest("[data-pick],.pick"); - if (!b) return; - if (b.className.indexOf("pick") === 0) { choose(pick, b.getAttribute("data-id"), b.getAttribute("data-name")); panel.hidden = true; return; } - switch (b.getAttribute("data-pick")) { - case "close": panel.hidden = true; break; - case "prev": load(page - 1); break; - case "next": load(page + 1); break; - } - }); - panel.addEventListener("keydown", function (e) { if (e.key === "Escape") panel.hidden = true; }); - q("input", panel).addEventListener("input", function () { clearTimeout(timer); timer = setTimeout(function () { filter = q("input", panel).value.trim(); load(1); }, 250); }); - function load(n) { - var url = "/b/" + form.getAttribute("data-sub") + "/files?kind=image&p=" + n + (filter ? "&q=" + encodeURIComponent(filter) : ""); - fetch(url, { headers: { Accept: "application/json" }, credentials: "same-origin" }).then(function (r) { return r.json(); }).then(function (d) { - page = d.page; - var grid = q(".picks", panel); grid.innerHTML = ""; - (d.files || []).forEach(function (f) { - var b = document.createElement("button"), img = document.createElement("img"), s = document.createElement("span"); - b.type = "button"; b.className = "pick"; b.setAttribute("data-id", f.id); b.setAttribute("data-name", f.filename); - img.loading = "lazy"; img.src = "/b/" + form.getAttribute("data-sub") + "/media/" + f.id; img.alt = ""; - s.className = "name"; s.textContent = f.filename; - b.appendChild(img); b.appendChild(s); grid.appendChild(b); - }); - q(".pnone", panel).hidden = !!(d.files && d.files.length); - q(".pnum", panel).textContent = d.last > 1 ? d.page + " / " + d.last : ""; - q("[data-pick=prev]", panel).disabled = d.page <= 1; q("[data-pick=next]", panel).disabled = d.page >= d.last; - }); - } - function choose(ip, id, name) { // the select stays the value the form sends - var sel = q("select", ip), pv = q(".preview", ip), found = false; - for (var i = 0; i < sel.options.length; i++) if (sel.options[i].value === id) found = true; - if (!found) { var o = document.createElement("option"); o.value = id; o.textContent = name; sel.appendChild(o); } - sel.value = id; - pv.innerHTML = id === "none" ? '<span class="swatch">×</span>' : ""; - if (id !== "none") { var img = document.createElement("img"); img.src = "/b/" + form.getAttribute("data-sub") + "/media/" + id; img.alt = ""; pv.appendChild(img); } - touch(); - } })(); </script> {{end}} |