Jump to content

User:PerfektesChaos/js/prettyPageHeading

From Wikipedia, the free encyclopedia

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
ResourceLoader
Namespaces
  • Any namespace.
mw.libs prettyPageHeading