Add ability for user to choose outlet (#2)

This commit adds the ability for the user to choose to display the search banner below the header, or above the main content. This is needed for themes using multiple components in these plugin outlets.

common/head_tag.html

@@ -1,5 +1,50 @@
 <script type="text/discourse-plugin" version="0.8">
-  api.registerConnectorClass('above-main-container', 'search-banner', {
+  const enableConnectorName = settings.plugin_outlet;
+  const disableConnectorName = enableConnectorName === 'above-main-container' ? 'below-site-header' : 'above-main-container';
+
+  api.registerConnectorClass(disableConnectorName, 'search-banner', { 
+    shouldRender() { return false }
+  });
+
+  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');
+        }
+      });
+    }
+  });
+</script>
+
+<script type="text/discourse-plugin" version="0.8">
+  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];
@@ -139,6 +184,25 @@
    });
 </script>
 
+<script
+  type="text/x-handlebars"
+  data-template-name="/connectors/below-site-header/search-banner"
+>
+
+  {{#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}}
+</script>
+
 <script
   type="text/x-handlebars"
   data-template-name="/connectors/above-main-container/search-banner"

settings.yml

@@ -7,6 +7,13 @@ show_on:
     - all
   description: top_menu refers to the <a href="/admin/site_settings/category/all_results?filter=top_menu">top menu site setting</a>
 
+plugin_outlet:
+  default: "above-main-container"
+  type: enum
+  choices:
+    - above-main-container
+    - below-site-header
+
 background_image:
   type: string
   default: none