Plugin system: content vs system types, sidebar-aware UI, arrow visibility
- 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:
@@ -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 %}
|
||||
|
||||
@@ -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">
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
@@ -0,0 +1,7 @@
|
||||
{
|
||||
"name": "HTMLBlock",
|
||||
"version": "1.0.0",
|
||||
"author": "CodePress",
|
||||
"description": "Voorbeeld sidebar plugin met pagina info en quick navigation",
|
||||
"type": "content"
|
||||
}
|
||||
@@ -10,6 +10,7 @@ class Navigation
|
||||
$this->config = [
|
||||
'title' => 'Navigatie',
|
||||
'viewable' => true,
|
||||
'type' => 'content',
|
||||
];
|
||||
}
|
||||
|
||||
|
||||
@@ -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"
|
||||
}
|
||||
+19
-2
@@ -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,
|
||||
|
||||
Reference in New Issue
Block a user