Widget Helper stripping attributes?

Sviluppatore
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

Con l’aiuto di questo argomento, sono stato in grado di creare un oggetto SVG usando l’helper h:

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

Tuttavia, vedo che l’attributo viewBox() viene sempre renderizzato in minuscolo.
L’immagine SVG viene generata con tutti gli attributi definiti (), ma non viene renderizzata nella pagina. Cosa mi manca?

Mi rendo conto che questo è fornito dal pacchetto virtual-dom, ma non sono riuscito a trovare la soluzione lì.

5

Interessante.. Potresti anche linkare/incollare l’SVG generato?

7

@Bas Sfortunatamente, non ho più lo stesso codice. Sono andato avanti e ho implementato il logo con metodi diversi.

Ma questo posso dirtelo ora; se ispezionassi il browser per l’immagine SVG e modificassi come HTML nel browser per rinominare l’attributo viewbox in viewBox, l’immagine SVG verrebbe visualizzata correttamente nel browser.

E sarebbe identica all’immagine SVG originale che ho decostruito nell’helper h.

8

Ok, grazie per avercelo comunicato. Lieti che tu sia riuscito a risolvere con un metodo diverso!