xref: /dokuwiki/lib/scripts/page.js (revision 99e7bfd4c733d81cd01dd2d97e10bb4dda62df66) 
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){
57            $fndiv = jQuery(document.createElement('div'))
58                .attr('id', popup_id)
59                .addClass('insitu-footnote JSpopup')
60                .mouseout(function(e){
61                    // autoclose on mouseout - ignoring bubbled up events
62                    //FIXME can this made simpler in jQuery?
63                    var p = e.relatedTarget || e.toElement;
64                    while (p && p !== this) {
65                        p = p.parentNode;
66                    }
67                    if (p === this) {
68                        return;
69                    }
70                    jQuery(this).hide();
71                });
72
73            jQuery('div.dokuwiki:first').append($fndiv);
74        }
75
76        $fndiv.position({
77            my: 'left top',
78            at: 'left center',
79            of: target
80        });
81
82        $fndiv.hide();
83        return $fndiv;
84    },
85
86    /**
87     * Display an insitu footnote popup
88     *
89     * @author Andreas Gohr <andi@splitbrain.org>
90     * @author Chris Smith <chris@jalakai.co.uk>
91     */
92    footnoteDisplay: function(e){
93        var $fndiv = dw_page.insituPopup(e.target, 'insitu__fn');
94
95        // locate the footnote anchor element
96        var $a = jQuery("#fn__" + e.target.id.substr(5));
97        if (!$a.length){ return; }
98
99        // anchor parent is the footnote container, get its innerHTML
100        var content = new String ($a.parent().parent().html());
101
102        // strip the leading content anchors and their comma separators
103        content = content.replace(/<sup>.*<\/sup>/gi, '');
104        content = content.replace(/^\s+(,\s+)+/,'');
105
106        // prefix ids on any elements with "insitu__" to ensure they remain unique
107        content = content.replace(/\bid=(['"])([^"']+)\1/gi,'id="insitu__$2');
108
109        // now put the content into the wrapper
110        $fndiv.html(content);
111        $fndiv.show();
112    }
113};
114
115jQuery(dw_page.init);
116