Polish localization

Link to this header → Link do nagłówka

Added. Thanks, cqm 23:57, 1 Jun 2013 (UTC)

Slight simplification

You could shorten and simplify your code quite a bit if you used jQuery a little more:

(function ($, mw) {
 
    'use strict';
    
    var translations = {
            en: 'Link to this header',
            pl: 'Link do nagłówka'
        },
        
        i18n = translations[
            mw.config.get('wgContentLanguage')
        ] || translations.en;
    
    $(function () {
        
        if ($('.mw-header-link').length) return;

        mw.util.addCSS(
            '.mw-header-link{' +
                'float:right;' +
                'opacity:0.5;' +
                '-webkit-transition:opacity 0.4s ease;' +
                '-moz-transtion:opacity 0.4s ease;' +
                '-o-transition:opacity 0.4s ease;' +
                'transition:opacity 0.4s ease;' +
            '}' +
            '.mw-header-link:hover{' +
                'opacity:1;' +
            '}'
        );
        
        mw.util.$content
        .find('.mw-headline')
        .each(function (i, title) {
            var $title = $(title);
            $title.after(
                '<a class="mw-header-link" title="'+ i18n + '" href="#' + $title.attr('id') + '">' +
                   '<img width="20" height="20" alt="'+ i18n + '" src="//upload.wikimedia.org/wikipedia/commons/thumb/b/b6/Ambox_padlock_gray.svg/20px-Ambox_padlock_gray.svg.png" />' +
                '</a>'
            );
        }); 
    });
 
}(jQuery, mediaWiki));

--  pecoes  16:18, June 13, 2013 (UTC) 

Incidentally, I made this in jQuery before making this version. This was much more a learning exercise in native js. As for your rewrite:

• I generally dislike .each() for reasons I'm unable to explain. It just seems... surplus when compared to a basic for loop with which I can do exactly the same for a marginal increase in size.
• With regards to mw.util.addCSS, is there any significant improvement using it over using document.head.appendChild(css)? It seems to do pretty much the same, albeit with greater browser support (but given w:Help:Supported browsers I wasn't so concerned).
• If I was to implement this in jQuery I'd be inclined to use:

$title.after(
    $('<a/>', {
        'class': 'mw-header-link',
        'title': i18n,
        'href': '#' + $title.attr('id')
    }).append(
        $('<img>', {
            'width': '20',
            'height': '20',
            'alt': i18n, // is it really worth specifying an alt for an optional script?
            'src': '//upload.wikimedia.org/wikipedia/commons/thumb/b/b6/Ambox_padlock_gray.svg/20px-Ambox_padlock_gray.svg.png'
        })
    )
);

Purely because it looks cleaner than using a string of the entire node. I'm not sure which is more efficient, although I wouldn't be surprised if the strings were.

• In a recent conversation regarding FileUsageAuto-update on Wikia's skype channel, Monchoman45 explicitly recommended against this || that conditionals based it being unique to javascript and thus not immediately obvious what it does. It's probably not so much of an issue on dev, but I'm not sure whether it's such a good idea to use them. Perhaps a if instead, I'm not sure.
• I'm inclined to use if (condition) { doSomething(); } for clarity. It's not an issue on this script as it's so small, but when looking at something like runescape:User:Stewbasic/calc.js is becomes harder to tell what is and isn't included in the conditional. I feel it's better practice, even if it's not completely necessary in this case.

I do appreciate the feedback though :) cqm 01:35, 14 Jun 2013 (UTC)

Also (and I'd have to check this), I'm not sure if wgUserLanguage is found with resource loader scripts and the end of the body, as opposed to user and site-wide js loading in the head, hence I check for it within the $(function () {...});. cqm 01:40, 14 Jun 2013 (UTC)

Learning is good :) I'll try to reply in the spirit of that:

• each is indeed slightly slower than a loop. Function calls involve a bit more overhead than a loop iteration. But we're talking about fractions of milliseconds here. Unless you have a measureable bottleneck I would suggest to stick with short and readable code instead of trying so hard to optimize it. Over-optimization is evil.
• document.head isn't available in all versions of IE - though I don't remember which versions exactly. But then again: A huge part of why I love jQuery (and the like) is that I don't have to memorize which browser supports what and how anymore. So I would ask this in return: Since mw.util.addCSS is available, why not use it?
• Yes, that looks much cleaner than my suggestion. Packing everthing into long strings is a bad habit I picked up with PHP :( Your version may indeed be slightly less efficient, but again: Don't worry too much about it! Should it turn out, that your code is extremely inefficient, you can still go back in and measure. In fact, you would have to do that. In my experience guessing around where performance bottlenecks are is a terrible idea. They're always hiding where I'd least expect them. So if - and only if - your code is slow, measure first, optimize later. Premature optimization only leads to unreadable code.
• I'm familiar with that argument by Monchoman45. He does have a point in that JS' or-constructs tend to trip up newbies. But what newbies do or do not understand easily is of little concern here. You weren't writing a tutorial after all. When you write code for the sake of solving a problem, it would be a bit silly to censor yourself and omit regular language features just because they're unique to the language.
• Not sure what your point about if-constructs is... Is it that I omitted the braces? I like to omit stuff that doesn't add anything of interest. I also think that code that states: "Nothing below this line applies if this condition is not fulfilled", shoud be a one-liner. But that's very much a question of taste.
• Nothing gets loaded in the head - neither user-scripts nor site-scripts. Everything's moved to the end of the body now. And it's all well below jQuery, the mediaWiki stuff and most of Wikia's own code to be sure. The ResourceLoader doesn't enter into it. If anything scripts that are loaded via user-scripts or site-scripts are even more down the line. So much so, that they're likely to load after DOMContentLoaded.

 pecoes  03:52, June 14, 2013 (UTC) 

• It appears you're correct about where script load. I seem to have confused CSS and js from spending too much time messing around with the Special:Chat import script hack.
• I mean the braces on the if, yes. It's not so much that all on one line is fine it's that all of these are fine:

// basic conditional checks for page title
if (mw.config.get('wgTitle') === HeaderLinks) return;

if mw.config.get('wgTitle') === HeaderLink)
    return;

// this it starts getting confusing
if (array.length) for (i = 0; i < array.length; i++) {
    array[i].firstChild.remove;
    array[i[.id;
}

When you start mixing using and not using braces it gets harder to follow in my eye. Granted the above example isn't difficult to follow, but I like just being able to glance at something and knowing instantly what it's doing. Braces just help that for me ;)

cqm 09:54, 14 Jun 2013 (UTC)

Spanish Translation

Hi!

Link to this header → Enlazar a esta sección

Regards!
P[ntor Kagam]ne [ ^{talk me!}_{[[Special:Contributions/Pintor Kagamine|Special:EditCount/Pintor Kagamine contribs.]]}]

Thanks :) cqm 13:34, 8 Feb 2014 (UTC)

Portuguese (Brazil) translation

Link to this header → Vincular a esta seção

Garomus^w•c 14:48, March 9, 2014 (UTC)

Why a padlock icon?

Wouldn't it make more sense to use a link/anchor/section icon of some kind? iynque 😛 💬 📝 07:49, May 3, 2014 (UTC)

Did you have any particular image in mind as an alternative?

I chose the padlock because it clicking it 'locks on' to the header. Also, it was probably one of the few suitable images I could find on wikimedia commons. cqm 08:33, 3 May 2014 (UTC)

If you can implement FontAwesome, you could use fa-anchor, fa-bookmark, fa-bullseye, fa-external-link, fa-share-square-o, or fa-link. I'm not 100% sure, but I think you could also just use the font to create a static image for the icon, rather than trying to load the whole font. If not, I could make my own version of any one of those metaphors/symbols for this script to use. …I just don't understand the padlock 😯 iynque 😛 💬 📝 05:31, May 11, 2014 (UTC)

Copying the Link

Is there a possibility for the link to be automatically copied (specifically already in square brackets) when the button is clicked? Or just making a second button that would do the aftermentioned? Thanks in advance. REAWAKENZ Official (talk) 11:42, 12 February 2022 (UTC)

Now if you set window.HeaderLinksCopyOnClick = true before the imports it should copy the header links when you click the icon. ARandomCitizen (talk) 16:55, 15 February 2022 (UTC)

Thank you so much! REAWAKENZ Official (talk) 07:40, 16 February 2022 (UTC)

Icon

Hey, almost 10 years later, can we talk again about the icon? I'd like to suggest the replacement:

• of the old gray-white png padlock
• with the new locally-colored svg link.

The advantages of the new option are:

• the file is available on Fandom assets
• the icon design is part of the Fandom brand
• it has scalable svg quality
• the color of the icon will adapt to the text color of the wiki, and to its dark and light theme accordingly.

You can see the technicalities here.
You can cast your vote here.

—Sapador Castelo
FIRST POSTED: 12:32, 12 November 2023 (UTC)
EDITED: 16:37, 17 February 2024 (UTC)
ADDED PREVIEW: 17:55, 17 February 2024 (UTC)

Honestly, the new icon would look a lot better, plus it would fit well with every wiki's individual theme. I mistakenly voted for the old padlock suggestion, but I wanted to vote for the new one. Plus, consistency's key. 🧺 Wicker Basket | 📨 Spam me | 📝 My trash pile | 🌎 Founder of the My Life as a Teenage Rabbot Wiki 17:00, 17 February 2024 (UTC)

I also support this as 101 Dalmatians Wiki lead. Baldi 17:59, 17 February 2024 (UTC)

Ignore class idea

On my wiki, I'd like some headers to be centered, but the links generated by this script add a sub-element to them, which throws that centering off. What if there was a class that we could equip the h1/h2/... elements with in order to make the link button not be displayed?

Tsskyx (talk) 00:46, 4 March 2026 (UTC)