yv01p/Umbraco-CMS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Exit PreviewMode when all Preview Session are closed + translation

Browse Source
This commit is contained in:
Niels Lyngsø
2020-10-09 16:05:53 +02:00
parent 6009acdfbf
commit 20f2917a0c
6 changed files with 160 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
src/Umbraco.Web.UI.Client/src/preview/preview.controller.js
View File

@@ -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 = `<div class="umbraco-preview-dialog__headline">Preview content?</div>
<div class="umbraco-preview-dialog__question">You have ended preview mode, do you want to continue previewing this content?</div>`;
modal.innerHTML = `<div class="umbraco-preview-dialog__headline">${$window.umbLocalizedVars.returnToPreviewHeadline}</div>
<div class="umbraco-preview-dialog__question">${$window.umbLocalizedVars.returnToPreviewDescription}</div>`;
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);

67
src/Umbraco.Web.UI.Client/src/websitepreview/websitepreview.js
View File

@@ -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 = `<div class="umbraco-preview-dialog__headline">View published version?</div>
<div class="umbraco-preview-dialog__question">You are in Preview Mode, do you want exit in order to view the published version of your website?</div>`;
modal.innerHTML = `<div class="umbraco-preview-dialog__headline">${jsonLocalization.preview.viewPublishedContentHeadline}</div>
<div class="umbraco-preview-dialog__question">${jsonLocalization.preview.viewPublishedContentDescription}</div>`;
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();
}
})();

22
src/Umbraco.Web.UI/Umbraco/Views/Preview/Index.cshtml
View File

@@ -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<Umbraco.Web.Editors.BackOfficePreviewModel>
@{
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");
}
<!DOCTYPE html>
<html lang="en">
@@ -22,6 +35,13 @@
@Html.RenderCssHere(
new BasicPath("Umbraco", IOHelper.ResolveUrl(SystemDirectories.Umbraco)))
<script type="text/javascript">
window.umbLocalizedVars = {
'returnToPreviewHeadline': '@returnToPreviewHeadline',
'returnToPreviewDescription':'@returnToPreviewDescription',
'returnToPreviewButton':'@returnToPreviewButton'
};
</script>
</head>
<body id="canvasdesignerPanel" ng-mouseover="outlinePositionHide()" ng-controller="previewController" ng-class="{'tabbing-active': tabbingActive === true}" ng-click="windowClickHandler($event)">
<div class="wait" ng-show="!frameLoaded"></div>
@@ -68,7 +88,7 @@
<button ng-click="openInBrowser()" title="Open preview in the browser" class="menu-bar__button umb-outline"><i class="icon icon-out"></i><span>Open in browser</span>
</button>
<button ng-click="exitPreview()" title="End Preview" class="menu-bar__button umb-outline"><i class="icon icon-power"></i><span>End</span>
<button ng-click="exitPreview()" title="@EndTitle" class="menu-bar__button umb-outline"><i class="icon icon-power"></i><span>@EndLabel</span>
</button>
</div>

14
src/Umbraco.Web.UI/Umbraco/config/lang/da.xml
View File

@@ -1864,5 +1864,17 @@ Mange hilsner fra Umbraco robotten
<key alias="elementTypeDoesNotExistHeadline">Error!</key>
<key alias="elementTypeDoesNotExistDescription">The ElementType of this block does not exist anymore</key>
</area>
<area alias="preview">
<key alias="endLabel">Afslut</key>
<key alias="endTitle">Afslut forhåndsvisning</key>
<key alias="openWebsiteLabel">Vis i nyt vindue</key>
<key alias="openWebsiteTitle">Åben forhåndsvisning i nyt vindue</key>
<key alias="returnToPreviewHeadline">Forhåndsvisning af indholdet?</key>
<key alias="returnToPreviewDescription">Du har afslutet forhåndsvisning, vil du se dette indhold i forhåndsvisning?</key>
<key alias="returnToPreviewButton">Fortsæt</key>
<key alias="viewPublishedContentHeadline">Se udgivet indhold?</key>
<key alias="viewPublishedContentDescription">Du er i forhåndsvisning, vil du afslutte for at se den udgivet version?</key>
<key alias="viewPublishedContentAcceptButton">Se udgivet version</key>
<key alias="viewPublishedContentDeclineButton">Forbliv i forhåndsvisning</key>
</area>
</language>

15
src/Umbraco.Web.UI/Umbraco/config/lang/en.xml
View File

@@ -515,7 +515,7 @@
<key alias="selectSnippet">Select snippet</key>
<key alias="variantdeletewarning">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.</key>
<key alias="propertyuserpickerremovewarning"><![CDATA[This will remove the user <b>%0%</b>.]]></key>
<key alias="userremovewarning"><![CDATA[This will remove the user <b>%0%</b> from the <b>%1%</b> group]]></key>
<key alias="userremovewarning"><![CDATA[This will remove the user <b>%0%</b> from the <b>%1%</b> group]]></key>
<key alias="yesRemove">Yes, remove</key>
</area>
<area alias="dictionary">
@@ -2511,4 +2511,17 @@ To manage your website, simply open the Umbraco back office and start adding con
<key alias="manageHeadline">How do I manage Content Templates?</key>
<key alias="manageDescription">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.</key>
</area>
<area alias="preview">
<key alias="endLabel">End</key>
<key alias="endTitle">End preview mode</key>
<key alias="openWebsiteLabel">Preview website</key>
<key alias="openWebsiteTitle">Open website in preview mode</key>
<key alias="returnToPreviewHeadline">Preview content?</key>
<key alias="returnToPreviewDescription">You have ended preview mode, do you want to continue previewing this content?</key>
<key alias="returnToPreviewButton">Preview</key>
<key alias="viewPublishedContentHeadline">View published version?</key>
<key alias="viewPublishedContentDescription">You are in Preview Mode, do you want exit in order to view the published version of your website?</key>
<key alias="viewPublishedContentAcceptButton">View published version</key>
<key alias="viewPublishedContentDeclineButton">Stay in preview mode</key>
</area>
</language>

13
src/Umbraco.Web.UI/Umbraco/config/lang/en_us.xml
View File

@@ -2533,4 +2533,17 @@ To manage your website, simply open the Umbraco back office and start adding con
<key alias="manageHeadline">How do I manage Content Templates?</key>
<key alias="manageDescription">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.</key>
</area>
<area alias="preview">
<key alias="endLabel">End</key>
<key alias="endTitle">End preview mode</key>
<key alias="openWebsiteLabel">Preview website</key>
<key alias="openWebsiteTitle">Open website in preview mode</key>
<key alias="returnToPreviewHeadline">Preview content?</key>
<key alias="returnToPreviewDescription">You have ended preview mode, do you want to continue previewing this content?</key>
<key alias="returnToPreviewButton">Preview</key>
<key alias="viewPublishedContentHeadline">View published version?</key>
<key alias="viewPublishedContentDescription">You are in Preview Mode, do you want exit in order to view the published version of your website?</key>
<key alias="viewPublishedContentAcceptButton">View published version</key>
<key alias="viewPublishedContentDeclineButton">Stay in preview mode</key>
</area>
</language>