From 20f2917a0c1910b1d70cbbd2b96c06f38528cd3c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= Date: Fri, 9 Oct 2020 16:05:53 +0200 Subject: [PATCH] Exit PreviewMode when all Preview Session are closed + translation --- .../src/preview/preview.controller.js | 44 ++++++++++-- .../src/websitepreview/websitepreview.js | 67 ++++++++++++++++--- .../Umbraco/Views/Preview/Index.cshtml | 22 +++++- src/Umbraco.Web.UI/Umbraco/config/lang/da.xml | 14 +++- src/Umbraco.Web.UI/Umbraco/config/lang/en.xml | 15 ++++- .../Umbraco/config/lang/en_us.xml | 13 ++++ 6 files changed, 160 insertions(+), 15 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/preview/preview.controller.js b/src/Umbraco.Web.UI.Client/src/preview/preview.controller.js index 056ade090e..7a005298c1 100644 --- a/src/Umbraco.Web.UI.Client/src/preview/preview.controller.js +++ b/src/Umbraco.Web.UI.Client/src/preview/preview.controller.js @@ -144,6 +144,10 @@ var app = angular.module("umbraco.preview", ['umbraco.resources', 'umbraco.servi window.addEventListener("blur", windowBlurHandler); function windowVisibilityHandler(e) { + + var amountOfPreviewSessions = localStorage.getItem('UmbPreviewSessionAmount'); + console.log("windowVisibilityHandler", amountOfPreviewSessions) + // When tab is visible again: if(document.hidden === false) { checkPreviewState(); @@ -151,9 +155,15 @@ var app = angular.module("umbraco.preview", ['umbraco.resources', 'umbraco.servi } document.addEventListener("visibilitychange", windowVisibilityHandler); + function beforeUnloadHandler(e) { + endPreviewSession(); + } + window.addEventListener("beforeunload", beforeUnloadHandler, false); + $scope.$on("$destroy", function () { window.removeEventListener("blur", windowBlurHandler); - window.removeEventListener("visibilitychange", windowVisibilityHandler); + document.removeEventListener("visibilitychange", windowVisibilityHandler); + window.removeEventListener("beforeunload", beforeUnloadHandler); }); @@ -291,14 +301,14 @@ var app = angular.module("umbraco.preview", ['umbraco.resources', 'umbraco.servi var modal = document.createElement("div"); modal.className = "umbraco-preview-dialog__modal"; - modal.innerHTML = `
Preview content?
-
You have ended preview mode, do you want to continue previewing this content?
`; + modal.innerHTML = `
${$window.umbLocalizedVars.returnToPreviewHeadline}
+
${$window.umbLocalizedVars.returnToPreviewDescription}
`; con.appendChild(modal); var continueButton = document.createElement("button"); continueButton.type = "button"; continueButton.className = "umbraco-preview-dialog__continue"; - continueButton.innerHTML = "Preview content"; + continueButton.innerHTML = $window.umbLocalizedVars.returnToPreviewButton; continueButton.addEventListener("click", () => { bodyEl.removeChild(fragment); reenterPreviewMode(); @@ -320,6 +330,7 @@ var app = angular.module("umbraco.preview", ['umbraco.resources', 'umbraco.servi id: $scope.pageId } }) + startPreviewSession(); } function getPageURL() { var culture = $location.search().culture || getParameterByName("culture"); @@ -330,6 +341,29 @@ var app = angular.module("umbraco.preview", ['umbraco.resources', 'umbraco.servi return relativeUrl; } + function startPreviewSession() { + // lets registrer this preview session. + var amountOfPreviewSessions = Math.max(localStorage.getItem('UmbPreviewSessionAmount') || 0, 0); + amountOfPreviewSessions++; + localStorage.setItem('UmbPreviewSessionAmount', amountOfPreviewSessions); + console.log("UmbPreviewSessionAmount", amountOfPreviewSessions) + } + function resetPreviewSessions() { + localStorage.setItem('UmbPreviewSessionAmount', 0); + } + function endPreviewSession() { + var amountOfPreviewSessions = localStorage.getItem('UmbPreviewSessionAmount') || 0; + amountOfPreviewSessions--; + localStorage.setItem('UmbPreviewSessionAmount', amountOfPreviewSessions); + console.log("ENDDDD", amountOfPreviewSessions) + + if(amountOfPreviewSessions <= 0) { + // We are good to secretly end preview mode. + navigator.sendBeacon("../preview/end"); + } + } + startPreviewSession(); + /*****************************************************************************/ /* Preview devices */ /*****************************************************************************/ @@ -353,10 +387,12 @@ var app = angular.module("umbraco.preview", ['umbraco.resources', 'umbraco.servi /*****************************************************************************/ $scope.exitPreview = function () { + resetPreviewSessions(); window.top.location.href = "../preview/end?redir=" + encodeURIComponent(getPageURL()); }; $scope.onFrameLoaded = function (iframe) { + $scope.frameLoaded = true; configureSignalR(iframe); diff --git a/src/Umbraco.Web.UI.Client/src/websitepreview/websitepreview.js b/src/Umbraco.Web.UI.Client/src/websitepreview/websitepreview.js index 43fd152e61..fed177fd7b 100644 --- a/src/Umbraco.Web.UI.Client/src/websitepreview/websitepreview.js +++ b/src/Umbraco.Web.UI.Client/src/websitepreview/websitepreview.js @@ -5,6 +5,7 @@ (function() { + if ( window.location !== window.parent.location ) { //we are in an iFrame, so lets skip the dialog. return; @@ -33,7 +34,37 @@ return null; } - function exitPreviewMode() { + + function beforeUnloadHandler(e) { + endPreviewSession(); + } + window.addEventListener("beforeunload", beforeUnloadHandler, false); + + function startPreviewSession() { + // lets registrer this preview session. + var amountOfPreviewSessions = Math.max(localStorage.getItem('UmbPreviewSessionAmount') || 0, 0); + amountOfPreviewSessions++; + localStorage.setItem('UmbPreviewSessionAmount', amountOfPreviewSessions); + console.log("UmbPreviewSessionAmount", amountOfPreviewSessions) + } + function resetPreviewSessions() { + localStorage.setItem('UmbPreviewSessionAmount', 0); + } + function endPreviewSession() { + var amountOfPreviewSessions = localStorage.getItem('UmbPreviewSessionAmount') || 0; + amountOfPreviewSessions--; + localStorage.setItem('UmbPreviewSessionAmount', amountOfPreviewSessions); + console.log("ENDDDD", amountOfPreviewSessions) + + if(amountOfPreviewSessions <= 0) { + // We are good to secretly end preview mode. + navigator.sendBeacon(scriptElement.getAttribute("data-umbraco-path")+"/preview/end"); + } + } + startPreviewSession(); + + function endPreviewMode() { + resetPreviewSessions(); window.top.location.href = scriptElement.getAttribute("data-umbraco-path")+"/preview/end?redir=" + encodeURIComponent(window.location.pathname+window.location.search); } function continuePreviewMode(minutsToExpire) { @@ -42,6 +73,28 @@ var user = getCookie("UMB-WEBSITE-PREVIEW-ACCEPT"); if (user != "true") { + askToViewPublishedVersion(); + } else { + continuePreviewMode(); + } + + function askToViewPublishedVersion() { + + scriptElement.getAttribute("data-umbraco-path"); + + const request = new XMLHttpRequest(); + request.open("GET", scriptElement.getAttribute("data-umbraco-path") + "/LocalizedText"); + request.send(); + + request.onreadystatechange = (e) => { + if (request.readyState == 4 && request.status == 200) { + const jsonLocalization = JSON.parse(request.responseText); + createAskUserAboutVersionDialog(jsonLocalization); + } + } + + } + function createAskUserAboutVersionDialog(jsonLocalization) { // This modal is also used in preview.js var modelStyles = ` @@ -137,20 +190,20 @@ var modal = document.createElement("div"); modal.className = "umbraco-preview-dialog__modal"; - modal.innerHTML = `
View published version?
-
You are in Preview Mode, do you want exit in order to view the published version of your website?
`; + modal.innerHTML = `
${jsonLocalization.preview.viewPublishedContentHeadline}
+
${jsonLocalization.preview.viewPublishedContentDescription}
`; con.appendChild(modal); var continueButton = document.createElement("button"); continueButton.type = "button"; continueButton.className = "umbraco-preview-dialog__continue"; - continueButton.innerHTML = "View published version"; - continueButton.addEventListener("click", exitPreviewMode); + continueButton.innerHTML = jsonLocalization.preview.viewPublishedContentAcceptButton; + continueButton.addEventListener("click", endPreviewMode); modal.appendChild(continueButton); var exitButton = document.createElement("button"); exitButton.type = "button"; - exitButton.innerHTML = "Stay in preview mode"; + exitButton.innerHTML = jsonLocalization.preview.viewPublishedContentDeclineButton; exitButton.addEventListener("click", function() { bodyEl.removeChild(fragment); continuePreviewMode(5); @@ -159,8 +212,6 @@ bodyEl.appendChild(fragment); continueButton.focus(); - } else { - continuePreviewMode(); } })(); diff --git a/src/Umbraco.Web.UI/Umbraco/Views/Preview/Index.cshtml b/src/Umbraco.Web.UI/Umbraco/Views/Preview/Index.cshtml index 912470eb65..c3365f06fc 100644 --- a/src/Umbraco.Web.UI/Umbraco/Views/Preview/Index.cshtml +++ b/src/Umbraco.Web.UI/Umbraco/Views/Preview/Index.cshtml @@ -4,12 +4,25 @@ @using Umbraco.Core.IO @using Umbraco.Web @using Umbraco.Core.Configuration +@using Umbraco.Core.Composing +@using Umbraco.Core.Services @inherits System.Web.Mvc.WebViewPage @{ var disableDevicePreview = Model.DisableDevicePreview.ToString().ToLowerInvariant(); Html.RequiresCss("assets/css/canvasdesigner.css", "Umbraco"); + + // See if we can get without using Current + var textService = Current.Services.TextService; + + var EndLabel = textService.Localize("preview", "endLabel"); + var EndTitle = textService.Localize("preview", "endTitle"); + var OpenWebsiteLabel = textService.Localize("preview", "openWebsiteLabel"); + var OpenWebsiteTitle = textService.Localize("preview", "openWebsiteTitle"); + var returnToPreviewHeadline = textService.Localize("preview", "returnToPreviewHeadline"); + var returnToPreviewDescription = textService.Localize("preview", "returnToPreviewDescription"); + var returnToPreviewButton = textService.Localize("preview", "returnToPreviewButton"); } @@ -22,6 +35,13 @@ @Html.RenderCssHere( new BasicPath("Umbraco", IOHelper.ResolveUrl(SystemDirectories.Umbraco))) +
@@ -68,7 +88,7 @@ - diff --git a/src/Umbraco.Web.UI/Umbraco/config/lang/da.xml b/src/Umbraco.Web.UI/Umbraco/config/lang/da.xml index 597afadac4..cc728e3640 100644 --- a/src/Umbraco.Web.UI/Umbraco/config/lang/da.xml +++ b/src/Umbraco.Web.UI/Umbraco/config/lang/da.xml @@ -1864,5 +1864,17 @@ Mange hilsner fra Umbraco robotten Error! The ElementType of this block does not exist anymore - + + Afslut + Afslut forhåndsvisning + Vis i nyt vindue + Åben forhåndsvisning i nyt vindue + Forhåndsvisning af indholdet? + Du har afslutet forhåndsvisning, vil du se dette indhold i forhåndsvisning? + Fortsæt + Se udgivet indhold? + Du er i forhåndsvisning, vil du afslutte for at se den udgivet version? + Se udgivet version + Forbliv i forhåndsvisning + diff --git a/src/Umbraco.Web.UI/Umbraco/config/lang/en.xml b/src/Umbraco.Web.UI/Umbraco/config/lang/en.xml index db2e707b4d..3cacea1674 100644 --- a/src/Umbraco.Web.UI/Umbraco/config/lang/en.xml +++ b/src/Umbraco.Web.UI/Umbraco/config/lang/en.xml @@ -515,7 +515,7 @@ Select snippet This will delete the node and all its languages. If you only want to delete one language, you should unpublish the node in that language instead. %0%.]]> - %0% from the %1% group]]> + %0% from the %1% group]]> Yes, remove @@ -2511,4 +2511,17 @@ To manage your website, simply open the Umbraco back office and start adding con How do I manage Content Templates? You can edit and delete Content Templates from the "Content Templates" tree in the Settings section. Expand the Document Type which the Content Template is based on and click it to edit or delete it. + + End + End preview mode + Preview website + Open website in preview mode + Preview content? + You have ended preview mode, do you want to continue previewing this content? + Preview + View published version? + You are in Preview Mode, do you want exit in order to view the published version of your website? + View published version + Stay in preview mode + diff --git a/src/Umbraco.Web.UI/Umbraco/config/lang/en_us.xml b/src/Umbraco.Web.UI/Umbraco/config/lang/en_us.xml index e88b4fc007..b86424a68d 100644 --- a/src/Umbraco.Web.UI/Umbraco/config/lang/en_us.xml +++ b/src/Umbraco.Web.UI/Umbraco/config/lang/en_us.xml @@ -2533,4 +2533,17 @@ To manage your website, simply open the Umbraco back office and start adding con How do I manage Content Templates? You can edit and delete Content Templates from the "Content Templates" tree in the Settings section. Expand the Document Type which the Content Template is based on and click it to edit or delete it. + + End + End preview mode + Preview website + Open website in preview mode + Preview content? + You have ended preview mode, do you want to continue previewing this content? + Preview + View published version? + You are in Preview Mode, do you want exit in order to view the published version of your website? + View published version + Stay in preview mode +