CHIEFSOFT\ameye
81 lines
1.7 KiB
React
81 lines
1.7 KiB
React
/**
|
|
* 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);
|
|
}
|
|
});
|