sarahann
2018 年 4 月 17 日午後 9:42
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
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
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.
simon
2018 年 4 月 18 日午後 10:47
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.
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
<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
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)?
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;
},
});
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
9
こんにちは！これは古いトピックだと承知していますが、私が探していること/行おうとしていることにほぼ合致しています。そのため、新しいトピックを作成する代わりにここに投稿します。私は開発者ではなく、プラグインの仕組みも理解しておらず、JavaScript の書き方も分かりません。しかし、コードをコピー＆ペーストする方法は知っています。
私が行おうとしているのは、ドロップダウンメニュー内にチャットルームへのログイン機能を追加することです。つまり、「チャット」アイコンを表示し、そのドロップダウンメニューに入力フィールドと送信ボタン、そしてヘルプテキスト（またはヘルプページへのリンク）を配置したいのです。
まず、コードを適用する際、「カトラリー」アイコンの代わりに「チャット」アイコンにするにはどうすればよいでしょうか？
事前にありがとうございます！
ngets
2020 年 7 月 2 日午前 9:34
10
Queth の投稿に関連して、ドロップダウンパネルの FAQ の直前に追加のリンクを挿入することは可能でしょうか？
このコンポーネントが機能するはずです。カスタムリンクを FAQ の直前に移動させる必要があります。https://meta.discourse.org/t/custom-hamburger-menu-links/87644/41
哈哈、偶然ですが私もまさに同じものを見ていました。一番良い方法は、ハンバーガーメニューウィジェットを再オープンして、html メソッドをオーバーライドすることだと思います。
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
});
},
});
例としてドロップダウンを追加しました。
ngets
2020 年 7 月 10 日午前 5:38
12
こんにちは、検索アイコンのすぐ右にこれを配置するにはどうすればよいですか？また、panelContents の中にカスタム HTML を追加するにはどうすればよいですか？
. Add this to your header.html file.