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> <p class="card-header-title">{{ player.name }}</p>
<div class="dropdown is-right" <div class="dropdown is-right"
:class="{ 'is-active': show_dropdown }"> :class="{ 'is-active': show_dropdown }">
<div class="dropdown-trigger"> <div class="dropdown-trigger" ref="dropdown_btn">
<a id="change_player" class="button is-outlined is-primary" <a id="change_player" class="card-header-icon"
@click="show_dropdown = !show_dropdown" @click="show_dropdown = !show_dropdown"
aria-haspopup="true" aria-controls="dropdown-menu"> aria-haspopup="true" aria-controls="dropdown-menu">
<span class="icon is-small"> <span class="icon is-small">
@@ -14,7 +14,8 @@
</span> </span>
</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' }">
<div class="dropdown-content"> <div class="dropdown-content">
<a href="#" class="dropdown-item">Féfi</a> <a href="#" class="dropdown-item">Féfi</a>
<a href="#" class="dropdown-item">Lomion</a> <a href="#" class="dropdown-item">Lomion</a>
@@ -24,23 +25,7 @@
</div> </div>
</header> </header>
<div class="card-content"> <div class="card-content">
<span class="icon is-large"> <Wealth v-bind:wealth="player.wealth"></Wealth>
<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>
</div> </div>
<footer class="card-footer"> <footer class="card-footer">
<a @click="switchPlayerChestVisibility" href="#" class="card-footer-item is-dark">Coffre</a> <a @click="switchPlayerChestVisibility" href="#" class="card-footer-item is-dark">Coffre</a>
@@ -59,15 +44,13 @@
<script> <script>
import { store } from '../App.vue' import { store } from '../App.vue'
import Chest from './Chest.vue' import Chest from './Chest.vue'
import Wealth from './Wealth.vue'
/* /*
The Player control board. The Player control board.
*/ */
let handleOutsideClick;
export default { export default {
components: { Chest }, components: { Chest, Wealth },
data () { data () {
return { return {
app_state: store.state, app_state: store.state,
@@ -86,6 +69,35 @@
this.show_dropdown = false 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> </script>

39
lootalot_front/src/components/Wealth.vue Normal file
View File

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