start PREVIEW feature

zero.Backoffice.UI/app/app.vue

@@ -1,7 +1,7 @@
 <template>
-  <div class="app" v-if="!loading">
+  <div class="app" v-if="!loading" :class="{ 'is-preview': preview}">
     <app-login v-if="!authenticated" />
-    <template v-else>
+    <template v-if="authenticated && !preview">
       <app-navigation />
       <div class="app-main">
         <router-view></router-view>
@@ -9,6 +9,9 @@
       <app-overlays />
       <app-notifications />
     </template>
+    <template v-if="authenticated && preview">
+      <router-view></router-view>
+    </template>
   </div>
   <div class="app-loading" v-else>
     <ui-loading />
@@ -36,6 +39,13 @@
       authenticated: false
     }),
 
+    computed: {
+      preview()
+      {
+        return this.$route.name === 'preview';
+      }
+    },
+
     mounted()
     {
       this.startup();

zero.Backoffice.UI/app/core/zeroRuntime.ts

@@ -10,6 +10,7 @@ import registerEditorComponents from '../editor/register';
 import { getRouterConfig, appendRouterGuards } from './router/routerConfig';
 import
 {
+  previewPlugin,
   countryPlugin,
   applicationPlugin,
   settingsPlugin,
@@ -34,7 +35,7 @@ import eventHub from '../services/eventhub';
 import { Emitter, EventType } from 'mitt';
 
 plugins.push(
-  editorPlugin, countryPlugin, applicationPlugin, settingsPlugin, languagePlugin,
+  editorPlugin, previewPlugin, countryPlugin, applicationPlugin, settingsPlugin, languagePlugin,
   pagePlugin, linksPlugin, mediaPlugin, spacePlugin, mailTemplatePlugin,
   translationPlugin, integrationPlugin, userPlugin, pageModulePlugin, searchPlugin
 );

zero.Backoffice.UI/app/modules/index.ts

@@ -12,4 +12,5 @@ export * from './integrations';
 export * from './users';
 export * from './links';
 export * from './pageModules';
-export * from './search';
+export * from './search';
+export * from './preview';

zero.Backoffice.UI/app/modules/preview/index.ts

@@ -0,0 +1,10 @@
+//import api from './api';
+//import editor from './schemas/editor';
+//import list from './schemas/list';
+import plugin from './plugin';
+
+export {
+  //api as mediaApi,
+  //editor as mediaSchema,
+  plugin as previewPlugin
+};

zero.Backoffice.UI/app/modules/preview/plugin.ts

@@ -0,0 +1,11 @@
+import { ZeroPlugin, ZeroPluginOptions } from '../../core';
+import { defineAsyncComponent } from 'vue';
+
+export default {
+  name: "zero.preview",
+
+  install(app: ZeroPluginOptions)
+  {
+    app.route({ name: 'preview', path: '/preview', component: () => import('./preview.vue'), props: true });
+  }
+} as ZeroPlugin;

zero.Backoffice.UI/app/modules/preview/preview.vue

@@ -0,0 +1,100 @@
+<template>
+  <div class="app-preview theme-light">
+    <iframe class="app-preview-frame" :src="src" />
+    <div class="app-preview-overlay theme-dark">
+      <span class="-circle"></span>
+      <span class="-text">Preview</span>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+
+    data: () => ({
+      src: null
+    }),
+
+    created()
+    {
+      this.src = 'http://localhost:2310' + this.$route.query.path + '?preview=true';
+    }
+  });
+</script>
+
+<style lang="scss">
+
+  .app.is-preview
+  {
+    display: block;
+    overflow: hidden;
+  }
+
+  .app-preview
+  {
+    width: 100%;
+    height: 100%;
+    position: relative;
+    background: var(--color-bg);
+  }
+
+  iframe.app-preview-frame
+  {
+    width: 100%;
+    height: 100%;
+    margin: 0;
+    padding: 0;
+    border: none;
+    position: relative;
+    z-index: 0;
+  }
+
+  .app-preview-overlay
+  {
+    height: 42px;
+    border-radius: 0 0 var(--radius) var(--radius);
+    background: var(--color-bg);
+    position: fixed;
+    top: 0;
+    right: var(--padding);
+    padding: 0 var(--padding-s);
+    z-index: 1;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-weight: 600;
+    font-size: var(--font-size);
+
+    .-circle
+    {
+      position: relative;
+      top: -1px;
+      width: 12px;
+      height: 12px;
+      border-radius: 16px;
+      background: var(--color-accent-error);
+      animation: shift 1.2s linear reverse infinite;
+      margin-right: var(--padding-xs);
+    }
+
+    @keyframes shift
+    {
+      0%
+      {
+        opacity: 1;
+      }
+
+      50%
+      {
+        opacity: 0.3;
+      }
+
+      100%
+      {
+        opacity: 1;
+      }
+    }
+  }
+</style>

zero.Core/Preview/PreviewOptions.cs

@@ -0,0 +1,11 @@
+namespace zero.Routing;
+
+public class PreviewOptions
+{
+  public PreviewOptions()
+  {
+    PreviewPath = "/preview";
+  }
+
+  public string PreviewPath { get; set; }
+}

zero.Core/Preview/Routing/PreviewRoute.cs

@@ -0,0 +1,8 @@
+namespace zero.Preview;
+
+public class PreviewRoute : IRouteModel
+{
+  public Route Route { get; set; }
+
+  public IRouteModel PreviewedRouteModel { get; set; }
+}

zero.Core/Preview/Routing/PreviewRouteModel.cs

@@ -0,0 +1,8 @@
+namespace zero.Routing;
+
+public class PreviewRouteModel : ISupportsRouting
+{
+  public string Id { get; set; }
+
+  public string Hash { get; set; }
+}

zero.Core/Preview/Routing/PreviewRouteProvider.cs

@@ -0,0 +1,43 @@
+namespace zero.Preview;
+
+public class PreviewRouteProvider : ZeroRouteProvider<PreviewRouteModel>
+{
+  public PreviewRouteProvider() : base("zero.preview") { }
+
+
+  /// <inheritdoc />
+  public override Task<bool> IsRouteStale(RoutingContext context, PreviewRouteModel previous, PreviewRouteModel current) => Task.FromResult(false);
+
+  /// <inheritdoc />
+  public override async Task<Route> Create(RoutingContext context, PreviewRouteModel model)
+  {
+    Route route = await base.Create(context, model);
+    route.Url = context.Context.Options.For<PreviewOptions>().PreviewPath.EnsureStartsWith('/').TrimEnd('/');
+    return route;
+  }
+
+  /// <inheritdoc />
+  public override async IAsyncEnumerable<Route> Seed(RoutingContext context)
+  {
+    yield return await Create(context, new PreviewRouteModel()
+    {
+      Id = String.Empty,
+      Hash = String.Empty
+    });
+  }
+
+  /// <inheritdoc />
+  public override Task<IRouteModel> Model(RoutingContext context, RouteResponse response)
+  {
+    return Task.FromResult<IRouteModel>(new PreviewRoute()
+    {
+      Route = response.Route
+    });
+  }
+
+  /// <inheritdoc />
+  public override IRouteEndpoint Map(RoutingContext context, IRouteModel route)
+  {
+    return base.Map(context, route);
+  }
+}

zero.Core/Preview/ZeroPreviewModule.cs

@@ -0,0 +1,15 @@
+using Microsoft.AspNetCore.Routing;
+using Microsoft.Extensions.Configuration;
+using Microsoft.Extensions.DependencyInjection;
+using Microsoft.Extensions.DependencyInjection.Extensions;
+
+namespace zero.Preview;
+
+internal class ZeroPreviewModule : ZeroModule
+{
+  public override void ConfigureServices(IServiceCollection services, IConfiguration configuration)
+  {
+    //services.AddScoped<IRouteProvider, PreviewRouteProvider>();
+    services.AddOptions<PreviewOptions>().Bind(configuration.GetSection("Zero:Preview"));
+  }
+}