@umbraco-cms/backoffice 17.0.2 → 17.1.0-rc

package/dist-cms/{apps/preview → packages/preview/context}/preview.context.js

@@ -1,46 +1,52 @@
-import { tryExecute } from '../../packages/core/resources/index.js';
-import { umbConfirmModal } from '../../packages/core/modal/index.js';
-import { DocumentService } from '../../packages/core/backend-api/index.js';
-import { UmbBooleanState, UmbStringState } from '../../libs/observable-api/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';
-import { UMB_SERVER_CONTEXT } from '../../packages/core/server/index.js';
-import { HubConnectionBuilder } from '../../external/signalr/index.js';
-import { UMB_NOTIFICATION_CONTEXT } from '../../packages/core/notification/index.js';
-import { UmbLocalizationController } from '../../libs/localization-api/index.js';
-const UMB_LOCALSTORAGE_SESSION_KEY = 'umb:previewSessions';
+import { UmbPreviewRepository } from '../repository/index.js';
+import { UMB_PREVIEW_CONTEXT } from './preview.context-token.js';
+import { HubConnectionBuilder } from '../../../external/signalr/index.js';
+import { UmbBooleanState, UmbStringState } from '../../../libs/observable-api/index.js';
+import { UmbContextBase } from '../../../libs/class-api/index.js';
+import { UmbLocalizationController } from '../../../libs/localization-api/index.js';
+import { UMB_NOTIFICATION_CONTEXT } from '../../core/notification/index.js';
+import { UMB_SERVER_CONTEXT } from '../../core/server/index.js';
 export class UmbPreviewContext extends UmbContextBase {
-    #unique;
-    #culture;
-    #segment;
-    #serverUrl;
     #connection;
-    #iframeReady;
-    #previewUrl;
-    #documentPreviewRepository;
+    #currentArgs;
     #notificationContext;
+    #resizeController;
+    #serverUrl;
+    #previewRepository;
     #localize;
+    #culture;
+    #iframeReady;
+    #previewUrl;
+    #segment;
+    #unique;
     constructor(host) {
         super(host, UMB_PREVIEW_CONTEXT);
+        this.#currentArgs = {};
         this.#serverUrl = '';
+        this.#previewRepository = new UmbPreviewRepository(this);
+        this.#localize = new UmbLocalizationController(this);
+        this.#culture = new UmbStringState(undefined);
+        this.culture = this.#culture.asObservable();
         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.#localize = new UmbLocalizationController(this);
-        this.#currentArgs = {};
-        this.consumeContext(UMB_SERVER_CONTEXT, (instance) => {
+        this.#segment = new UmbStringState(undefined);
+        this.segment = this.#segment.asObservable();
+        this.#unique = new UmbStringState(undefined);
+        this.unique = this.#unique.asObservable();
+        this.consumeContext(UMB_SERVER_CONTEXT, (serverContext) => {
             const params = new URLSearchParams(window.location.search);
-            this.#unique = params.get('id');
-            this.#culture = params.get('culture');
-            this.#segment = params.get('segment');
-            if (!this.#unique) {
+            if (!params.has('id')) {
                 console.error('No unique ID found in query string.');
                 return;
             }
-            const serverUrl = instance?.getServerUrl();
+            this.#unique.setValue(params.get('id') ?? undefined);
+            this.#culture.setValue(params.get('culture') ?? undefined);
+            this.#segment.setValue(params.get('segment') ?? undefined);
+            this.#currentArgs.culture = this.#culture.getValue();
+            this.#currentArgs.segment = this.#segment.getValue();
+            const serverUrl = serverContext?.getServerUrl();
             if (!serverUrl) {
                 console.error('No server URL found in context');
                 return;
@@ -49,10 +55,20 @@ export class UmbPreviewContext extends UmbContextBase {
             this.#setPreviewUrl({ serverUrl });
             this.#initHubConnection(serverUrl);
         });
-        this.consumeContext(UMB_NOTIFICATION_CONTEXT, (instance) => {
-            this.#notificationContext = instance;
+        this.consumeContext(UMB_NOTIFICATION_CONTEXT, (notificationContext) => {
+            this.#notificationContext = notificationContext;
         });
     }
+    hostDisconnected() {
+        super.hostDisconnected();
+        // Clean up event listeners
+        this.#resizeController?.abort();
+        // Clean up SignalR connection
+        if (this.#connection) {
+            this.#connection.stop();
+            this.#connection = undefined;
+        }
+    }
     async #initHubConnection(serverUrl) {
         const previewHubUrl = `${serverUrl}/umbraco/PreviewHub`;
         // Make sure that no previous connection exists.
@@ -62,7 +78,7 @@ export class UmbPreviewContext extends UmbContextBase {
         }
         this.#connection = new HubConnectionBuilder().withUrl(previewHubUrl).build();
         this.#connection.on('refreshed', (payload) => {
-            if (payload === this.#unique) {
+            if (payload === this.#unique.getValue()) {
                 this.#setPreviewUrl({ rnd: Math.random() });
             }
         });
@@ -88,38 +104,35 @@ export class UmbPreviewContext extends UmbContextBase {
         }
     }
     async #getPublishedUrl() {
-        if (!this.#unique)
+        const unique = this.#unique.getValue();
+        if (!unique)
             return null;
-        // NOTE: We should be reusing `UmbDocumentUrlRepository` here, but the preview app doesn't register the `itemStore` extensions, so can't resolve/consume `UMB_DOCUMENT_URL_STORE_CONTEXT`. [LK]
-        const { data } = await tryExecute(this, DocumentService.getDocumentUrls({ query: { id: [this.#unique] } }));
-        if (!data?.length)
-            return null;
-        const urlInfo = this.#culture ? data[0].urlInfos.find((x) => x.culture === this.#culture) : data[0].urlInfos[0];
+        const culture = this.#culture.getValue();
+        const urlInfo = await this.#previewRepository.getPublishedUrl(unique, culture);
         if (!urlInfo?.url)
             return null;
         return urlInfo.url.startsWith('/') ? `${this.#serverUrl}${urlInfo.url}` : urlInfo.url;
     }
-    #getSessionCount() {
-        return Math.max(Number(localStorage.getItem(UMB_LOCALSTORAGE_SESSION_KEY)), 0) || 0;
-    }
     #setPreviewUrl(args) {
         const host = args?.serverUrl || this.#serverUrl;
-        const unique = args?.unique || this.#unique;
+        const unique = args?.unique || this.#unique.getValue();
         if (!unique) {
             throw new Error('No unique ID found in query string.');
         }
         const url = new URL(unique, host);
         const params = new URLSearchParams(url.search);
-        const culture = args?.culture || this.#culture;
-        const segment = args?.segment || this.#segment;
+        const culture = args && 'culture' in args ? args.culture : this.#culture.getValue();
+        const segment = args && 'segment' in args ? args.segment : this.#segment.getValue();
         const cultureParam = 'culture';
         const rndParam = 'rnd';
         const segmentParam = 'segment';
         if (culture) {
             params.set(cultureParam, culture);
+            this.#culture.setValue(culture);
         }
         else {
             params.delete(cultureParam);
+            this.#culture.setValue(undefined);
         }
         if (args?.rnd) {
             params.set(rndParam, args.rnd.toString());
@@ -129,59 +142,57 @@ export class UmbPreviewContext extends UmbContextBase {
         }
         if (segment) {
             params.set(segmentParam, segment);
+            this.#segment.setValue(segment);
         }
         else {
             params.delete(segmentParam);
+            this.#segment.setValue(undefined);
         }
         const previewUrl = new URL(`${url.pathname}?${params.toString()}`, host);
         const previewUrlString = previewUrl.toString();
         this.#previewUrl.setValue(previewUrlString);
     }
-    #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();
-        }
+    async exitPreview() {
+        await this.#previewRepository.exit();
+        // Stop SignalR connection without waiting - window will close anyway
         if (this.#connection) {
-            await this.#connection.stop();
+            this.#connection.stop();
             this.#connection = undefined;
         }
-        let url = await this.#getPublishedUrl();
-        if (!url) {
-            url = this.#previewUrl.getValue();
-        }
-        window.location.replace(url);
-    }
-    async exitSession() {
-        let sessions = this.#getSessionCount();
-        sessions--;
-        this.exitPreview(sessions);
+        // Close the preview window
+        // This ensures that subsequent "Save and Preview" actions will create a new preview session
+        window.close();
     }
     iframeLoaded(iframe) {
         if (!iframe)
             return;
         this.#iframeReady.setValue(true);
+        this.#setupScaling();
+    }
+    #setupScaling() {
+        // Clean up old event listeners before adding new ones
+        this.#resizeController?.abort();
+        this.#resizeController = new AbortController();
+        const signal = this.#resizeController.signal;
+        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);
+                wrapper.style.transform = `scale(${scale})`;
+            }
+        };
+        // Set up listeners once per iframe load
+        window.addEventListener('resize', scaleIFrame, { signal });
+        wrapper.addEventListener('transitionend', scaleIFrame, { signal });
+        // Initial scale
+        scaleIFrame();
     }
     getIFrameWrapper() {
         return this.getHostElement().shadowRoot?.querySelector('#wrapper');
@@ -199,58 +210,36 @@ export class UmbPreviewContext extends UmbContextBase {
             return;
         document.location.reload();
     }
-    async restartSession() {
-        await this.#documentPreviewRepository.enter();
-        this.startSession();
-    }
-    startSession() {
-        let sessions = this.#getSessionCount();
-        sessions++;
-        this.#setSessionCount(sessions);
-    }
-    #currentArgs;
     async updateIFrame(args) {
         const mergedArgs = { ...this.#currentArgs, ...args };
         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);
-        this.#iframeReady.setValue(false);
+        // Check if URL will change (culture or segment changed)
+        const urlWillChange = (args?.culture !== undefined && mergedArgs.culture !== this.#currentArgs.culture) ||
+            (args?.segment !== undefined && mergedArgs.segment !== this.#currentArgs.segment);
+        // Only show loading spinner if iframe will reload
+        if (urlWillChange) {
+            this.#iframeReady.setValue(false);
+        }
         const params = new URLSearchParams(window.location.search);
+        params.delete('culture');
         if (mergedArgs.culture) {
             params.set('culture', mergedArgs.culture);
         }
-        else {
-            params.delete('culture');
-        }
+        params.delete('segment');
         if (mergedArgs.segment) {
             params.set('segment', mergedArgs.segment);
         }
-        else {
-            params.delete('segment');
-        }
         const newRelativePathQuery = window.location.pathname + '?' + params.toString();
         history.pushState(null, '', newRelativePathQuery);
         this.#currentArgs = mergedArgs;
         this.#setPreviewUrl({ culture: mergedArgs.culture, segment: mergedArgs.segment });
-        if (mergedArgs.className)
-            wrapper.className = mergedArgs.className;
+        if (mergedArgs.wrapperClass)
+            wrapper.className = mergedArgs.wrapperClass;
         if (mergedArgs.height)
             wrapper.style.height = mergedArgs.height;
         if (mergedArgs.width)
             wrapper.style.width = mergedArgs.width;
     }
 }
-export const UMB_PREVIEW_CONTEXT = new UmbContextToken('UmbPreviewContext');

package/dist-cms/packages/preview/index.d.ts

@@ -0,0 +1,2 @@
+export * from './context/index.js';
+export * from './repository/index.js';

package/dist-cms/packages/preview/index.js

@@ -0,0 +1,2 @@
+export * from './context/index.js';
+export * from './repository/index.js';

package/dist-cms/packages/preview/manifests.d.ts

@@ -0,0 +1,2 @@
+import type { UmbExtensionManifestKind } from '../core/extension-registry/index.js';
+export declare const manifests: Array<UmbExtensionManifest | UmbExtensionManifestKind>;

package/dist-cms/packages/preview/manifests.js

@@ -0,0 +1,2 @@
+import { manifests as previewApps } from './preview-apps/manifests.js';
+export const manifests = [...previewApps];

package/dist-cms/packages/preview/package.json

@@ -0,0 +1,8 @@
+{
+    "name": "@umbraco-backoffice/preview",
+    "private": true,
+    "type": "module",
+    "scripts": {
+        "build": "vite build"
+    }
+}

package/dist-cms/packages/preview/preview-apps/manifests.d.ts

@@ -0,0 +1 @@
+export declare const manifests: Array<UmbExtensionManifest>;

package/dist-cms/{apps/preview/apps → packages/preview/preview-apps}/manifests.js

@@ -11,14 +11,21 @@ export const manifests = [
         alias: 'Umb.PreviewApps.Culture',
         name: 'Preview: Culture Switcher',
         element: () => import('./preview-culture.element.js'),
-        weight: 300,
+        weight: 310,
     },
     {
         type: 'previewApp',
         alias: 'Umb.PreviewApps.Segment',
         name: 'Preview: Segment Switcher',
         element: () => import('./preview-segment.element.js'),
-        weight: 290,
+        weight: 300,
+    },
+    {
+        type: 'previewApp',
+        alias: 'Umb.PreviewApps.Environments',
+        name: 'Preview: Environments Menu',
+        element: () => import('./preview-environments.element.js'),
+        weight: 210,
     },
     {
         type: 'previewApp',

package/dist-cms/{apps/preview/apps → packages/preview/preview-apps}/preview-culture.element.d.ts

@@ -1,9 +1,12 @@
 import { nothing } from '../../../external/lit/index.js';
-import { UmbLitElement } from '../../../packages/core/lit-element/index.js';
+import { UmbLitElement } from '../../core/lit-element/index.js';
 export declare class UmbPreviewCultureElement extends UmbLitElement {
     #private;
+    private _popoverElement?;
     private _culture?;
     private _cultures;
+    private _popoverOpen;
+    constructor();
     connectedCallback(): void;
     render(): typeof nothing | import("lit-html").TemplateResult<1>;
     static styles: import("lit").CSSResult[];

package/dist-cms/{apps/preview/apps → packages/preview/preview-apps}/preview-culture.element.js

@@ -4,22 +4,30 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     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 { UMB_PREVIEW_CONTEXT } from '../preview.context.js';
-import { css, customElement, html, nothing, repeat, state } from '../../../external/lit/index.js';
-import { UmbLitElement } from '../../../packages/core/lit-element/index.js';
-import { UmbLanguageCollectionRepository } from '../../../packages/language/index.js';
+import { UMB_PREVIEW_CONTEXT } from '../context/preview.context-token.js';
+import { css, customElement, html, nothing, query, repeat, state } from '../../../external/lit/index.js';
+import { UmbLitElement } from '../../core/lit-element/index.js';
+import { UmbLanguageCollectionRepository } from '../../language/index.js';
 let UmbPreviewCultureElement = class UmbPreviewCultureElement extends UmbLitElement {
+    #languageRepository;
     constructor() {
-        super(...arguments);
+        super();
         this.#languageRepository = new UmbLanguageCollectionRepository(this);
         this._cultures = [];
+        this._popoverOpen = false;
+        this.#onBlur = () => {
+            if (this._popoverOpen) {
+                this._popoverElement?.hidePopover();
+            }
+        };
+        this.addEventListener('blur', this.#onBlur, true); // Use capture phase to catch blur events
     }
-    #languageRepository;
     connectedCallback() {
         super.connectedCallback();
-        this.#getCultures();
+        this.hidden = true;
+        this.#loadCultures();
     }
-    async #getCultures() {
+    async #loadCultures() {
         const { data: langauges } = await this.#languageRepository.requestCollection({ skip: 0, take: 100 });
         this._cultures = langauges?.items ?? [];
         const searchParams = new URLSearchParams(window.location.search);
@@ -27,6 +35,7 @@ let UmbPreviewCultureElement = class UmbPreviewCultureElement extends UmbLitElem
         if (culture && culture !== this._culture?.unique) {
             this._culture = this._cultures.find((c) => c.unique === culture);
         }
+        this.hidden = !this._cultures.length;
     }
     async #onClick(culture) {
         if (this._culture === culture)
@@ -34,7 +43,12 @@ let UmbPreviewCultureElement = class UmbPreviewCultureElement extends UmbLitElem
         this._culture = culture;
         const previewContext = await this.getContext(UMB_PREVIEW_CONTEXT);
         previewContext?.updateIFrame({ culture: culture.unique });
+        this._popoverElement?.hidePopover();
+    }
+    #onPopoverToggle(event) {
+        this._popoverOpen = event.newState === 'open';
     }
+    #onBlur;
     render() {
         if (this._cultures.length <= 1)
             return nothing;
@@ -44,8 +58,9 @@ let UmbPreviewCultureElement = class UmbPreviewCultureElement extends UmbLitElem
 					<uui-icon name="icon-globe"></uui-icon>
 					<span>${this._culture?.name ?? this.localize.term('treeHeaders_languages')}</span>
 				</div>
+				<uui-symbol-expand slot="extra" id="expand-symbol" .open=${this._popoverOpen}></uui-symbol-expand>
 			</uui-button>
-			<uui-popover-container id="cultures-popover" placement="top-end">
+			<uui-popover-container id="cultures-popover" placement="top-end" @toggle=${this.#onPopoverToggle}>
 				<umb-popover-layout>
 					${repeat(this._cultures, (item) => item.unique, (item) => html `
 							<uui-menu-item
@@ -67,12 +82,26 @@ let UmbPreviewCultureElement = class UmbPreviewCultureElement extends UmbLitElem
 				--uui-button-font-weight: 400;
 				--uui-button-padding-left-factor: 3;
 				--uui-button-padding-right-factor: 3;
+				--uui-menu-item-flat-structure: 1;
+			}
+
+			:host([hidden]) {
+				display: none;
+			}
+
+			#expand-symbol {
+				transform: rotate(-90deg);
+				margin-left: var(--uui-size-space-3, 9px);
+
+				&[open] {
+					transform: rotate(0deg);
+				}
 			}
 
 			uui-button > div {
 				display: flex;
 				align-items: center;
-				gap: 5px;
+				gap: var(--uui-size-2, 6px);
 			}
 
 			umb-popover-layout {
@@ -83,12 +112,18 @@ let UmbPreviewCultureElement = class UmbPreviewCultureElement extends UmbLitElem
 		`,
     ]; }
 };
+__decorate([
+    query('#cultures-popover')
+], UmbPreviewCultureElement.prototype, "_popoverElement", void 0);
 __decorate([
     state()
 ], UmbPreviewCultureElement.prototype, "_culture", void 0);
 __decorate([
     state()
 ], UmbPreviewCultureElement.prototype, "_cultures", void 0);
+__decorate([
+    state()
+], UmbPreviewCultureElement.prototype, "_popoverOpen", void 0);
 UmbPreviewCultureElement = __decorate([
     customElement('umb-preview-culture')
 ], UmbPreviewCultureElement);

package/dist-cms/{apps/preview/apps → packages/preview/preview-apps}/preview-device.element.d.ts

@@ -1,9 +1,9 @@
-import { UmbLitElement } from '../../../packages/core/lit-element/index.js';
+import { UmbLitElement } from '../../core/lit-element/index.js';
 export interface UmbPreviewDevice {
     alias: string;
     label: string;
-    css: string;
     icon: string;
+    iconClass?: string;
     dimensions: {
         height: string;
         width: string;
@@ -11,7 +11,10 @@ export interface UmbPreviewDevice {
 }
 export declare class UmbPreviewDeviceElement extends UmbLitElement {
     #private;
+    private _popoverElement?;
     device: UmbPreviewDevice;
+    private _popoverOpen;
+    constructor();
     connectedCallback(): void;
     render(): import("lit-html").TemplateResult<1>;
     static styles: import("lit").CSSResult[];