DokuWiki

It's better when it's simple

User Tools

Site Tools


Sidebar

Translations of this page?:

Learn about DokuWiki

Advanced Use

Corporate Use

Our Community


Follow us on Facebook, Twitter and other social networks.

tips:copy_section_link

Copy Section Link

An easy way to copy each section link. Copy these files into your conf directory. (Or if they already exist, copy the code into them.)

(As requested on http://forum.dokuwiki.org/thread/5709.)

./conf/userscript.js
/** Show each section link when hovering over each respective headline.
  *
  * @author Anika Henke <anika@selfthinker.org>
  * @license GPL 2 (http://www.gnu.org/licenses/gpl.html)
  */
function addWikiLinksToHeadlines() {
    jQuery('.page h1, .page h2, .page h3, .page h4, .page h5').each(function(){
        $this = jQuery(this);
        var wikiLink  = '[[:'+JSINFO.id+'#'+$this.attr('id')+'|'+$this.text()+']]';
        $this.append(jQuery('<span class="wikiLink">'+wikiLink+'</span>'));
    });
}
 
jQuery(addWikiLinksToHeadlines);
./conf/userstyle.css
.dokuwiki .page h1,
.dokuwiki .page h2,
.dokuwiki .page h3,
.dokuwiki .page h4,
.dokuwiki .page h5 {
    position: relative;
}
 
.dokuwiki span.wikiLink {
    display: none;
    color: #999;
    background-color: #fff;
    font: normal 11px Arial, sans-serif;
    padding: 0 5px;
    position: absolute;
    top: -1em;
    left: 0;
}
 
.dokuwiki .page h1:hover span.wikiLink,
.dokuwiki .page h2:hover span.wikiLink,
.dokuwiki .page h3:hover span.wikiLink,
.dokuwiki .page h4:hover span.wikiLink,
.dokuwiki .page h5:hover span.wikiLink {
    display: block;
}

An improved version of the script

Selecting “tooltip” text manually can be hard, so I added a function to select wikiLink text by clicking on the headline. Also, some plugins can put <a> inside a header, like this:

<h2 class="sectionedit1">
	<a id="This section" name="This section">This section</a>
</h2>

In that case $this.attr('id') wouldn't find id in a header. For that I added if (!anchorId) anchorId = this.childNodes[0].id;.

The resulting script is here:

./conf/userscript.js
/** Show each section link when hovering over each respective headline.
 * Select that link text by mouse click on the headline.
 *
 * @author Anika Henke <anika@selfthinker.org>
 * @author Sancaya (http://zen-do.ru/write)
 * @license GPL 2 (http://www.gnu.org/licenses/gpl.html)
 *
 * See https://www.dokuwiki.org/tips:copy_section_link
 */
 
function selectLink(event)
{
    // header is clicked - select the content of the span at its end
    var headerChildren = this.children;
    var target = headerChildren[headerChildren.length - 1]; // = last child
    var rng, sel;                    // select its text
    if ( document.createRange ) {
        rng = document.createRange();
        rng.selectNode( target );
        sel = window.getSelection();
        sel.removeAllRanges();
        sel.addRange( rng );
    } else {
        var rng = document.body.createTextRange();
        rng.moveToElementText( target );
        rng.select();
    }
}
 
function addWikiLinksToHeadlines() {
    var heads = jQuery('.page h1, .page h2, .page h3, .page h4, .page h5');
    heads.click(selectLink);	// bind selection on mouse click
    var anchorId;
    heads.each(function(){
        $this = jQuery(this);
        anchorId = this.id;     // (and if "id" belongs not to the header
        if (!anchorId) anchorId = this.childNodes[0].id;  // - but to its 1st child)
        var wikiLink = '[[:'+JSINFO.id+'#'+anchorId+'|'+$this.text()+']]';
        $this.append(jQuery('<span class="wikiLink">'+wikiLink+'</span>'));
    });
}
 
jQuery(addWikiLinksToHeadlines);

sancayaConstant Illumination
sancaya

2016-10-20 11:05

Known restrictions

  • Needs the class “page” around the main content in the template (like in the default template).
tips/copy_section_link.txt · Last modified: 2016-10-21 04:05 by sancaya