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) {
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) {
const contextType = this.searchContextType();
let contents = () => {
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) {
state.contextEnabled = undefined;
state.searchContextType = contextType;
}
if (state.searchVisible) {
const contextType = this.searchContextType();
if (state.contextEnabled === undefined) {
if (forceContextEnabled.includes(contextType)) {
state.contextEnabled = true;
if (state.searchContextType !== contextType) {
state.contextEnabled = undefined;
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 }));
} else if (state.hamburgerVisible) {
panels.push(this.attach('hamburger-menu'));
} else if (state.userVisible) {
panels.push(this.attach('user-menu'));
}
additionalPanels.map((panel) => {
if (this.state[panel.toggle]) {
panels.push(this.attach(panel.name, panel.transformAttrs.call(this, attrs, state)));
}
});
additionalPanels.map((panel) => {
if (this.state[panel.toggle]) {
panels.push(this.attach(panel.name, panel.transformAttrs.call(this, attrs, state)));
}
});
return panels;
};
const contents = [ this.attach('home-logo', { minimized: !!attrs.topic }),
h('div.panel.clearfix', panels) ];
if (attrs.topic) {
contents.push(this.attach('header-topic-info', attrs));
}
return h('div.wrap', h('div.contents.clearfix', contents));
let contentsAttrs = { contents, minimized: !!attrs.topic };
return h('div.wrap',
this.attach('header-contents', $.extend({}, attrs, contentsAttrs))
);
},
updateHighlight() {