wp_back/wp-content/plugins/visual-portfolio/assets/js/pagination-minimal-paged.js
2024-05-20 15:37:46 +03:00

47 lines
1.2 KiB
JavaScript

import $ from 'jquery';
const { ResizeObserver } = window;
function setImgWidth($el) {
if ($el && $el.height > 1) {
$el.style.width = `${$el.height}px`;
}
}
// We need to use resize observer because for some reason in the Preview
// and on some mobile devices image height is 1px.
const resizeObserver = new ResizeObserver((entries) => {
entries.forEach(({ target }) => {
if (target) {
setImgWidth(target);
}
});
});
// Init minimal paged pagination.
$(document).on('init.vpf loadedNewItems.vpf', (event, self) => {
if (
event.namespace !== 'vpf' ||
self.options.pagination !== 'paged' ||
!self.$pagination.children('.vp-pagination__style-minimal').length
) {
return;
}
// Hack used in Paged active item to make circle using hidden <img>.
// See styles for <img> tag in /templates/pagination/style.scss
const $activeItem = self.$pagination.find('.vp-pagination__item-active');
let $img = $activeItem.find('img');
if (!$img.length) {
$img = $(
'<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" alt="">'
);
resizeObserver.observe($img[0]);
$activeItem.prepend($img);
setImgWidth($img[0]);
}
});