Split out header contents for easier customization

This commit is contained in:
Robin Ward 2017-09-28 10:21:54 -04:00
parent 8b74c7d325
commit 132cbac600
2 changed files with 53 additions and 35 deletions

View File

@ -0,0 +1,13 @@
import { createWidget } from 'discourse/widgets/widget';
import hbs from 'discourse/widgets/hbs-compiler';
createWidget('header-contents', {
tagName: 'div.contents.clearfix',
template: hbs`
{{attach widget="home-logo"}}
<div class="panel clearfix">{{yield}}</div>
{{#if attrs.topic}}
{{attach widget="header-topic-info"}}
{{/if}}
`,
});

View File

@ -206,49 +206,54 @@ export default createWidget('header', {
}, },
html(attrs, state) { html(attrs, state) {
const panels = [this.attach('header-buttons', attrs),
this.attach('header-icons', { hamburgerVisible: state.hamburgerVisible,
userVisible: state.userVisible,
searchVisible: state.searchVisible,
ringBackdrop: state.ringBackdrop,
flagCount: attrs.flagCount,
user: this.currentUser })];
if (state.searchVisible) { let contents = () => {
const contextType = this.searchContextType(); const panels = [
this.attach('header-buttons', attrs),
this.attach('header-icons', {
hamburgerVisible: state.hamburgerVisible,
userVisible: state.userVisible,
searchVisible: state.searchVisible,
ringBackdrop: state.ringBackdrop,
flagCount: attrs.flagCount,
user: this.currentUser }
)
];
if (state.searchContextType !== contextType) { if (state.searchVisible) {
state.contextEnabled = undefined; const contextType = this.searchContextType();
state.searchContextType = contextType;
}
if (state.contextEnabled === undefined) { if (state.searchContextType !== contextType) {
if (forceContextEnabled.includes(contextType)) { state.contextEnabled = undefined;
state.contextEnabled = true; state.searchContextType = contextType;
} }
if (state.contextEnabled === undefined) {
if (forceContextEnabled.includes(contextType)) {
state.contextEnabled = true;
}
}
panels.push(this.attach('search-menu', { contextEnabled: state.contextEnabled }));
} else if (state.hamburgerVisible) {
panels.push(this.attach('hamburger-menu'));
} else if (state.userVisible) {
panels.push(this.attach('user-menu'));
} }
panels.push(this.attach('search-menu', { contextEnabled: state.contextEnabled })); additionalPanels.map((panel) => {
} else if (state.hamburgerVisible) { if (this.state[panel.toggle]) {
panels.push(this.attach('hamburger-menu')); panels.push(this.attach(panel.name, panel.transformAttrs.call(this, attrs, state)));
} else if (state.userVisible) { }
panels.push(this.attach('user-menu')); });
}
additionalPanels.map((panel) => { return panels;
if (this.state[panel.toggle]) { };
panels.push(this.attach(panel.name, panel.transformAttrs.call(this, attrs, state)));
}
});
const contents = [ this.attach('home-logo', { minimized: !!attrs.topic }), let contentsAttrs = { contents, minimized: !!attrs.topic };
h('div.panel.clearfix', panels) ]; return h('div.wrap',
this.attach('header-contents', $.extend({}, attrs, contentsAttrs))
if (attrs.topic) { );
contents.push(this.attach('header-topic-info', attrs));
}
return h('div.wrap', h('div.contents.clearfix', contents));
}, },
updateHighlight() { updateHighlight() {