https://www.themes.redradar.net/wp-content/plugins/jetpack/modules…/tiled-gallery/tiled-gallery.js

1/* jshint onevar:false, smarttabs:true */
2
3( function($) {
4
5	function TiledGalleryCollection() {
6		this.galleries = [];
7		this.findAndSetupNewGalleries();
8	}
9
10	TiledGalleryCollection.prototype.findAndSetupNewGalleries = function() {
11		var self = this;
12		$( '.tiled-gallery.tiled-gallery-unresized' ).each( function() {
13			self.galleries.push( new TiledGallery( $( this ) ) );
14		} );
15	};
16
17	TiledGalleryCollection.prototype.resizeAll = function() {
18		$.each(this.galleries, function(i, gallery) {
19			gallery.resize();
20		} );
21	};
22
23	function TiledGallery( galleryElem ) {
24		this.gallery = galleryElem;
25
26		this.addCaptionEvents();
27
28		// Resize when initialized to fit the gallery to window dimensions
29		this.resize();
30
31		// Displays the gallery and prevents it from being initialized again
32		this.gallery.removeClass( 'tiled-gallery-unresized' );
33	}
34
35	/**
36	 * Selector for all resizeable elements inside a Tiled Gallery
37	 */
38
39	TiledGallery.prototype.resizeableElementsSelector = '.gallery-row, .gallery-group, .tiled-gallery-item img';
40
41	/**
42	 * Story
43	 */
44
45	TiledGallery.prototype.addCaptionEvents = function() {
46		// Hide captions
47		this.gallery.find( '.tiled-gallery-caption' ).hide();
48
49		// Add hover effects to bring the caption up and down for each item
50		this.gallery.find( '.tiled-gallery-item' ).hover(
51			function() { $( this ).find( '.tiled-gallery-caption' ).stop(true, true).slideDown( 'fast' ); },
52			function() { $( this ).find( '.tiled-gallery-caption' ).stop(true, true).slideUp( 'fast' ); }
53		);
54	};
55
56	TiledGallery.prototype.getExtraDimension = function( el, attribute, mode ) {
57		if ( mode === 'horizontal' ) {
58			var left = ( attribute === 'border' ) ? 'borderLeftWidth' : attribute + 'Left';
59			var right = ( attribute === 'border' ) ? 'borderRightWidth' : attribute + 'Right';
60			return ( parseInt( el.css( left ), 10 ) || 0 ) +  ( parseInt( el.css( right ), 10 ) || 0 );
61		} else if ( mode === 'vertical' ) {
62			var top = ( attribute === 'border' ) ? 'borderTopWidth' : attribute + 'Top';
63			var bottom = ( attribute === 'border' ) ? 'borderBottomWidth' : attribute + 'Bottom';
64			return ( parseInt( el.css( top ), 10 ) || 0 ) + ( parseInt( el.css( bottom ), 10 ) || 0 );
65		} else {
66			return 0;
67		}
68	};
69
70	TiledGallery.prototype.resize = function() {
71		// Resize everything in the gallery based on the ratio of the current content width
72		// to the original content width;
73		var originalWidth = this.gallery.data( 'original-width' );
74		var currentWidth = this.gallery.parent().width();
75		var resizeRatio = Math.min( 1, currentWidth / originalWidth );
76
77		var self = this;
78		this.gallery.find( this.resizeableElementsSelector ).each( function () {
79			var thisGalleryElement = $( this );
80
81			var marginWidth = self.getExtraDimension( thisGalleryElement, 'margin', 'horizontal' );
82			var marginHeight = self.getExtraDimension( thisGalleryElement, 'margin', 'vertical' );
83
84			var paddingWidth = self.getExtraDimension( thisGalleryElement, 'padding', 'horizontal' );
85			var paddingHeight = self.getExtraDimension( thisGalleryElement, 'padding', 'vertical' );
86
87			var borderWidth = self.getExtraDimension( thisGalleryElement, 'border', 'horizontal' );
88			var borderHeight = self.getExtraDimension( thisGalleryElement, 'border', 'vertical' );
89
90			// Take all outer dimensions into account when resizing so that images
91			// scale with constant empty space between them
92			var outerWidth = thisGalleryElement.data( 'original-width' ) + paddingWidth + borderWidth + marginWidth;
93			var outerHeight = thisGalleryElement.data( 'original-height' ) + paddingHeight + borderHeight + marginHeight;
94
95			// Subtract margins so that images don't overflow on small browser windows
96			thisGalleryElement
97				.width( Math.floor( resizeRatio * outerWidth ) - marginWidth )
98				.height( Math.floor( resizeRatio * outerHeight ) - marginHeight );
99		} );
100	};
101
102	/**
103	 * Resizing logic
104	 */
105
106	var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
107
108	function attachResizeInAnimationFrames( tiledGalleries ) {
109		var resizing = false;

110		var resizeTimeout = null;
111
112		function handleFrame() {
113			tiledGalleries.resizeAll();
114			if ( resizing ) {
115				requestAnimationFrame( handleFrame );
116			}
117		}
118
119		$( window ).resize( function() {
120			clearTimeout( resizeTimeout );
121
122			if ( ! resizing ) {
123				requestAnimationFrame( handleFrame );
124			}
125			resizing = true;
126			resizeTimeout = setTimeout( function() {
127				resizing = false;
128			}, 15 );
129		} );
130	}
131
132	function attachPlainResize( tiledGalleries ) {
133		$( window ).resize( function() {
134			tiledGalleries.resizeAll();
135		} );
136	}
137
138	/**
139	 * Ready, set...
140	 */
141
142	$( document ).ready( function() {
143		var tiledGalleries = new TiledGalleryCollection();
144
145		$( 'body' ).on( 'post-load', function() {
146			tiledGalleries.findAndSetupNewGalleries();
147		} );
148		$( document ).on( 'page-rendered.wpcom-newdash', function() {
149			tiledGalleries.findAndSetupNewGalleries();
150		} );
151
152		// Chrome is a unique snow flake and will start lagging on occasion
153		// It helps if we only resize on animation frames
154		//
155		// For other browsers it seems like there is no lag even if we resize every
156		// time there is an event
157		if ( window.chrome && requestAnimationFrame ) {
158			attachResizeInAnimationFrames( tiledGalleries );
159		} else {
160			attachPlainResize( tiledGalleries );
161		}
162	});
163
164})(jQuery);