SugarCube Custom Macro - Table of links

kelpsie

Trying to make a table full of clickable links to other passages. Not sure how to continue from this point, but I think the code is self-explanatory enough.

macros.add("hublinks", {
	version: {major: 1, minor: 0, revision: 0 },
	handler: function (place, macroName, params, parser)
	{
		if (this.args.length < 1)
		{
			return "Enter the hub variable";
		}
		
		var tab = document.createElement("table");
		tab.id = "hubtable";
		var row = tab.insertRow(0);
		
		var cell1 = row.insertCell(0);
		var cell2 = row.insertCell(1);

		cell1.innerHTML = "Wikifier who now?";
		cell2.innerHTML = "I'd appreciate a link in here.";
	
		this.output.appendChild(tab);
	}
});

kelpsie

Got it working on my own.

macros.hublinks = {	
	version: {major: 1, minor: 0, revision: 0 },
	handler: function (place, macroName, params, parser)
	{
		var tab = document.createElement("table");
		tab.id = "hubtable";
		var row = tab.insertRow(0);
		
		var cell1 = row.insertCell(0);
		var cell2 = row.insertCell(1);

		cell1.innerHTML = "[[Works this way]]";
		cell2.innerHTML = "[[WooHoo|Somewhere]]";
	
		new Wikifier(place, tab.outerHTML);
	}
};

Had to change the macros.add("macroname", { to macros.macroname = {, though I don't know why Wikifier works with one and not the other. Deprecated syntax?
Then had to make sure I was using outerHTML to get the properly formatted table

TheMadExile

Hmm. This has to be SugarCube v1 if you were trying to use macros.add().

Also, I am a bit puzzled as to why you felt the need to use a macro for this—more on that at the bottom.

kelpsie wrote: »

Had to change the macros.add("macroname", { to macros.macroname = {, though I don't know why Wikifier works with one and not the other. Deprecated syntax?

The Wikifier works with either, you simply were not using it within your first example.

And, yes, one of those syntaxes is deprecated—its macros.macroname. See the SugarCube v1's Macros API documentation.

kelpsie wrote: »

Then had to make sure I was using outerHTML to get the properly formatted table

Because innerHTML yields the contents of the element, not the element itself—which is why outerHTML exists. Beyond that, creating the element nodes and then converting them to HTML markup to feed into the Wikifier is… less than optimal.


You wanted something like the following:

macros.add("hublinks", {
	version : { major : 1, minor : 0, revision : 0 },
	handler : function () {
		var tab = document.createElement("table");
		tab.id = "hubtable";

		var row = tab.insertRow(-1);

		var cell1 = row.insertCell(-1);
		new Wikifier(cell1, "[[Works this way]]");

		var cell2 = row.insertCell(-1);
		new Wikifier(cell2, "[[WooHoo|Somewhere]]");
	
		this.output.appendChild(tab);
	}
});

TIP: If you're simply appending rows and cells, you may use -1 as the index.

---

I am a bit puzzled as to why you felt the need to use a macro for this when simply using <table> markup, wrapped within a widget for reuse if necessary, would work just as well. For example, the equivalent <table> markup:

<table id="hubtable">
<tr>
<td>[[Works this way]]</td>
<td>[[WooHoo|Somewhere]]</td>
</tr>
</table>

As a <<hublinks>> widget: (goes in a separate widget-tagged passage)

<<widget "hublinks">>\
<table id="hubtable">
<tr>
<td>[[Works this way]]</td>
<td>[[WooHoo|Somewhere]]</td>
</tr>
</table>\
<</widget>>