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

javascripts/discourse/api-initializers/init-search-banner.js

@@ -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"];

javascripts/discourse/components/search-banner.js

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

javascripts/discourse/templates/components/search-banner.hbs

@@ -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}}

javascripts/search-banner/templates/connectors/above-main-container/search-banner.hbs

@@ -1,11 +1 @@
-{{#if show_for}}
+{{search-banner}}
-  {{#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}}

javascripts/search-banner/templates/connectors/below-site-header/search-banner.hbs

@@ -1,11 +1 @@
-{{#if show_for}}
+{{search-banner}}
-  {{#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}}