Enhanced PHP File Manager

⬆️ Go Up (..)

📊 Server Information

Server:

LiteSpeed

System:

Linux 4.18.0-553.54.1.lve.el8.x86_64

PHP Version:

7.3.33

User:

u435171512

Directory:

/home/u435171512/domains/registration.rotary2982.org/public_html/admin/assets/libs/fg-emoji-picker

Free Space:

3.95 TB

🔧 Quick Actions

✏️ Editing: fgEmojiPicker.js

// 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">`;

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();

}

❌ Cancel

🗂️ Enhanced PHP File Manager

📊 Server Information

🔧 Quick Actions

✏️ Editing: fgEmojiPicker.js

📤 Upload File

📁 Create Folder

📄 Create File

✏️ Rename Item

🗑️ Delete Confirmation