From d56cd6cde8efd69ea5f2d65278291e685b24f787 Mon Sep 17 00:00:00 2001
From: Tobias Klika <cee@live.at>
Date: Fri, 4 Sep 2020 15:28:06 +0200
Subject: [PATCH] start preview output

---
 zero.Web.UI/App/app.vue                       |  13 ++-
 zero.Web.UI/App/pages/pages/page.vue          |  93 +++++++++++++--
 zero.Web.UI/App/pages/preview.vue             | 109 ++++++++++++++++++
 zero.Web.UI/App/router.config.js              |  11 ++
 .../Resources/Localization/zero.en-us.json    |   4 +
 5 files changed, 222 insertions(+), 8 deletions(-)
 create mode 100644 zero.Web.UI/App/pages/preview.vue

diff --git a/zero.Web.UI/App/app.vue b/zero.Web.UI/App/app.vue
index 039882f6..ffce0106 100644
--- a/zero.Web.UI/App/app.vue
+++ b/zero.Web.UI/App/app.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="app">
+  <div class="app" :class="getClassList()">
     <template v-if="isAuthenticated">
       <app-navigation />
       <div class="app-main">
@@ -44,6 +44,17 @@
       });
 
       AuthApi.setUser(zero.user);
+    },
+
+
+    methods: {
+
+      getClassList()
+      {
+        return {
+          'is-preview': this.$route.name === 'preview'
+        };
+      }
     }
   }
 
diff --git a/zero.Web.UI/App/pages/pages/page.vue b/zero.Web.UI/App/pages/pages/page.vue
index 80e79183..be1d9cc4 100644
--- a/zero.Web.UI/App/pages/pages/page.vue
+++ b/zero.Web.UI/App/pages/pages/page.vue
@@ -2,7 +2,7 @@
   <ui-form ref="form" class="page page-editor" v-slot="form" @submit="onSubmit" @load="onLoad" :route="route">
     <ui-form-header v-model="model" title="@page.name" :disabled="disabled" :is-create="!id" :state="form.state" :active-toggle="true" :can-delete="meta.canDelete" @delete="onDelete">
       <template v-slot:actions>
-        <ui-dropdown-button label="@page.preview.title" icon="fth-eye" :disabled="disabled" />
+        <ui-dropdown-button label="@page.preview.title" icon="fth-eye" :disabled="disabled" @click="openPreview" />
         <ui-dropdown-separator />
         <ui-dropdown-button label="@ui.move.title" icon="fth-corner-down-right" @click="move(model)" />
         <ui-dropdown-button label="@ui.copy.title" icon="fth-copy" @click="copy(model)" />
@@ -10,14 +10,14 @@
       </template>
     </ui-form-header>
 
-    <div v-if="preview" class="page-editor-preview-message">
+    <div v-if="preview.open" class="page-editor-preview-message">
       <div class="-text">
         <span>To update the <b>preview</b> with your unsaved changes click the <b>Refresh</b> button.</span>
       </div>
       <div class="-buttons">
-        <ui-button type="small blank" label="Exit" />
-        <ui-button type="small blank" label="Open" />
-        <ui-button type="small" label="Refresh" icon="fth-rotate-cw" />
+        <ui-button type="small blank" label="Exit" @click="exitPreview()" />
+        <ui-button type="small blank" label="Open" @click="focusPreview" />
+        <ui-button type="small" label="Refresh" icon="fth-rotate-cw" @click="refreshPreview" />
       </div>
     </div>
 
@@ -34,7 +34,8 @@
   import Overlay from 'zero/services/overlay.js'
   import MoveOverlay from './overlays/move'
   import CopyOverlay from './overlays/copy'
-  import { find as _find } from 'underscore';
+  import Strings from 'zero/services/strings';
+  import { find as _find, debounce as _debounce } from 'underscore';
 
   export default {
 
@@ -57,7 +58,11 @@
         },
         link: null
       },
-      preview: false
+      preview: {
+        open: false,
+        window: null
+      },
+      debouncedUpdatePreview: null
     }),
 
 
@@ -69,8 +74,21 @@
     },
 
 
+    watch: {
+      model: {
+        deep: true,
+        handler(value)
+        {
+          this.debouncedUpdatePreview(value);
+        }
+      }
+    },
+
+
     mounted()
     {
+      this.debouncedUpdatePreview = _debounce(this.updatePreview, 1000);
+
       EventHub.$on('page.sort', items =>
       {
         let item = _find(items, x => x.id === this.id);
@@ -176,6 +194,67 @@
         });
       },
 
+
+      openPreview()
+      {
+        if (this.preview.open)
+        {
+          return this.focusPreview();
+        }
+
+        const id = Strings.guid();
+
+        this.preview.window = window.open(window.location.origin + '/zero/preview?id=' + id, 'blank');
+        this.preview.window.focus();
+
+        window.addEventListener("message", event =>
+        {
+          this.preview.window.postMessage({
+            id: id,
+            preview: true,
+            model: this.model
+          }, window.location.origin);
+        }, false);
+
+        this.preview.window.onbeforeunload = () => this.exitPreview(true);
+
+        this.preview.open = true;
+      },
+
+      updatePreview(value)
+      {
+        if (!this.preview.open)
+        {
+          return;
+        }
+
+        this.preview.window.postMessage({
+          preview: true,
+          update: true,
+          model: value
+        }, window.location.origin);
+      },
+
+      focusPreview()
+      {
+        this.preview.window.focus();
+      },
+
+      refreshPreview()
+      {
+        this.focusPreview();
+        //this.preview.window.location.reload();
+      },
+
+      exitPreview(external)
+      {
+        if (!external)
+        {
+          this.preview.window.close();
+        }
+        this.preview.window = null;
+        this.preview.open = false;
+      }
     }
   }
 </script>
diff --git a/zero.Web.UI/App/pages/preview.vue b/zero.Web.UI/App/pages/preview.vue
new file mode 100644
index 00000000..b87cae81
--- /dev/null
+++ b/zero.Web.UI/App/pages/preview.vue
@@ -0,0 +1,109 @@
+<template>
+  <div class="app-preview">
+    <div class="app-preview-controls">
+      <img class="app-preview-logo" src="/Assets/zero-2.png" v-localize:alt="'@zero.name'" />
+    </div>
+    <div class="app-preview-frame">
+      <iframe src="http://localhost:2300"></iframe>
+    </div>
+  </div>
+</template>
+
+
+<script>
+  export default {
+
+    data: () => ({
+      path: null
+    }),
+
+    mounted()
+    {
+      window.addEventListener("message", this.receiveMessage, false);
+
+      window.opener.postMessage({
+        preview: true,
+        loaded: true
+      }, window.location.origin);
+    },
+
+    methods: {
+
+      receiveMessage(event)
+      {
+        if (typeof event.data !== 'object' || !event.data.preview)
+        {
+          return;
+        }
+
+        console.info(event.data);
+      }
+
+    }
+
+  }
+</script>
+
+<style lang="scss">
+  .app-preview
+  {
+    width: 100%;
+    height: 100vh;
+    display: grid;
+    grid-template-columns: auto 1fr;
+    background: var(--color-bg);
+    color: var(--color-fg);
+  }
+
+  .app.is-preview 
+  {
+    display: grid;
+    grid-template-columns: 1fr;
+    grid-template-rows: 1fr;
+
+    .app-nav
+    {
+      display: none;
+    }
+  }
+
+  .app-preview-controls
+  {
+    background: var(--color-bg-bright);
+    width: 80px;
+    color: var(--color-fg);
+    height: 100vh;
+    box-shadow: 0 0 20px rgba(0,0,0,0.15);
+    position: relative;
+    z-index: 2;
+  }
+
+  .app-preview-logo
+  {
+    margin: 50px 0 50px -5px;
+    max-width: 500px;
+    height: 22px;
+    transform: rotate(-90deg);
+    transform-origin: 50% 50%;
+  }
+
+  .app-preview-frame
+  {
+    width: 100%;
+    height: 100vh;
+    overflow: hidden;
+    background: white;
+    position: relative;
+    z-index: 1;
+
+    iframe
+    {
+      border-radius: var(--radius);
+      margin: 0;
+      border: none;
+      width: 100%;
+      height: 100%;
+      overflow-y: auto;
+    }
+  }
+</style>
\ No newline at end of file
diff --git a/zero.Web.UI/App/router.config.js b/zero.Web.UI/App/router.config.js
index 744525a8..afe89f0a 100644
--- a/zero.Web.UI/App/router.config.js
+++ b/zero.Web.UI/App/router.config.js
@@ -48,6 +48,17 @@ zero.sections.forEach(section =>
 });
 
 
+// add additional routes
+
+routes.push({
+  path: '/preview',
+  component: () => import('zero/pages/preview'),
+  name: 'preview',
+  meta: {
+    name: '@preview.name'
+  }
+});
+
 
 // find internal route definitions per section
 
diff --git a/zero.Web/Resources/Localization/zero.en-us.json b/zero.Web/Resources/Localization/zero.en-us.json
index 2db0df0a..b07db249 100644
--- a/zero.Web/Resources/Localization/zero.en-us.json
+++ b/zero.Web/Resources/Localization/zero.en-us.json
@@ -513,6 +513,10 @@
     "name": "Space"
   },
 
+  "preview": {
+    "name": "Preview"
+  },
+
   "_test": {
     "fields": {
       "name": "Name",