/home/preegmxb/gymnyou.com/wp-content/plugins/canvas/components/posts/block-posts/block.jsx
/**
* External dependencies
*/
import classnames from 'classnames';
import Colcade from 'colcade';
const {
addAction,
} = wp.hooks;
/**
* Prepare Masonry layout with Colcade script.
*/
function maybePrepareMasonryLayout(element) {
element.className = classnames(
element.className,
'cnvs-block-posts-layout-masonry-colcade-ready'
);
element.colcadeObj = new Colcade(element, {
columns: '.cnvs-block-post-grid-col',
items: '.cnvs-block-post-grid-item'
});
}
/**
* Destroy Masonry layout with Colcade script.
*/
function maybeDestroyMasonryLayout(element) {
if (element.colcadeObj) {
element.colcadeObj.destroy();
element.colcadeObj = null;
}
}
function getMasonryBlockId(props) {
if ('canvas/posts' !== props.block) {
return false;
}
if ('masonry' !== props.attributes.layout) {
return false;
}
const clientId = props.blockProps.clientId;
if (!clientId) {
return false;
}
return clientId;
}
addAction('canvas.components.serverSideRender.onChange', 'canvas/posts.masonry.init', function (props) {
const clientId = getMasonryBlockId(props);
if (!clientId) {
return;
}
const element = document.querySelector(`[data-block="${clientId}"] .cnvs-block-posts-layout-masonry:not(.cnvs-block-posts-layout-masonry-colcade-ready)`);
if (element) {
maybePrepareMasonryLayout(element);
}
});
addAction('canvas.components.serverSideRender.onBeforeChange', 'canvas-posts.masonry.destroy', function (props) {
const clientId = getMasonryBlockId(props);
if (!clientId) {
return;
}
const element = document.querySelector(`[data-block="${clientId}"] .cnvs-block-posts-layout-masonry-colcade-ready`);
if (element) {
maybeDestroyMasonryLayout(element);
}
});