ba-block-cli
Version:
Auto-create blocks for WordPress ACF
210 lines (184 loc) • 7.45 kB
JavaScript
/**
* Show gallery image
* @param {DOMContent} gallery
* @param {string} url
* @param {integer} width
* @param {integer} height
* @param {string} url
*/
function showGalleryImage(gallery, data) {
// Load the image gallery modal
var modal = gallery.querySelector('.gallery-modal');
if (modal) {
var img = modal.querySelector('.gallery-image'),
description = modal.querySelector('.description'),
prev = modal.querySelector('.prev'),
next = modal.querySelector('.next');
// Set attributes
img.setAttribute('src', data.url);
img.setAttribute('srcset', data.url);
img.setAttribute('alt', data.alt);
img.setAttribute('width', data.width);
img.setAttribute('height', data.height);
description.textContent = data.description;
// Set prev navigation
if (prev && data.prev) {
prev.classList.remove('inactive');
prev.setAttribute('data-selector', data.prev);
} else if (prev) {
prev.classList.add('inactive');
prev.setAttribute('data-selector', false);
}
// Set next navigation
if (next && data.next) {
next.classList.remove('inactive');
next.setAttribute('data-selector', data.next);
} else if (next) {
next.classList.add('inactive');
next.setAttribute('data-selector', false);
}
// Show the modal
modal.setAttribute('data-no', data.no);
modal.classList.add('show');
document.querySelector('body').style.overflow = 'hidden';
}
}
/**
* Add button
* @param DOMElement gallery
* @param int current
* @param integer max
*/
function addRemoveBtn(gallery, current, max) {
var more = gallery.querySelector('.js-more');
if (more) {
if (current > max) {
more.classList.remove('d-none');
} else {
more.classList.add('d-none');
}
}
return more;
}
/**
* Add images
* @param DOMContent gallery
* @param array items
* @param integer from
* @param integer to
*/
function addImages(gallery, items, from, to) {
var container = gallery.querySelector('.js-gallery');
for (let index = from; index < to; index++) {
if (items.length > index) {
const image = items[index];
if (image) {
var img = document.createElement('div');
img.setAttribute('class', 'col-xl-3 col-lg-4 col-6');
img.innerHTML = `
<div class="js-gallery-image ${image.selector}" data-data='${JSON.stringify(image)}'>
<img width="${image.width}" height="${image.height}" src="${image.smallUrl}" class="image" alt="${image.alt}" loading="lazy">
</div>
`;
container.appendChild(img);
}
}
}
}
/**
* On DOM content loaded event
*/
document.addEventListener('DOMContentLoaded', function() {
// Get galleries
var galleries = document.querySelectorAll('.gallery-section.block');
if (galleries && galleries.length) {
galleries.forEach(function (gallery) {
var items = JSON.parse(gallery.getAttribute('data-gallery'))
count = parseInt(gallery.getAttribute('data-count')),
modal = gallery.querySelector('.gallery-modal');
// Add button
var more = addRemoveBtn(gallery, items.length, count);
// Add images
addImages(gallery, items, 0, count);
// On more click event
if (more) {
more.addEventListener('click', function() {
var container = gallery.querySelector('.js-gallery'),
imgs = container.querySelectorAll('.image'),
from = imgs.length,
to = items.length;
// Add images
if (from < items.length) {
to = (from + count - 1) > items.length ? items.length : from + count
addImages(gallery, items, from, to);
}
// Remove the more button
addRemoveBtn(gallery, parseInt(items.length), to);
});
}
// On gallery image click event listener
gallery.addEventListener('click', function(evt) {
if (evt.target.classList.contains('image')) {
var parent = evt.target.parentNode;
if (parent) {
var data = JSON.parse(parent.getAttribute('data-data'));
showGalleryImage(gallery, data);
}
}
// On clode button click event listener
if (evt.target.classList.contains('gallery-modal-close')) {
document.querySelector('body').style.overflow = 'auto';
// Load the image gallery modal
var modal = gallery.querySelector('.gallery-modal');
if (modal) {
modal.classList.remove('show');
}
}
});
// On controlls button click event listener
if (modal) {
var controlls = modal.querySelectorAll('.js-control');
if (controlls && controlls.length) {
controlls.forEach(function(controll) {
controll.addEventListener('click', function(evt) {
evt.preventDefault();
var selector = this.getAttribute('data-selector');
if (selector) {
var image = gallery.querySelector(selector);
if (image) {
var data = JSON.parse(image.getAttribute('data-data'));
showGalleryImage(gallery, data);
}
}
});
});
}
}
// On key presses event listener
if (modal) {
document.onkeydown = function checkKey(evt) {
evt = evt || window.event;
var action = false;
if (evt.keyCode == '37') {
// left arrow
action = modal.querySelector('.js-control.prev')
} else if (evt.keyCode == '39') {
// right arrow
action = modal.querySelector('.js-control.next')
}
if (action) {
var selector = action.getAttribute('data-selector');
if (selector) {
var image = gallery.querySelector(selector);
if (image) {
var data = JSON.parse(image.getAttribute('data-data'));
showGalleryImage(gallery, data);
}
}
action = false;
}
}
}
});
}
});