Javascript HTML - widget

Development

AI-generated summary

A discussion about creating a custom widget for a hamburger menu in a Discourse theme. Juraj_Štefánik asks how to add a sub-menu that appears on hover or click. keegan responds by suggesting a custom widget, providing an example of how to return a widget using api.decorateWidget and create a custom widget using createWidget.

Additionally, keegan shares a resource on Widgets and a GitHub project for reference.

Finally, keegan answers Juraj_Štefánik’s follow-up question on how to add target="_blank" to an anchor tag, providing an example of how to add it to the attributes object.

1

Hello, if I want to add an ul list to the hamburger menu with from the submenus that I see either on a click or on a hover mouse, should I do it this way or know something more efficient?

I can add individual items to the hamburger menu via a component, but I need to supply sub items there that will be displayed on the hover

Can you advise me? Thanks

<script type="text/discourse-plugin" version="0.1">
  api.decorateWidget('menu-links:before', helper => {
    return helper.h("li", [
    helper.h("a.google", {
        href:"https://google.com",
        title: "Google",
        }, helper.h('p', 'Google')),
    ]);
  });
</script>

EDIT: SOLVED

**But one more thing, how I add tagert blank? **

2

Return a widget:

What you could do is return your own custom widget to api.decorateWidget, which will give you a lot more control in terms of applying attributes, state, actions, etc.

So you could do:

api.decorateWidget('menu-links:before', helper => {
   return helper.widget.attach("custom-menu-links");
});

Then inside javascripts/discourse/widgets/custom-menu-links.js, create a widget using the createWidget helper:

import { createWidget } from 'discourse/widgets/widget';

createWidget('custom-menu-links', {
...
});

Take a look at this topic to learn some of the features of Widgets:

I used widgets quite a bit in my dropdown header theme component, you might find some of the code helpful.

Adding target=“_blank”

You add it to the attributes object:

      return helper.h('a.google',
        {
          attributes: {
            href: "https://google.com",
            target: "_blank",
            title: "Google"
          },
        }
        ...
      );