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.

「いいね！」 4
3

Works like a charm, thanks! :slight_smile:

4

このトピックの助けを借りて、hヘルパーを使用してSVGオブジェクトを作成できました。

    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パッケージによって提供されていることに気づきましたが、そこでも解決策を見つけることができませんでした。

「いいね！」 2
5

興味深いですね。生成されたSVGもリンクまたは貼り付けていただけますか？

「いいね！」 1
7

@Bas 残念ながら、同じコードはもうありません。私は先に進み、さまざまな方法でロゴを実装しました。

しかし、今お伝えできることは、ブラウザでSVG画像を検査し、ブラウザでHTMLとして編集してviewbox属性をviewBoxに名前変更した場合、SVG画像はブラウザで正しくレンダリングされるということです。

そして、私がhヘルパーに分解した元のSVG画像と同一になります。

「いいね！」 1
8

承知いたしました。お知らせいただきありがとうございます。別の方法で解決できたとのこと、よかったです！

「いいね！」 2
9

このトピックは、最後の返信から30日後に自動的にクローズされました。新しい返信は許可されていません。