Wiederverwendung der Discourse-Hamburger-Funktionalität

Unterstützung
1

Hello Discourse Team!

I am using the discourse CLI Discourse Theme CLI (console app to help you build themes) and the plugin API A new versioned API for client side plugins to help me create my theme.

I have added a custom header in the header.html file. On mobile, I was hoping to create a hamburger menu that functions like discourse’s hamburger

image
image.jpg1602×112 20.2 KB

But has completely different menu contents.

I could create the hamburger and menu with my knowledge of css/html/js. But I was hoping for a way to use the functionality that discourse has already implemented (opening, closing, etc…).

Any suggestions on how to achieve this?

  • I thought maybe I would be able to extend the widget for the current navigation, change the settings, then attach it to the html I have written for my nav. But the connectors seemed to be predefined, and I wasnt sure how to connect my widget to my html. This might not be the right direction at all either…
2 „Gefällt mir“
2

Okay, so I think I have a better understanding on what I am trying to do.

I would like to create a connector where I can connect to one of the elements that I have added to the page.

I’m guessing this isn’t possible???

The plugin API (https://github.com/discourse/discourse/blob/master/app/assets/javascripts/discourse/lib/plugin-api.js.es6#L11) has api.registerConnectorClass but I cannot seem to figure out how to connect this to my custom element.

4

The Brand Header might give you some ideas about how to approach this. You can find its code here: GitHub - discourse/discourse-brand-header: Brand header theme component for Discourse. It only displays a hamburger menu in mobile mode. You can get the mobile view on a desktop by appending
?mobile_view=1 to your forum’s URL.

10 „Gefällt mir“
5

This is slightly rough but should get you 99% of the way there when it comes to having an additional menu item with a dropdown panel. Calling this one a pizza menu :pizza:. Add this to your header.html file.

<script type="text/discourse-plugin" version="0.8">
        
api.createWidget('pizza-menu', {
  tagName: 'div.pizza-panel',

  panelContents() {
    return "hello world";
  },

  html() {
    return this.attach('menu-panel', {
      contents: () => this.panelContents()
    });
  },

  clickOutside() {
    this.sendWidgetAction('togglePizza');
  }
});
    
api.decorateWidget('header-icons:after', function(helper) {
  const headerState = helper.widget.parentWidget.state;
  let contents = [];
    contents.push(helper.attach('header-dropdown', {
      title: 'pizza-menu',
      icon: 'cutlery',
      active: headerState.pizzaVisible,
      iconId: 'toggle-pizza-menu',
      action: 'togglePizza',
    }));
    if (headerState.pizzaVisible) {
            contents.push(helper.attach('pizza-menu'));
    }
    return contents;
});

api.attachWidgetAction('header', 'togglePizza', function() {
  this.state.pizzaVisible = !this.state.pizzaVisible;
});

</script>
20 „Gefällt mir“
6

Yes! This is very close!

My only concern was the connect part:

What if I wanted to add the pizza menu to a custom HTML element (defined in common/head_tag.html)?

7

Ah ok in that case you’re looking at something more like what @simon mentioned in the brand header theme component, I was attaching the action to the existing header widget… the brand header adds it to a new one. The new widget here w/ toggleHamburger:

 api.createWidget('brand-header', {
    tagName: 'header.b-header.clearfix',
    buildKey: () => `header`,
  
    defaultState() {
      let states =  {
        hamburgerVisible: false
      };
  
      return states;
    },
  
    toggleHamburger() {
      this.state.hamburgerVisible = !this.state.hamburgerVisible;
    },

and then the action is added to an HTML element in another widget here

api.createWidget('brand-header-icons', {
    tagName: 'ul.icons.clearfix',
  
    buildAttributes() {
      return { role: 'navigation' };
    },
  
    html(attrs) {
      const hamburger = this.attach('header-dropdown', {
                              title: 'hamburger_brand_menu',
                              icon: 'bars',
                              iconId: 'toggle-hamburger-brand-menu',
                              active: attrs.hamburgerVisible,
                              action: 'toggleHamburger'
                            });
      const icons = [hamburger];
      return icons;
    },
  });
8 „Gefällt mir“
8

Thank you for this code. Can you point me in the right direction on filling out the panelContents? I see some indication, but not sure how it all links together.

9

hello! I know this is an old topic but this is almost what I’m looking for/trying to do. So therefore I post here (instead of making a new topic). Please bear in mind that I am not a developer and I don’t know how the plugins work and I cannot write javascript. But I know how to copy-paste code :wink:

What I’m trying to do is add login to a chatroom inside a dropdown menu. Thus, I want a “chat” icon, and in the dropdown menu will be an input field and a submit button, and some help text / link to help page.

Can I adapt your code then, instead of the ‘cutlery’ icon a ‘chat’ icon, how to do that?
and secondly, how can I insert HTML code instead of the ‘hello world’ statement. (basically how to enter HTML in there?

thank you very much in advance!

1 „Gefällt mir“
10

In Bezug auf Queths Beitrag: Ist es möglich, direkt vor dem FAQ-Eintrag im Dropdown-Menü einen zusätzlichen Link einzufügen?

Diese Komponente könnte funktionieren. Man muss lediglich den benutzerdefinierten Link direkt vor das FAQ verschieben.
https://meta.discourse.org/t/custom-hamburger-menu-links/87644/41

2 „Gefällt mir“
11

Haha, zufälligerweise schaue ich mir genau dasselbe an. Ich denke, der beste Weg ist, das Hamburger-Menü-Widget erneut zu öffnen und die html-Methode zu überschreiben.

Ich werde mein Widget mit unshift vor das FAQ-Element einfügen. Ich habe noch nicht geprüft, ob es funktioniert, aber das ist mein Ansatz :smiley:
Hier scheint es zu funktionieren:

  api.reopenWidget("hamburger-menu", {

      html() {
        let conti = this.panelContents()
        conti.unshift(h('div',[h('span','blabla description: '),this.attach('widget-dropdown',
  {id: "from", translatedLabel: "bla",onChange: "changeaction",
  content: [
      { id: 1, label: "foo.bar" },
      { id: 2, translatedLabel: "FooBar" },
      { id: 3, label: "foo.baz", icon: "times" },
      { id: 4, html: "<b>foo</b>" },
    ],
    options: {bodyClass: "lang-drop-body"}
  })]))
        return this.attach("menu-panel", {
          contents: () => conti,
          maxWidth: this.settings.maxWidth
        });
      },
  });

Ich habe zum Beispiel ein Dropdown-Menü hinzugefügt.
Viele Grüße

4 „Gefällt mir“
12

Hallo, wie kann ich dies direkt nach dem Suchsymbol platzieren? Und wie füge ich benutzerdefiniertes HTML in panelContents ein?

1 „Gefällt mir“