Edwin Noorlander
dc0d370e65
- handleMediaList() now scans content/ recursively for all media files
- URLs use /-media/ prefix mapping directly to content/ (no special cases)
- index.php: added /-media/ route, kept /-assets/ for backward compat
- editor-toolbar.js: fixed editor.on('change') placement (was inside switchMode)
- content-edit.php and content-new.php: back-btn unsaved-changes detection
- Removed unused __editorCleanup global
284 lines
19 KiB
PHP
284 lines
19 KiB
PHP
<?php if ($editTheme): ?>
|
|
|
|
<!-- Edit theme -->
|
|
<div class="d-flex justify-content-between align-items-center mb-4">
|
|
<h2><i class="bi bi-palette"></i> Bewerk thema: <?= htmlspecialchars($editTheme['name'] ?? $editThemeName) ?></h2>
|
|
<a href="admin.php?route=theme" class="btn btn-outline-secondary btn-sm">
|
|
<i class="bi bi-arrow-left"></i> Terug
|
|
</a>
|
|
</div>
|
|
|
|
<div class="card shadow-sm">
|
|
<div class="card-body">
|
|
<form method="POST" action="admin.php?route=theme" enctype="multipart/form-data">
|
|
<input type="hidden" name="csrf_token" value="<?= $csrf ?>">
|
|
<input type="hidden" name="action" value="save">
|
|
<input type="hidden" name="theme" value="<?= htmlspecialchars($editThemeName) ?>">
|
|
|
|
<div class="row mb-3">
|
|
<div class="col-md-6">
|
|
<label for="theme_name" class="form-label">Themanaam</label>
|
|
<input type="text" class="form-control" id="theme_name" name="theme_name" value="<?= htmlspecialchars($editTheme['name'] ?? $editThemeName) ?>">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row g-4">
|
|
<div class="col-md-4">
|
|
<div class="card">
|
|
<div class="card-header">Header</div>
|
|
<div class="card-body">
|
|
<div class="mb-3">
|
|
<label for="header_color" class="form-label">Achtergrond</label>
|
|
<div class="input-group">
|
|
<input type="color" class="form-control form-control-color" id="header_color" name="header_color" value="<?= htmlspecialchars($editTheme['header_color'] ?? '#0a369d') ?>">
|
|
<input type="text" class="form-control form-control-color-value" value="<?= htmlspecialchars($editTheme['header_color'] ?? '#0a369d') ?>" maxlength="7" data-target="header_color">
|
|
</div>
|
|
</div>
|
|
<div class="mb-0">
|
|
<label for="header_font_color" class="form-label">Tekst</label>
|
|
<div class="input-group">
|
|
<input type="color" class="form-control form-control-color" id="header_font_color" name="header_font_color" value="<?= htmlspecialchars($editTheme['header_font_color'] ?? '#ffffff') ?>">
|
|
<input type="text" class="form-control form-control-color-value" value="<?= htmlspecialchars($editTheme['header_font_color'] ?? '#ffffff') ?>" maxlength="7" data-target="header_font_color">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<div class="card">
|
|
<div class="card-header">Navigatie</div>
|
|
<div class="card-body">
|
|
<div class="mb-3">
|
|
<label for="navigation_color" class="form-label">Achtergrond</label>
|
|
<div class="input-group">
|
|
<input type="color" class="form-control form-control-color" id="navigation_color" name="navigation_color" value="<?= htmlspecialchars($editTheme['navigation_color'] ?? '#2754b4') ?>">
|
|
<input type="text" class="form-control form-control-color-value" value="<?= htmlspecialchars($editTheme['navigation_color'] ?? '#2754b4') ?>" maxlength="7" data-target="navigation_color">
|
|
</div>
|
|
</div>
|
|
<div class="mb-0">
|
|
<label for="navigation_font_color" class="form-label">Tekst</label>
|
|
<div class="input-group">
|
|
<input type="color" class="form-control form-control-color" id="navigation_font_color" name="navigation_font_color" value="<?= htmlspecialchars($editTheme['navigation_font_color'] ?? '#ffffff') ?>">
|
|
<input type="text" class="form-control form-control-color-value" value="<?= htmlspecialchars($editTheme['navigation_font_color'] ?? '#ffffff') ?>" maxlength="7" data-target="navigation_font_color">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<div class="card">
|
|
<div class="card-header">Sidebar</div>
|
|
<div class="card-body">
|
|
<div class="mb-3">
|
|
<label for="sidebar_background" class="form-label">Achtergrond</label>
|
|
<div class="input-group">
|
|
<input type="color" class="form-control form-control-color" id="sidebar_background" name="sidebar_background" value="<?= htmlspecialchars($editTheme['sidebar_background'] ?? '#f8f9fa') ?>">
|
|
<input type="text" class="form-control form-control-color-value" value="<?= htmlspecialchars($editTheme['sidebar_background'] ?? '#f8f9fa') ?>" maxlength="7" data-target="sidebar_background">
|
|
</div>
|
|
</div>
|
|
<div class="mb-0">
|
|
<label for="sidebar_border" class="form-label">Rand</label>
|
|
<div class="input-group">
|
|
<input type="color" class="form-control form-control-color" id="sidebar_border" name="sidebar_border" value="<?= htmlspecialchars($editTheme['sidebar_border'] ?? '#dee2e6') ?>">
|
|
<input type="text" class="form-control form-control-color-value" value="<?= htmlspecialchars($editTheme['sidebar_border'] ?? '#dee2e6') ?>" maxlength="7" data-target="sidebar_border">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row g-4 mt-2">
|
|
<div class="col-md-4">
|
|
<div class="card">
|
|
<div class="card-header"><i class="bi bi-arrows-vertical"></i> Hoogte balken</div>
|
|
<div class="card-body">
|
|
<div class="mb-3">
|
|
<label for="header_height" class="form-label">Header hoogte (px)</label>
|
|
<input type="number" class="form-control" id="header_height" name="header_height" value="<?= htmlspecialchars($editTheme['header_height'] ?? '56') ?>" min="32" max="200">
|
|
</div>
|
|
<div class="mb-0">
|
|
<label for="nav_height" class="form-label">Navigatie hoogte (px)</label>
|
|
<input type="number" class="form-control" id="nav_height" name="nav_height" value="<?= htmlspecialchars($editTheme['nav_height'] ?? '42') ?>" min="24" max="200">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-8">
|
|
<div class="card">
|
|
<div class="card-header"><i class="bi bi-image"></i> Header achtergrond afbeelding</div>
|
|
<div class="card-body">
|
|
<div class="mb-3">
|
|
<label for="bg_image" class="form-label">Upload afbeelding</label>
|
|
<input type="file" class="form-control" id="bg_image" name="bg_image" accept="image/jpeg,image/png,image/gif,image/webp,image/svg+xml">
|
|
<small class="form-text text-muted">Toegestaan: JPG, PNG, GIF, WebP, SVG</small>
|
|
</div>
|
|
<div class="mb-0">
|
|
<label for="background_image_url" class="form-label">Of URL naar afbeelding</label>
|
|
<div class="input-group">
|
|
<input type="text" class="form-control" id="background_image_url" name="background_image_url" placeholder="https://..." value="<?= htmlspecialchars(str_starts_with($editTheme['background_image'] ?? '', 'http') ? $editTheme['background_image'] : '') ?>">
|
|
</div>
|
|
<?php if (!empty($editTheme['background_image'])): ?>
|
|
<div class="mt-2 d-flex align-items-center gap-3">
|
|
<div>
|
|
<small class="text-muted">Huidig:</small>
|
|
<img src="<?= htmlspecialchars(str_starts_with($editTheme['background_image'], 'http') ? $editTheme['background_image'] : '/themes/' . $editTheme['background_image']) ?>" style="max-height: 60px; max-width: 200px;" class="img-thumbnail mt-1 d-block">
|
|
</div>
|
|
<div class="form-check">
|
|
<input class="btn-check" type="checkbox" id="bg_image_remove" name="bg_image_remove" value="1" autocomplete="off">
|
|
<label class="btn btn-outline-danger btn-sm" for="bg_image_remove">
|
|
<i class="bi bi-trash3"></i> Verwijder afbeelding
|
|
</label>
|
|
</div>
|
|
</div>
|
|
<?php endif; ?>
|
|
</div>
|
|
<div class="mb-3 mt-3">
|
|
<label for="background_image_opacity" class="form-label">Doorzichtigheid (%)</label>
|
|
<div class="d-flex align-items-center gap-2">
|
|
<input type="range" class="form-range" style="max-width: 200px;" id="background_image_opacity" name="background_image_opacity" min="0" max="100" value="<?= htmlspecialchars($editTheme['background_image_opacity'] ?? '100') ?>" oninput="this.nextElementSibling.textContent=this.value+'%'">
|
|
<span class="badge bg-secondary"><?= htmlspecialchars($editTheme['background_image_opacity'] ?? '100') ?>%</span>
|
|
</div>
|
|
<small class="form-text text-muted">100% = volledig zichtbaar, 50% = half doorzichtig, 0% = onzichtbaar</small>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mt-4">
|
|
<button type="submit" class="btn btn-primary">
|
|
<i class="bi bi-check-lg"></i> Opslaan
|
|
</button>
|
|
<a href="admin.php?route=theme" class="btn btn-outline-secondary">Annuleren</a>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<?php else: ?>
|
|
|
|
<!-- Theme list -->
|
|
<div class="d-flex justify-content-between align-items-center mb-4">
|
|
<h2><i class="bi bi-palette"></i> Thema's</h2>
|
|
<button type="button" class="btn btn-primary btn-sm" data-bs-toggle="collapse" data-bs-target="#newThemeForm">
|
|
<i class="bi bi-plus-lg"></i> Nieuw thema
|
|
</button>
|
|
</div>
|
|
|
|
<div class="collapse mb-4" id="newThemeForm">
|
|
<div class="card shadow-sm">
|
|
<div class="card-body">
|
|
<form method="POST" action="admin.php?route=theme" class="row g-3 align-items-end">
|
|
<input type="hidden" name="csrf_token" value="<?= $csrf ?>">
|
|
<input type="hidden" name="action" value="create">
|
|
<div class="col-md-6">
|
|
<label for="new_name" class="form-label">Naam nieuw thema</label>
|
|
<input type="text" class="form-control" id="new_name" name="new_name" placeholder="bijv. donker" required>
|
|
</div>
|
|
<div class="col-md-2">
|
|
<button type="submit" class="btn btn-success w-100">
|
|
<i class="bi bi-plus-lg"></i> Aanmaken
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row g-4">
|
|
<?php foreach ($themes as $themeName => $themeData): ?>
|
|
<div class="col-md-4">
|
|
<div class="card shadow-sm h-100">
|
|
<div class="card-body">
|
|
<div class="d-flex justify-content-between align-items-start mb-3">
|
|
<h5 class="card-title mb-0"><?= htmlspecialchars($themeData['name'] ?? $themeName) ?></h5>
|
|
<?php if ($themeName === $activeTheme): ?>
|
|
<span class="badge bg-success">Actief</span>
|
|
<?php endif; ?>
|
|
</div>
|
|
|
|
<!-- Color preview swatches -->
|
|
<div class="mb-3">
|
|
<div class="d-flex align-items-center gap-1 mb-2">
|
|
<span class="small text-muted" style="width: 70px;">Header:</span>
|
|
<span class="d-inline-block rounded" style="width: 24px; height: 24px; background: <?= htmlspecialchars($themeData['header_color'] ?? '#0a369d') ?>; border: 1px solid #dee2e6;"></span>
|
|
<span class="small text-muted"><?= htmlspecialchars($themeData['header_color'] ?? '#0a369d') ?></span>
|
|
</div>
|
|
<div class="d-flex align-items-center gap-1 mb-2">
|
|
<span class="small text-muted" style="width: 70px;">Navigatie:</span>
|
|
<span class="d-inline-block rounded" style="width: 24px; height: 24px; background: <?= htmlspecialchars($themeData['navigation_color'] ?? '#2754b4') ?>; border: 1px solid #dee2e6;"></span>
|
|
<span class="small text-muted"><?= htmlspecialchars($themeData['navigation_color'] ?? '#2754b4') ?></span>
|
|
</div>
|
|
<div class="d-flex align-items-center gap-1">
|
|
<span class="small text-muted" style="width: 70px;">Sidebar:</span>
|
|
<span class="d-inline-block rounded" style="width: 24px; height: 24px; background: <?= htmlspecialchars($themeData['sidebar_background'] ?? '#f8f9fa') ?>; border: 1px solid #dee2e6;"></span>
|
|
<span class="small text-muted"><?= htmlspecialchars($themeData['sidebar_background'] ?? '#f8f9fa') ?></span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Heights and background image -->
|
|
<div class="mb-3 small">
|
|
<div class="text-muted mb-1">
|
|
<i class="bi bi-arrows-vertical"></i> Header: <?= htmlspecialchars($themeData['header_height'] ?? '56') ?>px · Navigatie: <?= htmlspecialchars($themeData['nav_height'] ?? '42') ?>px
|
|
</div>
|
|
<?php if (!empty($themeData['background_image'])): ?>
|
|
<div class="text-muted">
|
|
<i class="bi bi-image"></i> Achtergrond: <?= htmlspecialchars($themeData['background_image_opacity'] ?? '100') ?>% zichtbaar
|
|
<?php if (!str_starts_with($themeData['background_image'], 'http')): ?>
|
|
<img src="/themes/<?= htmlspecialchars($themeData['background_image']) ?>" style="max-height: 30px; max-width: 80px;" class="img-thumbnail ms-1 align-middle">
|
|
<?php endif; ?>
|
|
</div>
|
|
<?php endif; ?>
|
|
</div>
|
|
|
|
<div class="d-flex gap-2">
|
|
<a href="admin.php?route=theme&edit=<?= urlencode($themeName) ?>" class="btn btn-outline-primary btn-sm">
|
|
<i class="bi bi-pencil"></i> Bewerken
|
|
</a>
|
|
<?php if ($themeName !== $activeTheme): ?>
|
|
<form method="POST" action="admin.php?route=theme">
|
|
<input type="hidden" name="csrf_token" value="<?= $csrf ?>">
|
|
<input type="hidden" name="action" value="activate">
|
|
<input type="hidden" name="theme" value="<?= htmlspecialchars($themeName) ?>">
|
|
<button type="submit" class="btn btn-outline-success btn-sm">
|
|
<i class="bi bi-check-circle"></i> Activeren
|
|
</button>
|
|
</form>
|
|
<?php endif; ?>
|
|
<?php if ($themeName !== 'default'): ?>
|
|
<form method="POST" action="admin.php?route=theme">
|
|
<input type="hidden" name="csrf_token" value="<?= $csrf ?>">
|
|
<input type="hidden" name="action" value="delete">
|
|
<input type="hidden" name="theme" value="<?= htmlspecialchars($themeName) ?>">
|
|
<button type="submit" class="btn btn-outline-danger btn-sm" onclick="return confirm('Weet je zeker dat je thema '<?= htmlspecialchars($themeData['name'] ?? $themeName) ?>' wilt verwijderen?')">
|
|
<i class="bi bi-trash"></i> Verwijderen
|
|
</button>
|
|
</form>
|
|
<?php endif; ?>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<?php endforeach; ?>
|
|
</div>
|
|
|
|
<?php endif; ?>
|
|
|
|
<script>
|
|
document.querySelectorAll('.form-control-color-value').forEach(function(input) {
|
|
input.addEventListener('input', function() {
|
|
var target = document.getElementById(this.dataset.target);
|
|
if (target && /^#[0-9a-fA-F]{6}$/.test(this.value)) {
|
|
target.value = this.value;
|
|
}
|
|
});
|
|
});
|
|
document.querySelectorAll('.form-control-color').forEach(function(input) {
|
|
input.addEventListener('input', function() {
|
|
var target = document.querySelector('[data-target="' + this.id + '"]');
|
|
if (target) target.value = this.value;
|
|
});
|
|
});
|
|
</script>
|