Content View Preview

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'),

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);

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;
+    }
+}

src/bundle/Resources/public/scss/ibexa.scss

@@ -126,3 +126,4 @@
 @import 'double-input-range';
 @import 'switcher';
 @import 'user-name';
+@import 'location-preview';

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' %}
+
+<div class="ibexa-location-preview">
+    <div class="ibexa-location-preview__siteaccess">
+        {% 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 %}
+            <select class="form-control ibexa-input">
+                {% for choice in choices %}
+                    {% if loop.first %}
+                        {% set value = choice.value %}
+                    {% endif %}
+                    <option value="{{ choice.value }}">
+                        {{ choice.label }}
+                    </option>
+                {% endfor %}
+            </select>
+        {% endset %}
+
+        {% include '@ibexadesign/ui/component/dropdown/dropdown.html.twig' with {
+            source: source,
+            choices: choices,
+            value: value,
+        } %}
+    </div>
+    <div class="ibexa-location-preview__iframe-wrapper">
+        <iframe
+            class="ibexa-location-preview__iframe"
+            src="{{ url('ibexa.version.preview', {
+                    'contentId': content.id,
+                    'versionNo': version_no,
+                    'language': current_language,
+                    'siteAccessName': siteaccess,
+                })}}"
+            frameborder="0"
+        >
+        </iframe>
+    </div>
+</div>

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,
 } %}

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';
     }
 
     /**