Widget Helper stripping attributes?

Entwickler
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.

3

Works like a charm, thanks! :slight_smile:

4

Mit Hilfe dieses Themas konnte ich ein SVG-Objekt mit dem h-Helfer erstellen:

    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"
        }
      })
    );

Ich sehe jedoch, dass das viewBox()-Attribut immer in Kleinbuchstaben gerendert wird.
Das SVG-Bild wird mit allen definierten Attributen () generiert, aber es wird nicht auf der Seite gerendert. Was fehlt mir?

Mir ist bewusst, dass dies vom virtual-dom-Paket bereitgestellt wird, aber ich konnte dort keine Lösung finden.

5

Interessant.. Könnten Sie auch die generierte SVG verlinken/einfügen?

7

@Bas Leider habe ich den gleichen Code nicht mehr. Ich bin weitergegangen und habe das Logo mit anderen Methoden implementiert.

Aber das kann ich Ihnen jetzt sagen: Wenn ich das SVG-Bild im Browser inspiziert und als HTML im Browser bearbeitet hätte, um das viewbox-Attribut in viewBox umzubenennen, würde das SVG-Bild korrekt im Browser gerendert werden.

Und es wäre identisch mit dem ursprünglichen SVG-Bild, das ich in den h-Helfer zerlegt habe.

8

Ok, danke, dass Sie uns informiert haben. Schön, dass Sie es mit einer anderen Methode lösen konnten!