Added theme whitelabel export functionality

blueprints.yaml

@@ -388,6 +388,12 @@ form:
               label: PLUGIN_ADMIN.PRESETS
               style: vertical
 
+            whitelabel.color_scheme.name:
+              type: text
+              label: PLUGIN_ADMIN.COLOR_SCHEME_NAME
+              help: PLUGIN_ADMIN.COLOR_SCHEME_NAME_HELP
+              placeholder: PLUGIN_ADMIN.COLOR_SCHEME_NAME_PLACEHOLDER
+
             colorschemes:
               type: colorscheme
               label: PLUGIN_ADMIN.COLOR_SCHEME_LABEL

classes/plugin/AdminController.php

@@ -2188,6 +2188,32 @@ class AdminController extends AdminBaseController
 
     }
 
+    protected function taskExportScss()
+    {
+        if (!$this->authorizeTask('compile scss', ['admin.pages', 'admin.super'])) {
+            return false;
+        }
+
+        $data = ['color_scheme' => $this->data['whitelabel']['color_scheme'] ?? null];
+        $name = $this->data['whitelabel']['color_scheme']['name'] ?? 'theme';
+        //todo slugify name
+        $location  = 'asset://' . $name . '.yaml';
+
+        [$status, $msg] = $this->grav['admin-whitelabel']->exportPresetScsss($data, $location);
+
+        $json_response = [
+            'status'  => 'success' ,
+            'message' => 'Theme Export Ready',
+            'files' => [
+                'download' => Utils::url($location)
+            ]
+        ];
+
+        echo json_encode($json_response);
+        exit;
+
+    }
+
     /**
      * Handles deleting a media file from a page
      *

classes/plugin/WhiteLabel.php

@@ -3,8 +3,10 @@ namespace Grav\Plugin\Admin;
 
 use Grav\Common\Data\Data;
 use Grav\Common\Grav;
+use Grav\Framework\File\File;
 use RocketTheme\Toolbox\Event\Event;
 use RocketTheme\Toolbox\ResourceLocator\UniformResourceLocator;
+use Symfony\Component\Yaml\Yaml;
 
 class WhiteLabel
 {
@@ -66,4 +68,22 @@ class WhiteLabel
         return [false, ' Could not be recompiled, missing color scheme...'];
     }
 
+    public function exportPresetScsss($config, $location = 'asset://admin-theme-export.yaml')
+    {
+
+        if (isset($config['color_scheme'])) {
+
+            $color_scheme = $config['color_scheme'];
+
+            $body = Yaml::dump($color_scheme);
+
+            $file = new File($location);
+            $file->save($body);
+
+            return [true, 'File created successfully'];
+
+        } else {
+            return [false, ' Could not export, missing color scheme...'];
+        }
+    }
 }

languages/en.yaml

@@ -913,6 +913,9 @@ PLUGIN_ADMIN:
   PRESETS: "Presets"
   COLOR_SCHEME_LABEL: "Color Scheme"
   COLOR_SCHEME_HELP: "Choose a color scheme from a list of predefined combinations, or add your own style"
+  COLOR_SCHEME_NAME: "Color Scheme Name"
+  COLOR_SCHEME_NAME_HELP: "Give a name to your custom theme for exporting and sharing"
+  COLOR_SCHEME_NAME_PLACEHOLDER: "Shades of Blue"
   PRIMARY_ACCENT_LABEL: "Primary Accent"
   PRIMARY_ACCENT_HELP: "Select which color set the primary accent should use for it's color scheme"
   SECONDARY_ACCENT_LABEL: "Secondary Accent"
@@ -936,3 +939,4 @@ PLUGIN_ADMIN:
   TOP_LEFT_CUSTOM_LOGO_HELP: ""
   LOAD_PRESET: "Load Preset"
   RECOMPILE: "Recompile"
+  EXPORT: "Export"

themes/grav/app/whitelabel/compile.js

@@ -1,8 +1,10 @@
 import { config } from 'grav-config';
 import request from '../utils/request';
 
-export default ({ preview = false, color_scheme = {}, fonts = {}, callback = () => {} } = {}) => {
+export default ({ preview = false, exportScss = false, color_scheme = {}, fonts = {}, callback = () => {} } = {}) => {
-    const URI = `${config.current_url}.json/task:compileScss`;
+    let task = exportScss ? 'exportScss' : 'compileScss';
+    console.log(exportScss, task);
+    const URI = `${config.current_url}.json/task:${task}`;
     request(URI, {
         method: 'post',
         body: Object.assign({}, preview ? { preview } : null, color_scheme)

themes/grav/app/whitelabel/index.js

@@ -6,12 +6,13 @@ import './presets';
 
 const body = $('body');
 const FormState = Forms.FormState.Instance;
-const compiler = (element, preview = false, callback = () => {}) => {
+const compiler = (element, preview = false, exportScss = false, callback = () => {}) => {
     prepareElement(element);
 
     let fields = FormState.collect();
     Compile({
         preview,
+        exportScss,
         color_scheme: fields.filter((value, key) => key.match(/^data\[whitelabel]\[color_scheme]/)).toJS(),
         callback: (response) => {
             callback.call(callback, response);
@@ -25,7 +26,7 @@ body.on('click', '[data-preview-scss]', (event) => {
     let element = $(event.currentTarget);
     if (element.data('busy_right_now')) { return false; }
 
-    compiler(element, true, (response) => {
+    compiler(element, true, false, (response) => {
         if (response.files) {
             Object.keys(response.files).forEach((key) => {
                 let file = $(`#admin-pro-preview-${key}`);
@@ -51,7 +52,32 @@ body.on('click', '[data-recompile-scss]', (event) => {
     let element = $(event.currentTarget);
     if (element.data('busy_right_now')) { return false; }
 
-    compiler(element, false);
+    compiler(element, false, false);
+});
+
+body.on('click', '[data-export-scss]', (event) => {
+    event && event.preventDefault();
+    let element = $(event.currentTarget);
+    if (element.data('busy_right_now')) { return false; }
+
+    compiler(element, true, true, (response) => {
+        if (response.files) {
+            Object.keys(response.files).forEach((key) => {
+                if (key === 'download') {
+                    let element = document.createElement('a');
+                    element.setAttribute('href', response.files[key]);
+                    element.setAttribute('download', response.files[key]);
+
+                    element.style.display = 'none';
+                    document.body.appendChild(element);
+
+                    element.click();
+
+                    document.body.removeChild(element);
+                }
+            });
+        }
+    });
 });
 
 body.on('change._grav_colorpicker', '[data-grav-colorpicker]', (event, input, hex, opacity) => {

themes/grav/templates/plugins/admin-buttons.html.twig

@@ -1,2 +1,3 @@
 <button data-preview-scss class="button"><i class="fa fa-fw fa-eye"></i> {{ "PLUGIN_ADMIN.PREVIEW"|tu|e }}</button>
 <button data-recompile-scss class="button"><i class="fa fa-fw fa-tasks"></i> {{ "PLUGIN_ADMIN.RECOMPILE"|tu|e }}</button>
+<button data-export-scss class="button"><i class="fa fa-fw fa-tasks"></i> {{ "PLUGIN_ADMIN.EXPORT"|tu|e }}</button>