From 90da4707b2e938b4282bbce177e7718e2b143025 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C5=82=20Grabowski?= Date: Thu, 19 Oct 2023 11:11:50 +0200 Subject: [PATCH] Content View Preview --- .../Resources/encore/ibexa.js.config.js | 1 + .../js/scripts/admin.location.preview.js | 35 ++++++++++ .../public/scss/_location-preview.scss | 10 +++ src/bundle/Resources/public/scss/ibexa.scss | 1 + .../admin/content/tab/preview.html.twig | 66 +++++++++++++++++++ .../admin/ui/tab/location_view.html.twig | 2 +- src/lib/Tab/LocationView/ContentTab.php | 2 +- 7 files changed, 115 insertions(+), 2 deletions(-) create mode 100644 src/bundle/Resources/public/js/scripts/admin.location.preview.js create mode 100644 src/bundle/Resources/public/scss/_location-preview.scss create mode 100644 src/bundle/Resources/views/themes/admin/content/tab/preview.html.twig diff --git a/src/bundle/Resources/encore/ibexa.js.config.js b/src/bundle/Resources/encore/ibexa.js.config.js index a9919e88e1..6f6bf87506 100644 --- a/src/bundle/Resources/encore/ibexa.js.config.js +++ b/src/bundle/Resources/encore/ibexa.js.config.js @@ -155,6 +155,7 @@ module.exports = (Encore) => { path.resolve(__dirname, '../public/js/scripts/admin.location.visibility.js'), path.resolve(__dirname, '../public/js/scripts/admin.location.update.js'), path.resolve(__dirname, '../public/js/scripts/admin.location.tooglecontentpreview.js'), + path.resolve(__dirname, '../public/js/scripts/admin.location.preview.js'), path.resolve(__dirname, '../public/js/scripts/button.content.edit.js'), path.resolve(__dirname, '../public/js/scripts/udw/move.js'), path.resolve(__dirname, '../public/js/scripts/udw/copy.js'), diff --git a/src/bundle/Resources/public/js/scripts/admin.location.preview.js b/src/bundle/Resources/public/js/scripts/admin.location.preview.js new file mode 100644 index 0000000000..0ed5ff9945 --- /dev/null +++ b/src/bundle/Resources/public/js/scripts/admin.location.preview.js @@ -0,0 +1,35 @@ +(function (global, doc) { + const previewNode = doc.querySelector('.ibexa-location-preview'); + const previewSiteaccessDropdownInput = previewNode.querySelector('.ibexa-location-preview__siteaccess .ibexa-dropdown .ibexa-dropdown__source .ibexa-input'); + const previewIframeWrapperNode = previewNode.querySelector('.ibexa-location-preview__iframe-wrapper'); + const previewIframe = previewIframeWrapperNode.querySelector('.ibexa-location-preview__iframe'); + const handleSiteaccessChange = (event) => { + previewIframe.src = event.target.value; + } + const resizeIframe = () => { + const currentPreviewWidth = previewIframeWrapperNode.offsetWidth; + const currentIframeWidth = previewIframe.offsetWidth; + const scaleValue = currentPreviewWidth / currentIframeWidth; + + previewIframe.style.scale = scaleValue; + + const newPreviewNodeHeight = previewIframe.getBoundingClientRect().height; + + previewIframeWrapperNode.style.height = `${newPreviewNodeHeight}px`; + } + const blockEventsInsideIframe = () => { + const documentHTML = previewIframe.contentWindow.document.documentElement; + + documentHTML.style.pointerEvents = 'none'; + } + const handleIframeLoad = () => { + blockEventsInsideIframe(); + } + const resizeObserver = new ResizeObserver(() => { + resizeIframe(); + }); + + resizeObserver.observe(previewIframeWrapperNode); + previewIframe.addEventListener('load', handleIframeLoad, false); + previewSiteaccessDropdownInput.addEventListener('change', handleSiteaccessChange, false); +})(window, window.document); diff --git a/src/bundle/Resources/public/scss/_location-preview.scss b/src/bundle/Resources/public/scss/_location-preview.scss new file mode 100644 index 0000000000..af00c59a49 --- /dev/null +++ b/src/bundle/Resources/public/scss/_location-preview.scss @@ -0,0 +1,10 @@ +.ibexa-location-preview { + &__siteaccess { + display: inline-block; + } + &__iframe { + width: 1920px; + aspect-ratio: 16/9; + transform-origin: left top; + } +} diff --git a/src/bundle/Resources/public/scss/ibexa.scss b/src/bundle/Resources/public/scss/ibexa.scss index d0d6278233..d0c3d6c444 100644 --- a/src/bundle/Resources/public/scss/ibexa.scss +++ b/src/bundle/Resources/public/scss/ibexa.scss @@ -126,3 +126,4 @@ @import 'double-input-range'; @import 'switcher'; @import 'user-name'; +@import 'location-preview'; diff --git a/src/bundle/Resources/views/themes/admin/content/tab/preview.html.twig b/src/bundle/Resources/views/themes/admin/content/tab/preview.html.twig new file mode 100644 index 0000000000..34b4a6f89a --- /dev/null +++ b/src/bundle/Resources/views/themes/admin/content/tab/preview.html.twig @@ -0,0 +1,66 @@ +{% set version_no = content.versionInfo.versionNo %} +{% set current_language = app.request.get('languageCode') ?: content.prioritizedFieldLanguageCode %} +{% set siteaccess = 'site' %} + +
+
+ {% set value = '' %} + {% set choices = [ + { + value: path( + 'ibexa.version.preview', + { + 'contentId': content.id, + 'versionNo': version_no, + 'language': current_language, + 'siteAccessName': 'site', + }, + ), + label: 'Site', + }, + { + value: path( + 'ibexa.version.preview', + { + 'contentId': content.id, + 'versionNo': version_no, + 'language': current_language, + 'siteAccessName': 'corporate', + }, + ), + label: 'Corporate', + }, + ] %} + {% set source %} + + {% endset %} + + {% include '@ibexadesign/ui/component/dropdown/dropdown.html.twig' with { + source: source, + choices: choices, + value: value, + } %} +
+
+ +
+
diff --git a/src/bundle/Resources/views/themes/admin/ui/tab/location_view.html.twig b/src/bundle/Resources/views/themes/admin/ui/tab/location_view.html.twig index 4414e676cb..65558b7034 100644 --- a/src/bundle/Resources/views/themes/admin/ui/tab/location_view.html.twig +++ b/src/bundle/Resources/views/themes/admin/ui/tab/location_view.html.twig @@ -4,7 +4,7 @@ content: tab.view, active: index == 0 }) %} -{% include '@ibexadesign/ui/component/tab/tabs.html.twig' with { +{% include '@ibexadesign/ui/component/tab/tabs.html.twig' with { tabs: tabs_to_show, include_tab_more: true, } %} diff --git a/src/lib/Tab/LocationView/ContentTab.php b/src/lib/Tab/LocationView/ContentTab.php index 578d22fca4..cd6ae6d406 100644 --- a/src/lib/Tab/LocationView/ContentTab.php +++ b/src/lib/Tab/LocationView/ContentTab.php @@ -67,7 +67,7 @@ public function getOrder(): int */ public function getTemplate(): string { - return '@ibexadesign/content/tab/content.html.twig'; + return '@ibexadesign/content/tab/preview.html.twig'; } /**