From a7db1588947ecc1518c28d8988733d469f9d115a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= Date: Fri, 2 Oct 2020 16:12:24 +0200 Subject: [PATCH 01/53] ask user wether they like to stay in preview mode --- src/Umbraco.Web.UI.Client/gulp/config.js | 3 +- .../src/websitepreview/websitepreview.js | 146 +++++ .../config/umbracoSettings.config | 533 +++++++++--------- 3 files changed, 415 insertions(+), 267 deletions(-) create mode 100644 src/Umbraco.Web.UI.Client/src/websitepreview/websitepreview.js diff --git a/src/Umbraco.Web.UI.Client/gulp/config.js b/src/Umbraco.Web.UI.Client/gulp/config.js index 3c32832ba0..9eb335a62c 100755 --- a/src/Umbraco.Web.UI.Client/gulp/config.js +++ b/src/Umbraco.Web.UI.Client/gulp/config.js @@ -30,6 +30,7 @@ module.exports = { // js files for backoffice // processed in the js task js: { + websitepreview: { files: "./src/websitepreview/**/*.js", out: "umbraco.websitepreview.js" }, preview: { files: "./src/preview/**/*.js", out: "umbraco.preview.js" }, installer: { files: "./src/installer/**/*.js", out: "umbraco.installer.js" }, filters: { files: "./src/common/filters/**/*.js", out: "umbraco.filters.js" }, @@ -56,7 +57,7 @@ module.exports = { ], out: "umbraco.directives.js" } - + }, //selectors for copying all views into the build diff --git a/src/Umbraco.Web.UI.Client/src/websitepreview/websitepreview.js b/src/Umbraco.Web.UI.Client/src/websitepreview/websitepreview.js new file mode 100644 index 0000000000..203748e96e --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/websitepreview/websitepreview.js @@ -0,0 +1,146 @@ + +/*********************************************************************************************************/ +/* website preview controller */ +/*********************************************************************************************************/ + +(function() { + + if ( window.location !== window.parent.location ) { + //we are in an iFrame, so lets skip the dialog. + return; + } + + function setCookie(cname, cvalue, exminutes) { + var d = new Date(); + d.setTime(d.getTime() + (exminutes * 60 * 1000)); + document.cookie = cname + "=" + cvalue + ";expires="+d.toUTCString() + ";path=/"; + } + + function getCookie(cname) { + var name = cname + "="; + var ca = document.cookie.split(';'); + for(var i = 0; i < ca.length; i++) { + var c = ca[i]; + while (c.charAt(0) == ' ') { + c = c.substring(1); + } + if (c.indexOf(name) == 0) { + return c.substring(name.length, c.length); + } + } + return ""; + } + + function exitPreviewMode() { + window.top.location.href = "../preview/end?redir=" + encodeURIComponent(window.location.pathname+window.location.search); + } + function continuePreviewMode() { + setCookie("UMB-WEBSITE-PREVIEW-ACCEPT", "true", 1); + } + + var user = getCookie("UMB-WEBSITE-PREVIEW-ACCEPT"); + if (user != "true") { + + var modelStyles = ` + .umbraco-preview-dialog { + position: fixed; + display: flex; + align-items: center; + justify-content: center; + z-index: 99999999; + top:0; + bottom:0; + left:0; + right:0; + overflow: auto; + background-color: rgba(0,0,0,0.6); + } + + .umbraco-preview-dialog__modal { + background-color: #fff; + border-radius: 6px; + box-shadow: 0 3px 7px rgba(0,0,0,0.3); + margin: auto; + padding: 30px 40px; + width: 100%; + max-width: 540px; + font-family: Lato,Helvetica Neue,Helvetica,Arial,sans-serif; + font-size: 15px; + } + + .umbraco-preview-dialog__headline { + font-weight: 700; + font-size: 22px; + color: #1b264f; + margin-top:10px; + margin-bottom:10px; + } + .umbraco-preview-dialog__question { + margin-bottom:30px; + } + .umbraco-preview-dialog__modal > button { + display: inline-block; + padding: 8px 18px; + text-align: center; + vertical-align: middle; + border-radius: 3px; + border:none; + font-weight: 700; + float:right; + margin-left:10px; + + color: #1b264f; + background-color: #f6f1ef; + } + .umbraco-preview-dialog__modal > button:hover { + color: #2152a3; + background-color: #f6f1ef; + } + .umbraco-preview-dialog__modal > button.umbraco-preview-dialog__continue { + color: #fff; + background-color: #2bc37c; + } + .umbraco-preview-dialog__modal > button.umbraco-preview-dialog__continue:hover { + background-color: #39d38b; + } + `; + + var fragment = document.createDocumentFragment(); + + var con = document.createElement("style"); + con.innerHTML = modelStyles; + fragment.appendChild(con); + + var con = document.createElement("div"); + con.className = "umbraco-preview-dialog"; + + + var model = document.createElement("div"); + model.className = "umbraco-preview-dialog"; + model.innerHTML = `
Preview mode
+
Do you want to continue viewing latest saved version?
`; + + var continueButton = document.createElement("button"); + continueButton.type = "button"; + continueButton.innerHTML = "Continue"; + model.appendChild(continueButton); + + continueButton.addEventListener("click", continuePreviewMode); + + var exitButton = document.createElement("button"); + exitButton.type = "button"; + exitButton.className = "umbraco-preview-dialog__continue"; + exitButton.innerHTML = "Exit preview mode"; + model.appendChild(exitButton); + + continueButton.addEventListener("click", exitPreviewMode); + + fragment.appendChild(con); + + document.getElementsByTagName("BODY")[0].appendChild(fragment); + } else { + continuePreviewMode(); + console.log("already set"); + } + +})(); diff --git a/src/Umbraco.Web.UI/config/umbracoSettings.config b/src/Umbraco.Web.UI/config/umbracoSettings.config index d723b9c7c0..43f239444f 100644 --- a/src/Umbraco.Web.UI/config/umbracoSettings.config +++ b/src/Umbraco.Web.UI/config/umbracoSettings.config @@ -1,266 +1,267 @@ - - - - - - - - - - - - - 1 - - - - - - - - your@email.here - - - - - - Preview mode - - … - - - Click to end - - - - ]]> - - - - throw - - - ashx,aspx,ascx,config,cshtml,vbhtml,asmx,air,axd,swf,xml,xhtml,html,htm,php,htaccess - - - assets/img/login.jpg - - - - - - false - - true - - false - - - - - - - - - - - - - - + + + + + + + + + + + + + 1 + + + + + + + + your@email.here + + + + + + Preview mode + + … + + + Click to end + + + + + ]]> + + + + throw + + + ashx,aspx,ascx,config,cshtml,vbhtml,asmx,air,axd,swf,xml,xhtml,html,htm,php,htaccess + + + assets/img/login.jpg + + + + + + false + + true + + false + + + + + + + + + + + + + + From f20e322ff5adb454b71c830784e43b739ca6d343 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= Date: Fri, 2 Oct 2020 20:46:54 +0200 Subject: [PATCH 02/53] apply functionality to modal. --- .../src/websitepreview/websitepreview.js | 53 ++++++++++--------- .../config/umbracoSettings.config | 2 +- 2 files changed, 30 insertions(+), 25 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/websitepreview/websitepreview.js b/src/Umbraco.Web.UI.Client/src/websitepreview/websitepreview.js index 203748e96e..be5c989f68 100644 --- a/src/Umbraco.Web.UI.Client/src/websitepreview/websitepreview.js +++ b/src/Umbraco.Web.UI.Client/src/websitepreview/websitepreview.js @@ -10,6 +10,8 @@ return; } + const scriptElement = document.currentScript; + function setCookie(cname, cvalue, exminutes) { var d = new Date(); d.setTime(d.getTime() + (exminutes * 60 * 1000)); @@ -18,24 +20,24 @@ function getCookie(cname) { var name = cname + "="; - var ca = document.cookie.split(';'); + var ca = document.cookie.split(";"); for(var i = 0; i < ca.length; i++) { var c = ca[i]; - while (c.charAt(0) == ' ') { - c = c.substring(1); + while (c.charAt(0) == " ") { + c = c.substring(1); } if (c.indexOf(name) == 0) { - return c.substring(name.length, c.length); + return c.substring(name.length, c.length); } } return ""; } function exitPreviewMode() { - window.top.location.href = "../preview/end?redir=" + encodeURIComponent(window.location.pathname+window.location.search); + window.top.location.href = scriptElement.getAttribute("data-umbraco-path")+"/preview/end?redir=" + encodeURIComponent(window.location.pathname+window.location.search); } function continuePreviewMode() { - setCookie("UMB-WEBSITE-PREVIEW-ACCEPT", "true", 1); + setCookie("UMB-WEBSITE-PREVIEW-ACCEPT", "true", 5); } var user = getCookie("UMB-WEBSITE-PREVIEW-ACCEPT"); @@ -105,42 +107,45 @@ } `; + var bodyEl = document.getElementsByTagName("BODY")[0]; + var fragment = document.createDocumentFragment(); - var con = document.createElement("style"); - con.innerHTML = modelStyles; - fragment.appendChild(con); + var style = document.createElement("style"); + style.innerHTML = modelStyles; + fragment.appendChild(style); var con = document.createElement("div"); con.className = "umbraco-preview-dialog"; + fragment.appendChild(con); - - var model = document.createElement("div"); - model.className = "umbraco-preview-dialog"; - model.innerHTML = `
Preview mode
+ var modal = document.createElement("div"); + modal.className = "umbraco-preview-dialog__modal"; + modal.innerHTML = `
Preview mode
Do you want to continue viewing latest saved version?
`; + con.appendChild(modal); var continueButton = document.createElement("button"); continueButton.type = "button"; + continueButton.className = "umbraco-preview-dialog__continue"; continueButton.innerHTML = "Continue"; - model.appendChild(continueButton); - - continueButton.addEventListener("click", continuePreviewMode); + continueButton.addEventListener("click", function() { + bodyEl.removeChild(style); + bodyEl.removeChild(con); + continuePreviewMode(); + }); + modal.appendChild(continueButton); var exitButton = document.createElement("button"); exitButton.type = "button"; - exitButton.className = "umbraco-preview-dialog__continue"; exitButton.innerHTML = "Exit preview mode"; - model.appendChild(exitButton); + exitButton.addEventListener("click", exitPreviewMode); + modal.appendChild(exitButton); - continueButton.addEventListener("click", exitPreviewMode); - - fragment.appendChild(con); - - document.getElementsByTagName("BODY")[0].appendChild(fragment); + bodyEl.appendChild(fragment); + continueButton.focus(); } else { continuePreviewMode(); - console.log("already set"); } })(); diff --git a/src/Umbraco.Web.UI/config/umbracoSettings.config b/src/Umbraco.Web.UI/config/umbracoSettings.config index 43f239444f..2287464d07 100644 --- a/src/Umbraco.Web.UI/config/umbracoSettings.config +++ b/src/Umbraco.Web.UI/config/umbracoSettings.config @@ -170,7 +170,7 @@ width:1em; }} - + ]]> From dc072293f9233bcab690b69d80ec02a919748856 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= Date: Thu, 8 Oct 2020 16:36:25 +0200 Subject: [PATCH 03/53] New dialogs for asking about Preview mode --- src/Umbraco.Core/Constants-Web.cs | 4 + .../src/preview/preview.controller.js | 205 ++++++++++++++++-- .../src/websitepreview/websitepreview.js | 49 +++-- .../Umbraco/Views/Preview/Index.cshtml | 3 + .../config/umbracoSettings.config | 2 +- src/Umbraco.Web/Editors/PreviewController.cs | 17 +- 6 files changed, 240 insertions(+), 40 deletions(-) diff --git a/src/Umbraco.Core/Constants-Web.cs b/src/Umbraco.Core/Constants-Web.cs index 64216ba571..0e956cfd6a 100644 --- a/src/Umbraco.Core/Constants-Web.cs +++ b/src/Umbraco.Core/Constants-Web.cs @@ -17,6 +17,10 @@ /// The preview cookie name /// public const string PreviewCookieName = "UMB_PREVIEW"; + /// + /// Client-side cookie that determins wether the user has accepted to be in Preview Mode when visiting the website. + /// + public const string AcceptPreviewCookieName = "UMB-WEBSITE-PREVIEW-ACCEPT"; public const string InstallerCookieName = "umb_installId"; } 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 5ff8dd3633..412d0c9cc5 100644 --- a/src/Umbraco.Web.UI.Client/src/preview/preview.controller.js +++ b/src/Umbraco.Web.UI.Client/src/preview/preview.controller.js @@ -5,13 +5,13 @@ var app = angular.module("umbraco.preview", ['umbraco.resources', 'umbraco.services']) - .controller("previewController", function ($scope, $window, $location) { + .controller("previewController", function ($scope, $window, $location, $http) { $scope.currentCulture = { iso: '', title: '...', icon: 'icon-loading' } var cultures = []; $scope.tabbingActive = false; - // There are a number of ways to detect when a focus state should be shown when using the tab key and this seems to be the simplest solution. + // There are a number of ways to detect when a focus state should be shown when using the tab key and this seems to be the simplest solution. // For more information about this approach, see https://hackernoon.com/removing-that-ugly-focus-ring-and-keeping-it-too-6c8727fefcd2 function handleFirstTab(evt) { if (evt.keyCode === 9) { @@ -89,7 +89,7 @@ var app = angular.module("umbraco.preview", ['umbraco.resources', 'umbraco.servi if (isInit === "true") { //do not continue, this is the first load of this new window, if this is passed in it means it's been //initialized by the content editor and then the content editor will actually re-load this window without - //this flag. This is a required trick to get around chrome popup mgr. + //this flag. This is a required trick to get around chrome popup mgr. return; } @@ -100,7 +100,7 @@ var app = angular.module("umbraco.preview", ['umbraco.resources', 'umbraco.servi $scope.valueAreLoaded = false; $scope.devices = [ - { name: "fullsize", css: "fullsize", icon: "icon-application-window-alt", title: "Browser" }, + { name: "fullsize", css: "fullsize", icon: "icon-application-window-alt", title: "Fit browser" }, { name: "desktop", css: "desktop shadow", icon: "icon-display", title: "Desktop" }, { name: "laptop - 1366px", css: "laptop shadow", icon: "icon-laptop", title: "Laptop" }, { name: "iPad portrait - 768px", css: "iPad-portrait shadow", icon: "icon-ipad", title: "Tablet portrait" }, @@ -136,17 +136,24 @@ var app = angular.module("umbraco.preview", ['umbraco.resources', 'umbraco.servi $scope.windowClickHandler = function () { closeOthers(); } + function windowBlurHandler() { closeOthers(); $scope.$digest(); } + window.addEventListener("blur", windowBlurHandler); - var win = $($window); - - win.on("blur", windowBlurHandler); + function windowVisibilityHandler(e) { + // When tab is visible again: + if(document.hidden === false) { + checkPreviewState(); + } + } + document.addEventListener("visibilitychange", windowVisibilityHandler); $scope.$on("$destroy", function () { - win.off("blur", handleBlwindowBlurHandlerur); + window.removeEventListener("blur", windowBlurHandler); + window.removeEventListener("visibilitychange", windowVisibilityHandler); }); @@ -162,6 +169,167 @@ var app = angular.module("umbraco.preview", ['umbraco.resources', 'umbraco.servi $scope.pageUrl = "frame?" + query; } } + function getCookie(cname) { + var name = cname + "="; + var ca = document.cookie.split(";"); + for(var i = 0; i < ca.length; i++) { + var c = ca[i]; + while (c.charAt(0) == " ") { + c = c.substring(1); + } + if (c.indexOf(name) == 0) { + return c.substring(name.length, c.length); + } + } + return null; + } + function setCookie(cname, cvalue, exminutes) { + var d = new Date(); + d.setTime(d.getTime() + (exminutes * 60 * 1000)); + document.cookie = cname + "=" + cvalue + ";expires="+d.toUTCString() + ";path=/"; + } + var hasPreviewDialog = false; + function checkPreviewState() { + if (getCookie("UMB_PREVIEW") === null) { + + if(hasPreviewDialog === true) return; + hasPreviewDialog = true; + + // Ask to re-enter preview mode? + + // This modal is also used in websitepreview.js + var modelStyles = ` + + /* Webfont: LatoLatin-Bold */ + @font-face { + font-family: 'Lato'; + src: url('https://fonts.googleapis.com/css2?family=Lato:wght@700&display=swap'); + font-style: normal; + font-weight: 700; + font-display: swap; + text-rendering: optimizeLegibility; + } + + .umbraco-preview-dialog { + position: fixed; + display: flex; + align-items: center; + justify-content: center; + z-index: 99999999; + top:0; + bottom:0; + left:0; + right:0; + overflow: auto; + background-color: rgba(0,0,0,0.6); + } + + .umbraco-preview-dialog__modal { + background-color: #fff; + border-radius: 6px; + box-shadow: 0 3px 7px rgba(0,0,0,0.3); + margin: auto; + padding: 30px 40px; + width: 100%; + max-width: 540px; + font-family: Lato,Helvetica Neue,Helvetica,Arial,sans-serif; + font-size: 15px; + } + + .umbraco-preview-dialog__headline { + font-weight: 700; + font-size: 22px; + color: #1b264f; + margin-top:10px; + margin-bottom:20px; + } + .umbraco-preview-dialog__question { + margin-bottom:30px; + } + .umbraco-preview-dialog__modal > button { + display: inline-block; + cursor: pointer; + padding: 8px 18px; + text-align: center; + vertical-align: middle; + border-radius: 3px; + border:none; + font-family: inherit; + font-weight: 700; + font-size: 15px; + float:right; + margin-left:10px; + + color: #1b264f; + background-color: #f6f1ef; + } + .umbraco-preview-dialog__modal > button:hover { + color: #2152a3; + background-color: #f6f1ef; + } + .umbraco-preview-dialog__modal > button.umbraco-preview-dialog__continue { + color: #fff; + background-color: #2bc37c; + } + .umbraco-preview-dialog__modal > button.umbraco-preview-dialog__continue:hover { + background-color: #39d38b; + } + `; + + var bodyEl = document.getElementsByTagName("BODY")[0]; + + var fragment = document.createElement("div"); + var shadowRoot = fragment.attachShadow({ mode: 'open' }); + + var style = document.createElement("style"); + style.innerHTML = modelStyles; + shadowRoot.appendChild(style); + + var con = document.createElement("div"); + con.className = "umbraco-preview-dialog"; + shadowRoot.appendChild(con); + + var modal = document.createElement("div"); + modal.className = "umbraco-preview-dialog__modal"; + modal.innerHTML = `
Preview content?
+
You have exited preview mode, do you want to continue previewing this content?
`; + con.appendChild(modal); + + var continueButton = document.createElement("button"); + continueButton.type = "button"; + continueButton.className = "umbraco-preview-dialog__continue"; + continueButton.innerHTML = "Preview content"; + continueButton.addEventListener("click", () => { + bodyEl.removeChild(fragment); + reenterPreviewMode(); + hasPreviewDialog = false; + }); + modal.appendChild(continueButton); + + bodyEl.appendChild(fragment); + continueButton.focus(); + + } + } + function reenterPreviewMode() { + //Re-enter Preview Mode + $http({ + method: 'POST', + url: '../preview/enterPreview', + params: { + id: $scope.pageId + } + }) + } + function getPageURL() { + var culture = $location.search().culture || getParameterByName("culture"); + var relativeUrl = "/" + $scope.pageId; + if (culture) { + relativeUrl += '?culture=' + culture; + } + return relativeUrl; + } + /*****************************************************************************/ /* Preview devices */ /*****************************************************************************/ @@ -171,18 +339,21 @@ var app = angular.module("umbraco.preview", ['umbraco.resources', 'umbraco.servi $scope.previewDevice = device; }; + /*****************************************************************************/ + /* Open website in preview mode */ + /*****************************************************************************/ + + $scope.openInBrowser = function () { + setCookie("UMB-WEBSITE-PREVIEW-ACCEPT", "true", 5); + window.open(getPageURL(), "_blank"); + }; + /*****************************************************************************/ /* Exit Preview */ /*****************************************************************************/ $scope.exitPreview = function () { - - var culture = $location.search().culture || getParameterByName("culture"); - var relativeUrl = "/" + $scope.pageId; - if (culture) { - relativeUrl += '?culture=' + culture; - } - window.top.location.href = "../preview/end?redir=" + encodeURIComponent(relativeUrl); + window.top.location.href = "../preview/end?redir=" + encodeURIComponent(getPageURL()); }; $scope.onFrameLoaded = function (iframe) { @@ -239,8 +410,8 @@ var app = angular.module("umbraco.preview", ['umbraco.resources', 'umbraco.servi var vm = this; vm.$postLink = function () { - var resultFrame = $element.find("#resultFrame"); - resultFrame.on("load", iframeReady); + var resultFrame = $element.find("#resultFrame").get(0); + resultFrame.addEventListener("load", iframeReady); }; function iframeReady() { diff --git a/src/Umbraco.Web.UI.Client/src/websitepreview/websitepreview.js b/src/Umbraco.Web.UI.Client/src/websitepreview/websitepreview.js index be5c989f68..cb76b47bb7 100644 --- a/src/Umbraco.Web.UI.Client/src/websitepreview/websitepreview.js +++ b/src/Umbraco.Web.UI.Client/src/websitepreview/websitepreview.js @@ -30,20 +30,31 @@ return c.substring(name.length, c.length); } } - return ""; + return null; } function exitPreviewMode() { window.top.location.href = scriptElement.getAttribute("data-umbraco-path")+"/preview/end?redir=" + encodeURIComponent(window.location.pathname+window.location.search); } - function continuePreviewMode() { - setCookie("UMB-WEBSITE-PREVIEW-ACCEPT", "true", 5); + function continuePreviewMode(minutsToExpire) { + setCookie("UMB-WEBSITE-PREVIEW-ACCEPT", "true", minutsToExpire || 2); } var user = getCookie("UMB-WEBSITE-PREVIEW-ACCEPT"); if (user != "true") { + // This modal is also used in preview.js var modelStyles = ` + /* Webfont: LatoLatin-Bold */ + @font-face { + font-family: 'Lato'; + src: url('https://fonts.googleapis.com/css2?family=Lato:wght@700&display=swap'); + font-style: normal; + font-weight: 700; + font-display: swap; + text-rendering: optimizeLegibility; + } + .umbraco-preview-dialog { position: fixed; display: flex; @@ -68,6 +79,7 @@ max-width: 540px; font-family: Lato,Helvetica Neue,Helvetica,Arial,sans-serif; font-size: 15px; + line-height: 1.5; } .umbraco-preview-dialog__headline { @@ -75,19 +87,22 @@ font-size: 22px; color: #1b264f; margin-top:10px; - margin-bottom:10px; + margin-bottom:20px; } .umbraco-preview-dialog__question { margin-bottom:30px; } .umbraco-preview-dialog__modal > button { display: inline-block; + cursor: pointer; padding: 8px 18px; text-align: center; vertical-align: middle; border-radius: 3px; border:none; + font-family: inherit; font-weight: 700; + font-size: 15px; float:right; margin-left:10px; @@ -109,37 +124,37 @@ var bodyEl = document.getElementsByTagName("BODY")[0]; - var fragment = document.createDocumentFragment(); + var fragment = document.createElement("div"); + var shadowRoot = fragment.attachShadow({ mode: 'open' }); var style = document.createElement("style"); style.innerHTML = modelStyles; - fragment.appendChild(style); + shadowRoot.appendChild(style); var con = document.createElement("div"); con.className = "umbraco-preview-dialog"; - fragment.appendChild(con); + shadowRoot.appendChild(con); var modal = document.createElement("div"); modal.className = "umbraco-preview-dialog__modal"; - modal.innerHTML = `
Preview mode
-
Do you want to continue viewing latest saved version?
`; + modal.innerHTML = `
View published version?
+
You are in Preview Mode, do you want exit in order to view the published version of your website?
`; con.appendChild(modal); var continueButton = document.createElement("button"); continueButton.type = "button"; continueButton.className = "umbraco-preview-dialog__continue"; - continueButton.innerHTML = "Continue"; - continueButton.addEventListener("click", function() { - bodyEl.removeChild(style); - bodyEl.removeChild(con); - continuePreviewMode(); - }); + continueButton.innerHTML = "View published version"; + continueButton.addEventListener("click", exitPreviewMode); modal.appendChild(continueButton); var exitButton = document.createElement("button"); exitButton.type = "button"; - exitButton.innerHTML = "Exit preview mode"; - exitButton.addEventListener("click", exitPreviewMode); + exitButton.innerHTML = "Stay in preview mode"; + exitButton.addEventListener("click", function() { + bodyEl.removeChild(fragment); + continuePreviewMode(5); + }); modal.appendChild(exitButton); bodyEl.appendChild(fragment); diff --git a/src/Umbraco.Web.UI/Umbraco/Views/Preview/Index.cshtml b/src/Umbraco.Web.UI/Umbraco/Views/Preview/Index.cshtml index 4b7bcaee87..8b7d871ba4 100644 --- a/src/Umbraco.Web.UI/Umbraco/Views/Preview/Index.cshtml +++ b/src/Umbraco.Web.UI/Umbraco/Views/Preview/Index.cshtml @@ -65,6 +65,9 @@ } + + diff --git a/src/Umbraco.Web.UI/config/umbracoSettings.config b/src/Umbraco.Web.UI/config/umbracoSettings.config index 2287464d07..086210e5a5 100644 --- a/src/Umbraco.Web.UI/config/umbracoSettings.config +++ b/src/Umbraco.Web.UI/config/umbracoSettings.config @@ -64,7 +64,7 @@ pointer-events:none; left: 50%; transform: translate(-50%, 40px); - animation: umbraco-preview-badge--effect 10s 100ms ease both; + animation: umbraco-preview-badge--effect 10s 1.2s ease both; border-radius: 3px 3px 0 0; }} @keyframes umbraco-preview-badge--effect {{ diff --git a/src/Umbraco.Web/Editors/PreviewController.cs b/src/Umbraco.Web/Editors/PreviewController.cs index f148655acd..c57968af06 100644 --- a/src/Umbraco.Web/Editors/PreviewController.cs +++ b/src/Umbraco.Web/Editors/PreviewController.cs @@ -101,11 +101,7 @@ namespace Umbraco.Web.Editors [UmbracoAuthorize] public ActionResult Frame(int id, string culture) { - var user = _umbracoContextAccessor.UmbracoContext.Security.CurrentUser; - - var previewToken = _publishedSnapshotService.EnterPreview(user, id); - - Response.Cookies.Set(new HttpCookie(Constants.Web.PreviewCookieName, previewToken)); + EnterPreview(id); // use a numeric url because content may not be in cache and so .Url would fail var query = culture.IsNullOrWhiteSpace() ? string.Empty : $"?culture={culture}"; @@ -113,7 +109,16 @@ namespace Umbraco.Web.Editors return null; } + public ActionResult EnterPreview(int id) + { + var user = _umbracoContextAccessor.UmbracoContext.Security.CurrentUser; + var previewToken = _publishedSnapshotService.EnterPreview(user, id); + + Response.Cookies.Set(new HttpCookie(Constants.Web.PreviewCookieName, previewToken)); + + return null; + } public ActionResult End(string redir = null) { var previewToken = Request.GetPreviewCookieValue(); @@ -121,6 +126,8 @@ namespace Umbraco.Web.Editors service.ExitPreview(previewToken); System.Web.HttpContext.Current.ExpireCookie(Constants.Web.PreviewCookieName); + // Expire Client-side cookie that determins wether the user has accepted to be in Preview Mode when visiting the website. + System.Web.HttpContext.Current.ExpireCookie(Constants.Web.AcceptPreviewCookieName); if (Uri.IsWellFormedUriString(redir, UriKind.Relative) && redir.StartsWith("//") == false From 6009acdfbf0558cbb8273d1589e57c0a7a05eaf3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= Date: Fri, 9 Oct 2020 10:46:36 +0200 Subject: [PATCH 04/53] updated wording --- src/Umbraco.Web.UI.Client/src/preview/preview.controller.js | 2 +- .../src/websitepreview/websitepreview.js | 2 +- src/Umbraco.Web.UI/Umbraco/Views/Preview/Index.cshtml | 4 ++-- src/Umbraco.Web.UI/config/umbracoSettings.config | 6 +++--- 4 files changed, 7 insertions(+), 7 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 412d0c9cc5..056ade090e 100644 --- a/src/Umbraco.Web.UI.Client/src/preview/preview.controller.js +++ b/src/Umbraco.Web.UI.Client/src/preview/preview.controller.js @@ -292,7 +292,7 @@ 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 exited preview mode, do you want to continue previewing this content?
`; +
You have ended preview mode, do you want to continue previewing this content?
`; con.appendChild(modal); var continueButton = document.createElement("button"); diff --git a/src/Umbraco.Web.UI.Client/src/websitepreview/websitepreview.js b/src/Umbraco.Web.UI.Client/src/websitepreview/websitepreview.js index cb76b47bb7..43fd152e61 100644 --- a/src/Umbraco.Web.UI.Client/src/websitepreview/websitepreview.js +++ b/src/Umbraco.Web.UI.Client/src/websitepreview/websitepreview.js @@ -37,7 +37,7 @@ window.top.location.href = scriptElement.getAttribute("data-umbraco-path")+"/preview/end?redir=" + encodeURIComponent(window.location.pathname+window.location.search); } function continuePreviewMode(minutsToExpire) { - setCookie("UMB-WEBSITE-PREVIEW-ACCEPT", "true", minutsToExpire || 2); + setCookie("UMB-WEBSITE-PREVIEW-ACCEPT", "true", minutsToExpire || 4); } var user = getCookie("UMB-WEBSITE-PREVIEW-ACCEPT"); diff --git a/src/Umbraco.Web.UI/Umbraco/Views/Preview/Index.cshtml b/src/Umbraco.Web.UI/Umbraco/Views/Preview/Index.cshtml index 8b7d871ba4..912470eb65 100644 --- a/src/Umbraco.Web.UI/Umbraco/Views/Preview/Index.cshtml +++ b/src/Umbraco.Web.UI/Umbraco/Views/Preview/Index.cshtml @@ -65,10 +65,10 @@ } - - diff --git a/src/Umbraco.Web.UI/config/umbracoSettings.config b/src/Umbraco.Web.UI/config/umbracoSettings.config index 086210e5a5..454da921e7 100644 --- a/src/Umbraco.Web.UI/config/umbracoSettings.config +++ b/src/Umbraco.Web.UI/config/umbracoSettings.config @@ -41,11 +41,11 @@ Preview mode - + … - - Click to end + + Click to end preview mode