From d071b66c820e5b1ecc60efc27a15e113c88832af Mon Sep 17 00:00:00 2001
From: Andreas Gohr <andi@splitbrain.org>
Date: Sun, 17 May 2015 20:40:33 +0200
Subject: [PATCH] autopreview in styler plugin
---
lib/plugins/styler/action.php | 7 +-
lib/plugins/styler/admin.php | 8 +--
lib/plugins/styler/script.js | 119 +++++++++++++++++++++++-----------
3 files changed, 91 insertions(+), 43 deletions(-)
diff --git a/lib/plugins/styler/action.php b/lib/plugins/styler/action.php
index 35e2f8f3c..1cc712a15 100644
--- a/lib/plugins/styler/action.php
+++ b/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);
+ }
}
}
diff --git a/lib/plugins/styler/admin.php b/lib/plugins/styler/admin.php
index 432b22279..a66dfbb11 100644
--- a/lib/plugins/styler/admin.php
+++ b/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());
diff --git a/lib/plugins/styler/script.js b/lib/plugins/styler/script.js
index 79df8a88b..a4fb601c8 100644
--- a/lib/plugins/styler/script.js
+++ b/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
--
GitLab