Wiki source for LinkTails


Show raw source

===== CSS-driven link tails=====

Wikka currently gives admins the option to configure a specific tail for external links in the [[Docs:ConfigurationOptions | configuration file]].
For example: [[http://www.google.com | Google]] (see the small infinity symbol appended to the link).
I see two issues in the current implementation.

===##span## vs. ##:after## selector===
The tail is currently rendered through a ##<span>## that displays the tail as configured in the config file. It would make more sense IMO (especially as soon as we allow [[TestSkin | multiple CSS stylesheets]]) to render it through an ##a.ext:after## selector. Tails are layout, not content, and they should consequently be handled by CSS.

=== Different classes for different kinds of link ===
Currently, only external links have a dedicated class and tail.
If the link parser is modified, dedicated classes, titles and tails could be given to specific kinds of link. I think this could be applied both to link types and Wikka handlers.

For instance (titles are displayed on mouse roll-over):

=== Link types ===

~-Internal link: ""<a href="http://wikka.jsnx.com/HomePage" title="Go to HomePage">HomePage</a>""
~-Internal link to missing page: ""<a href="http://wikka.jsnx.com/MissingPage/edit" class="missingpage" title="Create MissingPage">MissingPage</a>""
~-External link: ""<a href="http://google.com" title="Open external site">Google.com</a><span class='exttail'>∞</span>""
~-Userpage link: ""<a href="http://wikka.jsnx.com/DarTar" title="Open Dartar's userpage">DarTar</a><span style="color: #999;position: relative; top: 0.5ex; font-size: 70%">(USER)</span> ""
~-FTP link: ""<a href="ftp://xxx.xx" title="Browse FTP server">ftp://xxx.xxx.xx</a><span style="color: #999;position: relative; top: 0.5ex; font-size: 70%">(FTP)</span> ""
~-MAILTO link: ""<a href="mailto:xxx@xxx.xx" title="Send an email to DarTar">DarTar</a><span style="color: #999;position: relative; top: 0.5ex; font-size: 70%">(EMAIL)</span> ""
~-CALLTO link: ""<a href="callto://xxxx.xxxx" title="Call DarTar">DarTar</a><span style="color: #999;position: relative; top: 0.5ex; font-size: 70%">(CALL)</span> ""
~-Handlers:
~~-Edit handler: ""<a href="http://wikka.jsnx.com/LinkTails/edit" title="Edit LinkTails">LinkTails</a><span style="color: #999;position: relative; top: 0.5ex; font-size: 70%">[edit]</span> ""
~~-Backlink handler: ""<a href="http://wikka.jsnx.com/HomePage/backlink" title="Display a list of pages linking to HomePage">HomePage</a><span style="color: #999;position: relative; top: 0.5ex; font-size: 70%">[backlinks]</span> ""
~~-Clone handler: ""<a href="http://wikka.jsnx.com/LinkTails/clone" title="Clone LinkTails">LinkTails</a><span style="color: #999;position: relative; top: 0.5ex; font-size: 70%">[clone]</span> ""


Tails need not be textual, they can be configured as icons as well, for instance:

MAILTO link: ""<a href="mailto:xxx@xxx.xx" title="Write an email to DarTar">DarTar</a> <img alt=" " src="images/email.gif" width="15px" title="Write an email to DarTar" />""
Userpage: ""<a href="DarTar" title="Open DarTar's userpage">DarTar</a> <img alt=" " src="images/icons/new-contact.png" width="18px" title="Open DarTar's userpage"/>""


----
CategoryDevelopmentFormatters CategoryLayout
Valid XHTML :: Valid CSS: :: Powered by WikkaWiki