Sharkey/src/web/app/desktop/views/components/context-menu.vue

75 lines
1.5 KiB
Vue
Raw Normal View History

2018-02-18 05:35:18 +02:00
<template>
2018-02-18 06:48:40 +02:00
<div class="context-menu" :style="{ left: `${x}px`, top: `${y}px` }" @contextmenu.prevent="() => {}">
2018-02-20 18:39:51 +02:00
<x-menu :menu="menu" @x="click"/>
2018-02-18 05:35:18 +02:00
</div>
</template>
<script lang="ts">
import Vue from 'vue';
import * as anime from 'animejs';
import contains from '../../../common/scripts/contains';
2018-02-20 18:39:51 +02:00
import XMenu from './context-menu.menu.vue';
2018-02-18 05:35:18 +02:00
export default Vue.extend({
2018-02-19 09:18:18 +02:00
components: {
2018-02-20 18:39:51 +02:00
XMenu
2018-02-19 09:18:18 +02:00
},
2018-02-18 05:35:18 +02:00
props: ['x', 'y', 'menu'],
mounted() {
this.$nextTick(() => {
Array.from(document.querySelectorAll('body *')).forEach(el => {
el.addEventListener('mousedown', this.onMousedown);
});
this.$el.style.display = 'block';
anime({
targets: this.$el,
opacity: [0, 1],
duration: 100,
easing: 'linear'
});
});
},
methods: {
onMousedown(e) {
e.preventDefault();
if (!contains(this.$el, e.target) && (this.$el != e.target)) this.close();
return false;
},
click(item) {
if (item.onClick) item.onClick();
this.close();
},
close() {
Array.from(document.querySelectorAll('body *')).forEach(el => {
el.removeEventListener('mousedown', this.onMousedown);
});
this.$emit('closed');
this.$destroy();
}
}
});
</script>
<style lang="stylus" scoped>
.context-menu
$width = 240px
$item-height = 38px
$padding = 10px
display none
position fixed
top 0
left 0
z-index 4096
width $width
font-size 0.8em
background #fff
border-radius 0 4px 4px 4px
box-shadow 2px 2px 8px rgba(0, 0, 0, 0.2)
opacity 0
</style>