Discourse のハンバーガー機能の再利用

sarahann · 2018 年 4 月 17 日午後 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 · 2018 年 4 月 18 日午後 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 · 2018 年 4 月 18 日午後 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 · 2018 年 4 月 19 日午前 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 · 2018 年 4 月 19 日午後 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 · 2018 年 4 月 20 日午後 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 · 2019 年 3 月 30 日午前 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 · 2020 年 1 月 2 日午後 5:55

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

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!

ngets · 2020 年 7 月 2 日午前 9:34

Queth の投稿に関連して、ドロップダウンパネルの FAQ の直前に追加のリンクを挿入することは可能でしょうか？

このコンポーネントが機能するはずです。カスタムリンクを FAQ の直前に移動させる必要があります。
https://meta.discourse.org/t/custom-hamburger-menu-links/87644/41

spirobel · 2020 年 7 月 2 日午後 2:32

哈哈、偶然ですが私もまさに同じものを見ていました。一番良い方法は、ハンバーガーメニューウィジェットを再オープンして、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 &&

私は FAQ の項目の前にウィジェットを unshift しようと考えています。実際に動くか確認はしていませんが、これが私のアプローチです
ここでは動いているようです

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

例としてドロップダウンを追加しました。
では、Cheers

ngets · 2020 年 7 月 10 日午前 5:38

こんにちは、検索アイコンのすぐ右にこれを配置するにはどうすればよいですか？また、panelContents の中にカスタム HTML を追加するにはどうすればよいですか？

トピック		返信	表示
Make another hamburger menu? Support	2	1224	2018 年 4 月 20 日
Add custom menu panel to the correct location (same as hamburger menu panel) Development	8	1559	2021 年 5 月 18 日
How can I add custom hamburger menu Development	9	3606	2024 年 5 月 10 日
How to display a widget in the hamburger menu? Support	9	1504	2020 年 10 月 14 日
Need plugin code for customised dicourse header Support	10	1528	2022 年 9 月 11 日

Discourse のハンバーガー機能の再利用

関連トピック