From: Stephen Cameron <s@hybridvision.net>
Date: Wed, 5 Jun 2019 20:16:00 +0000 (+0200)
Subject: WIP #2738 @8
X-Git-Url: http://git.cubedesigners.com/?a=commitdiff_plain;h=8981c248e5f3f95fc3aa0571c792ec8181c97242;p=pmi.git

WIP #2738 @8
---

diff --git a/package.json b/package.json
index 7d4bd8a..6bfb5aa 100644
--- a/package.json
+++ b/package.json
@@ -21,6 +21,7 @@
         "lodash": "^4.17.5",
         "lost": "^8.3.1",
         "popper.js": "^1.12",
+        "portal-vue": "^2.1.5",
         "resolve-url-loader": "^2.3.1",
         "rupture": "^0.7.1",
         "stylus": "acidjazz/stylus#dev",
diff --git a/resources/js/app.js b/resources/js/app.js
index 048f8d4..1f9f6c5 100644
--- a/resources/js/app.js
+++ b/resources/js/app.js
@@ -9,6 +9,9 @@ require('./bootstrap');
 
 window.Vue = require('vue');
 
+import PortalVue from 'portal-vue';
+Vue.use(PortalVue);
+
 /**
  * The following block of code may be used to automatically register your
  * Vue components. It will recursively scan this directory for the Vue
diff --git a/resources/js/components/Search.vue b/resources/js/components/Search.vue
index 34ce91c..9fc256d 100644
--- a/resources/js/components/Search.vue
+++ b/resources/js/components/Search.vue
@@ -1,22 +1,25 @@
 <template>
-    <div class="bg-white" v-show="visible">
-        <div class="header-search-box container py-3">
+    <div class="bg-white">
+
+        <!-- Trigger Link that will appear inside the nav portal -->
+        <portal to="nav-search-toggle">
+            <a href="#" class="text-white hover:text-blue" @click.prevent="toggleVisibility">
+                <slot name="link"></slot>
+            </a>
+        </portal>
+
+
+        <div class="header-search-box container py-3" v-show="visible">
             <form action="/search/" method="get" class="flex justify-between items-center">
                 <input class="pl-2 -ml-2 py-2 font-display text-2xl flex-grow appearance-none focus:outline-none focus:bg-grey-100"
                        type="text"
                        name="search"
                        autocomplete="off"
-                       placeholder="Search...">
+                       tabindex="-1"
+                       ref="searchInput"
+                       :placeholder="placeholder">
                 <button class="ml-4 p-3 -mr-3 appearance-none focus:outline-none focus:bg-grey-100">
-
-                    <!-- Todo: work out the best way to inline SVG files in vue components (via props, slots etc?) -->
-                    <!--
-                        See: https://gist.github.com/calebporzio/623c536f7fff77861b8a37ec11a1d3da
-                        and https://stackoverflow.com/questions/44695560/how-can-i-import-a-svg-file-to-a-vue-component
-                    -->
-
-                    <!-- @svg('search', 'fill-current text-navy w-6 h-6') -->
-
+                    <slot name="button"></slot>
                 </button>
             </form>
         </div>
@@ -27,16 +30,26 @@
     export default {
 
         data() {
-            return {}
+            return {
+                visible: false
+            }
         },
 
-        mounted() {
-            console.log('Search component mounted.')
+        props: {
+            placeholder: {
+                type: String,
+                default: 'Search...'
+            }
         },
-
-        props: ['visible'],
         methods: {
-
+            toggleVisibility() {
+                this.visible = !this.visible;
+
+                // When visible, auto focus cursor into search field
+                if (this.visible) {
+                    this.$nextTick(() => this.$refs.searchInput.focus())
+                }
+            }
         }
     }
 </script>
diff --git a/resources/views/partials/header.blade.php b/resources/views/partials/header.blade.php
index 60f5fe3..1050d4a 100644
--- a/resources/views/partials/header.blade.php
+++ b/resources/views/partials/header.blade.php
@@ -11,11 +11,11 @@
 
         <div class="nav mx-auto flex items-center">
             @include('partials.nav')
-            <a class="text-white hover:text-blue" href="#" @click.prevent="showSearchBar = !showSearchBar">
-                @svg('search', 'nav-search-icon')
-            </a>
+            <portal-target name="nav-search-toggle" slim></portal-target>
         </div>
 
+        {{-- TODO: Make a Vue component for the cart + popout using portals and slots (see Search.vue) --}}
+
         <div class="cart-header text-right flex items-center cursor-pointer hover:text-blue" @click="openCart">
             @include('partials.cart')
         </div>
@@ -64,4 +64,11 @@
 
 </header>
 
-<search :visible="showSearchBar"></search>
+<search placeholder="{{ __('Search...') }}">
+    <template v-slot:link>
+        @svg('search')
+    </template>
+    <template v-slot:button>
+        @svg('search', 'fill-current text-navy w-6 h-6')
+    </template>
+</search>
\ No newline at end of file
diff --git a/yarn.lock b/yarn.lock
index 1797b3a..1be2934 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3047,6 +3047,7 @@ html-entities@^1.2.0:
 html-loader@^0.5.5:
   version "0.5.5"
   resolved "https://registry.yarnpkg.com/html-loader/-/html-loader-0.5.5.tgz#6356dbeb0c49756d8ebd5ca327f16ff06ab5faea"
+  integrity sha512-7hIW7YinOYUpo//kSYcPB6dCKoceKLmOwjEMmhIobHuWGDVl0Nwe4l68mdG/Ru0wcUxQjVMEoZpkalZ/SE7zog==
   dependencies:
     es6-templates "^0.2.3"
     fastparse "^1.1.1"
@@ -4655,6 +4656,11 @@ popper.js@^1.12:
   version "1.14.7"
   resolved "https://registry.yarnpkg.com/popper.js/-/popper.js-1.14.7.tgz#e31ec06cfac6a97a53280c3e55e4e0c860e7738e"
 
+portal-vue@^2.1.5:
+  version "2.1.5"
+  resolved "https://registry.yarnpkg.com/portal-vue/-/portal-vue-2.1.5.tgz#ecd0997cb32958205151cb72f40fd4f38d175e5c"
+  integrity sha512-vZmdMn0mOo7puvxoMQ5zju6S29aFD+9yygJxyWQtPaMXS9xunAeoYdnx6yzfL9J8HD8pMZYgSieEIbioAKhrSQ==
+
 portfinder@^1.0.9:
   version "1.0.20"
   resolved "https://registry.yarnpkg.com/portfinder/-/portfinder-1.0.20.tgz#bea68632e54b2e13ab7b0c4775e9b41bf270e44a"