Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

[SugarCube 2.16.0] Custom macro creating additional line break.

edited May 2017 in Help! with 1.x
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:
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

  • edited May 2017
    There is no additional line break in actuality. The extra "line break" you're seeing is caused by using a block level element—two once you cycle the thing as you're erroneously appending the construct to itself. That may be fixed by switching to inline elements and displaying the content element as block when appropriate.

    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);
    	}
    });
    
  • Thanks.

    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.
Sign In or Register to comment.