fixes various probelms mentioned in #1163

however I think I will convert the dialog to a real popup instead.

lib/plugins/styling/lang/en/lang.php

@@ -7,6 +7,7 @@
 
 // menu entry for admin plugins
 $lang['js']['menu'] = 'Template Style Settings';
+$lang['js']['popup'] = 'Open as Popup';
 
 // custom language strings for the plugin
 $lang['error'] = 'Sorry, this template does not support this functionality.';

lib/plugins/styling/script.js

 /* DOKUWIKI:include_once iris.js */
 
 jQuery(function () {
-    // user openend the admin page, set cookie and redirect
-    if (jQuery('#plugin__styling').length) {
-        DokuCookie.setValue('styling_plugin', 1);
-        document.location.href = document.location.href.replace(/&?do=admin/, '');
+    // add popup option to admin page
+    var $styling_plugin = jQuery('#plugin__styling');
+    if ($styling_plugin.length) {
+        var $hl = $styling_plugin.find('h1').first();
+        var $btn = jQuery('<button class="btn">' + LANG.plugins.styling.popup + '</button>');
+        $hl.append($btn);
+
+        $btn.click(function (e) {
+            DokuCookie.setValue('styling_plugin', 1);
+            document.location.href = document.location.href.replace(/&?do=admin/, '');
+        });
     }
 
     // continue only if the styling Dialog is currently enabled
@@ -16,7 +23,6 @@ jQuery(function () {
     var $dialog = jQuery(document.createElement('div'));
     jQuery('body').append($dialog);
 
-
     /**
      * updates the current CSS with a new preview one
      */
@@ -26,29 +32,28 @@ jQuery(function () {
         $style.attr('href', DOKU_BASE + 'lib/exe/css.php?preview=1&tseed=' + now);
     }
 
-    /**
-     * save current values and reload preview (debounced)
-     */
-    function styling_saveAndUpdate() {
-        if (styling_timeout) window.clearTimeout(styling_timeout);
-        styling_timeout = window.setTimeout(function () {
-            styling_timeout = null;
+    // prepare the dialog
+    $dialog.dialog({
+        'autoOpen':      false,
+        'title':         LANG.plugins.styling.menu,
+        'width':         500,
+        'height':        500,
+        'position':      {'my': 'left bottom', 'at': 'left bottom-40', 'of': window},
+        'closeOnEscape': true,
+
+        // bring everything back to normal on close
+        'close': function (event, ui) {
+            // disable the styling plugin again
+            DokuCookie.setValue('styling_plugin', 0);
+            // reload
+            document.location.reload()
+        }
+    });
 
-            var params = $dialog.find('input[type=text]').serializeArray();
-            params[params.length] = { name: 'call', value: 'plugin_styling'};
-            params[params.length] = {name: 'run', value: 'preview'};
-
-            jQuery.post(
-                    DOKU_BASE + 'lib/exe/ajax.php',
-                params,
-                styling_updateCSS
-            );
-        }, 500);
-    }
 
     // load the dialog content and apply listeners
     $dialog.load(
-            DOKU_BASE + 'lib/exe/ajax.php',
+        DOKU_BASE + 'lib/exe/ajax.php',
         {
             'call': 'plugin_styling',
             'run':  'html',
@@ -59,32 +64,10 @@ jQuery(function () {
             styling_updateCSS();
 
             // open the dialog
-            $dialog.dialog({
-                'title':    LANG.plugins.styling.menu,
-                'width':    500,
-                'height':   500,
-                'top':      50,
-                'position': { 'my': 'left bottom', 'at': 'left bottom', 'of': window },
-                // bring everything back to normal
-                'close':    function (event, ui) {
-                    // disable the styling plugin again
-                    DokuCookie.setValue('styling_plugin', 0);
-                    // reload
-                    document.location.reload()
-                }
-            });
-
-            // we don't need the manual preview in JS mode
-            $dialog.find('.btn_preview').hide();
+            $dialog.dialog('open');
 
             // add the color picker  FIXME add saveAndUpdate to correct event
-            $dialog.find('.color').iris({ });
-
-            // listen to keyup events
-            $dialog.find('input[type=text]').keyup(function () {
-                styling_saveAndUpdate();
-            });
-
+            $dialog.find('.color').iris({});
         }
     );
 

lib/plugins/styling/style.less

+#plugin__styling {
+
+    h1 button {
+        font-size: 12px;
+        line-height: 16px;
+        margin-left: 1em;
+    }
+}