Update timestamps in nitro.json and latest.json; modify client manifest for asset management; enhance history and rules editing features in CMS with new templates and improved toolbar layout.
This commit is contained in:
Torsten Schulz (local)
@@ -13,18 +13,38 @@
|
||||
</div>
|
||||
|
||||
<!-- Fixed Toolbar below header -->
|
||||
<div class="fixed top-28 sm:top-32 left-0 right-0 z-30 bg-white border-b border-gray-200 shadow-sm">
|
||||
<div class="fixed left-0 right-0 z-30 bg-white border-b border-gray-200 shadow-sm" style="top: 9.5rem;">
|
||||
<div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="flex flex-wrap items-center gap-1 sm:gap-2 py-1.5 sm:py-2">
|
||||
<button class="px-2 py-1 sm:px-3 sm:py-1 rounded border hover:bg-gray-50 text-xs sm:text-sm" @click="format('bold')"><strong>B</strong></button>
|
||||
<button class="px-2 py-1 sm:px-3 sm:py-1 rounded border hover:bg-gray-50 text-xs sm:text-sm" @click="format('italic')"><em>I</em></button>
|
||||
<button class="px-2 py-1 sm:px-3 sm:py-1 rounded border hover:bg-gray-50 text-xs sm:text-sm" @click="formatHeader(1)">H1</button>
|
||||
<button class="px-2 py-1 sm:px-3 sm:py-1 rounded border hover:bg-gray-50 text-xs sm:text-sm" @click="formatHeader(2)">H2</button>
|
||||
<button class="px-2 py-1 sm:px-3 sm:py-1 rounded border hover:bg-gray-50 text-xs sm:text-sm" @click="formatHeader(3)">H3</button>
|
||||
<button class="px-2 py-1 sm:px-3 sm:py-1 rounded border hover:bg-gray-50 text-xs sm:text-sm" @click="format('insertUnorderedList')">•</button>
|
||||
<button class="px-2 py-1 sm:px-3 sm:py-1 rounded border hover:bg-gray-50 text-xs sm:text-sm" @click="format('insertOrderedList')">1.</button>
|
||||
<button class="px-2 py-1 sm:px-3 sm:py-1 rounded border hover:bg-gray-50 text-xs sm:text-sm" @click="createLink()">Link</button>
|
||||
<button class="px-2 py-1 sm:px-3 sm:py-1 rounded border hover:bg-gray-50 text-xs sm:text-sm" @click="removeFormat()">Clear</button>
|
||||
<!-- Formatierung -->
|
||||
<div class="flex items-center gap-1 border-r pr-2 mr-2">
|
||||
<button class="px-2 py-1 sm:px-3 sm:py-1 rounded border hover:bg-gray-50 text-xs sm:text-sm" @click="format('bold')"><strong>B</strong></button>
|
||||
<button class="px-2 py-1 sm:px-3 sm:py-1 rounded border hover:bg-gray-50 text-xs sm:text-sm" @click="format('italic')"><em>I</em></button>
|
||||
<button class="px-2 py-1 sm:px-3 sm:py-1 rounded border hover:bg-gray-50 text-xs sm:text-sm" @click="formatHeader(1)">H1</button>
|
||||
<button class="px-2 py-1 sm:px-3 sm:py-1 rounded border hover:bg-gray-50 text-xs sm:text-sm" @click="formatHeader(2)">H2</button>
|
||||
<button class="px-2 py-1 sm:px-3 sm:py-1 rounded border hover:bg-gray-50 text-xs sm:text-sm" @click="formatHeader(3)">H3</button>
|
||||
</div>
|
||||
|
||||
<!-- Listen -->
|
||||
<div class="flex items-center gap-1 border-r pr-2 mr-2">
|
||||
<button class="px-2 py-1 sm:px-3 sm:py-1 rounded border hover:bg-gray-50 text-xs sm:text-sm" @click="format('insertUnorderedList')">•</button>
|
||||
<button class="px-2 py-1 sm:px-3 sm:py-1 rounded border hover:bg-gray-50 text-xs sm:text-sm" @click="format('insertOrderedList')">1.</button>
|
||||
</div>
|
||||
|
||||
<!-- Schnellzugriff für Geschichts-Abschnitte -->
|
||||
<div class="flex items-center gap-1 border-r pr-2 mr-2">
|
||||
<button class="px-2 py-1 sm:px-3 sm:py-1 rounded bg-gray-100 hover:bg-gray-200 text-gray-700 text-xs sm:text-sm" @click="insertHistoryTemplate('generic')">Neuer Abschnitt</button>
|
||||
<button class="px-2 py-1 sm:px-3 sm:py-1 rounded bg-blue-100 hover:bg-blue-200 text-blue-700 text-xs sm:text-sm" @click="insertHistoryTemplate('founding')">Gründung</button>
|
||||
<button class="px-2 py-1 sm:px-3 sm:py-1 rounded bg-green-100 hover:bg-green-200 text-green-700 text-xs sm:text-sm" @click="insertHistoryTemplate('milestone')">Meilenstein</button>
|
||||
<button class="px-2 py-1 sm:px-3 sm:py-1 rounded bg-yellow-100 hover:bg-yellow-200 text-yellow-700 text-xs sm:text-sm" @click="insertHistoryTemplate('achievement')">Erfolg</button>
|
||||
<button class="px-2 py-1 sm:px-3 sm:py-1 rounded bg-red-100 hover:bg-red-200 text-red-700 text-xs sm:text-sm" @click="deleteCurrentSection()">Abschnitt löschen</button>
|
||||
</div>
|
||||
|
||||
<!-- Weitere Tools -->
|
||||
<div class="flex items-center gap-1">
|
||||
<button class="px-2 py-1 sm:px-3 sm:py-1 rounded border hover:bg-gray-50 text-xs sm:text-sm" @click="createLink()">Link</button>
|
||||
<button class="px-2 py-1 sm:px-3 sm:py-1 rounded border hover:bg-gray-50 text-xs sm:text-sm" @click="removeFormat()">Clear</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -88,5 +108,235 @@ function removeFormat() {
|
||||
document.execCommand('removeFormat', false, null)
|
||||
}
|
||||
|
||||
function insertHistoryTemplate(type) {
|
||||
const editorElement = editor.value
|
||||
if (!editorElement) return
|
||||
|
||||
let template = ''
|
||||
|
||||
switch (type) {
|
||||
case 'generic':
|
||||
template = `
|
||||
<div class="bg-gray-50/30 p-6 rounded-xl shadow-lg border-l-4 border-primary-600">
|
||||
<h3 class="text-xl font-display font-bold text-gray-900 mb-3">Neuer Geschichts-Abschnitt</h3>
|
||||
<p class="text-gray-600 mb-3"><strong>Zeitraum:</strong> [Jahr oder Zeitraum]<br><strong>Ereignis:</strong> [Was ist passiert?]<br><strong>Bedeutung:</strong> [Warum war das wichtig?]</p>
|
||||
<p class="text-gray-600"><strong>Details:</strong> [Weitere Informationen hier eingeben...]</p>
|
||||
</div>
|
||||
`
|
||||
break
|
||||
case 'founding':
|
||||
template = `
|
||||
<div class="bg-blue-50/30 p-6 rounded-xl shadow-lg border-l-4 border-primary-600">
|
||||
<h3 class="text-xl font-display font-bold text-gray-900 mb-3">Gründung des Vereins</h3>
|
||||
<p class="text-gray-600 mb-3"><strong>Datum:</strong> [Gründungsdatum]<br><strong>Gründer:</strong> [Wer hat den Verein gegründet?]<br><strong>Zweck:</strong> [Was war das Ziel?]</p>
|
||||
<p class="text-gray-600"><strong>Gründungsgeschichte:</strong> [Wie kam es zur Gründung? Was waren die Umstände?]</p>
|
||||
</div>
|
||||
`
|
||||
break
|
||||
case 'milestone':
|
||||
template = `
|
||||
<div class="bg-green-50/30 p-6 rounded-xl shadow-lg border-l-4 border-primary-600">
|
||||
<h3 class="text-xl font-display font-bold text-gray-900 mb-3">Wichtiger Meilenstein</h3>
|
||||
<p class="text-gray-600 mb-3"><strong>Jahr:</strong> [Wann ist das passiert?]<br><strong>Ereignis:</strong> [Was war der Meilenstein?]<br><strong>Auswirkung:</strong> [Wie hat das den Verein verändert?]</p>
|
||||
<p class="text-gray-600"><strong>Hintergrund:</strong> [Was führte zu diesem Ereignis? Wie wurde es erreicht?]</p>
|
||||
</div>
|
||||
`
|
||||
break
|
||||
case 'achievement':
|
||||
template = `
|
||||
<div class="bg-yellow-50/30 p-6 rounded-xl shadow-lg border-l-4 border-primary-600">
|
||||
<h3 class="text-xl font-display font-bold text-gray-900 mb-3">Großer Erfolg</h3>
|
||||
<p class="text-gray-600 mb-3"><strong>Jahr:</strong> [Wann war der Erfolg?]<br><strong>Erfolg:</strong> [Was wurde erreicht?]<br><strong>Beteiligte:</strong> [Wer war daran beteiligt?]</p>
|
||||
<p class="text-gray-600"><strong>Details:</strong> [Wie wurde der Erfolg erreicht? Was war besonders bemerkenswert?]</p>
|
||||
</div>
|
||||
`
|
||||
break
|
||||
}
|
||||
|
||||
// Editor fokussieren
|
||||
editorElement.focus()
|
||||
|
||||
const selection = window.getSelection()
|
||||
if (selection.rangeCount > 0) {
|
||||
const range = selection.getRangeAt(0)
|
||||
|
||||
// Prüfen ob der Cursor im Editor ist
|
||||
if (editorElement.contains(range.commonAncestorContainer) || editorElement === range.commonAncestorContainer) {
|
||||
// Aktuelles Element finden
|
||||
let currentElement = range.commonAncestorContainer
|
||||
|
||||
// Falls es ein Text-Node ist, zum Parent-Element gehen
|
||||
if (currentElement.nodeType === Node.TEXT_NODE) {
|
||||
currentElement = currentElement.parentElement
|
||||
}
|
||||
|
||||
// Zum Geschichts-Abschnitt navigieren (div mit border-l-4 border-primary-600)
|
||||
let sectionElement = currentElement
|
||||
while (sectionElement && sectionElement !== editorElement) {
|
||||
if (sectionElement.classList &&
|
||||
sectionElement.classList.contains('border-l-4') &&
|
||||
sectionElement.classList.contains('border-primary-600')) {
|
||||
break
|
||||
}
|
||||
sectionElement = sectionElement.parentElement
|
||||
}
|
||||
|
||||
if (sectionElement && sectionElement !== editorElement &&
|
||||
sectionElement.classList.contains('border-l-4') &&
|
||||
sectionElement.classList.contains('border-primary-600')) {
|
||||
|
||||
// Wir sind in einem Geschichts-Abschnitt - neuen Abschnitt danach einfügen
|
||||
const tempDiv = document.createElement('div')
|
||||
tempDiv.innerHTML = template
|
||||
|
||||
// Suche nach dem ersten Element-Node (nicht Text-Node)
|
||||
let newSection = null
|
||||
for (let i = 0; i < tempDiv.childNodes.length; i++) {
|
||||
if (tempDiv.childNodes[i].nodeType === Node.ELEMENT_NODE) {
|
||||
newSection = tempDiv.childNodes[i]
|
||||
break
|
||||
}
|
||||
}
|
||||
|
||||
if (newSection) {
|
||||
// Nach dem aktuellen Abschnitt einfügen
|
||||
if (sectionElement.nextSibling) {
|
||||
sectionElement.parentElement.insertBefore(newSection, sectionElement.nextSibling)
|
||||
} else {
|
||||
sectionElement.parentElement.appendChild(newSection)
|
||||
}
|
||||
|
||||
// Cursor in das neue Element setzen
|
||||
const newRange = document.createRange()
|
||||
const titleElement = newSection.querySelector('h3')
|
||||
if (titleElement) {
|
||||
newRange.setStart(titleElement, 0)
|
||||
newRange.collapse(true)
|
||||
selection.removeAllRanges()
|
||||
selection.addRange(newRange)
|
||||
}
|
||||
} else {
|
||||
console.error('No valid element found in template');
|
||||
}
|
||||
} else {
|
||||
// Kein Geschichts-Abschnitt gefunden - suche nach dem nächsten Geschichts-Abschnitt
|
||||
let nextSection = null
|
||||
let walker = document.createTreeWalker(
|
||||
editorElement,
|
||||
NodeFilter.SHOW_ELEMENT,
|
||||
{
|
||||
acceptNode: function(node) {
|
||||
if (node.classList &&
|
||||
node.classList.contains('border-l-4') &&
|
||||
node.classList.contains('border-primary-600')) {
|
||||
return NodeFilter.FILTER_ACCEPT
|
||||
}
|
||||
return NodeFilter.FILTER_SKIP
|
||||
}
|
||||
}
|
||||
)
|
||||
|
||||
// Finde den ersten Geschichts-Abschnitt nach dem aktuellen Element
|
||||
let node = walker.nextNode()
|
||||
while (node) {
|
||||
if (currentElement.compareDocumentPosition(node) & Node.DOCUMENT_POSITION_FOLLOWING) {
|
||||
nextSection = node
|
||||
break
|
||||
}
|
||||
node = walker.nextNode()
|
||||
}
|
||||
|
||||
const tempDiv = document.createElement('div')
|
||||
tempDiv.innerHTML = template
|
||||
|
||||
// Suche nach dem ersten Element-Node (nicht Text-Node)
|
||||
let newSection = null
|
||||
for (let i = 0; i < tempDiv.childNodes.length; i++) {
|
||||
if (tempDiv.childNodes[i].nodeType === Node.ELEMENT_NODE) {
|
||||
newSection = tempDiv.childNodes[i]
|
||||
break
|
||||
}
|
||||
}
|
||||
|
||||
if (newSection) {
|
||||
if (nextSection) {
|
||||
// Vor dem nächsten Geschichts-Abschnitt einfügen
|
||||
nextSection.parentElement.insertBefore(newSection, nextSection)
|
||||
} else {
|
||||
// Kein nächster Abschnitt gefunden - am Ende einfügen
|
||||
editorElement.appendChild(newSection)
|
||||
}
|
||||
|
||||
// Cursor in das neue Element setzen
|
||||
const newRange = document.createRange()
|
||||
const titleElement = newSection.querySelector('h3')
|
||||
if (titleElement) {
|
||||
newRange.setStart(titleElement, 0)
|
||||
newRange.collapse(true)
|
||||
selection.removeAllRanges()
|
||||
selection.addRange(newRange)
|
||||
}
|
||||
} else {
|
||||
console.error('No valid element found in template');
|
||||
}
|
||||
}
|
||||
} else {
|
||||
// Cursor ist nicht im Editor - Template am Ende einfügen
|
||||
editorElement.innerHTML += template
|
||||
}
|
||||
} else {
|
||||
// Keine Auswahl - Template am Ende einfügen
|
||||
editorElement.innerHTML += template
|
||||
}
|
||||
}
|
||||
|
||||
function deleteCurrentSection() {
|
||||
const editorElement = editor.value
|
||||
if (!editorElement) return
|
||||
|
||||
// Editor fokussieren
|
||||
editorElement.focus()
|
||||
|
||||
const selection = window.getSelection()
|
||||
if (selection.rangeCount > 0) {
|
||||
const range = selection.getRangeAt(0)
|
||||
|
||||
// Prüfen ob der Cursor im Editor ist
|
||||
if (editorElement.contains(range.commonAncestorContainer) || editorElement === range.commonAncestorContainer) {
|
||||
// Aktuelles Element finden
|
||||
let currentElement = range.commonAncestorContainer
|
||||
|
||||
// Falls es ein Text-Node ist, zum Parent-Element gehen
|
||||
if (currentElement.nodeType === Node.TEXT_NODE) {
|
||||
currentElement = currentElement.parentElement
|
||||
}
|
||||
|
||||
// Zum Geschichts-Abschnitt navigieren (div mit border-l-4 border-primary-600)
|
||||
let sectionElement = currentElement
|
||||
while (sectionElement && !(sectionElement.classList.contains('border-l-4') && sectionElement.classList.contains('border-primary-600'))) {
|
||||
sectionElement = sectionElement.parentElement
|
||||
}
|
||||
|
||||
if (sectionElement && sectionElement.classList.contains('border-l-4') && sectionElement.classList.contains('border-primary-600')) {
|
||||
// Geschichts-Abschnitt gefunden - löschen
|
||||
sectionElement.remove()
|
||||
|
||||
// Cursor in das nächste Element setzen
|
||||
const nextElement = editorElement.querySelector('.border-l-4.border-primary-600')
|
||||
if (nextElement) {
|
||||
const titleElement = nextElement.querySelector('h3')
|
||||
if (titleElement) {
|
||||
const newRange = document.createRange()
|
||||
newRange.setStart(titleElement, 0)
|
||||
newRange.collapse(true)
|
||||
selection.removeAllRanges()
|
||||
selection.addRange(newRange)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(load)
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user