rust/lootalot
1
0
Fork 0
Code Issues 3 Pull Requests Releases Wiki Activity

improves custom v-closable directive

Browse Source
This commit is contained in:
Arthur Gerbaud
2019-06-12 21:35:35 +02:00
parent a57ffdb6c6
commit 3232710a4c
2 changed files with 16 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
lootalot_front/src/components/GroupChest.vue
View File

@@ -8,7 +8,7 @@
<h1 class="title">Coffre de groupe</h1> <h1 class="title">Coffre de groupe</h1>
</div> </div>
</div> </div>
<Chest player=0></Chest> <Chest :player="0"></Chest>
</section> </section>
</template> </template>

21
lootalot_front/src/components/Player.vue
View File

@@ -15,7 +15,7 @@
</a> </a>
</div> </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' }"> v-closable="{ exclude: ['dropdown_btn'], handler: 'closeDropdown', visible: show_dropdown }">
<div class="dropdown-content"> <div class="dropdown-content">
<a v-for="(p,i) in player_list" :key="i" <a v-for="(p,i) in player_list" :key="i"
@click="setActivePlayer(i)" @click="setActivePlayer(i)"
@@ -75,6 +75,7 @@
], ],
show_dropdown: false, show_dropdown: false,
edit_wealth: false, edit_wealth: false,
handleOutsideClick: null,
}; };
}, },
computed: { computed: {
@@ -109,7 +110,6 @@
'closable': { 'closable': {
bind: function(el, binding, vnode) { bind: function(el, binding, vnode) {
handleOutsideClick = (e) => { handleOutsideClick = (e) => {
console.log("outsideClick");
e.stopPropagation(); e.stopPropagation();
const { exclude, handler } = binding.value; const { exclude, handler } = binding.value;
let excludedElClicked = false; let excludedElClicked = false;
@@ -125,12 +125,21 @@
vnode.context[handler]() 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"); unbind: function() { console.log("unbind");
document.removeEventListener('click', handleOustideClick); document.removeEventListener('click', handleOutsideClick);
document.removeEventListener('touchstart', handleOustideClick); document.removeEventListener('touchstart', handleOutsideClick);
} }
} }
} }