import emojiRegex from 'emoji-regex'; import $ from 'jquery'; import GfmAutoComplete from 'ee_else_ce/gfm_auto_complete'; import * as Emoji from '~/emoji'; import { deprecatedCreateFlash as createFlash } from '~/flash'; import { __ } from '~/locale'; import EmojiMenu from './emoji_menu'; const defaultStatusEmoji = 'speech_balloon'; const toggleEmojiMenuButtonSelector = '.js-toggle-emoji-menu'; const toggleEmojiMenuButton = document.querySelector(toggleEmojiMenuButtonSelector); const statusEmojiField = document.getElementById('js-status-emoji-field'); const statusMessageField = document.getElementById('js-status-message-field'); const toggleNoEmojiPlaceholder = (isVisible) => { const placeholderElement = document.getElementById('js-no-emoji-placeholder'); placeholderElement.classList.toggle('hidden', !isVisible); }; const findStatusEmoji = () => toggleEmojiMenuButton.querySelector('gl-emoji'); const removeStatusEmoji = () => { const statusEmoji = findStatusEmoji(); if (statusEmoji) { statusEmoji.remove(); } }; const selectEmojiCallback = (emoji, emojiTag) => { statusEmojiField.value = emoji; toggleNoEmojiPlaceholder(false); removeStatusEmoji(); toggleEmojiMenuButton.innerHTML += emojiTag; }; const clearEmojiButton = document.getElementById('js-clear-user-status-button'); clearEmojiButton.addEventListener('click', () => { statusEmojiField.value = ''; statusMessageField.value = ''; removeStatusEmoji(); toggleNoEmojiPlaceholder(true); }); const emojiAutocomplete = new GfmAutoComplete(); emojiAutocomplete.setup($(statusMessageField), { emojis: true }); const userNameInput = document.getElementById('user_name'); userNameInput.addEventListener('input', () => { const EMOJI_REGEX = emojiRegex(); if (EMOJI_REGEX.test(userNameInput.value)) { // set field to invalid so it gets detected by GlFieldErrors userNameInput.setCustomValidity(__('Invalid field')); } else { userNameInput.setCustomValidity(''); } }); Emoji.initEmojiMap() .then(() => { const emojiMenu = new EmojiMenu( Emoji, toggleEmojiMenuButtonSelector, 'js-status-emoji-menu', selectEmojiCallback, ); emojiMenu.bindEvents(); const defaultEmojiTag = Emoji.glEmojiTag(defaultStatusEmoji); statusMessageField.addEventListener('input', () => { const hasStatusMessage = statusMessageField.value.trim() !== ''; const statusEmoji = findStatusEmoji(); if (hasStatusMessage && statusEmoji) { return; } if (hasStatusMessage) { toggleNoEmojiPlaceholder(false); toggleEmojiMenuButton.innerHTML += defaultEmojiTag; } else if (statusEmoji.dataset.name === defaultStatusEmoji) { toggleNoEmojiPlaceholder(true); removeStatusEmoji(); } }); }) .catch(() => createFlash(__('Failed to load emoji list.')));