mirror of
https://github.com/pierre42100/ComunicWeb
synced 2024-11-23 12:39:22 +00:00
145 lines
4.0 KiB
JavaScript
145 lines
4.0 KiB
JavaScript
/**
|
|
* Emojies picker
|
|
*
|
|
* @author Pierre HUBERT
|
|
*/
|
|
|
|
ComunicWeb.components.emoji.picker = {
|
|
|
|
//Source code of the emojies picker
|
|
pickerSrc: '<div class="wdt-emoji-popup">'+
|
|
'<a href="#" class="wdt-emoji-popup-mobile-closer"> × </a>' +
|
|
'<div class="wdt-emoji-menu-content">' +
|
|
' <div id="wdt-emoji-menu-header">' +
|
|
' <!--<a class="wdt-emoji-tab active" data-group-name="Recent"></a>-->' +
|
|
' <a class="wdt-emoji-tab" data-group-name="People"></a>' +
|
|
' <a class="wdt-emoji-tab" data-group-name="Nature"></a>' +
|
|
' <a class="wdt-emoji-tab" data-group-name="Foods"></a>' +
|
|
' <a class="wdt-emoji-tab" data-group-name="Activity"></a>' +
|
|
' <a class="wdt-emoji-tab" data-group-name="Places"></a>' +
|
|
' <a class="wdt-emoji-tab" data-group-name="Objects"></a>' +
|
|
' <a class="wdt-emoji-tab" data-group-name="Symbols"></a>' +
|
|
' <a class="wdt-emoji-tab" data-group-name="Flags"></a>' +
|
|
' <!--<a class="wdt-emoji-tab" data-group-name="Custom"></a>-->' +
|
|
' </div>' +
|
|
' <div class="wdt-emoji-scroll-wrapper">' +
|
|
' <div id="wdt-emoji-menu-items">' +
|
|
' <input id="wdt-emoji-search" type="text" placeholder="Search">' +
|
|
' <h3 id="wdt-emoji-search-result-title">Search Results</h3>' +
|
|
' <div class="wdt-emoji-sections"></div>' +
|
|
' <div id="wdt-emoji-no-result">No emoji found</div>' +
|
|
' </div>' +
|
|
' </div>' +
|
|
' <div id="wdt-emoji-footer">' +
|
|
' <div id="wdt-emoji-preview">' +
|
|
' <span id="wdt-emoji-preview-img"></span>' +
|
|
' <div id="wdt-emoji-preview-text">' +
|
|
' <span id="wdt-emoji-preview-name"></span><br>' +
|
|
' <span id="wdt-emoji-preview-aliases"></span>' +
|
|
' </div>' +
|
|
' </div>' +
|
|
|
|
' <div id="wdt-emoji-preview-bundle">' +
|
|
' <span>WDT Emoji Bundle</span>' +
|
|
' </div>' +
|
|
' </div>' +
|
|
'</div>' +
|
|
'</div>";',
|
|
|
|
|
|
/**
|
|
* Initialize Emojie picker
|
|
*/
|
|
init: function(){
|
|
|
|
//Check if the picker has to be included in the page
|
|
var targetPicker = byId("emojiPicker");
|
|
if(!targetPicker){
|
|
|
|
targetPicker = createElem2({
|
|
appendTo: byId("wrapper"),
|
|
type: "div",
|
|
id: "emojiPicker",
|
|
innerHTML: this.pickerSrc
|
|
});
|
|
|
|
wdtEmojiBundle.defaults.emojiSheets.twitter = ComunicWeb.__config.assetsURL + "3rdparty/wdt-emoji/sheets/sheet_twitter_64_indexed_128.png";
|
|
wdtEmojiBundle.init('.wdt-emoji-bundle-enabled');
|
|
wdtEmojiBundle.changeType("twitter");
|
|
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Add a picker for an element
|
|
*
|
|
* @param {HTMLElement} elem Target element
|
|
* @param {HTMLElement} trigger Alternative element to trigger picker
|
|
* @param {function} afterPicker Optionnal function to call once the openPicker
|
|
* function has been called on trigger click
|
|
*/
|
|
addPicker: function(elem, trigger, afterPicker){
|
|
|
|
//Make sure the system is ready
|
|
this.init();
|
|
|
|
//Check if the default features of the framework can be used
|
|
if(!trigger){
|
|
wdtEmojiBundle.addPicker(elem);
|
|
return;
|
|
}
|
|
|
|
trigger.addEventListener('click', function(e){
|
|
wdtEmojiBundle.openPicker.call(this, e);
|
|
|
|
if(afterPicker)
|
|
afterPicker(e);
|
|
});
|
|
|
|
var parent = elem.parentNode;
|
|
parent.className += ' wdt-emoji-picker-parent';
|
|
elem.className += ' wdt-emoji-bundle-enabled wdt-emoji-picker-ready';
|
|
},
|
|
|
|
/**
|
|
* Add a detached picker to a page
|
|
*
|
|
* @param {HTMLElement} target Target element that will contains the icon
|
|
* @param {(emojie : string) => any} callback Callback function called each time a new
|
|
* emojie is selected
|
|
*/
|
|
addDetachedPicker: function(target, callback){
|
|
|
|
this.init();
|
|
|
|
//Create input text that will received new emojies
|
|
var input = createElem2({
|
|
type: "input",
|
|
appendTo: target,
|
|
class: "wdt-emoji-bundle-enabled hidden",
|
|
elemType: "text",
|
|
style: "display: none;"
|
|
});
|
|
|
|
ComunicWeb.components.emoji.picker.addPicker(input);
|
|
|
|
var interval = setInterval(function(){
|
|
|
|
//Check if input has been detached
|
|
if(!input.isConnected){
|
|
clearInterval(interval);
|
|
return;
|
|
}
|
|
|
|
//Securely send value to callback
|
|
if(input.value.length > 0){
|
|
var value = input.value;
|
|
input.value = "";
|
|
callback(value);
|
|
}
|
|
|
|
|
|
}, 500);
|
|
}
|
|
|
|
} |