115 lines
6.3 KiB
PHP
115 lines
6.3 KiB
PHP
<?php
|
|
$pageTitle = 'Shortcodes';
|
|
$codes = is_array($codes ?? null) ? $codes : [];
|
|
$enabledCodes = array_values(array_filter($codes, static fn(array $c): bool => !empty($c['enabled'])));
|
|
$disabledCodes = array_values(array_filter($codes, static fn(array $c): bool => empty($c['enabled'])));
|
|
ob_start();
|
|
?>
|
|
<section class="admin-card">
|
|
<div class="badge">Content</div>
|
|
<div style="display:flex; align-items:flex-end; justify-content:space-between; gap:14px; margin-top:14px;">
|
|
<div>
|
|
<h1 style="margin:0; font-size:30px;">Shortcodes</h1>
|
|
<p style="margin:8px 0 0; color:var(--muted);">Use these in page HTML to render dynamic blocks from modules/plugins.</p>
|
|
</div>
|
|
<a href="/admin/pages" class="btn outline">Back to pages</a>
|
|
</div>
|
|
|
|
<div style="display:grid; gap:16px; margin-top:18px;">
|
|
<article class="admin-card" style="padding:14px; border-radius:14px;">
|
|
<div class="label" style="font-size:11px;">Active Shortcodes</div>
|
|
<?php if (!$enabledCodes): ?>
|
|
<div style="margin-top:10px; color:var(--muted); font-size:13px;">No active shortcodes found.</div>
|
|
<?php else: ?>
|
|
<div style="display:grid; gap:12px; margin-top:10px;">
|
|
<?php foreach ($enabledCodes as $code): ?>
|
|
<article class="admin-card" style="padding:14px; border-radius:12px; box-shadow:none;">
|
|
<div style="display:flex; flex-wrap:wrap; gap:8px; align-items:center; justify-content:space-between;">
|
|
<div style="font-family:'IBM Plex Mono', monospace; font-size:13px; letter-spacing:0.08em;">
|
|
<?= htmlspecialchars((string)($code['tag'] ?? ''), ENT_QUOTES, 'UTF-8') ?>
|
|
</div>
|
|
<span class="pill" style="padding:5px 10px; font-size:10px; letter-spacing:0.14em; border-color:rgba(115,255,198,0.4); color:#9ff8d8;">Enabled</span>
|
|
</div>
|
|
<div style="margin-top:8px; color:var(--muted); font-size:13px;">
|
|
<?= htmlspecialchars((string)($code['description'] ?? ''), ENT_QUOTES, 'UTF-8') ?>
|
|
</div>
|
|
<div style="margin-top:10px; display:grid; grid-template-columns:1fr auto; gap:10px; align-items:center;">
|
|
<code style="padding:9px 11px; border-radius:10px; border:1px solid rgba(255,255,255,0.12); background:rgba(255,255,255,0.03); font-family:'IBM Plex Mono', monospace; font-size:12px; overflow:auto; white-space:nowrap;">
|
|
<?= htmlspecialchars((string)($code['example'] ?? ''), ENT_QUOTES, 'UTF-8') ?>
|
|
</code>
|
|
<div style="display:flex; gap:8px; align-items:center;">
|
|
<button class="btn outline previewShortcodeBtn" type="button" data-code="<?= htmlspecialchars((string)($code['example'] ?? ''), ENT_QUOTES, 'UTF-8') ?>">Preview</button>
|
|
<button class="btn outline" type="button" onclick="navigator.clipboard.writeText('<?= htmlspecialchars((string)($code['example'] ?? ''), ENT_QUOTES, 'UTF-8') ?>')">Copy</button>
|
|
</div>
|
|
</div>
|
|
<div style="margin-top:8px; font-size:12px; color:var(--muted);">Source: <?= htmlspecialchars((string)($code['source'] ?? ''), ENT_QUOTES, 'UTF-8') ?></div>
|
|
</article>
|
|
<?php endforeach; ?>
|
|
</div>
|
|
<?php endif; ?>
|
|
</article>
|
|
|
|
<?php if ($disabledCodes): ?>
|
|
<article class="admin-card" style="padding:14px; border-radius:14px;">
|
|
<div class="label" style="font-size:11px;">Disabled (plugin/module unavailable)</div>
|
|
<div style="display:grid; gap:10px; margin-top:10px;">
|
|
<?php foreach ($disabledCodes as $code): ?>
|
|
<div style="padding:10px 12px; border:1px dashed rgba(255,255,255,0.16); border-radius:10px; color:var(--muted); font-size:13px; display:flex; align-items:center; justify-content:space-between; gap:10px;">
|
|
<span style="font-family:'IBM Plex Mono', monospace; font-size:12px; color:#b7bcc8;"><?= htmlspecialchars((string)($code['tag'] ?? ''), ENT_QUOTES, 'UTF-8') ?></span>
|
|
<span style="font-size:12px; color:#ffbecc;"><?= htmlspecialchars((string)($code['source'] ?? ''), ENT_QUOTES, 'UTF-8') ?></span>
|
|
</div>
|
|
<?php endforeach; ?>
|
|
</div>
|
|
</article>
|
|
<?php endif; ?>
|
|
</div>
|
|
</section>
|
|
|
|
<div id="shortcodePreviewModal" style="position:fixed;inset:0;background:rgba(2,3,8,0.72);display:none;align-items:center;justify-content:center;z-index:4000;padding:18px;">
|
|
<div style="width:min(1100px,100%);height:min(760px,85vh);border-radius:16px;border:1px solid rgba(255,255,255,0.14);background:#11141c;display:grid;grid-template-rows:auto 1fr;overflow:hidden;">
|
|
<div style="display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 12px;border-bottom:1px solid rgba(255,255,255,0.12);">
|
|
<div class="badge">Shortcode Preview</div>
|
|
<div style="display:flex;gap:8px;align-items:center;">
|
|
<a href="#" id="shortcodePreviewPopout" target="_blank" class="btn outline">Popout</a>
|
|
<button type="button" id="shortcodePreviewClose" class="btn outline">Close</button>
|
|
</div>
|
|
</div>
|
|
<iframe id="shortcodePreviewFrame" src="about:blank" style="width:100%;height:100%;border:0;background:#0d1016;"></iframe>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
(function () {
|
|
const modal = document.getElementById('shortcodePreviewModal');
|
|
const frame = document.getElementById('shortcodePreviewFrame');
|
|
const popout = document.getElementById('shortcodePreviewPopout');
|
|
const closeBtn = document.getElementById('shortcodePreviewClose');
|
|
const buttons = Array.from(document.querySelectorAll('.previewShortcodeBtn'));
|
|
if (!modal || !frame || !popout || !closeBtn || !buttons.length) return;
|
|
|
|
function closeModal() {
|
|
modal.style.display = 'none';
|
|
frame.src = 'about:blank';
|
|
popout.href = '#';
|
|
}
|
|
|
|
closeBtn.addEventListener('click', closeModal);
|
|
modal.addEventListener('click', function (e) {
|
|
if (e.target === modal) closeModal();
|
|
});
|
|
|
|
buttons.forEach((btn) => {
|
|
btn.addEventListener('click', function () {
|
|
const code = btn.getAttribute('data-code') || '';
|
|
const url = '/admin/shortcodes/preview?code=' + encodeURIComponent(code);
|
|
frame.src = url;
|
|
popout.href = url;
|
|
modal.style.display = 'flex';
|
|
});
|
|
});
|
|
})();
|
|
</script>
|
|
<?php
|
|
$content = ob_get_clean();
|
|
require __DIR__ . '/layout.php';
|