added a simple loading screen for the JavaScript preview

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

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);
 
+
 });

lib/plugins/styling/style.less

@@ -6,3 +6,7 @@
         margin-left: 1em;
     }
 }
+
+#plugin__styling_loader {
+    display: none;
+}