xref: /dokuwiki/lib/plugins/styling/script.js (revision 49f111354ae7007893e877ceaeaed0dd3367e8f2) 
1/* DOKUWIKI:include_once iris.js */
2
3jQuery(function () {
4    // user openend the admin page, set cookie and redirect
5    if (jQuery('#plugin__styling').length) {
6        DokuCookie.setValue('styling_plugin', 1);
7        document.location.href = document.location.href.replace(/&?do=admin/, '');
8    }
9
10    // continue only if the styling Dialog is currently enabled
11    if (DokuCookie.getValue('styling_plugin') != 1) return;
12
13    var styling_timeout = null;
14
15    // create dialog element
16    var $dialog = jQuery(document.createElement('div'));
17    jQuery('body').append($dialog);
18
19
20    /**
21     * updates the current CSS with a new preview one
22     */
23    function styling_updateCSS() {
24        var now = new Date().getTime();
25        var $style = jQuery('link[rel=stylesheet][href*="lib/exe/css.php"]');
26        $style.attr('href', DOKU_BASE + 'lib/exe/css.php?preview=1&tseed=' + now);
27    }
28
29    /**
30     * save current values and reload preview (debounced)
31     */
32    function styling_saveAndUpdate() {
33        if (styling_timeout) window.clearTimeout(styling_timeout);
34        styling_timeout = window.setTimeout(function () {
35            styling_timeout = null;
36
37            var params = $dialog.find('input[type=text]').serializeArray();
38            params[params.length] = { name: 'call', value: 'plugin_styling'};
39            params[params.length] = {name: 'run', value: 'preview'};
40
41            jQuery.post(
42                    DOKU_BASE + 'lib/exe/ajax.php',
43                params,
44                styling_updateCSS
45            );
46        }, 500);
47    }
48
49    // load the dialog content and apply listeners
50    $dialog.load(
51            DOKU_BASE + 'lib/exe/ajax.php',
52        {
53            'call': 'plugin_styling',
54            'run':  'html',
55            'id':   JSINFO.id
56        },
57        function () {
58            // load the preview template
59            styling_updateCSS();
60
61            // open the dialog
62            $dialog.dialog({
63                'title':    LANG.plugins.styling.menu,
64                'width':    500,
65                'height':   500,
66                'top':      50,
67                'position': { 'my': 'left bottom', 'at': 'left bottom', 'of': window },
68                // bring everything back to normal
69                'close':    function (event, ui) {
70                    // disable the styling plugin again
71                    DokuCookie.setValue('styling_plugin', 0);
72                    // reload
73                    document.location.reload()
74                }
75            });
76
77            // we don't need the manual preview in JS mode
78            $dialog.find('.btn_preview').hide();
79
80            // add the color picker  FIXME add saveAndUpdate to correct event
81            $dialog.find('.color').iris({ });
82
83            // listen to keyup events
84            $dialog.find('input[type=text]').keyup(function () {
85                console.log('change');
86                styling_saveAndUpdate();
87            });
88
89        }
90    );
91
92});
93