autopreview in styler plugin

lib/plugins/styler/action.php

@@ -91,11 +91,16 @@ class action_plugin_styler extends DokuWiki_Action_Plugin {
         $event->stopPropagation();
 
         global $ID;
+        global $INPUT;
         $ID = getID();
 
         /** @var admin_plugin_styler $hlp */
         $hlp = plugin_load('admin', 'styler');
-        $hlp->form(true);
+        if($INPUT->str('run') == 'preview') {
+            $hlp->run_preview();
+        } else {
+            $hlp->form(true);
+        }
     }
 
 }

lib/plugins/styler/admin.php

@@ -87,13 +87,13 @@ class admin_plugin_styler extends DokuWiki_Admin_Plugin {
 
                 echo '<tr>';
                 echo '<td>'.$name.'</td>';
-                echo '<td><input name="tpl['.hsc($key).']" value="'.hsc($value).'" '.$this->colorClass($key).' />';
+                echo '<td><input type="text" name="tpl['.hsc($key).']" value="'.hsc($value).'" '.$this->colorClass($key).' />';
                 echo '</tr>';
             }
             echo '</table>';
 
             echo '<p class="center">';
-            echo '<input type="submit" name="run[preview]" value="'.$this->getLang('btn_preview').'">';
+            echo '<input type="submit" name="run[preview]" class="btn_preview" value="'.$this->getLang('btn_preview').'">';
             echo '<input type="submit" name="run[reset]" value="'.$this->getLang('btn_reset').'">'; #FIXME only if preview.ini exists
             echo '</p>';
 
@@ -139,9 +139,9 @@ class admin_plugin_styler extends DokuWiki_Admin_Plugin {
     }
 
     /**
-     * saves the preview.ini
+     * saves the preview.ini (alos called from ajax directly)
      */
-    protected function run_preview() {
+    public function run_preview() {
         global $conf;
         $ini = $conf['cachedir'].'/preview.ini';
         io_saveFile($ini, $this->makeini());

lib/plugins/styler/script.js

@@ -7,43 +7,86 @@ jQuery(function () {
         document.location.href = document.location.href.replace(/do=admin/, '');
     }
 
-    // The Styler Dialog is currently enabled, display it here and apply the preview styles
-    if (DokuCookie.getValue('styler_plugin') == 1) {
-        // load dialog
-        var $dialog = jQuery(document.createElement('div'));
-        jQuery('body').append($dialog);
-        $dialog.load(
-                DOKU_BASE + '/lib/exe/ajax.php',
-            {
-                'call': 'plugin_styler',
-                'id':   JSINFO.id
-            },
-            function () {
-                // load the preview template
-                var now = new Date().getTime();
-                var $style = jQuery('link[rel=stylesheet][href*="lib/exe/css.php"]');
-                $style.attr('href', DOKU_BASE + 'lib/exe/css.php?preview=1&tseed=' + now);
-
-                // open the dialog
-                var $dlg = $dialog.dialog({
-                    'title':    LANG.plugins.styler.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 styler plugin again
-                        DokuCookie.setValue('styler_plugin', 0);
-                        // reload
-                        document.location.reload()
-                    }
-                });
-
-                jQuery('.styler .color').iris({
-                });
-
-            }
-        );
+    // continue only if the Styler Dialog is currently enabled
+    if (DokuCookie.getValue('styler_plugin') != 1) return;
+
+    var styler_timeout = null;
+
+    // create dialog element
+    var $dialog = jQuery(document.createElement('div'));
+    jQuery('body').append($dialog);
+
+
+    /**
+     * updates the current CSS with a new preview one
+     */
+    function styler_updateCSS() {
+        var now = new Date().getTime();
+        var $style = jQuery('link[rel=stylesheet][href*="lib/exe/css.php"]');
+        $style.attr('href', DOKU_BASE + 'lib/exe/css.php?preview=1&tseed=' + now);
+    }
+
+    /**
+     * save current values and reload preview (debounced)
+     */
+    function styler_saveAndUpdate() {
+        if (styler_timeout) window.clearTimeout(styler_timeout);
+        styler_timeout = window.setTimeout(function () {
+            styler_timeout = null;
+
+            var params = $dialog.find('input[type=text]').serializeArray();
+            params[params.length] = { name: 'call', value: 'plugin_styler'};
+            params[params.length] = {name: 'run', value: 'preview'};
+
+            jQuery.post(
+                    DOKU_BASE + '/lib/exe/ajax.php',
+                params,
+                styler_updateCSS
+            );
+        }, 500);
     }
+
+    // load the dialog content and apply listeners
+    $dialog.load(
+            DOKU_BASE + '/lib/exe/ajax.php',
+        {
+            'call': 'plugin_styler',
+            'run':  'html',
+            'id':   JSINFO.id
+        },
+        function () {
+            // load the preview template
+            styler_updateCSS();
+
+            // open the dialog
+            $dialog.dialog({
+                'title':    LANG.plugins.styler.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 styler plugin again
+                    DokuCookie.setValue('styler_plugin', 0);
+                    // reload
+                    document.location.reload()
+                }
+            });
+
+            // we don't need the manual preview in JS mode
+            $dialog.find('.btn_preview').hide();
+
+            // 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 () {
+                console.log('change');
+                styler_saveAndUpdate();
+            });
+
+        }
+    );
+
 });
\ No newline at end of file