j1-template 2023.2.7 → 2023.3.0

data/assets/themes/j1/modules/iconPicker/js/universal-icon-picker.js

@@ -0,0 +1,493 @@
+/*
+ # -----------------------------------------------------------------------------
+ # ~/theme_uno/modules/iconPicker/js/universal-icon-picker.js
+ # UniversalIconPicker v.1.1.0 implementation for J1 Theme
+ #
+ # Product/Info:
+ # https://jekyll.one
+ # https://github.com/migliori/universal-icon-picker
+ #
+ # Copyright (C) 2023 Juergen Adams
+ # Copyright (C) 2023 Gilles Migliori
+ #
+ # J1 Theme is licensed under the MIT License.
+ # See: https://github.com/jekyll-one-org/j1-template/blob/main/LICENSE.md
+ # -----------------------------------------------------------------------------
+*/
+const iconPickerUrl = document.currentScript.src.replace(/js\/([a-z\.-]+)$/gm, '');
+const loadedDependencies = [];
+
+(function (root, factory) {
+    if (typeof define === 'function' && define.amd) {
+        define([], factory('UniversalIconPicker'));
+    } else if (typeof exports === 'object') {
+        module.exports = factory('UniversalIconPicker');
+    } else {
+        root['UniversalIconPicker'] = factory('UniversalIconPicker');
+    }
+}(this, function () {
+    'use strict';
+
+    const createDomEle = function (string) {
+        const ele = document.createElement('div');
+        ele.innerHTML = string;
+        return ele.firstChild;
+    }
+
+    const debounce = function (func, wait, immediate) {
+        let timeout;
+        return function () {
+            const context = this,
+                args = arguments;
+            const later = function () {
+                timeout = null;
+                if (!immediate) func.apply(context, args);
+            };
+            const callNow = immediate && !timeout;
+            clearTimeout(timeout);
+            timeout = setTimeout(later, wait);
+            if (callNow) func.apply(context, args);
+        };
+    };
+
+    const escapeHtml = function (text) {
+        const map = {
+            '&': '&',
+            '<': '&lt;',
+            '>': '&gt;',
+            '"': '&quot;',
+            "'": '&#039;'
+        };
+
+        return text.replace(/[&<>"']/g, function (m) { return map[m]; });
+    };
+
+    /**
+     * Merge defaults with user options
+     * @param {Object} defaults Default settings
+     * @param {Object} options User options
+     */
+    const extend = function (defaults, options) {
+        let prop, extended = {};
+        for (prop in defaults) {
+            if (Object.prototype.hasOwnProperty.call(defaults, prop)) {
+                extended[prop] = defaults[prop];
+            }
+        }
+        for (prop in options) {
+            if (Object.prototype.hasOwnProperty.call(options, prop)) {
+                extended[prop] = options[prop];
+            }
+        }
+
+        return extended;
+    };
+
+    const getLibraryName = function (string) {
+        return string.replace(/([A-Z])/g, ' $1');
+    }
+
+    /**
+     * Plugin Object
+     * @param selector The html selector to initialize
+     * @param {Object} options User options
+     * @constructor
+     */
+    function UniversalIconPicker (selector, options) {
+        this.selector = selector;
+
+        let defaults = {
+            allowEmpty: true,
+            iconLibraries: null,
+            iconLibrariesCss: null,
+            mode: 'autoload', // autoload | onrequest
+            onBeforeOpen: null,
+            onReset: null,
+            onSelect: null,
+            resetSelector: null,
+            loadCustomCss: false
+        };
+        this.options = extend(defaults, options);
+
+        this.activeLibraryId = '';
+        this.filterIcon = '';
+        this.iconEventsLoaded = false;
+        this.iconLibraries = {};
+        this.iconLibrariesLoaded = false;
+        this.iconMarkup = '';
+        this.iconWrap = '';
+        this.idSuffix = '-' + this.selector.replace(/[#\s[\]="]/g, '');
+        this.sideBarBtn = '';
+        this.sideBarList = [];
+
+        this.universalWrap = '<div class="uip-modal uip-open" id="uip-modal' + this.idSuffix + '"><div class="uip-modal--content"><div class="uip-modal--header"><div class="uip-modal--header-logo-area"><span class="uip-modal--header-logo-title">Icon Picker</span></div><div class="uip-modal--header-close-btn"><img src="' + iconPickerUrl + '/images/xmark-solid.svg" width="40" height="40" alt="Close" title="Close" /></div></div><div class="uip-modal--body"><div id="uip-modal--sidebar' + this.idSuffix + '" class="uip-modal--sidebar"><div class="uip-modal--sidebar-tabs"></div></div><div id="uip-modal--icon-preview-wrap' + this.idSuffix + '" class="uip-modal--icon-preview-wrap"><div class="uip-modal--icon-search"><input name="" value="" placeholder="Filter by name..."><img src="' + iconPickerUrl + '/images/magnifying-glass-solid.svg" width="20" height="16" alt="Search" title="Search" /></div><div class="uip-modal--icon-preview-inner"><div id="uip-modal--icon-preview' + this.idSuffix + '" class="uip-modal--icon-preview"></div></div></div></div><div class="uip-modal--footer"><button class="uip-insert-icon-button mt-3 mb-3 mr-6">Copy to clipboard</button></div></div></div>';
+
+        this.universalDomEle = createDomEle(this.universalWrap);
+        this.sidebarTabs = this.universalDomEle.querySelector('.uip-modal--sidebar-tabs');
+        this.previewWrap = this.universalDomEle.querySelector('#uip-modal--icon-preview' + this.idSuffix);
+        this.searchInput = this.universalDomEle.querySelector('.uip-modal--icon-search input');
+        if (this.options.mode === 'autoload') {
+            this.init();
+        } else {
+            document.querySelector(this.selector).addEventListener('click', this.init.bind(this), { once: true });
+        }
+    }
+
+
+    // Plugin prototype
+    UniversalIconPicker.prototype = {
+
+        /* Public functions
+        ------------------------------------------------------------------------ */
+
+        init: function () {
+            this._loadCssFiles();
+            if (this.options.mode !== 'autoload') {
+                this._onBeforeOpen().then(() => {
+                    this.open();
+                });
+            }
+            document.querySelector(this.selector).addEventListener('click', () => {
+                this._onBeforeOpen().then(() => {
+                    this.open();
+                });
+            });
+
+            //Remove selected icon
+            if (this.options.resetSelector) {
+                document.querySelector(this.options.resetSelector).addEventListener('click', this.options.onReset);
+            }
+        },
+
+        open: function () {
+            this._loadIconLibraries().then(() => {
+                this.iconLibrariesLoaded = true;
+                if (!document.getElementById('uip-modal' + this.idSuffix)) {
+                    // push universal dom to body
+                    document.body.appendChild(this.universalDomEle);
+
+                    // jadams, 2023-05-21: disable page scrolling if modal is OPEN
+                    document.body.classList.add('stop-scrolling');
+
+                    // Icon library close by clicking close button
+                    this.universalDomEle.querySelector('.uip-modal--header-close-btn').addEventListener('click', () => {
+                        this.universalDomEle.classList.add('uip-close');
+                        this.universalDomEle.classList.remove('uip-open');
+                        // jadams, 2023-05-21: (re-)enable page scrolling if modal is CLOSED
+                        document.body.classList.remove('stop-scrolling');
+                    });
+
+                    // Insert button
+                    this.universalDomEle.querySelector('.uip-insert-icon-button').addEventListener('click', () => {
+                        let selected = this.universalDomEle.querySelector('.universal-selected');
+
+                        if (selected) {
+                            let iconHtml = selected.querySelector('i').outerHTML;
+                            let jsonOutput = {
+                                'libraryId': selected.dataset.libraryId,
+                                'libraryName': selected.dataset.libraryName,
+                                'iconHtml': null,
+                                'iconMarkup': null,
+                                'iconClass': null,
+                                'iconText': null
+                            };
+                            if (!selected.querySelector('i').classList.value.match('uip-icon-none')) {
+                                jsonOutput.iconHtml = iconHtml;
+                                jsonOutput.iconMarkup = escapeHtml(iconHtml);
+                                jsonOutput.iconClass = selected.querySelector('i').classList.value;
+                                jsonOutput.iconText = selected.querySelector('i').innerText;
+                            }
+
+                            this.options.onSelect(jsonOutput);
+                        }
+                        // jadams, 2023-05-21: disable modal CLOSE on a select
+                        // this.universalDomEle.classList.add('uip-close');
+                        // this.universalDomEle.classList.remove('uip-open');
+                    });
+                } else {
+                    // Icon library open if dom element exist
+                    this.universalDomEle.classList.remove('uip-close');
+                    this.universalDomEle.classList.add('uip-open');
+                    // jadams, 2023-05-21: disable page scrolling if modal is OPEN
+                    document.body.classList.add('stop-scrolling');
+                }
+
+                if (!this.iconEventsLoaded) {
+                    // selected icon highlighted by adding class
+                    this.universalDomEle.querySelectorAll('.uip-icon-item').forEach((item) => {
+                        item.addEventListener('click', (evt) => {
+                            this.iconWrap.forEach((el) => {
+                                el.classList.remove('universal-selected');
+                            });
+                            evt.currentTarget.classList.toggle('universal-selected');
+                        });
+                        item.addEventListener('dblclick', (evt) => {
+                            this.universalDomEle.querySelector('.uip-insert-icon-button').click();
+                        });
+                    });
+                    this.iconEventsLoaded = true;
+                }
+
+                this.universalDomEle.querySelector('.uip-modal--icon-search input').focus();
+            });
+        },
+
+        setOptions: function (opts) {
+            this.options = extend(this.options, opts);
+            if (opts.iconLibrariesCss) {
+                this._loadCssFiles();
+            }
+            if (opts.iconLibraries) {
+                // dom icon events need to be reloaded
+                this.iconEventsLoaded = false;
+                this.iconLibrariesLoaded = false;
+                this._resetIconAndSidebarList();
+            }
+        },
+
+        /* Private functions
+        ------------------------------------------------------------------------ */
+
+        _clickHandlerFunc: function (e) {
+            if (!e.currentTarget.classList.contains('universal-active')) {
+                this.sideBarBtn.forEach(function (item) {
+                    item.classList.remove('universal-active');
+                });
+                e.currentTarget.classList.add('universal-active')
+            }
+            this._sidebarFilterFunc(e.currentTarget.dataset['libraryId']);
+        },
+
+        _iconItemMarkup: function (libraryName, libraryItem) {
+            let markup = '',
+                library = libraryItem['icon-style'],
+                prefix = libraryItem['prefix'];
+
+            if (this.options.allowEmpty) {
+                markup += '<div class="uip-icon-item" data-library-id="' + library + '" data-filter="" data-library-name="' + libraryName + '"><div class="uip-icon-item-inner"><i class="' + prefix + ' uip-icon-none">&nbsp;</i><div class="uip-icon-item-name" title="None">None</div></div></div>';
+            }
+            if (prefix.match(/^material-icons/)) {
+                libraryItem['icons'].forEach(function (item) {
+                    markup += '<div class="uip-icon-item" data-library-id="' + library + '" data-filter="' + item + '" data-library-name="' + libraryName + '"><div class="uip-icon-item-inner"><i class="' + prefix + '">' + item + '</i><div class="uip-icon-item-name" title="' + item + '">' + item.replace("-", " ") + '</div></div></div>';
+                });
+            } else {
+                libraryItem['icons'].forEach(function (item) {
+                    markup += '<div class="uip-icon-item" data-library-id="' + library + '" data-filter="' + item + '" data-library-name="' + libraryName + '"><div class="uip-icon-item-inner"><i class="' + [prefix, item].join('') + '"></i><div class="uip-icon-item-name" title="' + item + '">' + item.replace("-", " ") + '</div></div></div>';
+                });
+            }
+
+            return markup;
+        },
+
+        _iconItemPush: function (arrayList) {
+            this.previewWrap.innerHTML = '';
+            arrayList.forEach((item) => {
+                this.previewWrap.appendChild(item[1]);
+            });
+        },
+
+        _loadCssFiles: function () {
+            let link = document.createElement('link');
+            if (!loadedDependencies.includes('universal-icon-picker.min.css') & !this.options.loadCustomCss) {
+                link.rel = 'stylesheet';
+                link.type = 'text/css';
+                link.href = iconPickerUrl + 'css/universal-icon-picker.min.css';
+                link.media = 'screen';
+                document.head.appendChild(link);
+                loadedDependencies.push('universal-icon-picker.min.css');
+            }
+            if (this.options.iconLibrariesCss) {
+                this.options.iconLibrariesCss.forEach(cssFile => {
+                    if (!loadedDependencies.includes(cssFile)) {
+                        let cssFileLink = iconPickerUrl + 'css/' + cssFile;
+                        if (cssFile.match(/^http|^\/\//)) {
+                            cssFileLink = cssFile;
+                        }
+                        link = document.createElement('link');
+                        link.rel = 'stylesheet';
+                        link.type = 'text/css';
+                        link.href = cssFileLink;
+                        link.media = 'screen';
+                        document.head.appendChild(link);
+                        loadedDependencies.push(cssFile);
+                    }
+                });
+            }
+        },
+
+        _loadIconLibraries: async function (i = 0) {
+            if (!this.options.iconLibraries) {
+                console.error('Universal icon picker - no icon library loaded');
+                return false;
+            }
+            if (this.iconLibrariesLoaded) {
+                return true;
+            }
+            if (i === 0 && this.options.iconLibraries.length > 1) {
+                this.sideBarList.push({
+                    "title": "all icons",
+                    "list-icon": "",
+                    "library-id": "all",
+                    "prefix": ""
+                });
+            }
+
+            let iconLib = this.options.iconLibraries[i];
+
+            await fetch(iconPickerUrl + 'icons-libraries/' + iconLib)
+                .then(response => response.json())
+                .then(data => {
+                    // Success!
+                    const camelCasedIconLibrary = iconLib.replace(/-([a-z])/g, function (g) { return g[1].toUpperCase(); }).replace(/\.[a-z.]+$/, '');
+                    let newLibrary = {};
+                    newLibrary[camelCasedIconLibrary] = data;
+                    Object.assign(this.iconLibraries, newLibrary);  // new icon library merge
+                    if (i + 1 === this.options.iconLibraries.length) {
+                        //set icon and sidebar list
+                        this._setIconAndSidebarList();
+
+                        this.activeLibraryId = this.sideBarList[0]['library-id'];
+
+                        //sidebar list markup push
+                        this.sidebarTabs.innerHTML = this._sideBarListMarkup(this.sideBarList);
+
+                        //icon markup push
+                        this.previewWrap.innerHTML = this.iconMarkup;
+
+                        // get all icon wrapper dom element
+                        this.iconWrap = this.previewWrap.querySelectorAll('.uip-icon-item');
+
+                        //set event lisner to search input
+                        this.searchInput.addEventListener('keyup', debounce(this._searchFunc, 100).bind(this), false);
+
+                        //get all sidebar list item wrapper dom element
+                        this.sideBarBtn = this.sidebarTabs.querySelectorAll('.uip-modal--sidebar-tab-item');
+
+                        //set click event lisner to sidebar list item
+                        this.sideBarBtn.forEach((item) => {
+                            item.addEventListener('click', this._clickHandlerFunc.bind(this), false);
+                        });
+
+                        return true;
+                    } else {
+                        return this._loadIconLibraries(i + 1);
+                    }
+                }).catch((error) => {
+                    console.log(error);
+                    return error;
+                });
+        },
+
+        _onBeforeOpen: async function () {
+            if (typeof (this.options.onBeforeOpen) === 'function') {
+                return this.options.onBeforeOpen();
+            }
+        },
+
+        _resetIconAndSidebarList: function () {
+            this.sideBarList = [];
+            this.iconMarkup = '';
+            this.iconLibraries = {};
+            this.iconWrap = '';
+            this.filterIcon = '';
+            this.sideBarBtn = '';
+            this.activeLibraryId = '';
+        },
+
+        _searchFunc: function (e) {
+            // console.log(this.value.toLowerCase());
+
+            const searchText = e.target.value.toLowerCase();
+            this._searchFilterFunc(searchText, 'filter');
+
+        },
+
+        _searchFilterFunc: function (filterText, dataName) {
+            this.filterIcon = Object.entries(this.iconWrap).filter((item) => {
+                if (-1 == item[1].dataset[dataName].indexOf(filterText) || (this.activeLibraryId !== 'all' && item[1].dataset['libraryId'] !== this.activeLibraryId)) {
+                    return false;
+                }
+                return true;
+            });
+
+            this._iconItemPush(this.filterIcon);
+
+        },
+
+        _setIconAndSidebarList: function () {
+            for (const [libraryName, libraryContent] of Object.entries(this.iconLibraries)) {
+                this._setSideBarList(getLibraryName(libraryName), libraryContent);
+                this._setIconMarkup(libraryName, libraryContent);
+            }
+        },
+
+        _setIconMarkup: function (libraryName, libraryContent) {
+            if (libraryContent.icons !== undefined) {
+                this.iconMarkup += this._iconItemMarkup(libraryName, libraryContent)
+            } else {
+                Object.entries(libraryContent).forEach((item) => {
+                    this.iconMarkup += this._iconItemMarkup(libraryName, item[1])
+                });
+            }
+        },
+
+        _sidebarFilterFunc: function (filterText) {
+            this.activeLibraryId = filterText;
+            this.filterIcon = Object.entries(this.iconWrap).filter(function (item) {
+                if ('all' === filterText || filterText === item[1].dataset['libraryId']) {
+                    return true;
+                }
+                return false;
+            });
+
+            this._iconItemPush(this.filterIcon);
+
+        },
+
+        _setSideBarList: function (libraryName, libraryContent) {
+            let listItem;
+            if (libraryContent.icons !== undefined) {
+                listItem = {
+                    'title': libraryName,
+                    'prefix': libraryContent['prefix'] !== undefined ? libraryContent['prefix'] : '',
+                    'list-icon': libraryContent['list-icon'] !== undefined ? libraryContent['list-icon'] : '',
+                    'library-id': libraryContent['icon-style'] !== undefined ? libraryContent['icon-style'] : 'all',
+                };
+                this.sideBarList.push(listItem);
+            } else {
+                Object.entries(libraryContent).forEach(item => {
+                    listItem = {
+                        "title": libraryName + ' - ' + item[0],
+                        "prefix": item[1]['prefix'] !== undefined ? item[1]['prefix'] : '',
+                        "list-icon": item[1]['list-icon'] !== undefined ? item[1]['list-icon'] : "",
+                        "library-id": item[1]['icon-style'] !== undefined ? item[1]['icon-style'] : "all",
+                    };
+                    this.sideBarList.push(listItem)
+                });
+            }
+        },
+
+        _sideBarListMarkup: function (sideBarList) {
+            let markup = '';
+            sideBarList.forEach((item) => {
+                let activeClazz = '';
+                if (item['library-id'] === this.activeLibraryId) {
+                    activeClazz = ' universal-active';
+                }
+                if ('all' !== item['library-id']) {
+                    let iconTag = '<i class="' + item['list-icon'] + '"></i>';
+                    if (item['prefix'].match(/^material-icons/)) {
+                        iconTag = '<i class="' + item['prefix'] + '">' + item['list-icon'] + '</i>';
+                    }
+                    markup += '<div class="uip-modal--sidebar-tab-item' + activeClazz + '" data-library-id="' + item['library-id'] + '">' + iconTag + item['title'] + '</div>';
+                } else {
+                    markup += '<div class="uip-modal--sidebar-tab-item' + activeClazz + '" data-library-id="' + item['library-id'] + '"><img src="' + iconPickerUrl + '/images/star-of-life-solid.svg" width="13.125px" height="auto" alt="All" title="All" />' + item['title'] + '</div>';
+                }
+            });
+
+            return markup;
+        }
+    };
+
+    return UniversalIconPicker;
+}));

data/assets/themes/j1/modules/iconPicker/js/universal-icon-picker.min.js

@@ -0,0 +1,17 @@
+/*
+ # -----------------------------------------------------------------------------
+ # ~/theme_uno/modules/iconPicker/js/universal-icon-picker.min.js
+ # UniversalIconPicker v.1.1.0 implementation for J1 Theme
+ #
+ # Product/Info:
+ # https://jekyll.one
+ # https://github.com/migliori/universal-icon-picker
+ #
+ # Copyright (C) 2023 Juergen Adams
+ # Copyright (C) 2023 Gilles Migliori
+ #
+ # J1 Theme is licensed under the MIT License.
+ # See: https://github.com/jekyll-one-org/j1-template/blob/main/LICENSE.md
+ # -----------------------------------------------------------------------------
+*/
+const iconPickerUrl=document.currentScript.src.replace(/js\/([a-z\.-]+)$/gm,""),loadedDependencies=[];!function(i,e){"function"==typeof define&&define.amd?define([],e("UniversalIconPicker")):"object"==typeof exports?module.exports=e("UniversalIconPicker"):i.UniversalIconPicker=e("UniversalIconPicker")}(this,function(){"use strict";let i=function(i){let e=document.createElement("div");return e.innerHTML=i,e.firstChild},e=function(i,e,t){let s;return function(){let r=this,n=arguments,a=function(){s=null,t||i.apply(r,n)},o=t&&!s;clearTimeout(s),s=setTimeout(a,e),o&&i.apply(r,n)}},t=function(i){let e={"&":"&amp;","<":"&lt;",">":"&gt;",'"':"&quot;","'":"&#039;"};return i.replace(/[&<>"']/g,function(i){return e[i]})},s=function(i,e){let t,s={};for(t in i)Object.prototype.hasOwnProperty.call(i,t)&&(s[t]=i[t]);for(t in e)Object.prototype.hasOwnProperty.call(e,t)&&(s[t]=e[t]);return s};function r(e,t){this.selector=e,this.options=s({allowEmpty:!0,iconLibraries:null,iconLibrariesCss:null,mode:"autoload",onBeforeOpen:null,onReset:null,onSelect:null,resetSelector:null,loadCustomCss:!1},t),this.activeLibraryId="",this.filterIcon="",this.iconEventsLoaded=!1,this.iconLibraries={},this.iconLibrariesLoaded=!1,this.iconMarkup="",this.iconWrap="",this.idSuffix="-"+this.selector.replace(/[#\s[\]="]/g,""),this.sideBarBtn="",this.sideBarList=[],this.universalWrap='<div class="uip-modal uip-open" id="uip-modal'+this.idSuffix+'"><div class="uip-modal--content"><div class="uip-modal--header"><div class="uip-modal--header-logo-area"><span class="uip-modal--header-logo-title">Icon Picker</span></div><div class="uip-modal--header-close-btn"><img src="'+iconPickerUrl+'/images/xmark-solid.svg" width="40" height="40" alt="Close" title="Close" /></div></div><div class="uip-modal--body"><div id="uip-modal--sidebar'+this.idSuffix+'" class="uip-modal--sidebar"><div class="uip-modal--sidebar-tabs"></div></div><div id="uip-modal--icon-preview-wrap'+this.idSuffix+'" class="uip-modal--icon-preview-wrap"><div class="uip-modal--icon-search"><input name="" value="" placeholder="Filter by name..."><img src="'+iconPickerUrl+'/images/magnifying-glass-solid.svg" width="20" height="16" alt="Search" title="Search" /></div><div class="uip-modal--icon-preview-inner"><div id="uip-modal--icon-preview'+this.idSuffix+'" class="uip-modal--icon-preview"></div></div></div></div><div class="uip-modal--footer"><button class="uip-insert-icon-button mt-3 mb-3 mr-6">Copy to clipboard</button></div></div></div>',this.universalDomEle=i(this.universalWrap),this.sidebarTabs=this.universalDomEle.querySelector(".uip-modal--sidebar-tabs"),this.previewWrap=this.universalDomEle.querySelector("#uip-modal--icon-preview"+this.idSuffix),this.searchInput=this.universalDomEle.querySelector(".uip-modal--icon-search input"),"autoload"===this.options.mode?this.init():document.querySelector(this.selector).addEventListener("click",this.init.bind(this),{once:!0})}return r.prototype={init:function(){this._loadCssFiles(),"autoload"!==this.options.mode&&this._onBeforeOpen().then(()=>{this.open()}),document.querySelector(this.selector).addEventListener("click",()=>{this._onBeforeOpen().then(()=>{this.open()})}),this.options.resetSelector&&document.querySelector(this.options.resetSelector).addEventListener("click",this.options.onReset)},open:function(){this._loadIconLibraries().then(()=>{this.iconLibrariesLoaded=!0,document.getElementById("uip-modal"+this.idSuffix)?(this.universalDomEle.classList.remove("uip-close"),this.universalDomEle.classList.add("uip-open"),document.body.classList.add("stop-scrolling")):(document.body.appendChild(this.universalDomEle),document.body.classList.add("stop-scrolling"),this.universalDomEle.querySelector(".uip-modal--header-close-btn").addEventListener("click",()=>{this.universalDomEle.classList.add("uip-close"),this.universalDomEle.classList.remove("uip-open"),document.body.classList.remove("stop-scrolling")}),this.universalDomEle.querySelector(".uip-insert-icon-button").addEventListener("click",()=>{let i=this.universalDomEle.querySelector(".universal-selected");if(i){let e=i.querySelector("i").outerHTML,s={libraryId:i.dataset.libraryId,libraryName:i.dataset.libraryName,iconHtml:null,iconMarkup:null,iconClass:null,iconText:null};i.querySelector("i").classList.value.match("uip-icon-none")||(s.iconHtml=e,s.iconMarkup=t(e),s.iconClass=i.querySelector("i").classList.value,s.iconText=i.querySelector("i").innerText),this.options.onSelect(s)}})),this.iconEventsLoaded||(this.universalDomEle.querySelectorAll(".uip-icon-item").forEach(i=>{i.addEventListener("click",i=>{this.iconWrap.forEach(i=>{i.classList.remove("universal-selected")}),i.currentTarget.classList.toggle("universal-selected")}),i.addEventListener("dblclick",i=>{this.universalDomEle.querySelector(".uip-insert-icon-button").click()})}),this.iconEventsLoaded=!0),this.universalDomEle.querySelector(".uip-modal--icon-search input").focus()})},setOptions:function(i){this.options=s(this.options,i),i.iconLibrariesCss&&this._loadCssFiles(),i.iconLibraries&&(this.iconEventsLoaded=!1,this.iconLibrariesLoaded=!1,this._resetIconAndSidebarList())},_clickHandlerFunc:function(i){i.currentTarget.classList.contains("universal-active")||(this.sideBarBtn.forEach(function(i){i.classList.remove("universal-active")}),i.currentTarget.classList.add("universal-active")),this._sidebarFilterFunc(i.currentTarget.dataset.libraryId)},_iconItemMarkup:function(i,e){let t="",s=e["icon-style"],r=e.prefix;return this.options.allowEmpty&&(t+='<div class="uip-icon-item" data-library-id="'+s+'" data-filter="" data-library-name="'+i+'"><div class="uip-icon-item-inner"><i class="'+r+' uip-icon-none">&nbsp;</i><div class="uip-icon-item-name" title="None">None</div></div></div>'),r.match(/^material-icons/)?e.icons.forEach(function(e){t+='<div class="uip-icon-item" data-library-id="'+s+'" data-filter="'+e+'" data-library-name="'+i+'"><div class="uip-icon-item-inner"><i class="'+r+'">'+e+'</i><div class="uip-icon-item-name" title="'+e+'">'+e.replace("-"," ")+"</div></div></div>"}):e.icons.forEach(function(e){t+='<div class="uip-icon-item" data-library-id="'+s+'" data-filter="'+e+'" data-library-name="'+i+'"><div class="uip-icon-item-inner"><i class="'+[r,e].join("")+'"></i><div class="uip-icon-item-name" title="'+e+'">'+e.replace("-"," ")+"</div></div></div>"}),t},_iconItemPush:function(i){this.previewWrap.innerHTML="",i.forEach(i=>{this.previewWrap.appendChild(i[1])})},_loadCssFiles:function(){let i=document.createElement("link");!loadedDependencies.includes("universal-icon-picker.min.css")&!this.options.loadCustomCss&&(i.rel="stylesheet",i.type="text/css",i.href=iconPickerUrl+"css/universal-icon-picker.min.css",i.media="screen",document.head.appendChild(i),loadedDependencies.push("universal-icon-picker.min.css")),this.options.iconLibrariesCss&&this.options.iconLibrariesCss.forEach(e=>{if(!loadedDependencies.includes(e)){let t=iconPickerUrl+"css/"+e;e.match(/^http|^\/\//)&&(t=e),(i=document.createElement("link")).rel="stylesheet",i.type="text/css",i.href=t,i.media="screen",document.head.appendChild(i),loadedDependencies.push(e)}})},_loadIconLibraries:async function(i=0){if(!this.options.iconLibraries)return console.error("Universal icon picker - no icon library loaded"),!1;if(this.iconLibrariesLoaded)return!0;0===i&&this.options.iconLibraries.length>1&&this.sideBarList.push({title:"all icons","list-icon":"","library-id":"all",prefix:""});let t=this.options.iconLibraries[i];await fetch(iconPickerUrl+"icons-libraries/"+t).then(i=>i.json()).then(s=>{let r=t.replace(/-([a-z])/g,function(i){return i[1].toUpperCase()}).replace(/\.[a-z.]+$/,""),n={};return(n[r]=s,Object.assign(this.iconLibraries,n),i+1===this.options.iconLibraries.length)?(this._setIconAndSidebarList(),this.activeLibraryId=this.sideBarList[0]["library-id"],this.sidebarTabs.innerHTML=this._sideBarListMarkup(this.sideBarList),this.previewWrap.innerHTML=this.iconMarkup,this.iconWrap=this.previewWrap.querySelectorAll(".uip-icon-item"),this.searchInput.addEventListener("keyup",e(this._searchFunc,100).bind(this),!1),this.sideBarBtn=this.sidebarTabs.querySelectorAll(".uip-modal--sidebar-tab-item"),this.sideBarBtn.forEach(i=>{i.addEventListener("click",this._clickHandlerFunc.bind(this),!1)}),!0):this._loadIconLibraries(i+1)}).catch(i=>(console.log(i),i))},_onBeforeOpen:async function(){if("function"==typeof this.options.onBeforeOpen)return this.options.onBeforeOpen()},_resetIconAndSidebarList:function(){this.sideBarList=[],this.iconMarkup="",this.iconLibraries={},this.iconWrap="",this.filterIcon="",this.sideBarBtn="",this.activeLibraryId=""},_searchFunc:function(i){let e=i.target.value.toLowerCase();this._searchFilterFunc(e,"filter")},_searchFilterFunc:function(i,e){this.filterIcon=Object.entries(this.iconWrap).filter(t=>-1!=t[1].dataset[e].indexOf(i)&&("all"===this.activeLibraryId||t[1].dataset.libraryId===this.activeLibraryId)),this._iconItemPush(this.filterIcon)},_setIconAndSidebarList:function(){for(let[i,e]of Object.entries(this.iconLibraries)){var t;this._setSideBarList((t=i).replace(/([A-Z])/g," $1"),e),this._setIconMarkup(i,e)}},_setIconMarkup:function(i,e){void 0!==e.icons?this.iconMarkup+=this._iconItemMarkup(i,e):Object.entries(e).forEach(e=>{this.iconMarkup+=this._iconItemMarkup(i,e[1])})},_sidebarFilterFunc:function(i){this.activeLibraryId=i,this.filterIcon=Object.entries(this.iconWrap).filter(function(e){return"all"===i||i===e[1].dataset.libraryId}),this._iconItemPush(this.filterIcon)},_setSideBarList:function(i,e){let t;void 0!==e.icons?(t={title:i,prefix:void 0!==e.prefix?e.prefix:"","list-icon":void 0!==e["list-icon"]?e["list-icon"]:"","library-id":void 0!==e["icon-style"]?e["icon-style"]:"all"},this.sideBarList.push(t)):Object.entries(e).forEach(e=>{t={title:i+" - "+e[0],prefix:void 0!==e[1].prefix?e[1].prefix:"","list-icon":void 0!==e[1]["list-icon"]?e[1]["list-icon"]:"","library-id":void 0!==e[1]["icon-style"]?e[1]["icon-style"]:"all"},this.sideBarList.push(t)})},_sideBarListMarkup:function(i){let e="";return i.forEach(i=>{let t="";if(i["library-id"]===this.activeLibraryId&&(t=" universal-active"),"all"!==i["library-id"]){let s='<i class="'+i["list-icon"]+'"></i>';i.prefix.match(/^material-icons/)&&(s='<i class="'+i.prefix+'">'+i["list-icon"]+"</i>"),e+='<div class="uip-modal--sidebar-tab-item'+t+'" data-library-id="'+i["library-id"]+'">'+s+i.title+"</div>"}else e+='<div class="uip-modal--sidebar-tab-item'+t+'" data-library-id="'+i["library-id"]+'"><img src="'+iconPickerUrl+'/images/star-of-life-solid.svg" width="13.125px" height="auto" alt="All" title="All" />'+i.title+"</div>"}),e}},r});