From 3232710a4ce8f81c95d8d002b3934d5df48fb11d Mon Sep 17 00:00:00 2001
From: Artus <artus@landoftheunicorn.ovh>
Date: Wed, 12 Jun 2019 21:35:35 +0200
Subject: [PATCH] improves custom v-closable directive

---
 lootalot_front/src/components/GroupChest.vue |  2 +-
 lootalot_front/src/components/Player.vue     | 21 ++++++++++++++------
 2 files changed, 16 insertions(+), 7 deletions(-)

diff --git a/lootalot_front/src/components/GroupChest.vue b/lootalot_front/src/components/GroupChest.vue
index 8189fb0..3e9ed54 100644
--- a/lootalot_front/src/components/GroupChest.vue
+++ b/lootalot_front/src/components/GroupChest.vue
@@ -8,7 +8,7 @@
         <h1 class="title">Coffre de groupe</h1>
       </div>
     </div>
-    <Chest player=0></Chest>
+    <Chest :player="0"></Chest>
   </section>   
 </template>
 
diff --git a/lootalot_front/src/components/Player.vue b/lootalot_front/src/components/Player.vue
index efd4ca9..26e5353 100644
--- a/lootalot_front/src/components/Player.vue
+++ b/lootalot_front/src/components/Player.vue
@@ -15,7 +15,7 @@
             </a>
           </div>
           <div class="dropdown-menu" id="dropdown-menu" role="menu"
-            v-closable="{ exclude: ['dropdown_btn'], handler: 'closeDropdown' }">
+            v-closable="{ exclude: ['dropdown_btn'], handler: 'closeDropdown', visible: show_dropdown }">
             <div class="dropdown-content">
               <a v-for="(p,i) in player_list" :key="i"
                  @click="setActivePlayer(i)" 
@@ -75,6 +75,7 @@
                 ],
                 show_dropdown: false,
                 edit_wealth: false,
+                handleOutsideClick: null,
             };
         },
         computed: {
@@ -109,7 +110,6 @@
             'closable': {
                 bind: function(el, binding, vnode) { 
                     handleOutsideClick = (e) => {
-                        console.log("outsideClick");
                         e.stopPropagation();
                         const { exclude, handler } = binding.value;
                         let excludedElClicked = false;
@@ -125,12 +125,21 @@
                             vnode.context[handler]()
                         }
                     };
-                    document.addEventListener('click', handleOutsideClick);
-                    document.addEventListener('touchstart', handleOutsideClick);
+                },
+                // Bind custom handler only when dropdown is visible
+                update: function(el, binding, vnode, _) {
+                    const { visible } = binding.value;
+                    if (visible) {
+                        document.addEventListener('click', handleOutsideClick);
+                        document.addEventListener('touchstart', handleOutsideClick);
+                    } else {
+                        document.removeEventListener('click', handleOutsideClick);
+                        document.removeEventListener('touchstart', handleOutsideClick);
+                    }
                 },
                 unbind: function() { console.log("unbind"); 
-                    document.removeEventListener('click', handleOustideClick);
-                    document.removeEventListener('touchstart', handleOustideClick);
+                    document.removeEventListener('click', handleOutsideClick);
+                    document.removeEventListener('touchstart', handleOutsideClick);
                 }
             }
         }