Files

410 lines
24 KiB
Twig

{% extends "layouts/admin.twig" %}
{% block title %}{{ ta.content_editor|default('Content editor') }} - {{ ta.admin_title|default('CodePress Admin') }}{% endblock %}
{% block extra_css %}
<link rel="stylesheet" href="/admin/assets/codemirror/codemirror.min.css">
<link rel="stylesheet" href="/admin/assets/css/editor.css">
{% include 'pages/_editor-styles.twig' %}
<style>
/* Git status badge (content editor only) */
.git-status { font-size: .75rem; }
.git-status .badge { font-weight: 400; }
</style>
{% endblock %}
{% block content %}
<div class="d-flex justify-content-between align-items-center mb-4 flex-wrap gap-2">
<h2 class="mb-0"><i class="bi bi-pencil"></i> {{ ta.content_editor|default('Content editor') }}</h2>
<div class="d-flex gap-2 flex-wrap">
{# Backup integratie in zijbalk header (git wordt later een systeem plugin) #}
<a href="/admin/content-backup" class="btn btn-outline-info btn-sm" title="{{ ta.backup|default('Backup') }}">
<i class="bi bi-archive"></i> {{ ta.backup|default('Backup') }}
</a>
<button type="button" class="btn btn-outline-success btn-sm" data-bs-toggle="collapse" data-bs-target="#contentUploadForm">
<i class="bi bi-cloud-upload"></i> {{ ta.upload|default('Upload') }}
</button>
<button type="button" class="btn btn-outline-primary btn-sm" id="newFileBtnTop" data-bs-toggle="modal" data-bs-target="#newFileModal" data-in-dir="{{ selectedDir|default('') }}">
<i class="bi bi-file-earmark-plus"></i> {{ ta.new_file|default('Nieuw bestand') }}
</button>
<button type="button" class="btn btn-outline-secondary btn-sm" id="newDirBtnTop" data-bs-toggle="modal" data-bs-target="#newDirModal" data-in-dir="{{ selectedDir|default('') }}">
<i class="bi bi-folder-plus"></i> {{ ta.new_folder|default('Nieuwe map') }}
</button>
</div>
</div>
{# Upload form (collapsed by default) #}
<div class="collapse mb-3" id="contentUploadForm">
<div class="card shadow-sm">
<div class="card-body">
<form method="POST" action="/admin/content-file-upload" enctype="multipart/form-data">
<input type="hidden" name="csrf_token" value="{{ csrf_token }}">
<input type="hidden" name="dir" value="" id="contentUploadDir">
<div class="mb-3">
<label for="contentUploadFile" class="form-label">{{ ta.select_files|default('Bestanden selecteren') }}</label>
<input type="file" class="form-control" id="contentUploadFile" name="file[]" multiple accept="image/jpeg,image/png,image/gif,image/webp,image/svg+xml,application/pdf,application/zip,video/mp4,video/webm,audio/mpeg,audio/wav,.css,.scss,.js,.json,.html,.md">
<small class="form-text text-muted">{{ ta.content_upload_help|default('Bestanden worden geüpload naar content/. Toegestaan: afbeeldingen, video, audio, PDF, ZIP, office docs, CSS, SCSS, JS, JSON, HTML, MD.') }}</small>
</div>
<button type="submit" class="btn btn-success">
<i class="bi bi-cloud-upload"></i> {{ ta.upload_to_folder|default('Uploaden') }}
</button>
</form>
</div>
</div>
</div>
<div class="editor-layout">
{# File tree sidebar (shared partial) #}
{% include 'pages/_file-tree.twig' with {
'files': files,
'relFile': relFile,
'editableExts': editableExts,
'treeIdPrefix': 'content-tree',
'treeHeader': ta.content_files|default('Content bestanden'),
'treeEmptyText': ta.content_no_files|default('Geen bestanden gevonden.'),
'treeRouteBase': '/admin/content',
'treeRouteParams': '',
'treeMoveRoute': '/admin/content-file-move',
'treeMoveParams': '',
'treeDirActions': true,
'treeDirSelectRoute': '/admin/content',
'treeDirRenameRoute': '',
'treeFileMove': false,
'treeHideActionsFor': [],
'selectedDir': selectedDir|default(''),
'treeRootLabel': 'content',
'treeScope': 'content',
'treeMoveUrl': '/admin/tree-move',
'treeDeleteBase': '/admin/content-file-delete',
'treeScopeParam': '',
'newFileModalId': '#newFileModal',
'newDirModalId': '#newDirModal',
} %}
{# Editor / map-detail main panel #}
<div class="editor-main">
{% if showMapPaneel %}
{# ── Map detail paneel ( rechts) ── tonen wanneer een map is geselecteerd #}
<nav aria-label="breadcrumb" class="mb-2">
<ol class="breadcrumb mb-0">
<li class="breadcrumb-item"><a href="/admin/content"><i class="bi bi-folder2-open"></i> content</a></li>
{% if selectedDir %}
{% set crumbPath = '' %}
{% for part in selectedDir|split('/') %}
{% set crumbPath = crumbPath ? crumbPath ~ '/' ~ part : part %}
{% if loop.last %}
<li class="breadcrumb-item active" aria-current="page">{{ part }}</li>
{% else %}
<li class="breadcrumb-item"><a href="/admin/content?dir={{ crumbPath|url_encode }}">{{ part }}</a></li>
{% endif %}
{% endfor %}
{% endif %}
</ol>
</nav>
<div class="card shadow-sm">
<div class="card-header d-flex align-items-center gap-2">
<i class="bi bi-folder-fill text-warning"></i>
<span class="fw-semibold">{{ selectedDirIsRoot ? 'content' : selectedDirName }}</span>
{% if not selectedDirIsRoot %}
<span class="badge bg-light text-dark ms-1">content/{{ selectedDir }}</span>
{% endif %}
</div>
<div class="card-body">
{# Mapnaam bewerkbaar + Opslaan = hernoem (geen apart potlood-icoon in de boom meer) #}
<form method="POST" action="/admin/content?{% if selectedDir %}dir={{ selectedDir|url_encode }}{% endif %}" id="dir-rename-form">
<input type="hidden" name="csrf_token" value="{{ csrf_token }}">
<input type="hidden" name="action" value="rename_dir">
<input type="hidden" name="dir" value="{{ selectedDir }}">
<label for="dirname" class="form-label">{{ ta.folder_name|default('Mapnaam') }}</label>
<div class="input-group mb-3">
<input type="text" class="form-control" id="dirname" name="newname" value="{{ selectedDirIsRoot ? '' : selectedDirName }}" placeholder="{{ ta.folder_name_placeholder|default('mapnaam') }}" {{ selectedDirIsRoot ? 'disabled' : '' }}>
<button type="submit" class="btn btn-primary" {{ selectedDirIsRoot ? 'disabled' : '' }}>
<i class="bi bi-check-lg"></i> {{ ta.save|default('Opslaan') }}
</button>
</div>
<div class="form-text">{{ ta.folder_rename_help|default('Bewerk de mapnaam en klik opslaan om te hernoemen.') }}</div>
</form>
{# Map acties: nieuw bestand / nieuwe map / upload — opereren op de geselecteerde map #}
<div class="d-flex flex-wrap gap-2 mb-3">
<button type="button" class="btn btn-outline-primary btn-sm" data-bs-toggle="modal" data-bs-target="#newFileModal" data-in-dir="{{ selectedDir }}" id="mapPaneelNewFileBtn">
<i class="bi bi-file-earmark-plus"></i> {{ ta.new_file|default('Nieuw bestand') }}
</button>
<button type="button" class="btn btn-outline-secondary btn-sm" data-bs-toggle="modal" data-bs-target="#newDirModal" data-in-dir="{{ selectedDir }}" id="mapPaneelNewDirBtn">
<i class="bi bi-folder-plus"></i> {{ ta.new_folder|default('Nieuwe map') }}
</button>
<button type="button" class="btn btn-outline-success btn-sm" data-bs-toggle="collapse" data-bs-target="#contentUploadForm" id="mapPaneelUploadBtn">
<i class="bi bi-cloud-upload"></i> {{ ta.upload|default('Upload') }}
</button>
{% if not selectedDirIsRoot %}
<form method="POST" action="/admin/content-dir-delete-in" class="d-inline" onsubmit="return confirm('{{ ta.confirm_delete_folder|default('Weet je zeker dat je deze map wilt verwijderen? De map moet leeg zijn.') }}')">
<input type="hidden" name="csrf_token" value="{{ csrf_token }}">
<input type="hidden" name="dir" value="{{ selectedDir }}">
<button type="submit" class="btn btn-outline-danger btn-sm">
<i class="bi bi-trash"></i> {{ ta.delete|default('Verwijderen') }}
</button>
</form>
{% endif %}
</div>
{# Korte inhoud-samenvatting van de geselecteerde map #}
<div class="text-muted small">
<i class="bi bi-files"></i>
{{ selectedDirCounts.files }} {{ ta.files|default('bestanden') }},
{{ selectedDirCounts.dirs }} {{ ta.subfolders|default('submappen') }}
</div>
</div>
</div>
{% else %}
{% if relFile %}
<nav aria-label="breadcrumb" class="mb-2">
<ol class="breadcrumb mb-0">
<li class="breadcrumb-item"><i class="bi bi-folder2-open"></i> content</li>
{% set crumbPath = '' %}
{% set parts = relFile|split('/') %}
{% for part in parts %}
{% set crumbPath = crumbPath ? crumbPath ~ '/' ~ part : part %}
{% if loop.last %}
<li class="breadcrumb-item active" aria-current="page">{{ part }}</li>
{% else %}
<li class="breadcrumb-item"><a href="/admin/content?file={{ crumbPath|url_encode }}">{{ part }}</a></li>
{% endif %}
{% endfor %}
</ol>
</nav>
{% endif %}
{% if isEditable %}
<form method="POST" action="/admin/content?file={{ relFile|url_encode }}" id="editor-form">
<input type="hidden" name="csrf_token" value="{{ csrf_token }}">
<div class="card shadow-sm">
<div class="card-body">
{# Metadata row: filename display, layout selector, plugins #}
<div class="row mb-3">
<div class="col-md-4">
<label for="new_filename" class="form-label text-muted small mb-1">{{ ta.filename|default('Bestandsnaam') }}</label>
<div class="input-group input-group-sm">
<input type="text" class="form-control" id="new_filename" name="new_filename" value="{{ fileBaseName }}" required>
<span class="input-group-text">.{{ fileExt }}</span>
</div>
</div>
<div class="col-md-4">
<label for="layout" class="form-label">{{ ta.template_layout|default('Sjabloon / Layout') }} <small class="text-muted">({{ activeThemeName|default('default') }})</small></label>
<select class="form-select form-select-sm" id="layout" name="layout">
<option value="">{{ ta.theme_default|default('Thema standaard') }}</option>
{% for key, layoutFile in themeLayouts %}
<option value="{{ key }}" {{ currentLayout == key ? 'selected' : '' }}>{{ key|replace({'_': ' '})|capitalize }}{% if key == themeDefaultLayout %} (standaard){% endif %}</option>
{% endfor %}
</select>
</div>
{% if availablePlugins is not empty %}
<div class="col-md-4">
<label class="form-label">{{ ta.visible_plugins|default('Zichtbare plugins') }}</label>
<div class="plugin-checkbox-group">
{% for plugin in availablePlugins %}
<div class="form-check">
<input class="form-check-input" type="checkbox" name="plugins[]" value="{{ plugin.name }}" id="plugin_{{ plugin.name }}" {{ plugin.name in selectedPlugins ? 'checked' : '' }}>
<label class="form-check-label" for="plugin_{{ plugin.name }}">{{ plugin.title }}</label>
</div>
{% endfor %}
</div>
</div>
{% endif %}
</div>
{# Created / edited timestamps (read-only, auto-filled) #}
<div class="row mb-3">
<div class="col-md-4">
<label class="form-label text-muted small"><i class="bi bi-calendar-plus"></i> {{ ta.created|default('Aangemaakt') }}</label>
<input type="text" class="form-control-plaintext form-control-sm" value="{{ currentCreated }}" readonly>
</div>
<div class="col-md-4">
<label class="form-label text-muted small"><i class="bi bi-calendar-check"></i> {{ ta.edited|default('Bewerkt') }}</label>
<input type="text" class="form-control-plaintext form-control-sm" value="{{ currentEdited }}" readonly>
</div>
</div>
<div class="editor-toolbar" id="editor-toolbar"></div>
<div class="editor-wrapper">
<textarea name="content" id="editor-textarea" data-ext="{{ fileExt }}">{{ fileContent }}</textarea>
</div>
</div>
</div>
</form>
<div class="d-flex gap-2 mt-3">
<button type="submit" form="editor-form" class="btn btn-primary" title="{{ ta.save_ctrl_s|default('Opslaan (Ctrl+S)') }}">
<i class="bi bi-check-lg"></i> {{ ta.save|default('Opslaan') }}
</button>
<a href="/{{ currentLang }}{% if fileDir %}/{{ fileDir }}{% endif %}/{{ fileBaseName }}{% if fileExt != 'md' %}.{{ fileExt }}{% endif %}" target="_blank" class="btn btn-outline-info" title="{{ ta.open_new_tab|default('Open in nieuw tabblad') }}">
<i class="bi bi-eye"></i> {{ ta.preview|default('Preview') }}
</a>
<form method="POST" action="/admin/content-file-delete" class="ms-auto" onsubmit="return confirm('{{ ta.confirm_delete_file|default('Weet je zeker dat je dit bestand wilt verwijderen?') }}')">
<input type="hidden" name="csrf_token" value="{{ csrf_token }}">
<input type="hidden" name="file" value="{{ relFile }}">
<button type="submit" class="btn btn-outline-danger" title="{{ ta.delete|default('Verwijderen') }}">
<i class="bi bi-trash"></i> {{ ta.delete|default('Verwijderen') }}
</button>
</form>
</div>
{% else %}
<div class="card shadow-sm">
<div class="card-body text-center py-5 text-muted">
<i class="bi bi-file-earmark-slash display-6 d-block mb-2"></i>
{% if relFile %}
{{ ta.content_not_editable|default('Dit bestandstype kan niet in de editor bewerkt worden.') }}
{% else %}
{{ ta.content_select_file|default('Selecteer een bestand of map uit de zijbalk.') }}
{% endif %}
</div>
</div>
{% endif %}
{% endif %}{# end showMapPaneel #}
</div>
</div>
{# New file modal #}
<div class="modal fade" id="newFileModal" tabindex="-1" aria-labelledby="newFileModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<form method="POST" action="/admin/content">
<input type="hidden" name="csrf_token" value="{{ csrf_token }}">
<input type="hidden" name="action" value="new_file">
<input type="hidden" name="in_dir" id="newFileDir" value="" data-in-dir-field>
<div class="modal-header">
<h5 class="modal-title" id="newFileModalLabel"><i class="bi bi-file-earmark-plus"></i> {{ ta.new_file_title|default('Nieuw bestand aanmaken') }}</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<div class="mb-3">
<label for="newFilenameInput" class="form-label">{{ ta.content_file_path|default('Bestandspad binnen content') }}</label>
<div class="input-group">
<input type="text" class="form-control" id="newFilenameInput" name="new_filename" placeholder="Bijv. nl.pagina of blog/nl.post" required autofocus>
</div>
<div class="form-text">{{ ta.content_file_path_help|default('Alleen letters, cijfers, punten, underscores, streepjes en slashes. Submappen worden automatisch aangemaakt. De extensie wordt hieronder gekozen.') }}</div>
</div>
<div class="mb-3">
<label for="newExtSelect" class="form-label">{{ ta.file_type|default('Bestandstype') }}</label>
<select class="form-select" id="newExtSelect" name="new_ext">
<option value="md">Markdown (.md)</option>
<option value="php">PHP (.php)</option>
<option value="html">HTML (.html)</option>
</select>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{{ ta.cancel|default('Annuleren') }}</button>
<button type="submit" class="btn btn-primary"><i class="bi bi-check-lg"></i> {{ ta.create|default('Aanmaken') }}</button>
</div>
</form>
</div>
</div>
</div>
{# New directory modal #}
<div class="modal fade" id="newDirModal" tabindex="-1" aria-labelledby="newDirModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<form method="POST" action="/admin/content-dir-create-in">
<input type="hidden" name="csrf_token" value="{{ csrf_token }}">
<input type="hidden" name="in_dir" id="newDirInDir" value="" data-in-dir-field>
<div class="modal-header">
<h5 class="modal-title" id="newDirModalLabel"><i class="bi bi-folder-plus"></i> {{ ta.new_folder_title|default('Nieuwe map aanmaken') }}</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<div class="mb-3">
<label for="dirnameInput" class="form-label">{{ ta.folder_name|default('Mapnaam') }}</label>
<input type="text" class="form-control" id="dirnameInput" name="dirname" required autofocus>
<div class="form-text">{{ ta.name_help|default('Alleen letters, cijfers, punten, underscores en streepjes.') }}</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{{ ta.cancel|default('Annuleren') }}</button>
<button type="submit" class="btn btn-primary"><i class="bi bi-check-lg"></i> {{ ta.create|default('Aanmaken') }}</button>
</div>
</form>
</div>
</div>
</div>
<script>
// Mapselectie + upload/new file/new dir binding aan de geselecteerde map.
document.addEventListener('DOMContentLoaded', function () {
var newFileModal = document.getElementById('newFileModal');
var newDirModal = document.getElementById('newDirModal');
var newFileBtnTop = document.getElementById('newFileBtnTop');
var newDirBtnTop = document.getElementById('newDirBtnTop');
var uploadDir = document.getElementById('contentUploadDir');
// Track the selected directory (server-side via ?dir=). This drives the
// top toolbar buttons and the upload form target.
var selectedDir = '{{ selectedDir|default('') }}';
function updateTopButtons(dir) {
selectedDir = dir || '';
if (newFileBtnTop) newFileBtnTop.setAttribute('data-in-dir', selectedDir);
if (newDirBtnTop) newDirBtnTop.setAttribute('data-in-dir', selectedDir);
if (uploadDir) uploadDir.value = selectedDir;
}
updateTopButtons(selectedDir);
var tree = document.getElementById('editorFileTree');
if (tree) {
// Chevron-kliks mogen niet doorbubbellen naar de mapnaam-link (die navigeert).
tree.addEventListener('click', function (e) {
var chevronBtn = e.target.closest('.tree-chevron-btn');
if (chevronBtn) { e.stopPropagation(); }
});
}
if (newFileModal) {
newFileModal.addEventListener('show.bs.modal', function (event) {
var trigger = event.relatedTarget;
var inDir = trigger ? trigger.getAttribute('data-in-dir') : selectedDir;
var hidden = document.getElementById('newFileDir');
if (hidden) hidden.value = inDir || '';
var input = document.getElementById('newFilenameInput');
if (input) {
input.value = '';
input.placeholder = inDir ? inDir + '/naam' : 'Bijv. nl.pagina of blog/nl.post';
}
});
}
if (newDirModal) {
newDirModal.addEventListener('show.bs.modal', function (event) {
var trigger = event.relatedTarget;
var inDir = trigger ? trigger.getAttribute('data-in-dir') : selectedDir;
var hidden = document.getElementById('newDirInDir');
if (hidden) hidden.value = inDir;
});
}
// Layout select → update frontmatter (spiegel van content-edit.twig)
var layoutSelect = document.getElementById('layout');
if (layoutSelect) {
layoutSelect.addEventListener('change', function () {
var newLayout = this.value;
var cm = window.codeMirrorEditor;
var editor = document.getElementById('editor-textarea');
var content = cm ? cm.getValue() : (editor ? editor.value : '');
var fmMatch = content.match(/^---\n([\s\S]*?)\n---/);
if (fmMatch) {
var frontmatter = fmMatch[1];
if (/^layout:\s*.+$/m.test(frontmatter)) {
frontmatter = frontmatter.replace(/^layout:\s*.+$/m, 'layout: ' + newLayout);
} else {
frontmatter = 'layout: ' + newLayout + '\n' + frontmatter;
}
content = content.replace(/^---\n([\s\S]*?)\n---/, '---\n' + frontmatter + '\n---');
} else {
content = '---\nlayout: ' + newLayout + '\n---\n\n' + content;
}
if (cm) { cm.setValue(content); } else if (editor) { editor.value = content; }
});
}
});
</script>
{% endblock %}
{% block extra_js %}
{% endblock %}