blob: 1f45b13ddc34792f14537806e84b3c14f84dd2cd (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
|
/**
* Internal dependencies
*/
import './view.scss';
import ResizeObserver from 'resize-observer-polyfill';
import { handleRowResize } from './layout/mosaic/resize';
/**
* Handler for Gallery ResizeObserver
*
* @param {Array<ResizeObserverEntry>} galleries Resized galleries
*/
function handleObservedResize( galleries ) {
if ( handleObservedResize.pendingRaf ) {
cancelAnimationFrame( handleObservedResize.pendingRaf );
}
handleObservedResize.pendingRaf = requestAnimationFrame( () => {
handleObservedResize.pendingRaf = null;
for ( const gallery of galleries ) {
const { width: galleryWidth } = gallery.contentRect;
// We can't use childNodes becuase post content may contain unexpected text nodes
const rows = Array.from( gallery.target.querySelectorAll( '.tiled-gallery__row' ) );
rows.forEach( row => handleRowResize( row, galleryWidth ) );
}
} );
}
/**
* Get all the galleries on the document
*
* @return {Array} List of gallery nodes
*/
function getGalleries() {
return Array.from(
document.querySelectorAll(
'.wp-block-jetpack-tiled-gallery.is-style-rectangular > .tiled-gallery__gallery,' +
'.wp-block-jetpack-tiled-gallery.is-style-columns > .tiled-gallery__gallery'
)
);
}
/**
* Setup ResizeObserver to follow each gallery on the page
*/
const observeGalleries = () => {
const galleries = getGalleries();
if ( galleries.length === 0 ) {
return;
}
const observer = new ResizeObserver( handleObservedResize );
galleries.forEach( gallery => observer.observe( gallery ) );
};
if ( typeof window !== 'undefined' && typeof document !== 'undefined' ) {
// `DOMContentLoaded` may fire before the script has a chance to run
if ( document.readyState === 'loading' ) {
document.addEventListener( 'DOMContentLoaded', observeGalleries );
} else {
observeGalleries();
}
}
|
GitWeb
