0byt3m1n1
Path:
/
home
/
mgatv524
/
www
/
mctv
/
views
/
[
Home
]
File: layout-designer-page.twig
{# /** * Copyright (C) 2020 Xibo Signage Ltd * * Xibo - Digital Signage - http://www.xibo.org.uk * * This file is part of Xibo. * * Xibo is free software: you can redistribute it and/or modify * it under the terms of the GNU Affero General Public License as published by * the Free Software Foundation, either version 3 of the License, or * any later version. * * Xibo is distributed in the hope that it will be useful, * but WITHOUT ANY WARRANTY; without even the implied warranty of * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the * GNU Affero General Public License for more details. * * You should have received a copy of the GNU Affero General Public License * along with Xibo. If not, see <http://www.gnu.org/licenses/>. */ #} {% extends "authed.twig" %} {% import "inline.twig" as inline %} {% block title %}{{ "Layout Designer"|trans }} | {% endblock %} {% block pageContent %} <!-- Editor structure --> <div id="layout-editor" data-layout-id="{{ layout.layoutId }}"></div> <div class="loading-overlay"> <i class="fa fa-spinner fa-spin loading-icon"></i> </div> {% endblock %} {% block javaScript %} {# Add common file #} {% include "common.twig" %} <script src="{{ theme.rootUri() }}dist/layoutDesigner.bundle.min.js?v={{ version }}&rev={{revision}}"></script> <script src="{{ theme.rootUri() }}dist/playlistEditor.bundle.min.js?v={{ version }}&rev={{revision}}"></script> <script type="text/javascript"> {# Custom translations #} {% autoescape "js" %} {# Insert custom translations here #} var layoutDesignerTrans = { publishTitle: "{% trans "Publish layout" %}", discardTitle: "{% trans "Discard draft" %}", 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 Now" %}", unlockTitle: "{% trans "Unlock layout" %}", saveTemplateTitle: "{% trans "Save Template" %}", readOnlyModeTitle: "{% trans "Read Only Mode" %}", 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 Layout" %}", lockedModeMessage: "{% trans "This layout is being locked by another user. Lock expires on: [expiryDate]" %}", checkoutMessage: "{% trans "Layout is 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" %}", regionEditModeMessage: "{% trans "Editing Regions" %}", welcomeModalMessage: "{% trans "This Layout is Published and cannot be edited. You can checkout the Layout for editing below, or continue to view it in a read only mode." %}" }; var viewerTrans = { inlineEditor: "{% trans "Inline Editor" %}", toggleFullscreen: "{% trans "Toggle Fullscreen Mode" %}", backToLayout: "{% trans "Go back to Layout view" %}", saveEditorChanges: "{% trans "Save editor changes" %}", playPreviewLayout: "{% trans "Play Layout preview" %}", editLayout: "{% trans "Edit Layout" %}", stopPreviewLayout: "{% trans "Stop Layout preview" %}", nextWidget: "{% trans "Next widget" %}", previousWidget: "{% trans "Previous widget" %}" }; 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!" %}", 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" %}", emptyRegion: "{% trans "Empty Region" %}", addToThisPosition: "{% trans "Add to this position" %}", hiddenContentInWidget: "{% trans "Zoom in to see more details!" %}", widgetActions: "{% trans "Widget Actions:" %}" }; var navigatorTrans = { edit: "{% trans "Edit layout regions" %}", addRegion: "{% trans "Add" %}", addRegionDesc: "{% trans "Add a new region" %}", deleteRegion: "{% trans "Delete region" %}", toggleFullscreen: "{% trans "Toggle Fullscreen Mode" %}", undo: "{% trans "Undo" %}", undoDesc: "{% trans "Revert last change" %}", close: "{% trans "Close" %}", closeDesc: "{% trans "Return to Layout View" %}", save: "{% trans "Save" %}", saveDesc: "{% trans "Save changes" %}" }; var drawerTrans = { title: "{% trans "Drawer" %}", search: "{% trans "Search" %}", emptyDrawer: "{% trans "Add widgets to be used as targets in actions" %}", notInitEmptyDrawer: "{% trans "Drawer is empty!" %}", toggleDrawer: "{% trans "Toggle drawer" %}", widgetActions: "{% trans "Widget Actions:" %}", noTargetRegion: "{% trans "No Target" %}", noTargetRegionHelp: "{% trans "Please select a target region" %}" }; {% endautoescape %} </script> <script type="text/javascript"> /** * Setup the background form. */ function backGroundFormSetup(dialog) { var backgroundImageList = $('#backgroundImageId'); var notFoundIcon = $('#bg_not_found_icon'); var backgroundImage = $('#bg_image_image'); var initialBackgroundImageId = backgroundImageList.val(); var backgroundChanged = false; function backgroundImageChange() { // Want to attach an onchange event to the drop down for the bg-image var id = backgroundImageList.val(); var src; // If the image is not defined if ([0, ''].indexOf(id) !== -1) { // Show not found icon and hide image notFoundIcon.show(); backgroundImage.hide(); } else { // Hide not found icon and show image notFoundIcon.hide(); backgroundImage.show(); // Replace image source src = backgroundImage.data().url.replace(":id", id); backgroundImage.attr("src", src); } if (id !== initialBackgroundImageId) { backgroundChanged = true; } } backgroundImageList.change(backgroundImageChange); backgroundImageChange(); // Bind to the background add button click $("#backgroundAddButton").on("click", function(e) { layoutEditBackgroundButtonClicked(e, dialog); }); // Bind to the layout form submit $("#layoutEditForm").submit(function(e) { e.preventDefault(); var form = $(this); // Submit via ajax - change the background color on success $.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 { // We assume we're on the layout page - call render // If we're not, table is a Chrome/Safari/FireBug global function 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 * @param e the event * @param dialog the dialog */ function layoutEditBackgroundButtonClicked(e, dialog) { e.preventDefault(); // Open an upload form 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) { // Get the mediaId var mediaId = data.result.files[0].mediaId; // Create a hidden field with the mediaId $("#layoutEditForm").append($("<input type='hidden' name='backgroundImageId' value='" + mediaId + "'/>")); var $bgImagePreview = dialog.find("#bg_image_image"); $bgImagePreview .prop("src", $bgImagePreview.data().url.replace(":id", mediaId)) .show(); dialog.find("#bg_not_found_icon").hide(); XiboDialogClose(); } }); } </script> {% for module in modules %} {% if module.layoutDesignerJavaScript() != "" %} {% include module.layoutDesignerJavaScript() ~ ".twig" %} {% endif %} {% endfor %} {% include "region-designer-javascript.twig" %} {% include "action-designer-javascript.twig" %} {% endblock %}