User:Dantman/Skinning system/Templates

Data types edit

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 edit

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

Html blocks edit

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 edit

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="" edit

href="" attributes have these behaviours:

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

src="" edit

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 edit

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 edit

;) these however are fairly up to date.

mw:if="key" edit

If the value is falsy the entire element is omitted.

mw:optional (boolean attribute) edit

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" edit

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" edit

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" edit

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 edit

These too.

<body> edit

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:*" edit

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> edit

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"> edit

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.