mizzkey/src/client/app/desktop/views/components/emoji-picker-dialog.vue

<template>
<div class="gcafiosrssbtbnbzqupfmglvzgiaipyv">
	<x-picker @chosen="chosen"/>
</div>
</template>

<script lang="ts">
import Vue from 'vue';
import contains from '../../../common/scripts/contains';

export default Vue.extend({
	components: {
		XPicker: () => import('../../../common/views/components/emoji-picker.vue').then(m => m.default)
	},

	props: {
		x: {
			type: Number,
			required: true
		},
		y: {
			type: Number,
			required: true
		}
	},

	mounted() {
		this.$nextTick(() => {
			const width = this.$el.offsetWidth;
			const height = this.$el.offsetHeight;

			let x = this.x;
			let y = this.y;

			if (x + width - window.pageXOffset > window.innerWidth) {
				x = window.innerWidth - width + window.pageXOffset;
			}

			if (y + height - window.pageYOffset > window.innerHeight) {
				y = window.innerHeight - height + window.pageYOffset;
			}

			this.$el.style.left = x + 'px';
			this.$el.style.top = y + 'px';

			for (const el of Array.from(document.querySelectorAll('body *'))) {
				el.addEventListener('mousedown', this.onMousedown);
			}
		});
	},

	methods: {
		onMousedown(e) {
			e.preventDefault();
			if (!contains(this.$el, e.target) && (this.$el != e.target)) this.close();
			return false;
		},

		chosen(emoji) {
			this.$emit('chosen', emoji);
			this.close();
		},

		close() {
			for (const el of Array.from(document.querySelectorAll('body *'))) {
				el.removeEventListener('mousedown', this.onMousedown);
			}

			this.$emit('closed');
			this.destroyDom();
		}
	}
});
</script>

<style lang="stylus" scoped>
.gcafiosrssbtbnbzqupfmglvzgiaipyv
	position fixed
	top 0
	left 0
	z-index 3000
	box-shadow 0 2px 12px 0 rgba(0, 0, 0, 0.3)

</style>