diff --git a/lib/plugins/styling/lang/en/lang.php b/lib/plugins/styling/lang/en/lang.php index e50c6b9124a1659ca0042aae2b6d952134001d7f..d100d4324516b014711ddaec5c5d0ec7c4be2667 100644 --- a/lib/plugins/styling/lang/en/lang.php +++ b/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.'; diff --git a/lib/plugins/styling/script.js b/lib/plugins/styling/script.js index 7c8ffae919f701fe734a86ba4623bf81ebe5d69d..6dc4c84ed69f65318ceb6badb07e2376bdadba50 100644 --- a/lib/plugins/styling/script.js +++ b/lib/plugins/styling/script.js @@ -1,10 +1,17 @@ /* 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({}); } ); diff --git a/lib/plugins/styling/style.less b/lib/plugins/styling/style.less new file mode 100644 index 0000000000000000000000000000000000000000..8920cb183334b188a2db3f5afbab73f5c134f55b --- /dev/null +++ b/lib/plugins/styling/style.less @@ -0,0 +1,8 @@ +#plugin__styling { + + h1 button { + font-size: 12px; + line-height: 16px; + margin-left: 1em; + } +}