£Á°èZ¨Ä…–K§‚«“ô4“ÒÙ´dîfUÙÃÅ WKbyʦ•êŽ…È®FÒ¿ÊÎóCozá¬S@6{Í:›œêZÌ:Š•_%:¢¾¾~;‘Ã~芩ÊǍí`ÔÑ©ú뙵'5I¿fš×WO%ø9¾«¾DK|€ùÍD”Ýs]nHÕ¶êםӼ㞪éUWŸÈË%DÒÕ¬ï‘]/Åcx ‰ï2ß]ä6G[]S£Ôϯrs{úëóµmÒï#UQxo·õÞCe]"±/aÙ&Eã4ú9Jé_ÞåëdãöKë)AÞ ¯¹ægƒÛowЍø^d™ý½ßB7áyMä9ÜÖUã !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! import { LabelControl } from './label'; import { useState } from '@wordpress/element'; var pagelayer_icons = {}; export const IconControl = (props) => { const { prop, value, setAttributes } = props; const { name } = prop['c']; const [curIconSet, setCurIconSet] = useState(pagelayer_loaded_icons[0]); const [showIconsList, setShowIconsList] = useState(false); const [searchText, setSearchText] = useState(''); const [activeTabs, setActiveTabs] = useState({ fas: true, far: false, fab: false, }); var sel_name = value; // Handle the icon name if(sel_name){ var icon_name = sel_name.split(' fa-'); sel_name = icon_name[1]; } const handleIconSetChange = (event) => { setCurIconSet(event.target.value); }; const handleTabClick = (tab) => { setActiveTabs((prevTabs) => ({ ...prevTabs, [tab]: !prevTabs[tab], })); }; const handleSearchInputChange = (event) => { setSearchText(event.target.value); }; const handleIconClick = (event) => { setAttributes({ [name]: event.currentTarget.children[0].getAttribute('class')}); }; const handleIconClose = () => { setAttributes({ [name] : ''}); }; const iconHtml = (name, cat) => ( {name} ); var allowed_icons = {}; // Is there a specific list if( 'list' in prop && prop.list.length > 0){ for(var i in pagelayer_icons){ allowed_icons[i] = {}; for(var j in pagelayer_icons[i]){ allowed_icons[i][j] = {}; var list_icons = []; prop.list.forEach(function(item){ if(pagelayer_icons[i][j]['icons'].includes(item)){ list_icons.push(item); } }); allowed_icons[i][j]['icons'] = list_icons; allowed_icons[i][j]['pre'] = j; } } }else{ allowed_icons = pagelayer_icons; } return (
{setShowIconsList(!showIconsList)}}>
{value ? sel_name : 'Choose icon'}
setShowIconsList(!showIconsList)} >▼ × 
{ showIconsList && (
{pagelayer_loaded_icons.length > 1 && ( )}

handleTabClick('fas')} className={activeTabs.fas ? 'active' : ''} > {'Solid'}

handleTabClick('far')} className={activeTabs.far ? 'active' : ''} > {'Regular'}

handleTabClick('fab')} className={activeTabs.fab ? 'active' : ''} > {'Brand'}

{Object.keys(allowed_icons[curIconSet]).map((y) => { if(!(y in activeTabs) || pagelayer_empty(activeTabs[y])){ return; } return allowed_icons[curIconSet][y]['icons'] .filter((item) => item.includes(searchText.toLowerCase()) || searchText.length < 1) .map((z) => iconHtml(z, y)); })}
)}
); } // Function to fetch and store data function pagelayer_get_stored_data(url, version){ const name = 'pagelayer_' + url; let data = {}; let force = false; // Try to parse the data try { data = JSON.parse(localStorage.getItem(name)); if (data['version'] !== version) { force = true; } } catch (e) { force = true; } // Force download if (force) { jQuery.ajax({ url: url, type: 'GET', dataType: 'text', success: function (newData) { data = { version: version, val: newData, }; localStorage.setItem(name, JSON.stringify(data)); }, }); } return data['val']; } // Load Fonts wp.domReady(function () { pagelayer_loaded_icons.forEach((item) => { jQuery.when( pagelayer_get_stored_data(pagelayer_url + '/fonts/' + item + '.json', pagelayer_ver)) .then(() => { pagelayer_icons[item] = JSON.parse(pagelayer_get_stored_data( pagelayer_url + '/fonts/' + item + '.json', pagelayer_ver) ); }); }); });