E.Noorlander/CodePress
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

v2.6.3 (Lyra): Content multi-type handling, getAllPages() structuur, . verberg-prefix

Browse Source 
- Content bestanden met dezelfde naam maar ander type (md/php/html) worden
  correct geserveerd: URL met extensie opent dat bestand, URL zonder extensie
  valt terug op md > php > html (resolveContentByType helper)
- Admin content editor accepteert bestanden met dezelfde naam (ander type);
  preview-knop linkt per extensie
- Frontend navigatie/directory listing/search tonen elk bestandstype apart
- getAllPages() array structuur gewijzigd naar list van
  ['path','title','type'] met type 'md'/'php'/'html'/'folder'
- Verberg-prefix logica: _ is geen verberg-prefix meer, alleen . (en -);
  admin toont wél alle . bestanden/mappen
- ContentAPI getPage()/pageExists() respecteren expliciete extensie
- Handleiding content-api.md (NL+EN) herschreven
- File-tree unificatie: _file-tree.twig + _editor-styles.twig includes
- Versie verhoogd naar 2.6.3
This commit is contained in:
E.Noorlander
2026-08-20 16:45:53 +00:00
parent 6f18a13f90
commit 06beef43d7
28 changed files with 1481 additions and 950 deletions
Download Patch File Download Diff File Expand all files Collapse all files
admin/theme/default/views/layouts/admin.twig
+4 -5
View File
@@ -10,8 +10,7 @@
<link rel="stylesheet" href="/plugins/Navigation/assets/css/navigation.css">
<style>
body { background-color: #f5f6fa; min-height: 100vh; }
.admin-sidebar { background-color: {{ sidebar_color|default('#0a369d') }}; min-height: 100vh; width: 240px; position: fixed; top: 0; left: 0; z-index: 100; display: flex; flex-direction: column; }
.admin-sidebar .nav.flex-column:first-of-type { flex: 1; overflow-y: auto; }
.admin-sidebar { background-color: {{ sidebar_color|default('#0a369d') }}; height: 100vh; width: 240px; position: fixed; top: 0; left: 0; z-index: 100; overflow-y: auto; }
.admin-sidebar .nav-link { color: rgba(255,255,255,0.8); padding: 0.75rem 1.25rem; border-radius: 0; }
.admin-sidebar .nav-link:hover { color: #fff; background-color: rgba(255,255,255,0.1); }
.admin-sidebar .nav-link.active { color: #fff; background-color: rgba(255,255,255,0.2); border-left: 3px solid #fff; }
@@ -24,7 +23,7 @@
.stat-card .stat-icon { font-size: 2rem; opacity: 0.7; }
.admin-user { color: rgba(255,255,255,0.6); padding: 0.75rem 1.25rem; font-size: 0.85rem; border-top: 1px solid rgba(255,255,255,0.15); }
@media (max-width: 768px) {
.admin-sidebar { width: 100%; min-height: auto; position: relative; }
.admin-sidebar { width: 100%; height: auto; position: relative; }
.admin-main { margin-left: 0; }
}
</style>
@@ -35,7 +34,7 @@
{% block extra_css %}{% endblock %}
</head>
<body>
<nav class="admin-sidebar d-flex flex-column">
<nav class="admin-sidebar" id="adminSidebar">
<div class="admin-brand">
<i class="bi bi-gear-fill"></i> {{ ta.admin_title|default('CodePress Admin') }}
</div>
@@ -134,7 +133,7 @@
{% endif %}
</ul>
<ul class="nav flex-column mt-auto mb-5">
<ul class="nav flex-column mt-3 mb-4">
{% if user_real_role == 'admin' %}
<li class="nav-item">
<a class="nav-link" href="#" data-bs-toggle="modal" data-bs-target="#roleSwitchModal">
admin/theme/default/views/pages/_editor-styles.twig
+43
View File
@@ -0,0 +1,43 @@
{# Shared editor layout + file-tree styles for the content, plugin and theme editors.
Included via {% include 'pages/_editor-styles.twig' %} inside the extra_css block. #}
<style>
.editor-layout { display: flex; gap: 1rem; align-items: stretch; }
.plugin-file-tree { width: 300px; flex: 0 0 300px; }
.editor-main { flex: 1 1 auto; min-width: 0; }
.editor-tree { list-style: none; padding-left: 0; margin: 0; }
.editor-tree ul { list-style: none; padding-left: 1.1rem; margin: 0; }
.editor-tree li { padding: 0; position: relative; }
.editor-tree li > .tree-link { display: flex; align-items: center; gap: .3rem; padding: .2rem .4rem; border-radius: .25rem; text-decoration: none; color: inherit; font-size: .9rem; line-height: 1.4; }
.editor-tree li > .tree-link:hover { background-color: rgba(13,110,253,.08); }
.editor-tree li > .tree-link.is-active { background-color: var(--bs-primary-bg-subtle, #cfe2ff); font-weight: 600; }
.editor-tree .tree-toggle.is-selected { background-color: rgba(13,110,253,.12); font-weight: 600; }
.editor-tree .tree-toggle { cursor: pointer; user-select: none; width: 100%; text-align: left; background: transparent; border: 0; color: inherit; }
.editor-tree .tree-chevron { flex: 0 0 auto; }
.editor-tree .tree-chevron-spacer { display: inline-block; width: .9rem; flex: 0 0 auto; }
.editor-tree .badge-ext { font-size: .6rem; margin-left: auto; }
.editor-tree .text-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.editor-tree .tree-delete-form { position: absolute; right: .25rem; top: 50%; transform: translateY(-50%); margin: 0; }
.editor-tree .tree-delete-btn { font-size: .9rem; line-height: 1; padding: .15rem; color: #dc3545; background: transparent; border: 0; }
.editor-tree .tree-delete-btn:hover { color: #b02a37; }
.editor-tree .tree-move-btn { position: absolute; right: 1.75rem; top: 50%; transform: translateY(-50%); font-size: .9rem; line-height: 1; padding: .15rem; color: #6c757d; text-decoration: none; }
.editor-tree .tree-move-btn:hover { color: #0d6efd; }
.editor-tree li > .tree-link { padding-right: 3.5rem; }
.plugin-file-tree .card-body { max-height: 70vh; overflow-y: auto; }
/* Directory action buttons (new file/dir, rename, delete) — content editor only */
.tree-dir-row { position: relative; }
.tree-dir-row .tree-toggle { padding-right: 7rem; }
.tree-dir-actions { position: absolute; right: .25rem; top: 50%; transform: translateY(-50%); display: flex; gap: .15rem; align-items: center; }
.tree-dir-actions .btn-link { color: #6c757d; }
.tree-dir-actions .btn-link:hover { color: #0d6efd; }
.tree-dir-actions .tree-delete-btn { color: #dc3545; }
.tree-dir-actions .tree-delete-btn:hover { color: #b02a37; }
@media (max-width: 768px) {
.editor-layout { flex-direction: column; }
.plugin-file-tree { width: 100%; flex-basis: auto; max-height: 320px; }
.plugin-file-tree .card-body { max-height: 260px; }
}
/* Plugin checkbox group (content editor) */
.plugin-checkbox-group { display: flex; flex-direction: column; gap: .15rem; }
.plugin-checkbox-group .form-check { margin-bottom: 0; }
.plugin-checkbox-group .form-check-label { font-size: .875rem; }
</style>
admin/theme/default/views/pages/_file-tree.twig
+191
View File
@@ -0,0 +1,191 @@
{# Shared file-tree partial used by the content, plugin and theme editors.
Renders a nested, collapsible file tree from a list of nodes produced by
scanEditorFiles()/scanContentFiles()/scanPluginFiles()/scanThemeFiles().
Required variables (passed via include with ... context):
- files: array of nodes [{name, path, is_dir, extension, size, modified, children}]
- relFile: currently selected relative file path (for active highlight + auto-expand)
- editableExts: array of editable extensions (shown as .EXT badge)
- csrf_token: CSRF token for delete forms
- treeIdPrefix: prefix for collapse element ids (e.g. 'content-tree', 'plugin-tree', 'theme-tree')
- treeRouteBase: admin route base used to build file links, e.g. '/admin/content'
- treeRouteParams: extra query string for file links, e.g. 'plugin=MyPlugin&' or 'theme=default&' or '' (content)
- treeDeleteRoute: admin route for file delete, e.g. '/admin/content-file-delete'
- treeDeleteName: optional hidden field name for delete form (e.g. 'plugin' or 'theme'); emits no field when empty
- treeDeleteValue: optional hidden field value for treeDeleteName (e.g. the plugin/theme name)
- treeMoveRoute: admin route for file move, e.g. '/admin/plugins-file-move'
- treeMoveParams: extra query string for move link, e.g. 'plugin=X&' or ''
- treeDirActions: boolean; show per-folder new-file/new-dir/rename/delete buttons (content editor only)
- treeHideActionsFor: array of relative paths where move/delete actions are hidden (e.g. ['theme.json'])
Icon maps are chosen automatically from the node extension. #}
{% macro tree(nodes, opts) %}
{% import _self as macros %}
<ul class="editor-tree">
{% for n in nodes %}
{% set isActive = n.path == opts.relFile %}
{% set containsActive = n.is_dir and opts.relFile starts with (n.path ~ '/') %}
{% if n.is_dir %}
{% set icon = 'bi-folder-fill text-warning' %}
{% elseif n.extension == 'md' %}
{% set icon = 'bi-file-text text-primary' %}
{% elseif n.extension == 'php' %}
{% set icon = 'bi-file-code text-success' %}
{% elseif n.extension == 'twig' %}
{% set icon = 'bi-filetype-tfn text-info' %}
{% elseif n.extension == 'json' %}
{% set icon = 'bi-filetype-json text-secondary' %}
{% elseif n.extension in ['css','scss'] %}
{% set icon = 'bi-filetype-css text-info' %}
{% elseif n.extension == 'js' %}
{% set icon = 'bi-filetype-js text-warning' %}
{% elseif n.extension == 'html' %}
{% set icon = 'bi-file-earmark text-info' %}
{% elseif n.extension in ['jpg','jpeg','png','gif','webp','svg'] %}
{% set icon = 'bi-file-image text-info' %}
{% elseif n.extension == 'pdf' %}
{% set icon = 'bi-file-pdf text-danger' %}
{% else %}
{% set icon = 'bi-file text-muted' %}
{% endif %}
<li>
{% if n.is_dir %}
{% set collapseId = opts.treeIdPrefix ~ '-' ~ n.path|replace({'/':'-','.':'-'}) %}
<div class="tree-dir-row">
<button type="button" class="tree-link tree-toggle btn-toggle {{ containsActive ? '' : 'collapsed' }}"
data-bs-toggle="collapse"
data-bs-target="#{{ collapseId }}"
aria-expanded="{{ containsActive ? 'true' : 'false' }}"
title="{{ n.path }}">
<i class="bi {{ containsActive ? 'bi-chevron-down' : 'bi-chevron-right' }} tree-chevron"></i>
<i class="bi {{ icon }}"></i>
<span class="text-truncate">{{ n.name }}</span>
</button>
{% if opts.treeDirActions %}
<span class="tree-dir-actions">
<button type="button" class="btn btn-link btn-sm p-0 tree-newfile-btn" title="{{ ta.new_file|default('Nieuw bestand hier') }}" aria-label="{{ ta.new_file|default('Nieuw bestand') }}" data-bs-toggle="modal" data-bs-target="#newFileModal" data-in-dir="{{ n.path }}">
<i class="bi bi-file-earmark-plus"></i>
</button>
<button type="button" class="btn btn-link btn-sm p-0 tree-newdir-btn" title="{{ ta.new_folder|default('Nieuwe map') }}" aria-label="{{ ta.new_folder|default('Nieuwe map') }}" data-bs-toggle="modal" data-bs-target="#newDirModal" data-in-dir="{{ n.path }}">
<i class="bi bi-folder-plus"></i>
</button>
<a href="/admin/content-dir-rename-in?dir={{ n.path|url_encode }}" class="tree-rename-btn" title="{{ ta.rename|default('Hernoemen') }}" aria-label="{{ ta.rename|default('Hernoemen') }}">
<i class="bi bi-pencil"></i>
</a>
<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="{{ opts.csrfToken }}">
<input type="hidden" name="dir" value="{{ n.path }}">
<button type="submit" class="btn btn-link btn-sm p-0 text-danger tree-delete-btn" title="{{ ta.delete|default('Verwijderen') }}" aria-label="{{ ta.delete|default('Verwijderen') }}">
<i class="bi bi-trash"></i>
</button>
</form>
</span>
{% endif %}
</div>
<div id="{{ collapseId }}"
class="tree-collapse collapse {{ containsActive ? 'show' : '' }}">
{% if n.children is not empty %}
{{ macros.tree(n.children, opts) }}
{% endif %}
</div>
{% else %}
<a href="{{ opts.treeRouteBase }}?{{ opts.treeRouteParams }}file={{ n.path|url_encode }}"
class="tree-link {{ isActive ? 'is-active' : '' }}"
title="{{ n.path }}">
<span class="tree-chevron-spacer"></span>
<i class="bi {{ icon }}"></i>
<span class="text-truncate">{{ n.name }}</span>
{% if n.extension in opts.editableExts %}
<span class="badge bg-secondary badge-ext">{{ n.extension|upper }}</span>
{% endif %}
</a>
{% if n.path not in (opts.treeHideActionsFor ?? []) %}
<a href="{{ opts.treeMoveRoute }}?{{ opts.treeMoveParams }}file={{ n.path|url_encode }}"
class="tree-move-btn" title="{{ ta.rename|default('Hernoemen') }}" aria-label="{{ ta.rename|default('Hernoemen') }}">
<i class="bi bi-pencil"></i>
</a>
<form method="POST" action="{{ opts.treeDeleteRoute }}" class="tree-delete-form" onsubmit="return confirm('{{ ta.confirm_delete_file|default('Weet je zeker dat je dit bestand wilt verwijderen?') }}')">
<input type="hidden" name="csrf_token" value="{{ opts.csrfToken }}">
{% if opts.treeDeleteName %}
<input type="hidden" name="{{ opts.treeDeleteName }}" value="{{ opts.treeDeleteValue }}">
{% endif %}
<input type="hidden" name="file" value="{{ n.path }}">
<button type="submit" class="btn btn-link btn-sm p-0 text-danger tree-delete-btn" title="{{ ta.delete|default('Verwijderen') }}" aria-label="{{ ta.delete|default('Verwijderen') }}">
<i class="bi bi-trash"></i>
</button>
</form>
{% endif %}
{% endif %}
</li>
{% endfor %}
</ul>
{% endmacro %}
{% import _self as tree_macros %}
{# Render the tree inside the standard sidebar card. The container keeps the
generic id "editorFileTree" so shared CSS/JS selectors work everywhere. #}
<div class="plugin-file-tree">
<div class="card shadow-sm h-100">
<div class="card-header bg-white py-2 d-flex justify-content-between align-items-center">
<span class="small text-muted fw-semibold"><i class="bi bi-folder2-open"></i> {{ treeHeader|default('Bestanden') }}</span>
</div>
<div class="card-body p-2" id="editorFileTree">
{% if files is empty %}
<div class="small text-muted p-2">{{ treeEmptyText|default('Geen bestanden gevonden.') }}</div>
{% else %}
{{ tree_macros.tree(files, {
'relFile': relFile,
'editableExts': editableExts,
'csrfToken': csrf_token,
'treeIdPrefix': treeIdPrefix,
'treeRouteBase': treeRouteBase,
'treeRouteParams': treeRouteParams,
'treeDeleteRoute': treeDeleteRoute,
'treeDeleteName': treeDeleteName|default(''),
'treeDeleteValue': treeDeleteValue|default(''),
'treeMoveRoute': treeMoveRoute,
'treeMoveParams': treeMoveParams,
'treeDirActions': treeDirActions|default(false),
'treeHideActionsFor': treeHideActionsFor|default([]),
}) }}
{% endif %}
</div>
</div>
</div>
<script>
(function () {
var tree = document.getElementById('editorFileTree');
if (!tree) return;
function findToggle(collapseEl) {
var id = collapseEl.id;
if (!id) return null;
return tree.querySelector('[data-bs-target="#' + id + '"]');
}
function expand(btn) {
var icon = btn.querySelector('.tree-chevron');
if (icon) { icon.classList.remove('bi-chevron-right'); icon.classList.add('bi-chevron-down'); }
}
function collapse(btn) {
var icon = btn.querySelector('.tree-chevron');
if (icon) { icon.classList.remove('bi-chevron-down'); icon.classList.add('bi-chevron-right'); }
}
tree.addEventListener('shown.bs.collapse', function (e) {
var btn = findToggle(e.target);
if (btn) expand(btn);
});
tree.addEventListener('hidden.bs.collapse', function (e) {
var btn = findToggle(e.target);
if (btn) collapse(btn);
});
// Set initial state for folders that are open on page load
Array.prototype.forEach.call(tree.querySelectorAll('.tree-collapse.show'), function (c) {
var btn = findToggle(c);
if (btn) expand(btn);
});
})();
</script>
admin/theme/default/views/pages/_media-modal.twig
+195 -85
View File
@@ -1,19 +1,22 @@
{# Reusable media modal, included by admin.twig when needs_editor is true.
The editor toolbar "media" button opens this modal. It fetches the list
of media files from /admin/media-list (JSON) and, on click, inserts a
snippet into the active CodeMirror editor at the cursor.
of media files from /admin/media-list (JSON) and renders them as a
collapsible file tree (consistent with the content/plugin/theme editors).
On click of a file node, a snippet is inserted into the active CodeMirror
editor at the cursor.
Scope:
- Default (content editor): fetches /admin/media-list
which scans content/ (URLs are prefixed with /-media/).
- Plugin editor (mediaPluginName set): fetches /admin/media-list?plugin=<name>
which scans plugins/<name>/assets/ instead of content/.
- Theme editor (mediaThemeName set): fetches /admin/media-list?theme=<name>
which scans themes/<name>/assets/ instead of content/.
The snippet format depends on the editor's current mode (data-ext):
- markdown (md): ![alt](url)
- html/php: <img src="url" alt="name">
- other (css, json, js, ...): the raw URL #}
- markdown (md): ![alt](url)
- html/php: <img src="url" alt="name">
- other (css, json, js, ...): the raw URL #}
<div class="modal fade" id="mediaModal" tabindex="-1" aria-labelledby="mediaModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg modal-dialog-scrollable">
<div class="modal-content">
@@ -26,20 +29,20 @@
<span class="input-group-text bg-white"><i class="bi bi-search text-muted"></i></span>
<input type="search" id="mediaModalFilter" class="form-control" placeholder="{{ ta.media_filter|default('Filter op bestandsnaam...') }}" autocomplete="off" aria-label="{{ ta.media_filter|default('Filter') }}">
</div>
<div id="mediaModalGrid" class="row g-3">
<div class="col-12 text-center text-muted py-4" id="mediaModalLoading">
<div id="mediaModalTree" class="media-tree-wrap">
<div class="text-center text-muted py-4" id="mediaModalLoading">
<div class="spinner-border spinner-border-sm" role="status"></div>
<span class="ms-2">{{ ta.media_loading|default('Media laden...') }}</span>
</div>
<div class="col-12 text-center text-muted py-4 d-none" id="mediaModalEmpty">
<div class="text-center text-muted py-4 d-none" id="mediaModalEmpty">
<i class="bi bi-image display-6 d-block mb-2"></i>
{{ mediaEmptyText|default('Geen media bestanden gevonden in content/. Upload eerst bestanden via Media in het menu.') }}
</div>
<div class="col-12 text-center text-danger py-4 d-none" id="mediaModalError">
<div class="text-center text-danger py-4 d-none" id="mediaModalError">
<i class="bi bi-exclamation-triangle display-6 d-block mb-2"></i>
<span id="mediaModalErrorText"></span>
</div>
{# Filled by JS #}
{# Tree populated by JS #}
</div>
</div>
<div class="modal-footer">
@@ -49,6 +52,22 @@
</div>
</div>
<style>
/* Media modal tree — self-contained so the modal works on any editor page. */
.media-tree-wrap { max-height: 60vh; overflow-y: auto; }
.media-tree { list-style: none; padding-left: 0; margin: 0; }
.media-tree ul { list-style: none; padding-left: 1.1rem; margin: 0; }
.media-tree li { padding: 0; position: relative; }
.media-tree li > .tree-link { display: flex; align-items: center; gap: .3rem; padding: .2rem .4rem; border-radius: .25rem; text-decoration: none; color: inherit; font-size: .9rem; line-height: 1.4; cursor: pointer; }
.media-tree li > .tree-link:hover { background-color: rgba(13,110,253,.08); }
.media-tree .tree-toggle { cursor: pointer; user-select: none; width: 100%; text-align: left; background: transparent; border: 0; color: inherit; }
.media-tree .tree-chevron { flex: 0 0 auto; }
.media-tree .tree-chevron-spacer { display: inline-block; width: .9rem; flex: 0 0 auto; }
.media-tree .text-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.media-tree .badge-ext { font-size: .6rem; margin-left: auto; }
.media-tree .media-thumb { width: 1.1rem; height: 1.1rem; object-fit: cover; flex: 0 0 auto; border-radius: .2rem; }
</style>
<script>
(function () {
'use strict';
@@ -76,7 +95,6 @@
}
return '<a href="' + url + '">' + name + '</a>';
}
// css, scss, js, json, etc.: just insert the URL
return url;
}
@@ -85,86 +103,167 @@
return map[ext] || 'markdown';
}
function renderGrid() {
var grid = document.getElementById('mediaModalGrid');
if (!grid) return;
function iconFor(ext, isImage) {
if (isImage) return 'bi-file-image text-info';
if (ext === 'pdf') return 'bi-file-pdf text-danger';
if (['mp4', 'webm', 'mov', 'ogg', 'avi'].indexOf(ext) !== -1) return 'bi-file-play text-info';
if (['mp3', 'wav'].indexOf(ext) !== -1) return 'bi-file-music text-info';
return 'bi-file text-muted';
}
// Clear previous items (keep loading/empty/error placeholders)
Array.prototype.forEach.call(grid.querySelectorAll('[data-media-item]'), function (el) { el.remove(); });
var q = (document.getElementById('mediaModalFilter').value || '').trim().toLowerCase();
var shown = 0;
items.forEach(function (item) {
if (q && item.name.toLowerCase().indexOf(q) === -1) return;
shown++;
var col = document.createElement('div');
col.className = 'col-6 col-md-4 col-lg-3';
col.setAttribute('data-media-item', '1');
var card = document.createElement('div');
card.className = 'card shadow-sm h-100';
card.style.cursor = 'pointer';
card.title = item.name + ' (' + item.size + ')';
if (item.is_image) {
var img = document.createElement('img');
img.src = item.url;
img.className = 'card-img-top';
img.style.objectFit = 'cover';
img.style.height = '120px';
img.loading = 'lazy';
img.alt = item.name;
card.appendChild(img);
} else {
var ph = document.createElement('div');
ph.className = 'card-img-top d-flex align-items-center justify-content-center bg-light';
ph.style.height = '120px';
var icon = document.createElement('i');
icon.className = 'bi bi-file-earmark-play display-6 text-muted';
ph.appendChild(icon);
card.appendChild(ph);
}
var body = document.createElement('div');
body.className = 'card-body p-2';
var label = document.createElement('p');
label.className = 'card-text small text-muted text-truncate mb-0';
label.textContent = item.name;
body.appendChild(label);
card.appendChild(body);
card.addEventListener('click', function () {
var editor = window.codeMirrorEditor;
if (!editor) { return; }
var ext = (document.getElementById('editor-textarea') || {}).dataset;
var fileExt = (ext && ext.ext) ? ext.ext : 'md';
var mode = modeForExt(fileExt);
var snippet = formatSnippet(item.url, item.name, item.extension, mode);
editor.replaceSelection(snippet);
editor.focus();
// Close the modal
var modalEl = document.getElementById('mediaModal');
if (window.bootstrap && modalEl) {
var inst = bootstrap.Modal.getInstance(modalEl);
if (inst) inst.hide();
// Build a nested tree from a flat list of {path, name, ...} items.
function buildTree(flat) {
var root = { name: '', path: '', children: {}, isDir: true };
flat.forEach(function (item) {
var parts = item.path.split('/');
var node = root;
for (var i = 0; i < parts.length; i++) {
var part = parts[i];
if (part === '') continue;
var isLast = i === parts.length - 1;
if (!node.children[part]) {
node.children[part] = {
name: part, path: parts.slice(0, i + 1).join('/'),
children: {}, isDir: !isLast
};
}
});
col.appendChild(card);
grid.appendChild(col);
if (isLast) {
node.children[part].item = item;
node.children[part].isDir = false;
}
node = node.children[part];
}
});
// Convert children maps to sorted arrays (dirs first, then alpha)
function finalize(n) {
var arr = Object.keys(n.children).map(function (k) { return n.children[k]; });
arr.sort(function (a, b) {
if (a.isDir && !b.isDir) return -1;
if (!a.isDir && b.isDir) return 1;
return a.name.toLowerCase().localeCompare(b.name.toLowerCase());
});
n.childArr = arr;
arr.forEach(finalize);
return n;
}
finalize(root);
return root;
}
// Toggle empty placeholder
var empty = document.getElementById('mediaModalEmpty');
function matchesFilter(node, q) {
if (!q) return true;
if (node.item && node.item.name.toLowerCase().indexOf(q) !== -1) return true;
if (node.childArr) {
for (var i = 0; i < node.childArr.length; i++) {
if (matchesFilter(node.childArr[i], q)) return true;
}
}
return false;
}
function escapeHtml(s) {
return String(s).replace(/[&<>"']/g, function (c) {
return { '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' }[c];
});
}
var idCounter = 0;
function renderNode(node, container, q) {
var ul = document.createElement('ul');
ul.className = 'media-tree';
node.childArr.forEach(function (child) {
if (!matchesFilter(child, q)) return;
var li = document.createElement('li');
if (child.isDir) {
var collapseId = 'media-tree-' + (++idCounter);
var btn = document.createElement('button');
btn.type = 'button';
btn.className = 'tree-link tree-toggle btn-toggle collapsed';
btn.setAttribute('data-bs-toggle', 'collapse');
btn.setAttribute('data-bs-target', '#' + collapseId);
btn.setAttribute('aria-expanded', 'false');
btn.title = child.path;
btn.innerHTML = '<i class="bi bi-chevron-right tree-chevron"></i>' +
'<i class="bi bi-folder-fill text-warning"></i>' +
'<span class="text-truncate">' + escapeHtml(child.name) + '</span>';
li.appendChild(btn);
var wrap = document.createElement('div');
wrap.id = collapseId;
wrap.className = 'tree-collapse collapse';
renderNode(child, wrap, q);
li.appendChild(wrap);
} else {
var item = child.item;
var a = document.createElement('a');
a.className = 'tree-link';
a.title = item.path + ' (' + item.size + ')';
var thumb = '';
if (item.is_image) {
thumb = '<img class="media-thumb" src="' + item.url + '" alt="" loading="lazy">';
} else {
thumb = '<i class="bi ' + iconFor(item.extension, item.is_image) + '"></i>';
}
a.innerHTML = '<span class="tree-chevron-spacer"></span>' + thumb +
'<span class="text-truncate">' + escapeHtml(item.name) + '</span>' +
'<span class="badge bg-secondary badge-ext">' + item.extension.toUpperCase() + '</span>';
a.addEventListener('click', function (e) {
e.preventDefault();
insertItem(item);
});
li.appendChild(a);
}
ul.appendChild(li);
});
container.appendChild(ul);
}
function insertItem(item) {
var editor = window.codeMirrorEditor;
if (!editor) return;
var ext = (document.getElementById('editor-textarea') || {}).dataset;
var fileExt = (ext && ext.ext) ? ext.ext : 'md';
var mode = modeForExt(fileExt);
var snippet = formatSnippet(item.url, item.name, item.extension, mode);
editor.replaceSelection(snippet);
editor.focus();
var modalEl = document.getElementById('mediaModal');
if (window.bootstrap && modalEl) {
var inst = bootstrap.Modal.getInstance(modalEl);
if (inst) inst.hide();
}
}
function renderTree() {
var wrap = document.getElementById('mediaModalTree');
if (!wrap) return;
// Clear previous tree (keep placeholders)
Array.prototype.forEach.call(wrap.querySelectorAll('.media-tree'), function (el) { el.remove(); });
var q = (document.getElementById('mediaModalFilter').value || '').trim().toLowerCase();
var tree = buildTree(items);
var shown = tree.childArr.length;
if (shown > 0) {
// When filtering, auto-expand all dirs by rendering without collapsed class
renderNode(tree, wrap, q);
}
var loading = document.getElementById('mediaModalLoading');
var empty = document.getElementById('mediaModalEmpty');
if (loading) loading.classList.add('d-none');
if (empty) empty.classList.toggle('d-none', shown > 0);
// When filtering, expand all folders for visibility
if (q) {
Array.prototype.forEach.call(wrap.querySelectorAll('.tree-collapse'), function (el) { el.classList.add('show'); });
Array.prototype.forEach.call(wrap.querySelectorAll('.tree-toggle.btn-toggle'), function (el) {
el.classList.remove('collapsed');
el.setAttribute('aria-expanded', 'true');
var icon = el.querySelector('.tree-chevron');
if (icon) { icon.classList.remove('bi-chevron-right'); icon.classList.add('bi-chevron-down'); }
});
}
}
function load() {
if (loaded) { renderGrid(); return; }
if (loaded) { renderTree(); return; }
var plugin = {{ mediaPluginName|default('')|json_encode|raw }};
var theme = {{ mediaThemeName|default('')|json_encode|raw }};
var url = '/admin/media-list';
@@ -178,7 +277,7 @@
.then(function (data) {
items = Array.isArray(data) ? data : [];
loaded = true;
renderGrid();
renderTree();
})
.catch(function (err) {
var loading = document.getElementById('mediaModalLoading');
@@ -190,15 +289,26 @@
});
}
// Load when the modal is first shown
var modalEl = document.getElementById('mediaModal');
if (modalEl) {
modalEl.addEventListener('show.bs.modal', load);
}
// Filter as the user types
var filter = document.getElementById('mediaModalFilter');
if (filter) {
filter.addEventListener('input', renderGrid);
filter.addEventListener('input', renderTree);
}
// Chevron rotation: swap icon class between chevron-right and chevron-down
var mediaTreeWrap = document.getElementById('mediaModalTree');
if (mediaTreeWrap) {
mediaTreeWrap.addEventListener('shown.bs.collapse', function (e) {
var btn = mediaTreeWrap.querySelector('[data-bs-target="#' + e.target.id + '"]');
if (btn) { var icon = btn.querySelector('.tree-chevron'); if (icon) { icon.classList.remove('bi-chevron-right'); icon.classList.add('bi-chevron-down'); } }
});
mediaTreeWrap.addEventListener('hidden.bs.collapse', function (e) {
var btn = mediaTreeWrap.querySelector('[data-bs-target="#' + e.target.id + '"]');
if (btn) { var icon = btn.querySelector('.tree-chevron'); if (icon) { icon.classList.remove('bi-chevron-down'); icon.classList.add('bi-chevron-right'); } }
});
}
})();
</script>
admin/theme/default/views/pages/content-dir-form.twig
+1 -1
View File
@@ -17,7 +17,7 @@
<button type="submit" class="btn btn-primary">
<i class="bi bi-check-lg"></i> {{ ta.rename|default('Hernoemen') }}
</button>
<a href="/admin/content-list?dir={{ dir|url_encode }}" class="btn btn-outline-secondary">{{ ta.cancel|default('Annuleren') }}</a>
<a href="/admin/content" class="btn btn-outline-secondary">{{ ta.cancel|default('Annuleren') }}</a>
</div>
</form>
{% endblock %}
admin/theme/default/views/pages/content-edit.twig
+20 -27
View File
@@ -2,6 +2,10 @@
{% 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>
@@ -11,12 +15,8 @@
<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">{{ ta.filename|default('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">{{ ta.name_help|default('Alleen letters, cijfers, punten, underscores en streepjes.') }}</small>
<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">
@@ -29,31 +29,29 @@
</div>
{% if availablePlugins is not empty %}
<div class="col-md-4">
<label class="form-label d-block">{{ ta.visible_plugins|default('Zichtbare plugins') }}</label>
<div class="d-flex flex-wrap gap-1">
<label class="form-label">{{ ta.visible_plugins|default('Zichtbare plugins') }}</label>
<div class="plugin-checkbox-group">
{% for plugin in availablePlugins %}
<input type="checkbox" class="btn-check" id="plugin-{{ plugin }}" name="plugins[]" value="{{ plugin }}" autocomplete="off" {{ plugin in selectedPlugins ? 'checked' : '' }}>
<label class="btn btn-outline-primary btn-sm" for="plugin-{{ plugin }}">{{ plugin }}</label>
<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 (currentAuthorName or currentAuthorEmail or currentCreated) %}
{% 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-person"></i> {{ ta.author_name|default('Auteur naam') }}</label>
<input type="text" class="form-control-plaintext form-control-sm" value="{{ currentAuthorName }}" readonly>
</div>
<div class="col-md-4">
<label class="form-label text-muted"><i class="bi bi-envelope"></i> {{ ta.author_email|default('Auteur e-mail') }}</label>
<input type="text" class="form-control-plaintext form-control-sm" value="{{ currentAuthorEmail }}" readonly>
</div>
<div class="col-md-4">
<label class="form-label text-muted"><i class="bi bi-calendar"></i> {{ ta.created|default('Aangemaakt') }}</label>
<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 %}
@@ -67,11 +65,11 @@
<i class="bi bi-check-lg"></i> {{ ta.save|default('Opslaan') }}
</button>
{% if isEditable %}
<a href="/{{ currentLang }}{% if fileDir %}/{{ fileDir }}{% endif %}/{{ fileName|replace({'.md': '', '.php': '', '.html': ''}) }}" target="_blank" class="btn btn-outline-info" title="{{ ta.open_new_tab|default('Open in nieuw tabblad') }}">
<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-list?dir={{ fileDir|url_encode }}" class="btn btn-outline-secondary" id="back-btn">{{ ta.back|default('Terug') }}</a>
<a href="/admin/content" class="btn btn-outline-secondary" id="back-btn">{{ ta.back|default('Terug') }}</a>
</div>
</form>
</div>
@@ -80,7 +78,6 @@
<script>
document.addEventListener('DOMContentLoaded', function () {
var backBtn = document.getElementById('back-btn');
var filenameInput = document.getElementById('filename');
var layoutSelect = document.getElementById('layout');
if (!backBtn) return;
@@ -94,10 +91,6 @@ document.addEventListener('DOMContentLoaded', function () {
backBtn.classList.add('btn-outline-danger');
}
if (filenameInput) {
filenameInput.addEventListener('input', markChanged);
}
// Update the layout value in the editor's frontmatter when the select changes
if (layoutSelect) {
layoutSelect.addEventListener('change', function () {
admin/theme/default/views/pages/content-files.twig
+89 -193
View File
@@ -2,123 +2,14 @@
{% block title %}{{ ta.content_editor|default('Content editor') }} - {{ ta.admin_title|default('CodePress Admin') }}{% endblock %}
{# Recursively render the content file tree as a nested, collapsible list. #}
{% macro tree(nodes, relFile, editableExts, csrfToken) %}
{% import _self as macros %}
<ul class="plugin-tree">
{% for n in nodes %}
{% set isActive = n.path == relFile %}
{% set containsActive = n.is_dir and relFile starts with (n.path ~ '/') %}
{% set icon = n.is_dir ? 'bi-folder-fill text-warning' : (n.extension == 'md' ? 'bi-file-text text-primary' : (n.extension == 'php' ? 'bi-file-code text-success' : (n.extension == 'html' ? 'bi-file-earmark text-info' : (n.extension in ['jpg','jpeg','png','gif','webp','svg'] ? 'bi-file-image text-info' : (n.extension == 'pdf' ? 'bi-file-pdf text-danger' : 'bi-file text-muted'))))) %}
<li>
{% if n.is_dir %}
{% set collapseId = 'content-tree-' ~ n.path|replace({'/':'-','.':'-'}) %}
<div class="tree-dir-row">
<button type="button" class="tree-link tree-toggle btn-toggle {{ containsActive ? '' : 'collapsed' }}"
data-bs-toggle="collapse"
data-bs-target="#{{ collapseId }}"
aria-expanded="{{ containsActive ? 'true' : 'false' }}"
title="{{ n.path }}">
<i class="bi bi-chevron-down tree-chevron"></i>
<i class="bi {{ icon }}"></i>
<span class="text-truncate">{{ n.name }}</span>
</button>
<span class="tree-dir-actions">
<button type="button" class="btn btn-link btn-sm p-0 tree-newfile-btn" title="{{ ta.new_file|default('Nieuw bestand hier') }}" aria-label="{{ ta.new_file|default('Nieuw bestand') }}" data-bs-toggle="modal" data-bs-target="#newFileModal" data-in-dir="{{ n.path }}">
<i class="bi bi-file-earmark-plus"></i>
</button>
<button type="button" class="btn btn-link btn-sm p-0 tree-newdir-btn" title="{{ ta.new_folder|default('Nieuwe map') }}" aria-label="{{ ta.new_folder|default('Nieuwe map') }}" data-bs-toggle="modal" data-bs-target="#newDirModal" data-in-dir="{{ n.path }}">
<i class="bi bi-folder-plus"></i>
</button>
<a href="/admin/content-dir-rename-in?dir={{ n.path|url_encode }}" class="tree-rename-btn" title="{{ ta.rename|default('Hernoemen') }}" aria-label="{{ ta.rename|default('Hernoemen') }}">
<i class="bi bi-pencil"></i>
</a>
<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="{{ csrfToken }}">
<input type="hidden" name="dir" value="{{ n.path }}">
<button type="submit" class="btn btn-link btn-sm p-0 text-danger tree-delete-btn" title="{{ ta.delete|default('Verwijderen') }}" aria-label="{{ ta.delete|default('Verwijderen') }}">
<i class="bi bi-trash"></i>
</button>
</form>
</span>
</div>
<div id="{{ collapseId }}"
class="tree-collapse collapse {{ containsActive ? 'show' : '' }}">
{% if n.children is not empty %}
{{ macros.tree(n.children, relFile, editableExts, csrfToken) }}
{% endif %}
</div>
{% else %}
<a href="/admin/content?file={{ n.path|url_encode }}"
class="tree-link {{ isActive ? 'is-active' : '' }}"
title="{{ n.path }}">
<span class="tree-chevron-spacer"></span>
<i class="bi {{ icon }}"></i>
<span class="text-truncate">{{ n.name }}</span>
{% if n.extension in editableExts %}
<span class="badge bg-secondary badge-ext">{{ n.extension|upper }}</span>
{% endif %}
</a>
<a href="/admin/content-file-move?file={{ n.path|url_encode }}"
class="tree-move-btn" title="{{ ta.move|default('Verplaatsen') }}" aria-label="{{ ta.move|default('Verplaatsen') }}">
<i class="bi bi-arrows-move"></i>
</a>
<form method="POST" action="/admin/content-file-delete" class="tree-delete-form" onsubmit="return confirm('{{ ta.confirm_delete_file|default('Weet je zeker dat je dit bestand wilt verwijderen?') }}')">
<input type="hidden" name="csrf_token" value="{{ csrfToken }}">
<input type="hidden" name="file" value="{{ n.path }}">
<button type="submit" class="btn btn-link btn-sm p-0 text-danger tree-delete-btn" title="{{ ta.delete|default('Verwijderen') }}" aria-label="{{ ta.delete|default('Verwijderen') }}">
<i class="bi bi-trash"></i>
</button>
</form>
{% endif %}
</li>
{% endfor %}
</ul>
{% endmacro %}
{% import _self as tree_macros %}
{% 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>
.plugin-editor-layout { display: flex; gap: 1rem; align-items: stretch; }
.plugin-file-tree { width: 300px; flex: 0 0 300px; }
.plugin-editor-main { flex: 1 1 auto; min-width: 0; }
.plugin-tree { list-style: none; padding-left: 0; margin: 0; }
.plugin-tree ul { list-style: none; padding-left: 1.1rem; margin: 0; }
.plugin-tree li { padding: 0; position: relative; }
.plugin-tree li > .tree-link { display: flex; align-items: center; gap: .3rem; padding: .2rem .4rem; border-radius: .25rem; text-decoration: none; color: inherit; font-size: .9rem; line-height: 1.4; }
.plugin-tree li > .tree-link:hover { background-color: rgba(13,110,253,.08); }
.plugin-tree li > .tree-link.is-active { background-color: var(--bs-primary-bg-subtle, #cfe2ff); font-weight: 600; }
.plugin-tree .tree-toggle { cursor: pointer; user-select: none; width: 100%; text-align: left; background: transparent; border: 0; color: inherit; }
.plugin-tree .tree-chevron { transition: transform .15s ease; flex: 0 0 auto; }
.plugin-tree .tree-chevron-spacer { display: inline-block; width: .9rem; flex: 0 0 auto; }
.plugin-tree .btn-toggle.collapsed .tree-chevron { transform: rotate(-90deg); }
.plugin-tree .badge-ext { font-size: .6rem; margin-left: auto; }
.plugin-tree .text-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.plugin-tree .tree-delete-form { position: absolute; right: .25rem; top: 50%; transform: translateY(-50%); margin: 0; }
.plugin-tree .tree-delete-btn { font-size: .9rem; line-height: 1; padding: .15rem; color: #dc3545; background: transparent; border: 0; }
.plugin-tree .tree-delete-btn:hover { color: #b02a37; }
.plugin-tree .tree-move-btn { position: absolute; right: 1.75rem; top: 50%; transform: translateY(-50%); font-size: .9rem; line-height: 1; padding: .15rem; color: #6c757d; text-decoration: none; }
.plugin-tree .tree-move-btn:hover { color: #0d6efd; }
.plugin-tree li > .tree-link { padding-right: 3.5rem; }
.plugin-file-tree .card-body { max-height: 70vh; overflow-y: auto; }
/* Directory action buttons (new file/dir, rename, delete) */
.tree-dir-row { position: relative; }
.tree-dir-row .tree-toggle { padding-right: 7rem; }
.tree-dir-actions { position: absolute; right: .25rem; top: 50%; transform: translateY(-50%); display: flex; gap: .15rem; align-items: center; }
.tree-dir-actions .btn-link { color: #6c757d; }
.tree-dir-actions .btn-link:hover { color: #0d6efd; }
.tree-dir-actions .tree-delete-btn { color: #dc3545; }
.tree-dir-actions .tree-delete-btn:hover { color: #b02a37; }
/* Git status badge */
/* Git status badge (content editor only) */
.git-status { font-size: .75rem; }
.git-status .badge { font-weight: 400; }
@media (max-width: 768px) {
.plugin-editor-layout { flex-direction: column; }
.plugin-file-tree { width: 100%; flex-basis: auto; max-height: 320px; }
.plugin-file-tree .card-body { max-height: 260px; }
}
</style>
{% endblock %}
@@ -126,58 +17,23 @@
<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">
{# Fase 5: backup/git integratie in zijbalk header #}
{% if gitStatus.available %}
<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>
{% if gitStatus.dirty %}
<form method="POST" action="/admin/content-git-commit" class="d-inline" onsubmit="return confirm('{{ ta.git_commit_confirm|default('Wijzigingen committen naar git?') }}')">
<input type="hidden" name="csrf_token" value="{{ csrf_token }}">
<button type="submit" class="btn btn-outline-success btn-sm" title="{{ ta.git_commit|default('Git commit') }}">
<i class="bi bi-git"></i> {{ ta.git_commit|default('Commit') }}
</button>
</form>
{% endif %}
{% else %}
<form method="POST" action="/admin/content-git-init" class="d-inline" onsubmit="return confirm('{{ ta.git_init_confirm|default('Git repository initialiseren in content/?') }}')">
<input type="hidden" name="csrf_token" value="{{ csrf_token }}">
<button type="submit" class="btn btn-outline-secondary btn-sm" title="{{ ta.git_init|default('Git init') }}">
<i class="bi bi-git"></i> {{ ta.git_init|default('Git init') }}
</button>
</form>
<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>
{% endif %}
{# 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" data-bs-toggle="modal" data-bs-target="#newFileModal" data-in-dir="">
<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" data-bs-toggle="modal" data-bs-target="#newDirModal" data-in-dir="">
<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>
<a href="/admin/content-list" class="btn btn-outline-secondary btn-sm">
<i class="bi bi-list"></i> {{ ta.list_view|default('Lijst weergave') }}
</a>
</div>
</div>
{# Fase 5: git status badge bovenaan #}
{% if gitStatus.available %}
<div class="git-status mb-2 d-flex gap-2 align-items-center flex-wrap">
<span class="badge bg-secondary"><i class="bi bi-git"></i> {{ gitStatus.branch|default('git') }}</span>
{% if gitStatus.dirty %}
<span class="badge bg-warning text-dark">{{ ta.git_dirty|default('niet-committed wijzigingen') }}</span>
{% else %}
<span class="badge bg-success">{{ ta.git_clean|default('schone werkmap') }}</span>
{% endif %}
{% if gitStatus.lastCommit %}<span class="text-muted small">{{ ta.git_last_commit|default('laatste commit:') }} {{ gitStatus.lastCommit }}</span>{% endif %}
</div>
{% endif %}
{# Upload form (collapsed by default) #}
<div class="collapse mb-3" id="contentUploadForm">
<div class="card shadow-sm">
@@ -198,25 +54,29 @@
</div>
</div>
<div class="plugin-editor-layout">
{# File tree sidebar #}
<div class="plugin-file-tree">
<div class="card shadow-sm h-100">
<div class="card-header bg-white py-2 d-flex justify-content-between align-items-center">
<span class="small text-muted fw-semibold"><i class="bi bi-folder2-open"></i> {{ ta.content_files|default('Content bestanden') }}</span>
</div>
<div class="card-body p-2" id="pluginFileTree">
{% if files is empty %}
<div class="small text-muted p-2">{{ ta.content_no_files|default('Geen bestanden gevonden.') }}</div>
{% else %}
{{ tree_macros.tree(files, relFile, editableExts, csrf_token) }}
{% endif %}
</div>
</div>
</div>
<div class="editor-layout">
{# File tree sidebar (shared partial) #}
{% include 'pages/_file-tree.twig' with {
'files': files,
'relFile': relFile,
'editableExts': editableExts,
'csrf_token': csrf_token,
'treeIdPrefix': 'content-tree',
'treeHeader': ta.content_files|default('Content bestanden'),
'treeEmptyText': ta.content_no_files|default('Geen bestanden gevonden.'),
'treeRouteBase': '/admin/content',
'treeRouteParams': '',
'treeDeleteRoute': '/admin/content-file-delete',
'treeDeleteName': '',
'treeDeleteValue': '',
'treeMoveRoute': '/admin/content-file-move',
'treeMoveParams': '',
'treeDirActions': true,
'treeHideActionsFor': [],
} %}
{# Editor main panel #}
<div class="plugin-editor-main">
<div class="editor-main">
{% if relFile %}
<nav aria-label="breadcrumb" class="mb-2">
<ol class="breadcrumb mb-0">
@@ -243,13 +103,16 @@
{# Metadata row: filename display, layout selector, plugins #}
<div class="row mb-3">
<div class="col-md-4">
<label class="form-label text-muted small mb-1">{{ ta.filename|default('Bestandsnaam') }}</label>
<p class="form-control-plaintext form-control-sm mb-0"><code>{{ fileName }}</code></p>
<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>
{% if fileExt == 'md' %}
<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 %}
@@ -257,33 +120,29 @@
</div>
{% if availablePlugins is not empty %}
<div class="col-md-4">
<label class="form-label d-block">{{ ta.visible_plugins|default('Zichtbare plugins') }}</label>
<div class="d-flex flex-wrap gap-1">
<label class="form-label">{{ ta.visible_plugins|default('Zichtbare plugins') }}</label>
<div class="plugin-checkbox-group">
{% for plugin in availablePlugins %}
<input type="checkbox" class="btn-check" id="plugin-{{ plugin }}" name="plugins[]" value="{{ plugin }}" autocomplete="off" {{ plugin in selectedPlugins ? 'checked' : '' }}>
<label class="btn btn-outline-primary btn-sm" for="plugin-{{ plugin }}">{{ plugin }}</label>
<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 currentAuthorName or currentAuthorEmail or currentCreated %}
{# Created / edited timestamps (read-only, auto-filled) #}
<div class="row mb-3">
<div class="col-md-4">
<label class="form-label text-muted"><i class="bi bi-person"></i> {{ ta.author_name|default('Auteur naam') }}</label>
<input type="text" class="form-control-plaintext form-control-sm" value="{{ currentAuthorName }}" readonly>
</div>
<div class="col-md-4">
<label class="form-label text-muted"><i class="bi bi-envelope"></i> {{ ta.author_email|default('Auteur e-mail') }}</label>
<input type="text" class="form-control-plaintext form-control-sm" value="{{ currentAuthorEmail }}" readonly>
</div>
<div class="col-md-4">
<label class="form-label text-muted"><i class="bi bi-calendar"></i> {{ ta.created|default('Aangemaakt') }}</label>
<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>
{% endif %}
<div class="editor-toolbar" id="editor-toolbar"></div>
<div class="editor-wrapper">
<textarea name="content" id="editor-textarea" data-ext="{{ fileExt }}">{{ fileContent }}</textarea>
@@ -294,10 +153,9 @@
<button type="submit" 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 %}/{{ fileName|replace({'.md': '', '.php': '', '.html': ''}) }}" target="_blank" class="btn btn-outline-info" title="{{ ta.open_new_tab|default('Open in nieuw tabblad') }}">
<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>
<a href="/admin/content-list?dir={{ fileDir|url_encode }}" class="btn btn-outline-secondary">{{ ta.list_view|default('Lijst weergave') }}</a>
</div>
</form>
{% else %}
@@ -385,10 +243,39 @@
document.addEventListener('DOMContentLoaded', function () {
var newFileModal = document.getElementById('newFileModal');
var newDirModal = document.getElementById('newDirModal');
var newFileBtnTop = document.getElementById('newFileBtnTop');
var newDirBtnTop = document.getElementById('newDirBtnTop');
// Track the selected directory for the top toolbar buttons
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);
}
// Make folder rows selectable: clicking the folder name selects it
var tree = document.getElementById('editorFileTree');
if (tree) {
tree.addEventListener('click', function (e) {
var toggle = e.target.closest('.tree-toggle');
if (!toggle) return;
// Find the in-dir from the adjacent new-file button
var row = toggle.closest('.tree-dir-row');
if (!row) return;
var newFileBtn = row.querySelector('.tree-newfile-btn');
var dir = newFileBtn ? newFileBtn.getAttribute('data-in-dir') : '';
updateTopButtons(dir);
// Visually mark the selected folder
tree.querySelectorAll('.tree-toggle.is-selected').forEach(function (el) { el.classList.remove('is-selected'); });
toggle.classList.add('is-selected');
});
}
if (newFileModal) {
newFileModal.addEventListener('show.bs.modal', function (event) {
var trigger = event.relatedTarget;
var inDir = trigger ? trigger.getAttribute('data-in-dir') : '';
var inDir = trigger ? trigger.getAttribute('data-in-dir') : selectedDir;
var hidden = document.getElementById('newFileDir');
if (hidden) hidden.value = inDir || '';
// Show the in-dir prefix as a hint in the placeholder
@@ -402,12 +289,21 @@ document.addEventListener('DOMContentLoaded', function () {
if (newDirModal) {
newDirModal.addEventListener('show.bs.modal', function (event) {
var trigger = event.relatedTarget;
var inDir = trigger ? trigger.getAttribute('data-in-dir') : '';
var inDir = trigger ? trigger.getAttribute('data-in-dir') : selectedDir;
var hidden = document.getElementById('newDirInDir');
if (hidden) hidden.value = inDir;
});
}
// Mark the initially selected folder (based on the opened file's directory)
if (selectedDir && tree) {
var initialBtn = tree.querySelector('.tree-newfile-btn[data-in-dir="' + selectedDir + '"]');
if (initialBtn) {
var initialToggle = initialBtn.closest('.tree-dir-row').querySelector('.tree-toggle');
if (initialToggle) initialToggle.classList.add('is-selected');
}
}
// Layout select → update frontmatter (spiegel van content-edit.twig)
var layoutSelect = document.getElementById('layout');
if (layoutSelect) {
admin/theme/default/views/pages/content-move-form.twig
+12 -5
View File
@@ -4,7 +4,7 @@
{% 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-arrows-move"></i> {{ ta.file|default('Bestand') }} {{ ta.move_suffix|default('verplaatsen') }}</h2>
<h2 class="mb-0"><i class="bi bi-arrows-move"></i> {{ ta.file|default('Bestand') }} {{ ta.move_suffix|default('verplaatsen / hernoemen') }}</h2>
<a href="/admin/content?file={{ relFile|url_encode }}" class="btn btn-outline-secondary btn-sm">
<i class="bi bi-arrow-left"></i> {{ ta.back|default('Terug') }}
</a>
@@ -15,22 +15,29 @@
<input type="hidden" name="file" value="{{ relFile }}">
<div class="card-body">
<div class="alert alert-info">
{{ ta.move_prefix|default('Verplaats') }} <strong>{{ itemName }}</strong>
{{ ta.move_prefix|default('Verplaats / hernoem') }} <strong>{{ itemName }}{{ itemExt }}</strong>
{% if itemDir %}<span class="text-muted">(content/{{ itemDir }})</span>{% else %}<span class="text-muted">(content/)</span>{% endif %}
{{ ta.move_to|default('naar:') }}
</div>
<div class="mb-3">
<label for="new_name" class="form-label">{{ ta.filename|default('Bestandsnaam') }}</label>
<div class="input-group">
<input type="text" class="form-control" id="new_name" name="new_name" value="{{ itemName }}" required>
<span class="input-group-text">{{ itemExt }}</span>
</div>
<small class="form-text text-muted">{{ ta.name_help|default('Alleen letters, cijfers, punten, underscores en streepjes.') }}</small>
</div>
<div class="mb-3">
<label for="destination" class="form-label">{{ ta.target_folder|default('Doelmap') }} <small class="text-muted">(content/)</small></label>
<select class="form-select" id="destination" name="destination" required>
{% for directory in directories %}
<option value="{{ directory }}">{{ directory == '' ? '(content root)' : directory }}</option>
<option value="{{ directory }}" {{ directory == itemDir ? 'selected' : '' }}>{{ directory == '' ? '(content root)' : directory }}</option>
{% endfor %}
</select>
</div>
</div>
<div class="card-footer bg-white">
<button type="submit" class="btn btn-primary">
<i class="bi bi-check-lg"></i> {{ ta.move|default('Verplaatsen') }}
<i class="bi bi-check-lg"></i> {{ ta.save|default('Opslaan') }}
</button>
<a href="/admin/content?file={{ relFile|url_encode }}" class="btn btn-outline-secondary">{{ ta.cancel|default('Annuleren') }}</a>
</div>
admin/theme/default/views/pages/content-new.twig
+1 -1
View File
@@ -34,7 +34,7 @@
<button type="submit" class="btn btn-primary">
<i class="bi bi-check-lg"></i> {{ ta.create|default('Aanmaken') }}
</button>
<a href="/admin/content-list?dir={{ dir|url_encode }}" class="btn btn-outline-secondary">{{ ta.cancel|default('Annuleren') }}</a>
<a href="/admin/content" class="btn btn-outline-secondary">{{ ta.cancel|default('Annuleren') }}</a>
</div>
</form>
</div>
admin/theme/default/views/pages/plugins-edit.twig
+22 -107
View File
@@ -2,99 +2,10 @@
{% block title %}{{ ta.plugin_edit|default('Plugin bewerken: ') }}{{ pluginName }} - {{ ta.admin_title|default('CodePress Admin') }}{% endblock %}
{# Recursively render the plugin file tree as a nested, collapsible list.
A folder is expanded by default when the currently selected file lives
somewhere inside it, so the user always sees where their file is. #}
{% macro tree(nodes, pluginName, relFile, editableExts, csrfToken) %}
{% import _self as macros %}
<ul class="plugin-tree">
{% for n in nodes %}
{% set isActive = n.path == relFile %}
{# A folder contains the active file when relFile starts with n.path + '/' #}
{% set containsActive = n.is_dir and relFile starts with (n.path ~ '/') %}
{# Icon per type #}
{% set icon = n.is_dir ? 'bi-folder-fill text-warning' : (n.extension == 'php' ? 'bi-file-code text-success' : (n.extension == 'json' ? 'bi-filetype-json text-secondary' : (n.extension == 'md' ? 'bi-file-text text-primary' : (n.extension in ['css','scss'] ? 'bi-filetype-css text-info' : (n.extension == 'js' ? 'bi-filetype-js text-warning' : (n.extension == 'html' ? 'bi-file-earmark text-info' : 'bi-file text-muted')))))) %}
<li>
{% if n.is_dir %}
{% set collapseId = 'plugin-tree-' ~ n.path|replace({'/':'-','.':'-'}) %}
<button type="button" class="tree-link tree-toggle btn-toggle {{ containsActive ? '' : 'collapsed' }}"
data-bs-toggle="collapse"
data-bs-target="#{{ collapseId }}"
aria-expanded="{{ containsActive ? 'true' : 'false' }}"
title="{{ n.path }}">
<i class="bi bi-chevron-down tree-chevron"></i>
<i class="bi {{ icon }}"></i>
<span class="text-truncate">{{ n.name }}</span>
</button>
<div id="{{ collapseId }}"
class="tree-collapse collapse {{ containsActive ? 'show' : '' }}">
{% if n.children is not empty %}
{{ macros.tree(n.children, pluginName, relFile, editableExts, csrfToken) }}
{% endif %}
</div>
{% else %}
<a href="/admin/plugins-edit?plugin={{ pluginName|url_encode }}&file={{ n.path|url_encode }}"
class="tree-link {{ isActive ? 'is-active' : '' }}"
title="{{ n.path }}">
<span class="tree-chevron-spacer"></span>
<i class="bi {{ icon }}"></i>
<span class="text-truncate">{{ n.name }}</span>
{% if n.extension in editableExts %}
<span class="badge bg-secondary badge-ext">{{ n.extension|upper }}</span>
{% endif %}
</a>
<a href="/admin/plugins-file-move?plugin={{ pluginName|url_encode }}&file={{ n.path|url_encode }}"
class="tree-move-btn" title="{{ ta.move|default('Verplaatsen') }}" aria-label="{{ ta.move|default('Verplaatsen') }}">
<i class="bi bi-arrows-move"></i>
</a>
<form method="POST" action="/admin/plugins-file-delete" class="tree-delete-form" onsubmit="return confirm('{{ ta.confirm_delete_file|default('Weet je zeker dat je dit bestand wilt verwijderen?') }}')">
<input type="hidden" name="csrf_token" value="{{ csrfToken }}">
<input type="hidden" name="plugin" value="{{ pluginName }}">
<input type="hidden" name="file" value="{{ n.path }}">
<button type="submit" class="btn btn-link btn-sm text-danger p-0 ms-1 tree-delete-btn" title="{{ ta.delete|default('Verwijderen') }}" aria-label="{{ ta.delete|default('Verwijderen') }}">
<i class="bi bi-trash"></i>
</button>
</form>
{% endif %}
</li>
{% endfor %}
</ul>
{% endmacro %}
{% import _self as tree_macros %}
{% block extra_css %}
<link rel="stylesheet" href="/admin/assets/codemirror/codemirror.min.css">
<link rel="stylesheet" href="/admin/assets/css/editor.css">
<style>
.plugin-editor-layout { display: flex; gap: 1rem; align-items: stretch; }
.plugin-file-tree { width: 280px; flex: 0 0 280px; }
.plugin-editor-main { flex: 1 1 auto; min-width: 0; }
.plugin-tree { list-style: none; padding-left: 0; margin: 0; }
.plugin-tree ul { list-style: none; padding-left: 1.1rem; margin: 0; }
.plugin-tree li { padding: 0; position: relative; }
.plugin-tree li > .tree-link { display: flex; align-items: center; gap: .3rem; padding: .2rem .4rem; border-radius: .25rem; text-decoration: none; color: inherit; font-size: .9rem; line-height: 1.4; }
.plugin-tree li > .tree-link:hover { background-color: rgba(13,110,253,.08); }
.plugin-tree li > .tree-link.is-active { background-color: var(--bs-primary-bg-subtle, #cfe2ff); font-weight: 600; }
.plugin-tree .tree-toggle { cursor: pointer; user-select: none; width: 100%; text-align: left; background: transparent; border: 0; color: inherit; }
.plugin-tree .tree-chevron { transition: transform .15s ease; flex: 0 0 auto; }
.plugin-tree .tree-chevron-spacer { display: inline-block; width: .9rem; flex: 0 0 auto; }
.plugin-tree .btn-toggle.collapsed .tree-chevron { transform: rotate(-90deg); }
.plugin-tree .badge-ext { font-size: .6rem; margin-left: auto; }
.plugin-tree .text-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Move and delete buttons: always visible, right-aligned, normal icon size */
.plugin-tree .tree-delete-form { position: absolute; right: .25rem; top: 50%; transform: translateY(-50%); margin: 0; }
.plugin-tree .tree-delete-btn { font-size: .9rem; line-height: 1; padding: .15rem; color: #dc3545; background: transparent; border: 0; }
.plugin-tree .tree-delete-btn:hover { color: #b02a37; }
.plugin-tree .tree-move-btn { position: absolute; right: 1.75rem; top: 50%; transform: translateY(-50%); font-size: .9rem; line-height: 1; padding: .15rem; color: #6c757d; text-decoration: none; }
.plugin-tree .tree-move-btn:hover { color: #0d6efd; }
.plugin-tree li > .tree-link { padding-right: 3.5rem; }
.plugin-file-tree .card-body { max-height: 70vh; overflow-y: auto; }
@media (max-width: 768px) {
.plugin-editor-layout { flex-direction: column; }
.plugin-file-tree { width: 100%; flex-basis: auto; max-height: 320px; }
.plugin-file-tree .card-body { max-height: 260px; }
}
</style>
{% include 'pages/_editor-styles.twig' %}
{% endblock %}
{% block content %}
@@ -134,25 +45,29 @@
</div>
</div>
<div class="plugin-editor-layout">
{# File tree sidebar #}
<div class="plugin-file-tree">
<div class="card shadow-sm h-100">
<div class="card-header bg-white py-2 d-flex justify-content-between align-items-center">
<span class="small text-muted fw-semibold"><i class="bi bi-folder2-open"></i> {{ ta.plugin_files|default('Plugin bestanden') }}</span>
</div>
<div class="card-body p-2" id="pluginFileTree">
{% if files is empty %}
<div class="small text-muted p-2">{{ ta.plugin_no_files|default('Geen bestanden gevonden.') }}</div>
{% else %}
{{ tree_macros.tree(files, pluginName, relFile, editableExts, csrf_token) }}
{% endif %}
</div>
</div>
</div>
<div class="editor-layout">
{# File tree sidebar (shared partial) #}
{% include 'pages/_file-tree.twig' with {
'files': files,
'relFile': relFile,
'editableExts': editableExts,
'csrf_token': csrf_token,
'treeIdPrefix': 'plugin-tree',
'treeHeader': ta.plugin_files|default('Plugin bestanden'),
'treeEmptyText': ta.plugin_no_files|default('Geen bestanden gevonden.'),
'treeRouteBase': '/admin/plugins-edit',
'treeRouteParams': 'plugin=' ~ pluginName|url_encode ~ '&',
'treeDeleteRoute': '/admin/plugins-file-delete',
'treeDeleteName': 'plugin',
'treeDeleteValue': pluginName,
'treeMoveRoute': '/admin/plugins-file-move',
'treeMoveParams': 'plugin=' ~ pluginName|url_encode ~ '&',
'treeDirActions': false,
'treeHideActionsFor': [],
} %}
{# Editor main panel #}
<div class="plugin-editor-main">
<div class="editor-main">
{% if relFile %}
<nav aria-label="breadcrumb" class="mb-2">
<ol class="breadcrumb mb-0">
admin/theme/default/views/pages/theme-edit.twig
+22 -104
View File
@@ -2,98 +2,12 @@
{% block title %}{{ ta.theme_edit|default('Thema bewerken: ') }}{{ themeName }} - {{ ta.admin_title|default('CodePress Admin') }}{% endblock %}
{# Recursively render the theme file tree as a nested, collapsible list.
A folder is expanded by default when the currently selected file lives
somewhere inside it, so the user always sees where their file is. #}
{% macro tree(nodes, themeName, relFile, editableExts, csrfToken) %}
{% import _self as macros %}
<ul class="plugin-tree">
{% for n in nodes %}
{% set isActive = n.path == relFile %}
{% set containsActive = n.is_dir and relFile starts with (n.path ~ '/') %}
{% set icon = n.is_dir ? 'bi-folder-fill text-warning' : (n.extension == 'twig' ? 'bi-filetype-tfn text-info' : (n.extension == 'php' ? 'bi-file-code text-success' : (n.extension == 'json' ? 'bi-filetype-json text-secondary' : (n.extension == 'md' ? 'bi-file-text text-primary' : (n.extension in ['css','scss'] ? 'bi-filetype-css text-info' : (n.extension == 'js' ? 'bi-filetype-js text-warning' : (n.extension == 'html' ? 'bi-file-earmark text-info' : 'bi-file text-muted'))))))) %}
<li>
{% if n.is_dir %}
{% set collapseId = 'theme-tree-' ~ n.path|replace({'/':'-','.':'-'}) %}
<button type="button" class="tree-link tree-toggle btn-toggle {{ containsActive ? '' : 'collapsed' }}"
data-bs-toggle="collapse"
data-bs-target="#{{ collapseId }}"
aria-expanded="{{ containsActive ? 'true' : 'false' }}"
title="{{ n.path }}">
<i class="bi bi-chevron-down tree-chevron"></i>
<i class="bi {{ icon }}"></i>
<span class="text-truncate">{{ n.name }}</span>
</button>
<div id="{{ collapseId }}"
class="tree-collapse collapse {{ containsActive ? 'show' : '' }}">
{% if n.children is not empty %}
{{ macros.tree(n.children, themeName, relFile, editableExts, csrfToken) }}
{% endif %}
</div>
{% else %}
<a href="/admin/theme-edit?theme={{ themeName|url_encode }}&file={{ n.path|url_encode }}"
class="tree-link {{ isActive ? 'is-active' : '' }}"
title="{{ n.path }}">
<span class="tree-chevron-spacer"></span>
<i class="bi {{ icon }}"></i>
<span class="text-truncate">{{ n.name }}</span>
{% if n.extension in editableExts %}
<span class="badge bg-secondary badge-ext">{{ n.extension|upper }}</span>
{% endif %}
</a>
{% if n.path != 'theme.json' %}
<a href="/admin/theme-file-move?theme={{ themeName|url_encode }}&file={{ n.path|url_encode }}"
class="tree-move-btn" title="{{ ta.move|default('Verplaatsen') }}" aria-label="{{ ta.move|default('Verplaatsen') }}">
<i class="bi bi-arrows-move"></i>
</a>
<form method="POST" action="/admin/theme-file-delete" class="tree-delete-form" onsubmit="return confirm('{{ ta.confirm_delete_file|default('Weet je zeker dat je dit bestand wilt verwijderen?') }}')">
<input type="hidden" name="csrf_token" value="{{ csrfToken }}">
<input type="hidden" name="theme" value="{{ themeName }}">
<input type="hidden" name="file" value="{{ n.path }}">
<button type="submit" class="btn btn-link btn-sm text-danger p-0 ms-1 tree-delete-btn" title="{{ ta.delete|default('Verwijderen') }}" aria-label="{{ ta.delete|default('Verwijderen') }}">
<i class="bi bi-trash"></i>
</button>
</form>
{% endif %}
{% endif %}
</li>
{% endfor %}
</ul>
{% endmacro %}
{% import _self as tree_macros %}
{% 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>
.plugin-editor-layout { display: flex; gap: 1rem; align-items: stretch; }
.plugin-file-tree { width: 280px; flex: 0 0 280px; }
.plugin-editor-main { flex: 1 1 auto; min-width: 0; }
.plugin-tree { list-style: none; padding-left: 0; margin: 0; }
.plugin-tree ul { list-style: none; padding-left: 1.1rem; margin: 0; }
.plugin-tree li { padding: 0; position: relative; }
.plugin-tree li > .tree-link { display: flex; align-items: center; gap: .3rem; padding: .2rem .4rem; border-radius: .25rem; text-decoration: none; color: inherit; font-size: .9rem; line-height: 1.4; }
.plugin-tree li > .tree-link:hover { background-color: rgba(13,110,253,.08); }
.plugin-tree li > .tree-link.is-active { background-color: var(--bs-primary-bg-subtle, #cfe2ff); font-weight: 600; }
.plugin-tree .tree-toggle { cursor: pointer; user-select: none; width: 100%; text-align: left; background: transparent; border: 0; color: inherit; }
.plugin-tree .tree-chevron { transition: transform .15s ease; flex: 0 0 auto; }
.plugin-tree .tree-chevron-spacer { display: inline-block; width: .9rem; flex: 0 0 auto; }
.plugin-tree .btn-toggle.collapsed .tree-chevron { transform: rotate(-90deg); }
.plugin-tree .badge-ext { font-size: .6rem; margin-left: auto; }
.plugin-tree .text-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.plugin-tree .tree-delete-form { position: absolute; right: .25rem; top: 50%; transform: translateY(-50%); margin: 0; }
.plugin-tree .tree-delete-btn { font-size: .9rem; line-height: 1; padding: .15rem; color: #dc3545; background: transparent; border: 0; }
.plugin-tree .tree-delete-btn:hover { color: #b02a37; }
.plugin-tree .tree-move-btn { position: absolute; right: 1.75rem; top: 50%; transform: translateY(-50%); font-size: .9rem; line-height: 1; padding: .15rem; color: #6c757d; text-decoration: none; }
.plugin-tree .tree-move-btn:hover { color: #0d6efd; }
.plugin-tree li > .tree-link { padding-right: 3.5rem; }
.plugin-file-tree .card-body { max-height: 70vh; overflow-y: auto; }
.theme-scss-status { font-size: .75rem; }
@media (max-width: 768px) {
.plugin-editor-layout { flex-direction: column; }
.plugin-file-tree { width: 100%; flex-basis: auto; max-height: 320px; }
.plugin-file-tree .card-body { max-height: 260px; }
}
</style>
{% endblock %}
@@ -144,25 +58,29 @@
</div>
</div>
<div class="plugin-editor-layout">
{# File tree sidebar #}
<div class="plugin-file-tree">
<div class="card shadow-sm h-100">
<div class="card-header bg-white py-2 d-flex justify-content-between align-items-center">
<span class="small text-muted fw-semibold"><i class="bi bi-folder2-open"></i> {{ ta.theme_files|default('Thema bestanden') }}</span>
</div>
<div class="card-body p-2" id="pluginFileTree">
{% if files is empty %}
<div class="small text-muted p-2">{{ ta.theme_no_files|default('Geen bestanden gevonden.') }}</div>
{% else %}
{{ tree_macros.tree(files, themeName, relFile, editableExts, csrf_token) }}
{% endif %}
</div>
</div>
</div>
<div class="editor-layout">
{# File tree sidebar (shared partial) #}
{% include 'pages/_file-tree.twig' with {
'files': files,
'relFile': relFile,
'editableExts': editableExts,
'csrf_token': csrf_token,
'treeIdPrefix': 'theme-tree',
'treeHeader': ta.theme_files|default('Thema bestanden'),
'treeEmptyText': ta.theme_no_files|default('Geen bestanden gevonden.'),
'treeRouteBase': '/admin/theme-edit',
'treeRouteParams': 'theme=' ~ themeName|url_encode ~ '&',
'treeDeleteRoute': '/admin/theme-file-delete',
'treeDeleteName': 'theme',
'treeDeleteValue': themeName,
'treeMoveRoute': '/admin/theme-file-move',
'treeMoveParams': 'theme=' ~ themeName|url_encode ~ '&',
'treeDirActions': false,
'treeHideActionsFor': ['theme.json'],
} %}
{# Editor main panel #}
<div class="plugin-editor-main">
<div class="editor-main">
{% if relFile %}
<nav aria-label="breadcrumb" class="mb-2">
<ol class="breadcrumb mb-0">