[SugarCube 2.16.0] Custom macro creating additional line break.
I made a custom macro, <<message>>, to basically toggle some text on and off, kind of like a <<linkappend>>, but able to 'collapse' the resulting text by clicking again. It's working. I'm sure it's not perfect/ideal, but it's working.
It looks like this:
And you use it by doing something like this:
It can accept a few arguments, like link text, 'btn' to make it a button, and a unique ID to allow a couple of them to exist independently in the same passage, so that's why there's a lot more code there really needs to be.
Anyway, whenever I place it in a passage, it generates one extra line break, and I can't figure out why.
So I'll put in something like:
and the output will look like:
If I click the link, it does exactly what I want, and displays the payload on the next new line, but it still maintains that extra line-break:
Which means, at the very least, that the problem isn't that the additional line-break is being used as some sort of placeholder inadvertently.
Anyway, I know something's wrong with the code (probably a couple things), and I brace myself for your sweet, sweet knowledge bombs.
It looks like this:
Macro.add("message", {
tags : null,
handler : function () {
var type = 'link';
var link = 'Help';
var id = this.args.join();
var message, el, jqSel;
id = id.replace(/[^A-Za-z0-9]/g, '');
if (this.args.includes('btn')) {
type = 'button';
}
if (this.args[0] !== 'btn' && this.args.length !== 0) {
link = this.args[0];
}
if (type === 'link') {
jqSel = '#macro-message-' + id + ' a';
} else {
jqSel = '#macro-message-' + id + ' button';
}
//output
link = '<div class="help" id="macro-message-' + id + '"><<' + type + ' "' + link + '">><</' + type + '>></div>';
message = link + this.payload[0].contents;
el = '#macro-message-' + id;
$(this.output).wiki(link)
.on('click', jqSel, function () {
if ($(el).hasClass('open')) {
$(el).empty().wiki(link).removeClass('open');
} else {
$(el).empty().wiki(message).addClass('open');
}
});
}
});
And you use it by doing something like this:
<<message>>blah blah blah<</message>>
It can accept a few arguments, like link text, 'btn' to make it a button, and a unique ID to allow a couple of them to exist independently in the same passage, so that's why there's a lot more code there really needs to be.
Anyway, whenever I place it in a passage, it generates one extra line break, and I can't figure out why.
So I'll put in something like:
Some text. <<message "Click for information!">>Here's some information!<</message>> More text.
and the output will look like:
Some text. Click for information! More text.
If I click the link, it does exactly what I want, and displays the payload on the next new line, but it still maintains that extra line-break:
Some text. Click for information! Here's some information! More text.
Which means, at the very least, that the problem isn't that the additional line-break is being used as some sort of placeholder inadvertently.
Anyway, I know something's wrong with the code (probably a couple things), and I brace myself for your sweet, sweet knowledge bombs.
Comments
Beyond that. If you want an anchor or a button, simply use the standard elements. Incorporating a <<link>> or <<button>> macro for the sole purpose of mugging them for the element they create is daft.
Finally. Since you're creating the elements, there's no need to attach the handler to the wrapper and using a delegate selector to target the link element. You may simply attach the handler to the link element itself.
Try something like the following:
Macro.add('message', { tags : null, handler : function () { var message = this.payload[0].contents; var $wrapper = $(document.createElement('span')); var $link = $(document.createElement(this.args.includes('btn') ? 'button' : 'a')); var $content = $(document.createElement('span')); $link .wiki(this.args.length > 0 && this.args[0] !== 'btn' ? this.args[0] : 'Help') .ariaClick(function () { if ($wrapper.hasClass('open')) { $content .css('display', 'none') .empty(); } else { $content .css('display', 'block') .wiki(message); } $wrapper.toggleClass('open'); }); $wrapper .attr('id', 'macro-' + this.name + '-' + this.args.join('').replace(/[^A-Za-z0-9]/g, '')) .addClass('help') .append($link) .append($content) .appendTo(this.output); } });I'm still having a bit of trouble completely wrapping my head around jQuery, but I'm getting there. I really appreciate the help, especially how detailed your explanations are. You're a national treasure, TME.