Widget Helper stripping attributes?

dev
1

I was trying my hand at my first plugin, and to a certain extent it worked quite OK :slight_smile:

However, I’m having trouble with the helper class. The class seems to strip out certain attributes and I have no idea what’s happening.

I’m adding an \<a> with some classes and a few attributes.

I’m trying to add

  • id
  • href
  • title
  • aria-label
  • _target

The first three work fine, the last two don’t.

I’ve tried to reorder and rename the attributes. But it seems there is some sort of selection happening?

Snippet:

decorateWidget('header-icons:before', helper => {
    return h('li.header-dropdown-toggle', [
        h('a.icon.btn-flat', {
                'id': 'my id',
                'href': 'http://example.com',
                'title': 'my title',
                'aria-label': 'my label',
                '_target': "_blank"
            }, [
                h('i.fa.fa-info.d-icon', {
                    'aria-hidden': 'true'
                })
            ]
        ),
    ]);
});

Rendered as

45
451524×208 31.7 KB

2

https://github.com/discourse/discourse/blob/master/app/assets/javascripts/discourse/widgets/header.js.es6#L93-L104

As per above code, I guess it should be like below

decorateWidget('header-icons:before', helper => {
    return h('li.header-dropdown-toggle', [
        h('a.icon.btn-flat', {
                'id': 'my id',
                'href': 'http://example.com',
                'title': 'my title',
                'attributes': {
                    'aria-label': 'my label',
                    'target': "_blank"
                }
            }, [
                h('i.fa.fa-info.d-icon', { 'attributes': {
                    'aria-hidden': 'true'
                }})
            ]
        ),
    ]);
});

Also target is not _target.

4 Likes
3

Works like a charm, thanks! :slight_smile:

4

With the help of this topic, I was able to create an SVG object using the h helper:

    let logo = h("svg", {
        "attributes": {
          "width": "22",
          "height": "24",
          "viewBox": "0 0 22 24",
          "fill": "none",
          "xmlns": "http://www.w3.org/2000/svg"
        }
      },
      h("path", {
        "attributes": {
          "d": "M11.5992 4.29387L15.4141 ... 0V4.29387Z",
          "fill": "#000000"
        }
      })
    );

However, I see that the viewBox(*) attribute is always rendered in all lower-case.

The SVG image is generated with all defined attributes (*), but it does not render on the page. What am I missing?

I realize this is provided by the virtual-dom package, but I couldn’t find the solution there.

2 Likes
5

Interesting… Could you link/paste the generated SVG too?

1 Like
7

@Bas Unfortunately, I don’t have the same code anymore. I moved on, and implemented the logo via different methods.

But this I can tell you now; if I inspected the browser for the SVG image, and edited as HTML in the browser to rename viewbox attribute to viewBox, the SVG image would render correctly in the browser.

And it would be identical to the original SVG image which I deconstructed into h helper.

1 Like
8

Ok, thank you for letting us know. Happy that you managed to sort it with a different method!

2 Likes
9

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.