From 0e1eb25649760feec994c26ac41d267ffcb67ea4 Mon Sep 17 00:00:00 2001 From: Frank Meeuwsen Date: Fri, 12 Dec 2025 08:34:45 +0100 Subject: [PATCH] chore: session end - stellingkast en drag-drop features toegevoegd --- CLAUDE.md | 17 +++ agents.md | 20 +++- config.json | 38 +++++-- editor.css | 149 +++++++++++++++++++++++++- editor.html | 19 +++- editor.js | 259 ++++++++++++++++++++++++++++++++++++++++------ gemini.md | 20 +++- stellingkast.json | 202 ++++++++++++++++++++++++++++++++++++ 8 files changed, 675 insertions(+), 49 deletions(-) create mode 100644 stellingkast.json diff --git a/CLAUDE.md b/CLAUDE.md index ff361d3..72e238c 100644 --- a/CLAUDE.md +++ b/CLAUDE.md @@ -152,3 +152,20 @@ Tijdens gebruik bleek de knop onderaan moeilijk leesbaar door de overlay, en de - Alle wijzigingen getest en werkend - Gecommit en gepusht naar remote (commit e1f1659) - UX verbeterd voor workshop gebruik + +### 2025-12-12 - Stellingkast en Drag & Drop +**Nieuwe features:** +- **Stellingkast:** Nieuw inschuif-paneel in de editor om direct stellingen uit een bibliotheek (`stellingkast.json`) te importeren. +- **Drag & Drop:** Stellingen kunnen nu in de editor versleept worden om de volgorde aan te passen. +- **Cache Busting:** Toegevoegd aan fetch calls om laadproblemen met verouderde JSON bestanden te voorkomen. +- **Validatie:** `stellingkast.json` is opgeschoond en bevat nu valide JSON. + +**Gewijzigde bestanden:** +- `editor.html` - HTML structuur voor Stellingkast panel en nieuwe header knop +- `editor.css` - Styling voor slide-in panel, sleep-handvatten en responsive design +- `editor.js` - Logica voor drag & drop, stellingkast import, verbeterde foutafhandeling en loading states +- `stellingkast.json` - Opgeschoond (regelnummers verwijderd) + +**Status:** +- Features volledig werkend en getest in browser +- Editor robuuster gemaakt tegen laadfouten \ No newline at end of file diff --git a/agents.md b/agents.md index 5b26e83..c4a98ea 100644 --- a/agents.md +++ b/agents.md @@ -1,7 +1,6 @@ # agents.md > Deze file wordt automatisch gesynchroniseerd met CLAUDE.md -> Laatste sync: 2025-11-14 21:45 - +> Laatste sync: 2025-12-12 08:35 # IJsbreker Workshop Spel Browser-based interactief workshop spel waarbij deelnemers fysiek kiezen tussen twee stellingen die op een beamer worden getoond. @@ -156,3 +155,20 @@ Tijdens gebruik bleek de knop onderaan moeilijk leesbaar door de overlay, en de - Alle wijzigingen getest en werkend - Gecommit en gepusht naar remote (commit e1f1659) - UX verbeterd voor workshop gebruik + +### 2025-12-12 - Stellingkast en Drag & Drop +**Nieuwe features:** +- **Stellingkast:** Nieuw inschuif-paneel in de editor om direct stellingen uit een bibliotheek (`stellingkast.json`) te importeren. +- **Drag & Drop:** Stellingen kunnen nu in de editor versleept worden om de volgorde aan te passen. +- **Cache Busting:** Toegevoegd aan fetch calls om laadproblemen met verouderde JSON bestanden te voorkomen. +- **Validatie:** `stellingkast.json` is opgeschoond en bevat nu valide JSON. + +**Gewijzigde bestanden:** +- `editor.html` - HTML structuur voor Stellingkast panel en nieuwe header knop +- `editor.css` - Styling voor slide-in panel, sleep-handvatten en responsive design +- `editor.js` - Logica voor drag & drop, stellingkast import, verbeterde foutafhandeling en loading states +- `stellingkast.json` - Opgeschoond (regelnummers verwijderd) + +**Status:** +- Features volledig werkend en getest in browser +- Editor robuuster gemaakt tegen laadfouten \ No newline at end of file diff --git a/config.json b/config.json index cdc930b..fdcd7c0 100644 --- a/config.json +++ b/config.json @@ -12,33 +12,49 @@ "rechts": "Thee" }, { - "links": "Friet", - "rechts": "Patat" + "links": "Structurele planner", + "rechts": "Creatieve chaoot" }, { "links": "Ik gebruik meer sneltoetsen", "rechts": "Ik ben van team muisgebruik" }, - { - "links": "Ik vind eenvoudig mijn eigen informatie terug", - "rechts": "Ik ben constant alles kwijt" - }, { "links": "We hebben duidelijke afspraken over naamgeving van bestanden", "rechts": "Mijn naamgeving van bestanden is veel logischer" }, + { + "links": "Mappenstructuur", + "rechts": "Zoekfunctie" + }, { "links": "Ik maak eigen notities op één plek", "rechts": "Ik maak overal notities en zoek me suf" }, { - "links": "❤️ ❤️ ❤️ Notitie en memo templates ", - "rechts": "☠️☠️☠️ Wie bedenkt die templates?" + "links": "Samenwerken in één document", + "rechts": "Concept_versie_3_def_final.docx mailen" }, { - "links": "Zin in de dag!", - "rechts": "Wat gaan we doen?" + "links": "Mijn TO-DO lijst is actueel", + "rechts": "Mijn TO-DO lijst is fictie" + }, + { + "links": "Ik gebruik tags en labels", + "rechts": "Ik stop alles in mapjes" + }, + { + "links": "Browser met 50+ open tabbladen", + "rechts": "Opgeruimde browser" + }, + { + "links": "Kennis zit in mijn hoofd", + "rechts": "Kennis staat in het systeem" + }, + { + "links": "Ik kom vandaag vooral halen", + "rechts": "Ik kom vandaag ook brengen" } ], - "timer": 2 + "timer": 10 } \ No newline at end of file diff --git a/editor.css b/editor.css index b8835ee..40f787c 100644 --- a/editor.css +++ b/editor.css @@ -62,6 +62,12 @@ section h2 { margin-bottom: 1.5rem; } +.header-controls { + display: flex; + align-items: center; + gap: 1rem; +} + .count-badge { background: #E5E7EB; color: #4B5563; @@ -121,20 +127,38 @@ section h2 { .statement-row { display: grid; - grid-template-columns: 1fr 1fr auto; + grid-template-columns: auto 1fr 1fr auto; gap: 1rem; align-items: center; padding: 1rem; background: #F9FAFB; border-radius: 8px; border: 2px solid #E5E7EB; - transition: border-color 0.2s; + transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s; + user-select: none; /* Prevent text selection while dragging */ } .statement-row:hover { border-color: #D1D5DB; } +.statement-row.dragging { + opacity: 0.5; + background: #E5E7EB; + border-style: dashed; +} + +.drag-handle { + cursor: grab; + color: #9CA3AF; + font-size: 1.2rem; + padding: 0.5rem; +} + +.drag-handle:hover { + color: #4B5563; +} + .statement-input { display: flex; flex-direction: column; @@ -251,6 +275,109 @@ section h2 { color: #991B1B; } +/* Stellingkast Panel */ +.stellingkast-panel { + position: fixed; + top: 0; + right: -400px; /* Start hidden */ + width: 400px; + height: 100vh; + background: white; + box-shadow: -4px 0 15px rgba(0, 0, 0, 0.1); + z-index: 1000; + transition: right 0.3s ease-in-out; + display: flex; + flex-direction: column; +} + +.stellingkast-panel.open { + right: 0; +} + +.panel-header { + padding: 1.5rem; + background: #F3F4F6; + border-bottom: 1px solid #E5E7EB; + display: flex; + justify-content: space-between; + align-items: center; +} + +.panel-header h2 { + margin: 0; + font-size: 1.2rem; +} + +.btn-close { + background: none; + border: none; + font-size: 2rem; + color: #6B7280; + cursor: pointer; + padding: 0 0.5rem; +} + +.panel-content { + flex: 1; + overflow-y: auto; + padding: 1.5rem; + display: flex; + flex-direction: column; + gap: 1rem; +} + +.search-input { + width: 100%; + padding: 0.75rem; + border: 2px solid #E5E7EB; + border-radius: 8px; + font-size: 1rem; +} + +.stellingkast-item { + background: #F9FAFB; + border: 1px solid #E5E7EB; + border-radius: 8px; + padding: 1rem; + transition: all 0.2s; +} + +.stellingkast-item:hover { + border-color: #3B82F6; + background: #F0F9FF; +} + +.stelling-text { + display: flex; + justify-content: space-between; + margin-bottom: 0.8rem; + font-size: 0.9rem; +} + +.stelling-label { + font-weight: 600; + color: #6B7280; + font-size: 0.7rem; + text-transform: uppercase; + display: block; + margin-bottom: 0.2rem; +} + +.btn-import { + width: 100%; + background: #3B82F6; + color: white; + padding: 0.5rem; + border: none; + border-radius: 6px; + font-weight: 600; + cursor: pointer; +} + +.btn-import:hover { + background: #2563EB; +} + /* Responsive */ @media (max-width: 768px) { .container { @@ -264,10 +391,24 @@ section h2 { } .statement-row { - grid-template-columns: 1fr; + grid-template-columns: auto 1fr; /* Adjusted for handle */ + } + + .statement-row .statement-input { + grid-column: 2; /* Move inputs to second column */ + } + + .statement-row .btn-remove { + grid-column: 2; + justify-self: end; + } + + .stellingkast-panel { + width: 100%; /* Full width on mobile */ + right: -100%; } .settings-grid { grid-template-columns: 1fr; } -} +} \ No newline at end of file diff --git a/editor.html b/editor.html index 084dffa..36a2d18 100644 --- a/editor.html +++ b/editor.html @@ -53,7 +53,10 @@

📝 Stellingen

- 0 stellingen +
+ + 0 stellingen +
@@ -65,6 +68,20 @@
+ +
+
+

📚 Stellingkast

+ +
+
+ +
+ +
+
+
+
+ `; + + // Add event listener + const btn = el.querySelector('.btn-import'); + if (btn) { + btn.addEventListener('click', () => { + importStelling(item); + }); + } + + stellingkastList.appendChild(el); + }); +} + +function importStelling(item) { + if (!config) config = { stellingen: [] }; + if (!config.stellingen) config.stellingen = []; + + // Voeg toe aan config + config.stellingen.push({ ...item }); // Kopie om referentie issues te voorkomen + + // Render opnieuw + renderStatements(); + + // Scroll naar beneden + const newRow = statementsList.lastElementChild; + if (newRow) { + newRow.scrollIntoView({ behavior: 'smooth' }); + } + + // Feedback + showStatus('Stelling geïmporteerd!', 'success'); } // Event listeners -addStatementBtn.addEventListener('click', addNewStatement); -saveConfigBtn.addEventListener('click', saveConfig); +if (addStatementBtn) addStatementBtn.addEventListener('click', addNewStatement); +if (saveConfigBtn) saveConfigBtn.addEventListener('click', saveConfig); + +// Stellingkast events +if (openStellingkastBtn) { + openStellingkastBtn.addEventListener('click', () => { + stellingkastPanel.classList.add('open'); + }); +} + +if (closeStellingkastBtn) { + closeStellingkastBtn.addEventListener('click', () => { + stellingkastPanel.classList.remove('open'); + }); +} + +// Zoek functionaliteit +if (searchStellingkastInput) { + searchStellingkastInput.addEventListener('input', (e) => { + const term = e.target.value.toLowerCase(); + if (stellingkastItems) { + const filtered = stellingkastItems.filter(item => + (item.links && item.links.toLowerCase().includes(term)) || + (item.rechts && item.rechts.toLowerCase().includes(term)) + ); + renderStellingkastList(filtered); + } + }); +} + +// Klik buiten panel om te sluiten +document.addEventListener('click', (e) => { + if (stellingkastPanel && stellingkastPanel.classList.contains('open') && + !stellingkastPanel.contains(e.target) && + e.target !== openStellingkastBtn) { + stellingkastPanel.classList.remove('open'); + } +}); // Keyboard shortcuts document.addEventListener('keydown', (e) => { @@ -230,8 +431,8 @@ document.addEventListener('keydown', (e) => { e.preventDefault(); saveConfig(); } + // Escape sluit panel + if (e.key === 'Escape' && stellingkastPanel && stellingkastPanel.classList.contains('open')) { + stellingkastPanel.classList.remove('open'); + } }); - -// Initialize -syncColorInputs(); -loadConfig(); diff --git a/gemini.md b/gemini.md index b7d4a16..2c49e4c 100644 --- a/gemini.md +++ b/gemini.md @@ -1,7 +1,6 @@ # gemini.md > Deze file wordt automatisch gesynchroniseerd met CLAUDE.md -> Laatste sync: 2025-11-14 21:45 - +> Laatste sync: 2025-12-12 08:35 # IJsbreker Workshop Spel Browser-based interactief workshop spel waarbij deelnemers fysiek kiezen tussen twee stellingen die op een beamer worden getoond. @@ -156,3 +155,20 @@ Tijdens gebruik bleek de knop onderaan moeilijk leesbaar door de overlay, en de - Alle wijzigingen getest en werkend - Gecommit en gepusht naar remote (commit e1f1659) - UX verbeterd voor workshop gebruik + +### 2025-12-12 - Stellingkast en Drag & Drop +**Nieuwe features:** +- **Stellingkast:** Nieuw inschuif-paneel in de editor om direct stellingen uit een bibliotheek (`stellingkast.json`) te importeren. +- **Drag & Drop:** Stellingen kunnen nu in de editor versleept worden om de volgorde aan te passen. +- **Cache Busting:** Toegevoegd aan fetch calls om laadproblemen met verouderde JSON bestanden te voorkomen. +- **Validatie:** `stellingkast.json` is opgeschoond en bevat nu valide JSON. + +**Gewijzigde bestanden:** +- `editor.html` - HTML structuur voor Stellingkast panel en nieuwe header knop +- `editor.css` - Styling voor slide-in panel, sleep-handvatten en responsive design +- `editor.js` - Logica voor drag & drop, stellingkast import, verbeterde foutafhandeling en loading states +- `stellingkast.json` - Opgeschoond (regelnummers verwijderd) + +**Status:** +- Features volledig werkend en getest in browser +- Editor robuuster gemaakt tegen laadfouten \ No newline at end of file diff --git a/stellingkast.json b/stellingkast.json new file mode 100644 index 0000000..ae7d273 --- /dev/null +++ b/stellingkast.json @@ -0,0 +1,202 @@ +[ + { + "links": "Inbox Zero held", + "rechts": "1000+ ongelezen mails" + }, + { + "links": "Mappenstructuur", + "rechts": "Zoekfunctie" + }, + { + "links": "Alles digitaal", + "rechts": "Mijn papieren notitieboek is heilig" + }, + { + "links": "Samenwerken in één document", + "rechts": "Concept_versie_3_def_final.docx mailen" + }, + { + "links": "Camera aan tijdens Teams", + "rechts": "Lekker onzichtbaar luisteren" + }, + { + "links": "Direct archiveren", + "rechts": "Dat zoek ik later wel uit" + }, + { + "links": "Notificaties staan altijd uit", + "rechts": "Ik reageer direct op elke 'pling'" + }, + { + "links": "Ik deel ook onaf werk (WIP)", + "rechts": "Ik deel pas als het perfect is" + }, + { + "links": "Eén groot beeldscherm", + "rechts": "Twee (of meer) schermen" + }, + { + "links": "Microsoft OneNote / Teams", + "rechts": "Obsidian / Notion / Roam" + }, + { + "links": "Alles in de cloud", + "rechts": "Lokaal op mijn bureaublad" + }, + { + "links": "Ik lees uitgebreide stukken", + "rechts": "Geef mij maar een samenvatting" + }, + { + "links": "Agenda blokken voor focus", + "rechts": "Mijn deur staat altijd open (digitaal)" + }, + { + "links": "Ik weet wat de AVG van me vraagt", + "rechts": "Privacy is voor de juristen" + }, + { + "links": "Ik gebruik tags en labels", + "rechts": "Ik stop alles in mapjes" + }, + { + "links": "AI helpt me dagelijks (ChatGPT e.d.)", + "rechts": "Mag dat wel van de IT-afdeling?" + }, + { + "links": "Browser met 50+ open tabbladen", + "rechts": "Opgeruimde browser" + }, + { + "links": "Vergaderen is werken", + "rechts": "Vergaderen houdt me van mijn werk" + }, + { + "links": "Kennis zit in mijn hoofd", + "rechts": "Kennis staat in het systeem" + }, + { + "links": "Ik noteer bronnen meteen", + "rechts": "Waar had ik dat ook alweer gelezen?" + }, + { + "links": "Linkjes delen", + "rechts": "Bijlagen sturen" + }, + { + "links": "Structurele planner", + "rechts": "Creatieve chaoot" + }, + { + "links": "Ik leer door te lezen", + "rechts": "Ik leer door te doen" + }, + { + "links": "Mijn 'Te Lezen' lijst wordt korter", + "rechts": "Mijn 'Te Lezen' lijst is een kerkhof" + }, + { + "links": "Ik kom vandaag vooral halen", + "rechts": "Ik kom vandaag ook brengen" + }, + { + "links": "Digitale agenda", + "rechts": "Papieren agenda" + }, + { + "links": "Inbox zero is het doel", + "rechts": "Inbox zero is een mythe" + }, + { + "links": "Ik hou van een opgeruimd bureaublad", + "rechts": "Chaos is mijn systeem" + }, + { + "links": "Ik heb één centrale werkplek", + "rechts": "Ik werk waar het nodig is" + }, + { + "links": "Structuur eerst, dan content", + "rechts": "Content eerst, structuur later" + }, + { + "links": "Vergadernotulen zijn heilig", + "rechts": "Wie leest die notulen nou?" + }, + { + "links": "Mijn mappenstructuur is doordacht", + "rechts": "Ik gebruik vooral de zoekfunctie" + }, + { + "links": "Ik lees vergaderstukken vooraf", + "rechts": "Tijdens de vergadering is vroeg genoeg" + }, + { + "links": "Kennisdeling is prioriteit", + "rechts": "Kennisdeling kost te veel tijd" + }, + { + "links": "Taggen van documenten helpt echt", + "rechts": "Taggen is extra werk zonder meerwaarde" + }, + { + "links": "Samenwerken in gedeelde documenten", + "rechts": "Liever versies heen en weer mailen" + }, + { + "links": "Ik neem notities tijdens vergaderingen", + "rechts": "Ik vertrouw op mijn geheugen" + }, + { + "links": "Ons intranet is nuttig", + "rechts": "Ons intranet is een zwart gat" + }, + { + "links": "Afspraken vastleggen in het systeem", + "rechts": "Afspraken blijven in mijn hoofd" + }, + { + "links": "Ik archiveer regelmatig", + "rechts": "Alles staat er nog, voor de zekerheid" + }, + { + "links": "Liever te veel documenteren", + "rechts": "Liever te weinig documenteren" + }, + { + "links": "Workflows zijn nuttig", + "rechts": "Workflows remmen creativiteit" + }, + { + "links": "Digitaal ondertekenen is handig", + "rechts": "Geef mij maar papier en pen" + }, + { + "links": "We delen kennis goed binnen het team", + "rechts": "Kennis zit vooral in hoofden" + }, + { + "links": "Mijn TO-DO lijst is actueel", + "rechts": "Mijn TO-DO lijst is fictie" + }, + { + "links": "Ik weet wat collega's aan het doen zijn", + "rechts": "Ik heb geen idee waar anderen mee bezig zijn" + }, + { + "links": "Minder vergaderen, meer documenteren", + "rechts": "Beter overleggen dan documenteren" + }, + { + "links": "Ik vertrouw op automatische backups", + "rechts": "Ik maak liever zelf kopieën" + }, + { + "links": "Cloud-opslag voor alles", + "rechts": "Lokaal opslaan blijft veiliger" + }, + { + "links": "Onze afspraken over informatie werken", + "rechts": "Iedereen doet toch maar wat" + } +] \ No newline at end of file