Added CMS preview for components

admin/client/src/bundles/preview.js

@@ -0,0 +1,6 @@
+/* SilverWare Preview Bundle
+===================================================================================================================== */
+
+// Load Styles:
+
+require('styles/preview.scss');

admin/client/src/styles/bundle.scss

@@ -1,9 +1,10 @@
 /* SilverWare Admin Bundle
 ===================================================================================================================== */
 
-// Import Admin Variables:
+// Import Admin Styles:
 
 @import "~admin/styles/variables";
+@import "~admin/styles/legacy/themes/default";
 
 // Import Local Variables:
 

admin/client/src/styles/preview.scss

@@ -0,0 +1,15 @@
+/* SilverWare Admin Bundle
+===================================================================================================================== */
+
+// Import Admin Styles:
+
+@import "~admin/styles/variables";
+@import "~admin/styles/legacy/themes/default";
+
+// Import Local Variables:
+
+@import "variables";
+
+// Import Styles:
+
+@import "preview/ComponentPreview";

admin/client/src/styles/preview/ComponentPreview.scss

@@ -0,0 +1,67 @@
+/* Component Preview Styles
+===================================================================================================================== */
+
+.cms-preview-component {
+
+  overflow: hidden;
+
+  .cms-preview-wrapper {
+
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    position: absolute;
+
+    > header {
+
+      min-height: $toolbar-total-height;
+      padding-left: $spacer;
+      white-space: nowrap;
+      font-size: $font-size-xs;
+
+      background: {
+        repeat: repeat;
+        position: left bottom;
+        color: $color-darker-bg;
+        image: url("~admin/images/textures/cms_content_header.png");
+      }
+
+      > h1 {
+
+        margin: 0;
+        color: $color-text-default;
+        font-size: 1.2em;
+        font-weight: normal;
+        line-height: $toolbar-total-height;
+
+        i, span.class {
+          color: $color-text;
+        }
+
+      }
+
+    }
+
+    > div.component {
+
+      top: $toolbar-total-height;
+      bottom: 0;
+      width: 100%;
+      height: auto;
+      padding: $spacer;
+      overflow-x: hidden;
+      overflow-y: auto;
+      position: absolute;
+      background-color: $tab-panel-texture-color;
+
+      > div.preview {
+        background-color: $white;
+        box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.20);
+      }
+
+    }
+
+  }
+
+}

src/Components/BaseComponent.php

@@ -240,16 +240,6 @@ public function getShowTitle()
         return !$this->HideTitle;
     }
 
-    /**
-     * Answers the base template used to render the receiver.
-     *
-     * @return string|array|SSViewer
-     */
-    public function getBaseTemplate()
-    {
-        return self::class;
-    }
-
     /**
      * Renders the component for the HTML template.
      *
@@ -262,7 +252,7 @@ public function renderSelf($layout = null, $title = null)
     {
         return $this->getController()->customise([
             'Content' => $this->renderContent($layout, $title)
-        ])->renderWith($this->getBaseTemplate());
+        ])->renderWith(self::class);
     }
 
     /**

src/Model/Component.php

@@ -361,6 +361,16 @@ public function providePermissions()
         ];
     }
 
+    /**
+     * Answers the type of component as a string.
+     *
+     * @return string
+     */
+    public function getComponentType()
+    {
+        return $this->i18n_singular_name();
+    }
+
     /**
      * Answers the default style ID for the HTML template.
      *
@@ -698,16 +708,6 @@ public function tag($content = null)
         return $this->getOpeningTag() . $content . $this->getClosingTag();
     }
 
-    /**
-     * Answers the template used to render the receiver.
-     *
-     * @return string|array|SSViewer
-     */
-    public function getTemplate()
-    {
-        return static::class;
-    }
-
     /**
      * Renders the component for the HTML template.
      *
@@ -722,7 +722,7 @@ public function renderSelf($layout = null, $title = null)
             'Self' => $this,
             'Title' => $title,
             'Layout' => $layout
-        ])->renderWith($this->getTemplate());
+        ])->renderWith(static::class);
     }
 
     /**
@@ -743,4 +743,14 @@ public function renderChildren($layout = null, $title = null)
 
         return $html;
     }
+
+    /**
+     * Renders the component for preview within the CMS.
+     *
+     * @return DBHTMLText|string
+     */
+    public function renderPreview()
+    {
+        return $this->renderSelf();
+    }
 }

src/Model/ComponentController.php

@@ -18,6 +18,10 @@
 namespace SilverWare\Model;
 
 use SilverStripe\CMS\Controllers\ContentController;
+use SilverStripe\View\Requirements;
+use SilverStripe\View\SSViewer;
+use Page;
+use PageController;
 
 /**
  * An extension of the content controller class for a SilverWare component controller.
@@ -30,4 +34,31 @@
  */
 class ComponentController extends ContentController
 {
+    /**
+     * Answers a viewer object to render the template for the current page.
+     *
+     * @param $action string
+     *
+     * @return SSViewer
+     */
+    public function getViewer($action)
+    {
+        // Answer Viewer Object (from parent):
+
+        if (!$this->isCMSPreview()) {
+            return parent::getViewer($action);
+        }
+
+        // Load Page Requirements (uses theme):
+
+        PageController::create(Page::create())->doInit();
+
+        // Load Preview Requirements:
+
+        Requirements::css(SILVERWARE_DIR . '/admin/client/dist/styles/preview.css');
+
+        // Answer Viewer Object (for CMS preview):
+
+        return new SSViewer(sprintf('%s\CMSPreview', Component::class));
+    }
 }

src/View/Renderable.php

@@ -395,6 +395,16 @@ public function cleanStyleClasses($string)
         return preg_replace('/[^a-zA-Z0-9_-]+|[\s]+/', ' ', trim($string));
     }
 
+    /**
+     * Answers true if the receiver is being previewed within the CMS.
+     *
+     * @return boolean
+     */
+    public function isCMSPreview()
+    {
+        return (isset($_GET['CMSPreview']) && $_GET['CMSPreview']);
+    }
+
     /**
      * Answers true if the object uses a render cache.
      *

templates/SilverWare/Model/Component/CMSPreview.ss

@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+
+<html class="no-js" lang="$ContentLocale">
+  <head>
+    <% base_tag %>
+    <meta charset="utf-8">
+    <meta http-equiv="x-ua-compatible" content="ie=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+    $MetaTags(false)<title>$Title</title>
+  </head>
+  <body class="cms-preview-component">
+    <div class="cms-preview-wrapper">
+      <header>
+        <h1>
+          <i class="fa fa-fw fa-eye"></i>
+          <span class="title"><%t SilverWare\Model\Component.PREVIEW 'Preview' %></span>
+          <span class="class">($ComponentType)</span>
+        </h1>
+      </header>
+      <div class="component">
+        <div class="preview">$renderPreview.RAW</div>
+      </div>
+    </div>
+  </body>
+</html>

templates/SilverWare/Model/Panel.ss

@@ -0,0 +1 @@
+<% loop $AllChildren %>$Me<% end_loop %>

webpack.config.js

@@ -159,7 +159,8 @@ const config = (env) => {
   return [
     {
       entry: {
-        'bundle': path.resolve(PATHS.ADMIN.BUNDLES, 'bundle.js')
+        'bundle': path.resolve(PATHS.ADMIN.BUNDLES, 'bundle.js'),
+        'preview': path.resolve(PATHS.ADMIN.BUNDLES, 'preview.js')
       },
       output: {
         path: PATHS.ADMIN.DIST,