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

adds OutsideClick handler for dropdown, moves Wealth view into new component

Browse Source
This commit is contained in:
Arthur Gerbaud
2019-06-12 14:11:46 +02:00
parent feef8146d2
commit 022b97520f
2 changed files with 76 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -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>