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

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.wiki.x.io/w/index.php?title=User:PerfektesChaos/js/prettyPageHeading/r.js&action=raw&maxage=604800&ctype=text/javascript",
                "text/javascript" );

Linked components

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

.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

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

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

This gadget is prepared for multilingual support.

Codes

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