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.

3

Works like a charm, thanks! :slight_smile:

4

Avec l’aide de ce sujet, j’ai pu créer un objet SVG en utilisant l’aide 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"
        }
      })
    );

Cependant, je constate que l’attribut viewBox() est toujours rendu en minuscules.
L’image SVG est générée avec tous les attributs définis (), mais elle ne s’affiche pas sur la page. Qu’est-ce qui me manque ?

Je me rends compte que cela est fourni par le package virtual-dom, mais je n’ai pas pu y trouver la solution.

5

Intéressant… Pourriez-vous également lier/coller le SVG généré ?

7

@Bas Malheureusement, je n’ai plus le même code. J’ai avancé et implémenté le logo par d’autres méthodes.

Mais ceci, je peux vous le dire maintenant ; si j’inspectais le navigateur pour l’image SVG, et que je modifiais en HTML dans le navigateur pour renommer l’attribut viewbox en viewBox, l’image SVG s’afficherait correctement dans le navigateur.

Et ce serait identique à l’image SVG originale que j’ai déconstruite en aide h.

8

Ok, merci de nous avoir informés. Heureux que vous ayez réussi à résoudre le problème par une autre méthode !