/*
// Usage
FgEmojiPicker.init({
trigger: 'button',
position: ['bottom', 'right'],
dir: 'directory/to/json', (without json name)
emit(emoji) {
console.log(emoji);
}
});
*/
const FgEmojiPicker = function(options) {
this.options = options;
if (!this.options) {
return console.error('You must provide object as a first argument')
}
this.init = () => {
// Generate style
this.functions.generateStyle();
this.selectors.trigger = this.options.hasOwnProperty('trigger') ? this.options.trigger : console.error('You must proved trigger element like this - \'EmojiPicker.init({trigger: "selector"})\' ');
this.selectors.search = '.fg-emoji-picker-search input';
this.selectors.emojiContainer = '.fg-emoji-picker-grid'
this.emojiItems = undefined;
this.variable.emit = this.options.emit || null;
this.variable.position = this.options.position || null;
this.variable.dir = this.options.dir || '';
if (!this.selectors.trigger) return;
this.bindEvents();
}
this.variable = {
position: null,
dir: '',
}
this.selectors = {
emit: null,
trigger: null
}
this.bindEvents = () => {
document.body.addEventListener('click', this.functions.removeEmojiPicker.bind(this));
document.body.addEventListener('click', this.functions.emitEmoji.bind(this));
document.body.addEventListener('click', this.functions.openEmojiSelector.bind(this), this.selectors.trigger);
document.body.addEventListener('input', this.functions.search.bind(this), this.selectors.search);
}
this.functions = {
// Search
search(e) {
const val = e.target.value;
if (!Array.isArray(this.emojiItems)) {
this.emojiItems = Array.from(e.target.closest('.fg-emoji-picker').querySelectorAll('.fg-emoji-picker-all-categories li'));
}
this.emojiItems.filter(emoji => {
if (!emoji.getAttribute('data-name').match(val)) {
emoji.style.display = 'none'
} else {
emoji.style.display = ''
}
})
if (!val.length) this.emojiItems = undefined;
},
generateStyle() {
document.head.insertAdjacentHTML('beforeend', `
`)
},
removeEmojiPicker(e) {
const el = e.target;
const picker = document.querySelector('.fg-emoji-picker');
if (!el.closest('.fg-emoji-picker')) picker ? picker.remove() : false;
this.emojiItems = undefined
},
emitEmoji(e) {
const el = e.target;
if (el.tagName.toLowerCase() == 'a' && el.className.includes('fg-emoji-picker-item')) {
e.preventDefault();
let emoji = {
emoji: el.getAttribute('href'),
code: el.getAttribute('data-code')
}
if (this.variable.emit) this.variable.emit(emoji, this.triggerer)
const picker = document.querySelector('.fg-emoji-picker');
picker.remove();
}
},
// Open omoji picker
openEmojiSelector(e) {
let el = e.target.closest(this.selectors.trigger)
if (el) {
e.preventDefault();
// Bounding rect
// Trigger position and (trigger) sizes
let el = e.target.closest(this.selectors.trigger)
if (typeof this.variable.emit === 'function') this.triggerer = el
// Emoji Picker Promise
this.emojiPicker().then(emojiPicker => {
// Insert picker
document.body.insertAdjacentHTML('afterbegin', emojiPicker);
const emojiPickerMain = document.querySelector('.fg-emoji-picker');
const emojiFooter = emojiPickerMain.querySelector('.fg-emoji-picker-footer');
const emojiBody = emojiPickerMain.querySelector('.fg-emoji-picker-all-categories')
let positions = {
buttonTop: e.pageY,
buttonWidth: el.offsetWidth,
buttonFromLeft: el.getBoundingClientRect().left,
bodyHeight: document.body.offsetHeight,
bodyWidth: document.body.offsetWidth,
windowScrollPosition: window.pageYOffset,
emojiHeight: emojiPickerMain.offsetHeight,
emojiWidth: emojiPickerMain.offsetWidth,
}
// Element position object
let position = {
top: emojiPickerMain.style.top = positions.buttonTop - positions.emojiHeight,
left: emojiPickerMain.style.left = positions.buttonFromLeft - positions.emojiWidth,
bottom: emojiPickerMain.style.top = positions.buttonTop,
right: emojiPickerMain.style.left = positions.buttonFromLeft + positions.buttonWidth
}
// Positioning emoji container top
if (this.variable.position) {
this.variable.position.forEach(elemPos => {
if (elemPos === 'right') {
emojiPickerMain.style.left = position[elemPos] + 'px';
} else if (elemPos === 'bottom') {
emojiPickerMain.style.top = position[elemPos] + 'px';
} else {
emojiPickerMain.style[elemPos] = position[elemPos] + 'px';
}
})
}
// Add event listener on click
document.body.querySelector('.fg-emoji-picker').onclick = function(e) {
e.preventDefault();
let scrollTo = (element, to, duration = 100) => {
if (duration <= 0) return;
var difference = to - element.scrollTop;
var perTick = difference / duration * 10;
setTimeout(function() {
element.scrollTop = element.scrollTop + perTick;
if (element.scrollTop === to) return;
scrollTo(element, to, duration - 10);
}, 10);
}
const el = e.target;
const filterLlnk = el.closest('a');
document.querySelectorAll('.fg-emoji-picker-categories li').forEach(item => item.classList.remove('active'))
if (filterLlnk && filterLlnk.closest('li') && filterLlnk.closest('li').getAttribute('data-index')) {
let list = filterLlnk.closest('li')
list.classList.add('active');
let listIndex = list.getAttribute('data-index');
scrollTo(emojiBody, emojiBody.querySelector(`#${listIndex}`).offsetTop);
}
}
})
}
}
},
// Create emoji container / Builder engine
this.emojiPicker = () => {
let categoryIcons = {
'smileys--people': '',
'animals--nature': '',
'travel--places': '',
'activities': '',
'objects': '',
'symbols': '',
'flags': '',
'search': '',
}
let picker = `
%categories%
${categoryIcons.search}
%pickerContainer%
`;
let categories = '
%categories%
';
let categoriesInner = ``;
let outerUl = `
%outerUL%
`;
let innerLists = ``;
const fetchData = fetch(`${this.variable.dir}/assets/js/full-emoji-list.json`)
.then(response => response.json())
.then(object => {
// Index count
let index = 0;
// Loop through emoji object
for (const key in object) {
if (object.hasOwnProperty(key)) {
// Index count
index += 1;
let keyToId = key.split(' ').join('-').split('&').join('').toLowerCase();
const categories = object[key];
categoriesInner += `