From 022b97520fcc292c9341c86fe7228a9e6ab0519e Mon Sep 17 00:00:00 2001
From: Artus <artus@landoftheunicorn.ovh>
Date: Wed, 12 Jun 2019 14:11:46 +0200
Subject: [PATCH] adds OutsideClick handler for dropdown, moves Wealth view
 into new component

---
 lootalot_front/src/components/Player.vue | 62 ++++++++++++++----------
 lootalot_front/src/components/Wealth.vue | 39 +++++++++++++++
 2 files changed, 76 insertions(+), 25 deletions(-)
 create mode 100644 lootalot_front/src/components/Wealth.vue

diff --git a/lootalot_front/src/components/Player.vue b/lootalot_front/src/components/Player.vue
index 6e88504..e614f67 100644
--- a/lootalot_front/src/components/Player.vue
+++ b/lootalot_front/src/components/Player.vue
@@ -5,8 +5,8 @@
         <p class="card-header-title">{{ player.name }}</p>
         <div class="dropdown is-right" 
             :class="{ 'is-active': show_dropdown }">
-          <div class="dropdown-trigger">
-            <a id="change_player" class="button is-outlined is-primary"
+          <div class="dropdown-trigger" ref="dropdown_btn">
+            <a id="change_player" class="card-header-icon"
                @click="show_dropdown = !show_dropdown"
                aria-haspopup="true" aria-controls="dropdown-menu">
               <span class="icon is-small">
@@ -14,7 +14,8 @@
               </span>
             </a>
           </div>
-          <div class="dropdown-menu" id="dropdown-menu" role="menu">
+          <div class="dropdown-menu" id="dropdown-menu" role="menu"
+            v-closable="{ exclude: ['dropdown_btn'], handler: 'closeDropdown' }">
             <div class="dropdown-content">
               <a href="#" class="dropdown-item">Féfi</a>
               <a href="#" class="dropdown-item">Lomion</a>
@@ -24,23 +25,7 @@
         </div>
       </header>
       <div class="card-content">
-        <span class="icon is-large">
-          <i class="fas fa-2x fa-coins"></i>
-        </span>
-        <nav class="level is-mobile">
-          <div class="level-item">
-            <div><p class="heading">CP</p><p class="subtitle">{{ player.wealth[0] }}</p></div>
-          </div>
-          <div class="level-item">
-            <div><p class="heading">SP</p><p class="subtitle">{{ player.wealth[1] }}</p></div>
-          </div>
-          <div class="level-item">
-            <div><p class="heading">GP</p><p class="subtitle">{{ player.wealth[2] }}</p></div>
-          </div>
-          <div class="level-item">
-            <div><p class="heading">PP</p><p class="subtitle">{{ player.wealth[3] }}</p></div>
-          </div>
-        </nav>
+        <Wealth v-bind:wealth="player.wealth"></Wealth>
       </div>
       <footer class="card-footer">
         <a @click="switchPlayerChestVisibility" href="#" class="card-footer-item is-dark">Coffre</a>
@@ -59,15 +44,13 @@
 <script>
     import { store } from '../App.vue'
     import Chest from './Chest.vue'
+    import Wealth from './Wealth.vue'
     /*
-
     The Player control board.
-    
-    
-
     */
+    let handleOutsideClick;
     export default {
-        components: { Chest },
+        components: { Chest, Wealth },
         data () {
             return {
                 app_state: store.state,
@@ -86,6 +69,35 @@
                 this.show_dropdown = false
             }
         },
+        directives: {
+            'closable': {
+                bind: function(el, binding, vnode) { 
+                    handleOutsideClick = (e) => {
+                        console.log("outsideClick");
+                        e.stopPropagation();
+                        const { exclude, handler } = binding.value;
+                        let excludedElClicked = false;
+                        exclude.forEach(refName => {
+                            if (!excludedElClicked) {
+                                const elt = vnode.context.$refs[refName];
+                                excludedElClicked = elt.contains(e.target);
+                            }
+                        });
+                    
+                        if (!el.contains(e.target) && !excludedElClicked) {
+                            console.log('outsideCloseDropdown');
+                            vnode.context[handler]()
+                        }
+                    };
+                    document.addEventListener('click', handleOutsideClick);
+                    document.addEventListener('touchstart', handleOutsideClick);
+                },
+                unbind: function() { console.log("unbind"); 
+                    document.removeEventListener('click', handleOustideClick);
+                    document.removeEventListener('touchstart', handleOustideClick);
+                }
+            }
+        }
     }
 </script>
 
diff --git a/lootalot_front/src/components/Wealth.vue b/lootalot_front/src/components/Wealth.vue
new file mode 100644
index 0000000..5dc8e68
--- /dev/null
+++ b/lootalot_front/src/components/Wealth.vue
@@ -0,0 +1,39 @@
+<template>
+  <div class="container">
+        <span class="icon is-large">
+          <i class="fas fa-2x fa-piggy-bank"></i>
+        </span>
+        <nav class="level is-mobile">
+          <div class="level-item">
+            <div><p class="heading">CP</p>
+                 <p class="subtitle">{{ wealth[0] }}</p>
+            </div>
+          </div>
+          <div class="level-item">
+            <div>
+              <p class="heading">SP</p>
+              <p class="subtitle">{{ wealth[1] }}</p>
+            </div>
+          </div>
+          <div class="level-item">
+            <div>
+              <p class="heading">GP</p>
+              <p class="subtitle">{{ wealth[2] }}</p>
+            </div>
+          </div>
+          <div class="level-item">
+            <div>
+              <p class="heading">PP</p>
+              <p class="subtitle">{{ wealth[3] }}</p>
+            </div>
+          </div>
+        </nav>
+  </div>
+</template>
+
+<script>
+    export default {
+        props: ["wealth"],
+        data () { return {}; }
+    }
+</script>