@umbraco-cms/backoffice 14.0.0-rc3 → 14.0.0-rc4

package/dist-cms/apps/preview/preview.context.js

@@ -0,0 +1,178 @@
+import { UMB_APP_CONTEXT } from '../app/app.context.js';
+import { UmbBooleanState, UmbStringState } from '../../libs/observable-api/index.js';
+import { umbConfirmModal } from '../../packages/core/modal/index.js';
+import { UmbContextBase } from '../../libs/class-api/index.js';
+import { UmbContextToken } from '../../libs/context-api/index.js';
+import { UmbDocumentPreviewRepository } from '../../packages/documents/documents/index.js';
+const UMB_LOCALSTORAGE_SESSION_KEY = 'umb:previewSessions';
+export class UmbPreviewContext extends UmbContextBase {
+    #culture;
+    #serverUrl;
+    #webSocket;
+    #unique;
+    #iframeReady;
+    #previewUrl;
+    #documentPreviewRepository;
+    constructor(host) {
+        super(host, UMB_PREVIEW_CONTEXT);
+        this.#serverUrl = '';
+        this.#iframeReady = new UmbBooleanState(false);
+        this.iframeReady = this.#iframeReady.asObservable();
+        this.#previewUrl = new UmbStringState(undefined);
+        this.previewUrl = this.#previewUrl.asObservable();
+        this.#documentPreviewRepository = new UmbDocumentPreviewRepository(this);
+        this.#init();
+    }
+    async #init() {
+        const appContext = await this.getContext(UMB_APP_CONTEXT);
+        this.#serverUrl = appContext.getServerUrl();
+        const params = new URLSearchParams(window.location.search);
+        this.#culture = params.get('culture');
+        this.#unique = params.get('id');
+        if (!this.#unique) {
+            console.error('No unique ID found in query string.');
+            return;
+        }
+        this.#setPreviewUrl();
+    }
+    #configureWebSocket() {
+        if (this.#webSocket && this.#webSocket.readyState < 2)
+            return;
+        const url = `${this.#serverUrl.replace('https://', 'wss://')}/umbraco/PreviewHub`;
+        this.#webSocket = new WebSocket(url);
+        this.#webSocket.addEventListener('open', () => {
+            // NOTE: SignalR protocol handshake; it requires a terminating control character.
+            const endChar = String.fromCharCode(30);
+            this.#webSocket?.send(`{"protocol":"json","version":1}${endChar}`);
+        });
+        this.#webSocket.addEventListener('message', (event) => {
+            if (!event?.data)
+                return;
+            // NOTE: Strip the terminating control character, (from SignalR).
+            const data = event.data.substring(0, event.data.length - 1);
+            const json = JSON.parse(data);
+            if (json.type === 1 && json.target === 'refreshed') {
+                const pageId = json.arguments?.[0];
+                if (pageId === this.#unique) {
+                    this.#setPreviewUrl({ rnd: Math.random() });
+                }
+            }
+        });
+    }
+    #getSessionCount() {
+        return Math.max(Number(localStorage.getItem(UMB_LOCALSTORAGE_SESSION_KEY)), 0) || 0;
+    }
+    #setPreviewUrl(args) {
+        const host = args?.serverUrl || this.#serverUrl;
+        const path = args?.unique || this.#unique;
+        const params = new URLSearchParams();
+        const culture = args?.culture || this.#culture;
+        if (culture)
+            params.set('culture', culture);
+        if (args?.rnd)
+            params.set('rnd', args.rnd.toString());
+        this.#previewUrl.setValue(`${host}/${path}?${params}`);
+    }
+    #setSessionCount(sessions) {
+        localStorage.setItem(UMB_LOCALSTORAGE_SESSION_KEY, sessions.toString());
+    }
+    checkSession() {
+        const sessions = this.#getSessionCount();
+        if (sessions > 0)
+            return;
+        umbConfirmModal(this._host, {
+            headline: `Preview website?`,
+            content: `You have ended preview mode, do you want to enable it again to view the latest saved version of your website?`,
+            cancelLabel: 'View published version',
+            confirmLabel: 'Preview latest version',
+        })
+            .then(() => {
+            this.restartSession();
+        })
+            .catch(() => {
+            this.exitSession();
+        });
+    }
+    async exitPreview(sessions = 0) {
+        this.#setSessionCount(sessions);
+        // We are good to end preview mode.
+        if (sessions <= 0) {
+            await this.#documentPreviewRepository.exit();
+        }
+        if (this.#webSocket) {
+            this.#webSocket.close();
+            this.#webSocket = undefined;
+        }
+        const url = this.#previewUrl.getValue();
+        window.location.replace(url);
+    }
+    async exitSession() {
+        let sessions = this.#getSessionCount();
+        sessions--;
+        this.exitPreview(sessions);
+    }
+    iframeLoaded(iframe) {
+        if (!iframe)
+            return;
+        this.#configureWebSocket();
+        this.#iframeReady.setValue(true);
+    }
+    getIFrameWrapper() {
+        return this.getHostElement().shadowRoot?.querySelector('#wrapper');
+    }
+    openWebsite() {
+        const url = this.#previewUrl.getValue();
+        window.open(url, '_blank');
+    }
+    // TODO: [LK] Figure out how to make `iframe.contentDocument` works, as it's not from SameOrigin.
+    reloadIFrame(iframe) {
+        const document = iframe.contentDocument;
+        if (!document)
+            return;
+        document.location.reload();
+    }
+    async restartSession() {
+        await this.#documentPreviewRepository.enter();
+        this.startSession();
+    }
+    startSession() {
+        let sessions = this.#getSessionCount();
+        sessions++;
+        this.#setSessionCount(sessions);
+    }
+    async updateIFrame(args) {
+        if (!args)
+            return;
+        const wrapper = this.getIFrameWrapper();
+        if (!wrapper)
+            return;
+        const scaleIFrame = () => {
+            if (wrapper.className === 'fullsize') {
+                wrapper.style.transform = '';
+            }
+            else {
+                const wScale = document.body.offsetWidth / (wrapper.offsetWidth + 30);
+                const hScale = document.body.offsetHeight / (wrapper.offsetHeight + 30);
+                const scale = Math.min(wScale, hScale, 1); // get the lowest ratio, but not higher than 1
+                wrapper.style.transform = `scale(${scale})`;
+            }
+        };
+        window.addEventListener('resize', scaleIFrame);
+        wrapper.addEventListener('transitionend', scaleIFrame);
+        if (args.culture) {
+            this.#iframeReady.setValue(false);
+            const params = new URLSearchParams(window.location.search);
+            params.set('culture', args.culture);
+            const newRelativePathQuery = window.location.pathname + '?' + params.toString();
+            history.pushState(null, '', newRelativePathQuery);
+            this.#setPreviewUrl({ culture: args.culture });
+        }
+        if (args.className)
+            wrapper.className = args.className;
+        if (args.height)
+            wrapper.style.height = args.height;
+        if (args.width)
+            wrapper.style.width = args.width;
+    }
+}
+export const UMB_PREVIEW_CONTEXT = new UmbContextToken('UmbPreviewContext');

package/dist-cms/apps/preview/preview.element.d.ts

@@ -0,0 +1,22 @@
+import { nothing } from '../../external/lit/index.js';
+import { UmbLitElement } from '../../packages/core/lit-element/index.js';
+declare const elementName = "umb-preview";
+/**
+ * @element umb-preview
+ */
+export declare class UmbPreviewElement extends UmbLitElement {
+    #private;
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private _iframeReady?;
+    private _previewUrl?;
+    render(): typeof nothing | import("lit-html").TemplateResult<1>;
+    static styles: import("@lit/reactive-element/css-tag.js").CSSResult[];
+}
+export default UmbPreviewElement;
+declare global {
+    interface HTMLElementTagNameMap {
+        [elementName]: UmbPreviewElement;
+    }
+}

package/dist-cms/apps/preview/preview.element.js

@@ -0,0 +1,196 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { manifests as previewApps } from './apps/manifests.js';
+import { UmbPreviewContext } from './preview.context.js';
+import { css, customElement, html, nothing, state, when } from '../../external/lit/index.js';
+import { umbExtensionsRegistry } from '../../packages/core/extension-registry/index.js';
+import { UmbLitElement } from '../../packages/core/lit-element/index.js';
+const elementName = 'umb-preview';
+/**
+ * @element umb-preview
+ */
+let UmbPreviewElement = class UmbPreviewElement extends UmbLitElement {
+    #context = new UmbPreviewContext(this);
+    constructor() {
+        super();
+        if (previewApps?.length) {
+            umbExtensionsRegistry.registerMany(previewApps);
+        }
+        this.observe(this.#context.iframeReady, (iframeReady) => (this._iframeReady = iframeReady));
+        this.observe(this.#context.previewUrl, (previewUrl) => (this._previewUrl = previewUrl));
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.addEventListener('visibilitychange', this.#onVisibilityChange);
+        window.addEventListener('beforeunload', () => this.#context.exitSession());
+        this.#context.startSession();
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.removeEventListener('visibilitychange', this.#onVisibilityChange);
+        // NOTE: Unsure how we remove an anonymous function from 'beforeunload' event listener.
+        // The reason for the anonymous function is that if we used a named function,
+        // `this` would be the `window` and would not have context to the class instance. [LK]
+        //window.removeEventListener('beforeunload', () => this.#context.exitSession());
+        this.#context.exitSession();
+    }
+    #onIFrameLoad(event) {
+        this.#context.iframeLoaded(event.target);
+    }
+    #onVisibilityChange() {
+        this.#context.checkSession();
+    }
+    render() {
+        if (!this._previewUrl)
+            return nothing;
+        return html `
+			${when(!this._iframeReady, () => html `<div id="loading"><uui-loader-circle></uui-loader-circle></div>`)}
+			<div id="wrapper">
+				<div id="container">
+					<iframe
+						src=${this._previewUrl}
+						title="Page preview"
+						@load=${this.#onIFrameLoad}
+						sandbox="allow-scripts"></iframe>
+				</div>
+			</div>
+			<div id="menu">
+				<h4>Preview Mode</h4>
+				<uui-button-group>
+					<umb-extension-slot id="apps" type="previewApp"></umb-extension-slot>
+				</uui-button-group>
+			</div>
+		`;
+    }
+    static { this.styles = [
+        css `
+			:host {
+				display: flex;
+				justify-content: center;
+				align-items: center;
+
+				position: absolute;
+				top: 0;
+				left: 0;
+				right: 0;
+				bottom: 0;
+
+				padding-bottom: 40px;
+			}
+
+			#loading {
+				display: flex;
+				align-items: center;
+				justify-content: center;
+
+				position: absolute;
+				top: 0;
+				left: 0;
+				right: 0;
+				bottom: 0;
+
+				font-size: 6rem;
+				backdrop-filter: blur(5px);
+			}
+
+			#wrapper {
+				transition: all 240ms cubic-bezier(0.165, 0.84, 0.44, 1);
+				flex-shrink: 0;
+				height: 100%;
+				width: 100%;
+			}
+
+			#wrapper.fullsize {
+				margin: 0 auto;
+				overflow: hidden;
+			}
+
+			#wrapper.shadow {
+				margin: 10px auto;
+				background-color: white;
+				border-radius: 3px;
+				overflow: hidden;
+				opacity: 1;
+				box-shadow: 0 5px 20px 0 rgba(0, 0, 0, 0.26);
+			}
+
+			#container {
+				width: 100%;
+				height: 100%;
+				margin: 0 auto;
+				overflow: hidden;
+			}
+
+			#menu {
+				display: flex;
+				justify-content: space-between;
+				align-items: center;
+
+				position: absolute;
+				bottom: 0;
+				left: 0;
+				right: 0;
+
+				background-color: var(--uui-color-header-surface);
+				height: 40px;
+
+				animation: menu-bar-animation 1.2s;
+				animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
+			}
+
+			#menu > h4 {
+				color: var(--uui-color-header-contrast-emphasis);
+				margin: 0;
+				padding: 0 15px;
+			}
+
+			#menu > uui-button-group {
+				height: 100%;
+			}
+
+			uui-icon.flip {
+				rotate: 90deg;
+			}
+
+			iframe {
+				border: 0;
+				top: 0;
+				right: 0;
+				bottom: 0;
+				left: 0;
+				width: 100%;
+				height: 100%;
+				overflow: hidden;
+				overflow-x: hidden;
+				overflow-y: hidden;
+			}
+
+			@keyframes menu-bar-animation {
+				0% {
+					bottom: -50px;
+				}
+				40% {
+					bottom: -50px;
+				}
+				80% {
+					bottom: 0px;
+				}
+			}
+		`,
+    ]; }
+};
+__decorate([
+    state()
+], UmbPreviewElement.prototype, "_iframeReady", void 0);
+__decorate([
+    state()
+], UmbPreviewElement.prototype, "_previewUrl", void 0);
+UmbPreviewElement = __decorate([
+    customElement(elementName)
+], UmbPreviewElement);
+export { UmbPreviewElement };
+export default UmbPreviewElement;

package/dist-cms/assets/css/umbraco-blockgridlayout-flexbox.css

@@ -0,0 +1,35 @@
+/** Example of how a grid layout stylehseet could be done with Flex box: */
+
+.umb-block-grid__layout-container {
+    position: relative;
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--umb-block-grid--row-gap, 0) var(--umb-block-grid--column-gap, 0);
+}
+.umb-block-grid__layout-item {
+    position: relative;
+    --umb-block-grid__layout-item-calc: calc(var(--umb-block-grid--item-column-span) / var(--umb-block-grid--grid-columns));
+    width: calc(var(--umb-block-grid__layout-item-calc) * 100% - (1 - var(--umb-block-grid__layout-item-calc)) * var(--umb-block-grid--column-gap, 0px));
+}
+
+
+.umb-block-grid__area-container, .umb-block-grid__block--view::part(area-container) {
+    position: relative;
+    display: flex;
+    flex-wrap: wrap;
+    width: 100%;
+    gap: var(--umb-block-grid--areas-row-gap, 0) var(--umb-block-grid--areas-column-gap, 0);
+}
+.umb-block-grid__area {
+    position: relative;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    --umb-block-grid__area-calc: calc(var(--umb-block-grid--area-column-span) / var(--umb-block-grid--area-grid-columns, 1));
+    width: calc(var(--umb-block-grid__area-calc) * 100% - (1 - var(--umb-block-grid__area-calc)) * var(--umb-block-grid--areas-column-gap, 0px));
+}
+
+
+.umb-block-grid__actions {
+    clear: both;
+}

package/dist-cms/assets/css/umbraco-blockgridlayout.css

@@ -0,0 +1,46 @@
+.umb-block-grid__layout-container {
+    position: relative;
+    display: grid;
+    grid-template-columns: repeat(var(--umb-block-grid--grid-columns, 1), minmax(0, 1fr));
+    grid-auto-flow: row;
+    grid-auto-rows: minmax(50px, min-content);
+
+    column-gap: var(--umb-block-grid--column-gap, 0);
+    row-gap: var(--umb-block-grid--row-gap, 0);
+}
+.umb-block-grid__layout-item {
+    position: relative;
+    /* For small devices we scale columnSpan by three, to make everything bigger than 1/3 take full width: */
+    grid-column-end: span min(calc(var(--umb-block-grid--item-column-span, 1) * 3), var(--umb-block-grid--grid-columns));
+    grid-row: span var(--umb-block-grid--item-row-span, 1);
+}
+
+
+.umb-block-grid__area-container, .umb-block-grid__block--view::part(area-container) {
+    position: relative;
+    display: grid;
+    grid-template-columns: repeat(var(--umb-block-grid--area-grid-columns, var(--umb-block-grid--grid-columns, 1)), minmax(0, 1fr));
+    grid-auto-flow: row;
+    grid-auto-rows: minmax(50px, min-content);
+
+    column-gap: var(--umb-block-grid--areas-column-gap, 0);
+    row-gap: var(--umb-block-grid--areas-row-gap, 0);
+}
+.umb-block-grid__area {
+    position: relative;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    /* For small devices we scale columnSpan by three, to make everything bigger than 1/3 take full width: */
+    grid-column-end: span min(calc(var(--umb-block-grid--area-column-span, 1) * 3), var(--umb-block-grid--area-grid-columns));
+    grid-row: span var(--umb-block-grid--area-row-span, 1);
+}
+
+@media (min-width:1024px) {
+    .umb-block-grid__layout-item {
+        grid-column-end: span min(var(--umb-block-grid--item-column-span, 1), var(--umb-block-grid--grid-columns));
+    }
+    .umb-block-grid__area {
+        grid-column-end: span min(var(--umb-block-grid--area-column-span, 1), var(--umb-block-grid--area-grid-columns));
+    }
+}

package/dist-cms/assets/favicon.svg

@@ -1,17 +1 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 25.2.3, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 viewBox="0 0 40 40" style="enable-background:new 0 0 40 40;" xml:space="preserve">
-<style type="text/css">
-	.st0{fill-rule:evenodd;clip-rule:evenodd;fill:#3544B1;}
-	.st1{fill:#3544B1;}
-</style>
-<path class="st1" d="M0,20C0,8.9,9,0,20,0s20,9,20,20s-9,20-20,20C8.9,40,0,31,0,20L0,20z M19.6,26.8c-1.6,0-3.1-0.1-4.6-0.4
-	c-1.1-0.2-2.1-1-2.5-2c-0.5-1-0.7-2.6-0.7-4.8c0-1.1,0.1-2.3,0.2-3.4c0.1-1.1,0.3-2,0.4-2.7l0.1-0.7c0,0,0,0,0-0.1
-	c0-0.2-0.1-0.4-0.3-0.4l-2.6-0.4H9.6c-0.2,0-0.4,0.1-0.4,0.3c0,0.2-0.1,0.3-0.1,0.7c-0.1,0.8-0.3,1.5-0.4,2.6
-	c-0.2,1.2-0.3,2.4-0.3,3.5c-0.1,0.8-0.1,1.6,0,2.5c0.1,2.2,0.4,3.9,1.1,5.2c0.7,1.3,1.9,2.2,3.5,2.8c1.6,0.6,3.9,0.9,6.9,0.8h0.4
-	c2.9,0,5.2-0.3,6.9-0.8c1.6-0.6,2.8-1.5,3.5-2.8c0.7-1.3,1.1-3.1,1.1-5.2c0.1-0.8,0.1-1.6,0-2.5c0-1.2-0.1-2.4-0.3-3.5
-	c-0.1-1.1-0.3-1.8-0.4-2.6c-0.1-0.4-0.1-0.5-0.1-0.7c0-0.2-0.2-0.3-0.4-0.3h-0.1l-2.6,0.4c-0.2,0-0.3,0.2-0.3,0.4c0,0,0,0,0,0.1
-	l0.1,0.7c0.1,0.7,0.3,1.6,0.4,2.7c0.1,1.1,0.2,2.3,0.2,3.4c0,2.2-0.2,3.8-0.7,4.8c-0.5,1-1.4,1.8-2.5,2c-1.5,0.3-3.1,0.5-4.6,0.4
-	L19.6,26.8z"/>
-</svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40"><path fill="#3544b1" d="M0 20C0 8.9 9 0 20 0s20 9 20 20-9 20-20 20C8.9 40 0 31 0 20zm19.6 6.8c-1.6 0-3.1-.1-4.6-.4-1.1-.2-2.1-1-2.5-2-.5-1-.7-2.6-.7-4.8 0-1.1.1-2.3.2-3.4s.3-2 .4-2.7l.1-.7v-.1c0-.2-.1-.4-.3-.4l-2.6-.4c-.2 0-.4.1-.4.3 0 .2-.1.3-.1.7-.1.8-.3 1.5-.4 2.6-.2 1.2-.3 2.4-.3 3.5-.1.8-.1 1.6 0 2.5.1 2.2.4 3.9 1.1 5.2.7 1.3 1.9 2.2 3.5 2.8 1.6.6 3.9.9 6.9.8h.4c2.9 0 5.2-.3 6.9-.8 1.6-.6 2.8-1.5 3.5-2.8.7-1.3 1.1-3.1 1.1-5.2.1-.8.1-1.6 0-2.5 0-1.2-.1-2.4-.3-3.5-.1-1.1-.3-1.8-.4-2.6-.1-.4-.1-.5-.1-.7 0-.2-.2-.3-.4-.3h-.1l-2.6.4c-.2 0-.3.2-.3.4v.1l.1.7c.1.7.3 1.6.4 2.7.1 1.1.2 2.3.2 3.4 0 2.2-.2 3.8-.7 4.8-.5 1-1.4 1.8-2.5 2-1.5.3-3.1.5-4.6.4h-.9z"/></svg>