| 1 | <%
|
|---|
| 2 | // Post editor — split into card sections for visual hierarchy:
|
|---|
| 3 | // - Identity : title, slug, excerpt
|
|---|
| 4 | // - Cover : thumbnail + URL + custom upload button
|
|---|
| 5 | // - Content : markdown textarea with attached toolbar
|
|---|
| 6 | // - Meta : status, type, pin, noindex, tags
|
|---|
| 7 | //
|
|---|
| 8 | // All behavior (IDs, names, upload endpoints) is preserved — only layout
|
|---|
| 9 | // and styling changed.
|
|---|
| 10 | const _hasCover = !!post.cover_image_url;
|
|---|
| 11 | // In hub-modus moeten save/create/cancel de /user/<slug>/-prefix dragen, anders
|
|---|
| 12 | // valt de request terug op de primaire site (siteUrlBase leeg) en rendert de
|
|---|
| 13 | // post na opslaan headerless (bareChrome). In solo is _base leeg.
|
|---|
| 14 | const _base = (typeof siteUrlBase !== 'undefined' && siteUrlBase) ? siteUrlBase : '';
|
|---|
| 15 | %>
|
|---|
| 16 | <div class="container post-edit-page">
|
|---|
| 17 | <h1><%= isNew ? 'Nieuwe post' : 'Post bewerken' %></h1>
|
|---|
| 18 |
|
|---|
| 19 | <form method="post" action="<%= _base %><%= isNew ? '/posts/create' : '/posts/' + post.slug + '/save' %>" class="post-edit-form">
|
|---|
| 20 |
|
|---|
| 21 | <%# ── IDENTITY ─────────────────────────────────────────────── %>
|
|---|
| 22 | <section class="pe-card">
|
|---|
| 23 | <label class="pe-field">
|
|---|
| 24 | <span>Titel</span>
|
|---|
| 25 | <input type="text" name="title" value="<%= post.title %>" required>
|
|---|
| 26 | </label>
|
|---|
| 27 | <div class="pe-row pe-row-2">
|
|---|
| 28 | <label class="pe-field">
|
|---|
| 29 | <span>Slug (URL)</span>
|
|---|
| 30 | <input type="text" name="slug" value="<%= post.slug %>" placeholder="auto van titel als leeg">
|
|---|
| 31 | </label>
|
|---|
| 32 | <label class="pe-field">
|
|---|
| 33 | <span>Tags <small>(komma-gescheiden)</small></span>
|
|---|
| 34 | <input type="text" name="tags" value="<%= Array.isArray(post.tags) ? post.tags.join(', ') : '' %>">
|
|---|
| 35 | </label>
|
|---|
| 36 | </div>
|
|---|
| 37 | <label class="pe-field">
|
|---|
| 38 | <span>Excerpt <small>(preview tekst)</small></span>
|
|---|
| 39 | <textarea name="excerpt" rows="2"><%= post.excerpt %></textarea>
|
|---|
| 40 | <small class="pe-hint" style="opacity:.7">Wordt ook gebruikt als samenvatting in <strong>Cirkels</strong> (andere sites die je post tonen). Leeg laten = begin van de post.</small>
|
|---|
| 41 | </label>
|
|---|
| 42 | </section>
|
|---|
| 43 |
|
|---|
| 44 | <%# ── COVER ────────────────────────────────────────────────── %>
|
|---|
| 45 | <section class="pe-card">
|
|---|
| 46 | <div class="pe-section-title">Cover</div>
|
|---|
| 47 | <div class="pe-cover-row">
|
|---|
| 48 | <div class="pe-cover-thumb" id="cover-preview-wrap" <%= _hasCover ? '' : 'data-empty' %>>
|
|---|
| 49 | <img src="<%= _hasCover ? post.cover_image_url : '' %>" alt="" id="cover-preview-img" <%= _hasCover ? '' : 'hidden' %>>
|
|---|
| 50 | <% if (!_hasCover) { %><span class="pe-cover-empty">🖼</span><% } %>
|
|---|
| 51 | </div>
|
|---|
| 52 | <div class="pe-cover-actions">
|
|---|
| 53 | <label class="pe-field">
|
|---|
| 54 | <span>Cover URL</span>
|
|---|
| 55 | <input type="text" name="cover_image_url" id="cover-url-field"
|
|---|
| 56 | value="<%= post.cover_image_url || '' %>"
|
|---|
| 57 | inputmode="url" autocapitalize="none" spellcheck="false"
|
|---|
| 58 | placeholder="/media/… of https://… (of upload met de knop)">
|
|---|
| 59 | </label>
|
|---|
| 60 | <div class="pe-cover-upload">
|
|---|
| 61 | <button type="button" class="pe-btn pe-btn-secondary" id="cover-upload-trigger">
|
|---|
| 62 | 📷 Upload nieuwe cover
|
|---|
| 63 | </button>
|
|---|
| 64 | <input type="file" id="cover-upload-field" accept="image/jpeg,image/png,image/webp,image/gif" hidden>
|
|---|
| 65 | <small id="cover-upload-status" class="pe-status"></small>
|
|---|
| 66 | </div>
|
|---|
| 67 | </div>
|
|---|
| 68 | </div>
|
|---|
| 69 | </section>
|
|---|
| 70 |
|
|---|
| 71 | <%# ── CONTENT ──────────────────────────────────────────────── %>
|
|---|
| 72 | <section class="pe-card pe-card-content">
|
|---|
| 73 | <div class="pe-section-title">
|
|---|
| 74 | Content
|
|---|
| 75 | <small>Sleep een afbeelding om in te voegen · selecteer tekst om op te maken</small>
|
|---|
| 76 | </div>
|
|---|
| 77 | <div class="pe-editor-frame">
|
|---|
| 78 | <div class="pe-toolbar" id="pe-toolbar" role="toolbar" aria-label="Format">
|
|---|
| 79 | <button type="button" data-cmd="bold" title="Vet (Ctrl+B)" aria-label="Vet">
|
|---|
| 80 | <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M6 4h8a4 4 0 0 1 0 8H6z"/><path d="M6 12h9a4 4 0 0 1 0 8H6z"/></svg>
|
|---|
| 81 | </button>
|
|---|
| 82 | <button type="button" data-cmd="italic" title="Cursief (Ctrl+I)" aria-label="Cursief">
|
|---|
| 83 | <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><line x1="19" y1="4" x2="10" y2="4"/><line x1="14" y1="20" x2="5" y2="20"/><line x1="15" y1="4" x2="9" y2="20"/></svg>
|
|---|
| 84 | </button>
|
|---|
| 85 | <button type="button" data-cmd="underline" title="Onderstreept" aria-label="Onderstreept">
|
|---|
| 86 | <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M6 4v6a6 6 0 0 0 12 0V4"/><line x1="4" y1="20" x2="20" y2="20"/></svg>
|
|---|
| 87 | </button>
|
|---|
| 88 | <span class="pe-toolbar-sep" aria-hidden="true"></span>
|
|---|
| 89 | <button type="button" class="pe-tb-text" data-cmd="formatBlock" data-arg="h2" title="Kop">H2</button>
|
|---|
| 90 | <button type="button" class="pe-tb-text" data-cmd="formatBlock" data-arg="h3" title="Subkop">H3</button>
|
|---|
| 91 | <button type="button" class="pe-tb-text" data-cmd="formatBlock" data-arg="p" title="Paragraaf">¶</button>
|
|---|
| 92 | <span class="pe-toolbar-sep" aria-hidden="true"></span>
|
|---|
| 93 | <button type="button" data-cmd="insertUnorderedList" title="Lijst" aria-label="Lijst">
|
|---|
| 94 | <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><line x1="9" y1="6" x2="20" y2="6"/><line x1="9" y1="12" x2="20" y2="12"/><line x1="9" y1="18" x2="20" y2="18"/><circle cx="4.5" cy="6" r="1.2"/><circle cx="4.5" cy="12" r="1.2"/><circle cx="4.5" cy="18" r="1.2"/></svg>
|
|---|
| 95 | </button>
|
|---|
| 96 | <button type="button" data-cmd="insertOrderedList" title="Genummerde lijst" aria-label="Genummerde lijst">
|
|---|
| 97 | <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><line x1="10" y1="6" x2="21" y2="6"/><line x1="10" y1="12" x2="21" y2="12"/><line x1="10" y1="18" x2="21" y2="18"/><path d="M4 6h1v4"/><path d="M4 10h2"/><path d="M6 18H4c0-1 2-2 2-3s-1-1.5-2-1"/></svg>
|
|---|
| 98 | </button>
|
|---|
| 99 | <button type="button" data-cmd="formatBlock" data-arg="blockquote" title="Quote" aria-label="Quote">
|
|---|
| 100 | <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 21c3 0 7-1 7-8V5c0-1.25-.75-2-2-2H4c-1.25 0-2 .75-2 2v6c0 1.25.75 2 2 2h2.5C6 17.5 4 19 3 19v2z"/><path d="M14 21c3 0 7-1 7-8V5c0-1.25-.75-2-2-2h-4c-1.25 0-2 .75-2 2v6c0 1.25.75 2 2 2h2.5c-.5 4.5-2.5 6-3.5 6v2z"/></svg>
|
|---|
| 101 | </button>
|
|---|
| 102 | <button type="button" data-cmd="link-prompt" title="Link (Ctrl+K)" aria-label="Link">
|
|---|
| 103 | <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"/><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"/></svg>
|
|---|
| 104 | </button>
|
|---|
| 105 | <button type="button" data-cmd="code-wrap" title="Code (inline)" aria-label="Code">
|
|---|
| 106 | <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="16 18 22 12 16 6"/><polyline points="8 6 2 12 8 18"/></svg>
|
|---|
| 107 | </button>
|
|---|
| 108 | <span class="pe-toolbar-sep" aria-hidden="true"></span>
|
|---|
| 109 | <button type="button" id="insert-image-btn" title="Afbeelding invoegen" aria-label="Afbeelding">
|
|---|
| 110 | <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="3" width="18" height="18" rx="2"/><circle cx="8.5" cy="8.5" r="1.5"/><path d="M21 15l-5-5L5 21"/></svg>
|
|---|
| 111 | </button>
|
|---|
| 112 | <button type="button" id="insert-track-btn" title="Track invoegen" aria-label="Track">
|
|---|
| 113 | <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M9 18V5l12-2v13"/><circle cx="6" cy="18" r="3"/><circle cx="18" cy="16" r="3"/></svg>
|
|---|
| 114 | </button>
|
|---|
| 115 | <button type="button" id="insert-playlist-btn" title="Playlist invoegen" aria-label="Playlist">
|
|---|
| 116 | <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><line x1="8" y1="6" x2="21" y2="6"/><line x1="8" y1="12" x2="21" y2="12"/><line x1="8" y1="18" x2="15" y2="18"/><polygon points="3 5 3 13 9 9"/></svg>
|
|---|
| 117 | </button>
|
|---|
| 118 | <button type="button" id="insert-embed-btn" title="Embed (YouTube, Spotify, SoundCloud, Vimeo…)" aria-label="Media embedden">
|
|---|
| 119 | <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="2" y="4" width="20" height="16" rx="2"/><polygon points="10 9 15.5 12 10 15"/></svg>
|
|---|
| 120 | </button>
|
|---|
| 121 | <span class="pe-toolbar-spacer"></span>
|
|---|
| 122 | <button type="button" data-cmd="removeFormat" title="Wis opmaak" aria-label="Wis opmaak">
|
|---|
| 123 | <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 7V4h16v3"/><path d="M9 20h6"/><path d="M5 5l14 14" stroke-linecap="round"/></svg>
|
|---|
| 124 | </button>
|
|---|
| 125 | <button type="button" id="pe-fullscreen-btn" title="Volledig scherm" aria-label="Volledig scherm" aria-pressed="false">
|
|---|
| 126 | <svg class="fs-icon-expand" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="15 3 21 3 21 9"/><polyline points="9 21 3 21 3 15"/><line x1="21" y1="3" x2="14" y2="10"/><line x1="3" y1="21" x2="10" y2="14"/></svg>
|
|---|
| 127 | <svg class="fs-icon-compress" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="4 14 10 14 10 20"/><polyline points="20 10 14 10 14 4"/><line x1="14" y1="10" x2="21" y2="3"/><line x1="3" y1="21" x2="10" y2="14"/></svg>
|
|---|
| 128 | </button>
|
|---|
| 129 | </div>
|
|---|
| 130 |
|
|---|
| 131 | <div id="content-editor"
|
|---|
| 132 | class="pe-editor"
|
|---|
| 133 | contenteditable="true"
|
|---|
| 134 | role="textbox"
|
|---|
| 135 | aria-multiline="true"
|
|---|
| 136 | aria-label="Content"
|
|---|
| 137 | data-placeholder="Begin met schrijven…"></div>
|
|---|
| 138 |
|
|---|
| 139 | <%# Sticky "tik om te bewerken"-hint (alleen zichtbaar op touch + niet-fullscreen
|
|---|
| 140 | via CSS). Puur visueel (pointer-events:none); de tik op het veld opent fullscreen. %>
|
|---|
| 141 | <div class="pe-edit-hint" aria-hidden="true">✎ Tik om te bewerken</div>
|
|---|
| 142 |
|
|---|
| 143 | <%# Hidden field is what actually submits to the server. The visible
|
|---|
| 144 | contenteditable's serialized HTML is copied here on submit. %>
|
|---|
| 145 | <input type="hidden" name="content" id="content-hidden" value="">
|
|---|
| 146 |
|
|---|
| 147 | <%# Initial content is injected as a JSON string in a script tag so we
|
|---|
| 148 | can set innerHTML safely from JS. EJS-escaping HTML directly into
|
|---|
| 149 | the editor would render entity-escaped tags as text. %>
|
|---|
| 150 | <script id="initial-content" type="application/json"><%- JSON.stringify(post.content || '').replace(/</g, '\\u003c') %></script>
|
|---|
| 151 |
|
|---|
| 152 | <div class="pe-editor-status">
|
|---|
| 153 | <small id="content-upload-status" class="pe-status"></small>
|
|---|
| 154 | <span class="pe-char-count"><span id="char-count">0</span> tekens</span>
|
|---|
| 155 | </div>
|
|---|
| 156 |
|
|---|
| 157 | <input type="file" id="content-upload-field" accept="image/jpeg,image/png,image/webp,image/gif" hidden>
|
|---|
| 158 | </div>
|
|---|
| 159 | </section>
|
|---|
| 160 |
|
|---|
| 161 | <%# ── META ─────────────────────────────────────────────────── %>
|
|---|
| 162 | <section class="pe-card">
|
|---|
| 163 | <div class="pe-section-title">Publicatie</div>
|
|---|
| 164 | <div class="pe-row pe-row-2">
|
|---|
| 165 | <label class="pe-field">
|
|---|
| 166 | <span>Status</span>
|
|---|
| 167 | <% var _st = isNew ? 'published' : (post.status || 'draft'); %>
|
|---|
| 168 | <select name="status">
|
|---|
| 169 | <option value="published" <%= _st === 'published' ? 'selected' : '' %>>Gepubliceerd</option>
|
|---|
| 170 | <option value="draft" <%= _st === 'draft' ? 'selected' : '' %>>Concept</option>
|
|---|
| 171 | <option value="archived" <%= _st === 'archived' ? 'selected' : '' %>>Gearchiveerd</option>
|
|---|
| 172 | </select>
|
|---|
| 173 | </label>
|
|---|
| 174 | <label class="pe-field">
|
|---|
| 175 | <span>Type</span>
|
|---|
| 176 | <select name="type">
|
|---|
| 177 | <% var ptype = post.type || 'post'; %>
|
|---|
| 178 | <option value="post" <%= ptype === 'post' ? 'selected' : '' %>>Post</option>
|
|---|
| 179 | <option value="foto" <%= ptype === 'foto' ? 'selected' : '' %>>Foto</option>
|
|---|
| 180 | <option value="video" <%= ptype === 'video' ? 'selected' : '' %>>Video</option>
|
|---|
| 181 | <option value="audio" <%= ptype === 'audio' ? 'selected' : '' %>>Audio</option>
|
|---|
| 182 | </select>
|
|---|
| 183 | </label>
|
|---|
| 184 | </div>
|
|---|
| 185 | <div class="pe-checkboxes">
|
|---|
| 186 | <div class="pe-pin">
|
|---|
| 187 | <label class="pe-checkbox">
|
|---|
| 188 | <input type="checkbox" id="pin-toggle" <%= (Number(post.pinned) > 0) ? 'checked' : '' %>>
|
|---|
| 189 | <span>📌 Vastpinnen bovenaan</span>
|
|---|
| 190 | </label>
|
|---|
| 191 | <input type="hidden" name="pinned" id="pin-rank" value="<%= post.pinned || 0 %>">
|
|---|
| 192 | <div class="pe-pin-pos" id="pin-pos" <%= (Number(post.pinned) > 0) ? '' : 'hidden' %>>
|
|---|
| 193 | <span class="pe-pin-steps">
|
|---|
| 194 | <button type="button" class="pe-pin-btn" id="pin-up" aria-label="Hoger zetten">▲</button>
|
|---|
| 195 | <button type="button" class="pe-pin-btn" id="pin-down" aria-label="Lager zetten">▼</button>
|
|---|
| 196 | </span>
|
|---|
| 197 | <span class="pe-pin-label" id="pin-label"></span>
|
|---|
| 198 | </div>
|
|---|
| 199 | </div>
|
|---|
| 200 | <label class="pe-checkbox">
|
|---|
| 201 | <input type="checkbox" name="noindex" value="1" <%= post.noindex ? 'checked' : '' %>>
|
|---|
| 202 | <span>🚫 noindex (verberg voor zoekmachines)</span>
|
|---|
| 203 | </label>
|
|---|
| 204 | <% if (typeof premiumUnlocked === 'undefined' || premiumUnlocked) { %>
|
|---|
| 205 | <label class="pe-checkbox">
|
|---|
| 206 | <input type="checkbox" name="fan_only" value="1" <%= post.fan_only ? 'checked' : '' %>>
|
|---|
| 207 | <span>🔒 Alleen voor ingelogde fans</span>
|
|---|
| 208 | </label>
|
|---|
| 209 | <div style="margin-top:8px">
|
|---|
| 210 | <label style="display:block;font-size:12.5px;opacity:.8;margin-bottom:4px">📅 Publiceren op (laat leeg = direct)</label>
|
|---|
| 211 | <input type="datetime-local" name="publish_at" value="<%= post.publish_at ? String(post.publish_at).replace(' ','T').slice(0,16) : '' %>" style="padding:8px 10px;border-radius:8px;border:1px solid var(--rule,rgba(128,128,128,.4));background:transparent;color:inherit">
|
|---|
| 212 | <% if (post.status === 'scheduled' && post.publish_at) { %><div style="font-size:12px;opacity:.7;margin-top:4px">⏳ Ingepland voor <%= post.publish_at %></div><% } %>
|
|---|
| 213 | </div>
|
|---|
| 214 | <% } %>
|
|---|
| 215 | </div>
|
|---|
| 216 | </section>
|
|---|
| 217 |
|
|---|
| 218 | <%# ── ACTIONS (sticky at bottom) ──────────────────────────── %>
|
|---|
| 219 | <div class="pe-actions">
|
|---|
| 220 | <a href="<%= _base %><%= isNew ? '/' : '/' + post.slug %>" class="pe-btn">Annuleren</a>
|
|---|
| 221 | <div class="pe-actions-spacer"></div>
|
|---|
| 222 | <% if (!isNew && post.status !== 'published') { %>
|
|---|
| 223 | <button type="submit" name="action" value="publish" class="pe-btn pe-btn-success">📤 Publish</button>
|
|---|
| 224 | <% } %>
|
|---|
| 225 | <button type="submit" class="pe-btn pe-btn-primary">💾 Opslaan</button>
|
|---|
| 226 | </div>
|
|---|
| 227 | </form>
|
|---|
| 228 | </div>
|
|---|
| 229 |
|
|---|
| 230 | <style>
|
|---|
| 231 | /* ─── Page wrapper ──────────────────────────────────────────────── */
|
|---|
| 232 | .post-edit-page {
|
|---|
| 233 | max-width: 880px;
|
|---|
| 234 | margin: 1.5rem auto 6rem; /* extra bottom for sticky-actions clearance */
|
|---|
| 235 | padding: 0 1rem;
|
|---|
| 236 | }
|
|---|
| 237 | .post-edit-page h1 {
|
|---|
| 238 | font-family: var(--font-display, serif);
|
|---|
| 239 | margin: 0 0 1.25rem;
|
|---|
| 240 | font-size: 1.75rem;
|
|---|
| 241 | }
|
|---|
| 242 |
|
|---|
| 243 | .post-edit-form {
|
|---|
| 244 | display: flex; flex-direction: column;
|
|---|
| 245 | gap: 1rem;
|
|---|
| 246 | }
|
|---|
| 247 |
|
|---|
| 248 | /* ─── Card sections ─────────────────────────────────────────────── */
|
|---|
| 249 | .pe-card {
|
|---|
| 250 | background: var(--paper);
|
|---|
| 251 | border: 1px solid var(--rule);
|
|---|
| 252 | border-radius: 12px;
|
|---|
| 253 | padding: 1.25rem;
|
|---|
| 254 | display: flex; flex-direction: column;
|
|---|
| 255 | gap: 0.85rem;
|
|---|
| 256 | }
|
|---|
| 257 | .pe-card-content { padding-bottom: 0; overflow: hidden; } /* editor flush to bottom */
|
|---|
| 258 | .pe-section-title {
|
|---|
| 259 | font-size: 0.8rem;
|
|---|
| 260 | font-weight: 600;
|
|---|
| 261 | text-transform: uppercase;
|
|---|
| 262 | letter-spacing: 0.05em;
|
|---|
| 263 | color: var(--ink-soft);
|
|---|
| 264 | display: flex; align-items: baseline; gap: 0.5rem;
|
|---|
| 265 | flex-wrap: wrap;
|
|---|
| 266 | }
|
|---|
| 267 | .pe-section-title small {
|
|---|
| 268 | font-size: 0.75rem; font-weight: 400;
|
|---|
| 269 | letter-spacing: 0; text-transform: none;
|
|---|
| 270 | color: var(--ink-muted, var(--ink-soft));
|
|---|
| 271 | }
|
|---|
| 272 |
|
|---|
| 273 | /* ─── Field primitives ──────────────────────────────────────────── */
|
|---|
| 274 | .pe-field {
|
|---|
| 275 | display: flex; flex-direction: column;
|
|---|
| 276 | gap: 0.35rem;
|
|---|
| 277 | min-width: 0; /* allow grid items to shrink */
|
|---|
| 278 | }
|
|---|
| 279 | .pe-field > span {
|
|---|
| 280 | font-size: 0.8rem;
|
|---|
| 281 | font-weight: 600;
|
|---|
| 282 | color: var(--ink-soft);
|
|---|
| 283 | display: flex; align-items: baseline; gap: 0.4rem;
|
|---|
| 284 | }
|
|---|
| 285 | .pe-field > span small {
|
|---|
| 286 | font-weight: 400; color: var(--ink-muted);
|
|---|
| 287 | }
|
|---|
| 288 | .pe-field input,
|
|---|
| 289 | .pe-field textarea,
|
|---|
| 290 | .pe-field select {
|
|---|
| 291 | width: 100%;
|
|---|
| 292 | box-sizing: border-box;
|
|---|
| 293 | display: block;
|
|---|
| 294 | padding: 0.6rem 0.75rem;
|
|---|
| 295 | border: 1px solid var(--rule);
|
|---|
| 296 | border-radius: 6px;
|
|---|
| 297 | background: var(--paper-2);
|
|---|
| 298 | color: var(--ink);
|
|---|
| 299 | font-family: var(--font-ui, system-ui), sans-serif;
|
|---|
| 300 | font-size: 0.95rem;
|
|---|
| 301 | -webkit-appearance: none;
|
|---|
| 302 | appearance: none;
|
|---|
| 303 | transition: border-color 120ms;
|
|---|
| 304 | }
|
|---|
| 305 | .pe-field input:focus,
|
|---|
| 306 | .pe-field textarea:focus,
|
|---|
| 307 | .pe-field select:focus {
|
|---|
| 308 | outline: 2px solid var(--accent);
|
|---|
| 309 | outline-offset: -1px;
|
|---|
| 310 | border-color: var(--accent);
|
|---|
| 311 | }
|
|---|
| 312 | .pe-field textarea {
|
|---|
| 313 | font-family: var(--font-mono, monospace);
|
|---|
| 314 | resize: vertical;
|
|---|
| 315 | }
|
|---|
| 316 | .pe-field select {
|
|---|
| 317 | /* Restore the dropdown arrow we removed with appearance:none */
|
|---|
| 318 | background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
|
|---|
| 319 | background-repeat: no-repeat;
|
|---|
| 320 | background-position: right 0.75rem center;
|
|---|
| 321 | padding-right: 2rem;
|
|---|
| 322 | }
|
|---|
| 323 |
|
|---|
| 324 | .pe-row {
|
|---|
| 325 | display: grid;
|
|---|
| 326 | gap: 0.75rem;
|
|---|
| 327 | }
|
|---|
| 328 | .pe-row-2 { grid-template-columns: 1fr 1fr; }
|
|---|
| 329 | @media (max-width: 600px) {
|
|---|
| 330 | .pe-row-2 { grid-template-columns: 1fr; }
|
|---|
| 331 | }
|
|---|
| 332 |
|
|---|
| 333 | /* ─── Cover field ───────────────────────────────────────────────── */
|
|---|
| 334 | .pe-cover-row {
|
|---|
| 335 | display: grid;
|
|---|
| 336 | grid-template-columns: 120px 1fr;
|
|---|
| 337 | gap: 1rem;
|
|---|
| 338 | align-items: start;
|
|---|
| 339 | }
|
|---|
| 340 | .pe-cover-thumb {
|
|---|
| 341 | width: 120px; height: 120px;
|
|---|
| 342 | border-radius: 10px;
|
|---|
| 343 | overflow: hidden;
|
|---|
| 344 | background: var(--paper-2);
|
|---|
| 345 | border: 1px solid var(--rule);
|
|---|
| 346 | display: flex; align-items: center; justify-content: center;
|
|---|
| 347 | position: relative;
|
|---|
| 348 | }
|
|---|
| 349 | .pe-cover-thumb[data-empty] {
|
|---|
| 350 | border-style: dashed;
|
|---|
| 351 | }
|
|---|
| 352 | .pe-cover-thumb img {
|
|---|
| 353 | width: 100%; height: 100%;
|
|---|
| 354 | object-fit: cover; display: block;
|
|---|
| 355 | }
|
|---|
| 356 | /* Honor HTML hidden — our display:block above otherwise renders an empty
|
|---|
| 357 | broken-image icon when no cover is set. */
|
|---|
| 358 | .pe-cover-thumb img[hidden] { display: none; }
|
|---|
| 359 | .pe-cover-empty {
|
|---|
| 360 | font-size: 2rem;
|
|---|
| 361 | color: var(--ink-muted, var(--ink-soft));
|
|---|
| 362 | opacity: 0.5;
|
|---|
| 363 | }
|
|---|
| 364 | .pe-cover-actions {
|
|---|
| 365 | display: flex; flex-direction: column;
|
|---|
| 366 | gap: 0.6rem;
|
|---|
| 367 | min-width: 0;
|
|---|
| 368 | }
|
|---|
| 369 | .pe-cover-upload {
|
|---|
| 370 | display: flex; align-items: center; gap: 0.6rem;
|
|---|
| 371 | flex-wrap: wrap;
|
|---|
| 372 | }
|
|---|
| 373 | @media (max-width: 600px) {
|
|---|
| 374 | .pe-cover-row { grid-template-columns: 88px 1fr; }
|
|---|
| 375 | .pe-cover-thumb { width: 88px; height: 88px; }
|
|---|
| 376 | }
|
|---|
| 377 |
|
|---|
| 378 | /* ─── Editor frame (WYSIWYG: top toolbar, contenteditable body, status bar) ─── */
|
|---|
| 379 | .pe-editor-frame {
|
|---|
| 380 | margin: 0 -1.25rem -1.25rem; /* break out of card padding for flush edges */
|
|---|
| 381 | border-top: 1px solid var(--rule);
|
|---|
| 382 | background: var(--paper);
|
|---|
| 383 | display: flex; flex-direction: column;
|
|---|
| 384 | }
|
|---|
| 385 |
|
|---|
| 386 | /* Top toolbar — sticks to the top of the viewport while editing */
|
|---|
| 387 | .pe-toolbar {
|
|---|
| 388 | display: flex; align-items: center; gap: .15rem;
|
|---|
| 389 | flex-wrap: wrap;
|
|---|
| 390 | padding: .4rem .75rem;
|
|---|
| 391 | background: color-mix(in srgb, var(--paper) 92%, transparent);
|
|---|
| 392 | backdrop-filter: blur(10px);
|
|---|
| 393 | -webkit-backdrop-filter: blur(10px);
|
|---|
| 394 | border-bottom: 1px solid var(--rule);
|
|---|
| 395 | position: sticky;
|
|---|
| 396 | top: 0;
|
|---|
| 397 | z-index: 10;
|
|---|
| 398 | }
|
|---|
| 399 | .pe-toolbar button {
|
|---|
| 400 | display: inline-flex; align-items: center; justify-content: center;
|
|---|
| 401 | width: 32px; height: 32px;
|
|---|
| 402 | padding: 0;
|
|---|
| 403 | touch-action: manipulation; /* snappy taps op mobiel, geen dubbeltik-zoom */
|
|---|
| 404 | -webkit-user-select: none; user-select: none;
|
|---|
| 405 | background: transparent;
|
|---|
| 406 | border: 1px solid transparent;
|
|---|
| 407 | border-radius: 6px;
|
|---|
| 408 | color: var(--ink);
|
|---|
| 409 | cursor: pointer;
|
|---|
| 410 | font-family: var(--font-ui, system-ui), sans-serif;
|
|---|
| 411 | font-weight: 600; font-size: .85rem;
|
|---|
| 412 | transition: background var(--transition), color var(--transition), border-color var(--transition);
|
|---|
| 413 | -webkit-tap-highlight-color: transparent;
|
|---|
| 414 | }
|
|---|
| 415 | /* Hover alleen op echte hover-apparaten — op touch blijft :hover anders "plakken"
|
|---|
| 416 | na een tik, waardoor de actief/inactief-staat onleesbaar wordt. */
|
|---|
| 417 | @media (hover: hover) {
|
|---|
| 418 | .pe-toolbar button:hover {
|
|---|
| 419 | background: var(--paper-2);
|
|---|
| 420 | color: var(--accent);
|
|---|
| 421 | }
|
|---|
| 422 | }
|
|---|
| 423 | .pe-toolbar button:active { transform: scale(.94); }
|
|---|
| 424 | /* Actieve opmaak = onmiskenbaar gevuld met de accentkleur. Zo is op mobiel
|
|---|
| 425 | meteen duidelijk dat bv. vet AAN staat (tik nogmaals = uit). */
|
|---|
| 426 | .pe-toolbar button.is-active {
|
|---|
| 427 | background: var(--accent);
|
|---|
| 428 | color: #fff;
|
|---|
| 429 | border-color: var(--accent);
|
|---|
| 430 | }
|
|---|
| 431 | .pe-toolbar button.is-active svg { color: #fff; }
|
|---|
| 432 | .pe-toolbar button svg { width: 16px; height: 16px; }
|
|---|
| 433 | .pe-toolbar button.pe-tb-text { font-family: var(--font-display, serif); font-weight: 700; }
|
|---|
| 434 | .pe-toolbar-sep {
|
|---|
| 435 | width: 1px; height: 18px;
|
|---|
| 436 | background: var(--rule);
|
|---|
| 437 | margin: 0 .35rem;
|
|---|
| 438 | flex-shrink: 0;
|
|---|
| 439 | }
|
|---|
| 440 | .pe-toolbar-spacer { flex: 1; }
|
|---|
| 441 |
|
|---|
| 442 | /* ─── Volledig-scherm schrijfmodus ─── */
|
|---|
| 443 | .fs-icon-compress { display: none; }
|
|---|
| 444 | .pe-editor-frame.pe-fs .fs-icon-expand { display: none; }
|
|---|
| 445 | .pe-editor-frame.pe-fs .fs-icon-compress { display: inline; }
|
|---|
| 446 | .pe-editor-frame.pe-fs {
|
|---|
| 447 | position: fixed; inset: 0; z-index: 1000;
|
|---|
| 448 | margin: 0; border-top: 0;
|
|---|
| 449 | height: 100dvh;
|
|---|
| 450 | background: var(--paper);
|
|---|
| 451 | overflow: hidden; /* alléén het tekstveld scrollt, niet het frame zelf */
|
|---|
| 452 | }
|
|---|
| 453 | /* In fullscreen vult het schrijfveld de resterende ruimte en scrollt het zelf
|
|---|
| 454 | (max-height: none overschrijft de mobiele box-begrenzing hieronder). */
|
|---|
| 455 | .pe-editor-frame.pe-fs .pe-editor {
|
|---|
| 456 | flex: 1 1 auto; min-height: 0; height: auto; max-height: none;
|
|---|
| 457 | }
|
|---|
| 458 | /* NB: bewust GEEN overflow:hidden op html/body in fullscreen — dat kon blijven
|
|---|
| 459 | hangen (bv. fullscreen verlaten via navigatie) en blokkeerde dan het scrollen van
|
|---|
| 460 | de hele pagina. Het fullscreen-frame (position:fixed, inset:0) dekt de pagina al
|
|---|
| 461 | af, en op touch zijn de scrollbalken verborgen → geen dubbele balk nodig. */
|
|---|
| 462 |
|
|---|
| 463 | /* Editor body — looks like prose, behaves like a textarea */
|
|---|
| 464 | .pe-editor {
|
|---|
| 465 | width: 100%;
|
|---|
| 466 | box-sizing: border-box;
|
|---|
| 467 | min-height: 420px;
|
|---|
| 468 | padding: 1.25rem 1.5rem;
|
|---|
| 469 | border: 0;
|
|---|
| 470 | background: transparent;
|
|---|
| 471 | color: var(--ink);
|
|---|
| 472 | font-family: var(--font-body, system-ui), serif;
|
|---|
| 473 | font-size: 1.0625rem;
|
|---|
| 474 | line-height: 1.65;
|
|---|
| 475 | outline: none;
|
|---|
| 476 | overflow-y: auto;
|
|---|
| 477 | }
|
|---|
| 478 | .pe-editor:focus { outline: none; }
|
|---|
| 479 | /* Inline (niet-fullscreen) groeit het schrijfveld gewoon mee met de inhoud — geen
|
|---|
| 480 | interne scroll-box (scroll-binnen-scroll is verwarrend). Op mobiel/tablet gaat
|
|---|
| 481 | typen sowieso fullscreen (zie JS), waar het veld de pagina vult en als enige
|
|---|
| 482 | scrollt. */
|
|---|
| 483 | .pe-editor-frame:not(.pe-fs) .pe-editor { overflow: visible; }
|
|---|
| 484 |
|
|---|
| 485 | /* Touch: het inline content-veld is geen tekstveld maar een tap-vlak → fullscreen
|
|---|
| 486 | bewerken. Een "✎ Tik om te bewerken"-pill plakt sticky onderaan de container,
|
|---|
| 487 | zodat de hint altijd in beeld is zonder midden in de tekst te staan. */
|
|---|
| 488 | .pe-editor.pe-tap-to-edit { cursor: pointer; }
|
|---|
| 489 | .pe-edit-hint { display: none; }
|
|---|
| 490 | @media (pointer: coarse) {
|
|---|
| 491 | .pe-editor-frame:not(.pe-fs) .pe-edit-hint {
|
|---|
| 492 | display: block;
|
|---|
| 493 | position: sticky;
|
|---|
| 494 | bottom: 4.5rem; /* boven de sticky Opslaan/Annuleren-balk */
|
|---|
| 495 | width: max-content;
|
|---|
| 496 | max-width: calc(100% - 2rem);
|
|---|
| 497 | margin: .4rem auto;
|
|---|
| 498 | background: var(--accent); color: #fff;
|
|---|
| 499 | font-size: .9rem; font-weight: 700; padding: .5rem 1.1rem; border-radius: 999px;
|
|---|
| 500 | box-shadow: 0 4px 14px rgba(0,0,0,.35);
|
|---|
| 501 | pointer-events: none; text-align: center; white-space: nowrap;
|
|---|
| 502 | }
|
|---|
| 503 | }
|
|---|
| 504 | .pe-editor.is-dragover {
|
|---|
| 505 | outline: 2px dashed var(--accent);
|
|---|
| 506 | outline-offset: -10px;
|
|---|
| 507 | }
|
|---|
| 508 | .pe-editor[data-placeholder]:empty::before,
|
|---|
| 509 | .pe-editor[data-placeholder]:has(br:only-child)::before {
|
|---|
| 510 | content: attr(data-placeholder);
|
|---|
| 511 | color: var(--ink-muted, #999);
|
|---|
| 512 | pointer-events: none;
|
|---|
| 513 | opacity: .55;
|
|---|
| 514 | }
|
|---|
| 515 | /* Inline prose styles inside the editor — match the public post styling so
|
|---|
| 516 | what you see is roughly what you'll get. Margins are tighter than on the
|
|---|
| 517 | live site since this is a confined writing space. */
|
|---|
| 518 | .pe-editor h1, .pe-editor h2, .pe-editor h3, .pe-editor h4 {
|
|---|
| 519 | font-family: var(--font-display, serif);
|
|---|
| 520 | line-height: 1.2;
|
|---|
| 521 | margin: 1.1rem 0 .35rem;
|
|---|
| 522 | }
|
|---|
| 523 | .pe-editor h1 { font-size: 1.85rem; }
|
|---|
| 524 | .pe-editor h2 { font-size: 1.45rem; }
|
|---|
| 525 | .pe-editor h3 { font-size: 1.2rem; }
|
|---|
| 526 | .pe-editor p { margin: 0 0 .85em; }
|
|---|
| 527 | .pe-editor ul, .pe-editor ol { margin: 0 0 .85em 1.4em; padding: 0; }
|
|---|
| 528 | .pe-editor li { margin: .15em 0; }
|
|---|
| 529 | .pe-editor blockquote {
|
|---|
| 530 | margin: 1em 0;
|
|---|
| 531 | padding: .15em 0 .15em 1em;
|
|---|
| 532 | border-left: 3px solid var(--accent);
|
|---|
| 533 | color: var(--ink-soft, var(--ink));
|
|---|
| 534 | font-style: italic;
|
|---|
| 535 | }
|
|---|
| 536 | .pe-editor code {
|
|---|
| 537 | background: var(--paper-2);
|
|---|
| 538 | border: 1px solid var(--rule);
|
|---|
| 539 | border-radius: 4px;
|
|---|
| 540 | padding: .1em .35em;
|
|---|
| 541 | font-family: var(--font-mono, ui-monospace, monospace);
|
|---|
| 542 | font-size: .92em;
|
|---|
| 543 | }
|
|---|
| 544 | .pe-editor a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
|
|---|
| 545 | .pe-editor img {
|
|---|
| 546 | max-width: 100%; height: auto;
|
|---|
| 547 | border-radius: 6px;
|
|---|
| 548 | display: block;
|
|---|
| 549 | margin: 1em auto;
|
|---|
| 550 | }
|
|---|
| 551 |
|
|---|
| 552 | /* Shortcode chips — visible inline placeholder in the editor for
|
|---|
| 553 | [[track:UUID]] / [[album:Name]] / [[playlist:slug]]. They serialize back
|
|---|
| 554 | to plain shortcode text on submit. */
|
|---|
| 555 | .sc-chip {
|
|---|
| 556 | display: inline-flex; align-items: center; gap: .3rem;
|
|---|
| 557 | padding: .15em .5em;
|
|---|
| 558 | margin: 0 .15em;
|
|---|
| 559 | background: color-mix(in srgb, var(--accent) 10%, var(--paper-2));
|
|---|
| 560 | border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--rule));
|
|---|
| 561 | border-radius: 999px;
|
|---|
| 562 | color: var(--accent);
|
|---|
| 563 | font-family: var(--font-ui, system-ui), sans-serif;
|
|---|
| 564 | font-size: .85em;
|
|---|
| 565 | font-weight: 600;
|
|---|
| 566 | font-style: normal;
|
|---|
| 567 | white-space: nowrap;
|
|---|
| 568 | user-select: none;
|
|---|
| 569 | cursor: default;
|
|---|
| 570 | vertical-align: baseline;
|
|---|
| 571 | }
|
|---|
| 572 | .sc-chip-icon { display: inline-flex; opacity: .8; }
|
|---|
| 573 | .sc-chip-icon svg { width: 12px; height: 12px; }
|
|---|
| 574 |
|
|---|
| 575 | /* Status bar below the editor */
|
|---|
| 576 | .pe-editor-status {
|
|---|
| 577 | display: flex; align-items: center; justify-content: space-between;
|
|---|
| 578 | gap: .75rem;
|
|---|
| 579 | padding: .45rem 1rem;
|
|---|
| 580 | border-top: 1px solid var(--rule);
|
|---|
| 581 | background: var(--paper-2);
|
|---|
| 582 | color: var(--ink-muted, var(--ink-soft));
|
|---|
| 583 | font-size: .78rem;
|
|---|
| 584 | }
|
|---|
| 585 | .pe-char-count { font-variant-numeric: tabular-nums; }
|
|---|
| 586 |
|
|---|
| 587 | /* ─── Track picker modal (P59) ─────────────────────────────────
|
|---|
| 588 | Mobile-first: full-screen bottom-sheet on phones, centered card
|
|---|
| 589 | on desktop. Lock body scroll while open via .tp-locked on body. */
|
|---|
| 590 | .tp-modal {
|
|---|
| 591 | position: fixed; inset: 0;
|
|---|
| 592 | z-index: 1000;
|
|---|
| 593 | display: flex; align-items: stretch; justify-content: center;
|
|---|
| 594 | /* Avoid the iOS home-indicator + the keyboard when search is focused */
|
|---|
| 595 | padding: env(safe-area-inset-top) 0 env(safe-area-inset-bottom);
|
|---|
| 596 | }
|
|---|
| 597 | .tp-modal[hidden] { display: none; }
|
|---|
| 598 | .tp-backdrop {
|
|---|
| 599 | position: absolute; inset: 0;
|
|---|
| 600 | background: color-mix(in srgb, var(--ink) 55%, transparent);
|
|---|
| 601 | backdrop-filter: blur(4px);
|
|---|
| 602 | -webkit-backdrop-filter: blur(4px);
|
|---|
| 603 | animation: tp-bd-in .18s ease-out;
|
|---|
| 604 | }
|
|---|
| 605 | @keyframes tp-bd-in { from { opacity: 0 } to { opacity: 1 } }
|
|---|
| 606 |
|
|---|
| 607 | /* Mobile: sheet docks to the bottom and fills viewport almost completely */
|
|---|
| 608 | .tp-sheet {
|
|---|
| 609 | position: relative;
|
|---|
| 610 | margin-top: auto;
|
|---|
| 611 | width: 100%;
|
|---|
| 612 | max-height: calc(100dvh - env(safe-area-inset-top) - 1rem);
|
|---|
| 613 | background: var(--paper);
|
|---|
| 614 | border-top: 1px solid var(--rule);
|
|---|
| 615 | border-radius: 16px 16px 0 0;
|
|---|
| 616 | box-shadow:
|
|---|
| 617 | 0 -2px 8px color-mix(in srgb, var(--ink) 8%, transparent),
|
|---|
| 618 | 0 -16px 48px color-mix(in srgb, var(--ink) 18%, transparent);
|
|---|
| 619 | display: flex; flex-direction: column;
|
|---|
| 620 | animation: tp-sheet-up .22s cubic-bezier(.2, .8, .25, 1);
|
|---|
| 621 | overflow: hidden;
|
|---|
| 622 | }
|
|---|
| 623 | @keyframes tp-sheet-up {
|
|---|
| 624 | from { transform: translateY(100%); opacity: .8; }
|
|---|
| 625 | to { transform: translateY(0); opacity: 1; }
|
|---|
| 626 | }
|
|---|
| 627 |
|
|---|
| 628 | /* Header — title + close, with a small grab-handle bar on mobile */
|
|---|
| 629 | .tp-header {
|
|---|
| 630 | display: flex; align-items: center; justify-content: space-between;
|
|---|
| 631 | gap: .75rem;
|
|---|
| 632 | padding: .85rem 1rem .65rem;
|
|---|
| 633 | border-bottom: 1px solid var(--rule);
|
|---|
| 634 | position: relative;
|
|---|
| 635 | }
|
|---|
| 636 | .tp-header::before {
|
|---|
| 637 | /* Grab-handle: visible on mobile only */
|
|---|
| 638 | content: '';
|
|---|
| 639 | position: absolute;
|
|---|
| 640 | top: .35rem; left: 50%;
|
|---|
| 641 | transform: translateX(-50%);
|
|---|
| 642 | width: 38px; height: 4px;
|
|---|
| 643 | background: var(--rule-2, var(--rule));
|
|---|
| 644 | border-radius: 2px;
|
|---|
| 645 | }
|
|---|
| 646 | .tp-h2 {
|
|---|
| 647 | margin: .35rem 0 0;
|
|---|
| 648 | font-family: var(--font-display, serif);
|
|---|
| 649 | font-size: 1.15rem; font-weight: 600;
|
|---|
| 650 | color: var(--ink);
|
|---|
| 651 | line-height: 1.1;
|
|---|
| 652 | }
|
|---|
| 653 | .tp-close {
|
|---|
| 654 | width: 32px; height: 32px; border-radius: 8px;
|
|---|
| 655 | display: inline-flex; align-items: center; justify-content: center;
|
|---|
| 656 | background: transparent; border: 1px solid transparent;
|
|---|
| 657 | color: var(--ink-muted, var(--ink-soft));
|
|---|
| 658 | cursor: pointer;
|
|---|
| 659 | transition: background var(--transition), color var(--transition), border-color var(--transition);
|
|---|
| 660 | -webkit-tap-highlight-color: transparent;
|
|---|
| 661 | margin-top: .35rem;
|
|---|
| 662 | }
|
|---|
| 663 | .tp-close:hover, .tp-close:focus-visible {
|
|---|
| 664 | background: var(--paper-2);
|
|---|
| 665 | color: var(--ink);
|
|---|
| 666 | outline: none;
|
|---|
| 667 | }
|
|---|
| 668 | .tp-close svg { width: 18px; height: 18px; }
|
|---|
| 669 |
|
|---|
| 670 | /* Search row — sticky just below header so list scrolls underneath */
|
|---|
| 671 | .tp-search-row {
|
|---|
| 672 | position: relative;
|
|---|
| 673 | padding: .65rem 1rem;
|
|---|
| 674 | border-bottom: 1px solid var(--rule);
|
|---|
| 675 | background: var(--paper);
|
|---|
| 676 | }
|
|---|
| 677 | .tp-search-icon {
|
|---|
| 678 | position: absolute;
|
|---|
| 679 | top: 50%; left: 1.65rem;
|
|---|
| 680 | transform: translateY(-50%);
|
|---|
| 681 | color: var(--ink-muted, var(--ink-soft));
|
|---|
| 682 | pointer-events: none;
|
|---|
| 683 | display: inline-flex;
|
|---|
| 684 | }
|
|---|
| 685 | .tp-search-icon svg { width: 16px; height: 16px; }
|
|---|
| 686 | .tp-search {
|
|---|
| 687 | width: 100%; box-sizing: border-box;
|
|---|
| 688 | padding: .65rem .85rem .65rem 2.4rem;
|
|---|
| 689 | font-family: var(--font-ui, system-ui), sans-serif;
|
|---|
| 690 | font-size: 1rem;
|
|---|
| 691 | background: var(--paper-2);
|
|---|
| 692 | color: var(--ink);
|
|---|
| 693 | border: 1px solid var(--rule);
|
|---|
| 694 | border-radius: 9px;
|
|---|
| 695 | -webkit-appearance: none;
|
|---|
| 696 | appearance: none;
|
|---|
| 697 | }
|
|---|
| 698 | .tp-search:focus {
|
|---|
| 699 | outline: none;
|
|---|
| 700 | border-color: var(--accent);
|
|---|
| 701 | box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
|
|---|
| 702 | }
|
|---|
| 703 |
|
|---|
| 704 | /* List — vertically scrollable, takes remaining sheet height */
|
|---|
| 705 | .tp-list {
|
|---|
| 706 | flex: 1 1 auto;
|
|---|
| 707 | overflow-y: auto;
|
|---|
| 708 | -webkit-overflow-scrolling: touch;
|
|---|
| 709 | padding: .35rem .35rem 1rem;
|
|---|
| 710 | }
|
|---|
| 711 | .tp-empty {
|
|---|
| 712 | padding: 1.5rem 1rem;
|
|---|
| 713 | text-align: center;
|
|---|
| 714 | color: var(--ink-muted, var(--ink-soft));
|
|---|
| 715 | font-size: .9rem;
|
|---|
| 716 | }
|
|---|
| 717 |
|
|---|
| 718 | /* Track row — tap target ≥ 56px for mobile */
|
|---|
| 719 | .tp-row {
|
|---|
| 720 | display: grid;
|
|---|
| 721 | grid-template-columns: 44px 1fr auto;
|
|---|
| 722 | align-items: center;
|
|---|
| 723 | gap: .75rem;
|
|---|
| 724 | width: 100%;
|
|---|
| 725 | padding: .55rem .65rem;
|
|---|
| 726 | border: 0; background: transparent;
|
|---|
| 727 | border-radius: 10px;
|
|---|
| 728 | text-align: left;
|
|---|
| 729 | cursor: pointer;
|
|---|
| 730 | color: inherit;
|
|---|
| 731 | font: inherit;
|
|---|
| 732 | transition: background var(--transition);
|
|---|
| 733 | -webkit-tap-highlight-color: transparent;
|
|---|
| 734 | }
|
|---|
| 735 | .tp-row:hover, .tp-row:focus-visible {
|
|---|
| 736 | background: color-mix(in srgb, var(--accent) 8%, var(--paper-2));
|
|---|
| 737 | outline: none;
|
|---|
| 738 | }
|
|---|
| 739 | .tp-row:active { transform: scale(.98); }
|
|---|
| 740 | .tp-row[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }
|
|---|
| 741 |
|
|---|
| 742 | .tp-cover {
|
|---|
| 743 | width: 44px; height: 44px;
|
|---|
| 744 | border-radius: 6px;
|
|---|
| 745 | background-size: cover; background-position: center;
|
|---|
| 746 | background-color: var(--rule);
|
|---|
| 747 | display: inline-flex; align-items: center; justify-content: center;
|
|---|
| 748 | flex-shrink: 0;
|
|---|
| 749 | }
|
|---|
| 750 | .tp-cover-empty {
|
|---|
| 751 | background: linear-gradient(135deg,
|
|---|
| 752 | color-mix(in srgb, var(--accent) 30%, var(--paper-2)),
|
|---|
| 753 | color-mix(in srgb, var(--accent) 8%, var(--paper-2)));
|
|---|
| 754 | color: var(--accent);
|
|---|
| 755 | }
|
|---|
| 756 | .tp-cover-empty svg { width: 18px; height: 18px; opacity: .8; }
|
|---|
| 757 |
|
|---|
| 758 | .tp-meta {
|
|---|
| 759 | display: flex; flex-direction: column;
|
|---|
| 760 | min-width: 0;
|
|---|
| 761 | line-height: 1.25;
|
|---|
| 762 | }
|
|---|
| 763 | .tp-row-title {
|
|---|
| 764 | font-weight: 600; font-size: .94rem;
|
|---|
| 765 | color: var(--ink);
|
|---|
| 766 | white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
|
|---|
| 767 | }
|
|---|
| 768 | .tp-row-artist {
|
|---|
| 769 | font-size: .8rem;
|
|---|
| 770 | color: var(--ink-muted, var(--ink-soft));
|
|---|
| 771 | white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
|
|---|
| 772 | margin-top: .1rem;
|
|---|
| 773 | }
|
|---|
| 774 | .tp-duration {
|
|---|
| 775 | font-variant-numeric: tabular-nums;
|
|---|
| 776 | font-size: .8rem;
|
|---|
| 777 | color: var(--ink-muted, var(--ink-soft));
|
|---|
| 778 | flex-shrink: 0;
|
|---|
| 779 | }
|
|---|
| 780 |
|
|---|
| 781 | /* Body lock when modal open */
|
|---|
| 782 | body.tp-locked { overflow: hidden; touch-action: none; }
|
|---|
| 783 |
|
|---|
| 784 | /* Desktop: centered card, max-width ~520px */
|
|---|
| 785 | @media (min-width: 640px) {
|
|---|
| 786 | .tp-modal {
|
|---|
| 787 | align-items: center;
|
|---|
| 788 | padding: 1.5rem;
|
|---|
| 789 | }
|
|---|
| 790 | .tp-sheet {
|
|---|
| 791 | margin-top: 0;
|
|---|
| 792 | width: 100%;
|
|---|
| 793 | max-width: 520px;
|
|---|
| 794 | max-height: 80dvh;
|
|---|
| 795 | border-radius: 14px;
|
|---|
| 796 | border: 1px solid var(--rule);
|
|---|
| 797 | animation: tp-sheet-pop .2s cubic-bezier(.2, .8, .25, 1);
|
|---|
| 798 | }
|
|---|
| 799 | .tp-header::before { display: none; } /* hide grab-handle on desktop */
|
|---|
| 800 | .tp-header { padding: 1rem 1.25rem .75rem; }
|
|---|
| 801 | .tp-h2 { margin-top: 0; font-size: 1.25rem; }
|
|---|
| 802 | .tp-close { margin-top: 0; }
|
|---|
| 803 | @keyframes tp-sheet-pop {
|
|---|
| 804 | from { transform: translateY(-8px) scale(.97); opacity: 0; }
|
|---|
| 805 | to { transform: translateY(0) scale(1); opacity: 1; }
|
|---|
| 806 | }
|
|---|
| 807 | }
|
|---|
| 808 |
|
|---|
| 809 | /* ─── Buttons ───────────────────────────────────────────────────── */
|
|---|
| 810 | .pe-btn {
|
|---|
| 811 | display: inline-flex; align-items: center; gap: 0.4rem;
|
|---|
| 812 | padding: 0.55rem 1rem;
|
|---|
| 813 | border: 1px solid var(--rule);
|
|---|
| 814 | background: var(--paper-2);
|
|---|
| 815 | color: var(--ink);
|
|---|
| 816 | font-family: var(--font-ui, system-ui), sans-serif;
|
|---|
| 817 | font-size: 0.9rem; font-weight: 500;
|
|---|
| 818 | text-decoration: none;
|
|---|
| 819 | border-radius: 6px;
|
|---|
| 820 | cursor: pointer;
|
|---|
| 821 | transition: background 120ms, border-color 120ms;
|
|---|
| 822 | min-height: 40px;
|
|---|
| 823 | -webkit-tap-highlight-color: transparent;
|
|---|
| 824 | }
|
|---|
| 825 | .pe-btn:hover { border-color: var(--accent); }
|
|---|
| 826 | .pe-btn:active { transform: scale(0.97); }
|
|---|
| 827 | .pe-btn-tiny {
|
|---|
| 828 | padding: 0.35rem 0.7rem;
|
|---|
| 829 | font-size: 0.85rem;
|
|---|
| 830 | min-height: 32px;
|
|---|
| 831 | }
|
|---|
| 832 | .pe-btn-secondary { background: var(--paper-2); }
|
|---|
| 833 | .pe-btn-primary {
|
|---|
| 834 | background: var(--accent); color: white;
|
|---|
| 835 | border-color: var(--accent);
|
|---|
| 836 | }
|
|---|
| 837 | .pe-btn-primary:hover { opacity: 0.92; border-color: var(--accent); }
|
|---|
| 838 | .pe-btn-success {
|
|---|
| 839 | background: #16a34a; color: white;
|
|---|
| 840 | border-color: #16a34a;
|
|---|
| 841 | }
|
|---|
| 842 | .pe-btn-success:hover { opacity: 0.92; border-color: #16a34a; }
|
|---|
| 843 |
|
|---|
| 844 | .pe-status {
|
|---|
| 845 | color: var(--ink-muted, var(--ink-soft));
|
|---|
| 846 | font-size: 0.8rem;
|
|---|
| 847 | }
|
|---|
| 848 | .pe-status.is-error { color: #dc2626; }
|
|---|
| 849 |
|
|---|
| 850 | /* ─── Checkboxes (clean inline row) ─────────────────────────────── */
|
|---|
| 851 | .pe-checkboxes {
|
|---|
| 852 | display: flex; flex-direction: column;
|
|---|
| 853 | gap: 0.5rem;
|
|---|
| 854 | padding-top: 0.25rem;
|
|---|
| 855 | }
|
|---|
| 856 | .pe-checkbox {
|
|---|
| 857 | display: inline-flex; align-items: center; gap: 0.5rem;
|
|---|
| 858 | cursor: pointer;
|
|---|
| 859 | font-size: 0.95rem;
|
|---|
| 860 | color: var(--ink);
|
|---|
| 861 | user-select: none;
|
|---|
| 862 | }
|
|---|
| 863 | .pe-checkbox input[type="checkbox"] {
|
|---|
| 864 | width: 18px; height: 18px;
|
|---|
| 865 | margin: 0;
|
|---|
| 866 | cursor: pointer;
|
|---|
| 867 | accent-color: var(--accent);
|
|---|
| 868 | }
|
|---|
| 869 |
|
|---|
| 870 | /* Vastpinnen: checkbox + ▲▼-stepper met beschrijving (i.p.v. een ruw rang-getal). */
|
|---|
| 871 | .pe-pin { display: flex; flex-direction: column; gap: 0.45rem; }
|
|---|
| 872 | .pe-pin-pos { display: flex; align-items: center; gap: 0.55rem; padding-left: 1.65rem; }
|
|---|
| 873 | .pe-pin-pos[hidden] { display: none; }
|
|---|
| 874 | .pe-pin-steps { display: inline-flex; border: 1px solid var(--rule); border-radius: 6px; overflow: hidden; }
|
|---|
| 875 | .pe-pin-btn {
|
|---|
| 876 | width: 30px; height: 28px; padding: 0;
|
|---|
| 877 | border: none; background: var(--paper-2); color: var(--ink);
|
|---|
| 878 | cursor: pointer; font-size: 0.68rem; line-height: 1;
|
|---|
| 879 | display: inline-flex; align-items: center; justify-content: center;
|
|---|
| 880 | }
|
|---|
| 881 | .pe-pin-btn + .pe-pin-btn { border-left: 1px solid var(--rule); }
|
|---|
| 882 | .pe-pin-btn:hover { background: color-mix(in srgb, var(--accent) 14%, var(--paper-2)); color: var(--accent); }
|
|---|
| 883 | .pe-pin-btn:disabled { opacity: 0.35; cursor: default; }
|
|---|
| 884 | .pe-pin-label { font-size: 0.85rem; color: var(--accent); font-weight: 600; }
|
|---|
| 885 |
|
|---|
| 886 | /* ─── Sticky action footer ──────────────────────────────────────── */
|
|---|
| 887 | .pe-actions {
|
|---|
| 888 | position: sticky;
|
|---|
| 889 | bottom: 0;
|
|---|
| 890 | display: flex; align-items: center;
|
|---|
| 891 | gap: 0.5rem;
|
|---|
| 892 | padding: 0.85rem 1rem;
|
|---|
| 893 | margin: 0.5rem -1rem 0; /* extend to viewport edges on tight container */
|
|---|
| 894 | background: color-mix(in srgb, var(--paper) 94%, transparent);
|
|---|
| 895 | -webkit-backdrop-filter: blur(8px);
|
|---|
| 896 | backdrop-filter: blur(8px);
|
|---|
| 897 | border-top: 1px solid var(--rule);
|
|---|
| 898 | z-index: 10;
|
|---|
| 899 | }
|
|---|
| 900 | .pe-actions-spacer { flex: 1; }
|
|---|
| 901 |
|
|---|
| 902 | /* De editor is een focus-scherm: verberg de mobiele site-tabbalk (Home/Zoek/…)
|
|---|
| 903 | zodat er niet twee balken onderaan stapelen (Opslaan-balk + tabbalk). De
|
|---|
| 904 | Opslaan/Annuleren-balk wordt dan de enige onderbalk → gewoon op bottom:0,
|
|---|
| 905 | geen tab-offset meer nodig. Op desktop is de tabbalk toch al verborgen. */
|
|---|
| 906 | body:has(.post-edit-page) .bottom-tab { display: none; }
|
|---|
| 907 | /* Audiospeler (indien aan het spelen) niet meer 56px optillen voor de nu-verborgen
|
|---|
| 908 | tabbalk, anders zou die zweven boven de actiebalk. */
|
|---|
| 909 | body:has(.post-edit-page) .audio-player { bottom: 0; }
|
|---|
| 910 | </style>
|
|---|
| 911 |
|
|---|
| 912 | <script>
|
|---|
| 913 | (function() {
|
|---|
| 914 |
|
|---|
| 915 | // ── Cover upload ────────────────────────────────────────────────
|
|---|
| 916 | const coverField = document.getElementById('cover-upload-field');
|
|---|
| 917 | const coverTrigger = document.getElementById('cover-upload-trigger');
|
|---|
| 918 | const coverUrl = document.getElementById('cover-url-field');
|
|---|
| 919 | const coverStatus = document.getElementById('cover-upload-status');
|
|---|
| 920 | const coverWrap = document.getElementById('cover-preview-wrap');
|
|---|
| 921 | const coverImg = document.getElementById('cover-preview-img');
|
|---|
| 922 |
|
|---|
| 923 | async function uploadImage(file) {
|
|---|
| 924 | const fd = new FormData();
|
|---|
| 925 | fd.append('image', file);
|
|---|
| 926 | const res = await fetch('/posts/upload-image', { method: 'POST', body: fd });
|
|---|
| 927 | if (!res.ok) {
|
|---|
| 928 | const j = await res.json().catch(() => ({}));
|
|---|
| 929 | throw new Error(j.error || ('Upload failed (' + res.status + ')'));
|
|---|
| 930 | }
|
|---|
| 931 | return await res.json(); // {url, size, mime}
|
|---|
| 932 | }
|
|---|
| 933 |
|
|---|
| 934 | function showCoverPreview(url) {
|
|---|
| 935 | if (!coverWrap || !coverImg) return;
|
|---|
| 936 | if (url) {
|
|---|
| 937 | coverImg.src = url;
|
|---|
| 938 | coverImg.hidden = false;
|
|---|
| 939 | coverWrap.removeAttribute('data-empty');
|
|---|
| 940 | const emptyIcon = coverWrap.querySelector('.pe-cover-empty');
|
|---|
| 941 | if (emptyIcon) emptyIcon.remove();
|
|---|
| 942 | } else {
|
|---|
| 943 | coverImg.hidden = true;
|
|---|
| 944 | coverImg.src = '';
|
|---|
| 945 | coverWrap.setAttribute('data-empty', '');
|
|---|
| 946 | if (!coverWrap.querySelector('.pe-cover-empty')) {
|
|---|
| 947 | const span = document.createElement('span');
|
|---|
| 948 | span.className = 'pe-cover-empty';
|
|---|
| 949 | span.textContent = '🖼';
|
|---|
| 950 | coverWrap.appendChild(span);
|
|---|
| 951 | }
|
|---|
| 952 | }
|
|---|
| 953 | }
|
|---|
| 954 |
|
|---|
| 955 | if (coverTrigger && coverField) {
|
|---|
| 956 | coverTrigger.addEventListener('click', () => coverField.click());
|
|---|
| 957 | }
|
|---|
| 958 | if (coverField) {
|
|---|
| 959 | coverField.addEventListener('change', async () => {
|
|---|
| 960 | if (!coverField.files[0]) return;
|
|---|
| 961 | coverStatus.classList.remove('is-error');
|
|---|
| 962 | coverStatus.textContent = 'Uploaden…';
|
|---|
| 963 | try {
|
|---|
| 964 | const j = await uploadImage(coverField.files[0]);
|
|---|
| 965 | coverUrl.value = j.url;
|
|---|
| 966 | showCoverPreview(j.url);
|
|---|
| 967 | coverStatus.textContent = 'Geüpload ✓';
|
|---|
| 968 | setTimeout(() => { coverStatus.textContent = ''; }, 2000);
|
|---|
| 969 | } catch (e) {
|
|---|
| 970 | coverStatus.classList.add('is-error');
|
|---|
| 971 | coverStatus.textContent = 'Mislukt: ' + e.message;
|
|---|
| 972 | }
|
|---|
| 973 | });
|
|---|
| 974 | }
|
|---|
| 975 | // Live-update preview when user pastes a URL manually
|
|---|
| 976 | if (coverUrl) {
|
|---|
| 977 | coverUrl.addEventListener('input', () => {
|
|---|
| 978 | const v = coverUrl.value.trim();
|
|---|
| 979 | if (v) showCoverPreview(v); else showCoverPreview('');
|
|---|
| 980 | });
|
|---|
| 981 | }
|
|---|
| 982 |
|
|---|
| 983 | // ── WYSIWYG editor (P58) ────────────────────────────────────────
|
|---|
| 984 | // Architecture:
|
|---|
| 985 | // - Visible <div contenteditable> (`#content-editor`) is what the user
|
|---|
| 986 | // types in; it shows real HTML (formatted, not raw markup).
|
|---|
| 987 | // - Hidden <input name="content"> (`#content-hidden`) is what submits.
|
|---|
| 988 | // On submit we serialize the editor's HTML into it, with shortcode
|
|---|
| 989 | // chips reduced back to their [[track:UUID]]/[[album:Name]]/[[playlist:slug]] text.
|
|---|
| 990 | // - Initial content comes from a <script type="application/json"> tag
|
|---|
| 991 | // to avoid HTML-escape-into-DOM issues; we set innerHTML once on load
|
|---|
| 992 | // and walk text nodes to render shortcode tokens as chips.
|
|---|
| 993 | const contentField = document.getElementById('content-upload-field');
|
|---|
| 994 | const contentBtn = document.getElementById('insert-image-btn');
|
|---|
| 995 | const contentStatus = document.getElementById('content-upload-status');
|
|---|
| 996 | const editor = document.getElementById('content-editor');
|
|---|
| 997 | const hiddenField = document.getElementById('content-hidden');
|
|---|
| 998 | const charCountEl = document.getElementById('char-count');
|
|---|
| 999 | const initialEl = document.getElementById('initial-content');
|
|---|
| 1000 | const toolbar = document.getElementById('pe-toolbar');
|
|---|
| 1001 | const form = editor && editor.closest('form');
|
|---|
| 1002 |
|
|---|
| 1003 | if (!editor) return;
|
|---|
| 1004 |
|
|---|
| 1005 | // Titel alleen automatisch focussen op desktop (muis/trackpad). Op touch zou
|
|---|
| 1006 | // dit meteen het toetsenbord openen bij het openen van de editor — niet gewenst.
|
|---|
| 1007 | try {
|
|---|
| 1008 | const titleInput = form && form.querySelector('input[name="title"]');
|
|---|
| 1009 | if (titleInput && window.matchMedia && window.matchMedia('(hover: hover) and (pointer: fine)').matches) {
|
|---|
| 1010 | titleInput.focus({ preventScroll: true });
|
|---|
| 1011 | }
|
|---|
| 1012 | } catch (_) {}
|
|---|
| 1013 |
|
|---|
| 1014 | // ── Shortcode chip rendering / serialization ────────────────────
|
|---|
| 1015 | // Pattern matches [[track:UUID]] / [[album:any text]] / [[playlist:slug]]
|
|---|
| 1016 | // — but we DON'T want to chipify text the user is mid-typing inside an
|
|---|
| 1017 | // HTML attribute; since chipify only walks text nodes (never attribute
|
|---|
| 1018 | // values) that's already safe.
|
|---|
| 1019 | const SC_RE = /\[\[(track|album|playlist|embed):([^\]]+)\]\]/g;
|
|---|
| 1020 |
|
|---|
| 1021 | const SC_ICONS = {
|
|---|
| 1022 | track: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="6 4 20 12 6 20 6 4"/></svg>',
|
|---|
| 1023 | album: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><circle cx="12" cy="12" r="3"/></svg>',
|
|---|
| 1024 | playlist: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="8" y1="6" x2="21" y2="6"/><line x1="8" y1="12" x2="21" y2="12"/><line x1="8" y1="18" x2="15" y2="18"/><polygon points="3 5 3 13 9 9"/></svg>',
|
|---|
| 1025 | embed: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="4" width="20" height="16" rx="2"/><polygon points="10 9 15.5 12 10 15"/></svg>',
|
|---|
| 1026 | };
|
|---|
| 1027 |
|
|---|
| 1028 | function chipLabel(kind, value) {
|
|---|
| 1029 | if (kind === 'track') {
|
|---|
| 1030 | // UUIDs are noisy — show a 6-char prefix for visual hint
|
|---|
| 1031 | const v = String(value || '');
|
|---|
| 1032 | return 'Track ' + (v.length > 8 ? v.slice(0, 6) + '…' : v);
|
|---|
| 1033 | }
|
|---|
| 1034 | if (kind === 'album') return 'Album: ' + value;
|
|---|
| 1035 | if (kind === 'playlist') return 'Playlist: ' + value;
|
|---|
| 1036 | if (kind === 'embed') {
|
|---|
| 1037 | const clean = String(value || '').replace(/^https?:\/\/(www\.)?/, '');
|
|---|
| 1038 | return '▶ ' + (clean.length > 36 ? clean.slice(0, 34) + '…' : clean);
|
|---|
| 1039 | }
|
|---|
| 1040 | return value;
|
|---|
| 1041 | }
|
|---|
| 1042 |
|
|---|
| 1043 | function makeChip(kind, value) {
|
|---|
| 1044 | const span = document.createElement('span');
|
|---|
| 1045 | span.className = 'sc-chip';
|
|---|
| 1046 | span.contentEditable = 'false';
|
|---|
| 1047 | span.setAttribute('data-sc', kind + ':' + value);
|
|---|
| 1048 | span.innerHTML =
|
|---|
| 1049 | '<span class="sc-chip-icon" aria-hidden="true">' + (SC_ICONS[kind] || '') + '</span>' +
|
|---|
| 1050 | '<span class="sc-chip-label"></span>';
|
|---|
| 1051 | span.querySelector('.sc-chip-label').textContent = chipLabel(kind, value);
|
|---|
| 1052 | return span;
|
|---|
| 1053 | }
|
|---|
| 1054 |
|
|---|
| 1055 | // Walk text nodes inside `root` and replace [[type:value]] tokens with chips.
|
|---|
| 1056 | function chipifyShortcodes(root) {
|
|---|
| 1057 | const walker = document.createTreeWalker(root, NodeFilter.SHOW_TEXT, null);
|
|---|
| 1058 | const targets = [];
|
|---|
| 1059 | while (walker.nextNode()) {
|
|---|
| 1060 | const n = walker.currentNode;
|
|---|
| 1061 | // Skip text inside existing chips (their .sc-chip-label is set via .textContent so the [[...]] text never appears)
|
|---|
| 1062 | if (n.parentElement && n.parentElement.closest('.sc-chip')) continue;
|
|---|
| 1063 | if (SC_RE.test(n.nodeValue)) targets.push(n);
|
|---|
| 1064 | SC_RE.lastIndex = 0;
|
|---|
| 1065 | }
|
|---|
| 1066 | for (const node of targets) {
|
|---|
| 1067 | const txt = node.nodeValue;
|
|---|
| 1068 | const frag = document.createDocumentFragment();
|
|---|
| 1069 | let last = 0;
|
|---|
| 1070 | let m;
|
|---|
| 1071 | SC_RE.lastIndex = 0;
|
|---|
| 1072 | while ((m = SC_RE.exec(txt)) !== null) {
|
|---|
| 1073 | if (m.index > last) frag.appendChild(document.createTextNode(txt.slice(last, m.index)));
|
|---|
| 1074 | frag.appendChild(makeChip(m[1], m[2].trim()));
|
|---|
| 1075 | last = m.index + m[0].length;
|
|---|
| 1076 | }
|
|---|
| 1077 | if (last < txt.length) frag.appendChild(document.createTextNode(txt.slice(last)));
|
|---|
| 1078 | node.parentNode.replaceChild(frag, node);
|
|---|
| 1079 | }
|
|---|
| 1080 | }
|
|---|
| 1081 |
|
|---|
| 1082 | // Inverse of chipify: clone the editor, replace every chip with its text.
|
|---|
| 1083 | function serializeChips(rootClone) {
|
|---|
| 1084 | const chips = rootClone.querySelectorAll('.sc-chip[data-sc]');
|
|---|
| 1085 | for (const c of chips) {
|
|---|
| 1086 | const txt = '[[' + c.getAttribute('data-sc') + ']]';
|
|---|
| 1087 | c.replaceWith(document.createTextNode(txt));
|
|---|
| 1088 | }
|
|---|
| 1089 | }
|
|---|
| 1090 |
|
|---|
| 1091 | // ── Boot: load initial content as HTML, then render shortcodes as chips
|
|---|
| 1092 | try {
|
|---|
| 1093 | const initial = JSON.parse(initialEl.textContent || '""');
|
|---|
| 1094 | editor.innerHTML = initial || '';
|
|---|
| 1095 | chipifyShortcodes(editor);
|
|---|
| 1096 | } catch (e) {
|
|---|
| 1097 | console.error('[editor] could not parse initial content', e);
|
|---|
| 1098 | editor.innerHTML = '';
|
|---|
| 1099 | }
|
|---|
| 1100 |
|
|---|
| 1101 | // ── Char counter
|
|---|
| 1102 | function updateCharCount() {
|
|---|
| 1103 | const text = (editor.innerText || '').replace(/\s+/g, ' ').trim();
|
|---|
| 1104 | if (charCountEl) charCountEl.textContent = String(text.length);
|
|---|
| 1105 | }
|
|---|
| 1106 | updateCharCount();
|
|---|
| 1107 | editor.addEventListener('input', updateCharCount);
|
|---|
| 1108 |
|
|---|
| 1109 | // ── Toolbar wiring
|
|---|
| 1110 | // Houd de scrollpositie vast rond een edit-commando. execCommand/insert scrollt
|
|---|
| 1111 | // standaard de caret in beeld → het beeld "verspringt" bij het aanklikken van een
|
|---|
| 1112 | // opmaakknop. We leggen ALLE scrollbare voorouders (editor, frame, #pcms-main, …)
|
|---|
| 1113 | // + de pagina vast en zetten ze terug — sync én over een paar frames, want Chrome
|
|---|
| 1114 | // scrollt soms pas een frame later. De gebruiker scrollt zo zelf.
|
|---|
| 1115 | function scrollableAncestors(el) {
|
|---|
| 1116 | const list = [];
|
|---|
| 1117 | let node = el;
|
|---|
| 1118 | while (node && node !== document.body && node !== document.documentElement) {
|
|---|
| 1119 | const oy = getComputedStyle(node).overflowY;
|
|---|
| 1120 | if (oy === 'auto' || oy === 'scroll' || oy === 'overlay') list.push(node);
|
|---|
| 1121 | node = node.parentElement;
|
|---|
| 1122 | }
|
|---|
| 1123 | return list;
|
|---|
| 1124 | }
|
|---|
| 1125 | function keepScroll(fn) {
|
|---|
| 1126 | // In fullscreen staat de pagina vast (body overflow:hidden) en mag het veld
|
|---|
| 1127 | // gewoon naar de caret scrollen — geen pagina-sprong mogelijk, dus niets fixen.
|
|---|
| 1128 | const frame = document.querySelector('.pe-editor-frame');
|
|---|
| 1129 | if (frame && frame.classList.contains('pe-fs')) { fn(); return; }
|
|---|
| 1130 | const wx = window.scrollX, wy = window.scrollY;
|
|---|
| 1131 | const anc = scrollableAncestors(editor).map(function (n) { return [n, n.scrollTop, n.scrollLeft]; });
|
|---|
| 1132 | const restore = function () {
|
|---|
| 1133 | window.scrollTo(wx, wy);
|
|---|
| 1134 | anc.forEach(function (e) { e[0].scrollTop = e[1]; e[0].scrollLeft = e[2]; });
|
|---|
| 1135 | };
|
|---|
| 1136 | fn();
|
|---|
| 1137 | restore();
|
|---|
| 1138 | requestAnimationFrame(restore);
|
|---|
| 1139 | }
|
|---|
| 1140 | function execCmd(cmd, arg) {
|
|---|
| 1141 | keepScroll(function () {
|
|---|
| 1142 | editor.focus({ preventScroll: true });
|
|---|
| 1143 | document.execCommand(cmd, false, arg);
|
|---|
| 1144 | });
|
|---|
| 1145 | updateToolbarState();
|
|---|
| 1146 | updateCharCount();
|
|---|
| 1147 | }
|
|---|
| 1148 | function wrapCode() {
|
|---|
| 1149 | const sel = window.getSelection();
|
|---|
| 1150 | if (!sel || sel.rangeCount === 0 || sel.isCollapsed) return;
|
|---|
| 1151 | keepScroll(function () {
|
|---|
| 1152 | const range = sel.getRangeAt(0);
|
|---|
| 1153 | const code = document.createElement('code');
|
|---|
| 1154 | code.textContent = sel.toString();
|
|---|
| 1155 | range.deleteContents();
|
|---|
| 1156 | range.insertNode(code);
|
|---|
| 1157 | // Move caret after the new node
|
|---|
| 1158 | range.setStartAfter(code);
|
|---|
| 1159 | range.collapse(true);
|
|---|
| 1160 | sel.removeAllRanges();
|
|---|
| 1161 | sel.addRange(range);
|
|---|
| 1162 | editor.focus({ preventScroll: true });
|
|---|
| 1163 | });
|
|---|
| 1164 | }
|
|---|
| 1165 | function linkPrompt() {
|
|---|
| 1166 | const url = window.prompt('Link URL (https://… of /pad)');
|
|---|
| 1167 | if (!url) return;
|
|---|
| 1168 | execCmd('createLink', url);
|
|---|
| 1169 | }
|
|---|
| 1170 | // De huidige selectie zit in een <blockquote> binnen de editor? Geef 'm terug.
|
|---|
| 1171 | function blockquoteAncestor() {
|
|---|
| 1172 | const sel = window.getSelection();
|
|---|
| 1173 | if (!sel || sel.rangeCount === 0) return null;
|
|---|
| 1174 | let node = sel.anchorNode;
|
|---|
| 1175 | while (node && node !== editor) {
|
|---|
| 1176 | if (node.nodeType === 1 && node.tagName === 'BLOCKQUOTE') return node;
|
|---|
| 1177 | node = node.parentNode;
|
|---|
| 1178 | }
|
|---|
| 1179 | return null;
|
|---|
| 1180 | }
|
|---|
| 1181 | // Echte toggle: execCommand('formatBlock','blockquote') zet 'm wél AAN maar
|
|---|
| 1182 | // krijgt 'm nooit meer UIT (browser-quirk). Staat de caret al in een quote →
|
|---|
| 1183 | // pak de wrapper uit; anders pas blockquote toe.
|
|---|
| 1184 | function toggleBlockquote() {
|
|---|
| 1185 | keepScroll(function () {
|
|---|
| 1186 | editor.focus({ preventScroll: true });
|
|---|
| 1187 | const bq = blockquoteAncestor();
|
|---|
| 1188 | if (bq) {
|
|---|
| 1189 | const parent = bq.parentNode;
|
|---|
| 1190 | // Inhoud uit de quote halen, op z'n plek, en de lege wrapper verwijderen.
|
|---|
| 1191 | const ref = bq;
|
|---|
| 1192 | let firstMoved = null;
|
|---|
| 1193 | while (bq.firstChild) {
|
|---|
| 1194 | const child = bq.firstChild;
|
|---|
| 1195 | if (!firstMoved) firstMoved = child;
|
|---|
| 1196 | parent.insertBefore(child, ref);
|
|---|
| 1197 | }
|
|---|
| 1198 | parent.removeChild(bq);
|
|---|
| 1199 | // Caret terugzetten in de uitgepakte inhoud.
|
|---|
| 1200 | if (firstMoved) {
|
|---|
| 1201 | const sel = window.getSelection();
|
|---|
| 1202 | const range = document.createRange();
|
|---|
| 1203 | range.selectNodeContents(firstMoved.nodeType === 1 ? firstMoved : parent);
|
|---|
| 1204 | range.collapse(false);
|
|---|
| 1205 | sel.removeAllRanges();
|
|---|
| 1206 | sel.addRange(range);
|
|---|
| 1207 | }
|
|---|
| 1208 | } else {
|
|---|
| 1209 | document.execCommand('formatBlock', false, 'blockquote');
|
|---|
| 1210 | }
|
|---|
| 1211 | });
|
|---|
| 1212 | updateToolbarState();
|
|---|
| 1213 | updateCharCount();
|
|---|
| 1214 | }
|
|---|
| 1215 |
|
|---|
| 1216 | if (toolbar) {
|
|---|
| 1217 | // CRUCIAAL (mobiel + desktop): voorkom dat een toolbar-knop de focus/selectie
|
|---|
| 1218 | // uit het editor-veld steelt. Zonder dit raakt de selectie kwijt bij het tikken
|
|---|
| 1219 | // → execCommand werkt op een lege selectie (vet kan niet meer UIT) én de browser
|
|---|
| 1220 | // scrollt de caret opnieuw in beeld (de "sprong naar beneden"). preventDefault op
|
|---|
| 1221 | // mousedown houdt de focus in de editor; de click blijft gewoon vuren.
|
|---|
| 1222 | toolbar.addEventListener('mousedown', (e) => {
|
|---|
| 1223 | if (e.target.closest('button')) e.preventDefault();
|
|---|
| 1224 | });
|
|---|
| 1225 | toolbar.addEventListener('click', (e) => {
|
|---|
| 1226 | const btn = e.target.closest('button[data-cmd]');
|
|---|
| 1227 | if (!btn) return;
|
|---|
| 1228 | e.preventDefault();
|
|---|
| 1229 | const cmd = btn.dataset.cmd;
|
|---|
| 1230 | const arg = btn.dataset.arg || null;
|
|---|
| 1231 | if (cmd === 'link-prompt') linkPrompt();
|
|---|
| 1232 | else if (cmd === 'code-wrap') wrapCode();
|
|---|
| 1233 | else if (cmd === 'formatBlock' && arg === 'blockquote') toggleBlockquote();
|
|---|
| 1234 | else execCmd(cmd, arg);
|
|---|
| 1235 | });
|
|---|
| 1236 | }
|
|---|
| 1237 |
|
|---|
| 1238 | // ── Volledig-scherm schrijfmodus: het schrijfveld vult de hele pagina.
|
|---|
| 1239 | const fsBtn = document.getElementById('pe-fullscreen-btn');
|
|---|
| 1240 | const editorFrame = document.querySelector('.pe-editor-frame');
|
|---|
| 1241 | const isTouch = !!(window.matchMedia && window.matchMedia('(pointer: coarse)').matches);
|
|---|
| 1242 |
|
|---|
| 1243 | // Op mobiel duwt het toetsenbord de zichtbare (visual) viewport omhoog terwijl
|
|---|
| 1244 | // een position:fixed-frame aan de LAYOUT-viewport blijft hangen → de toolbar
|
|---|
| 1245 | // schuift uit beeld. Houd het fullscreen-frame daarom gelijk aan de visual
|
|---|
| 1246 | // viewport (top + hoogte), zodat de toolbar altijd bovenaan zichtbaar blijft.
|
|---|
| 1247 | function syncFsViewport() {
|
|---|
| 1248 | if (!editorFrame || !editorFrame.classList.contains('pe-fs')) return;
|
|---|
| 1249 | const vv = window.visualViewport;
|
|---|
| 1250 | if (!vv) return;
|
|---|
| 1251 | editorFrame.style.top = vv.offsetTop + 'px';
|
|---|
| 1252 | editorFrame.style.height = vv.height + 'px';
|
|---|
| 1253 | }
|
|---|
| 1254 | function clearFsViewport() {
|
|---|
| 1255 | if (!editorFrame) return;
|
|---|
| 1256 | editorFrame.style.top = '';
|
|---|
| 1257 | editorFrame.style.height = '';
|
|---|
| 1258 | }
|
|---|
| 1259 | function toggleFullscreen() {
|
|---|
| 1260 | if (!editorFrame) return;
|
|---|
| 1261 | const on = editorFrame.classList.toggle('pe-fs');
|
|---|
| 1262 | document.body.classList.toggle('pe-fs-open', on);
|
|---|
| 1263 | document.documentElement.classList.toggle('pe-fs-open', on);
|
|---|
| 1264 | if (fsBtn) {
|
|---|
| 1265 | fsBtn.setAttribute('aria-pressed', on ? 'true' : 'false');
|
|---|
| 1266 | fsBtn.title = on ? 'Verklein' : 'Volledig scherm';
|
|---|
| 1267 | }
|
|---|
| 1268 | if (window.visualViewport) {
|
|---|
| 1269 | if (on) {
|
|---|
| 1270 | window.visualViewport.addEventListener('resize', syncFsViewport);
|
|---|
| 1271 | window.visualViewport.addEventListener('scroll', syncFsViewport);
|
|---|
| 1272 | syncFsViewport();
|
|---|
| 1273 | } else {
|
|---|
| 1274 | window.visualViewport.removeEventListener('resize', syncFsViewport);
|
|---|
| 1275 | window.visualViewport.removeEventListener('scroll', syncFsViewport);
|
|---|
| 1276 | clearFsViewport();
|
|---|
| 1277 | }
|
|---|
| 1278 | }
|
|---|
| 1279 | // Op touch is het veld inline NIET bewerkbaar; alleen in fullscreen wel.
|
|---|
| 1280 | if (isTouch) editor.setAttribute('contenteditable', on ? 'true' : 'false');
|
|---|
| 1281 | if (on) {
|
|---|
| 1282 | editor.focus({ preventScroll: true });
|
|---|
| 1283 | } else {
|
|---|
| 1284 | if (isTouch) editor.blur();
|
|---|
| 1285 | // Bij verkleinen: naar de TOP van de content scrollen i.p.v. ergens onderaan
|
|---|
| 1286 | // (footer) te blijven hangen.
|
|---|
| 1287 | requestAnimationFrame(function () {
|
|---|
| 1288 | try { editorFrame.scrollIntoView({ block: 'start' }); } catch (_) {}
|
|---|
| 1289 | });
|
|---|
| 1290 | }
|
|---|
| 1291 | }
|
|---|
| 1292 | if (fsBtn) fsBtn.addEventListener('click', toggleFullscreen);
|
|---|
| 1293 | document.addEventListener('keydown', (e) => {
|
|---|
| 1294 | if (e.key === 'Escape' && editorFrame && editorFrame.classList.contains('pe-fs')) {
|
|---|
| 1295 | e.preventDefault();
|
|---|
| 1296 | toggleFullscreen();
|
|---|
| 1297 | }
|
|---|
| 1298 | });
|
|---|
| 1299 |
|
|---|
| 1300 | // Op mobiel/tablet (touch): het content-veld is INLINE NIET bewerkbaar — het is
|
|---|
| 1301 | // dan geen tekstveld. Eén tik → fullscreen, waar het wél bewerkbaar wordt
|
|---|
| 1302 | // (toggleFullscreen zet contenteditable aan/uit). Zo kun je nooit inline typen.
|
|---|
| 1303 | if (isTouch) {
|
|---|
| 1304 | editor.setAttribute('contenteditable', 'false');
|
|---|
| 1305 | editor.classList.add('pe-tap-to-edit');
|
|---|
| 1306 | editor.setAttribute('data-placeholder', 'Tik om te schrijven…');
|
|---|
| 1307 | editor.addEventListener('click', function () {
|
|---|
| 1308 | if (editorFrame && !editorFrame.classList.contains('pe-fs')) toggleFullscreen();
|
|---|
| 1309 | });
|
|---|
| 1310 | }
|
|---|
| 1311 |
|
|---|
| 1312 | // Reflect bold/italic/list state on the toolbar buttons
|
|---|
| 1313 | function updateToolbarState() {
|
|---|
| 1314 | if (!toolbar) return;
|
|---|
| 1315 | const cmds = ['bold', 'italic', 'underline', 'insertUnorderedList', 'insertOrderedList'];
|
|---|
| 1316 | for (const cmd of cmds) {
|
|---|
| 1317 | const btn = toolbar.querySelector('button[data-cmd="' + cmd + '"]');
|
|---|
| 1318 | if (!btn) continue;
|
|---|
| 1319 | try { btn.classList.toggle('is-active', document.queryCommandState(cmd)); } catch(_) {}
|
|---|
| 1320 | }
|
|---|
| 1321 | // Quote-knop: actief als de caret in een <blockquote> staat (toggle-feedback).
|
|---|
| 1322 | const bqBtn = toolbar.querySelector('button[data-cmd="formatBlock"][data-arg="blockquote"]');
|
|---|
| 1323 | if (bqBtn) bqBtn.classList.toggle('is-active', !!blockquoteAncestor());
|
|---|
| 1324 | }
|
|---|
| 1325 | document.addEventListener('selectionchange', () => {
|
|---|
| 1326 | if (document.activeElement === editor) updateToolbarState();
|
|---|
| 1327 | });
|
|---|
| 1328 |
|
|---|
| 1329 | // Keyboard shortcuts: Ctrl/Cmd + B/I/U/K
|
|---|
| 1330 | editor.addEventListener('keydown', (e) => {
|
|---|
| 1331 | const mod = e.ctrlKey || e.metaKey;
|
|---|
| 1332 | if (!mod) return;
|
|---|
| 1333 | const k = e.key.toLowerCase();
|
|---|
| 1334 | if (k === 'b') { e.preventDefault(); execCmd('bold'); }
|
|---|
| 1335 | else if (k === 'i') { e.preventDefault(); execCmd('italic'); }
|
|---|
| 1336 | else if (k === 'u') { e.preventDefault(); execCmd('underline'); }
|
|---|
| 1337 | else if (k === 'k') { e.preventDefault(); linkPrompt(); }
|
|---|
| 1338 | });
|
|---|
| 1339 |
|
|---|
| 1340 | // Paste: keep it simple — strip formatting unless user wants it. Default
|
|---|
| 1341 | // execCommand 'paste' includes Word/Google-Docs garbage. We accept inline
|
|---|
| 1342 | // styles from clipboard only when shift is held — otherwise plain text.
|
|---|
| 1343 | editor.addEventListener('paste', (e) => {
|
|---|
| 1344 | if (e.shiftKey) return; // user wants formatted paste
|
|---|
| 1345 | const text = (e.clipboardData || window.clipboardData).getData('text/plain');
|
|---|
| 1346 | if (text == null) return;
|
|---|
| 1347 | e.preventDefault();
|
|---|
| 1348 | document.execCommand('insertText', false, text);
|
|---|
| 1349 | });
|
|---|
| 1350 |
|
|---|
| 1351 | // ── Image upload (button + drag-drop into the editor)
|
|---|
| 1352 | async function uploadAndInsertImage(file) {
|
|---|
| 1353 | contentStatus.classList.remove('is-error');
|
|---|
| 1354 | contentStatus.textContent = 'Uploaden…';
|
|---|
| 1355 | try {
|
|---|
| 1356 | const j = await uploadImage(file);
|
|---|
| 1357 | const img = '<img src="' + j.url + '" alt="">';
|
|---|
| 1358 | editor.focus({ preventScroll: true });
|
|---|
| 1359 | document.execCommand('insertHTML', false, img);
|
|---|
| 1360 | contentStatus.textContent = 'Ingevoegd ✓';
|
|---|
| 1361 | setTimeout(() => { contentStatus.textContent = ''; }, 2000);
|
|---|
| 1362 | updateCharCount();
|
|---|
| 1363 | } catch (e) {
|
|---|
| 1364 | contentStatus.classList.add('is-error');
|
|---|
| 1365 | contentStatus.textContent = 'Mislukt: ' + e.message;
|
|---|
| 1366 | }
|
|---|
| 1367 | }
|
|---|
| 1368 |
|
|---|
| 1369 | if (contentBtn && contentField) {
|
|---|
| 1370 | contentBtn.addEventListener('click', () => contentField.click());
|
|---|
| 1371 | contentField.addEventListener('change', () => {
|
|---|
| 1372 | if (contentField.files[0]) uploadAndInsertImage(contentField.files[0]);
|
|---|
| 1373 | contentField.value = '';
|
|---|
| 1374 | });
|
|---|
| 1375 |
|
|---|
| 1376 | editor.addEventListener('dragover', (e) => {
|
|---|
| 1377 | if (e.dataTransfer && e.dataTransfer.types.includes('Files')) {
|
|---|
| 1378 | e.preventDefault();
|
|---|
| 1379 | editor.classList.add('is-dragover');
|
|---|
| 1380 | }
|
|---|
| 1381 | });
|
|---|
| 1382 | editor.addEventListener('dragleave', () => editor.classList.remove('is-dragover'));
|
|---|
| 1383 | editor.addEventListener('drop', async (e) => {
|
|---|
| 1384 | editor.classList.remove('is-dragover');
|
|---|
| 1385 | const files = e.dataTransfer && e.dataTransfer.files;
|
|---|
| 1386 | if (!files || !files.length) return;
|
|---|
| 1387 | e.preventDefault();
|
|---|
| 1388 | for (const f of files) {
|
|---|
| 1389 | if (f.type.startsWith('image/')) await uploadAndInsertImage(f);
|
|---|
| 1390 | }
|
|---|
| 1391 | });
|
|---|
| 1392 | }
|
|---|
| 1393 |
|
|---|
| 1394 | // ── Insert chip helpers (track / playlist)
|
|---|
| 1395 | function insertChip(kind, value) {
|
|---|
| 1396 | editor.focus({ preventScroll: true });
|
|---|
| 1397 | const chip = makeChip(kind, value);
|
|---|
| 1398 | // Insert at caret using the Selection API (execCommand insertNode)
|
|---|
| 1399 | const sel = window.getSelection();
|
|---|
| 1400 | if (sel && sel.rangeCount > 0) {
|
|---|
| 1401 | const range = sel.getRangeAt(0);
|
|---|
| 1402 | range.deleteContents();
|
|---|
| 1403 | range.insertNode(chip);
|
|---|
| 1404 | // Insert a trailing space so the user can keep typing after the chip
|
|---|
| 1405 | const space = document.createTextNode('\u00A0');
|
|---|
| 1406 | chip.after(space);
|
|---|
| 1407 | range.setStartAfter(space);
|
|---|
| 1408 | range.collapse(true);
|
|---|
| 1409 | sel.removeAllRanges();
|
|---|
| 1410 | sel.addRange(range);
|
|---|
| 1411 | } else {
|
|---|
| 1412 | editor.appendChild(chip);
|
|---|
| 1413 | editor.appendChild(document.createTextNode('\u00A0'));
|
|---|
| 1414 | }
|
|---|
| 1415 | updateCharCount();
|
|---|
| 1416 | }
|
|---|
| 1417 |
|
|---|
| 1418 | // ── Embed insert: plak een platform-URL -> [[embed:url]]-chip die server-side
|
|---|
| 1419 | // een iframe wordt (YouTube/Spotify/SoundCloud/Vimeo/Apple Music/Bandcamp).
|
|---|
| 1420 | const embedBtn = document.getElementById('insert-embed-btn');
|
|---|
| 1421 | if (embedBtn) {
|
|---|
| 1422 | embedBtn.addEventListener('click', () => {
|
|---|
| 1423 | const raw = window.prompt('Plak een media-URL om in te sluiten\n(YouTube, Spotify, SoundCloud, Vimeo, Apple Music, Bandcamp):');
|
|---|
| 1424 | if (!raw) return;
|
|---|
| 1425 | const url = raw.trim();
|
|---|
| 1426 | if (!/^https?:\/\//i.test(url)) { alert('Geef een volledige URL (https://…).'); return; }
|
|---|
| 1427 | insertChip('embed', url);
|
|---|
| 1428 | });
|
|---|
| 1429 | }
|
|---|
| 1430 |
|
|---|
| 1431 | // ── Track insert: opens the track-picker modal (P59)
|
|---|
| 1432 | const trackBtn = document.getElementById('insert-track-btn');
|
|---|
| 1433 | const trackPicker = document.getElementById('track-picker');
|
|---|
| 1434 | if (trackBtn && trackPicker) {
|
|---|
| 1435 | const tpList = document.getElementById('tp-list');
|
|---|
| 1436 | const tpEmpty = document.getElementById('tp-empty');
|
|---|
| 1437 | const tpSearch = document.getElementById('tp-search');
|
|---|
| 1438 | let tpCache = null; // cached tracks list (fetched once per page load)
|
|---|
| 1439 | let tpLastFocus = null; // element to restore focus to on close
|
|---|
| 1440 |
|
|---|
| 1441 | const SVG_NOTE = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M9 17V5l12-2v12"/><circle cx="6" cy="17" r="3"/><circle cx="18" cy="15" r="3"/></svg>';
|
|---|
| 1442 |
|
|---|
| 1443 | function fmtDur(sec) {
|
|---|
| 1444 | sec = Math.max(0, Math.floor(sec || 0));
|
|---|
| 1445 | const m = Math.floor(sec / 60), s = sec % 60;
|
|---|
| 1446 | return m + ':' + String(s).padStart(2, '0');
|
|---|
| 1447 | }
|
|---|
| 1448 | function escAttr(s) {
|
|---|
| 1449 | return String(s == null ? '' : s).replace(/[&<>"']/g, c => ({
|
|---|
| 1450 | '&':'&','<':'<','>':'>','"':'"',"'":'''
|
|---|
| 1451 | }[c]));
|
|---|
| 1452 | }
|
|---|
| 1453 |
|
|---|
| 1454 | function renderList(filter) {
|
|---|
| 1455 | if (!Array.isArray(tpCache)) return;
|
|---|
| 1456 | const q = (filter || '').trim().toLowerCase();
|
|---|
| 1457 | const filtered = q
|
|---|
| 1458 | ? tpCache.filter(t =>
|
|---|
| 1459 | (t.title || '').toLowerCase().includes(q) ||
|
|---|
| 1460 | (t.artist || '').toLowerCase().includes(q))
|
|---|
| 1461 | : tpCache;
|
|---|
| 1462 |
|
|---|
| 1463 | if (!filtered.length) {
|
|---|
| 1464 | tpList.innerHTML = '';
|
|---|
| 1465 | tpEmpty.textContent = q ? 'Geen tracks gevonden voor "' + q + '"' : 'Nog geen tracks. Upload via Beheer → Audio.';
|
|---|
| 1466 | tpList.appendChild(tpEmpty);
|
|---|
| 1467 | return;
|
|---|
| 1468 | }
|
|---|
| 1469 |
|
|---|
| 1470 | tpList.innerHTML = filtered.map(t => {
|
|---|
| 1471 | const cov = t.cover
|
|---|
| 1472 | ? '<span class="tp-cover" style="background-image:url(\'' + escAttr(t.cover) + '\')"></span>'
|
|---|
| 1473 | : '<span class="tp-cover tp-cover-empty">' + SVG_NOTE + '</span>';
|
|---|
| 1474 | const dis = t.playable ? '' : ' aria-disabled="true"';
|
|---|
| 1475 | const sub = t.artist ? '<span class="tp-row-artist">' + escAttr(t.artist) + '</span>' : '';
|
|---|
| 1476 | return (
|
|---|
| 1477 | '<button type="button" class="tp-row" role="option" data-track-id="' + escAttr(t.id) + '"' + dis + '>' +
|
|---|
| 1478 | cov +
|
|---|
| 1479 | '<span class="tp-meta">' +
|
|---|
| 1480 | '<span class="tp-row-title">' + escAttr(t.title) + '</span>' +
|
|---|
| 1481 | sub +
|
|---|
| 1482 | '</span>' +
|
|---|
| 1483 | '<span class="tp-duration">' + fmtDur(t.duration) + '</span>' +
|
|---|
| 1484 | '</button>'
|
|---|
| 1485 | );
|
|---|
| 1486 | }).join('');
|
|---|
| 1487 | }
|
|---|
| 1488 |
|
|---|
| 1489 | async function loadTracks() {
|
|---|
| 1490 | if (Array.isArray(tpCache)) return tpCache;
|
|---|
| 1491 | tpEmpty.textContent = 'Tracks laden…';
|
|---|
| 1492 | try {
|
|---|
| 1493 | const r = await fetch('/admin/playlists/api/tracks', { credentials: 'same-origin' });
|
|---|
| 1494 | const j = await r.json();
|
|---|
| 1495 | tpCache = (j && j.ok && Array.isArray(j.tracks)) ? j.tracks : [];
|
|---|
| 1496 | } catch (e) {
|
|---|
| 1497 | tpCache = [];
|
|---|
| 1498 | tpEmpty.textContent = 'Kon tracks niet laden: ' + e.message;
|
|---|
| 1499 | }
|
|---|
| 1500 | return tpCache;
|
|---|
| 1501 | }
|
|---|
| 1502 |
|
|---|
| 1503 | function openPicker() {
|
|---|
| 1504 | tpLastFocus = document.activeElement;
|
|---|
| 1505 | trackPicker.hidden = false;
|
|---|
| 1506 | trackPicker.setAttribute('aria-hidden', 'false');
|
|---|
| 1507 | document.body.classList.add('tp-locked');
|
|---|
| 1508 | tpSearch.value = '';
|
|---|
| 1509 | renderList('');
|
|---|
| 1510 | // Defer focus so the open animation doesn't get jumped
|
|---|
| 1511 | setTimeout(() => tpSearch.focus(), 30);
|
|---|
| 1512 | }
|
|---|
| 1513 | function closePicker() {
|
|---|
| 1514 | trackPicker.hidden = true;
|
|---|
| 1515 | trackPicker.setAttribute('aria-hidden', 'true');
|
|---|
| 1516 | document.body.classList.remove('tp-locked');
|
|---|
| 1517 | if (tpLastFocus && typeof tpLastFocus.focus === 'function') {
|
|---|
| 1518 | try { tpLastFocus.focus(); } catch(_) {}
|
|---|
| 1519 | }
|
|---|
| 1520 | }
|
|---|
| 1521 |
|
|---|
| 1522 | trackBtn.addEventListener('click', async () => {
|
|---|
| 1523 | openPicker();
|
|---|
| 1524 | await loadTracks();
|
|---|
| 1525 | renderList(tpSearch.value);
|
|---|
| 1526 | });
|
|---|
| 1527 |
|
|---|
| 1528 | // Close: backdrop click, [data-tp-close], or Escape
|
|---|
| 1529 | trackPicker.addEventListener('click', (e) => {
|
|---|
| 1530 | if (e.target.closest('[data-tp-close]')) {
|
|---|
| 1531 | closePicker();
|
|---|
| 1532 | return;
|
|---|
| 1533 | }
|
|---|
| 1534 | const row = e.target.closest('.tp-row[data-track-id]');
|
|---|
| 1535 | if (row) {
|
|---|
| 1536 | if (row.getAttribute('aria-disabled') === 'true') return;
|
|---|
| 1537 | const id = row.dataset.trackId;
|
|---|
| 1538 | if (id) {
|
|---|
| 1539 | insertChip('track', id);
|
|---|
| 1540 | closePicker();
|
|---|
| 1541 | }
|
|---|
| 1542 | }
|
|---|
| 1543 | });
|
|---|
| 1544 | document.addEventListener('keydown', (e) => {
|
|---|
| 1545 | if (!trackPicker.hidden && e.key === 'Escape') {
|
|---|
| 1546 | e.preventDefault();
|
|---|
| 1547 | closePicker();
|
|---|
| 1548 | }
|
|---|
| 1549 | });
|
|---|
| 1550 |
|
|---|
| 1551 | // Live filter
|
|---|
| 1552 | tpSearch.addEventListener('input', () => renderList(tpSearch.value));
|
|---|
| 1553 | }
|
|---|
| 1554 |
|
|---|
| 1555 | // ── Playlist insert (open existing or create new via modal)
|
|---|
| 1556 | const playlistBtn = document.getElementById('insert-playlist-btn');
|
|---|
| 1557 | if (playlistBtn) {
|
|---|
| 1558 | playlistBtn.addEventListener('click', async () => {
|
|---|
| 1559 | if (typeof window.openPlaylistEditor !== 'function') {
|
|---|
| 1560 | alert('Playlist editor niet geladen');
|
|---|
| 1561 | return;
|
|---|
| 1562 | }
|
|---|
| 1563 | try {
|
|---|
| 1564 | const r = await fetch('/admin/playlists/api/list', { credentials: 'same-origin' });
|
|---|
| 1565 | const j = await r.json();
|
|---|
| 1566 | if (j.ok && Array.isArray(j.playlists) && j.playlists.length > 0) {
|
|---|
| 1567 | const choice = prompt(
|
|---|
| 1568 | 'Bestaande playlists:\n\n' +
|
|---|
| 1569 | j.playlists.map((p, i) => `${i + 1}. ${p.title} (${p.track_count} tracks)`).join('\n') +
|
|---|
| 1570 | '\n\nKies een nummer om in te voegen, leeg = nieuwe maken:'
|
|---|
| 1571 | );
|
|---|
| 1572 | if (choice && /^\d+$/.test(choice.trim())) {
|
|---|
| 1573 | const idx = parseInt(choice.trim(), 10) - 1;
|
|---|
| 1574 | if (idx >= 0 && idx < j.playlists.length) {
|
|---|
| 1575 | insertChip('playlist', j.playlists[idx].id);
|
|---|
| 1576 | return;
|
|---|
| 1577 | }
|
|---|
| 1578 | }
|
|---|
| 1579 | if (choice === null) return;
|
|---|
| 1580 | }
|
|---|
| 1581 | } catch (_) { /* fall through to create */ }
|
|---|
| 1582 |
|
|---|
| 1583 | window.openPlaylistEditor({
|
|---|
| 1584 | mode: 'create',
|
|---|
| 1585 | onSaved: ({ id }) => insertChip('playlist', id),
|
|---|
| 1586 | });
|
|---|
| 1587 | });
|
|---|
| 1588 | }
|
|---|
| 1589 |
|
|---|
| 1590 | // ── Submit: serialize editor contents into the hidden field
|
|---|
| 1591 | if (form && hiddenField) {
|
|---|
| 1592 | form.addEventListener('submit', () => {
|
|---|
| 1593 | const clone = editor.cloneNode(true);
|
|---|
| 1594 | serializeChips(clone);
|
|---|
| 1595 | hiddenField.value = clone.innerHTML;
|
|---|
| 1596 | });
|
|---|
| 1597 | }
|
|---|
| 1598 | })();
|
|---|
| 1599 | </script>
|
|---|
| 1600 |
|
|---|
| 1601 | <%# ── Track picker modal (P59). Mobile-first: full-screen sheet on small
|
|---|
| 1602 | viewports, centered modal on ≥640px. Populated lazily on first open. %>
|
|---|
| 1603 | <% if (typeof user !== 'undefined' && user) { %>
|
|---|
| 1604 | <div id="track-picker" class="tp-modal" hidden aria-hidden="true">
|
|---|
| 1605 | <div class="tp-backdrop" data-tp-close></div>
|
|---|
| 1606 | <div class="tp-sheet" role="dialog" aria-modal="true" aria-labelledby="tp-title">
|
|---|
| 1607 | <header class="tp-header">
|
|---|
| 1608 | <h2 id="tp-title" class="tp-h2">Track invoegen</h2>
|
|---|
| 1609 | <button type="button" class="tp-close" data-tp-close aria-label="Sluiten">
|
|---|
| 1610 | <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
|
|---|
| 1611 | </button>
|
|---|
| 1612 | </header>
|
|---|
| 1613 | <div class="tp-search-row">
|
|---|
| 1614 | <span class="tp-search-icon" aria-hidden="true">
|
|---|
| 1615 | <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="7"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
|
|---|
| 1616 | </span>
|
|---|
| 1617 | <input type="search" class="tp-search" id="tp-search" placeholder="Zoek op titel of artiest…" autocomplete="off" inputmode="search">
|
|---|
| 1618 | </div>
|
|---|
| 1619 | <div class="tp-list" id="tp-list" role="listbox" aria-label="Tracks">
|
|---|
| 1620 | <div class="tp-empty" id="tp-empty">Tracks laden…</div>
|
|---|
| 1621 | </div>
|
|---|
| 1622 | </div>
|
|---|
| 1623 | </div>
|
|---|
| 1624 | <% } %>
|
|---|
| 1625 |
|
|---|
| 1626 | <%# Playlist editor modal — included so its global window.openPlaylistEditor
|
|---|
| 1627 | is available when the toolbar button fires. Only renders if user can post. %>
|
|---|
| 1628 | <% if (typeof user !== 'undefined' && user) { %>
|
|---|
| 1629 | <%- include('../partials/playlist-editor', { csrfToken: (typeof csrfToken !== 'undefined' ? csrfToken : '') }) %>
|
|---|
| 1630 | <% } %>
|
|---|
| 1631 |
|
|---|
| 1632 | <script>
|
|---|
| 1633 | (function () {
|
|---|
| 1634 | // Vastpinnen: checkbox toggelt het verborgen rang-veld (0 = niet gepind),
|
|---|
| 1635 | // ▲▼ verschuift de plek, met een leesbare beschrijving i.p.v. een ruw getal.
|
|---|
| 1636 | var toggle = document.getElementById('pin-toggle');
|
|---|
| 1637 | var rank = document.getElementById('pin-rank');
|
|---|
| 1638 | var pos = document.getElementById('pin-pos');
|
|---|
| 1639 | var label = document.getElementById('pin-label');
|
|---|
| 1640 | var up = document.getElementById('pin-up'); // hoger = lager getal (richting 1/bovenaan)
|
|---|
| 1641 | var down = document.getElementById('pin-down');
|
|---|
| 1642 | if (!toggle || !rank || !pos) return;
|
|---|
| 1643 |
|
|---|
| 1644 | function descr(n) {
|
|---|
| 1645 | n = Number(n) || 0;
|
|---|
| 1646 | if (n <= 1) return 'bovenaan';
|
|---|
| 1647 | return n + 'e van boven';
|
|---|
| 1648 | }
|
|---|
| 1649 | function render() {
|
|---|
| 1650 | var on = toggle.checked;
|
|---|
| 1651 | pos.hidden = !on;
|
|---|
| 1652 | if (on && Number(rank.value) < 1) rank.value = 1;
|
|---|
| 1653 | if (!on) rank.value = 0;
|
|---|
| 1654 | if (label) label.textContent = on ? descr(rank.value) : '';
|
|---|
| 1655 | if (up) up.disabled = Number(rank.value) <= 1;
|
|---|
| 1656 | }
|
|---|
| 1657 | toggle.addEventListener('change', render);
|
|---|
| 1658 | if (up) up.addEventListener('click', function () { rank.value = Math.max(1, (Number(rank.value) || 1) - 1); render(); });
|
|---|
| 1659 | if (down) down.addEventListener('click', function () { rank.value = (Number(rank.value) || 0) + 1; render(); });
|
|---|
| 1660 | render();
|
|---|
| 1661 | })();
|
|---|
| 1662 |
|
|---|
| 1663 | (function () {
|
|---|
| 1664 | // De Opslaan/Annuleren-balk (position: sticky; bottom:0) net boven twee mogelijke
|
|---|
| 1665 | // obstakels houden door een dynamische bottom-offset te zetten = het grootste van:
|
|---|
| 1666 | // 1) de hoogte van het toetsenbord-deel dat de layout-viewport NIET dekt
|
|---|
| 1667 | // (op iOS verschuift de visual viewport; op Android verkleint de layout-
|
|---|
| 1668 | // viewport door interactive-widget=resizes-content → offset ≈ 0);
|
|---|
| 1669 | // 2) de hoogte van de spelende audiospeler (fixed, z-index 1000).
|
|---|
| 1670 | // We blijven bij sticky (geen fixed/top-gegoochel → geen balk midden in beeld).
|
|---|
| 1671 | var bar = document.querySelector('.pe-actions');
|
|---|
| 1672 | if (!bar) return;
|
|---|
| 1673 | var vv = window.visualViewport;
|
|---|
| 1674 | function position() {
|
|---|
| 1675 | var ap = document.querySelector('.audio-player');
|
|---|
| 1676 | var playing = document.body.classList.contains('has-audio-player') &&
|
|---|
| 1677 | ap && getComputedStyle(ap).display !== 'none';
|
|---|
| 1678 | var audioOffset = playing ? Math.round(ap.getBoundingClientRect().height) : 0;
|
|---|
| 1679 | var kbCovered = vv ? Math.max(0, Math.round(window.innerHeight - vv.height - vv.offsetTop)) : 0;
|
|---|
| 1680 | var offset = Math.max(audioOffset, kbCovered);
|
|---|
| 1681 | bar.style.bottom = offset ? offset + 'px' : '';
|
|---|
| 1682 | }
|
|---|
| 1683 | position();
|
|---|
| 1684 | window.addEventListener('resize', position);
|
|---|
| 1685 | if (vv) { vv.addEventListener('resize', position); vv.addEventListener('scroll', position); }
|
|---|
| 1686 | // has-audio-player wisselt via een body-class → daarop reageren.
|
|---|
| 1687 | try { new MutationObserver(position).observe(document.body, { attributes: true, attributeFilter: ['class'] }); } catch (_) {}
|
|---|
| 1688 | })();
|
|---|
| 1689 | </script>
|
|---|
![(please configure the [header_logo] section in trac.ini)](/chrome/site/your_project_logo.png){kind=logo}
