Template:Clickable button/doc: Difference between revisions

From Official Kodi Wiki
Jump to navigation Jump to search
(Little tweaks and such to documentation content and inline CSS)
m (Fix wikilink targets)
 
Line 1: Line 1:
<div style="font-size: 1.19em; font-weight: 700; margin-bottom: 1.33em;">[[Template:Clickable button|This template]], named {{Clickable button|target=Template:Clickable button|text='''Clickable button'''|iconPrimary=ui-icon-link|iconSecondary=ui-icon-extlink|class=ui-button-green}}, provides a uniform way to create clickable buttons on pages which behave like plain-text hyperlinks but offer much greater visial differentiation from the standard content.</div>
<div style="font-size: 1.1em; font-weight: 600; margin-bottom: 1.33em;">[[Template:Clickable button|This template]], {{Clickable button|target=Template:Clickable button|text='''Clickable button'''|iconPrimary=ui-icon-link|iconSecondary=ui-icon-extlink|class=ui-button-green}}, provides a uniform way to create clickable buttons on pages which behave like plain-text hyperlinks but offer much greater visual differentiation from the standard content.</div>


<div style="font-size: 1.09em; font-style: italic; font-weight: 500;">* For the purposes of Kodi Wiki and this documentation, the term 'clickable' shall be defined as BOTH<br />
<div style="font-size: 1.03em; font-style: italic; margin-bottom: 1em;">For the purposes of Kodi Wiki and this documentation, the term 'clickable' shall be defined as BOTH:
:1) reacting to mouse-over hovering and keyboard selection as the active page element with visual cues, AND<br />
# reacting to mouse-over hovering and keyboard selection as the active page element with visual cues, AND<br />
:2) performing a valid HTML 5.0 page action such as behaving like an <a> tag, triggering the loading of another web page.</div>
# performing a valid HTML 5.0 page action such as behaving like an <a> tag, triggering the loading of another web page.</div>


== Usage ==
== Usage ==
Line 11: Line 11:
<br />
<br />


When used in the block style instead, it appears as:
Using the block format, it appears as:


<pre style="font-size: 1.10em; font-weight: 700; margin: 1em 11.5em 2.5em 4em;">{{Clickable button
<pre style="font-size: 1.10em; font-weight: 700; margin: 1em 11.5em 2.5em 4em;">{{Clickable button
Line 66: Line 66:


== Examples ==
== Examples ==
 
{|
; <code><nowiki>{{Clickable button|FAQ|Frequently asked questions}}</nowiki></code>
! scope="col" style="width: 67%;" | Wiki markup
: {{Clickable button|FAQ|Frequently asked questions}}
! scope="col" | Rendered output
 
|-
----
| {{Tlx|Clickable button|FAQs|Frequently asked questions}}
; <code><nowiki>{{Clickable button|target={{fullurl:{{FULLPAGENAME}}|withJS=MediaWiki:VisualFileChange.js}}|text=This page with '''VisualFileChange'''|external=true}}</nowiki></code>
| style="text-align: center;" | {{Clickable button|FAQs|Frequently asked questions}}
: {{Clickable button|target={{fullurl:{{FULLPAGENAME}}|withJS=MediaWiki:VisualFileChange.js}}|text=This page with '''VisualFileChange'''|external=true}}
|-
 
| {{Tlx|Clickable button|2=target=<nowiki>https://kodi.wiki/index.php?title=Template:Clickable_button/doc&withJS=MediaWiki:VisualFileChange.js</nowiki>|3=text=This page with VisualFileChange|4=external=true}}
----
| style="text-align: center;" | {{Clickable button|target={{fullurl:{{FULLPAGENAME}}|withJS=MediaWiki:VisualFileChange.js}}|text=This page with '''VisualFileChange'''|external=true}}
 
|-
; <code><nowiki>{{Clickable button|:w:Wikipedia:Manual of Style/Layout|'''Wikipedia's Manual of Style'''|class=ui-button-green ui-button-large}}</nowiki></code>
| {{Tlx|Clickable button|:w:Wikipedia:Manual of Style/Layout|Wikipedia's Manual of Style|4=class=ui-button-green ui-button-large}}
: {{Clickable button|:w:Wikipedia:Manual of Style/Layout|'''Wikipedia's Manual of Style'''|class=ui-button-green ui-button-large}}
| style="text-align: center;" | {{Clickable button|:w:Wikipedia:Manual of Style/Layout|'''Wikipedia's Manual of Style'''|class=ui-button-green ui-button-large}}
 
|-
----
| {{Tlx|Clickable button|:w:Wikipedia:Twinkle/Preferences|Twinkle Preferences|4=iconPrimary=ui-icon-wrench|5=class=ui-button-blue ui-button-large}}
 
| style="text-align: center;" | {{Clickable button|:w:Wikipedia:Twinkle/Preferences|Twinkle Preferences|iconPrimary=ui-icon-wrench|class=ui-button-blue ui-button-large}}
; <code><nowiki>{{Clickable button|:w:Wikipedia:Twinkle/Preferences|Twinkle Preferences|iconPrimary=ui-icon-wrench|class=ui-button-blue ui-button-large}}</nowiki></code>
|-
: {{Clickable button|:w:Wikipedia:Twinkle/Preferences|Twinkle Preferences|iconPrimary=ui-icon-wrench|class=ui-button-blue ui-button-large}}
| {{Tlx|Clickable button|2=target=<nowiki>https://kodi.wiki/index.php?title=Special:Random/User_talk&action=edit&section=new&preloadtitle=I+love+your+work</nowiki>|3=text=Do something nice for a random editor|4=iconSecondary=ui-icon-heart|5=external=true|6=class=ui-button-red}}
 
| style="text-align: center;" | {{Clickable button|target={{fullurl:Special:Random/User talk|action=edit&section=new&preloadtitle=I+love+your+work}}|text=Do something nice for a random editor|iconSecondary=ui-icon-heart|external=true|class=ui-button-red}}
----
|}
 
; <code><nowiki>{{Clickable button|target={{fullurl:Special:Random/User talk|action=edit&section=new&preloadtitle=I+love+your+work}}|text=Do something nice for a random editor|iconSecondary=ui-icon-heart|external=true|class=ui-button-red}}</nowiki></code>
: {{Clickable button|target={{fullurl:Special:Random/User talk|action=edit&section=new&preloadtitle=I+love+your+work}}|text=Do something nice for a random editor|iconSecondary=ui-icon-heart|external=true|class=ui-button-red}}


== Dependencies ==
== Dependencies ==
Line 93: Line 90:


== Test suite/Unit tests ==
== Test suite/Unit tests ==
<table>
<table style="border-collapse: collapse; margin: 1.5em 0 0 2.5em;">
<tr><td>Icon only</td><td>{{Clickable button|iconPrimary=ui-icon-help}}</td><td>{{Clickable button|iconSecondary=ui-icon-help}}</td><td>{{Clickable button|iconSecondary=ui-icon-help|iconPrimary=ui-icon-info}}</td></tr>
<tr style="border: thin solid #000;"><th scope="row" style="background-color: #f7f8f9; padding: 1em;">Icon only</th><td style="padding: 0.5em; text-align: center;">{{Clickable button|target=Main Page|iconPrimary=ui-icon-circle-check}}</td><td style="padding: 0.5em; text-align: center;">{{Clickable button|target=Main Page|iconSecondary=ui-icon-pin-s}}</td><td style="padding: 0.5em; text-align: center;">{{Clickable button|target=Main Page|iconSecondary=ui-icon-star|iconPrimary=ui-icon-info}}</td></tr>
<tr><td>Icon text</td><td>{{Clickable button|iconPrimary=ui-icon-help|text=Abc}}</td><td>{{Clickable button|iconSecondary=ui-icon-help|text=Abc}}</td><td>{{Clickable button|iconSecondary=ui-icon-help|iconPrimary=ui-icon-info|text=Abc}}</td></tr>
<tr style="border: thin solid #000;"><th scope="row" style="background-color: #f7f8f9; padding: 1em;">Icon text</th><td style="padding: 0.5em; text-align: center;">{{Clickable button|target=Main Page|iconPrimary=ui-icon-home|text=Abc}}</td><td style="padding: 0.5em; text-align: center;">{{Clickable button|target=Main Page|iconSecondary=ui-icon-help|text=Abc}}</td><td style="padding: 0.5em; text-align: center;">{{Clickable button|target=Main Page|iconSecondary=ui-icon-help|iconPrimary=ui-icon-info|text=Abc}}</td></tr>
<tr><td>Text only, links</td><td>{{Clickable button|text=Abc}}</td><td>{{Clickable button|text=Abc|target=Main Page}}</td><td>{{Clickable button|text=Abc|target=Main Page|external=1}}</td></tr>
<tr style="border: thin solid #000;"><th scope="row" style="background-color: #f7f8f9; padding: 1em;">Text only, links</th><td style="padding: 0.5em; text-align: center;">{{Clickable button|text=Abc}}</td><td style="padding: 0.5em; text-align: center;">{{Clickable button|text=Abc|target=Main Page}}</td><td style="padding: 0.5em; text-align: center;">{{Clickable button|text=Abc|target=Main Page}}</td></tr>
<tr><td>Colors</td><td>{{Clickable button|text=Abc|class=ui-button-green}}</td><td>{{Clickable button|text=Abc|class=ui-button-red}}</td><td>{{Clickable button|text=Abc|class=ui-button-blue}}</td></tr>
<tr style="border: thin solid #000;"><th scope="row" style="background-color: #f7f8f9; padding: 1em;">Colors</th><td style="padding: 0.5em; text-align: center;">{{Clickable button|text=Abc|class=ui-button-green}}</td><td style="padding: 0.5em; text-align: center;">{{Clickable button|text=Abc|class=ui-button-red}}</td><td style="padding: 0.5em; text-align: center;">{{Clickable button|text=Abc|class=ui-button-blue}}</td></tr>
</table>
</table>



Latest revision as of 02:45, 11 September 2022

This template, Clickable button , provides a uniform way to create clickable buttons on pages which behave like plain-text hyperlinks but offer much greater visual differentiation from the standard content.
For the purposes of Kodi Wiki and this documentation, the term 'clickable' shall be defined as BOTH:
  1. reacting to mouse-over hovering and keyboard selection as the active page element with visual cues, AND
  2. performing a valid HTML 5.0 page action such as behaving like an <a> tag, triggering the loading of another web page.

Usage

The template, with its full complement of parameters (but no values, making this well-suited to the copy/paste maneuver into the Wikitext of the page you wish to using it in) looks like this using the inline template style:

{{Clickable button|target=|text=|external=|iconPrimary=|iconSecondary=|class=|id=}}


Using the block format, it appears as:

{{Clickable button
 | target        =
 | text          =
 | external      =
 | iconPrimary   =
 | iconSecondary =
 | class         =
 | id            =
}}

Template parameters

Parameter listing for Template:Clickable_button
Parameter Description Default Status
target =
1 =
The target page of the button's underlying hyperlink, if also on Kodi Wiki simply the page name or prepended with the page's namespace. If the target is located on a different web site, then the value must be a URI with an authority (fully-qualified domain name or FQDN) and also a resource path (if needed), optionally prepended with the protocol scheme. It is strenuously advised when defining external targets to use the named parameter target = rather than the unnamed/positional one, in the event such a link uses the equals sign '=' character which confuses/breaks the template parser. Undefined
(User must provide)
Required
text =
2 =
Text label that appears on the button. If you choose not to set a value for this parameter, the iconPrimary parameter's status changes to Required. Undefined Suggested
external =
3 =
Accepts a boolean value for whether or not the target is an external link. If it is, set to 'yes', 'true', or '1'. For links to other Kodi Wiki pages if can be left undefined, or set as the logical inverse of the values just described. Undefined Optional
iconPrimary =
4 =
A JQuery.UI icon class for the primary icon (preceding the label/name text, depends on direction the language is written in), e.g. ui-icon-gear. Undefined Suggested
iconSecondary =
5 =
A JQuery.UI icon class for the secondary icon (following the label/name text or the iconPrimary), e.g. ui-icon-triangle-1-s. Undefined Optional
class = Add CSS classes like ui-button-green ui-button-large, shorthand for sets of predefined configurations that manipulate the appearance of a web element like a button. Typically includes things such as colors, fonts, and "thickness." Undefined Optional
id = Unique 'ID' attribute to be set for the button. Mostly used for JavaScript bindings and CSS styling in tandem with the preceding class parameter. Undefined Optional

Examples

Wiki markup Rendered output
{{Clickable button|FAQs|Frequently asked questions}} Frequently asked questions
{{Clickable button|target=https://kodi.wiki/index.php?title=Template:Clickable_button/doc&withJS=MediaWiki:VisualFileChange.js|text=This page with VisualFileChange|external=true}} This page with VisualFileChange
{{Clickable button|:w:Wikipedia:Manual of Style/Layout|Wikipedia's Manual of Style|class=ui-button-green ui-button-large}} Wikipedia's Manual of Style
{{Clickable button|:w:Wikipedia:Twinkle/Preferences|Twinkle Preferences|iconPrimary=ui-icon-wrench|class=ui-button-blue ui-button-large}} Twinkle Preferences
{{Clickable button|target=https://kodi.wiki/index.php?title=Special:Random/User_talk&action=edit&section=new&preloadtitle=I+love+your+work|text=Do something nice for a random editor|iconSecondary=ui-icon-heart|external=true|class=ui-button-red}} Do something nice for a random editor

Dependencies

This template relies on being able to load jquery.ui.button.js.

Test suite/Unit tests

Icon only Parameter 'text' is empty Parameter 'text' is empty Parameter 'text' is empty
Icon text Abc Abc Abc
Text only, links Abc Abc Abc
Colors Abc Abc Abc