Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Preview issues #9889

Merged
merged 1 commit into from
Jul 12, 2021
Merged

Preview issues #9889

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
47 changes: 16 additions & 31 deletions src/OrchardCore.Modules/OrchardCore.ContentPreview/Views/Preview/Index.cshtml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,28 +3,20 @@
var previewId = ViewContext.RouteData.Values["id"];
}

<style asp-name="bootstrap"></style>
<script asp-name="bootstrap" at="Foot"></script>
<script asp-name="js-cookie" at="Foot"></script>

<resources type="Header" />

<iframe id="iframe" title="iframe" style="display:none; position:fixed; top:0px; left:0px; bottom:0px; right:0px; width:100%; height:100%; border:none; margin:0; padding:0; overflow:hidden;z-index:999990;">
<iframe id="iframe" title="iframe" style="position:fixed; top:0px; left:0px; bottom:0px; right:0px; width:100%; height:100%; border:none; margin:0; padding:0; overflow:hidden; z-index:999990;">
Your browser doesn't support iframes
</iframe>

<iframe id="iframe2" title="iframe2" style="display:none; position:fixed; top:0px; left:0px; bottom:0px; right:0px; width:100%; height:100%; border:none; margin:0; padding:0; overflow:hidden;z-index:999990;">
Your browser doesn't support iframes
</iframe>

<div id="notConnectedWarning" class="alert alert-info alert-dismissible fade show collapse" role="alert" style="position:fixed; height:60px; top:10px;right:40px; display:none; z-index:999999;">
<div id="notConnectedWarning" class="alert alert-info alert-dismissible fade show collapse" role="alert" style="position:fixed; height:60px; top:10px; right:40px; display:none; z-index:999999;">
<button type="button" id="close-connect-warning" class="close" aria-label="Close" style="position: relative; padding: 0 0 0 1rem; margin-top: -0.2rem;">
<span aria-hidden="true">&times;</span>
</button>
<span>@T["Preview Disconnected"] </span>
</div>

<div id="serverErrorWarning" class="alert alert-warning alert-dismissible fade show" role="alert" style="position:fixed; top:10px;right:40px; display:none; z-index:999999;">
<div id="serverErrorWarning" class="alert alert-warning alert-dismissible fade show" role="alert" style="position:fixed; top:10px; right:40px; display:none; z-index:999999;">
<button type="button" id="close-server-warning" class="close" aria-label="Close" style="position: relative; padding: 0 0 0 1rem; margin-top: -0.2rem;">
<span aria-hidden="true">&times;</span>
</button>
Expand All @@ -39,12 +31,11 @@
<script>
var renderPreviewUrl = $(document.getElementById('renderPreviewUrl')).data('value');
var iframe = document.getElementById('iframe');
var iframe2 = document.getElementById('iframe2');
var previewEventTimer = null;
var previewRenderTimer = null;
var previewRendering;
var previewRenderData;
var scrollTop = 0;
var initialized;

$(function () {
$(window).on('storage', function (ev) {
Expand Down Expand Up @@ -83,26 +74,25 @@
});

iframe.onload = function () {
if (previewRendering) {
this.style.display = 'block';
$(this.contentWindow).scrollTop(scrollTop);

if (iframe2 && iframe2.contentWindow) {
iframe2.style.display = 'none';
iframe2.contentWindow.document.open();
iframe2.contentWindow.document.write(previewRenderData);
iframe2.contentWindow.document.close();
// The iframe may not be well setup after the first loading and then on the first editor update
// we may lose the scrolling position. A workaround is to refrech the page once after or to add
// here a delay that really block the thread before exiting. Here, we just rewrite the document.
if (!initialized) {
if (this.contentWindow) {
iframe.contentWindow.document.open();
iframe.contentWindow.document.write(previewRenderData);
iframe.contentWindow.document.close();
}
previewRendering = false;
initialized = true;
}
previewRendering = false;
}

function renderPreview(value) {

if (previewRendering) {
// Defer the last rendering
clearTimeout(previewRenderTimer);
previewRenderTimer = setTimeout(function () { renderPreview(value); }, 100);
previewRenderTimer = setTimeout(function () { renderPreview(value); }, 150);
return;
}

Expand All @@ -118,12 +108,7 @@

$.post(renderPreviewUrl, formData)
.done(function (data) {
if (iframe && iframe.contentWindow && iframe2 && iframe2.contentWindow) {

// A full writing of the frame document causes the iframe to be re-loaded.
// So, better to update the scroll position on the related 'onload' event.
// Then, we use 2 frames to cancel the flicker that this deferring causes.

if (iframe && iframe.contentWindow) {
iframe.contentWindow.document.open();
iframe.contentWindow.document.write(data);
iframe.contentWindow.document.close();
Expand Down
2 changes: 1 addition & 1 deletion src/OrchardCore.Modules/OrchardCore.ContentPreview/Views/Preview/_Layout.cshtml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,6 @@
<title>@RenderTitleSegments(Site.SiteName, "before")</title>
</head>
<body dir="@Orchard.CultureDir()">
@RenderBody()
@RenderBody()
</body>
</html>
61 changes: 18 additions & 43 deletions src/OrchardCore.Modules/OrchardCore.Templates/Views/Preview/Index.cshtml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,30 +1,22 @@
@{
Layout = null;
Layout = "_Layout";
Title.AddSegment(T["Template Preview"]);
}

<style asp-name="bootstrap"></style>
<script asp-name="bootstrap" at="Foot"></script>
<script asp-name="js-cookie" at="Foot"></script>

<resources type="Header" />

<iframe id="iframe" style="display:none; position:fixed; top:0px; left:0px; bottom:0px; right:0px; width:100%; height:100%; border:none; margin:0; padding:0; overflow:hidden;z-index:999990;">
<iframe id="iframe" style="position:fixed; top:0px; left:0px; bottom:0px; right:0px; width:100%; height:100%; border:none; margin:0; padding:0; overflow:hidden;z-index:999990;">
Your browser doesn't support iframes
</iframe>

<iframe id="iframe2" style="display:none; position:fixed; top:0px; left:0px; bottom:0px; right:0px; width:100%; height:100%; border:none; margin:0; padding:0; overflow:hidden;z-index:999990;">
Your browser doesn't support iframes
</iframe>

<div id="notConnectedWarning" class="alert alert-info alert-dismissible fade show collapse" role="alert" style="position:fixed; height:60px; top:10px;right:40px; display:none; z-index:999999;">
<div id="notConnectedWarning" class="alert alert-info alert-dismissible fade show collapse" role="alert" style="position:fixed; height:60px; top:10px; right:40px; display:none; z-index:999999;">
<button type="button" id="close-warning" class="close" aria-label="Close" style="position: relative; padding: 0 0 0 1rem; margin-top: -0.2rem;">
<span aria-hidden="true">&times;</span>
</button>
<span>@T["Preview Disconnected"] </span>
</div>

<div id="serverErrorWarning" class="alert alert-warning alert-dismissible fade show" role="alert" style="position:fixed; top:10px;right:40px; display:none; z-index:999999;">
<div id="serverErrorWarning" class="alert alert-warning alert-dismissible fade show" role="alert" style="position:fixed; top:10px; right:40px; display:none; z-index:999999;">
<button type="button" id="close-server-warning" class="close" aria-label="Close" style="position: relative; padding: 0 0 0 1rem; margin-top: -0.2rem;">
<span aria-hidden="true">&times;</span>
</button>
Expand All @@ -43,9 +35,11 @@
var renderPreviewUrl = $(document.getElementById('renderPreviewUrl')).data('value');
var contentPreviewUrl = $(document.getElementById('contentPreviewUrl')).data('value');
var iframe = document.getElementById('iframe');
var iframe2 = document.getElementById('iframe2');
var previewEventTimer = null;
var previewRenderTimer = null;
var previewRendering;
var previewRenderData;
var initialized;

$(function () {
$(window).on('storage', function (ev) {
Expand Down Expand Up @@ -84,33 +78,25 @@
});

iframe.onload = function () {
if (previewRendering) {
this.style.display = 'block';
$(this.contentWindow).scrollTop(scrollTop);

if (iframe2 && iframe2.contentWindow) {
iframe2.style.display = 'none';
iframe2.contentWindow.document.open();
iframe2.contentWindow.document.write(previewRenderData);
iframe2.contentWindow.document.close();
// The iframe may not be well setup after the first loading and then on the first editor update
// we may lose the scrolling position. A workaround is to refrech the page once after or to add
// here a delay that really block the thread before exiting. Here, we just rewrite the document.
if (!initialized) {
if (this.contentWindow) {
iframe.contentWindow.document.open();
iframe.contentWindow.document.write(previewRenderData);
iframe.contentWindow.document.close();
}
previewRendering = false;
initialized = true;
}
previewRendering = false;

if (this.contentWindow && this.contentWindow.location.pathname != indexPreviewUrl) {
contentPreviewUrl = this.contentWindow.location.pathname;
if (iframe2 && iframe2.contentWindow) {
iframe2.contentWindow.location = this.contentWindow.location;
}
}
}

var previewRendering;
var previewRenderData;
var scrollTop = 0;

function renderPreview(value) {

if (previewRendering) {
// Defer the last rendering
clearTimeout(previewRenderTimer);
Expand All @@ -121,7 +107,6 @@
clearTimeout(previewRenderTimer);

try {

var formData = JSON.parse(value);
if (!formData) {
previewRendering = false;
Expand All @@ -131,17 +116,7 @@

$.post(renderPreviewUrl, formData)
.done(function (data) {
if (iframe && iframe.contentWindow && iframe2 && iframe2.contentWindow) {

// A full writing of the frame document causes the iframe to be re-loaded.
// So, better to update the scroll position on the related 'onload' event.
// Then, we use 2 frames to cancel the flicker that this deferring causes.

scrollTop = $(iframe.contentWindow).scrollTop();
iframe2.style.display = 'block';
$(iframe2.contentWindow).scrollTop(scrollTop);

iframe.style.display = 'none';
if (iframe && iframe.contentWindow) {
iframe.contentWindow.document.open();
iframe.contentWindow.document.write(data);
iframe.contentWindow.document.close();
Expand Down
11 changes: 11 additions & 0 deletions src/OrchardCore.Modules/OrchardCore.Templates/Views/Preview/_Layout.cshtml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
<!DOCTYPE html>
<html lang="@Orchard.CultureName()">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>@RenderTitleSegments(Site.SiteName, "before")</title>
</head>
<body dir="@Orchard.CultureDir()">
@RenderBody()
</body>
</html>
2 changes: 1 addition & 1 deletion src/OrchardCore.Themes/TheAgencyTheme/Views/Layout.liquid
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,8 +8,8 @@
{% link type:"image/x-icon", rel:"shortcut icon", href:"~/TheAgencyTheme/favicon.ico" %}
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet" type="text/css">
<link href='https://fonts.googleapis.com/css?family=Roboto+Slab:400,100,300,700' rel='stylesheet' type='text/css'>
{% style name:"font-awesome", version:"5", at:"Head" %}
{% style name:"theagencytheme-bootstrap-oc", version:"1" %}
{% script name:"font-awesome", version:"5", at:"Head" %}
{% script name:"TheAgencyTheme-bootstrap-bundle", at:"Foot" %}
{% script name:"TheAgencyTheme", at:"Foot" %}
{% resources type: "HeadScript" %}
Expand Down