From 65d69980908bd2d6f1243dd55ad55c1ee5fc4bbf Mon Sep 17 00:00:00 2001
From: Ivo Valchev <Ivo.V.Valchev@gmail.com>
Date: Tue, 9 Mar 2021 14:31:27 +0100
Subject: [PATCH] Live preview proof of concept

---
 .../js/app/editor/Components/LivePreview.vue  | 26 ++++++++
 assets/js/app/editor/index.js                 |  2 +
 templates/content/_buttons.html.twig          | 12 ++++
 templates/content/edit.html.twig              | 65 +++++++++++--------
 translations/messages.en.xlf                  |  6 ++
 5 files changed, 84 insertions(+), 27 deletions(-)
 create mode 100644 assets/js/app/editor/Components/LivePreview.vue

diff --git a/assets/js/app/editor/Components/LivePreview.vue b/assets/js/app/editor/Components/LivePreview.vue
new file mode 100644
index 000000000..0261227ec
--- /dev/null
+++ b/assets/js/app/editor/Components/LivePreview.vue
@@ -0,0 +1,26 @@
+<template>
+    <transition name="card">
+        <iframe name="preview_area"></iframe>
+    </transition>
+</template>
+
+<script>
+export default {
+    name: 'LivePreview',
+    mounted() {
+        $(document.getElementById('editcontent').elements).change(function(){
+            // Submit the live preview
+            $("#live_preview").click();
+        })
+    },
+}
+</script>
+
+<style scoped>
+iframe[name="preview_area"] {
+    width: 100%;
+    height: 100%;
+    min-height: 70vh;
+    border: none;
+}
+</style>
diff --git a/assets/js/app/editor/index.js b/assets/js/app/editor/index.js
index bdf4d183f..ec3ae89f6 100644
--- a/assets/js/app/editor/index.js
+++ b/assets/js/app/editor/index.js
@@ -26,6 +26,7 @@ import Filelist from './Components/Filelist';
 import Collection from './Components/Collection';
 import Checkbox from './Components/Checkbox';
 import UnsavedChangesWarning from './unsavedchanges';
+import LivePreview from './Components/LivePreview';
 
 Vue.component('editor-checkbox', Checkbox);
 Vue.component('editor-date', Date);
@@ -45,6 +46,7 @@ Vue.component('editor-text', Text);
 Vue.component('editor-textarea', Textarea);
 Vue.component('editor-collection', Collection);
 Vue.component('editor-set', Set);
+Vue.component('editor-live-preview', LivePreview);
 Vue.component('general-language', Language);
 Vue.component('theme-select', ThemeSelect);
 
diff --git a/templates/content/_buttons.html.twig b/templates/content/_buttons.html.twig
index ba1eb7be4..0bdb5e0bb 100644
--- a/templates/content/_buttons.html.twig
+++ b/templates/content/_buttons.html.twig
@@ -29,6 +29,18 @@
                         'btn- dropdown-button mb-0',
                         { 'target': '_blank' }
                     ) }}
+
+                    {{ macro.button(
+                        'action.live_preview',
+                        'fa-tablet',
+                        'primary mb-0',
+                        {
+                            'id': 'live_preview',
+                            'type': 'submit',
+                            'form': 'editcontent',
+                            'formtarget': 'preview_area',
+                            'formaction': path('bolt_content_edit_preview', {'id': record.id|default(0) })
+                        }) }}
                 </div>
             </div>
         {% endif %}
diff --git a/templates/content/edit.html.twig b/templates/content/edit.html.twig
index e6da672a3..1f62bf099 100644
--- a/templates/content/edit.html.twig
+++ b/templates/content/edit.html.twig
@@ -39,49 +39,60 @@
 
 {% block main %}
 
-    {% if record.definition.virtual|default(false) %}
-        <div class="alert alert-danger" role="alert">
-            {{ 'content.edit_missing_definition'|trans({'%contenttype%': record.definition.name}) }}
-        </div>
-    {% endif %}
-
-    {% if errors is defined %}
-        {%for error in errors %}
+    <div style="display: flex; gap: 5%;">
+        <div style="flex: 1;">
+        {% if record.definition.virtual|default(false) %}
             <div class="alert alert-danger" role="alert">
-                {{ error.propertyPath }}: {{error.message}}
+                {{ 'content.edit_missing_definition'|trans({'%contenttype%': record.definition.name}) }}
             </div>
-        {%endfor%}
-    {% endif %}
+        {% endif %}
+
+        {% if errors is defined %}
+            {%for error in errors %}
+                <div class="alert alert-danger" role="alert">
+                    {{ error.propertyPath }}: {{error.message}}
+                </div>
+            {%endfor%}
+        {% endif %}
+
+        <form method="post" id="editcontent">
 
-    <form method="post" id="editcontent">
+            <input type="hidden" name="_csrf_token" value="{{ csrf_token('editrecord') }}">
+            <input type="hidden" name="_edit_locale" value="{{ currentlocale }}">
+            {# To prevent confusion in browsers about which submit to use when pressing 'enter', we
+            provide this _input_ here. All browsers will use this as a default. See #454 on Github. #}
+            <input type="submit" form="editcontent" style="display: none;" value="__('action.save')">
 
-        <input type="hidden" name="_csrf_token" value="{{ csrf_token('editrecord') }}">
-        <input type="hidden" name="_edit_locale" value="{{ currentlocale }}">
-        {# To prevent confusion in browsers about which submit to use when pressing 'enter', we
-        provide this _input_ here. All browsers will use this as a default. See #454 on Github. #}
-        <input type="submit" form="editcontent" style="display: none;" value="__('action.save')">
+            {% set groups = record.definition.groups|default([]) %}
 
-        {% set groups = record.definition.groups|default([]) %}
+            {% include '@bolt/content/_tabs.html.twig' %}
 
-        {% include '@bolt/content/_tabs.html.twig' %}
+            <div class="tab-content" id="nav-tabContent">
 
-        <div class="tab-content" id="nav-tabContent">
+            {% include '@bolt/content/_fields.html.twig' %}
 
-        {% include '@bolt/content/_fields.html.twig' %}
+                <div class="tab-pane" id="relations" role="tabpanel" aria-labelledby="relations-tab">
 
-            <div class="tab-pane" id="relations" role="tabpanel" aria-labelledby="relations-tab">
+                    {% include '@bolt/content/_relationships.html.twig' %}
 
-                {% include '@bolt/content/_relationships.html.twig' %}
+                    {% include '@bolt/content/_taxonomies.html.twig' %}
+                </div>
 
-                {% include '@bolt/content/_taxonomies.html.twig' %}
             </div>
 
+            <hr>
+            {% include '@bolt/content/_buttons.html.twig' with {'hide_on_mobile': true} %}
+
+        </form>
+
         </div>
 
-        <hr>
-        {% include '@bolt/content/_buttons.html.twig' with {'hide_on_mobile': true} %}
+        <div style="flex: 1;">
+            <editor-live-preview></editor-live-preview>
+{#            <iframe style="width: 100%; height: 100%;" name="preview" src=""></iframe>#}
+        </div>
 
-    </form>
+    </div>
 
 {% endblock %}
 
diff --git a/translations/messages.en.xlf b/translations/messages.en.xlf
index f48ad99f8..f3f7006fa 100644
--- a/translations/messages.en.xlf
+++ b/translations/messages.en.xlf
@@ -2613,5 +2613,11 @@
         <target>Refresh</target>
       </segment>
     </unit>
+    <unit id="a6WWRhQ" name="action.live_preview">
+      <segment>
+        <source>action.live_preview</source>
+        <target>Live preview</target>
+      </segment>
+    </unit>
   </file>
 </xliff>