start preview output
This commit is contained in:
+12
-1
@@ -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'
|
||||
};
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
@@ -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
|
||||
|
||||
|
||||
@@ -513,6 +513,10 @@
|
||||
"name": "Space"
|
||||
},
|
||||
|
||||
"preview": {
|
||||
"name": "Preview"
|
||||
},
|
||||
|
||||
"_test": {
|
||||
"fields": {
|
||||
"name": "Name",
|
||||
|
||||
Reference in New Issue
Block a user