From a75b9063aa1b2bfc0e53bf38e61865bbac8c65bd Mon Sep 17 00:00:00 2001
From: Kris <kris.aubuchon@discourse.org>
Date: Sun, 14 Jul 2019 23:31:20 -0400
Subject: [PATCH] initial commit

---
 .gitignore           |   2 +
 about.json           |   8 +++
 common/common.scss   | 140 ++++++++++++++++++++++++++++++++++++++++++
 common/head_tag.html | 142 +++++++++++++++++++++++++++++++++++++++++++
 locales/en.yml       |   4 ++
 mobile/mobile.scss   |  11 ++++
 settings.yml         |  10 +++
 7 files changed, 317 insertions(+)
 create mode 100644 .gitignore
 create mode 100644 about.json
 create mode 100644 common/common.scss
 create mode 100644 common/head_tag.html
 create mode 100644 locales/en.yml
 create mode 100644 mobile/mobile.scss
 create mode 100644 settings.yml

diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..c94d134
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,2 @@
+.discourse-site
+HELP
diff --git a/about.json b/about.json
new file mode 100644
index 0000000..f66e51b
--- /dev/null
+++ b/about.json
@@ -0,0 +1,8 @@
+{
+  "name": "discourse-search-banner",
+  "about_url": null,
+  "license_url": null,
+  "component": true,
+  "assets": {},
+  "color_schemes": {}
+}
diff --git a/common/common.scss b/common/common.scss
new file mode 100644
index 0000000..b1b586b
--- /dev/null
+++ b/common/common.scss
@@ -0,0 +1,140 @@
+@import "common/foundation/mixins";
+
+$max-width: 600px;
+
+.display-search-banner {
+  #main-outlet {
+    padding-top: 0;
+  }
+}
+
+.custom-search-banner {
+  padding-top: 4em;
+}
+
+.custom-search-banner-wrap {
+  @if $background-image != "none" {
+    background-image: url($background-image);
+  } @else {
+    background: none;
+  }
+  @if $tile-background_image == "true" {
+    background-size: auto;
+  } @else {
+    background-size: cover;
+    background-repeat: no-repeat;
+  }
+  box-sizing: border-box;
+  position: relative;
+  padding: 2.5em 0 3em;
+  margin: 1em auto;
+  @include breakpoint(tablet) {
+    padding: 1em 8px 2em;
+    margin-top: 0.5em;
+  }
+
+  > div {
+    margin: 0 auto;
+    max-width: $max-width;
+  }
+
+  .search-menu {
+    position: relative;
+    display: flex;
+    input[type="text"] {
+      margin: 0;
+      width: 100%;
+      padding-right: 4em;
+    }
+  }
+
+  .search-input {
+    flex: 1 1 auto;
+    margin: 0;
+    padding: 0;
+    .searching {
+      // spinner
+      top: 0.5em;
+      right: 2.25em;
+    }
+  }
+
+  h1 {
+    font-size: $font-up-6;
+    line-height: $line-height-medium;
+    @include breakpoint(tablet) {
+      font-size: $font-up-4;
+    }
+  }
+
+  h1,
+  p {
+    text-align: center;
+  }
+
+  .search-icon {
+    position: absolute;
+    z-index: 2;
+    order: 2;
+    right: 0;
+    background: transparent;
+    .discourse-no-touch & {
+      &:hover {
+        background: transparent;
+        .d-icon {
+          color: $primary-high;
+        }
+      }
+    }
+  }
+
+  .search-context,
+  .results {
+    margin: 0 auto;
+    max-width: $max-width;
+  }
+
+  .search-context {
+    position: absolute;
+    z-index: 10;
+    right: 0;
+    top: 2.67em;
+  }
+
+  .results {
+    box-sizing: border-box;
+    background: $secondary;
+    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.15);
+    position: absolute;
+    width: $max-width;
+    z-index: 9;
+    margin-left: auto;
+    margin-right: auto;
+    left: 0;
+    top: 1.9em;
+    right: 0;
+    padding: 2em 1em 1em 1em;
+    @include breakpoint(mobile-extra-large) {
+      width: 100%;
+    }
+    ul,
+    ol {
+      list-style-type: none;
+      margin: 0;
+    }
+  }
+}
+
+.search-widget {
+  div.discourse-tags {
+    font-size: $font-down-1;
+  }
+  li a.widget-link {
+    display: block;
+    padding: 0.25em 0.5em;
+    &:hover,
+    &:focus {
+      background-color: $highlight-medium;
+    }
+  }
+}
diff --git a/common/head_tag.html b/common/head_tag.html
new file mode 100644
index 0000000..b187c97
--- /dev/null
+++ b/common/head_tag.html
@@ -0,0 +1,142 @@
+<script type="text/discourse-plugin" version="0.8">
+  api.registerConnectorClass('below-site-header', '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.only_show_on_homepage) {
+          var showBannerHere = home
+        } else {
+          var showBannerHere = topMenuRoutes.indexOf(url) > -1 || home
+        }
+        if (showBannerHere){
+          component.set('displaySearchBanner', true);
+          $('html').addClass('display-search-banner');
+        } else {
+          component.set('displaySearchBanner', false);
+          $('html').removeClass('display-search-banner');
+        }
+      });
+    }
+  });
+</script>
+
+<script type="text/discourse-plugin" version="0.8">
+  // Simplified version of header search theme component
+   const searchMenuWidget = api.container.factoryFor('widget:search-menu');
+   const corePanelContents = searchMenuWidget.class.prototype['panelContents'];
+   api.reopenWidget('search-menu', {
+     buildKey: function(attrs) {
+       let type = attrs.formFactor || 'menu'
+       return `search-${type}`
+     },
+     defaultState: function(attrs) {
+       return {
+         formFactor: attrs.formFactor || 'menu',
+         showHeaderResults: false
+       }
+     },
+     html: function() {
+       if (this.state.formFactor === 'widget') {
+         return this.panelContents();
+       } else {
+         return this.attach('menu-panel', {
+           maxWidth: 500,
+           contents: () => this.panelContents()
+         });
+       }
+     },
+     clickOutside() {
+        if (!this.vnode.hooks['widget-mouse-down-outside']) {
+          return this.mouseDownOutside();
+        }
+      },
+      mouseDownOutside() {
+        const formFactor = this.state.formFactor;
+        if (formFactor === 'menu') {
+          return this.sendWidgetAction('toggleSearchMenu');
+        } else {
+          this.state.showHeaderResults = false;
+          this.scheduleRerender();
+        }
+      },
+     click: function() {
+       const formFactor = this.state.formFactor;
+       if (formFactor === 'widget') {
+         this.showResults();
+       }
+     },
+     showResults: function() {
+       this.state.showHeaderResults = true;
+       this.scheduleRerender();
+     },
+     linkClickedEvent: function() {
+       const formFactor = this.state.formFactor;
+       if (formFactor === 'widget') {
+         $('#search-term').val('');
+     $('.search-placeholder').css('visibility', 'visible');
+         this.state.showHeaderResults = false;
+         this.scheduleRerender();
+       }
+     },
+     panelContents: function() {
+       const formFactor = this.state.formFactor;
+       let showHeaderResults = this.state.showHeaderResults == null || this.state.showHeaderResults === true;
+       let contents = [];
+
+       if (formFactor === 'widget') {
+        contents.push(this.attach('button', {
+            icon: 'search',
+            className: 'search-icon',
+            action: 'showResults'
+        }));
+      }
+
+       contents = contents.concat(...corePanelContents.call(this));
+       let results = contents.find(w => w.name == 'search-menu-results');
+        if (results && results.attrs.results) {
+          $('.search-menu.search-header').addClass('has-results');
+        } else {
+          $('.search-menu.search-header').removeClass('has-results');
+        }
+        if (formFactor === 'menu' || showHeaderResults) {
+          return contents;
+        } else {
+          return contents.filter((widget) => {
+            return widget.name != 'search-menu-results' && widget.name != 'search-context';
+          });
+        }
+     }
+   });
+   api.createWidget("search-widget", {
+     tagName: "div.search-widget",
+   });
+   api.decorateWidget('search-widget:after', function(helper) {
+     const searchWidget = helper.widget,
+     appController = helper.register.lookup('controller:application'),
+     searchMenuVisible = searchWidget.state.searchVisible;
+     if (!searchMenuVisible && !searchWidget.attrs.topic) {
+       return helper.attach('search-menu', {
+         contextEnabled: searchWidget.state.contextEnabled,
+         formFactor: 'widget'
+       });
+     }
+   });
+</script>
+
+<script
+  type="text/x-handlebars"
+  data-template-name="/connectors/below-site-header/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}}
+</script>
diff --git a/locales/en.yml b/locales/en.yml
new file mode 100644
index 0000000..3e50af1
--- /dev/null
+++ b/locales/en.yml
@@ -0,0 +1,4 @@
+en:
+  search_banner:
+    headline: "Welcome to our community"
+    subhead: "We're happy to have you here. If you need help, please search before you post."
diff --git a/mobile/mobile.scss b/mobile/mobile.scss
new file mode 100644
index 0000000..c279752
--- /dev/null
+++ b/mobile/mobile.scss
@@ -0,0 +1,11 @@
+.search-widget {
+  .search-link {
+    .badge-category {
+      display: inline-block;
+    }
+  }
+}
+
+.custom-search-banner-wrap .results {
+  padding: 2em 0.5em 0.5em;
+}
diff --git a/settings.yml b/settings.yml
new file mode 100644
index 0000000..5735409
--- /dev/null
+++ b/settings.yml
@@ -0,0 +1,10 @@
+only_show_on_homepage:
+  default: false
+  description: When unchecked the banner will show on all pages listed in the <a href="/admin/site_settings/category/all_results?filter=top_menu">top menu site setting</a>
+
+background_image:
+  type: string
+  default: none
+  description: Enter an image url
+
+tile_background_image: false