Star Wars Fanon:Technical notes

__NEWSECTIONLINK__

This is a collection of technical notes that are of little interest to most Star Wars Fanon Wikians, but may be found useful by people wanting to implement them on other wikis.

CSS and JavaScript
The skin-independent CSS resides in MediaWiki:Common.css, while things specific to the default monobook skin reside in MediaWiki:Monobook.css.

MediaWiki:Common.js uses MediaWiki:Functions.js, which contains a set of documented helper functions that can be reused on other wikis.

For Functions.js documentation, see Star Wars Fanon:API.

Template:T and Template:F (DEPRECATED)
Those are pure meta-templates, and both are extremely simple. The first template outputs its first argument, the second is blank. As unlikely as it seems, they are actually useful and quite extensively used here on Star Wars Fanon, even though Wikia now uses the ParserFunctions extension that accomplishes the same tasks with much prettier code.

The most common hack involving t takes the following form:

thentext

It takes advantage of the way MediaWiki parses template parameters. If testtext is not an empty string, two parameters will be passed: parameter 1, which is thentext, and parameter 1testtext, which is elsetext, which will yield thentext. Otherwise, MediaWiki will disregard thentext and consider elsetext as parameter 1, yielding elsetext as the result.

The semantics of this template call are:
 * If testtext is not blank, then thentext.
 * Otherwise, elsetext.

This is now completely superseded by ParserFunctions, with way more intuitive syntax:

Infoboxes
Again, the styles are out there in the CSS.

Meta-templates
The templates used in infobox construction are: slh, sli, slc, sls, sld, and slf. The letters "sl" mean "substitutable list" (as opposed to the legacy "pl*" templates, where the "pl" stood for "planet list" as those meta-templates were originally designed for planets).

The "h", "i", "c", "s", "d", and "f" stand for "header", "image", "caption", "section", "dark" and "footer". The "sld" template originally had an "sll" counterpart, which rendered a cell light grey as opposed to dark grey, but now it's just a redirect as the template allows one to explicitly specify the background color.

sld uses ParserFunctions, not the legacy hack described above, to render a row invisible if the parameter is blank or omitted. Therefore, t doesn't need to be copied.

Whenever a meta-template is changed, all infoboxes using it need to be "regenerated" from the "source", as they use template substitution.

Hiding
The "[Hide]" button does not appear if JavaScript is disabled. It is placed inside the element with the id "infoboxend" via JavaScript.

Every time the button is clicked, it shows or hides the element with the id "infoboxinternal". Since elements are referred to by ids, only one infobox will function properly if more than one are put on the same page.

The JavaScript code also uses the Firefox 2 client-side persistent storage feature to store infobox visibility information in that browser. The global variable  holds a boolean value indicating if the   object exists. The value indicating whether the infobox on a certain page is shown is checked in the  function and set with every click of the "Hide/Show" button, handled by the   function.

Per-page CSS
This one is handled in the  function, which is called from. The code adds an extra CSS class to the body element, of the following form:  (note the number of underscores). It can be then used to add extra CSS code, as it is done on Star Wars Fanon II to hide the title on the Main Page.

title, eras and shortcut
Implemented with the  and   functions. The latter is used for both eras and title-shortcut. The functions basically work by cloning the entire thing and inserting it into the firstHeading element, while removing the original text node for the title.

The code behind eras
Again, this was written before the coming of ParserFunctions, so the syntax is clumsy.

The eras template itself is nothing but a line of nearly identical sections, of the following form:

where NUMBER is 1, 2, etc.

eraicon uses the ParserFunctions extension in a switch statement.

in templates
Doesn't work properly when the template is transcluded. This is a known bug. Don't put this tag in templates that aren't solely for substing, period.

Rounded corners
Are implemented with four 1px-high spans at the top (rt) and four 1px-spans at the bottom (rb). It's ugly, but this solution doesn't require JavaScript and is supported in all major browsers. Stolen from here

By default, they use the background color specified in the content-bg CSS class. If you're designing a user CSS, please ensure that the .content-bg { background: ... } declaration uses the default bgcolor of the content (that is, what div id="content" uses). On Monobook, the content bgcolor is white, hence the line in MediaWiki:Monobook.css.

They need to be inserted in a div with zero padding. You can add another div or table inside to compensate; that's what iumb does.

Rounded corners don't work properly in IE 6 and 7 inside tables, unless the table is table-layout:fixed.

Combo boxes
Implemented with the ContentLoader class, which is a wrapper around XMLHttpRequest.

To add this functionality to another wiki, do the following:
 * Copy MediaWiki:Functions.js to your wiki; either paste it into your MediaWiki:Common.js, or add a stub loader like this one:

document.write(' ');


 * Add the following call to your onload function:

requestComboFill('combo-id', 'Template:Templatename');

Here combo-id is the id of an empty combo box (HTML select element), and Templatename is the name of the page where the lines will be fetched from. For an example, see Template:Stdsummaries on Star Wars Fanon II Wikia.

For example, you can add the following code to replicate Star Wars Fanon II's standard summaries functionality:

if(document.getElementById('editform')) {    var div = document.createElement('div'); div.appendChild(document.createTextNode('Standard summaries: ')); var select = document.createElement('select'); select.id = 'std-summaries'; div.appendChild(select); document.getElementById('editform').insertBefore(div, document.getElementById('wpSummaryLabel')); requestComboFill('std-summaries', 'Template:Stdsummaries'); }

and then copy Template:Stdsummaries to your wiki.