added js for whitebox

themes/grav/app/main.js

@@ -14,6 +14,7 @@ import toastr from './utils/toastr';
 import request from './utils/request';
 import './utils/2fa';
 import './tools';
+import './whitebox';
 
 // bootstrap jQuery extensions
 import './utils/bootstrap-transition';

themes/grav/app/whitebox/compile.js

@@ -0,0 +1,23 @@
+import { config } from 'grav-config';
+import request from '../utils/request';
+
+export default ({ preview = false, color_scheme = {}, fonts = {}, callback = () => {} } = {}) => {
+    const URI = `${config.current_url}.json/task:compileScss`;
+    request(URI, {
+        method: 'post',
+        body: Object.assign({}, preview ? { preview } : null, color_scheme, fonts)
+    }, callback);
+};
+
+export const prepareElement = (element) => {
+    element.data('busy_right_now', true);
+    if (!element.data('current_icon')) {
+        element.data('current_icon', element.find('.fa').attr('class'));
+    }
+    element.find('.fa').attr('class', 'fa fa-fw fa-spin fa-spinner');
+};
+
+export const resetElement = (element) => {
+    element.data('busy_right_now', false);
+    element.find('.fa').attr('class', element.data('current_icon'));
+};

themes/grav/app/whitebox/index.js

@@ -0,0 +1,68 @@
+import $ from 'jquery';
+import Compile, { prepareElement, resetElement } from './compile';
+import * as Forms from '../forms';
+import { hex2rgb } from '../utils/colors';
+import './presets';
+
+const body = $('body');
+const FormState = Forms.default.FormState.Instance;
+const compiler = (element, preview = false, callback = () => {}) => {
+    prepareElement(element);
+
+    let fields = FormState.collect();
+    Compile({
+        preview,
+        color_scheme: fields.filter((value, key) => key.match(/^data\[color_scheme\]/)).toJS(),
+        fonts: fields.filter((value, key) => key.match(/^data\[fonts\]/)).toJS(),
+        callback: (response) => {
+            callback.call(callback, response);
+            resetElement(element);
+        }
+    });
+};
+
+body.on('click', '[data-preview-scss]', (event) => {
+    event && event.preventDefault();
+    let element = $(event.currentTarget);
+    if (element.data('busy_right_now')) { return false; }
+
+    compiler(element, true, (response) => {
+        if (response.files) {
+            Object.keys(response.files).forEach((key) => {
+                let file = $(`#admin-pro-preview-${key}`);
+                let timestamp = Date.now();
+                if (!file.length) {
+                    file = $(`<link id="admin-pro-preview-${key}" type="text/css" rel="stylesheet" />`);
+                    $('head').append(file);
+
+                    if (!$('[data-reset-scss]').length) {
+                        let reset = $('<button class="button" data-reset-scss style="margin-left: 5px;"><i class="fa fa-fw fa-history"></i> Reset</button>');
+                        reset.insertAfter(element);
+                    }
+                }
+
+                file.attr('href', `${response.files[key]}?${timestamp}`);
+            });
+        }
+    });
+});
+
+body.on('click', '[data-recompile-scss]', (event) => {
+    event && event.preventDefault();
+    let element = $(event.currentTarget);
+    if (element.data('busy_right_now')) { return false; }
+
+    compiler(element, false);
+});
+
+body.on('change._grav_colorpicker', '[data-grav-colorpicker]', (event, input, hex, opacity) => {
+    let RGB = hex2rgb(hex);
+    let YIQ = ((RGB.r * 299) + (RGB.g * 587) + (RGB.b * 114)) / 1000;
+    let contrast = YIQ >= 128 || opacity <= 0.50 ? 'dark' : 'light';
+
+    input.removeClass('dark-text light-text').addClass(`${contrast}-text`);
+});
+
+body.ready(() => {
+    $('[data-grav-colorpicker]').trigger('keyup');
+});

themes/grav/app/whitebox/presets.js

@@ -0,0 +1,64 @@
+import $ from 'jquery';
+import * as Forms from '../forms';
+
+let body = $('body');
+let fields = [];
+const FormState = Forms.default.FormState.Instance;
+const setField = (field, value) => {
+    let name = field.prop('name');
+    let tag = field.prop('tagName').toLowerCase();
+    let type = field.prop('type');
+
+    fields.push(name);
+    switch (tag) {
+        case 'select':
+            field.val(value);
+            field.data('selectize').setValue(value);
+            field.trigger('change');
+            break;
+        case 'input':
+            if (type === 'radio') {
+                let strValue = value ? '1' : '0';
+                field.filter((index, radio) => $(radio).val() === strValue).prop('checked', true);
+
+                break;
+            }
+
+            if (type === 'checkbox') {
+                field.prop('checked', value);
+                break;
+            }
+            field.val(value);
+            field.trigger('keyup');
+    }
+};
+
+body.on('click', '[data-preset-values]', (event) => {
+    let target = $(event.currentTarget);
+    let data = target.data('preset-values');
+
+    Object.keys(data).forEach((section) => {
+        if (typeof data[section] === 'string') { return; }
+
+        Object.keys(data[section]).forEach((key) => {
+            let field = $(`[name="data[color_scheme][${section}][${key}]"], [name="data[${section}][${key}]"]`);
+            let value = data[section][key];
+            setField(field, value);
+        });
+    });
+});
+
+body.on('click', '[data-reset-scss]', (event) => {
+    event && event.preventDefault();
+    let element = $(event.currentTarget);
+    let links = $('link[id^=admin-pro-preview-]');
+
+    element.remove();
+    links.remove();
+
+    fields.forEach((field) => {
+        let value = FormState.loadState.get(field);
+        setField($(`[name="${field}"]`), value);
+    });
+    fields = [];
+});