mirror of
https://github.com/Hopiu/wagtail.git
synced 2026-05-10 16:24:49 +00:00
Aesthetic improvements to preview experience. Loading spinner now uses wagtail's standard glyph.
This commit is contained in:
Dave Cranwell
parent
7a290ead90
commit
cbd47f3941
7 changed files with 122 additions and 27 deletions
|
|
@ -334,16 +334,24 @@ $(function() {
|
|||
/* Set up behaviour of preview button */
|
||||
$('.action-preview').click(function() {
|
||||
var previewWindow = window.open($(this).data('placeholder'), $(this).data('windowname'));
|
||||
|
||||
|
||||
$.ajax({
|
||||
type: "POST",
|
||||
url: $(this).data('action'),
|
||||
data: $('#page-edit-form').serialize(),
|
||||
success: function(data, textStatus, request) {
|
||||
if (request.getResponseHeader('X-Wagtail-Preview') == 'ok') {
|
||||
previewWindow.document.open();
|
||||
previewWindow.document.write(data);
|
||||
previewWindow.document.close();
|
||||
var pdoc = previewWindow.document;
|
||||
var frame = pdoc.getElementById('preview-frame');
|
||||
|
||||
frame = (frame.contentWindow) ? frame.contentWindow : (frame.contentDocument.document) ? frame.contentDocument.document : frame.contentDocument;
|
||||
frame.document.open();
|
||||
frame.document.write(data);
|
||||
frame.document.close();
|
||||
|
||||
var removeTimeout = setTimeout(function(){
|
||||
pdoc.getElementById('loading-spinner-wrapper').className += 'remove';
|
||||
}, 100) /* just enough to give effect without adding discernible slowness */
|
||||
} else {
|
||||
previewWindow.close();
|
||||
document.open();
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
<button class="action-preview button {% if icon %}icon icon-view{% endif %}"
|
||||
data-action="{% url 'wagtailadmin_pages_preview_on_create' content_type.app_label content_type.model parent_page.id %}{% if mode %}?mode={{ mode|urlencode }}{% endif %}"
|
||||
data-placeholder="{% url 'wagtailadmin_pages_preview_placeholder' %}"
|
||||
data-placeholder="{% url 'wagtailadmin_pages_preview' %}"
|
||||
data-windowname="wagtail_preview_{{ parent_page.id }}_child">{{ label }}</button>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
<button class="action-preview button {% if icon %}icon icon-view{% endif %}"
|
||||
data-action="{% url 'wagtailadmin_pages_preview_on_edit' page.id %}{% if mode %}?mode={{ mode|urlencode }}{% endif %}"
|
||||
data-placeholder="{% url 'wagtailadmin_pages_preview_placeholder' %}"
|
||||
data-placeholder="{% url 'wagtailadmin_pages_preview' %}"
|
||||
data-windowname="wagtail_preview_{{ page.id }}">{{ label }}</button>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,99 @@
|
|||
<!DOCTYPE HTML>
|
||||
{% load static %}
|
||||
<html>
|
||||
<head>
|
||||
<title>Preview loading...</title>
|
||||
<script>
|
||||
|
||||
</script>
|
||||
<style>
|
||||
/* This font is just a single spinner glyph */
|
||||
@font-face {
|
||||
font-family: 'wagtail';
|
||||
src: url(data:application/x-font-ttf;charset=utf-8;base64,AAEAAAALAIAAAwAwT1MvMggiBucAAAC8AAAAYGNtYXAAIwC5AAABHAAAAExnYXNwAAAAEAAAAWgAAAAIZ2x5Zu2pTysAAAFwAAAA0GhlYWQAoBqvAAACQAAAADZoaGVhA+IB5gAAAngAAAAkaG10eAMAAAAAAAKcAAAAFGxvY2EAKAB8AAACsAAAAAxtYXhwAAgAMwAAArwAAAAgbmFtZTAOqMkAAALcAAABOXBvc3QAAwAAAAAEGAAAACAAAwIAAZAABQAAAUwBZgAAAEcBTAFmAAAA9QAZAIQAAAAAAAAAAAAAAAAAAAABAAAAAAAAAAAAAAAAAAAAAABAAAAAMQHg/+D/4AHgACAAAAABAAAAAAAAAAAAAAAgAAAAAAACAAAAAwAAABQAAwABAAAAFAAEADgAAAAKAAgAAgACAAEAIAAx//3//wAAAAAAIAAx//3//wAB/+P/0wADAAEAAAAAAAAAAAAAAAEAAf//AA8AAQAAAAAAAAAAAAIAADc5AQAAAAABAAAAAAAAAAAAAgAANzkBAAAAAAEAAAAAAAAAAAACAAA3OQEAAAAAAgAA/+ACAAHgABcAMAAANy4DNTQ+Ah8BByYOAhUUHgIXBxcnNz4DJzYuAic/AR4DBxYOAiNLEhwTCihGXTUgIChGNB4HDxQOKLAhISdHMx8BAQgOFQ0mBxEdEgsBASlFXjQrEiouMRo0XkUpAR8hAR8zRycUJCQeDwR0IR8BHTVFKRImIiANBSgSKi4xGjVdRigAAAEAAAABAADi0eQAXw889QALAgAAAAAAz8Bs+QAAAADPwGz5AAD/4AIAAeAAAAAIAAIAAAAAAAAAAQAAAeD/4AAAAgAAAAAAAgAAAQAAAAAAAAAAAAAAAAAAAAUAAAAAAAAAAAAAAAABAAAAAgAAAAAAAAAACgAUAB4AaAABAAAABQAxAAIAAAAAAAIAAAAAAAAAAAAAAAAAAAAAAAAADgCuAAEAAAAAAAEADgAAAAEAAAAAAAIADgBHAAEAAAAAAAMADgAkAAEAAAAAAAQADgBVAAEAAAAAAAUAFgAOAAEAAAAAAAYABwAyAAEAAAAAAAoAKABjAAMAAQQJAAEADgAAAAMAAQQJAAIADgBHAAMAAQQJAAMADgAkAAMAAQQJAAQADgBVAAMAAQQJAAUAFgAOAAMAAQQJAAYADgA5AAMAAQQJAAoAKABjAHcAYQBnAHQAYQBpAGwAVgBlAHIAcwBpAG8AbgAgADEALgAwAHcAYQBnAHQAYQBpAGx3YWd0YWlsAHcAYQBnAHQAYQBpAGwAUgBlAGcAdQBsAGEAcgB3AGEAZwB0AGEAaQBsAEcAZQBuAGUAcgBhAHQAZQBkACAAYgB5ACAASQBjAG8ATQBvAG8AbgAAAAADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA) format('truetype'),
|
||||
url(data:application/font-woff;charset=utf-8;base64,d09GRk9UVE8AAARsAAoAAAAABCQAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABDRkYgAAAA9AAAAO4AAADuSyBzg09TLzIAAAHkAAAAYAAAAGAIIgbnY21hcAAAAkQAAABMAAAATAAjALlnYXNwAAACkAAAAAgAAAAIAAAAEGhlYWQAAAKYAAAANgAAADYAoBqvaGhlYQAAAtAAAAAkAAAAJAPiAeZobXR4AAAC9AAAABQAAAAUAwAAAG1heHAAAAMIAAAABgAAAAYABVAAbmFtZQAAAxAAAAE5AAABOTAOqMlwb3N0AAAETAAAACAAAAAgAAMAAAEABAQAAQEBCHdhZ3RhaWwAAQIAAQA6+BwC+BsD+BgEHgoAGVP/i4seCgAZU/+LiwwHi2v4lPh0BR0AAAB0Dx0AAAB5ER0AAAAJHQAAAOUSAAYBAQgPERMWGXdhZ3RhaWx3YWd0YWlsdTB1MXUyMHUzMQAAAgGJAAMABQEBBAcKDWT8lA78lA78lA77lA7WthVbu3DMi8+L9yH3B/cH9yGLCKtra2sFIYs1NYshi1ifWq9nCGSGBfdD+wcVa6urqwX1i+Hhi/WLvne8Z68IspCRswW7W6ZKi0eL+yH7B/sH+yGLCA74lBT4lBWLDAoAAAADAgABkAAFAAABTAFmAAAARwFMAWYAAAD1ABkAhAAAAAAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAAAAAEAAAAAxAeD/4P/gAeAAIAAAAAEAAAAAAAAAAAAAACAAAAAAAAIAAAADAAAAFAADAAEAAAAUAAQAOAAAAAoACAACAAIAAQAgADH//f//AAAAAAAgADH//f//AAH/4//TAAMAAQAAAAAAAAAAAAAAAQAB//8ADwABAAAAAQAAaXw/5l8PPPUACwIAAAAAAM/AbPkAAAAAz8Bs+QAA/+ACAAHgAAAACAACAAAAAAAAAAEAAAHg/+AAAAIAAAAAAAIAAAEAAAAAAAAAAAAAAAAAAAAFAAAAAAAAAAAAAAAAAQAAAAIAAAAAAFAAAAUAAAAAAA4ArgABAAAAAAABAA4AAAABAAAAAAACAA4ARwABAAAAAAADAA4AJAABAAAAAAAEAA4AVQABAAAAAAAFABYADgABAAAAAAAGAAcAMgABAAAAAAAKACgAYwADAAEECQABAA4AAAADAAEECQACAA4ARwADAAEECQADAA4AJAADAAEECQAEAA4AVQADAAEECQAFABYADgADAAEECQAGAA4AOQADAAEECQAKACgAYwB3AGEAZwB0AGEAaQBsAFYAZQByAHMAaQBvAG4AIAAxAC4AMAB3AGEAZwB0AGEAaQBsd2FndGFpbAB3AGEAZwB0AGEAaQBsAFIAZQBnAHUAbABhAHIAdwBhAGcAdABhAGkAbABHAGUAbgBlAHIAYQB0AGUAZAAgAGIAeQAgAEkAYwBvAE0AbwBvAG4AAAAAAwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA==) format('woff');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
html,body {
|
||||
height:100%;
|
||||
padding:0;
|
||||
margin:0;
|
||||
}
|
||||
|
||||
#loading-spinner-wrapper{
|
||||
position:fixed;
|
||||
bottom:0;
|
||||
text-align:center;
|
||||
height:100%;
|
||||
width:100%;
|
||||
font-size:0em;
|
||||
z-index:999999;
|
||||
background:white;
|
||||
-webkit-transition: bottom 0.4s ease;
|
||||
-moz-transition: bottom 0.4s ease;
|
||||
-o-transition: bottom 0.4s ease;
|
||||
transition: bottom 0.4s ease;
|
||||
}
|
||||
#loading-spinner-wrapper.remove{
|
||||
bottom:-100%;
|
||||
}
|
||||
#loading-spinner-wrapper:before {
|
||||
content: '';
|
||||
width:0px;
|
||||
display: inline-block;
|
||||
height: 100%;
|
||||
vertical-align: middle;
|
||||
margin-left:-0.4em;
|
||||
}
|
||||
#loading-spinner{
|
||||
position:relative;
|
||||
display:inline-block;
|
||||
width:120px;
|
||||
height:120px;
|
||||
vertical-align:middle;
|
||||
}
|
||||
#loading-spinner:after{
|
||||
font-size:120px;
|
||||
line-height:120px;
|
||||
color:#43b1b0;
|
||||
position:absolute;
|
||||
left:0;
|
||||
top:0;
|
||||
font-family:wagtail;
|
||||
content:"1";
|
||||
width:1em;
|
||||
animation: spin 0.8s infinite linear;
|
||||
-webkit-animation: spin 0.8s infinite linear;
|
||||
-moz-animation: spin 0.8s infinite linear;
|
||||
}
|
||||
|
||||
#preview-frame{
|
||||
height:100%;
|
||||
width:100%;
|
||||
position:absolute;
|
||||
z-index:1;
|
||||
border:0;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
from { transform: rotate(0deg); }
|
||||
to { transform: rotate(360deg); }
|
||||
}
|
||||
@-webkit-keyframes spin {
|
||||
from { -webkit-transform: rotate(0deg); }
|
||||
to { -webkit-transform: rotate(360deg); }
|
||||
}
|
||||
@-moz-keyframes spin {
|
||||
from { -moz-transform: rotate(0deg); }
|
||||
to { -moz-transform: rotate(360deg); }
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="loading-spinner-wrapper">
|
||||
<div id="loading-spinner"></div>
|
||||
</div>
|
||||
<iframe id="preview-frame" src="{% url 'wagtailadmin_pages_preview_loading' %}"></iframe>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,18 +0,0 @@
|
|||
<!DOCTYPE HTML>
|
||||
{% load static %}
|
||||
<html>
|
||||
<head>
|
||||
<title>Preview loading...</title>
|
||||
<style>
|
||||
body {
|
||||
background-color: #ddd;
|
||||
background-image: url('{% static "wagtailadmin/images/spinner.gif" %}');
|
||||
background-repeat: no-repeat;
|
||||
background-attachment: fixed;
|
||||
background-position: center;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -56,7 +56,8 @@ urlpatterns += [
|
|||
url(r'^pages/(\d+)/edit/$', pages.edit, name='wagtailadmin_pages_edit'),
|
||||
url(r'^pages/(\d+)/edit/preview/$', pages.preview_on_edit, name='wagtailadmin_pages_preview_on_edit'),
|
||||
|
||||
url(r'^pages/preview_placeholder/$', pages.preview_placeholder, name='wagtailadmin_pages_preview_placeholder'),
|
||||
url(r'^pages/preview/$', pages.preview, name='wagtailadmin_pages_preview'),
|
||||
url(r'^pages/preview_loading/$', pages.preview_loading, name='wagtailadmin_pages_preview_loading'),
|
||||
|
||||
url(r'^pages/(\d+)/view_draft/$', pages.view_draft, name='wagtailadmin_pages_view_draft'),
|
||||
url(r'^pages/(\d+)/add_subpage/$', pages.add_subpage, name='wagtailadmin_pages_add_subpage'),
|
||||
|
|
|
|||
|
|
@ -395,7 +395,7 @@ def preview_on_create(request, content_type_app_name, content_type_model_name, p
|
|||
return response
|
||||
|
||||
|
||||
def preview_placeholder(request):
|
||||
def preview(request):
|
||||
"""
|
||||
The HTML of a previewed page is written to the destination browser window using document.write.
|
||||
This overwrites any previous content in the window, while keeping its URL intact. This in turn
|
||||
|
|
@ -416,8 +416,13 @@ def preview_placeholder(request):
|
|||
Since we're going to this trouble, we'll also take the opportunity to display a spinner on the
|
||||
placeholder page, providing some much-needed visual feedback.
|
||||
"""
|
||||
return render(request, 'wagtailadmin/pages/preview_placeholder.html')
|
||||
return render(request, 'wagtailadmin/pages/preview.html')
|
||||
|
||||
def preview_loading(request):
|
||||
"""
|
||||
This page is blank, but must be real HTML so it's DOM can be written to once the preview of the page has rendered
|
||||
"""
|
||||
return HttpResponse("<html><head><title></title></head><body></body></html>")
|
||||
|
||||
@permission_required('wagtailadmin.access_admin')
|
||||
def unpublish(request, page_id):
|
||||
|
|
|
|||
Loading…
Reference in a new issue