DEV: Refactor into component with computed properties
This commit also - Removes use of api.onPageChange in favor of the router service - Removes JQuery use - Uses currentRouteName instead of currentURL so that the bar is hidden for loading substates
This commit is contained in:
David Taylor
parent
4422ee24d3
commit
1e6ade528d
|
|
@ -13,103 +13,6 @@ export default apiInitializer("0.8", (api) => {
|
|||
},
|
||||
});
|
||||
|
||||
api.registerConnectorClass(enableConnectorName, "search-banner", {
|
||||
setupComponent(args, component) {
|
||||
var topMenuRoutes = Discourse.SiteSettings.top_menu
|
||||
.split("|")
|
||||
.map(function (route) {
|
||||
return "/" + route;
|
||||
});
|
||||
var homeRoute = topMenuRoutes[0];
|
||||
|
||||
api.onPageChange((url, title) => {
|
||||
var home = url === "/" || url.match(/^\/\?/) || url === homeRoute;
|
||||
if (settings.show_on === "homepage") {
|
||||
var showBannerHere = home;
|
||||
} else if (settings.show_on === "top_menu") {
|
||||
var showBannerHere = topMenuRoutes.indexOf(url) > -1 || home;
|
||||
} else {
|
||||
var showBannerHere =
|
||||
url.match(/.*/) && !url.match(/search.*/) && !url.match(/admin.*/);
|
||||
}
|
||||
if (showBannerHere) {
|
||||
component.set("displaySearchBanner", true);
|
||||
$("html").addClass("display-search-banner");
|
||||
} else {
|
||||
component.set("displaySearchBanner", false);
|
||||
$("html").removeClass("display-search-banner");
|
||||
}
|
||||
|
||||
if (settings.show_for === "everyone") {
|
||||
component.set("show_for", true);
|
||||
} else if (
|
||||
settings.show_for === "logged_out" &&
|
||||
!api.getCurrentUser()
|
||||
) {
|
||||
component.set("show_for", true);
|
||||
} else if (settings.show_for === "logged_in" && api.getCurrentUser()) {
|
||||
component.set("show_for", true);
|
||||
} else {
|
||||
component.set("show_for", false);
|
||||
$("html").removeClass("display-search-banner");
|
||||
}
|
||||
});
|
||||
},
|
||||
});
|
||||
|
||||
api.registerConnectorClass(
|
||||
"above-main-container",
|
||||
"search-banner-above-main",
|
||||
{
|
||||
setupComponent(args, component) {
|
||||
var topMenuRoutes = Discourse.SiteSettings.top_menu
|
||||
.split("|")
|
||||
.map(function (route) {
|
||||
return "/" + route;
|
||||
});
|
||||
var homeRoute = topMenuRoutes[0];
|
||||
|
||||
api.onPageChange((url, title) => {
|
||||
var home = url === "/" || url.match(/^\/\?/) || url === homeRoute;
|
||||
if (settings.show_on === "homepage") {
|
||||
var showBannerHere = home;
|
||||
} else if (settings.show_on === "top_menu") {
|
||||
var showBannerHere = topMenuRoutes.indexOf(url) > -1 || home;
|
||||
} else {
|
||||
var showBannerHere =
|
||||
url.match(/.*/) &&
|
||||
!url.match(/search.*/) &&
|
||||
!url.match(/admin.*/);
|
||||
}
|
||||
if (showBannerHere) {
|
||||
component.set("displaySearchBanner", true);
|
||||
$("html").addClass("display-search-banner");
|
||||
} else {
|
||||
component.set("displaySearchBanner", false);
|
||||
$("html").removeClass("display-search-banner");
|
||||
}
|
||||
|
||||
if (settings.show_for === "everyone") {
|
||||
component.set("show_for", true);
|
||||
} else if (
|
||||
settings.show_for === "logged_out" &&
|
||||
!api.getCurrentUser()
|
||||
) {
|
||||
component.set("show_for", true);
|
||||
} else if (
|
||||
settings.show_for === "logged_in" &&
|
||||
api.getCurrentUser()
|
||||
) {
|
||||
component.set("show_for", true);
|
||||
} else {
|
||||
component.set("show_for", false);
|
||||
$("html").removeClass("display-search-banner");
|
||||
}
|
||||
});
|
||||
},
|
||||
}
|
||||
);
|
||||
|
||||
// Simplified version of header search theme component
|
||||
const searchMenuWidget = api.container.factoryFor("widget:search-menu");
|
||||
const corePanelContents = searchMenuWidget.class.prototype["panelContents"];
|
||||
|
|
|
|||
|
|
@ -0,0 +1,61 @@
|
|||
import Component from "@ember/component";
|
||||
import { inject as service } from "@ember/service";
|
||||
import { defaultHomepage } from "discourse/lib/utilities";
|
||||
import { and } from "@ember/object/computed";
|
||||
import discourseComputed, { observes } from "discourse-common/utils/decorators";
|
||||
|
||||
export default Component.extend({
|
||||
router: service(),
|
||||
tagName: "",
|
||||
|
||||
@discourseComputed("router.currentRouteName")
|
||||
displayForRoute(currentRouteName) {
|
||||
const showOn = settings.show_on;
|
||||
if (showOn == "homepage") {
|
||||
return currentRouteName == `discovery.${defaultHomepage()}`;
|
||||
} else if (showOn == "top_menu") {
|
||||
return this.siteSettings.top_menu
|
||||
.split("|")
|
||||
.any((m) => `discovery.${m}` == currentRouteName);
|
||||
} else {
|
||||
// "all"
|
||||
return (
|
||||
currentRouteName != "full-page-search" &&
|
||||
!currentRouteName.startsWith("admin.")
|
||||
);
|
||||
}
|
||||
},
|
||||
|
||||
@discourseComputed("currentUser")
|
||||
displayForUser() {
|
||||
const showFor = settings.show_for;
|
||||
if (showFor == "everyone") {
|
||||
return true;
|
||||
} else if (showFor == "logged_out" && !currentUser) {
|
||||
return true;
|
||||
} else if (showFor == "logged_in" && currentUser) {
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
},
|
||||
|
||||
shouldDisplay: and("displayForUser", "displayForRoute"),
|
||||
|
||||
// Setting a class on <html> from a component is not great
|
||||
// but we need it for backwards compatibility
|
||||
@observes("shouldDisplay")
|
||||
displayChanged() {
|
||||
document.documentElement.classList.toggle(
|
||||
"display-search-banner",
|
||||
this.shouldDisplay
|
||||
);
|
||||
},
|
||||
|
||||
didInsertElement() {
|
||||
this.displayChanged();
|
||||
},
|
||||
|
||||
didDestroyElement() {
|
||||
document.documentElement.classList.remove("display-search-banner");
|
||||
},
|
||||
});
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
{{#if shouldDisplay}}
|
||||
<div class="custom-search-banner" >
|
||||
<div class="wrap custom-search-banner-wrap">
|
||||
<h1>{{theme-i18n "search_banner.headline"}}</h1>
|
||||
<p>{{theme-i18n "search_banner.subhead"}}</p>
|
||||
{{mount-widget widget="search-widget"}}
|
||||
</div>
|
||||
</div>
|
||||
{{/if}}
|
||||
|
|
@ -1,11 +1 @@
|
|||
{{#if show_for}}
|
||||
{{#if displaySearchBanner}}
|
||||
<div class="custom-search-banner" >
|
||||
<div class="wrap custom-search-banner-wrap">
|
||||
<h1>{{theme-i18n "search_banner.headline"}}</h1>
|
||||
<p>{{theme-i18n "search_banner.subhead"}}</p>
|
||||
{{mount-widget widget="search-widget"}}
|
||||
</div>
|
||||
</div>
|
||||
{{/if}}
|
||||
{{/if}}
|
||||
{{search-banner}}
|
||||
|
|
@ -1,11 +1 @@
|
|||
{{#if show_for}}
|
||||
{{#if displaySearchBanner}}
|
||||
<div class="custom-search-banner" >
|
||||
<div class="wrap custom-search-banner-wrap">
|
||||
<h1>{{theme-i18n "search_banner.headline"}}</h1>
|
||||
<p>{{theme-i18n "search_banner.subhead"}}</p>
|
||||
{{mount-widget widget="search-widget"}}
|
||||
</div>
|
||||
</div>
|
||||
{{/if}}
|
||||
{{/if}}
|
||||
{{search-banner}}
|
||||
Loading…
Reference in New Issue