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 %}
|
||||
|
||||
Reference in New Issue
Block a user