1 files changed, 91 insertions, 0 deletions
diff --git a/lib/plugins/styling/script.js b/lib/plugins/styling/script.js
new file mode 100644
index 000000000..7c8ffae91
--- /dev/null
+++ b/lib/plugins/styling/script.js
@@ -0,0 +1,91 @@
+/* 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/, '');
+    }
+
+    // continue only if the styling Dialog is currently enabled
+    if (DokuCookie.getValue('styling_plugin') != 1) return;
+
+    var styling_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 styling_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 styling_saveAndUpdate() {
+        if (styling_timeout) window.clearTimeout(styling_timeout);
+        styling_timeout = window.setTimeout(function () {
+            styling_timeout = null;
+
+            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',
+        {
+            'call': 'plugin_styling',
+            'run':  'html',
+            'id':   JSINFO.id
+        },
+        function () {
+            // load the preview template
+            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();
+
+            // 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();
+            });
+
+        }
+    );
+
+});