Ensure context menu doesn't clip off the screen

This commit is contained in:
aterox 2022-03-08 05:44:39 -05:00
parent fe0d2d5b55
commit 8ee7847648
1 changed files with 8 additions and 1 deletions

View File

@ -1,7 +1,7 @@
<template> <template>
<transition name="slide"> <transition name="slide">
<div class="context-menu" v-if="show && !isMenuDisabled" <div class="context-menu" v-if="show && !isMenuDisabled"
:style="posX && posY ? `top:${posY}px;left:${posX}px;` : ''"> :style="posX && posY ? calcPosition() : ''">
<!-- Open Options --> <!-- Open Options -->
<ul class="menu-section"> <ul class="menu-section">
<li @click="openSection()"> <li @click="openSection()">
@ -59,6 +59,13 @@ export default {
removeSection() { removeSection() {
this.$emit('removeSection'); this.$emit('removeSection');
}, },
calcPosition() {
const bounds = this.$parent.$el.getBoundingClientRect();
const left = this.posX < (bounds.right + bounds.left) / 2;
const position = `top:${this.posY}px;${left ? 'left' : 'right'}:\
${left ? this.posX : document.documentElement.clientWidth - this.posX}px;`;
return position;
},
}, },
}; };
</script> </script>