diff --git a/wagtail/wagtailadmin/static/wagtailadmin/js/page-editor.js b/wagtail/wagtailadmin/static/wagtailadmin/js/page-editor.js index 4e8e1b02d..c98ea4c7f 100644 --- a/wagtail/wagtailadmin/static/wagtailadmin/js/page-editor.js +++ b/wagtail/wagtailadmin/static/wagtailadmin/js/page-editor.js @@ -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(); diff --git a/wagtail/wagtailadmin/templates/wagtailadmin/pages/_preview_button_on_create.html b/wagtail/wagtailadmin/templates/wagtailadmin/pages/_preview_button_on_create.html index 7d71ed68b..4f60050be 100644 --- a/wagtail/wagtailadmin/templates/wagtailadmin/pages/_preview_button_on_create.html +++ b/wagtail/wagtailadmin/templates/wagtailadmin/pages/_preview_button_on_create.html @@ -1,4 +1,4 @@ diff --git a/wagtail/wagtailadmin/templates/wagtailadmin/pages/_preview_button_on_edit.html b/wagtail/wagtailadmin/templates/wagtailadmin/pages/_preview_button_on_edit.html index b3478c948..a5cd5d24a 100644 --- a/wagtail/wagtailadmin/templates/wagtailadmin/pages/_preview_button_on_edit.html +++ b/wagtail/wagtailadmin/templates/wagtailadmin/pages/_preview_button_on_edit.html @@ -1,4 +1,4 @@ diff --git a/wagtail/wagtailadmin/templates/wagtailadmin/pages/preview.html b/wagtail/wagtailadmin/templates/wagtailadmin/pages/preview.html new file mode 100644 index 000000000..51b31acaa --- /dev/null +++ b/wagtail/wagtailadmin/templates/wagtailadmin/pages/preview.html @@ -0,0 +1,99 @@ + +{% load static %} + + + Preview loading... + + + + +
+
+
+ + + diff --git a/wagtail/wagtailadmin/templates/wagtailadmin/pages/preview_placeholder.html b/wagtail/wagtailadmin/templates/wagtailadmin/pages/preview_placeholder.html deleted file mode 100644 index 1ccfe1ffb..000000000 --- a/wagtail/wagtailadmin/templates/wagtailadmin/pages/preview_placeholder.html +++ /dev/null @@ -1,18 +0,0 @@ - -{% load static %} - - - Preview loading... - - - - - diff --git a/wagtail/wagtailadmin/urls.py b/wagtail/wagtailadmin/urls.py index 8fbf2f6e7..08620a457 100644 --- a/wagtail/wagtailadmin/urls.py +++ b/wagtail/wagtailadmin/urls.py @@ -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'), diff --git a/wagtail/wagtailadmin/views/pages.py b/wagtail/wagtailadmin/views/pages.py index 69e6b7f4f..b5e87d1c2 100644 --- a/wagtail/wagtailadmin/views/pages.py +++ b/wagtail/wagtailadmin/views/pages.py @@ -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("") @permission_required('wagtailadmin.access_admin') def unpublish(request, page_id):