Handle multiple dropdowns in navigation

1024pix · Sep 16, 2020 · 8bf799e · 8bf799e
1 parent 00fba70
commit 8bf799e
Show file tree

Hide file tree

Showing 3 changed files with 83 additions and 36 deletions.
diff --git a/components/NavigationDropdown.vue b/components/NavigationDropdown.vue
@@ -14,6 +14,10 @@
 export default {
   name: 'NavigationDropdown',
   props: {
+    dropdownIndex: {
+      type: String,
+      default: null,
+    },
     options: {
       type: [Array, Object],
       default: null,
@@ -26,7 +30,9 @@ export default {
   data() {
     return {
       eventListener: (event) => {
-        if (!event.target.classList.contains('dropdown-toggle')) {
+        if (
+          event.target.getAttribute('dropdown-index') !== this.dropdownIndex
+        ) {
           this.closeDropdown()
         }
       },
@@ -43,7 +49,7 @@ export default {
 
   methods: {
     closeDropdown() {
-      this.$emit('closeNavigationDropdown')
+      this.$emit('closeNavigationDropdown', this.dropdownIndex)
     },
   },
 }

diff --git a/components/slices/NavigationZone.vue b/components/slices/NavigationZone.vue
@@ -10,16 +10,19 @@
       </pix-link>
       <button
         v-else
+        :dropdown-index="`${index}`"
         class="dropdown-toggle navigation-zone__item links-group"
-        @click="toggleDropdown"
+        @click="toggleDropdown(`${index}`)"
       >
-        {{ menuItem.name }} <fa v-if="showDropdown" icon="angle-up" />
+        {{ menuItem.name }}
+        <fa v-if="showDropdown(`${index}`)" icon="angle-up" />
         <fa v-else icon="angle-down" />
         <navigation-dropdown
-          v-if="showDropdown"
+          v-if="showDropdown(`${index}`)"
           type="button"
           :options="menuItem.subNavigationLinks"
-          @closeNavigationDropdown="toggleDropdown"
+          :dropdown-index="`${index}`"
+          @closeNavigationDropdown="toggleDropdown(`${index}`)"
         >
         </navigation-dropdown>
       </button>
@@ -28,6 +31,7 @@
 </template>
 
 <script>
+import Vue from 'vue'
 import NavigationDropdown from '@/components/NavigationDropdown'
 
 export default {
@@ -43,7 +47,7 @@ export default {
   },
   data() {
     return {
-      showDropdown: false,
+      dropdownMap: {},
     }
   },
   computed: {
@@ -79,8 +83,14 @@ export default {
     },
   },
   methods: {
-    toggleDropdown() {
-      this.showDropdown = !this.showDropdown
+    showDropdown(dropdownIndex) {
+      if (!this.dropdownMap[dropdownIndex]) {
+        Vue.set(this.dropdownMap, dropdownIndex, false)
+      }
+      return this.dropdownMap[dropdownIndex]
+    },
+    toggleDropdown(dropdownIndex) {
+      Vue.set(this.dropdownMap, dropdownIndex, !this.dropdownMap[dropdownIndex])
     },
   },
 }

diff --git a/tests/components/slices/NavigationZone.test.js b/tests/components/slices/NavigationZone.test.js
@@ -23,37 +23,37 @@ describe('NavigationZone slice', () => {
   })
 
   describe('Slice: NavigationZone', () => {
-    describe('#navigationLinks', () => {
-      beforeEach(() => {
-        component = shallowMount(NavigationZone, {
-          stubs: { 'pix-link': true, fa: true },
-          propsData: {
-            slice: {
-              items: [
-                { name: 'Découvrir Pix', link: '/', group: [] },
-                { name: 'Les tests', link: '/tests', group: [] },
-                {
-                  name: 'Enseignement scolaire',
-                  link: '/sco',
-                  group: [{ text: 'Enseignement' }],
-                },
-                {
-                  name: 'Enseignement supérieur',
-                  link: '/sup',
-                  group: [{ text: 'Enseignement' }],
-                },
-                { name: 'Pix Pro', link: '/pro', group: [] },
-              ],
-            },
+    beforeEach(() => {
+      component = shallowMount(NavigationZone, {
+        stubs: { 'pix-link': true, fa: true },
+        propsData: {
+          slice: {
+            items: [
+              { name: 'Découvrir Pix', link: '/', group: [] },
+              { name: 'Les tests', link: '/tests', group: [] },
+              {
+                name: 'Enseignement scolaire',
+                link: '/sco',
+                group: [{ text: 'Enseignement' }],
+              },
+              {
+                name: 'Enseignement supérieur',
+                link: '/sup',
+                group: [{ text: 'Enseignement' }],
+              },
+              { name: 'Pix Pro', link: '/pro', group: [] },
+            ],
           },
-          computed: {
-            $prismic() {
-              return { asText: () => {} }
-            },
+        },
+        computed: {
+          $prismic() {
+            return { asText: () => {} }
           },
-        })
+        },
       })
+    })
 
+    describe('#navigationLinks', () => {
       it('should aggregate navigation links of the same group', () => {
         const navigationLinks = component.vm.navigationLinks
         expect(navigationLinks).toEqual([
@@ -78,5 +78,36 @@ describe('NavigationZone slice', () => {
         ])
       })
     })
+
+    describe('#showDropdown', () => {
+      it('should create new entry in dropdownMap when it does not exist', () =>{
+        const dropdownIndex = '3'
+        expect(component.vm.dropdownMap[dropdownIndex]).toBeUndefined()
+
+        const dropdownShown = component.vm.showDropdown(dropdownIndex)
+
+        expect(dropdownShown).toBeFalsy()
+        expect(component.vm.dropdownMap[dropdownIndex]).toBeDefined()
+      })
+
+      it('should return if the dropdown is being displayed', () =>{
+        const dropdownIndex = '2'
+
+        const dropdownShown = component.vm.showDropdown(dropdownIndex)
+
+        expect(dropdownShown).toBeFalsy()
+      })
+    })
+
+    describe('#toggleDropdown', () => {
+      it('should toggleDropdown', () => {
+        const dropdownIndex = '2'
+        expect(component.vm.dropdownMap[dropdownIndex]).toBeFalsy()
+
+        component.vm.toggleDropdown(dropdownIndex)
+
+        expect(component.vm.dropdownMap[dropdownIndex]).toBeTruthy()
+      })
+    })
   })
 })