+
@@ -407,5 +410,32 @@ document.getElementById('cbExportPng')?.addEventListener('click', async function
alert('Could not export PNG.');
}
});
+
+(function () {
+ const btn = document.getElementById('cbPreviewFsBtn');
+ const icon = document.getElementById('cbPreviewFsIcon');
+ const card = document.querySelector('.cb-cb-preview-card');
+ if (!btn || !icon || !card) return;
+
+ const sync = () => {
+ const open = card.classList.contains('cb-cb-preview-fullscreen');
+ icon.textContent = open ? 'close_fullscreen' : 'open_in_full';
+ btn.title = open ? 'Exit fullscreen' : 'Fullscreen preview';
+ btn.setAttribute('aria-label', btn.title);
+ document.body.classList.toggle('cb-cb-preview-fs-open', open);
+ };
+
+ btn.addEventListener('click', () => {
+ card.classList.toggle('cb-cb-preview-fullscreen');
+ sync();
+ });
+
+ document.addEventListener('keydown', (ev) => {
+ if (ev.key === 'Escape' && card.classList.contains('cb-cb-preview-fullscreen')) {
+ card.classList.remove('cb-cb-preview-fullscreen');
+ sync();
+ }
+ });
+})();
endSection() ?>
diff --git a/app/Views/dashboard/_view_scripts.php b/app/Views/dashboard/_view_scripts.php
index d30310e..08bd231 100644
--- a/app/Views/dashboard/_view_scripts.php
+++ b/app/Views/dashboard/_view_scripts.php
@@ -521,11 +521,14 @@
w.widget_type === 'image' ? 'Image' :
w.widget_type === 'filter_date' ? 'Date filter' : 'Filter'
);
- const editLink = (!READ_ONLY && w.widget_type === 'chart' && w.chart_id && boot.urls && boot.urls.chartEdit)
+ const chartEditLink = (!READ_ONLY && w.widget_type === 'chart' && w.chart_id && boot.urls && boot.urls.chartEdit)
? ('
edit')
: '';
+ const textEditBtn = (!READ_ONLY && w.widget_type === 'text' && boot.urls && boot.urls.updateWidget)
+ ? ('
')
+ : '';
const rm = READ_ONLY ? '' : ('
');
- const actions = editLink + rm;
+ const actions = chartEditLink + textEditBtn + rm;
if (w.widget_type === 'chart') {
const exportPng = '
';
@@ -535,7 +538,7 @@
const exportExcel = canExcel
? '
table_view'
: '';
- const chartActions = exportPng + exportPdf + exportExcel + actions;
+ const chartActions = exportPng + exportPdf + exportExcel + chartEditLink + rm;
const vars = await loadVariableDefs(w.saved_query_id);
let varsHtml = '';
if (vars.length) {
@@ -581,10 +584,13 @@
}
if (w.widget_type === 'text') {
+ const overlayHtml = (!READ_ONLY)
+ ? ('
' + actions + '
')
+ : '';
mount.innerHTML =
- '
';
+ '
';
renderMarkdown(document.getElementById('cb-md-' + w.id), w.content || '');
return;
}
@@ -671,11 +677,163 @@
});
}
+ function getRootGridStackItems() {
+ if (grid && typeof grid.getGridItems === 'function') return grid.getGridItems();
+ const root = document.getElementById('cbGridStack');
+ if (!root) return [];
+ return Array.from(root.children).filter((el) => el.classList && el.classList.contains('grid-stack-item'));
+ }
+
+ function gridNum(v, fallback) {
+ const n = Number(v);
+ return Number.isFinite(n) ? n : fallback;
+ }
+
+ /**
+ * Re-apply server grid_* using grid.load() so layout is applied atomically (avoids per-item
+ * update collisions). Always set sizeToContent:false so GridStack does not resize rows from
+ * DOM content (this was moving/growing text widgets ~300ms after load via resizeToContentCheck).
+ */
+ function applyLayoutFromBoot(force) {
+ if (READ_ONLY || !grid || !boot.widgets || !boot.widgets.length) return;
+ if (!force && layoutDirty) return;
+ if (typeof grid._cbSetLayoutSync === 'function') grid._cbSetLayoutSync(true);
+ const prevAnim = grid.opts && grid.opts.animate;
+ try {
+ if (grid.opts) grid.opts.animate = false;
+ const items = boot.widgets.map((w) => {
+ const x = gridNum(w.grid_x, 0);
+ const y = gridNum(w.grid_y, 0);
+ const gw = gridNum(w.grid_w, 4);
+ const gh = gridNum(w.grid_h, 3);
+ return {
+ id: String(w.id),
+ x: Math.max(0, Math.min(11, x)),
+ y: Math.max(0, y),
+ w: Math.max(1, Math.min(12, gw)),
+ h: Math.max(1, Math.min(24, gh)),
+ sizeToContent: false,
+ };
+ });
+ /* false = do not remove DOM nodes missing from the list; only move/resize existing */
+ grid.load(items, false);
+ grid.getGridItems().forEach((el) => {
+ grid.update(el, { sizeToContent: false });
+ });
+ } finally {
+ if (grid.opts && prevAnim !== undefined) grid.opts.animate = prevAnim;
+ requestAnimationFrame(() => {
+ requestAnimationFrame(() => {
+ if (typeof grid._cbSetLayoutSync === 'function') grid._cbSetLayoutSync(false);
+ });
+ });
+ }
+ }
+
+ function readLayoutFromElement(el) {
+ const id = parseInt(String(el.getAttribute('gs-id') || ''), 10);
+ if (!Number.isFinite(id) || id <= 0) return null;
+
+ // Prefer DOM attrs first: GridStack keeps these as the canonical serialized
+ // values for save/load, and they are updated after drag/resize settles.
+ const hasX = el.hasAttribute('gs-x');
+ const hasY = el.hasAttribute('gs-y');
+ const hasW = el.hasAttribute('gs-w');
+ const hasH = el.hasAttribute('gs-h');
+ if (hasX || hasY || hasW || hasH) {
+ const x = gridNum(el.getAttribute('gs-x'), 0);
+ const y = gridNum(el.getAttribute('gs-y'), 0);
+ const w = gridNum(el.getAttribute('gs-w'), 1);
+ const h = gridNum(el.getAttribute('gs-h'), 1);
+ return {
+ id,
+ x: Math.max(0, Math.min(11, x)),
+ y: Math.max(0, y),
+ w: Math.max(1, Math.min(12, w)),
+ h: Math.max(1, Math.min(24, h)),
+ };
+ }
+
+ // Fallback for edge cases where attrs are not yet present.
+ const gn = el.gridstackNode;
+ if (gn && Number.isFinite(gn.x) && Number.isFinite(gn.y) && Number.isFinite(gn.w) && Number.isFinite(gn.h)) {
+ return { id, x: gn.x, y: gn.y, w: gn.w, h: gn.h };
+ }
+ return { id, x: 0, y: 0, w: 1, h: 1 };
+ }
+
+ function collectLayoutItemsForSave() {
+ if (!grid) return [];
+ const byId = new Map();
+ // Prefer live DOM nodes so every gs-id tile is saved (some engines omit nodes from save()).
+ getRootGridStackItems().forEach((el) => {
+ const row = readLayoutFromElement(el);
+ if (row) byId.set(row.id, row);
+ });
+ grid.save(false).forEach((n) => {
+ const id = parseInt(String(n.id == null ? '' : n.id), 10);
+ if (Number.isFinite(id) && id > 0) {
+ const prev = byId.get(id) || { id, x: 0, y: 0, w: 1, h: 1 };
+ const nx = Number.isFinite(n.x) ? n.x : prev.x;
+ const ny = Number.isFinite(n.y) ? n.y : prev.y;
+ const nw = Number.isFinite(n.w) ? n.w : prev.w;
+ const nh = Number.isFinite(n.h) ? n.h : prev.h;
+ byId.set(id, {
+ id,
+ x: Math.max(0, Math.min(11, nx)),
+ y: Math.max(0, ny),
+ w: Math.max(1, Math.min(12, nw)),
+ h: Math.max(1, Math.min(24, nh)),
+ });
+ }
+ });
+ return Array.from(byId.values());
+ }
+
+ /**
+ * Text widgets are the only tiles without a header block and can appear to "drift"
+ * after async chart/layout paint settles. Re-apply their persisted grid box when
+ * dashboard is not being edited so reload state stays identical to saved state.
+ */
+ function enforceTextWidgetLayoutFromBoot(force) {
+ if (READ_ONLY || !grid || !boot.widgets || !boot.widgets.length) return;
+ if (!force && (editing || layoutDirty)) return;
+ if (typeof grid._cbSetLayoutSync === 'function') grid._cbSetLayoutSync(true);
+ try {
+ const textWidgets = boot.widgets.filter((w) => w.widget_type === 'text');
+ if (!textWidgets.length) return;
+ grid.batchUpdate(true);
+ textWidgets.forEach((w) => {
+ const el = getRootGridStackItems().find((node) => parseInt(node.getAttribute('gs-id') || '0', 10) === w.id);
+ if (!el) return;
+ const x = gridNum(w.grid_x, 0);
+ const y = gridNum(w.grid_y, 0);
+ const gw = gridNum(w.grid_w, 4);
+ const gh = gridNum(w.grid_h, 3);
+ grid.update(el, {
+ x: Math.max(0, Math.min(11, x)),
+ y: Math.max(0, y),
+ w: Math.max(1, Math.min(12, gw)),
+ h: Math.max(1, Math.min(24, gh)),
+ sizeToContent: false,
+ });
+ });
+ } finally {
+ grid.batchUpdate(false);
+ requestAnimationFrame(() => {
+ requestAnimationFrame(() => {
+ if (typeof grid._cbSetLayoutSync === 'function') grid._cbSetLayoutSync(false);
+ });
+ });
+ }
+ }
+
async function initMounts() {
for (const w of boot.widgets) {
await mountWidget(w);
}
bindRemoveDelegation();
+ layoutDirty = false;
setEditUi();
}
@@ -685,12 +843,26 @@
document.getElementById('cbBtnDiscard')?.classList.toggle('d-none', !editing || !layoutDirty);
const addW = document.getElementById('cbBtnAddWidget');
if (addW) addW.hidden = !editing;
- const tl = document.getElementById('cbBtnToggleEditLabel');
- if (tl) tl.textContent = editing ? 'Done editing' : 'Edit layout';
+ const iconEdit = document.querySelector('.cb-dash-toggle-icon--edit');
+ const iconClose = document.querySelector('.cb-dash-toggle-icon--close');
+ const btnToggle = document.getElementById('cbBtnToggleEdit');
+ if (iconEdit && iconClose) {
+ iconEdit.classList.toggle('d-none', editing);
+ iconClose.classList.toggle('d-none', !editing);
+ }
+ if (btnToggle) {
+ const done = editing ? 'Done editing' : 'Edit layout';
+ btnToggle.setAttribute('aria-label', done);
+ btnToggle.title = done;
+ }
const gs = document.getElementById('cbGridStack');
if (gs) gs.classList.toggle('cb-dash-editing', editing);
document.querySelectorAll('.cb-dash-widget-remove').forEach((b) => b.classList.toggle('d-none', !editing));
document.querySelectorAll('.cb-dash-widget-edit').forEach((b) => b.classList.toggle('d-none', !editing));
+ document.querySelectorAll('.cb-dash-widget-text-actions--overlay').forEach((box) => {
+ const any = box.querySelector('.cb-dash-widget-edit:not(.d-none), .cb-dash-widget-remove:not(.d-none)');
+ box.classList.toggle('d-none', !any);
+ });
}
function initGrid() {
@@ -706,11 +878,20 @@
marginLeft: 8,
marginRight: 8,
animate: true,
+ /* false = keep saved x/y; true would vertically "float" items and can reorder after load */
float: false,
staticGrid: true,
+ disableOneColumnMode: true,
+ sizeToContent: false,
}, el);
- grid.on('change', () => { layoutDirty = true; setEditUi(); });
+ let _cbLayoutSync = false;
+ grid.on('change', () => {
+ if (_cbLayoutSync) return;
+ layoutDirty = true;
+ setEditUi();
+ });
+ grid._cbSetLayoutSync = (v) => { _cbLayoutSync = !!v; };
const setDraggingState = (on) => el.classList.toggle('cb-dash-dragging', !!on);
grid.on('dragstart', () => setDraggingState(true));
grid.on('dragstop', () => setDraggingState(false));
@@ -726,19 +907,67 @@
document.getElementById('cbBtnToggleEdit')?.addEventListener('click', () => { if (!READ_ONLY) toggleEdit(); });
- document.getElementById('cbBtnExportDashPdf')?.addEventListener('click', () => { exportDashboardPdf(); });
+ document.getElementById('cbGridStack')?.addEventListener('click', (ev) => {
+ const btn = ev.target.closest('[data-edit-text]');
+ if (!btn || READ_ONLY) return;
+ const wid = parseInt(btn.getAttribute('data-edit-text'), 10);
+ if (!wid) return;
+ const w = boot.widgets.find((x) => x.id === wid);
+ if (!w || w.widget_type !== 'text') return;
+ const hid = document.getElementById('cbEditTextWidgetId');
+ const ta = document.getElementById('cbEditTextMarkdown');
+ if (hid) hid.value = String(wid);
+ if (ta) ta.value = w.content || '';
+ if (window.bootstrap && document.getElementById('modalEditTextWidget')) {
+ bootstrap.Modal.getOrCreateInstance(document.getElementById('modalEditTextWidget')).show();
+ }
+ });
+
+ document.getElementById('cbBtnSaveTextWidget')?.addEventListener('click', async () => {
+ if (READ_ONLY || !boot.urls || !boot.urls.updateWidget) return;
+ const hid = document.getElementById('cbEditTextWidgetId');
+ const ta = document.getElementById('cbEditTextMarkdown');
+ const wid = parseInt(hid?.value || '0', 10);
+ if (!wid) return;
+ const content = (ta?.value || '').trim();
+ if (!content) { alert('Content is required.'); return; }
+ const body = new URLSearchParams();
+ if (CB_CSRF && CB_CSRF.name) body.append(CB_CSRF.name, CB_CSRF.hash);
+ body.append('content', ta.value);
+ const r = await fetch(boot.urls.updateWidget + wid + '/update', {
+ method: 'POST',
+ credentials: 'same-origin',
+ headers: { 'X-Requested-With': 'XMLHttpRequest', 'Content-Type': 'application/x-www-form-urlencoded' },
+ body,
+ });
+ const j = await r.json();
+ patchCsrf(j);
+ if (!j.success) { alert(j.message || 'Could not save'); return; }
+ const upd = j.widget;
+ if (upd && upd.id) {
+ const ix = boot.widgets.findIndex((x) => x.id === upd.id);
+ if (ix >= 0) boot.widgets[ix].content = upd.content;
+ }
+ const mdEl = document.getElementById('cb-md-' + wid);
+ renderMarkdown(mdEl, upd && upd.content !== undefined ? upd.content : '');
+ if (window.bootstrap && document.getElementById('modalEditTextWidget')) {
+ bootstrap.Modal.getInstance(document.getElementById('modalEditTextWidget'))?.hide();
+ }
+ });
+
+ document.getElementById('cbBtnExportDashPdf')?.addEventListener('click', () => {
+ const pdfMenuToggle = document.getElementById('cbDashPdfMenuBtn');
+ if (pdfMenuToggle && typeof bootstrap !== 'undefined') {
+ const inst = bootstrap.Dropdown.getInstance(pdfMenuToggle);
+ if (inst) inst.hide();
+ }
+ exportDashboardPdf();
+ });
document.getElementById('cbBtnSaveLayout')?.addEventListener('click', async () => {
if (READ_ONLY || !boot.urls || !boot.urls.saveLayout) return;
if (!grid) return;
- const nodes = grid.save(false);
- const items = nodes.map((n) => ({
- id: parseInt(n.id, 10),
- x: n.x,
- y: n.y,
- w: n.w,
- h: n.h,
- })).filter((x) => x.id > 0);
+ const items = collectLayoutItemsForSave();
const body = new URLSearchParams();
if (CB_CSRF && CB_CSRF.name) body.append(CB_CSRF.name, CB_CSRF.hash);
@@ -857,6 +1086,7 @@
const content = '
';
grid.addWidget({ id: String(nw.id), x: nw.grid_x, y: nw.grid_y, w: nw.grid_w, h: nw.grid_h, content });
await mountWidget(nw);
+ applyLayoutFromBoot(true);
}
layoutDirty = true;
setEditUi();
@@ -866,8 +1096,27 @@
}
});
+ /**
+ * Apply DB grid_* after widgets are mounted. Running this before mount meant empty chart
+ * shells and float reflow could move text widgets (especially) to the wrong row/size after load.
+ */
+ function finalizeLayoutFromServer() {
+ layoutDirty = false;
+ applyLayoutFromBoot(true);
+ enforceTextWidgetLayoutFromBoot(true);
+ layoutDirty = false;
+ setEditUi();
+ }
+
initGrid();
+ layoutDirty = false;
initMounts().then(() => {
+ finalizeLayoutFromServer();
+ /* GridStack may run resizeToContentCheck on a ~300ms timer after first layout; re-lock layout once after that. */
+ setTimeout(() => finalizeLayoutFromServer(), 360);
+ /* Extra stabilization after async chart mounts/paint for text widgets only. */
+ setTimeout(() => enforceTextWidgetLayoutFromBoot(false), 900);
+ setTimeout(() => enforceTextWidgetLayoutFromBoot(false), 1800);
const sec = Number(boot.refreshSec || 0);
if (sec > 0) {
refreshTimer = setInterval(() => refreshAllCharts(), sec * 1000);
diff --git a/app/Views/dashboard/view.php b/app/Views/dashboard/view.php
index fd30817..fa4c31e 100644
--- a/app/Views/dashboard/view.php
+++ b/app/Views/dashboard/view.php
@@ -22,33 +22,54 @@ $themeClass = match ($theme) {