xref: /dokuwiki/lib/scripts/page.js (revision 44dae8a743d9c3d83f22e6f38a1685c8326a3b62) 
1/**
2 * Page behaviours
3 *
4 * This class adds various behaviours to the rendered page
5 */
6dw_page = {
7    /**
8     * initialize page behaviours
9     */
10    init: function(){
11        dw_page.sectionHighlight();
12        jQuery('a.fn_top').mouseover(dw_page.footnoteDisplay);
13        dw_page.initTocToggle();
14    },
15
16    /**
17     * Highlight the section when hovering over the appropriate section edit button
18     *
19     * @author Andreas Gohr <andi@splitbrain.org>
20     */
21    sectionHighlight: function() {
22        jQuery('form.btn_secedit')
23            .mouseover(function(){
24                var $tgt = jQuery(this).parent(),
25                    nr = $tgt.attr('class').match(/(\s+|^)editbutton_(\d+)(\s+|$)/)[2];
26
27                // Walk the DOM tree up (first previous siblings, then parents)
28                // until boundary element
29                while($tgt.length > 0 && !$tgt.hasClass('sectionedit' + nr)) {
30                    // $.last gives the DOM-ordered last element:
31                    // prev if present, else parent.
32                    $tgt = $tgt.prev().add($tgt.parent()).last();
33                    $tgt.addClass('section_highlight');
34                }
35            })
36            .mouseout(function(){
37                jQuery('.section_highlight').removeClass('section_highlight');
38            });
39    },
40
41    /**
42     * Create/get a insitu popup used by the footnotes
43     *
44     * @param target - the DOM element at which the popup should be aligned at
45     * @param popup_id - the ID of the (new) DOM popup
46     * @return the Popup jQuery object
47     */
48    insituPopup: function(target, popup_id) {
49        // get or create the popup div
50        var $fndiv = jQuery('#' + popup_id);
51
52        // popup doesn't exist, yet -> create it
53        if($fndiv.length === 0){
54            $fndiv = jQuery(document.createElement('div'))
55                .attr('id', popup_id)
56                .addClass('insitu-footnote JSpopup')
57                .mouseleave(function () {jQuery(this).hide();});
58            jQuery('.dokuwiki:first').append($fndiv);
59        }
60
61        // position() does not support hidden elements
62        $fndiv.show().position({
63            my: 'left top',
64            at: 'left center',
65            of: target
66        }).hide();
67
68        return $fndiv;
69    },
70
71    /**
72     * Display an insitu footnote popup
73     *
74     * @author Andreas Gohr <andi@splitbrain.org>
75     * @author Chris Smith <chris@jalakai.co.uk>
76     */
77    footnoteDisplay: function () {
78        var content = jQuery(jQuery(this).attr('href')) // Footnote text anchor
79                      .closest('div.fn').html();
80
81        if (content === null){
82            return;
83        }
84
85        // strip the leading content anchors and their comma separators
86        content = content.replace(/((^|\s*,\s*)<sup>.*?<\/sup>)+\s*/gi, '');
87
88        // prefix ids on any elements with "insitu__" to ensure they remain unique
89        content = content.replace(/\bid=(['"])([^"']+)\1/gi,'id="insitu__$2');
90
91        // now put the content into the wrapper
92        dw_page.insituPopup(this, 'insitu__fn').html(content).show();
93    },
94
95    /**
96     * Adds the toggle switch to the TOC
97     */
98    initTocToggle: function() {
99        var $header, $clicky, $toc, $tocul, setClicky;
100        $header = jQuery('#toc__header');
101        if(!$header.length) {
102            return;
103        }
104        $toc = jQuery('#toc__inside');
105        $tocul = $toc.children('ul.toc');
106
107        setClicky = function(hiding){
108            if(hiding){
109                $clicky.html('<span>+</span>');
110                $clicky[0].className = 'toc_open';
111            }else{
112                $clicky.html('<span>&minus;</span>');
113                $clicky[0].className = 'toc_close';
114            }
115        };
116
117        $clicky = jQuery(document.createElement('span'))
118                        .attr('id','toc__toggle');
119        $header.css('cursor','pointer')
120               .click(function () {
121                    var hidden;
122
123                    // Assert that $toc instantly takes the whole TOC space
124                    $toc.css('height', $toc.height()).show();
125
126                    hidden = $tocul.stop(true, true).is(':hidden');
127
128                    setClicky(!hidden);
129
130                    // Start animation and assure that $toc is hidden/visible
131                    $tocul.dw_toggle(hidden, function () {
132                        $toc.toggle(hidden);
133                    });
134                })
135               .prepend($clicky);
136
137        setClicky();
138    }
139};
140
141jQuery(dw_page.init);
142