1325 lines
54 KiB
Twig
1325 lines
54 KiB
Twig
{#
|
|
/**
|
|
* OTS Signs — Layout Designer Page
|
|
*
|
|
* Overrides the Xibo core layout-designer-page.twig to add two tailored
|
|
* editor experiences alongside the standard full-page mode.
|
|
*
|
|
* Usage:
|
|
* Normal: /layout/designer/{layoutId}
|
|
* Deep-link: /layout/designer/{layoutId}?deeplink=1[&returnUrl=/app/layouts/123]
|
|
* Embed: /layout/designer/{layoutId}?embed=1
|
|
*
|
|
* Deep-link mode (?deeplink=1):
|
|
* - Designed for direct navigation from an external React app.
|
|
* - All Xibo chrome is stripped (sidebar, topbar, help pane, back buttons).
|
|
* - A minimal OTS branded back bar is rendered at the top of the viewport.
|
|
* - Clicking "Back" navigates to ?returnUrl= (relative paths only) or
|
|
* falls back to window.history.back() if the param is absent/invalid.
|
|
* - The editor options dropdown (Publish, Checkout, Discard…) stays visible.
|
|
*
|
|
* Embed mode (?embed=1):
|
|
* - All CMS navigation is hidden (sidebar, topbar, help pane).
|
|
* - Back/Exit buttons in the editor toolbar are hidden.
|
|
* - postMessage events are sent to the parent window:
|
|
* xibo:editor:ready, xibo:editor:save, xibo:editor:publish, xibo:editor:exit
|
|
* - Parent can send: xibo:editor:requestSave
|
|
*
|
|
* Copyright (C) 2020-2026 Xibo Signage Ltd
|
|
* Copyright (C) 2026 Oribi Technology Services
|
|
*
|
|
* Licensed under the GNU Affero General Public License v3.0
|
|
*/
|
|
#}
|
|
{% extends "authed.twig" %}
|
|
{% import "inline.twig" as inline %}
|
|
|
|
{% block title %}{{ layout.layout }} | {{ "Layout Designer"|trans }} | {% endblock %}
|
|
|
|
{% set hideNavigation = "1" %}
|
|
{% set forceHide = true %}
|
|
|
|
{% block headContent %}
|
|
{{ parent() }}
|
|
|
|
{# Early mode detection — prevents FOUC for both embed and deep-link modes #}
|
|
<script nonce="{{ cspNonce }}">
|
|
(function(){
|
|
try {
|
|
var params = new URLSearchParams(window.location.search);
|
|
var isEmbed = params.get('embed') === '1' || window !== window.parent;
|
|
if (isEmbed) {
|
|
document.documentElement.classList.add('ots-embed-mode');
|
|
}
|
|
if (params.get('deeplink') === '1') {
|
|
document.documentElement.classList.add('ots-deeplink-mode');
|
|
}
|
|
} catch(e) {
|
|
// Cross-origin iframe detection may throw — treat as embed
|
|
document.documentElement.classList.add('ots-embed-mode');
|
|
}
|
|
})();
|
|
</script>
|
|
|
|
<style nonce="{{ cspNonce }}">
|
|
/* ── Ensure editor pop-ups appear above our fixed action bars ───────────── */
|
|
/* Our #ots-editor-bar sits at z-index 1300. Bootstrap modals default to
|
|
backdrop:1040 / modal:1050, so they render behind it. Raise them to
|
|
1302/1303 so the Checkout / welcome dialogs always appear on top. */
|
|
.modal-backdrop { z-index: 1302 !important; }
|
|
.modal { z-index: 1303 !important; }
|
|
|
|
/* ── Embed mode styles ──────────────────────────────────── */
|
|
|
|
/* Hide Back/Exit button area */
|
|
.ots-embed-mode .back-button {
|
|
display: none !important;
|
|
}
|
|
|
|
/* Hide the help pane */
|
|
.ots-embed-mode #help-pane {
|
|
display: none !important;
|
|
}
|
|
|
|
/* Remove content wrapper padding/margins for full-bleed editor */
|
|
.ots-embed-mode #content-wrapper {
|
|
padding: 0 !important;
|
|
margin: 0 !important;
|
|
}
|
|
|
|
.ots-embed-mode .page-content {
|
|
padding: 0 !important;
|
|
margin: 0 !important;
|
|
}
|
|
|
|
.ots-embed-mode .page-content > .row {
|
|
margin: 0 !important;
|
|
}
|
|
|
|
.ots-embed-mode .page-content > .row > .col-sm-12 {
|
|
padding: 0 !important;
|
|
}
|
|
|
|
/* Full viewport height for the editor */
|
|
.ots-embed-mode body,
|
|
.ots-embed-mode #layout-editor {
|
|
min-height: 100vh;
|
|
}
|
|
|
|
/* Hide the top-bar options dropdown (Publish/Checkout/Discard/etc.) */
|
|
.ots-embed-mode .editor-top-bar .editor-options-dropdown {
|
|
display: none !important;
|
|
}
|
|
|
|
/* Hide the editor jump list (layout switcher) */
|
|
.ots-embed-mode .editor-top-bar #layoutJumpListContainer {
|
|
display: none !important;
|
|
}
|
|
|
|
/* ── Deep-link mode styles ──────────────────────────────── */
|
|
|
|
/* Hide Back/Exit button area */
|
|
.ots-deeplink-mode .back-button {
|
|
display: none !important;
|
|
}
|
|
|
|
/* Hide the help pane */
|
|
.ots-deeplink-mode #help-pane {
|
|
display: none !important;
|
|
}
|
|
|
|
/* Remove content wrapper padding/margins for full-bleed editor */
|
|
.ots-deeplink-mode #content-wrapper {
|
|
padding: 0 !important;
|
|
margin: 0 !important;
|
|
}
|
|
|
|
.ots-deeplink-mode .page-content {
|
|
padding: 0 !important;
|
|
margin: 0 !important;
|
|
}
|
|
|
|
.ots-deeplink-mode .page-content > .row {
|
|
margin: 0 !important;
|
|
}
|
|
|
|
.ots-deeplink-mode .page-content > .row > .col-sm-12 {
|
|
padding: 0 !important;
|
|
}
|
|
|
|
/* Full viewport height for the editor */
|
|
.ots-deeplink-mode body,
|
|
.ots-deeplink-mode #layout-editor {
|
|
min-height: 100vh;
|
|
}
|
|
|
|
/* ── Editor positioning fix ─────────────────────────────────────────────
|
|
Xibo's editor internal structure (from layout-editor.hbs + layout-editor.scss):
|
|
|
|
#layout-editor
|
|
.editor-top-bar ← always min-height ~40px in normal flow;
|
|
its children are position:fixed top:0 (covered by our bar)
|
|
.container-designer { height: calc(100vh - 50px) }
|
|
|
|
Keeping #layout-editor in normal flow and hiding .editor-top-bar removes
|
|
the 40px gap. We then push .container-designer down with margin-top and
|
|
resize it so it fills exactly from below our bar to the viewport bottom.
|
|
─────────────────────────────────────────────────────────────────────── */
|
|
|
|
/* Restore #layout-editor to normal document flow */
|
|
#layout-editor {
|
|
position: static !important;
|
|
top: auto !important;
|
|
left: auto !important;
|
|
right: auto !important;
|
|
bottom: auto !important;
|
|
width: auto !important;
|
|
height: auto !important;
|
|
/* Preserve Xibo's horizontal negative margins (Bootstrap column gutter) */
|
|
margin: 0 -15px -15px -15px !important;
|
|
}
|
|
|
|
/* Xibo's .editor-top-bar inner items use position:fixed top:0 so they
|
|
already render behind our #ots-editor-bar (z-index 1300). Hiding the
|
|
container removes the dead 40px normal-flow space it leaves behind. */
|
|
.editor-top-bar {
|
|
display: none !important;
|
|
}
|
|
|
|
/* Reposition the playlist-editor "Back to Layout" button below our bar
|
|
instead of hiding it — it's shown by lD.openPlaylistEditor() */
|
|
.back-button-playlist {
|
|
top: 50px !important;
|
|
z-index: 1290 !important;
|
|
}
|
|
|
|
/* Push the canvas below our 44px bar and fill the remaining viewport height */
|
|
body.editor-opened .container-designer {
|
|
margin-top: 44px !important;
|
|
height: calc(100vh - 44px) !important;
|
|
}
|
|
|
|
/* Loading spinner while editor data loads — same offset */
|
|
body.editor-opened #layout-editor .loading-container {
|
|
margin-top: 44px !important;
|
|
height: calc(100vh - 44px) !important;
|
|
}
|
|
|
|
/* Embed mode: no bar — canvas fills the full viewport */
|
|
.ots-embed-mode .container-designer,
|
|
.ots-embed-mode #layout-editor .loading-container {
|
|
margin-top: 0 !important;
|
|
height: 100vh !important;
|
|
}
|
|
|
|
/* Remove body-level padding (harmless safety reset) */
|
|
body {
|
|
padding-top: 0 !important;
|
|
}
|
|
|
|
/* Ensure no stray padding above the editor from page-wrapper */
|
|
#page-wrapper,
|
|
#content-wrapper {
|
|
padding-top: 0 !important;
|
|
}
|
|
|
|
/* ── OTS combined editor bar ──────────────────────────── */
|
|
|
|
/* Single fixed bar: back button + layout name + action buttons */
|
|
#ots-editor-bar {
|
|
display: flex;
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
height: 44px;
|
|
background: #0f172a;
|
|
border-bottom: 2px solid #e87800;
|
|
z-index: 1300;
|
|
align-items: center;
|
|
padding: 0 12px;
|
|
gap: 8px;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
/* Hide bar inside an iframe embed */
|
|
.ots-embed-mode #ots-editor-bar {
|
|
display: none;
|
|
}
|
|
|
|
#ots-bar-back {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
background: none;
|
|
border: none;
|
|
color: #e87800;
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
cursor: pointer;
|
|
padding: 6px 10px;
|
|
border-radius: 4px;
|
|
line-height: 1;
|
|
transition: background 0.15s;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
#ots-bar-back:hover {
|
|
background: rgba(232, 120, 0, 0.12);
|
|
}
|
|
|
|
#ots-bar-back:focus-visible {
|
|
outline: 2px solid #e87800;
|
|
outline-offset: 2px;
|
|
}
|
|
|
|
#ots-bar-back svg {
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
/* Vertical divider between back button and layout name */
|
|
#ots-bar-divider {
|
|
width: 1px;
|
|
height: 20px;
|
|
background: #334155;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
/* ── Hide stock Xibo header bar on the layout designer page ── */
|
|
.row.header.header-side {
|
|
display: none !important;
|
|
}
|
|
|
|
/* ── Remove sidebar offset so editor fills the full viewport ── */
|
|
#page-wrapper,
|
|
#content-wrapper {
|
|
margin-left: 0 !important;
|
|
padding-left: 0 !important;
|
|
width: 100% !important;
|
|
max-width: 100% !important;
|
|
}
|
|
|
|
.page-content,
|
|
.page-content > .row,
|
|
.page-content > .row > .col-sm-12 {
|
|
padding: 0 !important;
|
|
margin: 0 !important;
|
|
}
|
|
|
|
/* Layout name / status label */
|
|
#ots-bar-label {
|
|
flex: 1 1 auto;
|
|
min-width: 0;
|
|
font-size: 13px;
|
|
color: #94a3b8;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
padding-left: 4px;
|
|
}
|
|
|
|
.ots-bar-status {
|
|
display: inline-block;
|
|
font-size: 10px;
|
|
font-weight: 600;
|
|
letter-spacing: 0.05em;
|
|
text-transform: uppercase;
|
|
padding: 2px 6px;
|
|
border-radius: 3px;
|
|
margin-left: 8px;
|
|
vertical-align: middle;
|
|
background: rgba(232, 120, 0, 0.15);
|
|
color: #e87800;
|
|
}
|
|
|
|
.ots-bar-status.ots-status-published {
|
|
background: rgba(74, 222, 128, 0.15);
|
|
color: #4ade80;
|
|
}
|
|
|
|
/* Shared button base */
|
|
.ots-editor-bar-btn {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 5px;
|
|
height: 30px;
|
|
padding: 0 12px;
|
|
border-radius: 4px;
|
|
font-size: 13px;
|
|
font-weight: 500;
|
|
cursor: pointer;
|
|
border: 1px solid transparent;
|
|
line-height: 1;
|
|
background: none;
|
|
font-family: inherit;
|
|
transition: background 0.15s, opacity 0.15s, border-color 0.15s;
|
|
white-space: nowrap;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
/* Save — filled orange */
|
|
#ots-editor-save-btn {
|
|
background: #e87800;
|
|
color: #fff;
|
|
border-color: #e87800;
|
|
}
|
|
|
|
#ots-editor-save-btn:hover {
|
|
background: #d16b00;
|
|
border-color: #d16b00;
|
|
}
|
|
|
|
/* Brief green flash after a successful save AJAX round-trip */
|
|
#ots-editor-save-btn.ots-btn-saved {
|
|
background: #16a34a !important;
|
|
border-color: #16a34a !important;
|
|
transition: none;
|
|
}
|
|
|
|
/* Publish — orange outline */
|
|
#ots-editor-publish-btn {
|
|
color: #e87800;
|
|
border-color: #e87800;
|
|
}
|
|
|
|
#ots-editor-publish-btn:hover {
|
|
background: rgba(232, 120, 0, 0.1);
|
|
}
|
|
|
|
/* Checkout — muted outline */
|
|
#ots-editor-checkout-btn {
|
|
color: #94a3b8;
|
|
border-color: #334155;
|
|
}
|
|
|
|
#ots-editor-checkout-btn:hover {
|
|
background: rgba(148, 163, 184, 0.1);
|
|
border-color: #64748b;
|
|
color: #cbd5e1;
|
|
}
|
|
|
|
/* Draft state: show Save + Publish; hide Checkout */
|
|
#ots-editor-bar .ots-draft-only { display: inline-flex; }
|
|
#ots-editor-bar .ots-readonly-only { display: none; }
|
|
|
|
/* Read-only/published state: hide Save + Publish; show Checkout */
|
|
#ots-editor-bar.ots-state-readonly .ots-draft-only { display: none !important; }
|
|
#ots-editor-bar.ots-state-readonly .ots-readonly-only { display: inline-flex !important; }
|
|
|
|
.ots-editor-bar-btn:disabled,
|
|
.ots-editor-bar-btn.ots-btn-loading {
|
|
opacity: 0.45;
|
|
cursor: default;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.ots-editor-bar-btn:focus-visible {
|
|
outline: 2px solid #e87800;
|
|
outline-offset: 2px;
|
|
}
|
|
|
|
/* ── Interactive mode toggle ──────────────────────── */
|
|
#ots-editor-interactive-btn {
|
|
color: #94a3b8;
|
|
border-color: #334155;
|
|
}
|
|
#ots-editor-interactive-btn:hover {
|
|
background: rgba(148, 163, 184, 0.1);
|
|
border-color: #64748b;
|
|
color: #cbd5e1;
|
|
}
|
|
/* Lit up when interactive mode is active */
|
|
#ots-editor-interactive-btn.ots-btn-active {
|
|
background: rgba(232, 120, 0, 0.15);
|
|
border-color: #e87800;
|
|
color: #e87800;
|
|
}
|
|
/* Not useful in embed mode */
|
|
.ots-embed-mode #ots-editor-interactive-btn { display: none !important; }
|
|
|
|
/* Secondary divider between interactive toggle and primary action buttons */
|
|
#ots-bar-actions-divider {
|
|
width: 1px;
|
|
height: 20px;
|
|
background: #334155;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
/* ── Discard — destructive/red outline, draft-only ── */
|
|
#ots-editor-discard-btn {
|
|
color: #f87171;
|
|
border-color: #7f1d1d;
|
|
}
|
|
#ots-editor-discard-btn:hover {
|
|
background: rgba(248, 113, 113, 0.1);
|
|
border-color: #f87171;
|
|
}
|
|
|
|
/* ── Schedule — muted outline, readonly-only ─────── */
|
|
#ots-editor-schedule-btn {
|
|
color: #94a3b8;
|
|
border-color: #334155;
|
|
}
|
|
#ots-editor-schedule-btn:hover {
|
|
background: rgba(148, 163, 184, 0.1);
|
|
border-color: #64748b;
|
|
color: #cbd5e1;
|
|
}
|
|
|
|
/* ── Unlock — amber, hidden until layout is locked ── */
|
|
#ots-editor-unlock-btn {
|
|
display: none;
|
|
color: #fbbf24;
|
|
border-color: #78350f;
|
|
}
|
|
#ots-editor-unlock-btn:hover {
|
|
background: rgba(251, 191, 36, 0.1);
|
|
border-color: #fbbf24;
|
|
}
|
|
/* .ots-bar-locked is added via JS when lD detects locked-for-user */
|
|
#ots-editor-bar.ots-bar-locked #ots-editor-unlock-btn {
|
|
display: inline-flex;
|
|
}
|
|
</style>
|
|
{% endblock %}
|
|
|
|
{% block pageContent %}
|
|
|
|
{# OTS combined editor bar — back button + layout name + action buttons #}
|
|
<div id="ots-editor-bar" role="banner" aria-label="{{ "Layout editor"|trans }}">
|
|
<button id="ots-bar-back" type="button" aria-label="{{ "Back"|trans }}">
|
|
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true" focusable="false">
|
|
<path d="M10 12L6 8l4-4" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"/>
|
|
</svg>
|
|
{{ "Back"|trans }}
|
|
</button>
|
|
<div id="ots-bar-divider" aria-hidden="true"></div>
|
|
<span id="ots-bar-label">
|
|
{{ layout.layout }}
|
|
<span class="ots-bar-status" id="ots-bar-status-badge">{{ "Draft"|trans }}</span>
|
|
</span>
|
|
{# Interactive mode toggle — available in both draft and read-only #}
|
|
<button id="ots-editor-interactive-btn" type="button" class="ots-editor-bar-btn"
|
|
title="{{ "Toggle interactive mode to link regions with actions"|trans }}">
|
|
<svg width="13" height="13" viewBox="0 0 16 16" fill="none" aria-hidden="true" focusable="false">
|
|
<path d="M4 2l2 9 2.5-3H12L4 2z" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round"/>
|
|
</svg>
|
|
{{ "Interactive"|trans }}
|
|
</button>
|
|
<div id="ots-bar-actions-divider" aria-hidden="true"></div>
|
|
{# Draft state: Save + Publish + Discard #}
|
|
<button id="ots-editor-save-btn" type="button" class="ots-editor-bar-btn ots-draft-only"
|
|
title="{{ "Save current changes"|trans }}">
|
|
<svg width="13" height="13" viewBox="0 0 16 16" fill="none" aria-hidden="true" focusable="false">
|
|
<path d="M8 2v7m0 0L5 6m3 3l3-3M3 13h10" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"/>
|
|
</svg>
|
|
{{ "Save"|trans }}
|
|
</button>
|
|
<button id="ots-editor-publish-btn" type="button" class="ots-editor-bar-btn ots-draft-only"
|
|
title="{{ "Publish layout to displays"|trans }}">
|
|
<svg width="13" height="13" viewBox="0 0 16 16" fill="none" aria-hidden="true" focusable="false">
|
|
<path d="M8 11V4m0 0L5 7m3-3l3 3M3 13h10" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"/>
|
|
</svg>
|
|
{{ "Publish"|trans }}
|
|
</button>
|
|
<button id="ots-editor-discard-btn" type="button" class="ots-editor-bar-btn ots-draft-only"
|
|
title="{{ "Discard this draft and revert to the published version"|trans }}">
|
|
<svg width="12" height="12" viewBox="0 0 16 16" fill="none" aria-hidden="true" focusable="false">
|
|
<path d="M4 4l8 8M12 4l-8 8" stroke="currentColor" stroke-width="1.75" stroke-linecap="round"/>
|
|
</svg>
|
|
{{ "Discard"|trans }}
|
|
</button>
|
|
{# Read-only/published state: Checkout + Schedule #}
|
|
<button id="ots-editor-checkout-btn" type="button" class="ots-editor-bar-btn ots-readonly-only"
|
|
title="{{ "Checkout this layout for editing"|trans }}">
|
|
<svg width="13" height="13" viewBox="0 0 16 16" fill="none" aria-hidden="true" focusable="false">
|
|
<path d="M10.5 2.5l3 3L5 14H2v-3L10.5 2.5z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
|
<path d="M9 4l3 3" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
|
|
</svg>
|
|
{{ "Checkout"|trans }}
|
|
</button>
|
|
<button id="ots-editor-schedule-btn" type="button" class="ots-editor-bar-btn ots-readonly-only"
|
|
title="{{ "Schedule this layout on displays"|trans }}">
|
|
<svg width="13" height="13" viewBox="0 0 16 16" fill="none" aria-hidden="true" focusable="false">
|
|
<circle cx="8" cy="8" r="6" stroke="currentColor" stroke-width="1.5"/>
|
|
<path d="M8 5v3.5l2.5 2" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
|
</svg>
|
|
{{ "Schedule"|trans }}
|
|
</button>
|
|
{# Unlock: hidden by default, revealed via JS when lD marks the layout as locked-for-user #}
|
|
<button id="ots-editor-unlock-btn" type="button" class="ots-editor-bar-btn"
|
|
title="{{ "Unlock this layout"|trans }}">
|
|
<svg width="13" height="13" viewBox="0 0 16 16" fill="none" aria-hidden="true" focusable="false">
|
|
<rect x="3" y="8" width="10" height="6" rx="1.5" stroke="currentColor" stroke-width="1.5"/>
|
|
<path d="M6 8V5a3 3 0 016 0v2" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
|
|
</svg>
|
|
{{ "Unlock"|trans }}
|
|
</button>
|
|
</div> {# /ots-editor-bar #}
|
|
|
|
<!-- Editor structure -->
|
|
<div id="layout-editor" data-published-layout-id="{{ publishedLayoutId }}" data-layout-id="{{ layout.layoutId }}" data-layout-help={{ help }}></div>
|
|
|
|
{% endblock %}
|
|
|
|
{% block javaScript %}
|
|
{# Add common files #}
|
|
{% include "editorTranslations.twig" %}
|
|
{% include "editorVars.twig" %}
|
|
|
|
<script src="{{ theme.rootUri() }}dist/layoutEditor.bundle.min.js?v={{ version }}&rev={{revision}}" nonce="{{ cspNonce }}"></script>
|
|
<script src="{{ theme.rootUri() }}dist/playlistEditor.bundle.min.js?v={{ version }}&rev={{revision}}" nonce="{{ cspNonce }}"></script>
|
|
<script src="{{ theme.rootUri() }}dist/codeEditor.bundle.min.js?v={{ version }}&rev={{revision}}" nonce="{{ cspNonce }}"></script>
|
|
<script src="{{ theme.rootUri() }}dist/wysiwygEditor.bundle.min.js?v={{ version }}&rev={{revision}}" nonce="{{ cspNonce }}"></script>
|
|
<script src="{{ theme.rootUri() }}dist/editorCommon.bundle.min.js?v={{ version }}&rev={{revision}}" nonce="{{ cspNonce }}"></script>
|
|
|
|
<script type="text/javascript" nonce="{{ cspNonce }}">
|
|
var previewJwt = "{{ previewJwt }}";
|
|
|
|
{% autoescape "js" %}
|
|
{# Custom translations #}
|
|
var layoutEditorHelpLink = "{{ help }}";
|
|
|
|
var layoutEditorTrans = {
|
|
back: "{% trans "Back" %}",
|
|
exit: "{% trans "Exit" %}",
|
|
cancel: "{% trans "Cancel" %}",
|
|
toggleFullscreen: "{% trans "Toggle Fullscreen Mode" %}",
|
|
layerManager: "{% trans "Layer Manager" %}",
|
|
snapToGrid: "{% trans "Snap to Grid" %}",
|
|
snapToBorders: "{% trans "Snap to Borders" %}",
|
|
snapToElements: "{% trans "Snap to Elements" %}",
|
|
newTitle: "{% trans "New" %}",
|
|
publishTitle: "{% trans "Publish" %}",
|
|
discardTitle: "{% trans "Discard draft" %}",
|
|
deleteTitle: "{% trans "Delete" %}",
|
|
publishMessage: "{% trans "Are you sure you want to publish this Layout? If it is already in use the update will automatically get pushed." %}",
|
|
checkoutTitle: "{% trans "Checkout" %}",
|
|
scheduleTitle: "{% trans "Schedule" %}",
|
|
clearLayout: "{% trans "Clear Canvas" %}",
|
|
unlockTitle: "{% trans "Unlock" %}",
|
|
saveTemplateTitle: "{% trans "Save Template" %}",
|
|
readOnlyModeTitle: "{% trans "Read Only" %}",
|
|
readOnlyModeMessage: "{% trans "You are viewing this Layout in read only mode, checkout by clicking on this message or from the Options menu above!" %}",
|
|
lockedModeTitle: "{% trans "Locked" %}",
|
|
lockedModeMessage: "{% trans "This is being locked by another user. Lock expires on: [expiryDate]" %}",
|
|
checkoutMessage: "{% trans "Not editable, please checkout!" %}",
|
|
unlockMessage: "{% trans "The current layout will be unlocked to other users. You will also be redirected to the Layouts page" %}",
|
|
viewModeTitle: "{% trans "View" %}",
|
|
actions: "{% trans "Actions" %}",
|
|
welcomeModalMessage: "{% trans "This is published and cannot be edited. You can checkout for editing below, or continue to view it in a read only mode." %}",
|
|
showingSampleData: "{% trans "Showing sample data" %}",
|
|
emptyElementData: "{% trans "Has empty data" %}"
|
|
};
|
|
|
|
var viewerTrans = {
|
|
inlineEditor: "{% trans "Inline Editor" %}",
|
|
nextWidget: "{% trans "Next widget" %}",
|
|
previousWidget: "{% trans "Previous widget" %}",
|
|
addWidget: "{% trans "Add Widget" %}",
|
|
editGroup: "{% trans "Edit Group" %}",
|
|
editPlaylist: "{% trans "Edit Playlist" %}",
|
|
prev: '{{ "Previous Widget"|trans }}',
|
|
next: '{{ "Next Widget"|trans }}',
|
|
empty: '{{ "Empty Playlist"|trans }}',
|
|
invalidRegion: '{{ "Invalid Region"|trans }}',
|
|
editPlaylistTitle: '{{ "Edit Playlist"|trans }}',
|
|
dynamicPlaylistTitle: '{{ "Dynamic Playlist"|trans }}'
|
|
};
|
|
|
|
var timelineTrans = {
|
|
zoomIn: "{% trans "Zoom in" %}",
|
|
zoomOut: "{% trans "Zoom out" %}",
|
|
resetZoom: "{% trans "Reset zoom" %}",
|
|
zoomDelta: "{% trans "Visible area time span" %}",
|
|
hiddenTimeruler: "{% trans "Zoom out to see timeruler!" %}",
|
|
emptyTimeline: "{% trans "No Regions: Add a Region to start creating content by clicking here or the Edit Layout icon below!" %}",
|
|
zoomFindSelected: "{% trans "Scroll to selected widget" %}",
|
|
startTime: "{% trans "Visible area start time" %}",
|
|
endTime: "{% trans "Visible area end time" %}",
|
|
layoutName: "{% trans "Layout name" %}",
|
|
layoutDuration: "{% trans "Layout duration" %}",
|
|
layoutDimensions: "{% trans "Layout dimensions" %}",
|
|
addToThisPosition: "{% trans "Add to this position" %}",
|
|
hiddenContentInWidget: "{% trans "Zoom in to see more details!" %}",
|
|
editRegion: "{% trans "Edit region" %}",
|
|
openRegionAsPlaylist: "{% trans "Open as playlist" %}",
|
|
widgetActions: "{% trans "Widget Actions:" %}",
|
|
regionActions: "{% trans "Region Actions:" %}"
|
|
};
|
|
|
|
var bottombarTrans = {
|
|
edit: "{% trans "Edit layout regions" %}",
|
|
addRegion: "{% trans "Add" %}",
|
|
addRegionDesc: "{% trans "Add a new region" %}",
|
|
deleteRegion: "{% trans "Delete region" %}",
|
|
undo: "{% trans "Undo" %}",
|
|
undoDesc: "{% trans "Revert last change" %}",
|
|
close: "{% trans "Close" %}",
|
|
closeDesc: "{% trans "Return to Layout View" %}",
|
|
save: "{% trans "Save" %}",
|
|
saveDesc: "{% trans "Save changes" %}",
|
|
backToLayout: "{% trans "Go back to Layout view" %}",
|
|
saveEditorChanges: "{% trans "Save editor changes" %}",
|
|
playPreviewLayout: "{% trans "Play Layout preview" %}",
|
|
playPreviewLayoutPOTitle: "{% trans "Preview stopped!" %}",
|
|
playPreviewLayoutPOMessage: "{% trans "Click to Play again" %}",
|
|
editLayout: "{% trans "Edit Layout" %}",
|
|
stopPreviewLayout: "{% trans "Stop Layout preview" %}",
|
|
nextWidget: "{% trans "Next widget" %}",
|
|
previousWidget: "{% trans "Previous widget" %}",
|
|
widgetName: "{% trans "Widget Name" %}",
|
|
widgetType: "{% trans "Widget Type" %}",
|
|
widgetTemplate: "{% trans "Widget Template Name" %}",
|
|
elementName: "{% trans "Element Name" %}",
|
|
elementMediaInfoName: "{{ "Media Name" |trans }}",
|
|
elementMediaInfoId: "{{ "Media ID" |trans }}",
|
|
elementGroupName: "{% trans "Element Group Name" %}",
|
|
regionName: "{% trans "Region Name" %}",
|
|
templateName: "{% trans "Template" %}",
|
|
objectType: {
|
|
layout: "{{ "Layout" |trans }}",
|
|
region: "{{ "Region" |trans }}",
|
|
zone: "{{ "Zone" |trans }}",
|
|
playlist: "{{ "Playlist" |trans }}",
|
|
widget: "{{ "Widget" |trans }}",
|
|
element: "{{ "Element" |trans }}",
|
|
"element-group": "{{ "Element Group" |trans }}"
|
|
},
|
|
tools: {
|
|
audio: {
|
|
name: "{{ "Audio" |trans }}",
|
|
description: "{{ "Upload Audio files to assign to Widgets"|trans }}"
|
|
},
|
|
transitionIn: {
|
|
name: "{{ "Transition In" |trans }}",
|
|
description: "{{ "Apply a Transition type for the start of a media item"|trans }}"
|
|
},
|
|
transitionOut: {
|
|
name: "{{ "Transition Out" |trans }}",
|
|
description: "{{ "Apply a Transition type for the end of a media item"|trans }}"
|
|
},
|
|
permissions: {
|
|
name: "{{ "Sharing" |trans }}",
|
|
description: "{{ "Set View, Edit and Delete Sharing for Widgets and Playlists"|trans }}"
|
|
}
|
|
}
|
|
};
|
|
{% endautoescape %}
|
|
</script>
|
|
|
|
<script type="text/javascript" nonce="{{ cspNonce }}">
|
|
/**
|
|
* Setup the background form.
|
|
*/
|
|
function backGroundFormSetup(dialog) {
|
|
var $backgroundImageId = $('[name="backgroundImageId"]', dialog);
|
|
var notFoundIcon = $('#bg_not_found_icon', dialog);
|
|
var bgImageFileName = $('#bg_media_name', dialog);
|
|
var saveButton = $('button#save', dialog);
|
|
var initialBackgroundImageId = $backgroundImageId.val();
|
|
var backgroundChanged = false;
|
|
var mediaName = '';
|
|
|
|
function backgroundImageChange() {
|
|
var id = $backgroundImageId.val();
|
|
var isNotDefined = [0, ''].indexOf(id) !== -1;
|
|
|
|
$('#backgroundRemoveButton').toggleClass('disabled', isNotDefined);
|
|
|
|
if (isNotDefined) {
|
|
notFoundIcon.show();
|
|
bgImageFileName.hide();
|
|
} else {
|
|
notFoundIcon.hide();
|
|
bgImageFileName.show();
|
|
|
|
if(mediaName) {
|
|
bgImageFileName.html(mediaName);
|
|
}
|
|
|
|
if (id !== initialBackgroundImageId) {
|
|
saveButton.trigger('click');
|
|
}
|
|
}
|
|
|
|
if (id !== initialBackgroundImageId) {
|
|
backgroundChanged = true;
|
|
}
|
|
}
|
|
|
|
function backgroundImageHandleDrop(mediaToAdd, fromProvider) {
|
|
if(fromProvider) {
|
|
lD.importFromProvider([mediaToAdd]).then((res) => {
|
|
$backgroundImageId.val(res[0]).trigger('change');
|
|
}).catch(function() {
|
|
toastr.error(errorMessagesTrans.importingMediaFailed);
|
|
});
|
|
} else {
|
|
$backgroundImageId.val(mediaToAdd).trigger('change');
|
|
}
|
|
|
|
lD.toolbar.deselectCardsAndDropZones();
|
|
}
|
|
|
|
$backgroundImageId.change(backgroundImageChange);
|
|
backgroundImageChange();
|
|
|
|
$('#backgroundUploadButton').on('click', function(e) {
|
|
layoutEditBackgroundButtonClicked(e, dialog);
|
|
});
|
|
|
|
$('#backgroundRemoveButton').on('click', function(e) {
|
|
if(!$(this).hasClass('disabled')) {
|
|
$backgroundImageId.val('').trigger('change');
|
|
}
|
|
});
|
|
|
|
$('.background-image-add').droppable({
|
|
greedy: true,
|
|
tolerance: 'pointer',
|
|
accept: function(el) {
|
|
return ($(el).data('type') === 'media' && $(el).data('subType') === 'image');
|
|
},
|
|
drop: _.debounce(function(event, ui) {
|
|
var $draggable = $(ui.draggable[0]);
|
|
bgImageFileName.html($draggable.data('title'));
|
|
mediaName = $draggable.data('cardTitle');
|
|
|
|
if($draggable.hasClass('from-provider')) {
|
|
backgroundImageHandleDrop($draggable.data('providerData'), true);
|
|
} else {
|
|
backgroundImageHandleDrop($draggable.data('mediaId'));
|
|
}
|
|
}, 200)
|
|
});
|
|
|
|
$('.background-image-drop').on('click', function() {
|
|
var selectedCard = lD.toolbar.selectedCard;
|
|
var fromProvider = selectedCard.hasClass('from-provider');
|
|
var cardData = (fromProvider) ? selectedCard.data('providerData') : selectedCard.data('mediaId');
|
|
|
|
bgImageFileName.html(selectedCard.data('cardTitle'));
|
|
mediaName = selectedCard.data('cardTitle');
|
|
|
|
backgroundImageHandleDrop(cardData, fromProvider);
|
|
});
|
|
|
|
$("#layoutEditForm").submit(function(e) {
|
|
e.preventDefault();
|
|
var form = $(this);
|
|
|
|
$.ajax({
|
|
type: form.attr("method"),
|
|
url: form.attr("action"),
|
|
cache: false,
|
|
dataType: "json",
|
|
data: $(form).serialize(),
|
|
success: function(xhr, textStatus, error) {
|
|
XiboSubmitResponse(xhr, form);
|
|
|
|
if (xhr.success) {
|
|
var layout = $("div#layout");
|
|
|
|
if (layout.length > 0) {
|
|
var color = form.find("#backgroundColor").val();
|
|
layout.data().backgroundColor = color;
|
|
layout.css("background-color", color);
|
|
|
|
if (backgroundChanged)
|
|
window.location.reload();
|
|
} else {
|
|
if (backgroundChanged && typeof(table) !== 'undefined' && table.hasOwnProperty('ajax'))
|
|
table.ajax.reload(null, false);
|
|
}
|
|
}
|
|
},
|
|
error: function(xhr, textStatus, errorThrown) {
|
|
SystemMessage(xhr.responseText, false);
|
|
}
|
|
});
|
|
})
|
|
};
|
|
|
|
/**
|
|
* Layout edit background add image button
|
|
*/
|
|
function layoutEditBackgroundButtonClicked(e, dialog) {
|
|
e.preventDefault();
|
|
|
|
openUploadForm({
|
|
url: $(e.target).data().addNewBackgroundUrl,
|
|
title: "{% trans "Add Background Image" %}",
|
|
videoImageCovers: false,
|
|
buttons: {
|
|
main: {
|
|
label: "{% trans "Done" %}",
|
|
className: "btn-primary btn-bb-main",
|
|
callback: function () {
|
|
XiboDialogClose();
|
|
}
|
|
}
|
|
},
|
|
templateOptions: {
|
|
multi: false,
|
|
trans: {
|
|
addFiles: "{% trans "Browse/Add Image" %}",
|
|
startUpload: "{% trans "Start Upload" %}",
|
|
cancelUpload: "{% trans "Cancel Upload" %}"
|
|
},
|
|
upload: {
|
|
maxSize: {{ libraryUpload.maxSize }},
|
|
maxSizeMessage: "{{ libraryUpload.maxSizeMessage }}",
|
|
validExt: "{{ libraryUpload.validImageExt }}"
|
|
}
|
|
},
|
|
uploadDoneEvent: function (data) {
|
|
var mediaId = data.result.files[0].mediaId;
|
|
|
|
if ($(dialog).find('[name="backgroundImageId"]').length === 0) {
|
|
$('<input>').attr({
|
|
type: 'hidden',
|
|
name: 'backgroundImageId',
|
|
value: mediaId
|
|
}).appendTo(dialog);
|
|
} else {
|
|
$('[name="backgroundImageId"]').val(mediaId);
|
|
}
|
|
|
|
dialog.find("#bg_not_found_icon").hide();
|
|
dialog.find("#backgroundRemoveButton").removeClass("disabled");
|
|
|
|
XiboDialogClose();
|
|
$('[name="backgroundImageId"]').trigger('change');
|
|
}
|
|
});
|
|
}
|
|
|
|
function layoutPublishFormOpen() {
|
|
}
|
|
|
|
function layoutEditFormSaved() {
|
|
lD.reloadData(lD.layout, {
|
|
refreshEditor: true,
|
|
});
|
|
}
|
|
</script>
|
|
|
|
{# ── Embed mode: postMessage bridge ──────────────────────── #}
|
|
<script type="text/javascript" nonce="{{ cspNonce }}">
|
|
(function() {
|
|
'use strict';
|
|
|
|
var params = new URLSearchParams(window.location.search);
|
|
var isEmbed = false;
|
|
|
|
try {
|
|
isEmbed = params.get('embed') === '1' || window !== window.parent;
|
|
} catch(e) {
|
|
isEmbed = true;
|
|
}
|
|
|
|
if (!isEmbed) return;
|
|
|
|
// Add embed class to body once DOM is ready
|
|
document.body.classList.add('ots-embed-mode');
|
|
|
|
var layoutId = document.getElementById('layout-editor')
|
|
? document.getElementById('layout-editor').getAttribute('data-layout-id')
|
|
: null;
|
|
|
|
// Restrict postMessage to the known React app origin.
|
|
// window.location.origin is the CMS origin; the parent app is on the same host.
|
|
var targetOrigin = window.location.origin;
|
|
|
|
/**
|
|
* Send a message to the parent window.
|
|
*/
|
|
function sendToParent(type, data) {
|
|
if (window.parent && window.parent !== window) {
|
|
var message = { type: type, layoutId: layoutId };
|
|
if (data) {
|
|
for (var key in data) {
|
|
if (data.hasOwnProperty(key)) {
|
|
message[key] = data[key];
|
|
}
|
|
}
|
|
}
|
|
window.parent.postMessage(message, targetOrigin);
|
|
}
|
|
}
|
|
|
|
// ── Intercept editor save/publish via ajaxComplete ──────
|
|
$(document).ajaxComplete(function(event, xhr, settings) {
|
|
if (!settings || !settings.url) return;
|
|
|
|
try {
|
|
var response = xhr.responseJSON || {};
|
|
if (!response.success) return;
|
|
|
|
// Detect layout save (PUT to layout endpoint)
|
|
if (settings.type === 'PUT' && settings.url.match(/\/layout\/\d+/)) {
|
|
sendToParent('xibo:editor:save', { url: settings.url });
|
|
}
|
|
|
|
// Detect layout publish
|
|
if (settings.url.match(/\/layout\/publish\/\d+/)) {
|
|
sendToParent('xibo:editor:publish', { url: settings.url });
|
|
}
|
|
|
|
// Detect checkout
|
|
if (settings.url.match(/\/layout\/checkout\/\d+/)) {
|
|
sendToParent('xibo:editor:checkout', {
|
|
url: settings.url,
|
|
newLayoutId: response.id || null
|
|
});
|
|
}
|
|
} catch(e) {
|
|
// Silently ignore parse errors
|
|
}
|
|
});
|
|
|
|
// ── Intercept Back/Exit navigation ──────────────────────
|
|
// The editor sets window.location.href to exitURL — intercept it
|
|
$(document).on('click', '.back-button a, .editor-close-btn', function(e) {
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
sendToParent('xibo:editor:exit', {});
|
|
});
|
|
|
|
// ── Listen for commands from parent ─────────────────────
|
|
window.addEventListener('message', function(event) {
|
|
var msg = event.data;
|
|
if (!msg || typeof msg.type !== 'string') return;
|
|
|
|
switch (msg.type) {
|
|
case 'xibo:editor:requestSave':
|
|
// Trigger the properties panel save if pending
|
|
if (typeof lD !== 'undefined' && lD.propertiesPanel && lD.propertiesPanel.toSave) {
|
|
lD.propertiesPanel.save({ target: lD.selectedObject });
|
|
}
|
|
break;
|
|
|
|
case 'xibo:editor:requestPublish':
|
|
if (typeof lD !== 'undefined' && lD.showPublishScreen) {
|
|
lD.showPublishScreen();
|
|
}
|
|
break;
|
|
|
|
case 'xibo:editor:setTheme': {
|
|
var newMode = msg.mode;
|
|
if (newMode === 'light') {
|
|
document.documentElement.classList.add('ots-light-mode');
|
|
document.body.classList.add('ots-light-mode');
|
|
} else {
|
|
document.documentElement.classList.remove('ots-light-mode');
|
|
document.body.classList.remove('ots-light-mode');
|
|
}
|
|
try { localStorage.setItem('ots-theme-mode', newMode); } catch(ignore) {}
|
|
break;
|
|
}
|
|
}
|
|
});
|
|
|
|
// ── Notify parent when editor is ready ──────────────────
|
|
// Fire xibo:editor:error if editor hasn't opened within 15 s
|
|
var initErrTimeout = setTimeout(function() {
|
|
if (!document.body.classList.contains('editor-opened')) {
|
|
sendToParent('xibo:editor:error', { reason: 'timeout' });
|
|
}
|
|
}, 15000);
|
|
|
|
var readyObserver = new MutationObserver(function(mutations) {
|
|
if (document.body.classList.contains('editor-opened')) {
|
|
clearTimeout(initErrTimeout);
|
|
sendToParent('xibo:editor:ready', {
|
|
theme: document.documentElement.classList.contains('ots-light-mode') ? 'light' : 'dark'
|
|
});
|
|
readyObserver.disconnect();
|
|
}
|
|
});
|
|
|
|
if (document.body.classList.contains('editor-opened')) {
|
|
clearTimeout(initErrTimeout);
|
|
sendToParent('xibo:editor:ready', {
|
|
theme: document.documentElement.classList.contains('ots-light-mode') ? 'light' : 'dark'
|
|
});
|
|
} else {
|
|
readyObserver.observe(document.body, { attributes: true, attributeFilter: ['class'] });
|
|
}
|
|
})();
|
|
</script>
|
|
|
|
{# ── Back bar: returnUrl navigation (always active) ────────── #}
|
|
<script type="text/javascript" nonce="{{ cspNonce }}">
|
|
(function() {
|
|
'use strict';
|
|
|
|
var params = new URLSearchParams(window.location.search);
|
|
|
|
// Still mirror deeplink class for any other deeplink-specific behaviour.
|
|
if (params.get('deeplink') === '1') {
|
|
document.body.classList.add('ots-deeplink-mode');
|
|
}
|
|
|
|
/**
|
|
* Allow only safe same-origin relative paths.
|
|
* Accepts: /app/layouts, /layouts/123?foo=bar
|
|
* Rejects: //evil.com, https://evil.com, javascript:void(0), empty string
|
|
*/
|
|
function validateReturnUrl(url) {
|
|
if (!url || typeof url !== 'string') return false;
|
|
// Must start with '/' but not '//' (protocol-relative URL)
|
|
if (url.charAt(0) !== '/' || url.charAt(1) === '/') return false;
|
|
// Reject anything containing a scheme (e.g. https://)
|
|
if (url.indexOf('://') !== -1) return false;
|
|
return true;
|
|
}
|
|
|
|
var rawReturn = params.get('returnUrl');
|
|
var safeReturn = validateReturnUrl(rawReturn) ? rawReturn : null;
|
|
|
|
var backBtn = document.getElementById('ots-bar-back');
|
|
if (backBtn) {
|
|
backBtn.addEventListener('click', function() {
|
|
if (safeReturn) {
|
|
window.location.href = safeReturn;
|
|
} else {
|
|
window.history.back();
|
|
}
|
|
});
|
|
}
|
|
})();
|
|
</script>
|
|
|
|
{# ── OTS Editor Action Bar: state management & button wiring ── #}
|
|
<script type="text/javascript" nonce="{{ cspNonce }}">
|
|
(function() {
|
|
'use strict';
|
|
|
|
var bar = document.getElementById('ots-editor-bar');
|
|
var saveBtn = document.getElementById('ots-editor-save-btn');
|
|
var publishBtn = document.getElementById('ots-editor-publish-btn');
|
|
var checkoutBtn = document.getElementById('ots-editor-checkout-btn');
|
|
var discardBtn = document.getElementById('ots-editor-discard-btn');
|
|
var interactiveBtn = document.getElementById('ots-editor-interactive-btn');
|
|
var scheduleBtn = document.getElementById('ots-editor-schedule-btn');
|
|
var unlockBtn = document.getElementById('ots-editor-unlock-btn');
|
|
var statusBadge = document.getElementById('ots-bar-status-badge');
|
|
|
|
if (!bar || !saveBtn || !publishBtn || !checkoutBtn) return;
|
|
|
|
// ── State management ──────────────────────────────────────
|
|
// 'draft' → Save + Publish visible, Checkout hidden
|
|
// 'readonly' → Checkout visible, Save + Publish hidden
|
|
function setBarState(state) {
|
|
if (state === 'readonly') {
|
|
bar.classList.add('ots-state-readonly');
|
|
if (statusBadge) {
|
|
statusBadge.textContent = '{{ "Published"|trans }}';
|
|
statusBadge.classList.add('ots-status-published');
|
|
}
|
|
} else {
|
|
bar.classList.remove('ots-state-readonly');
|
|
if (statusBadge) {
|
|
statusBadge.textContent = '{{ "Draft"|trans }}';
|
|
statusBadge.classList.remove('ots-status-published');
|
|
}
|
|
}
|
|
}
|
|
|
|
// ── Detect initial state from data attributes ─────────────
|
|
// publishedLayoutId === layoutId → viewing the published version → read-only
|
|
// publishedLayoutId !== layoutId → viewing a draft copy → editable
|
|
function detectInitialState() {
|
|
var editorEl = document.getElementById('layout-editor');
|
|
if (!editorEl) return;
|
|
var layoutId = editorEl.getAttribute('data-layout-id');
|
|
var publishedId = editorEl.getAttribute('data-published-layout-id');
|
|
if (publishedId && publishedId !== '0' && publishedId === layoutId) {
|
|
setBarState('readonly');
|
|
} else {
|
|
setBarState('draft');
|
|
}
|
|
}
|
|
|
|
// ── Wait for the React editor to signal it's ready ────────
|
|
if (document.body.classList.contains('editor-opened')) {
|
|
detectInitialState();
|
|
} else {
|
|
var initObs = new MutationObserver(function() {
|
|
if (document.body.classList.contains('editor-opened')) {
|
|
initObs.disconnect();
|
|
detectInitialState();
|
|
}
|
|
});
|
|
initObs.observe(document.body, { attributes: true, attributeFilter: ['class'] });
|
|
}
|
|
|
|
// ── Button: Save ──────────────────────────────────────────
|
|
// Xibo auto-saves widget/region changes via the history manager.
|
|
// The save button's job is to flush any pending properties panel form.
|
|
saveBtn.addEventListener('click', function() {
|
|
if (saveBtn.classList.contains('ots-btn-loading')) return;
|
|
try {
|
|
if (typeof lD !== 'undefined' && lD.propertiesPanel) {
|
|
lD.propertiesPanel.save({ target: lD.selectedObject });
|
|
}
|
|
} catch(e) { /* silent */ }
|
|
});
|
|
|
|
// ── Button: Publish ───────────────────────────────────────
|
|
publishBtn.addEventListener('click', function() {
|
|
if (publishBtn.classList.contains('ots-btn-loading')) return;
|
|
try {
|
|
if (typeof lD !== 'undefined' && typeof lD.showPublishScreen === 'function') {
|
|
lD.showPublishScreen();
|
|
}
|
|
} catch(e) { /* silent */ }
|
|
});
|
|
|
|
// ── Button: Checkout ──────────────────────────────────────
|
|
// Use urlsForApi (set by editorVars.twig) so the URL is always correct
|
|
// regardless of any sub-path the CMS is hosted under.
|
|
checkoutBtn.addEventListener('click', function() {
|
|
// Delegate to Xibo's own checkout implementation, which handles
|
|
// the AJAX call and redirect internally using urlsForApi.
|
|
if (typeof lD === 'undefined' || !lD.layout ||
|
|
typeof lD.layout.checkout !== 'function') {
|
|
toastr.error('Editor not ready. Please refresh and try again.');
|
|
return;
|
|
}
|
|
lD.layout.checkout();
|
|
});
|
|
|
|
// ── Button: Discard ───────────────────────────────────────
|
|
// We handle this manually so we can redirect back to the custom app
|
|
// (returnUrl) instead of letting Xibo redirect to its own layouts page.
|
|
if (discardBtn) {
|
|
discardBtn.addEventListener('click', function() {
|
|
if (discardBtn.classList.contains('ots-btn-loading')) return;
|
|
|
|
if (!confirm('{{ "Discard this draft and revert to the published version?"|trans }}')) return;
|
|
|
|
var editorEl = document.getElementById('layout-editor');
|
|
if (!editorEl) return;
|
|
// Discard endpoint takes the published (parent) layout ID.
|
|
var publishedId = editorEl.getAttribute('data-published-layout-id');
|
|
if (!publishedId) return;
|
|
|
|
if (typeof urlsForApi === 'undefined' ||
|
|
!urlsForApi.layout || !urlsForApi.layout.discard) return;
|
|
|
|
discardBtn.classList.add('ots-btn-loading');
|
|
discardBtn.disabled = true;
|
|
|
|
$.ajax({
|
|
type: urlsForApi.layout.discard.type || 'PUT',
|
|
url: urlsForApi.layout.discard.url.replace(':id', publishedId),
|
|
success: function() {
|
|
// Redirect to returnUrl (same validation as Back button)
|
|
var rawReturn = new URLSearchParams(window.location.search).get('returnUrl');
|
|
var safeReturn = (rawReturn &&
|
|
rawReturn.charAt(0) === '/' &&
|
|
rawReturn.charAt(1) !== '/' &&
|
|
rawReturn.indexOf('://') === -1) ? rawReturn : null;
|
|
window.location.href = safeReturn || '/';
|
|
},
|
|
error: function(xhr) {
|
|
discardBtn.classList.remove('ots-btn-loading');
|
|
discardBtn.disabled = false;
|
|
try {
|
|
var err = xhr.responseJSON || JSON.parse(xhr.responseText);
|
|
toastr.error(err.message || '{{ "Discard failed"|trans }}');
|
|
} catch(e) {
|
|
toastr.error('{{ "Discard failed"|trans }}');
|
|
}
|
|
}
|
|
});
|
|
});
|
|
}
|
|
|
|
// ── Button: Interactive mode toggle ───────────────────────
|
|
if (interactiveBtn) {
|
|
interactiveBtn.addEventListener('click', function() {
|
|
try {
|
|
if (typeof lD !== 'undefined' && typeof lD.toggleInteractiveMode === 'function') {
|
|
lD.toggleInteractiveMode(!lD.interactiveMode);
|
|
}
|
|
} catch(e) { /* silent */ }
|
|
});
|
|
}
|
|
|
|
// ── Button: Schedule ──────────────────────────────────────
|
|
if (scheduleBtn) {
|
|
scheduleBtn.addEventListener('click', function() {
|
|
if (scheduleBtn.classList.contains('ots-btn-loading')) return;
|
|
try {
|
|
if (typeof lD !== 'undefined' && typeof lD.showScheduleScreen === 'function') {
|
|
lD.showScheduleScreen();
|
|
}
|
|
} catch(e) { /* silent */ }
|
|
});
|
|
}
|
|
|
|
// ── Button: Unlock ────────────────────────────────────────
|
|
if (unlockBtn) {
|
|
unlockBtn.addEventListener('click', function() {
|
|
try {
|
|
if (typeof lD !== 'undefined' && typeof lD.showUnlockScreen === 'function') {
|
|
lD.showUnlockScreen();
|
|
}
|
|
} catch(e) { /* silent */ }
|
|
});
|
|
}
|
|
|
|
// ── Watch #layout-editor classList for interactive-mode and locked state ──
|
|
(function() {
|
|
var editorEl = document.getElementById('layout-editor');
|
|
if (!editorEl) return;
|
|
new MutationObserver(function() {
|
|
// Sync interactive button visual toggle state
|
|
if (interactiveBtn) {
|
|
interactiveBtn.classList.toggle(
|
|
'ots-btn-active',
|
|
editorEl.classList.contains('interactive-mode') ||
|
|
editorEl.classList.contains('interactive-edit-widget-mode')
|
|
);
|
|
}
|
|
// Show Unlock button when lD adds 'locked' + 'locked-for-user' classes
|
|
bar.classList.toggle('ots-bar-locked', editorEl.classList.contains('locked-for-user'));
|
|
}).observe(editorEl, { attributes: true, attributeFilter: ['class'] });
|
|
})();
|
|
|
|
// ── AJAX intercepts: auto-update bar state ────────────────
|
|
$(document).ajaxComplete(function(event, xhr, settings) {
|
|
if (!settings || !settings.url) return;
|
|
try {
|
|
var response = xhr.responseJSON || {};
|
|
if (!response.success) return;
|
|
var url = settings.url;
|
|
|
|
// Layout draft save (PUT /layout/{id}) → flash Save button
|
|
if (settings.type === 'PUT' && /\/layout\/\d+(?:$|\?|\/(?!publish|checkout|discard|delete))/.test(url)) {
|
|
saveBtn.classList.add('ots-btn-saved');
|
|
setTimeout(function() {
|
|
saveBtn.classList.remove('ots-btn-saved');
|
|
}, 2000);
|
|
}
|
|
|
|
// Publish → layout is now the published version → read-only
|
|
if (/\/layout\/publish\/\d+/.test(url)) {
|
|
setBarState('readonly');
|
|
}
|
|
|
|
// Checkout → a new draft is now active → editable
|
|
if (/\/layout\/checkout\/\d+/.test(url)) {
|
|
setBarState('draft');
|
|
}
|
|
} catch(e) { /* silent */ }
|
|
});
|
|
|
|
})();
|
|
</script>
|
|
{% endblock %}
|