Added new and improved Admin Preview

admin.yaml

@@ -25,7 +25,6 @@ session:
 warnings:
   delete_page: true
 edit_mode: normal
-frontend_pages_target: _blank
 show_github_msg: true
 pages_list_display_field: title
 google_fonts: false

blueprints.yaml

@@ -137,16 +137,6 @@ form:
         expert: Expert
       help: Auto will use blueprint if available, if none found, it will use "Expert" mode.
 
-    frontend_pages_target:
-      type: select
-      label: Open frontend pages in
-      size: medium
-      default: _blank
-      options:
-        _blank: New tab
-        frontend_tab: Separate tab (always the same)
-        _self: Current tab
-
     pages.show_parents:
       type: select
       size: medium

classes/admin.php

@@ -1791,4 +1791,9 @@ class Admin
 
         return false;
     }
+
+    public function getReferrer()
+    {
+        return $_SERVER['HTTP_REFERER'];
+    }
 }

languages/en.yaml

@@ -711,4 +711,5 @@ PLUGIN_ADMIN:
   ROUTE_DEFAULT: "Default Route"
   ROUTE_CANONICAL: "Canonical Route"
   ROUTE_ALIASES: "Route Aliases"
+  OPEN_NEW_TAB: "Open in new tab"
 

pages/admin/preview.md

@@ -0,0 +1,7 @@
+---
+title: Preview
+
+access:
+    admin.pages: true
+    admin.super: true
+---

themes/grav/scss/preset.scss

@@ -1556,5 +1556,15 @@ body .bootstrap-datetimepicker-widget {
     }
 }
 
+.preview-wrapper {
+    iframe {
+        @if (lightness($page-bg) < 50) {
+            border: 1px solid lighten($page-bg, 3%)
+        } @else {
+            border: 1px solid darken($page-bg, 3%)
+        }
+    }
+}
+
 // Range-field
 @import "template/modules/input-range";

themes/grav/scss/template/_admin.scss

@@ -1166,7 +1166,6 @@ body.sidebar-quickopen #admin-main {
 }
 
 // Reinstall packages
-
 .updates-checked {
     .button-reinstall-package {
         display: inline-block!important;
@@ -1178,3 +1177,14 @@ body.sidebar-quickopen #admin-main {
         }
     }
 }
+
+// Preview
+.preview-wrapper {
+    .content-padding {
+        position: absolute;
+        top: 0;
+        bottom: 0;
+        right: 0;
+        left: 0;
+    }
+}

themes/grav/templates/pages.html.twig

@@ -41,9 +41,8 @@
     {{ parent() }}
 {% endblock %}
 
-{% set preview_html = (base_url_relative_frontend|rtrim('/') ~ (context.home ? '' : context.route)) ?: '/' %}
+{% set preview_html = (base_url|rtrim('/') ~ '/preview' ~ (context.home ? '' : context.route)) ?: '/' %}
-{% set preview_target = config.plugins.admin.frontend_pages_target %}
+{% set preview_link = context.routable ? '<a class="button" href="' ~ preview_html ~ '" title="' ~ "PLUGIN_ADMIN.PREVIEW"|tu ~ '"> <i class="fa fa-fw fa-eye" style="font-size:18px;margin-right:0;"></i></a>' : '' %}
-{% set preview_link = context.routable ? '<a class="button" target="' ~ preview_target ~ '" href="' ~ preview_html ~ '" title="' ~ "PLUGIN_ADMIN.PREVIEW"|tu ~ '"> <i class="fa fa-fw fa-eye" style="font-size:18px;margin-right:0;"></i></a>' : '' %}
 
 {% macro loop(page, depth, twig_vars) %}
     {% set separator = twig_vars['config'].system.param_sep %}
@@ -96,8 +95,8 @@
                     <p class="page-route">{{ p.header.routes.default ?: p.route }} <span class="spacer"><i class="fa fa-long-arrow-right"></i></span> {{ p.template() }}</p>
                 </div>
                 <span class="page-item__tools">
-                    {% set preview_html = (base_url_relative_frontend|rtrim('/') ~ (p.home ? '' : p.route)) ?: '/' %}
+                    {% set preview_html = (base_url|rtrim('/') ~ '/preview' ~ (p.home ? '' : p.route)) ?: '/' %}
-                    {% set preview_link = p.routable ? '<a class="page-view" target="' ~ preview_target ~ '" href="' ~ preview_html ~ '" title="' ~ "PLUGIN_ADMIN.PREVIEW"|tu ~ '"> <i class="fa fa-fw fa-eye"></i></a>' : '' %}
+                    {% set preview_link = p.routable ? '<a class="page-view" href="' ~ preview_html ~ '" title="' ~ "PLUGIN_ADMIN.PREVIEW"|tu ~ '"> <i class="fa fa-fw fa-eye"></i></a>' : '' %}
                     {{ preview_link|raw }}
                     {% if warn %}
                         <a href="#delete" data-remodal-target="delete" data-delete-url="{{ uri.addNonce(page_url ~ '/task' ~ separator ~ 'delete', 'admin-form', 'admin-nonce') }}" class="page-delete" ><i class="fa fa-close"></i></a>

themes/grav/templates/partials/base-root.html.twig

@@ -46,6 +46,7 @@
                     {% block titlebar %}{% endblock %}
                 </div>
 
+                {% block content_wrapper %}
                 <div class="content-wrapper">
                     <div class="{% if config.plugins.admin.content_padding %}content-padding{% endif %}">
                         {% block messages %}
@@ -70,7 +71,9 @@
                         {% endblock %}
                     </div>
                 </div>
+                {% endblock %}
 
+                {% block modals %}
                 <div class="remodal" data-remodal-id="generic" data-remodal-options="hashTracking: false">
                     <form>
                         <h1>{{ "PLUGIN_ADMIN.ERROR"|tu }}</h1>
@@ -105,6 +108,7 @@
                         </div>
                     </form>
                 </div>
+                {% endblock %}
 
             </main>
             <div id='overlay'></div>

themes/grav/templates/preview.html.twig

@@ -0,0 +1,22 @@
+{% extends 'partials/base.html.twig' %}
+
+{% set route = admin.route == '' ? '' : '/' ~ admin.route %}
+{% set preview_link = base_url_relative_frontend|rtrim('/') ~ route %}
+
+{% block titlebar %}
+
+    <div class="button-bar">
+        <a class="button" href="{{ admin.getReferrer() }}"><i class="fa fa-reply"></i> {{ "PLUGIN_ADMIN.BACK"|tu }}</a>
+        <a class="button" href="{{ preview_link }}" target="_blank"><i class="fa fa-external-link"></i> {{ "PLUGIN_ADMIN.OPEN_NEW_TAB"|tu }}</a>
+    </div>
+    <h1><i class="fa fa-fw fa-eye"></i> {{ "PLUGIN_ADMIN.PREVIEW"|tu }}: <strong>/{{ admin.route }}</strong></h1>
+{% endblock %}
+
+{% block content_wrapper %}
+
+    <div class="content-wrapper preview-wrapper">
+        <div class="content-padding" width="100%" height="100%">
+            <iframe width="100%" height="100%" frameborder="0" src="{{ preview_link }}" />
+        </div>
+    </div>
+{% endblock %}