From 9dc93a4519d9d5d7be48ff274127136236a3adb3 Mon Sep 17 00:00:00 2001 From: GitLab Bot Date: Tue, 20 Apr 2021 23:50:22 +0000 Subject: Add latest changes from gitlab-org/gitlab@13-11-stable-ee --- .../javascripts/pages/profiles/show/index.js | 135 ++++++++++----------- 1 file changed, 66 insertions(+), 69 deletions(-) (limited to 'app/assets/javascripts/pages/profiles/show/index.js') diff --git a/app/assets/javascripts/pages/profiles/show/index.js b/app/assets/javascripts/pages/profiles/show/index.js index a24c6ca7754..b5441127797 100644 --- a/app/assets/javascripts/pages/profiles/show/index.js +++ b/app/assets/javascripts/pages/profiles/show/index.js @@ -7,81 +7,78 @@ 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'); -document.addEventListener('DOMContentLoaded', () => { - 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 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 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 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 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 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(''); - } - }); +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(); +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; - } + 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.'))); -}); + if (hasStatusMessage) { + toggleNoEmojiPlaceholder(false); + toggleEmojiMenuButton.innerHTML += defaultEmojiTag; + } else if (statusEmoji.dataset.name === defaultStatusEmoji) { + toggleNoEmojiPlaceholder(true); + removeStatusEmoji(); + } + }); + }) + .catch(() => createFlash(__('Failed to load emoji list.'))); -- cgit v1.2.1