Changeset 459acd9 in Klonkt

Timestamp:

06/20/2026 05:09:30 AM (3 months ago)

Author:

roboburr <roboburr@…>

Branches:

main

Children:

183875b

Parents:

3ec691c

Message:

feat(editor): © insert button next to the credit field

No more looking up ©: a button inserts the copyright symbol at the cursor
position in the Owner/credit field.

Co-Authored-By: Claude <noreply@…>

File:

• src/views/partials/track-editor.ejs (modified) (3 diffs)

src/views/partials/track-editor.ejs

@@ -194 +194 @@
   border-color: var(--accent);
 }
+
+/* ── Credit-veld met ©-invoegknop ──────────────────────────── */
+.te-credit-row { display: flex; gap: 0.4rem; align-items: stretch; }
+.te-credit-row input { flex: 1; min-width: 0; }
+.te-sym-btn {
+  flex: 0 0 auto;
+  width: 44px; min-height: 44px;
+  border: 1px solid var(--rule); border-radius: 6px;
+  background: var(--paper-2); color: var(--ink);
+  font-size: 1.1rem; cursor: pointer;
+  transition: border-color 120ms, background 120ms;
+}
+.te-sym-btn:hover { border-color: var(--accent); }
 
 /* ── Cover field with thumb + button + URL ─────────────────── */
@@ -389 +402 @@
               <label class="te-field">
                 <span>Eigenaar / credit <small>(copyright-houder)</small></span>
-                <input type="text" id="te-credit" maxlength="200"
-                       autocomplete="off" spellcheck="false"
-                       placeholder="bv. © 2025 Mara Vos"
-                       value="${esc(track.credit || '')}">
+                <div class="te-credit-row">
+                  <input type="text" id="te-credit" maxlength="200"
+                         autocomplete="off" spellcheck="false"
+                         placeholder="bv. © 2025 Mara Vos"
+                         value="${esc(track.credit || '')}">
+                  <button type="button" class="te-sym-btn" id="te-credit-copyr"
+                          title="© invoegen" aria-label="Copyright-teken invoegen">©</button>
+                </div>
               </label>
               <label class="te-field">
@@ -611 +628 @@
     }
 
+    // ── ©-teken invoegen in het credit-veld ─────────────────
+    const copyrBtn = $('#te-credit-copyr');
+    if (copyrBtn) {
+      copyrBtn.addEventListener('click', () => {
+        const inp = $('#te-credit');
+        if (!inp) return;
+        const sym = '© ';
+        const start = inp.selectionStart != null ? inp.selectionStart : inp.value.length;
+        const end = inp.selectionEnd != null ? inp.selectionEnd : inp.value.length;
+        inp.value = inp.value.slice(0, start) + sym + inp.value.slice(end);
+        inp.focus();
+        const pos = start + sym.length;
+        try { inp.setSelectionRange(pos, pos); } catch (e) {}
+      });
+    }
+
     // ── Save ────────────────────────────────────────────────
     $('#te-save').addEventListener('click', async () => {