`
- );
-
- jQuery('.acf-svg-icon-picker__popup-holder').on('close', function () {
- is_open = false;
- });
-
- var $list = $('#icons-list');
- var margin = 200; // number of px to show above and below.
- var columns = 4;
- var svgs = acfSvgIconPicker.svgs;
-
- function setListHeight() {
- var total_lines = Math.ceil(svgs.length / columns);
- $list.height(total_lines * item_height);
+ if (isOpen) {
+ return;
}
- function removeAllItems() {
- $('[data-acf-icon-index]').each(function (i, el) {
- var $el = $(el);
- recycled_items.push($el);
- $el.remove();
- });
- }
-
- function render() {
- if (!is_open) return;
-
- var scroll_top = $('.acf-svg-icon-picker__popup').scrollTop();
- var scroll_min = scroll_top - item_height - margin;
- var scroll_max = scroll_top + $('.acf-svg-icon-picker__popup').height() + margin;
- // Get the index of the first and last element from array we will show.
- var index_min = Math.ceil(scroll_min / item_height) * columns;
- var index_max = Math.ceil(scroll_max / item_height) * columns;
-
- // remove unneeded items and add them to recycled items.
- $('[data-acf-icon-index]').each(function (i, el) {
- var $el = $(el);
- var index = $el.attr('data-acf-icon-index');
- var name = $el.attr('data-svg');
- // Check if we have the element in the resulting array.
- var elementExist = function () {
- return svgs.find(function (svg) {
- return svg.name === name;
- });
- }
-
- if (index < index_min || index > index_max || !elementExist()) {
- recycled_items.push($el);
- $el.remove();
- }
- });
-
- for (var i = index_min; i < index_max; i++) {
- if (i < 0 || i >= svgs.length) continue;
- var svg = svgs[i];
- // Calculate the position of the item.
- var y = Math.floor(i / columns) * item_height;
- var x = i % columns * item_width;
-
- // If we already have the element visible we can continue
- var $el = $(`[data-acf-icon-index="${i}"][data-svg="${svg.name}"]`);
- // If item already exist we can skip.
- if ($el.length) continue;
-
- if (recycled_items.length) {
- // If there are recycled items reuse one.
- $el = recycled_items.pop();
- }
- else {
- // Or create a new element.
- $el = $(`
-
-
-
-
-
`);
- }
-
- // We use attr instead of data since we want to use css selector.
- $el.attr({
- 'data-svg': svg.name,
- 'data-acf-icon-index': i
- }).css({
- transform: `translate(${x}px, ${y}px)`
- });
- const filename = svg['name'].split('.');
- const name = filename[0].replace(/[-_]/g, ' ');
- $el.find('.icons-list__name').text(name);
- $el.find('img').attr('src', `${acfSvgIconPicker.path}${svg['icon']}`);
- $list.append($el);
- }
-
- requestAnimationFrame(render);
- }
- if (svgs.length) {
- setListHeight();
- render();
- }
-
- const iconsFilter = document.querySelector('#filterIcons');
+ renderPopup();
- function filterIcons(wordToMatch) {
- const normalizedWord = wordToMatch.normalize("NFD").replace(/[\u0300-\u036f]/g, "").toLowerCase();
- return acfSvgIconPicker.svgs.filter(icon => {
- var name = icon.name.replace(/[-_]/g, ' ').normalize("NFD").replace(/[\u0300-\u036f]/g, "").toLowerCase();
- const regex = new RegExp(normalizedWord, 'gi');
- return name.match(regex);
- });
+ if (acfSvgIconPicker.svgs.length > 0) {
+ renderIconsList();
}
- function displayResults() {
- svgs = filterIcons($(this).val());
- removeAllItems();
- setListHeight();
- }
-
- function debounce(func, wait) {
- var timeout;
- return function (...args) {
- clearTimeout(timeout);
- timeout = setTimeout(() => func.apply(this, args), wait);
- };
- }
-
- iconsFilter.focus();
-
- iconsFilter.addEventListener('keyup', debounce(displayResults, 300));
+ setupFilter();
// Closing
- jQuery('.acf-svg-icon-picker__popup__close').on('click', function (e) {
- e.stopPropagation();
- is_open = false;
- jQuery('.acf-svg-icon-picker__popup-holder').remove();
- });
+ document
+ .querySelector('.acf-svg-icon-picker__popup-close')
+ .addEventListener('click', function (e) {
+ document.querySelector('.acf-svg-icon-picker__popup-overlay').remove();
+ isOpen = false;
+ });
});
// show the remove button if there is an icon selected
- const $input = $el.find('input')
+ const $input = $el.find('input');
if ($input.length && $input.val().length != 0) {
- $el
- .find('.acf-svg-icon-picker__remove')
- .addClass('acf-svg-icon-picker__remove--active');
+ $el.find('.acf-svg-icon-picker__remove').addClass('acf-svg-icon-picker__remove--active');
}
$el.find('.acf-svg-icon-picker__remove').on('click', function (e) {
e.preventDefault();
- var parent = $(this).parents('.acf-svg-icon-picker');
+ const parent = $(this).parents('.acf-svg-icon-picker');
parent.find('input').val('');
- parent
- .find('.acf-svg-icon-picker__svg')
- .html('+');
+ parent.find('.acf-svg-icon-picker__icon').html('+');
- jQuery('.acf-svg-icon-picker__img input').trigger('change');
+ jQuery('.acf-svg-icon-picker__selector input').trigger('change');
parent
.find('.acf-svg-icon-picker__remove')
@@ -209,6 +48,60 @@
});
}
+ function renderIconsList(svgs = acfSvgIconPicker.svgs) {
+ let popupContents = '';
+
+ if (acfSvgIconPicker.svgs.length === 0) {
+ popupContents = `