Rocket.Chat/packages/rocketchat-emoji/lib/EmojiPicker.js

/* globals Blaze, Template */
RocketChat.EmojiPicker = {
	width: 390,
	height: 238,
	initiated: false,
	input: null,
	source: null,
	recent: [],
	tone: null,
	opened: false,
	pickCallback: null,
	init() {
		if (this.initiated) {
			return;
		}
		this.initiated = true;

		this.recent = window.localStorage.getItem('emoji.recent') ? window.localStorage.getItem('emoji.recent').split(',') : [];
		this.tone = window.localStorage.getItem('emoji.tone') || 0;

		Blaze.render(Template.emojiPicker, document.body);

		$(document).click((event) => {
			if (!this.opened) {
				return;
			}
			if (!$(event.target).closest('.emoji-picker').length && !$(event.target).is('.emoji-picker')) {
				if (this.opened) {
					this.close();
				}
			}
		});

		$(window).resize(_.debounce(() => {
			if (!this.opened) {
				return;
			}
			this.setPosition();
		}, 300));
	},
	isOpened() {
		return this.opened;
	},
	setTone(tone) {
		this.tone = tone;
		window.localStorage.setItem('emoji.tone', tone);
	},
	getTone() {
		return this.tone;
	},
	getRecent() {
		return this.recent;
	},
	setPosition() {
		const sourcePos = $(this.source).offset();
		const left = sourcePos.left;
		const top = (sourcePos.top - this.height - 5);
		const cssProperties = {
			top,
			left
		};

		if (top < 0) {
			cssProperties.top = 10;
		}

		if (left < 35) {
			cssProperties.left = 0;
		} else {
			const windowSize = $(window).width();
			const pickerWidth = $('.emoji-picker').width();

			if (left + pickerWidth > windowSize) {
				const emojiButtonSize = $('.reaction-message.message-action').outerWidth();
				cssProperties.left = left - pickerWidth + emojiButtonSize;
			}
		}

		return $('.emoji-picker').css(cssProperties);
	},
	open(source, callback) {
		if (!this.initiated) {
			this.init();
		}
		this.pickCallback = callback;
		this.source = source;

		const containerEl = this.setPosition();
		containerEl.addClass('show');

		const emojiInput = containerEl.find('.emoji-filter input.search');
		if (emojiInput) {
			emojiInput.focus();
		}
		this.opened = true;
	},
	close() {
		$('.emoji-picker').removeClass('show');
		this.opened = false;
	},
	pickEmoji(emoji) {
		this.pickCallback(emoji);

		this.close();
		this.addRecent(emoji);
	},
	addRecent(emoji) {
		const pos = this.recent.indexOf(emoji);

		if (pos !== -1) {
			this.recent.splice(pos, 1);
		}

		this.recent.unshift(emoji);

		window.localStorage.setItem('emoji.recent', this.recent);
		RocketChat.emoji.packages.base.emojisByCategory.recent = this.recent;
		this.updateRecent();
	},
	updateRecent() {
		const instance = Template.instance();
		if (instance) {
			instance.recentNeedsUpdate.set(true);
		} else {
			this.refreshDynamicEmojiLists();
		}
	},
	refreshDynamicEmojiLists() {
		const dynamicEmojiLists = [
			RocketChat.emoji.packages.base.emojisByCategory.recent,
			RocketChat.emoji.packages.emojiCustom.emojisByCategory.rocket
		];

		dynamicEmojiLists.forEach((category) => {
			if (category) {
				for (let i = 0; i < category.length; i++) {
					const emoji = category[i];
					if (!RocketChat.emoji.list[`:${ emoji }:`]) {
						category = _.without(category, emoji);
					}
				}
			}
		});
	}
};