mirrors/TiddlyWiki5
1
0
Fork 0
mirror of https://github.com/Jermolene/TiddlyWiki5 synced 2024-06-16 10:29:54 +00:00
Code Issues Releases Wiki Activity

extend LinkWidget to enforce classes (#3052)

Browse Source 
* extend ListWidget to enforce classes

Previously, the undocumented *class* attribute only allowed to specify
additional classes to be set.

Especially for use within a LinkCatcher, you can now apply / enforce
only the custom classes and avoid any of the defaults being applied
depending on the link target.

This will allow to implement #1161 more gracefully.

* use setClass insted of exclamation mark syntax

update docs & fix typo in docs
This commit is contained in:
Tobias Beer 2017-12-12 13:25:06 +01:00 committed by Jeremy Ruston
parent 4d2d202935
commit 661bff4f5b
2 changed files with 29 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
core/modules/widgets/link.js
View File

@ -64,21 +64,26 @@ LinkWidget.prototype.renderLink = function(parent,nextSibling) {
var domNode = this.document.createElement(tag);
// Assign classes
var classes = [];
if(this.linkClasses) {
if(this.enforceClasses === undefined) {
classes.push("tc-tiddlylink");
if(this.isShadow) {
classes.push("tc-tiddlylink-shadow");
}
if(this.isMissing && !this.isShadow) {
classes.push("tc-tiddlylink-missing");
} else {
if(!this.isMissing) {
classes.push("tc-tiddlylink-resolves");
}
}
classes.push(this.linkClasses);
}
classes.push("tc-tiddlylink");
if(this.isShadow) {
classes.push("tc-tiddlylink-shadow");
else if (this.enforceClasses !== "") {
classes.push(this.enforceClasses);
}
if(this.isMissing && !this.isShadow) {
classes.push("tc-tiddlylink-missing");
} else {
if(!this.isMissing) {
classes.push("tc-tiddlylink-resolves");
}
if(classes.length > 0) {
domNode.setAttribute("class",classes.join(" "));
}
domNode.setAttribute("class",classes.join(" "));
// Set an href
var wikilinkTransformFilter = this.getVariable("tv-filter-export-link"),
wikiLinkText;
@ -169,6 +174,7 @@ LinkWidget.prototype.execute = function() {
this.tooltip = this.getAttribute("tooltip");
this["aria-label"] = this.getAttribute("aria-label");
this.linkClasses = this.getAttribute("class");
this.enforceClasses = this.getAttribute("setClass");;
this.tabIndex = this.getAttribute("tabindex");
this.draggable = this.getAttribute("draggable","yes");
this.linkTag = this.getAttribute("tag","a");

14
editions/tw5.com/tiddlers/widgets/LinkWidget.tid
View File

@ -1,6 +1,6 @@
caption: link
created: 20131024141900000
modified: 20170907141926550
modified: 20171212063130159
tags: Widgets
title: LinkWidget
type: text/vnd.tiddlywiki
@ -11,11 +11,13 @@ The `link` widget generates links to tiddlers. (Use the HTML `<a>` element to ge
|!Attribute |!Description |
|to |The title of the target tiddler for the link (defaults to the [[current tiddler|Current Tiddler]]) |
|aria-label |Optional [[Accessibility]] label |
|aria-label |Optional accessibility label |
|tooltip |Optional tooltip WikiText |
|tabindex |Optional numeric [[tabindex|https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/tabIndex]] |
|draggable |"yes" to enable the link to be draggable (defaults to "yes") |
|tag |Optional tag to override the default "a" element |
|class|Optional css classes __in addition to__ the default classes (see below)|
|setClass|Optional css classes __instead of__ the default classes <<.from-version "5.1.16">>|
The content of the link widget is rendered within the `<a>` tag. The draggable functionality is equivalent to using the DraggableWidget with the ''tiddler'' attribute set to the link target.
@ -54,12 +56,20 @@ This causes the tooltip to be the ''tooltip'' field of the target tiddler. If th
! CSS Classes
The link widget automatically determines and applies the following classes to links:
* `tc-tiddlylink` - applied to all links
* `tc-tiddlylink-external` - applied to external, non-tiddler links
* `tc-tiddlylink-internal` - applied to tiddler links
* `tc-tiddlylink-missing` - applied to tiddler links where the target tiddler doesn't exist
* `tc-tiddlylink-resolves` - applied to tiddler links when the target tiddler does exist
Use the `class` attribute to specify additional css classes, or `setClass` to apply only that but not the above defaults, e.g. when used in a LinkCatcherWidget:
<<wikitext-example-without-html """*<$link class="example">Here</$link> the `example` class is added.
*<$link setClass="example">Here</$link> only the `example` class applies.
*<$link setClass="">Here</$link> no class is set.""">>
! `href` generation
The following process is used to generate the `href` attribute of the generated HTML `<a>` element: