Template:Clickable button/doc - Revision history

RogueScholar: Fix wikilink targets

2022-09-11T02:45:39Z

Fix wikilink targets

← Older revision		Revision as of 02:45, 11 September 2022
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>

RogueScholar: Little tweaks and such to documentation content and inline CSS

2021-08-16T02:55:50Z

Little tweaks and such to documentation content and inline CSS

← Older revision		Revision as of 02:55, 16 August 2021
Line 1:		Line 1:
	<div style="font-size: 1.19em; font-weight: ~~800~~;">[[Template:Clickable button\|This template]], ~~<code><nowiki>~~{{Clickable button}}~~</nowiki></code>~~, provides a uniform way to create clickable buttons on pages.</div~~><br /~~>		<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.09em; font-style: italic; font-weight: ~~600~~;">* For the purposes of Kodi Wiki and this documentation, the term 'clickable' shall be defined as BOTH<br />		<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 />
	:1) reacting to mouse-over hovering and keyboard selection as the active page element with visual cues, AND<br />		:1) 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>		:2) performing a valid HTML 5.0 page action such as behaving like an <a> tag, triggering the loading of another web page.</div>
Line 13:		Line 13:
	When used in the block style instead, it appears as:		When used in the block style instead, it appears as:

	<~~div~~ style="~~font-family: monospace;~~ font-size: 1.10em; font-weight: 700; margin~~-left~~: 4em;"~~><code~~>{{Clickable button~~<br /> ~~\|~~ ~~target~~        =<br /> ~~\|~~ ~~text~~          =<br /> ~~\|~~ ~~external~~      =<br /> ~~\|~~ ~~iconPrimary~~   =<br /> ~~\|~~ ~~iconSecondary~~ =<br /> ~~\|~~ ~~class~~         =<br /> ~~\|~~ ~~id~~            =<br />~~}}</~~code></div~~>		<pre style="font-size: 1.10em; font-weight: 700; margin: 1em 11.5em 2.5em 4em;">{{Clickable button
			\| target =
			\| text =
			\| external =
			\| iconPrimary =
			\| iconSecondary =
			\| class =
			\| id =
			}}</pre>

	=== Template parameters ===		== Template parameters ==
	{\|class="wikitable"		{\|class="wikitable"
	\|+ Parameter listing for Template:Clickable_button		\|+ Parameter listing for Template:Clickable_button
Line 22:		Line 30:
	\|-		\|-
	! <code>target =</code><br /><code>1 =</code>		! <code>target =</code><br /><code>1 =</code>
	\| 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 a fully-qualified domain name (FQDN), and ~~directory~~ path~~/page~~ (if needed), optionally prepended with the protocol. It is ~~strongly advisable in the case of~~ external targets to use the named parameter <code>target =</code> in the event such a link uses the equals sign '=' character which confuses/breaks the template parser.		\| 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 <code>target =</code> rather than the unnamed/positional one, in the event such a link uses the equals sign '=' character which confuses/breaks the template parser.
	\| Undefined<br /><span style="font-size: 0.92em; font-style: italic;">(User must provide)</span>		\| Undefined<br /><span style="font-size: 0.92em; font-style: italic;">(User must provide)</span>
	\| <u>Required</u>		\| <u>Required</u>
Line 82:		Line 90:

	== Dependencies ==		== Dependencies ==
	This template relies on being able to load [https://~~gerrit~~.wikimedia~~.org~~/r/~~gitweb?p=mediawiki~~/~~core~~.~~git;a=tree;f=resources~~/jquery.ui jquery.ui.button].		This template relies on being able to load [https://github.com/wikimedia/mediawiki/raw/master/resources/lib/jquery.ui/jquery.ui.button.js jquery.ui.button.js].

	== Test suite/Unit tests ==		== Test suite/Unit tests ==
Line 93:		Line 101:

	<includeonly>		<includeonly>
	<!-- ~~Interwikis go on Wikidata, please~~ add only Categories here -->		<!-- Please add only Categories here, in alphabetical order -->
	[[Category:Formatting templates]]		[[Category:Formatting templates]]
	</includeonly>		</includeonly>

RogueScholar: Write documentation for new Clickable button template

2021-08-15T19:38:33Z

Write documentation for new Clickable button template

New page

<div style="font-size: 1.19em; font-weight: 800;">[[Template:Clickable button|This template]], <code><nowiki>{{Clickable button}}</nowiki></code>, provides a uniform way to create clickable buttons on pages.</div><br />

<div style="font-size: 1.09em; font-style: italic; font-weight: 600;">* For the purposes of Kodi Wiki and this documentation, the term 'clickable' shall be defined as BOTH<br />
:1) 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>

== 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:

:::<div style="font-size: 1.10em; font-weight: 800; margin-top: 1.5em;"><code><nowiki>{{Clickable button|target=|text=|external=|iconPrimary=|iconSecondary=|class=|id=}}</nowiki></code></div>
<br />

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

<div style="font-family: monospace; font-size: 1.10em; font-weight: 700; margin-left: 4em;"><code>{{Clickable button<br /> | target        =<br /> | text          =<br /> | external      =<br /> | iconPrimary   =<br /> | iconSecondary =<br /> | class         =<br /> | id            =<br />}}</code></div>

=== Template parameters ===
{|class="wikitable"
|+ Parameter listing for Template:Clickable_button
|-
! Parameter !! Description !! Default !! Status
|-
! <code>target =</code><br /><code>1 =</code>
| 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 a fully-qualified domain name (FQDN), and directory path/page (if needed), optionally prepended with the protocol. It is strongly advisable in the case of external targets to use the named parameter <code>target =</code> in the event such a link uses the equals sign '=' character which confuses/breaks the template parser.
| Undefined<br /><span style="font-size: 0.92em; font-style: italic;">(User must provide)</span>
| <u>Required</u>
|-
! <code>text =</code><br /><code>2 =</code>
| 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 <u>Required</u>.
| Undefined
| Suggested
|-
! <code>external =</code><br /><code>3 =</code>
| 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''
|-
! <code>iconPrimary =</code><br /><code>4 =</code>
| A JQuery.UI [https://api.jqueryui.com/theming/icons/ 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
|-
! <code>iconSecondary =</code><br /><code>5 =</code>
| A JQuery.UI [https://api.jqueryui.com/theming/icons/ icon class] for the secondary icon (following the label/name text or the iconPrimary), e.g. ''ui-icon-triangle-1-s''.
| Undefined
| ''Optional''
|-
! <code>class =</code>
| Add CSS classes like <code>ui-button-green ui-button-large</code>, 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''
|-
! <code>id =</code>
| Unique 'ID' attribute to be set for the button. Mostly used for JavaScript bindings and CSS styling in tandem with the preceding <code>class</code> parameter.
| Undefined
| ''Optional''
|}

== Examples ==

; <code><nowiki>{{Clickable button|FAQ|Frequently asked questions}}</nowiki></code>
: {{Clickable button|FAQ|Frequently asked questions}}

----
; <code><nowiki>{{Clickable button|target={{fullurl:{{FULLPAGENAME}}|withJS=MediaWiki:VisualFileChange.js}}|text=This page with '''VisualFileChange'''|external=true}}</nowiki></code>
: {{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>
: {{Clickable button|:w:Wikipedia:Manual of Style/Layout|'''Wikipedia's Manual of Style'''|class=ui-button-green 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}}

----

; <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 ==
This template relies on being able to load [https://gerrit.wikimedia.org/r/gitweb?p=mediawiki/core.git;a=tree;f=resources/jquery.ui jquery.ui.button].

== Test suite/Unit tests ==
<table>
<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><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><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><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>
</table>

<includeonly>

[[Category:Formatting templates]]
</includeonly>