From 3e2beab52631135f77d0ad5b6ed297458bfff2f2 Mon Sep 17 00:00:00 2001
From: Andreas Gohr <andi@splitbrain.org>
Date: Fri, 26 Jun 2015 13:31:46 +0200
Subject: added a simple loading screen for the JavaScript preview

---
 lib/plugins/styling/lang/en/lang.php |  2 +-
 lib/plugins/styling/script.js        | 25 ++++++++++++++++++++++++-
 lib/plugins/styling/style.less       |  4 ++++
 3 files changed, 29 insertions(+), 2 deletions(-)

(limited to 'lib/plugins')

diff --git a/lib/plugins/styling/lang/en/lang.php b/lib/plugins/styling/lang/en/lang.php
index 85ac0ec29..a076065cb 100644
--- a/lib/plugins/styling/lang/en/lang.php
+++ b/lib/plugins/styling/lang/en/lang.php
@@ -8,7 +8,7 @@
 // menu entry for admin plugins
 $lang['menu'] = 'Template Style Settings';
 
-
+$lang['js']['loader'] = 'Preview is loading...<br>if this does not goes away, your values may be faulty';
 $lang['js']['popup'] = 'Open as Popup';
 
 // custom language strings for the plugin
diff --git a/lib/plugins/styling/script.js b/lib/plugins/styling/script.js
index 8b4563986..f732c0524 100644
--- a/lib/plugins/styling/script.js
+++ b/lib/plugins/styling/script.js
@@ -3,7 +3,7 @@
 jQuery(function () {
 
     var $styling_plugin = jQuery('#plugin__styling');
-    if(!$styling_plugin.length) return;
+    if (!$styling_plugin.length) return;
 
 
     if (!$styling_plugin.hasClass('ispopup')) {
@@ -21,9 +21,32 @@ jQuery(function () {
     // add the color picker
     $styling_plugin.find('.color').iris({});
 
+    // append the loader screen
+    $loader = window.opener.jQuery('#plugin__styling_loader');
+    if (!$loader.length) {
+        $loader = jQuery('<div id="plugin__styling_loader">' + LANG.plugins.styling.loader + '</div>');
+        $loader.css({
+            'position':         'absolute',
+            'width':            '100%',
+            'height':           '100%',
+            'top':              0,
+            'left':             0,
+            'z-index':          5000,
+            'background-color': '#fff',
+            'opacity':          '0.7',
+            'color':            '#000',
+            'font-size':        '40px',
+            'text-align':       'center',
+            'line-height':      '90px'
+        });
+        window.opener.jQuery('body').append($loader);
+    }
+
     // load preview in main window
     var now = new Date().getTime();
     var $style = window.opener.jQuery('link[rel=stylesheet][href*="lib/exe/css.php"]');
+    $style.attr('href', '');
     $style.attr('href', DOKU_BASE + 'lib/exe/css.php?preview=1&tseed=' + now);
 
+
 });
diff --git a/lib/plugins/styling/style.less b/lib/plugins/styling/style.less
index 8920cb183..3cb563fdb 100644
--- a/lib/plugins/styling/style.less
+++ b/lib/plugins/styling/style.less
@@ -6,3 +6,7 @@
         margin-left: 1em;
     }
 }
+
+#plugin__styling_loader {
+    display: none;
+}
-- 
cgit v1.2.3