Support within wagtailadmin for selecting a view mode in which to pre…

…view a page. The 'preview' option is split out from the 'save' popup menu into its own button (it was deemed appropriate to split it off since it doesn't perform any database-level actions). If the page defines multiple page modes in get_page_modes, this button becomes a popup, allowing the editor to choose a mode. Finally, preview_on_create and preview_on_edit are updated to pass the chosen mode into the page's show_as_mode method.
wagtail · Apr 8, 2014 · 75b127a · 75b127a
1 parent d6cab0a
commit 75b127a
Show file tree

Hide file tree

Showing 6 changed files with 59 additions and 6 deletions.
diff --git a/wagtail/wagtailadmin/static/wagtailadmin/js/page-editor.js b/wagtail/wagtailadmin/static/wagtailadmin/js/page-editor.js
@@ -318,7 +318,7 @@ $(function() {
     });
 
     /* Set up behaviour of preview button */
-    $('#action-preview').click(function() {
+    $('.action-preview').click(function() {
         var previewWindow = window.open($(this).data('placeholder'), $(this).data('windowname'));
 
         $.ajax({

diff --git a/wagtail/wagtailadmin/templates/wagtailadmin/pages/_preview_button_on_create.html b/wagtail/wagtailadmin/templates/wagtailadmin/pages/_preview_button_on_create.html
@@ -0,0 +1,4 @@
+<input type="button" class="action-preview button"
+    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-windowname="wagtail_preview_{{ parent_page.id }}_child" value="{{ label }}" />
diff --git a/wagtail/wagtailadmin/templates/wagtailadmin/pages/_preview_button_on_edit.html b/wagtail/wagtailadmin/templates/wagtailadmin/pages/_preview_button_on_edit.html
@@ -0,0 +1,4 @@
+<input type="button" class="action-preview button"
+    data-action="{% url 'wagtailadmin_pages_preview_on_edit' page.id %}{% if mode %}?mode={{ mode|urlencode }}{% endif %}"
+    data-placeholder="{% url 'wagtailadmin_pages_preview_placeholder' %}"
+    data-windowname="wagtail_preview_{{ page.id }}" value="{{ label }}" />
diff --git a/wagtail/wagtailadmin/templates/wagtailadmin/pages/create.html b/wagtail/wagtailadmin/templates/wagtailadmin/pages/create.html
@@ -21,14 +21,32 @@
                         <input type="submit" value="{% trans 'Save as draft' %}" class="button" />
                         <div class="dropdown-toggle icon icon-arrow-up"></div>
                         <ul role="menu">
-                            <li><input type="button" id="action-preview" data-action="{% url 'wagtailadmin_pages_preview_on_create' content_type.app_label content_type.model parent_page.id %}" data-placeholder="{% url 'wagtailadmin_pages_preview_placeholder' %}" data-windowname="wagtail_preview_{{ parent_page.id }}_child" value="{% trans 'Preview' %}" class="button" /></li>
                             {% if parent_page_perms.can_publish_subpage %}
                                 <li><input type="submit" name="action-publish" value="{% trans 'Publish' %}" class="button" /></li>
                             {% endif %}
                             <li><input type="submit" name="action-submit" value="{% trans 'Submit for moderation' %}" class="button" /></li>
                         </ul>
                     </div>
                 </li>
+
+                <li class="actions">
+                    {% trans 'Preview' as preview_label %}
+                    {% if display_modes|length > 1 %}
+                        <div class="dropdown dropup match-width">
+                            {% include "wagtailadmin/pages/_preview_button_on_create.html" with label=preview_label %}
+                            <div class="dropdown-toggle icon icon-arrow-up"></div>
+                            <ul role="menu">
+                                {% for mode_name, mode_display_name in display_modes %}
+                                    <li>
+                                        {% include "wagtailadmin/pages/_preview_button_on_create.html" with mode=mode_name label=mode_display_name %}
+                                    </li>
+                                {% endfor %}
+                            </ul>
+                        </div>
+                    {% else %}
+                        {% include "wagtailadmin/pages/_preview_button_on_create.html" with label=preview_label %}
+                    {% endif %}
+                </li>
             </ul>
         </footer>
     </form>

diff --git a/wagtail/wagtailadmin/templates/wagtailadmin/pages/edit.html b/wagtail/wagtailadmin/templates/wagtailadmin/pages/edit.html
@@ -48,13 +48,29 @@ <h1>{% blocktrans with title=page.title %}Editing <span>{{ title }}</span>{% end
                                 <li><input type="submit" name="action-publish" value="{% trans 'Publish' %}" class="button" /></li>
                             {% endif %}
                             <li><input type="submit" name="action-submit" value="{% trans 'Submit for moderation' %}" class="button" /></li>
-                            <li><input type="button" id="action-preview" data-action="{% url 'wagtailadmin_pages_preview_on_edit' page.id %}" data-placeholder="{% url 'wagtailadmin_pages_preview_placeholder' %}" data-windowname="wagtail_preview_{{ page.id }}" value="{% trans 'Preview' %}" class="button" /></li>
                         </ul>
                     </div>
                 </li>
-                <li class="notices">
 
+                <li class="actions">
+                    {% trans 'Preview' as preview_label %}
+                    {% if display_modes|length > 1 %}
+                        <div class="dropdown dropup match-width">
+                            {% include "wagtailadmin/pages/_preview_button_on_edit.html" with label=preview_label %}
+                            <div class="dropdown-toggle icon icon-arrow-up"></div>
+                            <ul role="menu">
+                                {% for mode_name, mode_display_name in display_modes %}
+                                    <li>
+                                        {% include "wagtailadmin/pages/_preview_button_on_edit.html" with mode=mode_name label=mode_display_name %}
+                                    </li>
+                                {% endfor %}
+                            </ul>
+                        </div>
+                    {% else %}
+                        {% include "wagtailadmin/pages/_preview_button_on_edit.html" with label=preview_label %}
+                    {% endif %}
                 </li>
+
                 <li class="meta">
                     <p class="modified">
                         {% if page.get_latest_revision %}

diff --git a/wagtail/wagtailadmin/views/pages.py b/wagtail/wagtailadmin/views/pages.py
@@ -208,6 +208,7 @@ def clean_slug(slug):
         'page_class': page_class,
         'parent_page': parent_page,
         'edit_handler': edit_handler,
+        'display_modes': page.get_page_modes(),
     })
 
 
@@ -292,6 +293,7 @@ def clean_slug(slug):
         'page': page,
         'edit_handler': edit_handler,
         'errors_debug': errors_debug,
+        'display_modes': page.get_page_modes(),
     })
 
 
@@ -345,7 +347,11 @@ def preview_on_edit(request, page_id):
         # an HTML error response
         request.META.pop('HTTP_X_REQUESTED_WITH', None)
 
-        display_mode = page.get_page_modes()[0]
+        try:
+            display_mode = request.GET['mode']
+        except KeyError:
+            display_mode = page.get_page_modes()[0]
+
         response = page.show_as_mode(display_mode)
 
         response['X-Wagtail-Preview'] = 'ok'
@@ -357,6 +363,7 @@ def preview_on_edit(request, page_id):
         response = render(request, 'wagtailadmin/pages/edit.html', {
             'page': page,
             'edit_handler': edit_handler,
+            'display_modes': page.get_page_modes(),
         })
         response['X-Wagtail-Preview'] = 'error'
         return response
@@ -388,7 +395,10 @@ def preview_on_create(request, content_type_app_name, content_type_model_name, p
         # an HTML error response
         request.META.pop('HTTP_X_REQUESTED_WITH', None)
 
-        display_mode = page.get_page_modes()[0]
+        try:
+            display_mode = request.GET['mode']
+        except KeyError:
+            display_mode = page.get_page_modes()[0]
         response = page.show_as_mode(display_mode)
 
         response['X-Wagtail-Preview'] = 'ok'
@@ -403,6 +413,7 @@ def preview_on_create(request, content_type_app_name, content_type_model_name, p
             'page_class': page_class,
             'parent_page': parent_page,
             'edit_handler': edit_handler,
+            'display_modes': page.get_page_modes(),
         })
         response['X-Wagtail-Preview'] = 'error'
         return response