add CharacterList to Episode 'description', improve Search Results with result Highlighting (messy), attempts at route #hash scene/quote scrolling

client/package-lock.json

@@ -2591,6 +2591,11 @@
         "tweetnacl": "^0.14.3"
       }
     },
+    "bezier-easing": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/bezier-easing/-/bezier-easing-2.1.0.tgz",
+      "integrity": "sha1-wE3+i5JtbsrKGBPWn/F5t8ICXYY="
+    },
     "bfj": {
       "version": "6.1.2",
       "resolved": "https://registry.npm.taobao.org/bfj/download/bfj-6.1.2.tgz?cache=0&sync_timestamp=1577112259978&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fbfj%2Fdownload%2Fbfj-6.1.2.tgz",
@@ -11461,6 +11466,14 @@
       "resolved": "https://registry.npm.taobao.org/vue-router/download/vue-router-3.3.4.tgz?cache=0&sync_timestamp=1596470252029&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fvue-router%2Fdownload%2Fvue-router-3.3.4.tgz",
       "integrity": "sha1-Tjirw0oRxBtsPYJERJouNjumJQs="
     },
+    "vue-scrollto": {
+      "version": "2.18.2",
+      "resolved": "https://registry.npmjs.org/vue-scrollto/-/vue-scrollto-2.18.2.tgz",
+      "integrity": "sha512-LQOsuCfDJ5JXsRBb6frM85sCFABZdkwwwchLh4k3wbp8P6URRDcQvwp31U4cTnbyYEOo6JFP7+3p0wkvwy7MdA==",
+      "requires": {
+        "bezier-easing": "2.1.0"
+      }
+    },
     "vue-server-renderer": {
       "version": "2.6.11",
       "resolved": "https://registry.npmjs.org/vue-server-renderer/-/vue-server-renderer-2.6.11.tgz",

client/src/App.vue

@@ -4,7 +4,7 @@
             <b-container :fluid="true" class="py-3 px-lg-5 px-md-4">
                 <b-row class="my-3 pl-1">
                     <b-col lg="3" xl="2" md="12">
-                        <ais-search-box @keydown.native="showResults" placeholder="Search here…"/>
+                        <ais-search-box @keydown.native="showResults" ref="searchbox" placeholder="Search here…"/>
                     </b-col>
                 </b-row>
                 <b-row>
@@ -68,7 +68,7 @@ export default {
   },
   methods: {
     showResults() {
-      if (this.$route.path !== '/search_results') {
+      if (this.$refs.searchbox.currentRefinement !== '' && this.$route.path !== '/search_results') {
         this.$router.push({ name: 'SearchResults' });
       }
     },

client/src/components/CharacterList.vue

@@ -0,0 +1,41 @@
+<template>
+    <b-container v-if="characters" :fluid=true>
+        <b-row cols="12">
+            <b-col sm="1" v-for="character in characters" :key="character.name">
+                <b-button squared class="mx-1" variant="dark" size="sm" :id="`character-${character.id}`">
+                    {{ character.name }}
+                </b-button>
+                <b-popover boundary-padding="2" :target="`character-${character.id}`" triggers="hover" placement="top"
+                           :content="`${character.appearances} Quote${character.appearances > 1 ? 's' : ''}`">
+                </b-popover>
+            </b-col>
+        </b-row>
+    </b-container>
+</template>
+
+<style lang="scss">
+    .btn {
+        box-shadow: none;
+
+        &:focus { box-shadow: none; }
+    }
+
+    /*.btn-dark {*/
+    /*    &:not(:disabled), &:not {*/
+    /*        */
+    /*    }*/
+    /*}*/
+
+    /*.btn-dark:not(:disabled):not(.disabled):active, .btn-dark:not(:disabled):not(.disabled).active, {*/
+    /*    color: #ffffff;*/
+    /*    background-color: #1d2124;*/
+    /*    border-color: #171a1d;*/
+    /*}*/
+</style>
+
+<script>
+export default {
+  name: 'CharacterList',
+  props: ['characters'],
+};
+</script>

client/src/components/Episode.vue

@@ -5,9 +5,10 @@
             <span v-if="episode">
                 {{ episode.description }}
             </span>
+            <CharacterList v-if="episode.characters" :characters="episode.characters"></CharacterList>
         </b-card>
         <div v-if="episode != null">
-            <b-card v-for="(scene, scene_index) in episode.scenes" :key="`scene-${scene_index}`"
+            <b-card v-for="(scene, scene_index) in episode.scenes" :key="`scene-${scene_index}`" :id="scene_index"
                     class="mb-1" body-class="p-0 py-2">
                 <b-card-text>
                     <QuoteList :quotes="scene.quotes"></QuoteList>
@@ -24,10 +25,14 @@
 <script>
 import axios from 'axios';
 import QuoteList from './QuoteList.vue';
+import CharacterList from './CharacterList.vue';
 
 export default {
   name: 'Episode',
-  components: { QuoteList },
+  components: {
+    QuoteList,
+    CharacterList,
+  },
   data() {
     return {
       episode: null,
@@ -52,6 +57,8 @@ export default {
   watch: {
     $route() {
       this.getEpisode();
+      console.log(this.$route.params.hash);
+      this.$scrollTo(`${this.$route.hash}`, 500, { easing: 'ease-in-out' });
     },
   },
 };

client/src/components/SearchResults.vue

@@ -4,14 +4,36 @@
             <div slot-scope="{ items }">
                 <b-card v-for="item in items" :key="item.objectID" class="mb-1" body-class="p-0 py-2">
                     <b-card-text class="p-1 pl-2">
-                        <strong>{{ item.speaker }}</strong>: {{ item.text }}
+                        <strong v-html="item._highlightResult.speaker.value"></strong>:
+                        <span v-html="item._highlightResult.text.value" class="pl-1"></span>
+                        <!--                        <strong>{{ item.speaker }}</strong>:-->
+                        <!--                        <ais-highlight attribute="text" :hit="item"/>-->
                     </b-card-text>
+                    <template v-slot:footer>
+                        <router-link class="no-link" :to="`/${item.season}/${item.episode}#${item.section}`">
+                            Season {{ item.season }} Episode {{ item.episode }} Scene {{ item.section }}
+                        </router-link>
+                    </template>
                 </b-card>
             </div>
         </ais-hits>
     </div>
 </template>
 <style>
+    .card-footer {
+        padding: 0.1em;
+        font-size: 0.8em;
+        color: grey;
+    }
+
+    mark, .mark {
+        padding: 0.02em;
+        background-color: #fff500;
+        /*color: #black;*/
+        /*-webkit-filter: invert(100%);*/
+        /*filter: invert(100%);*/
+    }
+
     .ais-Hits-item, .ais-InfiniteHits-item, .ais-InfiniteResults-item, .ais-Results-item {
         /*margin-top: 1rem;*/
         /*margin-left: 1rem;*/

client/src/main.js

@@ -2,9 +2,11 @@ import 'bootstrap/dist/css/bootstrap.css';
 import Vue from 'vue';
 import BootstrapVue from 'bootstrap-vue';
 import InstantSearch from 'vue-instantsearch';
+import VueScrollTo from 'vue-scrollto';
 import App from './App.vue';
 import router from './router';
 
+Vue.use(VueScrollTo);
 Vue.use(BootstrapVue);
 Vue.use(InstantSearch);
 

client/src/router.js

@@ -26,4 +26,17 @@ export default new Router({
       component: SearchResults,
     },
   ],
+  scrollBehavior(to, from, savedPosition) {
+    // https://router.vuejs.org/guide/advanced/scroll-behavior.html
+    if (to.hash) {
+      return { selector: to.hash };
+    }
+    if (savedPosition) {
+      return savedPosition;
+    }
+    return {
+      x: 0,
+      y: 0,
+    };
+  },
 });