prototype pattern

assets/js/frontend/single-product.js

@@ -1,13 +1,13 @@
 /*global wc_single_product_params, PhotoSwipe, PhotoSwipeUI_Default */
 jQuery( function( $ ) {
 
-	// wc_single_product_params is required to continue, ensure the object exists
+	// wc_single_product_params is required to continue.
 	if ( typeof wc_single_product_params === 'undefined' ) {
 		return false;
 	}
 
-	// Tabs
 	$( 'body' )
+		// Tabs
 		.on( 'init', '.wc-tabs-wrapper, .woocommerce-tabs', function() {
 			$( '.wc-tab, .woocommerce-tabs .panel:not(.panel .panel)' ).hide();
 
@@ -73,15 +73,12 @@ jQuery( function( $ ) {
 	/**
 	 * Product gallery class.
 	 */
-	var Product_Gallery = function( $el, args ) {
+	var ProductGallery = function( $target, args ) {
-
+		this.$target = $target;
-		var gallery = this;
+		this.$images = $( '.woocommerce-product-gallery__image', $target );
-
-		this.$el     = $el;
-		this.$images = $( '.woocommerce-product-gallery__image', $el );
 
 		// Make this object available.
-		$el.data( 'product_gallery', this );
+		$target.data( 'product_gallery', this );
 
 		// Pick functionality to initialize...
 		this.flexslider_enabled = $.isFunction( $.fn.flexslider ) && wc_single_product_params.flexslider_enabled;
@@ -95,29 +92,36 @@ jQuery( function( $ ) {
 			this.photoswipe_enabled = false === args.photoswipe_enabled ? false : this.photoswipe_enabled;
 		}
 
-		/**
+		// Bind functions to this.
-		 * Initialize gallery actions and events.
+		this.initFlexslider       = this.initFlexslider.bind( this );
-		 */
+		this.initZoom             = this.initZoom.bind( this );
-		this.init = function() {
+		this.initPhotoswipe       = this.initPhotoswipe.bind( this );
+		this.onResetSlidePosition = this.onResetSlidePosition.bind( this );
+		this.getGalleryItems      = this.getGalleryItems.bind( this );
+		this.openPhotoswipe       = this.openPhotoswipe.bind( this );
 
-			this.init_flexslider();
+		if ( this.flexslider_enabled ) {
-			this.init_zoom();
+			this.initFlexslider();
-			this.init_photoswipe();
+			$target.on( 'woocommerce_gallery_reset_slide_position', this.onResetSlidePosition );
+		}
 
-			$el.on( 'woocommerce_gallery_init_zoom', this.init_zoom );
+		if ( this.zoom_enabled ) {
-			$el.on( 'woocommerce_gallery_reset_slide_position', this.reset_slide_position );
+			this.initZoom();
+			$target.on( 'woocommerce_gallery_init_zoom', this.initZoom );
+		}
+
+		if ( this.photoswipe_enabled ) {
+			this.initPhotoswipe();
+		}
 	};
 
 	/**
 	 * Initialize flexSlider.
 	 */
-		this.init_flexslider = function() {
+	ProductGallery.prototype.initFlexslider = function() {
+		var images = this.$images;
 
-			if ( ! this.flexslider_enabled ) {
+		this.$target.flexslider( {
-				return;
-			}
-
-			$el.flexslider( {
 			selector:       '.woocommerce-product-gallery__wrapper > .woocommerce-product-gallery__image',
 			animation:      wc_single_product_params.flexslider.animation,
 			smoothHeight:   wc_single_product_params.flexslider.smoothHeight,
@@ -127,10 +131,9 @@ jQuery( function( $ ) {
 			animationSpeed: wc_single_product_params.flexslider.animationSpeed,
 			animationLoop:  wc_single_product_params.flexslider.animationLoop, // Breaks photoswipe pagination if true.
 			start: function() {
-
 				var largest_height = 0;
 
-					gallery.$images.each( function() {
+				images.each( function() {
 					var height = $( this ).height();
 
 					if ( height > largest_height ) {
@@ -138,62 +141,65 @@ jQuery( function( $ ) {
 					}
 				} );
 
-					gallery.$images.each( function() {
+				images.each( function() {
 					$( this ).css( 'min-height', largest_height );
 				} );
 			}
 		} );
-
 	};
 
 	/**
 	 * Init zoom.
 	 */
-		this.init_zoom = function() {
+	ProductGallery.prototype.initZoom = function() {
+		var zoomTarget   = this.$images,
+			galleryWidth = this.$target.width(),
+			zoomEnabled  = false;
 
-			if ( ! gallery.zoom_enabled ) {
+		if ( ! this.flexslider_enabled ) {
-				return;
+			zoomTarget = zoomTarget.first();
 		}
 
-			var zoom_target = gallery.$images,
+		$( zoomTarget ).each( function( index, target ) {
-				enable_zoom = false;
-
-			if ( ! gallery.flexslider_enabled ) {
-				zoom_target = zoom_target.first();
-			}
-
-			$( zoom_target ).each( function( index, target ) {
 			var image = $( target ).find( 'img' );
 
-				if ( image.attr( 'width' ) > $el.width() ) {
+			if ( image.attr( 'width' ) > galleryWidth ) {
-					enable_zoom = true;
+				zoomEnabled = true;
 				return false;
 			}
 		} );
 
 		// But only zoom if the img is larger than its container.
-			if ( enable_zoom ) {
+		if ( zoomEnabled ) {
-				zoom_target.trigger( 'zoom.destroy' );
+			zoomTarget.trigger( 'zoom.destroy' );
-				zoom_target.zoom( {
+			zoomTarget.zoom( {
 				touch: false
 			} );
 		}
 	};
 
-		this.reset_slide_position = function() {
+	/**
-
+	 * Init PhotoSwipe.
-			if ( ! gallery.flexslider_enabled ) {
+	 */
-				return;
+	ProductGallery.prototype.initPhotoswipe = function() {
+		if ( this.zoom_enabled && this.$images.length > 0 ) {
+			this.$target.prepend( '<a href="#" class="woocommerce-product-gallery__trigger">🔍</a>' );
+			this.$target.on( 'click', '.woocommerce-product-gallery__trigger', this.openPhotoswipe );
 		}
+		this.$target.on( 'click', '.woocommerce-product-gallery__image a', this.openPhotoswipe );
+	};
 
-			$el.flexslider( 0 );
+	/**
+	 * Reset slide position to 0.
+	 */
+	ProductGallery.prototype.onResetSlidePosition = function() {
+		this.$target.flexslider( 0 );
 	};
 
 	/**
 	 * Get product gallery image items.
 	 */
-		this.get_gallery_items = function() {
+	ProductGallery.prototype.getGalleryItems = function() {
-
 		var $slides = this.$images,
 			items   = [];
 
@@ -217,42 +223,20 @@ jQuery( function( $ ) {
 	};
 
 	/**
-		 * Init PhotoSwipe.
+	 * Open photoswipe modal.
 	 */
-		this.init_photoswipe = function() {
+	ProductGallery.prototype.openPhotoswipe = function( e ) {
-
-			if ( ! this.photoswipe_enabled ) {
-				return;
-			}
-
-			if ( this.zoom_enabled && this.$images.length > 0 ) {
-				$el.prepend( '<a href="#" class="woocommerce-product-gallery__trigger">🔍</a>' );
-				$el.on( 'click', '.woocommerce-product-gallery__trigger', this.trigger_photoswipe );
-			}
-
-			$el.on( 'click', '.woocommerce-product-gallery__image a', this.trigger_photoswipe );
-		};
-
-		/**
-		 * Initialise photoswipe.
-		 */
-		this.trigger_photoswipe = function( e ) {
-
-			if ( ! gallery.photoswipe_enabled ) {
-				return;
-			}
-
 		e.preventDefault();
 
 		var pswpElement = $( '.pswp' )[0],
-				items  = gallery.get_gallery_items(),
+			items       = this.getGalleryItems(),
-				target = $( e.target ),
+			eventTarget = $( e.target ),
 			clicked;
 
-			if ( ! target.is( '.woocommerce-product-gallery__trigger' ) ) {
+		if ( ! eventTarget.is( '.woocommerce-product-gallery__trigger' ) ) {
-				clicked = e.target.closest( '.woocommerce-product-gallery__image' );
+			clicked = eventTarget.closest( '.woocommerce-product-gallery__image' );
 		} else {
-				clicked = gallery.$el.find( '.flex-active-slide' );
+			clicked = this.$target.find( '.flex-active-slide' );
 		}
 
 		var options = {
@@ -269,22 +253,16 @@ jQuery( function( $ ) {
 		photoswipe.init();
 	};
 
-		this.init();
-	};
-
 	/**
 	 * Function to call wc_product_gallery on jquery selector.
 	 */
 	$.fn.wc_product_gallery = function( args ) {
-		new Product_Gallery( this, args );
+		new ProductGallery( this, args );
 		return this;
 	};
 
 	/*
 	 * Initialize all galleries on page.
 	 */
-	$( '.woocommerce-product-gallery' ).each( function() {
+	$( '.woocommerce-product-gallery' ).wc_product_gallery();
-		$( this ).wc_product_gallery();
-	} );
-
 } );