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

Plugin system: content vs system types, sidebar-aware UI, arrow visibility

Browse Source 
- 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
This commit is contained in:
E.Noorlander
2026-08-11 17:22:41 +02:00
parent 8ebfcb6061
commit 73450a17c1
7 changed files with 80 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files
admin/theme/default/views/pages/content-edit.twig
+38 -17
View File
@@ -28,16 +28,16 @@
</select>
</div>
{% if availablePlugins is not empty %}
<div class="col-md-4">
<label class="form-label d-block">Zichtbare plugins (volgorde = sidebar volgorde)</label>
<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" id="plugin-{{ plugin }}" name="plugins[]" value="{{ plugin }}" autocomplete="off" checked>
<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">
<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>
@@ -47,10 +47,10 @@
{% 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" id="plugin-{{ plugin }}" name="plugins[]" value="{{ plugin }}" autocomplete="off">
<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">
<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>
@@ -88,8 +88,10 @@ 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() {
@@ -104,11 +106,36 @@ document.addEventListener('DOMContentLoaded', function () {
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;
@@ -117,7 +144,6 @@ document.addEventListener('DOMContentLoaded', function () {
// 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);
@@ -126,7 +152,6 @@ document.addEventListener('DOMContentLoaded', function () {
}
content = content.replace(/^---\n([\s\S]*?)\n---/, '---\n' + frontmatter + '\n---');
} else {
// No frontmatter yet — add one
content = '---\nlayout: ' + newLayout + '\n---\n\n' + content;
}
@@ -160,17 +185,13 @@ document.addEventListener('DOMContentLoaded', function () {
pluginList.insertBefore(item, item.nextElementSibling.nextElementSibling);
markChanged();
}
updateArrows();
});
// On form submit, reorder the checkboxes to match the visual order
var form = document.getElementById('editor-form');
if (form) {
form.addEventListener('submit', function () {
// The DOM order of the <li> elements already determines the form submission order
// because the checkboxes are inside the <li> elements
});
}
}
// Initialize
updatePluginVisibility();
updateArrows();
});
</script>
{% endblock %}
admin/theme/default/views/pages/plugins.twig
+6 -3
View File
@@ -16,13 +16,16 @@
<div class="card shadow-sm h-100">
<div class="card-header d-flex justify-content-between align-items-center">
<span class="fw-bold">{{ plugin.name|default(plugin.name) }}</span>
<span class="badge bg-{{ plugin.enabled ? 'success' : 'secondary' }}">{{ plugin.enabled ? 'Actief' : 'Inactief' }}</span>
<span>
{% if plugin.type == 'system' %}<span class="badge bg-info">Systeem</span>{% else %}<span class="badge bg-primary">Content</span>{% endif %}
<span class="badge bg-{{ plugin.enabled ? 'success' : 'secondary' }}">{{ plugin.enabled ? 'Actief' : 'Inactief' }}</span>
</span>
</div>
<div class="card-body">
<p class="card-text text-muted mb-2">{{ plugin.description|default('Geen beschrijving') }}</p>
<p class="small text-muted mb-3">
{% if plugin.version %}<span class="badge bg-info">v{{ plugin.version }}</span>{% endif %}
{% if plugin.author %}<span class="badge bg-secondary">{{ plugin.author }}</span>{% endif %}
{% if plugin.version %}<span class="badge bg-secondary">v{{ plugin.version }}</span>{% endif %}
{% if plugin.author %}<span class="badge bg-light text-dark">{{ plugin.author }}</span>{% endif %}
</p>
</div>
<div class="card-footer bg-white">
cms/core/plugin/PluginManager.php
+7 -1
View File
@@ -132,7 +132,13 @@ class PluginManager
{
if (method_exists($plugin, 'getConfig')) {
$config = $plugin->getConfig();
return !isset($config['viewable']) || $config['viewable'] !== false;
if (isset($config['viewable']) && $config['viewable'] === false) {
return false;
}
// System plugins don't show in sidebar
if (isset($config['type']) && $config['type'] === 'system') {
return false;
}
}
return true;
}
plugins/HTMLBlock/plugin.json
+7
View File
@@ -0,0 +1,7 @@
{
"name": "HTMLBlock",
"version": "1.0.0",
"author": "CodePress",
"description": "Voorbeeld sidebar plugin met pagina info en quick navigation",
"type": "content"
}
plugins/Navigation/Navigation.php
+1
View File
@@ -10,6 +10,7 @@ class Navigation
$this->config = [
'title' => 'Navigatie',
'viewable' => true,
'type' => 'content',
];
}
plugins/Navigation/plugin.json
+2 -1
View File
@@ -2,5 +2,6 @@
"name": "Navigation",
"version": "1.0.0",
"author": "CodePress",
"description": "Essentiële navigatie plugin voor handleidingen en content"
"description": "Essentiële navigatie plugin voor handleidingen en content",
"type": "content"
}
public/admin.php
+19 -2
View File
@@ -508,9 +508,10 @@ function handleContentEdit($auth, $config, $twig, $user, $csrf, $siteConfig): vo
}
}
// Get available plugins (must have plugin.json or <PluginName>.php)
// Get available content plugins (type=content in plugin.json, or no type = content)
$pluginsDir = $config['plugins_dir'];
$availablePlugins = [];
$sidebarLayouts = [];
if (is_dir($pluginsDir)) {
foreach (glob($pluginsDir . '*', GLOB_ONLYDIR) as $pluginDir) {
$pluginName = basename($pluginDir);
@@ -518,12 +519,27 @@ function handleContentEdit($auth, $config, $twig, $user, $csrf, $siteConfig): vo
$hasJson = file_exists($pluginDir . '/plugin.json');
$hasPhp = file_exists($pluginDir . '/' . $pluginName . '.php');
if ($hasJson || $hasPhp) {
$availablePlugins[] = $pluginName;
// Check plugin type — only content plugins show in sidebar
$pluginType = 'content';
if ($hasJson) {
$pj = json_decode(file_get_contents($pluginDir . '/plugin.json'), true);
$pluginType = $pj['type'] ?? 'content';
}
if ($pluginType === 'content') {
$availablePlugins[] = $pluginName;
}
}
}
}
}
// Determine which layouts have a sidebar (based on theme twig files)
foreach ($themeLayouts as $key => $twigFile) {
if (strpos($key, 'sidebar') !== false) {
$sidebarLayouts[] = $key;
}
}
$currentLang = extractLanguagePrefix($file);
$route = 'content-edit';
$fileDir = trim(dirname($file), '.\\/');
@@ -541,6 +557,7 @@ function handleContentEdit($auth, $config, $twig, $user, $csrf, $siteConfig): vo
'currentLayout' => $currentLayout ?: $themeDefaultLayout,
'themeLayouts' => $themeLayouts,
'themeDefaultLayout' => $themeDefaultLayout,
'sidebarLayouts' => $sidebarLayouts,
'activeThemeName' => $activeThemeName,
'availablePlugins' => $availablePlugins,
'selectedPlugins' => $selectedPlugins,