Add section search component for use with directory pages.

Add search box component for section search at the top of direcotry landing pages.

packages/marko-web-theme-monorail/browser/index.js

@@ -15,6 +15,7 @@ const MenuToggleButton = () => import(/* webpackChunkName: "theme-menu-toggle-bu
 const NewsletterCloseButton = () => import(/* webpackChunkName: "theme-newsletter-close-button" */ './newsletter-close-button.vue');
 const NewsletterToggleButton = () => import(/* webpackChunkName: "theme-newsletter-toggle-button" */ './newsletter-toggle-button.vue');
 const CompanySearch = () => import(/* webpackChunkName: "theme-company-search" */ './company-search.vue');
+const SectionSearch = () => import(/* webpackChunkName: "theme-section-search" */ './section-search.vue');
 const SiteNewsletterMenu = () => import(/* webpackChunkName: "theme-site-newsletter-menu" */ './site-newsletter-menu.vue');
 const WufooForm = () => import(/* webpackChunkName: "theme-wufoo-form" */ './wufoo-form.vue');
 const TopStoriesMenu = () => import(/* webpackChunkName: "theme-top-stories-menu" */ './top-stories-menu.vue');
@@ -115,6 +116,9 @@ export default (Browser, config = {
   Browser.register('ThemeCompanySearch', CompanySearch, {
     provide: { EventBus },
   });
+  Browser.register('ThemeSectionSearch', SectionSearch, {
+    provide: { EventBus },
+  });
   Browser.register('ThemeTopStoriesMenu', TopStoriesMenu);
   Browser.register('WufooForm', WufooForm);
   Browser.register('RevealAdHandler', RevealAdHandler);

packages/marko-web-theme-monorail/browser/section-search.vue

@@ -0,0 +1,89 @@
+<template>
+  <div ref="search" class="section-search" :class="{'open':openSuggestion}">
+    <input
+      v-model="selection"
+      class="form-control"
+      type="text"
+      placeholder="Search Categories..."
+    >
+    <div v-if="selection" class="list-group">
+      <div v-for="suggestion in matches" :key="suggestion" class="list-group-item">
+        <a :href="'/'+suggestion.alias" @click="emitAction()">
+          {{ suggestion.name }}
+        </a>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  inject: ['EventBus'],
+  props: {
+    sections: {
+      type: Array,
+      required: true,
+    },
+  },
+
+  data() {
+    return {
+      open: false,
+      current: 0,
+      selection: '',
+    };
+  },
+
+  computed: {
+    matches() {
+      return this.sections.filter((section) => {
+        const match = section.name.toLowerCase().indexOf(this.selection.toLowerCase()) >= 0;
+        return match;
+      });
+      // return this.sectionNames.filter((str) => {
+      //   const match = str.toLowerCase().indexOf(this.selection.toLowerCase()) >= 0;
+      //   return match;
+      // });
+    },
+    openSuggestion() {
+      return this.selection !== ''
+      && this.matches.length !== 0
+      && this.open === true;
+    },
+  },
+
+  mounted() {
+    this.addListeners();
+  },
+
+  beforeDestroy() {
+    this.removeListeners();
+  },
+
+  methods: {
+    detectOutclick(event) {
+      const el = this.$refs.search;
+      if (!el.contains(event.target) && el !== event.target) {
+        this.selection = '';
+      }
+    },
+
+    addListeners() {
+      document.addEventListener('click', this.detectOutclick.bind(this));
+      document.addEventListener('touchstart', this.detectOutclick.bind(this));
+    },
+    removeListeners() {
+      document.removeEventListener('click', this.detectOutclick.bind(this));
+      document.removeEventListener('touchstart', this.detectOutclick.bind(this));
+    },
+    emitAction() {
+      const payload = {
+        category: 'Content Header Search',
+        action: 'Click',
+        label: 'Website Section Page',
+      };
+      this.EventBus.$emit('content-header-search', payload);
+    },
+  },
+};
+</script>

packages/marko-web-theme-monorail/components/blocks/marko.json

@@ -145,6 +145,9 @@
   "<theme-section-list-block>": {
     "template": "./section-list.marko"
   },
+  "<theme-section-search-block>": {
+    "template": "./section-search.marko"
+  },
   "<theme-section-title-feed-block>": {
     "template": "./section-title-feed.marko",
     "<query-params>": {},

packages/marko-web-theme-monorail/components/blocks/section-search.marko

@@ -0,0 +1,14 @@
+import queryFragment from "../../graphql/fragments/sections-search"
+import { getChildSectionsById } from "../../utils/get-child-sections-by-id";
+
+$ const { sectionIds, includeSelf } = input;
+
+<if(sectionIds.length)>
+  <marko-web-query|{ nodes: parent }|
+    name="website-sections"
+    params={ includeIds: sectionIds, queryFragment }
+  >
+    $ const nodesById = getChildSectionsById(parent[0], {}, includeSelf);
+    <marko-web-browser-component name="ThemeSectionSearch" props={ sections: Object.values(nodesById) } />
+  </marko-web-query>
+</if>

packages/marko-web-theme-monorail/graphql/fragments/sections-search.js

@@ -0,0 +1,46 @@
+const gql = require('graphql-tag');
+
+module.exports = gql`
+fragment WebsiteSectionSearchFragment on WebsiteSection {
+  id
+  alias
+  name
+  children(input: { pagination: { limit: 0 } }) {
+    edges {
+      node {
+        id
+        alias
+        name
+        children(input: { pagination: { limit: 0 } }) {
+          edges {
+            node {
+              id
+              alias
+              name
+              children(input: { pagination: { limit: 0 } }) {
+                edges {
+                  node {
+                    id
+                    alias
+                    name
+                    children(input: { pagination: { limit: 0 } }) {
+                      edges {
+                        node {
+                          id
+                          alias
+                          name
+                        }
+                      }
+                    }
+                  }
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
+`;

packages/marko-web-theme-monorail/utils/get-child-sections-by-id.js

@@ -0,0 +1,11 @@
+const { getAsArray } = require('@parameter1/base-cms-object-path');
+
+const getChildSectionsById = (section, childSections = {}, includeSelf = true) => {
+  const { id } = section;
+  const children = getAsArray(section, 'children.edges').map(({ node }) => node);
+  return {
+    ...children.reduce((obj, child) => getChildSectionsById(child, obj), childSections),
+    ...(includeSelf && !section[id] && { [id]: section }),
+  };
+};
+module.exports = { getChildSectionsById };