diff --git a/core/modules/widgets/link.js b/core/modules/widgets/link.js index 15a99ce2c..f46349a2c 100755 --- a/core/modules/widgets/link.js +++ b/core/modules/widgets/link.js @@ -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"); diff --git a/editions/tw5.com/tiddlers/widgets/LinkWidget.tid b/editions/tw5.com/tiddlers/widgets/LinkWidget.tid index 076b26187..882584ebb 100644 --- a/editions/tw5.com/tiddlers/widgets/LinkWidget.tid +++ b/editions/tw5.com/tiddlers/widgets/LinkWidget.tid @@ -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 `` 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 `` 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: + +<Here the `example` class is added. +*<$link setClass="example">Here only the `example` class applies. +*<$link setClass="">Here no class is set.""">> + ! `href` generation The following process is used to generate the `href` attribute of the generated HTML `` element: