E.Noorlander
73450a17c1
- plugin.json type field: 'content' (sidebar) or 'system' (API only) - Content-edit: label 'Plugins', hide section if layout has no sidebar - Content-edit: disable checkboxes when no sidebar layout selected - Content-edit: hide up arrow on first item, down arrow on last item - PluginManager: isPluginViewable() checks type=system -> not viewable - Admin plugins page: show Content/Systeem type badge - HTMLBlock: add plugin.json with type=content - Navigation: add type=content to config
198 lines
9.4 KiB
Twig
198 lines
9.4 KiB
Twig
{% extends "layouts/admin.twig" %}
|
|
|
|
{% block title %}{{ fileName }} - CodePress Admin{% 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 for="filename" class="form-label">Bestandsnaam</label>
|
|
<div class="input-group">
|
|
<input type="text" class="form-control" id="filename" name="filename" value="{{ fileName|replace({'.md': '', '.php': '', '.html': ''}) }}" required>
|
|
<span class="input-group-text">.{{ fileExt }}</span>
|
|
</div>
|
|
<small class="form-text text-muted">Alleen letters, cijfers, punten, underscores en streepjes.</small>
|
|
</div>
|
|
{% if isEditable %}
|
|
<div class="col-md-4">
|
|
<label for="layout" class="form-label">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" id="plugin-section">
|
|
<label class="form-label d-block">Plugins</label>
|
|
<ul class="list-group list-group-flush" id="plugin-order-list">
|
|
{% for plugin in selectedPlugins %}
|
|
<li class="list-group-item d-flex align-items-center justify-content-between px-2 py-1" data-plugin="{{ plugin }}">
|
|
<div class="form-check">
|
|
<input type="checkbox" class="form-check-input plugin-checkbox" id="plugin-{{ plugin }}" name="plugins[]" value="{{ plugin }}" autocomplete="off" checked>
|
|
<label class="form-check-label" for="plugin-{{ plugin }}">{{ plugin }}</label>
|
|
</div>
|
|
<div class="btn-group btn-group-sm plugin-arrows">
|
|
<button type="button" class="btn btn-outline-secondary py-0 px-1 plugin-up" title="Omhoog"><i class="bi bi-arrow-up"></i></button>
|
|
<button type="button" class="btn btn-outline-secondary py-0 px-1 plugin-down" title="Omlaag"><i class="bi bi-arrow-down"></i></button>
|
|
</div>
|
|
</li>
|
|
{% endfor %}
|
|
{% for plugin in availablePlugins %}
|
|
{% if plugin not in selectedPlugins %}
|
|
<li class="list-group-item d-flex align-items-center justify-content-between px-2 py-1" data-plugin="{{ plugin }}">
|
|
<div class="form-check">
|
|
<input type="checkbox" class="form-check-input plugin-checkbox" id="plugin-{{ plugin }}" name="plugins[]" value="{{ plugin }}" autocomplete="off">
|
|
<label class="form-check-label" for="plugin-{{ plugin }}">{{ plugin }}</label>
|
|
</div>
|
|
<div class="btn-group btn-group-sm plugin-arrows">
|
|
<button type="button" class="btn btn-outline-secondary py-0 px-1 plugin-up" title="Omhoog"><i class="bi bi-arrow-up"></i></button>
|
|
<button type="button" class="btn btn-outline-secondary py-0 px-1 plugin-down" title="Omlaag"><i class="bi bi-arrow-down"></i></button>
|
|
</div>
|
|
</li>
|
|
{% endif %}
|
|
{% endfor %}
|
|
</ul>
|
|
</div>
|
|
{% endif %}
|
|
{% endif %}
|
|
</div>
|
|
{% 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 %}
|
|
<div class="d-flex gap-2 mt-3">
|
|
<button type="submit" class="btn btn-primary" title="Opslaan (Ctrl+S)">
|
|
<i class="bi bi-check-lg"></i> Opslaan
|
|
</button>
|
|
{% if isEditable %}
|
|
<a href="/{{ currentLang }}{% if fileDir %}/{{ fileDir }}{% endif %}/{{ fileName|replace({'.md': '', '.php': '', '.html': ''}) }}" target="_blank" class="btn btn-outline-info" title="Open in nieuw tabblad">
|
|
<i class="bi bi-eye"></i> Preview
|
|
</a>
|
|
{% endif %}
|
|
<a href="/admin/content?dir={{ fileDir|url_encode }}" class="btn btn-outline-secondary" id="back-btn">Terug</a>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function () {
|
|
var backBtn = document.getElementById('back-btn');
|
|
var filenameInput = document.getElementById('filename');
|
|
var layoutSelect = document.getElementById('layout');
|
|
var pluginSection = document.getElementById('plugin-section');
|
|
if (!backBtn) return;
|
|
|
|
var sidebarLayouts = {{ sidebarLayouts|json_encode|raw }};
|
|
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');
|
|
}
|
|
|
|
if (filenameInput) {
|
|
filenameInput.addEventListener('input', markChanged);
|
|
}
|
|
|
|
// Show/hide plugin section based on layout
|
|
function updatePluginVisibility() {
|
|
if (!layoutSelect || !pluginSection) return;
|
|
var hasSidebar = sidebarLayouts.indexOf(layoutSelect.value) !== -1;
|
|
pluginSection.style.display = hasSidebar ? '' : 'none';
|
|
// Disable checkboxes if no sidebar
|
|
pluginSection.querySelectorAll('.plugin-checkbox').forEach(function(cb) {
|
|
cb.disabled = !hasSidebar;
|
|
});
|
|
}
|
|
|
|
// Update arrow visibility — hide up on first, down on last
|
|
function updateArrows() {
|
|
if (!pluginList) return;
|
|
var items = pluginList.querySelectorAll('li[data-plugin]');
|
|
items.forEach(function(item, i) {
|
|
var upBtn = item.querySelector('.plugin-up');
|
|
var downBtn = item.querySelector('.plugin-down');
|
|
if (upBtn) upBtn.style.visibility = (i === 0) ? 'hidden' : '';
|
|
if (downBtn) downBtn.style.visibility = (i === items.length - 1) ? 'hidden' : '';
|
|
});
|
|
}
|
|
|
|
// 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');
|
|
updatePluginVisibility();
|
|
|
|
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) {
|
|
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 {
|
|
editor.value = content;
|
|
}
|
|
|
|
markChanged();
|
|
});
|
|
}
|
|
|
|
window.__onContentChange = markChanged;
|
|
|
|
// Plugin order: move list items up/down
|
|
var pluginList = document.getElementById('plugin-order-list');
|
|
if (pluginList) {
|
|
pluginList.addEventListener('click', function (e) {
|
|
var upBtn = e.target.closest('.plugin-up');
|
|
var downBtn = e.target.closest('.plugin-down');
|
|
if (!upBtn && !downBtn) return;
|
|
|
|
var item = e.target.closest('li[data-plugin]');
|
|
if (!item) return;
|
|
|
|
if (upBtn && item.previousElementSibling) {
|
|
pluginList.insertBefore(item, item.previousElementSibling);
|
|
markChanged();
|
|
} else if (downBtn && item.nextElementSibling) {
|
|
pluginList.insertBefore(item, item.nextElementSibling.nextElementSibling);
|
|
markChanged();
|
|
}
|
|
updateArrows();
|
|
});
|
|
}
|
|
|
|
// Initialize
|
|
updatePluginVisibility();
|
|
updateArrows();
|
|
});
|
|
</script>
|
|
{% endblock %}
|