PHP Classes

File: assets/libs/fg-emoji-picker/fgEmojiPicker.js

Recommend this page to a friend!
  Classes of Braun Okoi Boniface   eprotech   assets/libs/fg-emoji-picker/fgEmojiPicker.js   Download  
File: assets/libs/fg-emoji-picker/fgEmojiPicker.js
Role: Auxiliary data
Content type: text/plain
Description: Auxiliary data
Class: eprotech
Application to access medical product suppliers
Author: By
Last change:
Date: 1 year ago
Size: 39,156 bytes
 

Contents

Class file image Download
/* // Usage FgEmojiPicker.init({ trigger: 'button', position: ['bottom', 'right'], dir: 'directory/to/json', (without json name) preFetch: true, //load emoji json when function called emit(emoji) { console.log(emoji); } }); */ const FgEmojiPicker = function (options) { this.options = options; this.emojiJson = null; if (!this.options) { return console.error('You must provide object as a first argument') } this.init = () => { // Generate style this.functions.generateStyle.call(this); 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.removeOnSelection = this.options.removeOnSelection || false; this.variable.closeButton = this.options.closeButton || true; this.variable.position = this.options.position || null; this.variable.dir = this.options.dir || ''; this.insertInto = this.options.insertInto || undefined; if (!this.selectors.trigger) return; this.bindEvents(); this.options && this.options.preFetch && this.functions.fetchEmojiData(); } this.lib = (el = undefined) => { return { el: document.querySelectorAll(el), on(event, callback, classList = undefined) { if (!classList) { this.el.forEach(item => { item.addEventListener(event, callback.bind(item)) }) } else { this.el.forEach(item => { item.addEventListener(event, (e) => { if (e.target.closest(classList)) { callback.call(e.target.closest(classList), e) } }) }) } } } }, this.variable = { position: null, dir: '', categoryIcons: { 'smileys--people': '<svg width="20" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve"> <g> <g> <path d="M437.02,74.98C388.667,26.629,324.38,0,256,0S123.333,26.629,74.98,74.98C26.629,123.333,0,187.62,0,256 s26.629,132.668,74.98,181.02C123.333,485.371,187.62,512,256,512s132.667-26.629,181.02-74.98 C485.371,388.668,512,324.38,512,256S485.371,123.333,437.02,74.98z M256,472c-119.103,0-216-96.897-216-216S136.897,40,256,40 s216,96.897,216,216S375.103,472,256,472z"/> </g> </g> <g> <g> <path d="M368.993,285.776c-0.072,0.214-7.298,21.626-25.02,42.393C321.419,354.599,292.628,368,258.4,368 c-34.475,0-64.195-13.561-88.333-40.303c-18.92-20.962-27.272-42.54-27.33-42.691l-37.475,13.99 c0.42,1.122,10.533,27.792,34.013,54.273C171.022,389.074,212.215,408,258.4,408c46.412,0,86.904-19.076,117.099-55.166 c22.318-26.675,31.165-53.55,31.531-54.681L368.993,285.776z"/> </g> </g> <g> <g> <circle cx="168" cy="180.12" r="32"/> </g> </g> <g> <g> <circle cx="344" cy="180.12" r="32"/> </g> </g> <g> </g> <g> </g> <g> </g> </svg>', 'animals--nature': '<svg width="20" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 354.968 354.968" style="enable-background:new 0 0 354.968 354.968;" xml:space="preserve"> <g> <g> <path d="M350.775,341.319c-9.6-28.4-20.8-55.2-34.4-80.8c0.4-0.4,0.8-1.2,1.6-1.6c30.8-34.8,44-83.6,20.4-131.6 c-20.4-41.6-65.6-76.4-124.8-98.8c-57.2-22-127.6-32.4-200.4-27.2c-5.6,0.4-10,5.2-9.6,10.8c0.4,2.8,1.6,5.6,4,7.2 c36.8,31.6,50,79.2,63.6,126.8c8,28,15.6,55.6,28.4,81.2c0,0.4,0.4,0.4,0.4,0.8c30.8,59.6,78,81.2,122.8,78.4 c18.4-1.2,36-6.4,52.4-14.4c9.2-4.8,18-10.4,26-16.8c11.6,23.2,22,47.2,30.4,72.8c1.6,5.2,7.6,8,12.8,6.4 C349.975,352.119,352.775,346.519,350.775,341.319z M271.175,189.319c-34.8-44.4-78-82.4-131.6-112.4c-4.8-2.8-11.2-1.2-13.6,4 c-2.8,4.8-1.2,11.2,4,13.6c50.8,28.8,92.4,64.8,125.6,107.2c13.2,17.2,25.2,35.2,36,54c-8,7.6-16.4,13.6-25.6,18 c-14,7.2-28.8,11.6-44.4,12.4c-37.6,2.4-77.2-16-104-67.6v-0.4c-11.6-24-19.2-50.8-26.8-78c-12.4-43.2-24.4-86.4-53.6-120.4 c61.6-1.6,120.4,8.4,169.2,27.2c54.4,20.8,96,52,114,88.8c18.8,38,9.2,76.8-14.4,105.2 C295.575,222.919,283.975,205.719,271.175,189.319z"/> </g> </g> <g> </g> <g> </g> <g> </g> </svg>', 'travel--places': '<svg width="20" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 512.003 512.003" style="enable-background:new 0 0 512.003 512.003;" xml:space="preserve"> <g> <g> <path d="M492.638,416.168c-35.445-29.635-139.695-117.048-187.5-159.684c25.879-23.721,62.112-58.999,97.354-93.327 c40.344-39.302,78.458-76.417,95.729-91c8.76-7.385,13.781-18.24,13.781-29.781c0-14.438-7.51-27.24-20.094-34.24 c-12.521-6.958-27.26-6.615-39.438,0.948c-39.313,24.385-196.469,137.25-196.469,161.583c0,7.178-0.293,15.621-2.85,25.203 c-11.751-20.152-18.483-38.615-18.483-46.536c0-15.177-51.573-64.615-153.292-146.958c-4.219-3.427-10.385-3.115-14.25,0.75 l-64,64c-3.865,3.854-4.188,10.01-0.75,14.25c82.344,101.719,131.781,153.292,146.958,153.292c9.056,0,31.823,8.76,55.227,23.852 C157.266,300.56,60.87,381.466,19.388,416.147C7.066,426.449,0.003,441.605,0.003,457.73c0,29.927,24.344,54.271,54.271,54.271 c16.115,0,31.281-7.073,41.583-19.406c35.645-42.613,119.006-141.934,160.151-187.994 c42.456,47.553,130.417,152.456,160.172,188.035c10.292,12.313,25.448,19.365,41.552,19.365c29.927,0,54.271-24.344,54.271-54.271 C512.003,441.626,504.951,426.47,492.638,416.168z M277.336,172.543c11.219-17.521,121.354-104.99,186.385-145.333 c5.5-3.385,12.167-3.573,17.813-0.438c5.719,3.188,9.135,9.021,9.135,15.604c0,5.24-2.26,10.146-6.208,13.479 c-17.854,15.073-56.229,52.448-96.854,92.021c-35.809,34.887-72.602,70.699-98.298,94.167c-1.604-1.518-3.255-3.074-4.431-4.25 c-6.327-6.327-12.008-13.227-17.279-20.24C276.351,199.191,277.309,183.556,277.336,172.543z M79.493,478.907 c-6.24,7.479-15.438,11.76-25.219,11.76c-18.167,0-32.938-14.771-32.938-32.938c0-9.792,4.281-18.979,11.74-25.208 c42.625-35.651,143.104-119.991,189.254-161.26c5.341,4.263,10.582,8.732,15.465,13.615c1.036,1.036,2.443,2.535,3.746,3.905 C200.651,334.428,115.631,435.712,79.493,478.907z M457.732,490.668c-9.781,0-18.958-4.271-25.188-11.719 c-45.26-54.125-153.365-182.854-179.667-209.156c-32.146-32.146-80.802-56.208-101.417-56.208c-0.104,0-0.219,0.01-0.323,0.01 c-12.563-4.885-72.802-72.781-126.125-138.188l6.99-6.99l99.125,99.125c2.083,2.083,4.813,3.125,7.542,3.125 c2.729,0,5.458-1.042,7.542-3.125c4.167-4.167,4.167-10.917,0-15.083L47.086,53.334l6.25-6.25l99.125,99.125 c2.083,2.083,4.813,3.125,7.542,3.125s5.458-1.042,7.542-3.125c4.167-4.167,4.167-10.917,0-15.083L68.42,32.001l6.99-6.99 c65.406,53.323,133.292,113.49,137.927,124.323c0,22.229,24.146,71.229,56.458,103.542 c26.302,26.302,155.031,134.406,209.156,179.656c7.448,6.24,11.719,15.417,11.719,25.198 C490.67,475.897,475.899,490.668,457.732,490.668z"/> </g> </g> <g> </g> <g> </g> <g> </g> <g> </g> </svg>', 'activities': '<svg id="Capa_1" enable-background="new 0 0 512 512" height="20" viewBox="0 0 512 512" width="20" xmlns="http://www.w3.org/2000/svg"><path id="XMLID_272_" d="m437.02 74.98c-48.353-48.351-112.64-74.98-181.02-74.98s-132.667 26.629-181.02 74.98c-48.351 48.353-74.98 112.64-74.98 181.02s26.629 132.667 74.98 181.02c48.353 48.351 112.64 74.98 181.02 74.98s132.667-26.629 181.02-74.98c48.351-48.353 74.98-112.64 74.98-181.02s-26.629-132.667-74.98-181.02zm-407.02 181.02c0-57.102 21.297-109.316 56.352-149.142 37.143 45.142 57.438 101.499 57.438 160.409 0 53.21-16.914 105.191-47.908 148.069-40.693-40.891-65.882-97.226-65.882-159.336zm88.491 179.221c35.75-48.412 55.3-107.471 55.3-167.954 0-66.866-23.372-130.794-66.092-181.661 39.718-34.614 91.603-55.606 148.301-55.606 56.585 0 108.376 20.906 148.064 55.396-42.834 50.9-66.269 114.902-66.269 181.872 0 60.556 19.605 119.711 55.448 168.158-38.077 29.193-85.665 46.574-137.243 46.574-51.698 0-99.388-17.461-137.509-46.779zm297.392-19.645c-31.104-42.922-48.088-95.008-48.088-148.309 0-59.026 20.367-115.47 57.638-160.651 35.182 39.857 56.567 92.166 56.567 149.384 0 62.23-25.284 118.665-66.117 159.576z"/></svg>', 'objects': '<svg width="20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 1000 1000" enable-background="new 0 0 1000 1000" xml:space="preserve"> <g><g><path d="M846.5,153.5C939,246.1,990,369.1,990,500c0,130.9-51,253.9-143.5,346.5C753.9,939,630.9,990,500,990c-130.9,0-253.9-51-346.5-143.5C61,753.9,10,630.9,10,500c0-130.9,51-253.9,143.5-346.5C246.1,61,369.1,10,500,10C630.9,10,753.9,61,846.5,153.5z M803.2,803.2c60.3-60.3,100.5-135.5,117-217.3c-12.9,19-25.2,26-32.9-16.5c-7.9-69.3-71.5-25-111.5-49.6c-42.1,28.4-136.8-55.2-120.7,39.1c24.8,42.5,134-56.9,79.6,33.1c-34.7,62.8-126.9,201.9-114.9,274c1.5,105-107.3,21.9-144.8-12.9c-25.2-69.8-8.6-191.8-74.6-225.9c-71.6-3.1-133-9.6-160.8-89.6c-16.7-57.3,17.8-142.5,79.1-155.7c89.8-56.4,121.9,66.1,206.1,68.4c26.2-27.4,97.4-36.1,103.4-66.8c-55.3-9.8,70.1-46.5-5.3-67.4c-41.6,4.9-68.4,43.1-46.3,75.6C496,410.3,493.5,274.8,416,317.6c-2,67.6-126.5,21.9-43.1,8.2c28.7-12.5-46.8-48.8-6-42.2c20-1.1,87.4-24.7,69.2-40.6c37.5-23.3,69.1,55.8,105.8-1.8c26.5-44.3-11.1-52.5-44.4-30c-18.7-21,33.1-66.3,78.8-85.9c15.2-6.5,29.8-10.1,40.9-9.1c23,26.6,65.6,31.2,67.8-3.2c-57-27.3-119.9-41.7-185-41.7c-93.4,0-182.3,29.7-255.8,84.6c19.8,9.1,31,20.3,11.9,34.7c-14.8,44.1-74.8,103.2-127.5,94.9c-27.4,47.2-45.4,99.2-53.1,153.6c44.1,14.6,54.3,43.5,44.8,53.2c-22.5,19.6-36.3,47.4-43.4,77.8C91.3,658,132.6,739,196.8,803.2c81,81,188.6,125.6,303.2,125.6C614.5,928.8,722.2,884.2,803.2,803.2z"/></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g></g> </svg>', 'symbols': '<svg width="20" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve"> <g> <g> <path d="M256,0C161.33,0,84.312,77.018,84.312,171.688c0,54.38,25.587,105.127,68.882,137.502c0,7.915,0,121.305,0,125.043 c0,9.22,7.475,16.696,16.696,16.696h10.168C187.72,485.81,218.85,512,256,512c37.15,0,68.28-26.19,75.943-61.072h10.168 c9.22,0,16.696-7.475,16.696-16.696c0-3.762,0-117.209,0-125.043c43.294-32.375,68.882-83.122,68.882-137.502 C427.688,77.018,350.67,0,256,0z M256,478.609c-18.567,0-34.507-11.461-41.116-27.68h82.233 C290.507,467.148,274.567,478.609,256,478.609z M325.415,417.537c-4.855,0-132.083,0-138.83,0v-39.041h138.83V417.537z M211.096,242.095h-8.057c-4.443,0-8.058-3.615-8.058-8.058s3.615-8.057,8.058-8.057c4.443,0,8.057,3.614,8.057,8.057V242.095z M244.488,345.105v-69.619h23.017v69.619H244.488z M332.824,286.684c-4.63,3.099-7.41,8.303-7.41,13.875v44.545h-24.519v-69.619 h8.058c22.855,0,41.449-18.594,41.449-41.45c0-22.855-18.593-41.449-41.449-41.449c-22.855,0-41.45,18.593-41.45,41.449v8.058 h-23.017v-8.058c0-22.855-18.593-41.449-41.449-41.449c-22.855,0-41.45,18.593-41.45,41.449s18.594,41.45,41.45,41.45h8.057 v69.619h-24.511V300.56c0-5.572-2.779-10.776-7.41-13.875c-38.491-25.759-61.472-68.748-61.472-114.996 c0-76.258,62.039-138.297,138.297-138.297S394.297,95.43,394.297,171.688C394.297,217.937,371.316,260.926,332.824,286.684z M300.896,242.095v-8.058c0-4.443,3.615-8.057,8.058-8.057c4.443,0,8.057,3.614,8.057,8.057s-3.614,8.058-8.057,8.058H300.896z"/> </g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> </svg>', 'flags': '<svg width="20" viewBox="0 0 60 60" xmlns="http://www.w3.org/2000/svg"><g id="Page-1" fill="none" fill-rule="evenodd"><g id="037---Waypoint-Flag" fill="rgb(0,0,0)" fill-rule="nonzero" transform="translate(0 -1)"><path id="Shape" d="m59.0752 28.5054c-3.7664123-1.873859-7.2507049-4.2678838-10.3506-7.1118 1.5923634-6.0211307 2.7737841-12.14349669 3.5361-18.3248.1788-1.44-.623-1.9047-.872-2.0126-.7016942-.26712004-1.4944908-.00419148-1.8975.6293-5.4726 6.5479-12.9687 5.8008-20.9053 5.0054-7.9985-.8-16.2506-1.6116-22.3684 5.4114-.85552122-1.067885-2.26533581-1.5228479-3.5837-1.1565l-.1377.0386c-1.81412367.5095218-2.87378593 2.391025-2.3691 4.2065l12.2089 43.6891c.3541969 1.2645215 1.5052141 2.1399137 2.8184 2.1435.2677318-.0003961.5341685-.0371657.792-.1093l1.0683-.2984h.001c.7485787-.2091577 1.3833789-.7071796 1.7646969-1.3844635.381318-.677284.4779045-1.478326.2685031-2.2268365l-3.7812-13.5327c5.5066-7.0807 13.18-6.3309 21.2988-5.52 8.1094.81 16.4863 1.646 22.64-5.7129l.0029-.0039c.6044387-.7534187.8533533-1.7315007.6826-2.6822-.0899994-.4592259-.3932698-.8481635-.8167-1.0474zm-42.0381 29.7446c-.1201754.2157725-.3219209.3742868-.56.44l-1.0684.2983c-.4949157.1376357-1.0078362-.1513714-1.1465-.646l-12.2095-43.6895c-.20840349-.7523825.23089143-1.5316224.9825-1.7428l.1367-.0381c.12366014-.0348192.25153137-.0524183.38-.0523.63429117.0010181 1.19083557.4229483 1.3631 1.0334l.1083.3876v.0021l6.2529 22.3755 5.8468 20.9238c.0669515.2380103.0360256.4929057-.0859.708zm40.6329-27.2925c-5.4736 6.5459-12.9707 5.7974-20.9043 5.0039-7.9033-.79-16.06-1.605-22.1552 5.1558l-5.463-19.548-2.0643-7.3873c5.5068-7.0794 13.1796-6.3119 21.3045-5.5007 7.7148.7695 15.6787 1.5664 21.7373-4.7095-.7467138 5.70010904-1.859683 11.3462228-3.332 16.9033-.1993066.7185155.0267229 1.4878686.583 1.9844 3.1786296 2.9100325 6.7366511 5.3762694 10.5771 7.3315-.0213812.2768572-.1194065.5422977-.2831.7666z"/></g></g></svg>', 'search': '<svg width="20" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 511.999 511.999" style="enable-background:new 0 0 511.999 511.999;" xml:space="preserve"> <g> <g> <path d="M508.874,478.708L360.142,329.976c28.21-34.827,45.191-79.103,45.191-127.309c0-111.75-90.917-202.667-202.667-202.667 S0,90.917,0,202.667s90.917,202.667,202.667,202.667c48.206,0,92.482-16.982,127.309-45.191l148.732,148.732 c4.167,4.165,10.919,4.165,15.086,0l15.081-15.082C513.04,489.627,513.04,482.873,508.874,478.708z M202.667,362.667 c-88.229,0-160-71.771-160-160s71.771-160,160-160s160,71.771,160,160S290.896,362.667,202.667,362.667z"/> </g> </g> <g> </g> <g> </g> <g> </g> <g> </g> </svg>', 'close': '<svg width="20" viewBox="0 0 513 513" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;"> <g transform="matrix(0.589845,0,0,0.589845,105,105)"> <g> <path d="M284.286,256.002L506.143,34.144C513.954,26.333 513.954,13.669 506.143,5.859C498.332,-1.951 485.668,-1.952 477.858,5.859L256,227.717L34.143,5.859C26.332,-1.952 13.668,-1.952 5.858,5.859C-1.952,13.67 -1.953,26.334 5.858,34.144L227.715,256.001L5.858,477.859C-1.953,485.67 -1.953,498.334 5.858,506.144C9.763,510.049 14.882,512.001 20.001,512.001C25.12,512.001 30.238,510.049 34.144,506.144L256,284.287L477.857,506.144C481.762,510.049 486.881,512.001 492,512.001C497.119,512.001 502.237,510.049 506.143,506.144C513.954,498.333 513.954,485.669 506.143,477.859L284.286,256.002Z" style="fill-rule:nonzero;"/> </g> </g> </svg>', } } this.selectors = { emit: null, trigger: null, emojiPicker: '.fg-emoji-picker', emojiFooter: '.fg-emoji-picker-footer', emojiBody: '.fg-emoji-picker-all-categories', emojiHeader: '.fg-emoji-picker-categories', closeButton: '.fg-emoji-picker-close-button' } this.bindEvents = () => { this.lib('body').on('click', this.functions.removeEmojiPicker.bind(this)); this.lib('body').on('click', this.functions.emitEmoji.bind(this)); this.lib('body').on('click', this.functions.openEmojiSelector.bind(this), this.selectors.trigger); this.lib('body').on('input', this.functions.search.bind(this), this.selectors.search); // this.lib('body').on('keydown', this.functions.removeEmojiPicker.bind(this)); this.lib('body').on('click', this.destroy.bind(this), this.selectors.closeButton); window.addEventListener('keydown', e => { if (e.keyCode === 27) { if (document.querySelector(this.selectors.emojiPicker)) { document.querySelectorAll(this.selectors.emojiPicker).forEach(emoji => emoji.remove()) this.emojiItems = undefined } } }) } this.html = { pickerBody: () => { return `<div class="fg-emoji-picker"> <div style="position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center;"> <div> <div class="sk-chase"> <div class="sk-chase-dot"></div> <div class="sk-chase-dot"></div> <div class="sk-chase-dot"></div> <div class="sk-chase-dot"></div> <div class="sk-chase-dot"></div> <div class="sk-chase-dot"></div> </div> </div> </div> </div>`; } } this.destroy = () => { document.querySelectorAll(this.selectors.emojiPicker).forEach(p => p.remove()) this.emojiItems = undefined; return true; } setCaretPosition = (field, caretPos) => { var elem = field if (elem != null) { if (elem.createTextRange) { var range = elem.createTextRange(); range.move('character', caretPos); range.select(); } else { if (elem.selectionStart) { elem.focus(); elem.setSelectionRange(caretPos, caretPos); } else { elem.focus(); } } } } this.functions = { // Put in place putInPlace(myField, myValue) { if (document.selection) { myField.focus(); sel = document.selection.createRange(); sel.text = myValue; } else if (myField.selectionStart || myField.selectionStart == "0") { const startPos = myField.selectionStart; const endPos = myField.selectionEnd; myField.value = myField.value.substring(0, startPos) + myValue + myField.value.substring(endPos, myField.value.length); setCaretPosition(myField, startPos + 2) } else { myField.value += myValue; myField.focus() } }, // Search search(e) { const val = e.target.value; if (!Array.isArray(this.emojiItems)) { this.emojiItems = Array.from(e.target.closest(this.selectors.emojiPicker).querySelectorAll(`${this.selectors.emojiBody} 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; }, fetchEmojiData: () => { fetch(`${this.variable.dir}full-emoji-list.json`) .then(response => response.json()) .then(object => { this.emojiJson = object }); }, generateStyle() { document.head.insertAdjacentHTML('beforeend', ` <style> .sk-chase { width: 40px; height: 40px; position: relative; animation: sk-chase 2.5s infinite linear both; } .sk-chase-dot { width: 100%; height: 100%; position: absolute; left: 0; top: 0; animation: sk-chase-dot 2.0s infinite ease-in-out both; } .sk-chase-dot:before { content: ''; display: block; width: 25%; height: 25%; background-color: #9fa1a5; border-radius: 100%; animation: sk-chase-dot-before 2.0s infinite ease-in-out both; } .sk-chase-dot:nth-child(1) { animation-delay: -1.1s; } .sk-chase-dot:nth-child(2) { animation-delay: -1.0s; } .sk-chase-dot:nth-child(3) { animation-delay: -0.9s; } .sk-chase-dot:nth-child(4) { animation-delay: -0.8s; } .sk-chase-dot:nth-child(5) { animation-delay: -0.7s; } .sk-chase-dot:nth-child(6) { animation-delay: -0.6s; } .sk-chase-dot:nth-child(1):before { animation-delay: -1.1s; } .sk-chase-dot:nth-child(2):before { animation-delay: -1.0s; } .sk-chase-dot:nth-child(3):before { animation-delay: -0.9s; } .sk-chase-dot:nth-child(4):before { animation-delay: -0.8s; } .sk-chase-dot:nth-child(5):before { animation-delay: -0.7s; } .sk-chase-dot:nth-child(6):before { animation-delay: -0.6s; } @keyframes sk-chase { 100% { transform: rotate(360deg); } } @keyframes sk-chase-dot { 80%, 100% { transform: rotate(360deg); } } @keyframes sk-chase-dot-before { 50% { transform: scale(0.4); } 100%, 0% { transform: scale(1.0); } } a.fg-emoji-picker-close-button { background-color: #dedede; } ${this.selectors.emojiPicker} { /* position: fixed; */ position: absolute; z-index: 999; width: 300px; min-height: 360px; background-color: white; box-shadow: 0px 2px 13px -2px rgba(0, 0, 0, 0.1803921568627451); border-radius: 4px; overflow: hidden; } ${this.selectors.emojiPicker} ${this.selectors.emojiBody} { height: 301px; overflow-y: auto; padding: 0 15px 15px 15px; } ${this.selectors.emojiPicker} .fg-emoji-picker-container-title { color: black; margin: 10px 0; } ${this.selectors.emojiPicker} * { margin: 0; padding: 0; text-decoration: none; color: #666; font-family: sans-serif; } ${this.selectors.emojiPicker} ul { list-style: none; margin: 0; padding: 0; } ${this.selectors.emojiPicker} .fg-emoji-picker-category { margin-top: 1px; padding-top: 15px; } .fg-emoji-picker-categories svg { width: 17px; height: 17px; } .fg-emoji-picker-grid { display: flex; flex-wrap: wrap; } .fg-emoji-picker-grid > li { cursor: pointer; flex: 0 0 calc(100% / 5); max-width: calc(100% / 5); height: 48px; min-width: 0; display: flex; justify-content: center; align-items: center; transition: all .2s ease; background-color: white; } .fg-emoji-picker-grid > li:hover { background-color: #99c9ef; } .fg-emoji-picker-grid > li:hover a { -webkit-transform: scale(1.2); -ms-transform: scale(1.2); -moz-transform: scale(1.2); transform: scale(1.2); } .fg-emoji-picker-grid > li > a { display: block; font-size: 25px; margin: 0; padding: 25px 0px; line-height: 0; -webkit-transition: all .3s ease; -moz-transition: all .3s ease; -ms-transition: all .3s ease; transition: all .3s ease; } /* FILTERS */ .fg-emoji-picker-categories { /*padding: 0 15px;*/ background: #ececec; } .fg-emoji-picker-categories ul { display: flex; flex-wrap: wrap; } .fg-emoji-picker-categories li { flex: 1; } .fg-emoji-picker-categories li.active { background-color: #99c9ef; } .fg-emoji-picker-categories a { padding: 12px 7px; display: flex; text-align: center; justify-content: center; align-items: center; transition: all .2s ease; } .fg-emoji-picker-categories a:hover { background-color: #99c9ef; } .fg-emoji-picker-search { position: relative; height: 25px; } .fg-emoji-picker-search input { position: absolute; width: 85%; left: 0; top: 0; border: none; padding: 5px 30px 5px 15px; outline: none; background-color: #dedede; font-size: 12px; color: #616161; } .fg-emoji-picker-search svg { width: 15px; height: 15px; position: absolute; right: 7px; top: 5px; fill: #333333; pointer-events: none; } /* FOOTER */ .fg-emoji-picker-footer { display: flex; flex-wrap: wrap; align-items: center; height: 50px; padding: 0 15px 15px 15px; } .fg-emoji-picker-footer-icon { font-size: 30px; margin-right: 8px; } </style>`) }, removeEmojiPicker() { const el = window.event.target; const picker = document.querySelector(this.selectors.emojiPicker); if (!el.closest(this.selectors.emojiPicker)) 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) // If insert into option exists if (this.insertInto) this.functions.putInPlace(this.insertInto, emoji.emoji) if (this.variable.removeOnSelection) { const picker = document.querySelector(this.selectors.emojiPicker); 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 // Insert picker const emojiPickerMain = new DOMParser().parseFromString(this.html.pickerBody.apply(this), 'text/html').body.firstElementChild; document.body.insertAdjacentElement('afterbegin', emojiPickerMain); 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'; } }) } // Emoji Picker Promise this.emojiPicker().then(emojiPicker => { // Create node from const node = new DOMParser().parseFromString(emojiPicker, 'text/html').body.firstElementChild; emojiPickerMain.innerHTML = node.innerHTML; const emojiFooter = emojiPickerMain.querySelector(this.selectors.emojiFooter); const emojiBody = emojiPickerMain.querySelector(this.selectors.emojiBody) const emojiPickerHeader = emojiPickerMain.querySelector(this.selectors.emojiHeader); emojiPickerMain.querySelector('input').focus(); // Add event listener on click document.body.querySelector(this.selectors.emojiPicker).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 - emojiPickerHeader.offsetHeight); } } }) } } }, // Create emoji container / Builder engine this.emojiPicker = () => { let picker = ` <div class="fg-emoji-picker"> <div class="fg-emoji-picker-categories">%categories% <div class="fg-emoji-picker-search"> <input placeholder="Search emoji" autofocus /> ${this.variable.categoryIcons.search} </div> </div> <div>%pickerContainer%</div> </div>`; const closeBtn = this.variable.closeButton ? `<li><a class="fg-emoji-picker-close-button" href="#">${this.variable.categoryIcons.close}</a></li>` : ''; let categories = `<ul>%categories%${closeBtn}</ul>`; let categoriesInner = ``; let outerUl = `<div class="fg-emoji-picker-all-categories">%outerUL%</div>`; let innerLists = ``; let fetchData = null; if (this.emojiJson) { fetchData = new Promise((resolve, reject) => { let index = 0; // Loop through emoji object let object = this.emojiJson; 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 += `<li class="${index === 1 ? 'active' : ''}" id="${keyToId}" data-index="${keyToId}"><a href="#${keyToId}">${this.variable.categoryIcons[keyToId]}</a></li>` innerLists += ` <ul class="fg-emoji-picker-category ${index === 1 ? 'active' : ''}" id="${keyToId}" category-name="${key}"> <div class="fg-emoji-picker-container-title">${key}</div> <div class="fg-emoji-picker-grid">`; // Loop through emoji items categories.forEach(item => { innerLists += `<li data-name="${item.description.toLowerCase()}"><a class="fg-emoji-picker-item" title="${item.description}" data-name="${item.description.toLowerCase()}" data-code="${item.code}" href="${item.emoji}">${item.emoji}</a></li>`; }); innerLists += ` </div> </ul>`; } } let allSmiles = outerUl.replace('%outerUL%', innerLists) let cats = categories.replace('%categories%', categoriesInner); let pickerContainer = picker.replace('%pickerContainer%', allSmiles) let data = pickerContainer.replace('%categories%', cats); resolve(data); }); } else { fetchData = fetch(`${this.variable.dir}full-emoji-list.json`) .then(response => response.json()) .then(object => { // Index count let index = 0; this.emojiJson = object; // 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 += `<li class="${index === 1 ? 'active' : ''}" id="${keyToId}" data-index="${keyToId}"><a href="#${keyToId}">${this.variable.categoryIcons[keyToId]}</a></li>` innerLists += ` <ul class="fg-emoji-picker-category ${index === 1 ? 'active' : ''}" id="${keyToId}" category-name="${key}"> <div class="fg-emoji-picker-container-title">${key}</div> <div class="fg-emoji-picker-grid">`; // Loop through emoji items categories.forEach(item => { innerLists += `<li data-name="${item.description.toLowerCase()}"><a class="fg-emoji-picker-item" title="${item.description}" data-name="${item.description.toLowerCase()}" data-code="${item.code}" href="${item.emoji}">${item.emoji}</a></li>`; }) innerLists += ` </div> </ul>`; } } let allSmiles = outerUl.replace('%outerUL%', innerLists) let cats = categories.replace('%categories%', categoriesInner); let pickerContainer = picker.replace('%pickerContainer%', allSmiles) let data = pickerContainer.replace('%categories%', cats); return data; }) } return fetchData; } this.init(); }