User:Dantman/Skinning system/Templates

Data types

This section is relatively incomplete and needs a lot more thought on the actual interfaces.

class Html implements Html {
  function __constructor( $html );
  function getHtml() { return $this->html; }
}
class Text implements Text,Html {
  function __constructor( $text );
  function getText() { return $this->text; }
  function getHtml() { return htmlspecialchars($this->text); }
}
class Url implements Href,Text {
  function __constructor( $url );
  function getHref() { return $this->url; }
  function getText() { return $this->url; }
}
class Link implements Href,Src,Text {
  function __constructor({ href, text });
  function getHref() { return $this->href; }
  function getSrc() { return $this->src; }
  function getText() { return $this->text; }
}
class Image implements {
  function __constructor({ src });
  function getSrc() { return $this->src; }
}
class Icon implements {
  function __constructor
}

type Html implements Html {
  private html;
  Html = html;
}

type Text implements Html,Text {
  private text;
  Text = text;
  Html = escaped(text);
}

type Url implements Href,Text {
  private url;
  .href[Url] = url; # Self reference so things like {nav.mainpage.href} will work when people try them thinking it's a link.
  Href = url;
  Text = url;
}

type Link implements Href,Html,Text {
  .href[Url] # The url of a link.
  .text[Text] # The text  of a link. A basic Link type doesn't support raw html content.
  Href = .href;
  Text = .href;
  Html = [html built from link data]
}

type Image implements Src,Href,Html {
  .src[Url]
  .alt[Text]
  Src = .src;
  Href = .src;
  Html = [html built from image data]
}

type Icon extends Image {

}

type List : Iterable {
  .reverse[List] # A list that iterates in the opposite order.
}

Link extends Url Image extends Url Icon extends Image

Url exposes .href List exposes a .reverse that gives a list that lists things in the opposite order? Grouping exposes it's groups eas as a .key but also lets them be looped over

Context behaviours

This section is relatively incomplete and in need of more though.

Html blocks

These behaviours are exhibited when a key is used in a html block, in other words when you use something like <mw:title />.

• A Html type

General attributes

These behaviours are exhibited when a key is used in a attribute, in other words when you use something like

.

• Html types are invalid.
• Text types will be escaped and included.

href=""

href="" attributes have these behaviours:

• If a Link type is used the .href will be used.

src=""

src="" attributes will inherit the same behaviours as a href="" but also have these additional behaviours:

• If a Image type is used the .src will be used.

Skin keys

This list of keys has grown a little stale, some of those have been replaced with some other ideas.

site.name

types: Text

page.title

types: Html, Text

page.icons

types: Html? or List[Html]? or would it be a List[Icon]

subtitles

types: List[Html?]

personal_links

types: List[Link]

language_links (or page.language_links?)

types: List[Link]

page.actions:flat

types: List[Link]

Equivalent to content_actions.

page.actions:group

types: Grouping[List[Link]]

Equivalent to content_navigation.

logo

types: Image

nav.*

types: Link/Url

footer.links

types: Grouping[List[Link,Html/Text?]]

footer.links:flat

types: List[Link,Html/Text?]

footer.icons

types: Grouping[List[Link,(optional:Icon),Text]]

sidebar

types: List[Section[header:Text,content:Html/List[Link,List[Link]]]

note: the sidebar key will probably be replaced with something different and flexible).

page.text

types: Html

note: this will intelligently omit or include the contents of printfooter depending on if it's used in the template. ((Havent decided what to do about debughtml))

printfooter

types: Html

toolbox

types: Link[Link or List[Link]]

Logical attributes

;) these however are fairly up to date.

mw:if="key"

If the value is falsy the entire element is omitted.

mw:optional (boolean attribute)

When present the entire element will be omitted if the contents are empty.

In place of verbose things like <div mw:if="pageicons"><mw:pageicons /></div> this lets you simplify them to <div mw:optional><mw:pageicons /></div>.

mw:loop="key"

When present the contents of the element are repeated for each item in the list specified in the value. If inside a context that is a list and the value is omitted the context will be used. In some cases like <ul mw:loop="..."><li attr="x" /></ul> the list items will affect the contents in a special way. And as a special case <ul mw:loop="..." /> will be treated as if it had an implicit <li/>.

mw:tooltip="value"

Applies a title attribute with a tooltip specified by the tooltip id in the value. If the value is empty then it'll be extracted from an id attribute if present. If an empty accesskey attribute is present on the element this will also replace that with the relevant accesskey for the id.

mw:langorder mw:langorder="mw:content"

As a special case when mw:langorder is used the order of elements within it will be reversed if the language is a rtl language. By default this uses mw:user as the language but a language can be specified, special values used in lang will be accepted. If there are some elements that should be grouped together and not reversed use a null element <>...</> to group them together.

For example, this bit based off Vector's simpleSearch uses mw:langorder to put the button before the input in rtl languages. The original vector code had to use two if-rtl's and write the code outputting the searchButton twice.

<div id="p-search">
	<h5 lang="mw:user"><label for="searchInput">{msg:search}</label></h5>
	<form action="mw:search" id="searchform">
		<div id="simpleSearch" mw:langorder>
			<input id="searchInput" type="text" name="search">
			<button id="searchButton"><img src="{stylepath|images/search-ltr.png}"></button>
		</div>
	</form>
</div>

Special behaviours

These too.

<body>

A template is not supposed to contain a <body> tag as the contents of a template go within an already built body and trailer however if you include a body tag in your template the attributes will be extracted and merged with the body built by headElement, classes will be merged rather than replaced.

lang="mw:*"

The lang attribute can accept one of a set of mw:* values which will be replaced with the proper value. The dir attribute will also be replaced if omitted. As an extra if you use a normal language code that MediaWiki understands in lang="" then the dir will be automatically specified.

These are the valid values:

• mw:user - This will use the user's preferred lang. This should be used in parts of the ui where the user's lang is used.
• mw:content - This will use the wiki's content lang. This should be used in blocks if you are explicitly outputting something like a message in the content language.
• mw:page - This will use the page title's lang. The body text is automatically specified but this may be useful in some special locations.

<script>

For any <script> tag encountered through the markup if html5 mode is not set a proper type will be applied to it.

<form action="mw:special">

A form with action="mw:search" will be expanded into a search form:

• A proper action and hidden input will be inserted to make it function as a search form.
• An input with the name search will be given a search text value, default to type="search", and have tooltip+accesskey added to it.
• A type="submit", type="image", or <button> with the name will be expanded to a search button (name=fulltext will make it fulltext otherwise it'll be a go):
  • Proper tooltip+accesskey will be applied to it.
  • Button text will automatically be filled in.
    • For a type="submit" if value is omitted it will be filled.
    • For a type="image" if alt is omitted it will be filled.
    • For a <button> with one <img> the <img>'s alt will be filled.
    • For a <button> with no contents the contents will be filled.