Réutiliser la fonctionnalité Hamburger de Discourse

sarahann · Avril 17, 2018, 9:42

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

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…

sarahann · Avril 18, 2018, 5:06

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.

simon · Avril 18, 2018, 10:47

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.

awesomerobot · Avril 19, 2018, 1:17

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 . 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>

sarahann · Avril 19, 2018, 7:51

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)?

awesomerobot · Avril 20, 2018, 6:18

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;
    },
  });

kimardenmiller · Mars 30, 2019, 7:00

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.

Queth · Janvier 2, 2020, 5:55

Bonjour ! Je sais que c’est un vieux sujet, mais c’est presque exactement ce que je cherche / essaie de faire. C’est pourquoi je poste ici (plutôt que de créer un nouveau sujet). Veuillez noter que je ne suis pas développeur, je ne sais pas comment fonctionnent les plugins et je ne sais pas écrire en JavaScript. Mais je sais copier-coller du code

Ce que j’essaie de faire, c’est ajouter une connexion à une salle de chat dans un menu déroulant. Ainsi, je veux une icône « chat », et dans le menu déroulant, il y aura un champ de saisie, un bouton de soumission et un texte d’aide / un lien vers une page d’aide.

Puis-je adapter votre code en remplaçant l’icône « couverts » par une icône « chat », comment faire cela ?
Et deuxièmement, comment puis-je insérer du code HTML à la place de l’instruction « hello world » ? (essentiellement, comment entrer du HTML là-dedans ?)

Merci beaucoup d’avance !

ngets · Juillet 2, 2020, 9:34

En lien avec le message de Queth, est-il possible d’ajouter un lien supplémentaire juste avant FAQ dans le menu déroulant ?

Ce composant pourrait fonctionner. Il suffit de déplacer le lien personnalisé juste avant FAQ
https://meta.discourse.org/t/custom-hamburger-menu-links/87644/41

spirobel · Juillet 2, 2020, 2:32

Haha, par coïncidence, je regarde exactement la même chose. Je pense que la meilleure approche consiste à rouvrir le widget du menu hamburger et à surcharger la méthode html.

github.com/discourse/discourse

app/assets/javascripts/discourse/app/widgets/hamburger-menu.js

c200238bd


      
              this.attach("menu-links", {
                name: "footer-links",
                omitRule: true,
                contents: () => this.footerLinks(prioritizeFaq, faqUrl)
              })
            );
          
            return results;
          },
          
          html() {
            return this.attach("menu-panel", {
              contents: () => this.panelContents(),
              maxWidth: this.settings.maxWidth
            });
          },
          
          clickOutsideMobile(e) {
            const $centeredElement = $(document.elementFromPoint(e.clientX, e.clientY));
            if (
              $centeredElement.parents(".panel").length &&

Je vais unshift mon widget devant l’élément FAQ. Je n’ai pas vérifié si cela fonctionne, mais ce sera ma méthode
Voici où cela semble fonctionner :

  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
        });
      },
  });

J’ai ajouté un menu déroulant à titre d’exemple.
Salutations

ngets · Juillet 10, 2020, 5:38

Bonjour, comment puis-je placer ceci juste après l’icône de recherche ? Et comment ajouter du HTML personnalisé dans panelContents ?

Sujet		Réponses	Vues
Make another hamburger menu? Support	2	1225	Avril 20, 2018
Add custom menu panel to the correct location (same as hamburger menu panel) Development	8	1585	Mai 18, 2021
How can I add custom hamburger menu Development	9	3627	Mai 10, 2024
How to display a widget in the hamburger menu? Support	9	1521	Octobre 14, 2020
Need plugin code for customised dicourse header Support	10	1548	Septembre 11, 2022

Réutiliser la fonctionnalité Hamburger de Discourse

Sujets connexes