73 lines
2.5 KiB
JavaScript
73 lines
2.5 KiB
JavaScript
import $ from 'jquery';
|
|
import createFlash from '~/flash';
|
|
import GfmAutoComplete from '~/gfm_auto_complete';
|
|
import EmojiMenu from './emoji_menu';
|
|
|
|
const defaultStatusEmoji = 'speech_balloon';
|
|
|
|
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 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 });
|
|
|
|
import(/* webpackChunkName: 'emoji' */ '~/emoji')
|
|
.then(Emoji => {
|
|
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!'));
|
|
});
|