User:PerfektesChaos/js/prettyPageHeading

JavaScript gadget – nicer presentation of page headlines, in particular on subpages:

Insertion of visual gaps around slashes / and after namespace : separator.
Namespace names on user interfaces other than English get a tooltip with translation.
Subpage components may be linked in every mode.

Copy&paste won’t be influenced; page name may be copied as usual.

Within main namespace (articles) the title remains unchanged.
On pages with sophisticated DISPLAYTITLE the genuine format is kept.

Usage[edit]

If your project has registered this as a gadget, just activate on your Preferences page.
Otherwise include the following lines into your common.js, global.js etc.:

mw.loader.load( "https://en.wikipedia.org/w/index.php?title=User:PerfektesChaos/js/prettyPageHeading/r.js&action=raw&maxage=604800&ctype=text/javascript",
                "text/javascript" );

Linked components[edit]

On page view of a page with subpages the components are linked at a small line on top of the content area. In other modes, like source code editing, page history or info, no such links are provided by system.

With the .link = true; option in JavaScript components are linked, if not in main space, and the small bar on page view will vanish.

User options[edit]

.link = true; has to be defined in JavaScript.

The default width of the spacing is 0.25em (25 % letter width or line height) and may be configured in two ways.

CSS[edit]

The following lines may be inserted into your common.css, global.css or skin dependant CSS. Any attribute value may be applied.

.prettyPageHeading {
   margin-left: 0.2em ! important;
}

JavaScript[edit]

Another approach is to influence code generation directly as follows:

if ( typeof mw.libs.prettyPageHeading !== "object" ) {
   mw.libs.prettyPageHeading = { };
}
mw.libs.prettyPageHeading.key1  =  value1;   // example
mw.libs.prettyPageHeading.link  =  true;
mw.libs.prettyPageHeading.shift =  "0.2em";

It should appear on your common.js, global.js or skin dependant JS best before an mw.loader.load() call as described in “Usage” section.

Key	Value	Bedeutung
`link`	`true`	Link superior subpage components. Default: `false` – components are not linked.
`shift`	`"0em"`	Gap size as CSS length measure. Default: `0.25em`

Other languages[edit]

This gadget is prepared for multilingual support.

Codes[edit]

Source code	Java Script – for load() human readable version
ResourceLoader	`ext.gadget.prettyPageHeading` for mw:Extension:Gadgets
Namespaces	Any namespace.
`mw.libs`	`prettyPageHeading`