Extend link widget with additional attributes

Add “tabindex”, “draggable” and “tag” attributes

core/modules/widgets/link.js

@@ -53,8 +53,13 @@ Render this widget into the DOM
 */
 LinkWidget.prototype.renderLink = function(parent,nextSibling) {
 	var self = this;
+	// Sanitise the specified tag
+	var tag = this.linkTag;
+	if($tw.config.htmlUnsafeElements.indexOf(tag) !== -1) {
+		tag = "a";
+	}
 	// Create our element
-	var domNode = this.document.createElement("a");
+	var domNode = this.document.createElement(tag);
 	// Assign classes
 	var classes = [];
 	if(this.linkClasses) {
@@ -78,7 +83,10 @@ LinkWidget.prototype.renderLink = function(parent,nextSibling) {
 		wikiLinkText = wikiLinkTemplate.replace("$uri_encoded$",encodeURIComponent(this.to));
 	wikiLinkText = wikiLinkText.replace("$uri_doubleencoded$",encodeURIComponent(encodeURIComponent(this.to)));
 	wikiLinkText = this.getVariable("tv-get-export-link",{params: [{name: "to",value: this.to}],defaultValue: wikiLinkText});
+	if(tag === "a") {
 		domNode.setAttribute("href",wikiLinkText);		
+	}
+	domNode.setAttribute("tabindex",this.tabIndex);
 	// Set the tooltip
 	// HACK: Performance issues with re-parsing the tooltip prevent us defaulting the tooltip to "<$transclude field='tooltip'><$transclude field='title'/></$transclude>"
 	var tooltipWikiText = this.tooltip || this.getVariable("tv-wikilink-tooltip");
@@ -98,9 +106,13 @@ LinkWidget.prototype.renderLink = function(parent,nextSibling) {
 	// Add a click event handler
 	$tw.utils.addEventListeners(domNode,[
 		{name: "click", handlerObject: this, handlerMethod: "handleClickEvent"},
+	]);
+	if(this.draggable === "yes") {
+		$tw.utils.addEventListeners(domNode,[
 			{name: "dragstart", handlerObject: this, handlerMethod: "handleDragStartEvent"},
 			{name: "dragend", handlerObject: this, handlerMethod: "handleDragEndEvent"}
 		]);
+	}
 	// Insert the link into the DOM and render any children
 	parent.insertBefore(domNode,nextSibling);
 	this.renderChildren(domNode,null);
@@ -119,9 +131,11 @@ LinkWidget.prototype.handleClickEvent = function(event) {
 		},
 		navigateSuppressNavigation: event.metaKey || event.ctrlKey || (event.button === 1)
 	});
+	if(this.domNodes[0].hasAttribute("href")) {
 		event.preventDefault();
 		event.stopPropagation();
 		return false;
+	}
 };
 
 LinkWidget.prototype.handleDragStartEvent = function(event) {
@@ -189,13 +203,14 @@ LinkWidget.prototype.handleDragEndEvent = function(event) {
 Compute the internal state of the widget
 */
 LinkWidget.prototype.execute = function() {
-	// Get the target tiddler title
+	// Pick up our attributes
 	this.to = this.getAttribute("to",this.getVariable("currentTiddler"));
-	// Get the link title and aria label
 	this.tooltip = this.getAttribute("tooltip");
 	this["aria-label"] = this.getAttribute("aria-label");
-	// Get the link classes
 	this.linkClasses = this.getAttribute("class");
+	this.tabIndex = this.getAttribute("tabindex");
+	this.draggable = this.getAttribute("draggable","yes");
+	this.linkTag = this.getAttribute("tag","a");
 	// Determine the link characteristics
 	this.isMissing = !this.wiki.tiddlerExists(this.to);
 	this.isShadow = this.wiki.isShadowTiddler(this.to);

editions/tw5.com/tiddlers/widgets/LinkWidget.tid

@@ -1,6 +1,6 @@
 title: LinkWidget
 created: 201310241419
-modified: 201408280837
+modified: 201502231037
 tags: Widgets
 caption: link
 
@@ -12,6 +12,9 @@ The `link` widget generates links to tiddlers. (Use the HTML `<a>` element to ge
 |to |The title of the target tiddler for the link (defaults to the CurrentTiddler) |
 |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 |
 
 The content of the link widget is rendered within the `<a>` tag.