Widget Helper stripping attributes?

Разработка
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

С помощью этой темы мне удалось создать SVG-объект с помощью хелпера 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"
        }
      })
    );

Однако я заметил, что атрибут viewBox(*) всегда отображается полностью в нижнем регистре.

SVG-изображение генерируется со всеми заданными атрибутами (*), но не отображается на странице. Что я упускаю?

Я понимаю, что это предоставляется пакетом virtual-dom, но я не смог найти решение там.

5

Интересно.. Не могли бы вы также добавить ссылку на сгенерированный SVG или вставить его?

7

@Bas К сожалению, у меня больше нет того же кода. Я перешел к другим решениям и реализовал логотип другими методами.

Но вот что я могу сказать вам сейчас: если я проверял SVG-изображение в браузере и редактировал его как HTML, переименовав атрибут viewbox в viewBox, то SVG-изображение корректно отображалось в браузере.

И оно было бы идентично оригинальному SVG-изображению, которое я разбирал в хелпер h.

8

Хорошо, спасибо, что сообщили нам. Рады, что вам удалось решить проблему другим способом!