140 lines
6.8 KiB
Twig
140 lines
6.8 KiB
Twig
{% extends "layouts/admin.twig" %}
|
|
|
|
{% block title %}{{ fileName }} - {{ ta.admin_title|default('CodePress Admin') }}{% endblock %}
|
|
|
|
{% block extra_css %}
|
|
{% include 'pages/_editor-styles.twig' %}
|
|
{% endblock %}
|
|
|
|
{% block content %}
|
|
<h2 class="mb-4"><i class="bi bi-pencil"></i> {{ fileName }}</h2>
|
|
|
|
<div class="card shadow-sm">
|
|
<div class="card-body">
|
|
<form method="POST" action="/admin/content-edit?file={{ file|url_encode }}" id="editor-form">
|
|
<input type="hidden" name="csrf_token" value="{{ csrf_token }}">
|
|
<div class="row mb-3">
|
|
<div class="col-md-4">
|
|
<label class="form-label">{{ ta.filename|default('Bestandsnaam') }}</label>
|
|
<p class="form-control-plaintext mb-0"><code>{{ fileName }}</code></p>
|
|
</div>
|
|
{% if isEditable %}
|
|
<div class="col-md-4">
|
|
<label for="layout" class="form-label">{{ ta.template_layout|default('Sjabloon / Layout') }} <small class="text-muted">({{ activeThemeName|default('default') }} theme)</small></label>
|
|
<select class="form-select" id="layout" name="layout">
|
|
{% 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 %}
|
|
{% endif %}
|
|
</div>
|
|
{% if isEditable and (currentCreated or currentEdited) %}
|
|
<div class="row mb-3">
|
|
<div class="col-md-4">
|
|
<label class="form-label text-muted"><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"><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>
|
|
{% endif %}
|
|
{% if isEditable %}
|
|
<div class="editor-toolbar" id="editor-toolbar"></div>
|
|
<div class="editor-wrapper">
|
|
<textarea name="content" id="editor-textarea" data-ext="{{ fileExt }}">{{ fileContent }}</textarea>
|
|
</div>
|
|
{% endif %}
|
|
</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>
|
|
{% if isEditable %}
|
|
<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>
|
|
{% endif %}
|
|
<a href="/admin/content" class="btn btn-outline-secondary" id="back-btn">{{ ta.back|default('Terug') }}</a>
|
|
<form method="POST" action="/admin/content-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="{{ file }}">
|
|
<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>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function () {
|
|
var backBtn = document.getElementById('back-btn');
|
|
var layoutSelect = document.getElementById('layout');
|
|
if (!backBtn) return;
|
|
|
|
var changed = false;
|
|
|
|
function markChanged() {
|
|
if (changed) return;
|
|
changed = true;
|
|
backBtn.innerHTML = '<i class="bi bi-x-circle"></i> Annuleren';
|
|
backBtn.classList.remove('btn-outline-secondary');
|
|
backBtn.classList.add('btn-outline-danger');
|
|
}
|
|
|
|
// Update the layout value in the editor's frontmatter when the select changes
|
|
if (layoutSelect) {
|
|
layoutSelect.addEventListener('change', function () {
|
|
var newLayout = this.value;
|
|
var editor = document.getElementById('editor-textarea');
|
|
if (!editor) return;
|
|
|
|
var cm = window.codeMirrorEditor;
|
|
var content = cm ? cm.getValue() : editor.value;
|
|
|
|
// Check if frontmatter exists
|
|
var fmMatch = content.match(/^---\n([\s\S]*?)\n---/);
|
|
if (fmMatch) {
|
|
// Update existing layout line in frontmatter
|
|
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 {
|
|
// No frontmatter yet — add one
|
|
content = '---\nlayout: ' + newLayout + '\n---\n\n' + content;
|
|
}
|
|
|
|
if (cm) {
|
|
cm.setValue(content);
|
|
} else {
|
|
editor.value = content;
|
|
}
|
|
|
|
markChanged();
|
|
});
|
|
}
|
|
|
|
window.__onContentChange = markChanged;
|
|
});
|
|
</script>
|
|
{% endblock %} |