WPCOM Misc Sync

modules/theme-tools/responsive-videos/responsive-videos.js

@@ -1,98 +1,67 @@
 ( function( $ ) {
 
-	/**
-	 * A function to help debouncing.
-	 */
-	var debounce = function( func, wait ) {
+	var resizeTimer;
 
-		var timeout, args, context, timestamp;
+	function responsiveVideos() {
 
-		return function() {
-
-			context = this;
-			args = [].slice.call( arguments, 0 );
-			timestamp = new Date();
-
-			var later = function() {
-
-				var last = ( new Date() ) - timestamp;
-
-				if ( last < wait ) {
-					timeout = setTimeout( later, wait - last );
-				} else {
-					timeout = null;
-					func.apply( context, args );
-				}
-
-			};
-
-			if ( ! timeout ) {
-				timeout = setTimeout( later, wait );
-			}
-
-		};
-
-	};
-
-	/**
-	 * A function to resize videos.
-	 */
-	function responsive_videos() {
-
 		$( '.jetpack-video-wrapper' ).find( 'embed, iframe, object' ).each( function() {
-			var video_element, video_width, video_height, video_ratio, video_wrapper, video_margin, container_width;
+			var _this, videoWidth, videoHeight, videoRatio, videoWrapper, videoMargin, containerWidth;
 
-			video_element = $( this );
-			video_margin = 0;
+			_this = $( this );
+			videoMargin = 0;
 
-			if ( video_element.parents( '.jetpack-video-wrapper' ).prev( 'p' ).css( 'text-align' ) === 'center' ) {
-				video_margin = '0 auto';
+			if ( _this.parents( '.jetpack-video-wrapper' ).prev( 'p' ).css( 'text-align' ) === 'center' ) {
+				videoMargin = '0 auto';
 			}
 
-			if ( ! video_element.attr( 'data-ratio' ) ) {
-				video_element
+			if ( ! _this.attr( 'data-ratio' ) ) {
+				_this
 					.attr( 'data-ratio', this.height / this.width )
 					.attr( 'data-width', this.width )
 					.attr( 'data-height', this.height )
 					.css( {
 						'display' : 'block',
-						'margin'  : video_margin
+						'margin'  : videoMargin
 					} );
 			}
 
-			video_width     = video_element.attr( 'data-width' );
-			video_height    = video_element.attr( 'data-height' );
-			video_ratio     = video_element.attr( 'data-ratio' );
-			video_wrapper   = video_element.parent();
-			container_width = video_wrapper.width();
+			videoWidth     = _this.attr( 'data-width' );
+			videoHeight    = _this.attr( 'data-height' );
+			videoRatio     = _this.attr( 'data-ratio' );
+			videoWrapper   = _this.parent();
+			containerWidth = videoWrapper.width();
 
-			if ( video_ratio === 'Infinity' ) {
-				video_width = '100%';
+			if ( videoRatio === 'Infinity' ) {
+				videoWidth = '100%';
 			}
 
-			video_element
+			_this
 				.removeAttr( 'height' )
 				.removeAttr( 'width' );
 
-			if ( video_width > container_width ) {
-				video_element
-					.width( container_width )
-					.height( container_width * video_ratio );
+			if ( videoWidth > containerWidth ) {
+				_this
+					.width( containerWidth )
+					.height( containerWidth * videoRatio );
 			} else {
-				video_element
-					.width( video_width )
-					.height( video_height );
+				_this
+					.width( videoWidth )
+					.height( videoHeight );
 			}
 
 		} );
 
 	}
 
-	/**
-	 * Load responsive_videos().
-	 * Trigger resize to make sure responsive_videos() is loaded after IS.
-	 */
-	$( window ).load( responsive_videos ).resize( debounce( responsive_videos, 100 ) ).trigger( 'resize' );
-	$( document ).on( 'post-load', responsive_videos );
+	$( document ).ready( function() {
+		$( window )
+			.on( 'load.jetpack', responsiveVideos )
+			.on( 'resize.jetpack', function() {
+				clearTimeout( resizeTimer );
+				resizeTimer = setTimeout( responsiveVideos, 500 );
+			} )
+			.on( 'post-load.jetpack', responsiveVideos )
+			.resize();
+	} );
 
 } )( jQuery );