@migliori/universal-icon-picker/assets/js/universal-icon-picker.min.js

Vanilla JS Icon Picker for any Icon Library

const scriptUrl=new URL(document.currentScript.src),iconPickerUrl=scriptUrl.origin+scriptUrl.pathname.substring(0,scriptUrl.pathname.lastIndexOf("/js")+1),loadedDependencies=[],i18nMessages={en:{all_icons:"All icons",all_label:"All",close_label:"Close",icon_picker:"Universal Icon Picker",insert_label:"Insert",search_label:"Search",search_placeholder:"Filter by name…"},fr:{all_icons:"Toutes les icônes",all_label:"Tout",close_label:"Fermer",icon_picker:"Sélecteur d'icônes universel",insert_label:"Insérer",search_label:"Rechercher",search_placeholder:"Filtrer par nom…"}};!function(i,e){"function"==typeof define&&define.amd?define([],e()):"object"==typeof exports?module.exports=e():i.UniversalIconPicker=e()}(this,(function(){"use strict";const i=function(i,e){let s,t={};for(s in i)Object.prototype.hasOwnProperty.call(i,s)&&(t[s]=i[s]);for(s in e)Object.prototype.hasOwnProperty.call(e,s)&&(t[s]=e[s]);return t};function e(e,s){this.selector=e;let t={allowEmpty:!0,iconLibraries:null,iconLibrariesCss:null,mode:"autoload",parentElement:"body",onBeforeOpen:null,onReset:null,onSelect:null,resetSelector:null,language:navigator.language||navigator.userLanguage,loadCustomCss:!1};this.options=i(t,s),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=[];let n=this.options.language.toLowerCase().split("-")[0].split("_")[0];this.messages=n in i18nMessages?i18nMessages[n]:i18nMessages.en,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">'+this.messages.icon_picker+'</span></div><div class="uip-modal--header-close-btn"><img src="'+(s.closeUrl||iconPickerUrl+"/images/xmark-solid.svg")+'" width="20" height="16" alt="'+this.messages.close_label+'" title="'+this.messages.close_label+'" /></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="'+this.messages.search_placeholder+'"><img src="'+(s.searchUrl||iconPickerUrl+"/images/magnifying-glass-solid.svg")+'" width="20" height="16" alt="'+this.messages.search_label+'" title="'+this.messages.search_label+'" /></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 type="button" class="uip-insert-icon-button">'+this.messages.insert_label+"</button></div></div></div>",this.universalDomEle=function(i){const e=document.createElement("div");return e.innerHTML=i,e.firstChild}(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 e.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.querySelector(this.options.parentElement).appendChild(this.universalDomEle),this.universalDomEle.querySelector(".uip-modal--header-close-btn").addEventListener("click",(()=>{this.universalDomEle.classList.add("uip-close"),this.universalDomEle.classList.remove("uip-open")})),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=function(i){const e={"&":"&amp;","<":"&lt;",">":"&gt;",'"':"&quot;","'":"&#039;"};return i.replace(/[&<>"']/g,(function(i){return e[i]}))}(e),s.iconClass=i.querySelector("i").classList.value,s.iconText=i.querySelector("i").innerText),this.options.onSelect(s)}this.universalDomEle.classList.add("uip-close"),this.universalDomEle.classList.remove("uip-open")}))),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(e){this.options=i(this.options,e),e.iconLibrariesCss&&this._loadCssFiles(),e.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 s="",t=e["icon-style"],n=e.prefix;return this.options.allowEmpty&&(s+='<div class="uip-icon-item" data-library-id="'+t+'" data-filter="" data-library-name="'+i+'"><div class="uip-icon-item-inner"><i class="'+n+' uip-icon-none">&nbsp;</i><div class="uip-icon-item-name" title="None">None</div></div></div>'),n.match(/^material-icons/)?e.icons.forEach((function(e){s+='<div class="uip-icon-item" data-library-id="'+t+'" data-filter="'+e+'" data-library-name="'+i+'"><div class="uip-icon-item-inner"><i class="'+n+'">'+e+'</i><div class="uip-icon-item-name" title="'+e+'">'+e.replace("-"," ")+"</div></div></div>"})):e.icons.forEach((function(e){s+='<div class="uip-icon-item" data-library-id="'+t+'" data-filter="'+e+'" data-library-name="'+i+'"><div class="uip-icon-item-inner"><i class="'+[n,e].join("")+'"></i><div class="uip-icon-item-name" title="'+e+'">'+e.replace("-"," ")+"</div></div></div>"})),s},_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+"stylesheets/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 s=iconPickerUrl+"stylesheets/"+e;e.match(/^http|^\/\//)&&(s=e),i=document.createElement("link"),i.rel="stylesheet",i.type="text/css",i.href=s,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:this.messages.all_icons,"list-icon":"","library-id":"all",prefix:""});let e,s=this.options.iconLibraries[i];s.includes("/")?(e=/[^/]*$/.exec(s)[0],e=/^[^.]*/.exec(e)[0]):(s=iconPickerUrl+"icons-libraries/"+s,e=s.substring(s.lastIndexOf("/")+1)),await fetch(s).then((i=>i.json())).then((s=>{let t={};return t[e.replace(/-([a-z])/g,(function(i){return i[1].toUpperCase()})).replace(/\.[a-z.]+$/,"")]=s,Object.assign(this.iconLibraries,t),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",function(i,e,s){let t;return function(){const n=this,r=arguments,a=s&&!t;clearTimeout(t),t=setTimeout((function(){t=null,s||i.apply(n,r)}),e),a&&i.apply(n,r)}}(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){const e=i.target.value.toLowerCase();this._searchFilterFunc(e,"filter")},_searchFilterFunc:function(i,e){this.filterIcon=Object.entries(this.iconWrap).filter((s=>-1!==s[1].dataset[e].indexOf(i)&&("all"===this.activeLibraryId||s[1].dataset.libraryId===this.activeLibraryId))),this._iconItemPush(this.filterIcon)},_setIconAndSidebarList:function(){for(const[i,e]of Object.entries(this.iconLibraries))this._setSideBarList(e.verboseName||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 s;void 0!==e.icons?(s={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(s)):Object.entries(e).forEach((e=>{s={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(s)}))},_sideBarListMarkup:function(i){let e="";return i.forEach((i=>{let s="";if(i["library-id"]===this.activeLibraryId&&(s=" universal-active"),"all"!==i["library-id"]){let t='<i class="'+i["list-icon"]+'"></i>';i.prefix.match(/^material-icons/)&&(t='<i class="'+i.prefix+'">'+i["list-icon"]+"</i>"),e+='<div class="uip-modal--sidebar-tab-item'+s+'" data-library-id="'+i["library-id"]+'">'+t+i.title+"</div>"}else e+='<div class="uip-modal--sidebar-tab-item'+s+'" data-library-id="'+i["library-id"]+'"><img src="'+(this.options.starUrl||iconPickerUrl+"/images/star-of-life-solid.svg")+'" width="13.125px" height="auto" alt="'+this.messages.all_label+'" title="'+this.messages.all_label+'" />'+i.title+"</div>"})),e}},e}));
//# sourceMappingURL=universal-icon-picker.min.js.map