xref: /dokuwiki/lib/scripts/page.js (revision eea912192ec9661fe82639db9442586954f6932e) 
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    },
14
15    /**
16     * Highlight the section when hovering over the appropriate section edit button
17     *
18     * @author Andreas Gohr <andi@splitbrain.org>
19     */
20    sectionHighlight: function() {
21        jQuery('form.btn_secedit')
22            .mouseover(function(e){
23                var tgt = this.parentNode;
24                var nr = tgt.className.match(/(\s+|^)editbutton_(\d+)(\s+|$)/)[2];
25                do {
26                    tgt = tgt.previousSibling;
27                } while (tgt !== null && typeof tgt.tagName === 'undefined');
28                if (tgt === null) return;
29                while(typeof tgt.className === 'undefined' ||
30                      tgt.className.match('(\\s+|^)sectionedit' + nr + '(\\s+|$)') === null) {
31                    if (typeof tgt.className !== 'undefined') {
32                        jQuery(tgt).addClass('section_highlight');
33                    }
34                    tgt = (tgt.previousSibling !== null) ? tgt.previousSibling : tgt.parentNode;
35                }
36
37                jQuery(tgt).addClass('section_highlight');
38            })
39            .mouseout(function(e){
40                jQuery('.section_highlight').removeClass('section_highlight');
41            });
42    },
43
44    /**
45     * Create/get a insitu popup used by the footnotes
46     *
47     * @param target - the DOM element at which the popup should be aligned at
48     * @param popup_id - the ID of the (new) DOM popup
49     * @return the Popup JQuery object
50     */
51    insituPopup: function(target, popup_id) {
52        // get or create the popup div
53        var $fndiv = jQuery('#' + popup_id);
54
55        // popup doesn't exist, yet -> create it
56        if($fndiv.length === 0){
57            $fndiv = jQuery(document.createElement('div'))
58                .attr('id', popup_id)
59                .addClass('insitu-footnote JSpopup')
60                .mouseleave(function () {jQuery(this).hide();});
61            jQuery('div.dokuwiki:first').append($fndiv);
62        }
63
64        // position() does not support hidden elements
65        $fndiv.show().position({
66            my: 'left top',
67            at: 'left center',
68            of: target
69        }).hide();
70
71        return $fndiv;
72    },
73
74    /**
75     * Display an insitu footnote popup
76     *
77     * @author Andreas Gohr <andi@splitbrain.org>
78     * @author Chris Smith <chris@jalakai.co.uk>
79     */
80    footnoteDisplay: function(e){
81        var $fndiv = dw_page.insituPopup(this, 'insitu__fn');
82
83        // locate the footnote anchor element
84        var $a = jQuery("#fn__" + e.target.id.substr(5));
85        if (!$a.length){ return; }
86
87        // anchor parent is the footnote container, get its innerHTML
88        var content = new String ($a.parent().parent().html());
89
90        // strip the leading content anchors and their comma separators
91        content = content.replace(/<sup>.*<\/sup>/gi, '');
92        content = content.replace(/^\s+(,\s+)+/,'');
93
94        // prefix ids on any elements with "insitu__" to ensure they remain unique
95        content = content.replace(/\bid=(['"])([^"']+)\1/gi,'id="insitu__$2');
96
97        // now put the content into the wrapper
98        $fndiv.html(content);
99        $fndiv.show();
100    }
101};
102
103jQuery(dw_page.init);
104