https://www.onegreenplanet.org/wp-content/plugins/jetpack/modules/…/tiled-gallery.js?ver=16.3-a.7

1( function () {
2	function TiledGalleryCollection() {
3		this.galleries = [];
4		this.findAndSetupNewGalleries();
5	}
6
7	TiledGalleryCollection.prototype.findAndSetupNewGalleries = function () {
8		var self = this;
9		var unresizedGalleries = document.querySelectorAll( '.tiled-gallery.tiled-gallery-unresized' );
10
11		Array.prototype.forEach.call( unresizedGalleries, function ( el ) {
12			self.galleries.push( new TiledGallery( el ) );
13		} );
14	};
15
16	TiledGalleryCollection.prototype.resizeAll = function () {
17		Array.prototype.forEach.call( this.galleries, function ( gallery ) {
18			gallery.resize();
19		} );
20	};
21
22	function TiledGallery( galleryElem ) {
23		this.gallery = galleryElem;
24
25		this.addCaptionEvents();
26
27		// Resize when initialized to fit the gallery to window dimensions
28		this.resize();
29
30		// Displays the gallery and prevents it from being initialized again
31		this.gallery.classList.remove( 'tiled-gallery-unresized' );
32	}
33
34	/**
35	 * Selector for all resizeable elements inside a Tiled Gallery
36	 */
37
38	TiledGallery.prototype.resizeableElementsSelector =
39		'.gallery-row, .gallery-group, .tiled-gallery-item img';
40
41	/**
42	 * Story
43	 */
44
45	TiledGallery.prototype.addCaptionEvents = function () {
46		// Hide captions
47		var galleryCaptions = this.gallery.querySelectorAll( '.tiled-gallery-caption' );
48		Array.prototype.forEach.call( galleryCaptions, function ( el ) {
49			el.style.display = 'none';
50		} );
51
52		var mouseHoverHandler = function ( e ) {
53			var itemEl = e.target.closest( '.tiled-gallery-item' );
54			var displayValue = 'mouseover' === e.type ? 'block' : 'none';
55
56			if ( itemEl ) {
57				var itemCaption = itemEl.querySelector( '.tiled-gallery-caption' );
58				if ( itemCaption ) {
59					itemCaption.style.display = displayValue;
60				}
61			}
62		};
63
64		// Add hover effects to bring the caption up and down for each item
65		this.gallery.addEventListener( 'mouseover', mouseHoverHandler );
66		this.gallery.addEventListener( 'mouseout', mouseHoverHandler );
67	};
68
69	TiledGallery.prototype.getExtraDimension = function ( el, attribute, mode ) {
70		if ( mode === 'horizontal' ) {
71			var left = attribute === 'border' ? 'borderLeftWidth' : attribute + 'Left';
72			var right = attribute === 'border' ? 'borderRightWidth' : attribute + 'Right';
73			return ( parseInt( el.style[ left ], 10 ) || 0 ) + ( parseInt( el.style[ right ], 10 ) || 0 );
74		} else if ( mode === 'vertical' ) {
75			var top = attribute === 'border' ? 'borderTopWidth' : attribute + 'Top';
76			var bottom = attribute === 'border' ? 'borderBottomWidth' : attribute + 'Bottom';
77			return ( parseInt( el.style[ top ], 10 ) || 0 ) + ( parseInt( el.style[ bottom ], 10 ) || 0 );
78		}
79		return 0;
80	};
81
82	TiledGallery.prototype.resize = function () {
83		// Resize everything in the gallery based on the ratio of the current content width
84		// to the original content width;
85		var originalWidth = parseInt( this.gallery.dataset.originalWidth, 10 );
86		var currentWidth = parseFloat(
87			getComputedStyle( this.gallery.parentNode, null ).width.replace( 'px', '' )
88		);
89		var resizeRatio = Math.min( 1, currentWidth / originalWidth );
90
91		var self = this;
92		var resizableElements = this.gallery.querySelectorAll( this.resizeableElementsSelector );
93		Array.prototype.forEach.call( resizableElements, function ( el ) {
94			var marginWidth = self.getExtraDimension( el, 'margin', 'horizontal' );
95			var marginHeight = self.getExtraDimension( el, 'margin', 'vertical' );
96
97			var paddingWidth = self.getExtraDimension( el, 'padding', 'horizontal' );
98			var paddingHeight = self.getExtraDimension( el, 'padding', 'vertical' );
99
100			var borderWidth = self.getExtraDimension( el, 'border', 'horizontal' );
101			var borderHeight = self.getExtraDimension( el, 'border', 'vertical' );
102
103			// Take all outer dimensions into account when resizing so that images
104			// scale with constant empty space between them
105			var outerWidth =
106				parseInt( el.dataset.originalWidth, 10 ) + paddingWidth + borderWidth + marginWidth;
107			var outerHeight =
108				parseInt( el.dataset.originalHeight, 10 ) + paddingHeight + borderHeight + marginHeight;
109
110			// Subtract margins so that images don't overflow on small browser windows
111			el.style.width = Math.floor( resizeRatio * outerWidth ) - marginWidth + 'px';
112			el.style.height = Math.floor( resizeRatio * outerHeight ) - marginHeight + 'px';
113		} );
114	};
115
116	/**
117	 * Resizing logic
118	 */
119
120	var requestAnimationFrame =
121		window.requestAnimationFrame ||
122		window.mozRequestAnimationFrame ||
123		window.webkitRequestAnimationFrame ||
124		window.msRequestAnimationFrame;
125
126	function attachResizeInAnimationFrames( tiledGalleries ) {
127		var resizing = false;

128		var resizeTimeout = null;
129
130		function handleFrame() {
131			tiledGalleries.resizeAll();
132			if ( resizing ) {
133				requestAnimationFrame( handleFrame );
134			}
135		}
136
137		window.addEventListener( 'resize', function () {
138			clearTimeout( resizeTimeout );
139
140			if ( ! resizing ) {
141				requestAnimationFrame( handleFrame );
142			}
143			resizing = true;
144			resizeTimeout = setTimeout( function () {
145				resizing = false;
146			}, 15 );
147		} );
148	}
149
150	function attachPlainResize( tiledGalleries ) {
151		window.addEventListener( 'resize', function () {
152			tiledGalleries.resizeAll();
153		} );
154	}
155
156	/**
157	 * Ready, set...
158	 */
159	function ready( fn ) {
160		if ( document.readyState !== 'loading' ) {
161			fn();
162		} else {
163			document.addEventListener( 'DOMContentLoaded', fn );
164		}
165	}
166	ready( function () {
167		var tiledGalleries = new TiledGalleryCollection();
168
169		document.body.addEventListener( 'is.post-load', function () {
170			tiledGalleries.findAndSetupNewGalleries();
171		} );
172
173		// Chrome is a unique snow flake and will start lagging on occasion
174		// It helps if we only resize on animation frames
175		//
176		// For other browsers it seems like there is no lag even if we resize every
177		// time there is an event
178		if ( window.chrome && requestAnimationFrame ) {
179			attachResizeInAnimationFrames( tiledGalleries );
180		} else {
181			attachPlainResize( tiledGalleries );
182		}
183
184		if ( 'undefined' !== typeof wp && wp.customize && wp.customize.selectiveRefresh ) {
185			wp.customize.selectiveRefresh.bind( 'partial-content-rendered', function ( placement ) {
186				if ( wp.isJetpackWidgetPlaced( placement, 'gallery' ) ) {
187					tiledGalleries.findAndSetupNewGalleries();
188				}
189			} );
190		}
191	} );
192} )();