prototype pattern
This commit is contained in:
Mike Jolley
parent
161b6a132b
commit
a6436eb915
|
|
@ -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 gallery = this;
|
||||
|
||||
this.$el = $el;
|
||||
this.$images = $( '.woocommerce-product-gallery__image', $el );
|
||||
var ProductGallery = function( $target, args ) {
|
||||
this.$target = $target;
|
||||
this.$images = $( '.woocommerce-product-gallery__image', $target );
|
||||
|
||||
// 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;
|
||||
}
|
||||
|
||||
/**
|
||||
* Initialize gallery actions and events.
|
||||
*/
|
||||
this.init = function() {
|
||||
// Bind functions to this.
|
||||
this.initFlexslider = this.initFlexslider.bind( this );
|
||||
this.initZoom = this.initZoom.bind( this );
|
||||
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();
|
||||
this.init_zoom();
|
||||
this.init_photoswipe();
|
||||
if ( this.flexslider_enabled ) {
|
||||
this.initFlexslider();
|
||||
$target.on( 'woocommerce_gallery_reset_slide_position', this.onResetSlidePosition );
|
||||
}
|
||||
|
||||
$el.on( 'woocommerce_gallery_init_zoom', this.init_zoom );
|
||||
$el.on( 'woocommerce_gallery_reset_slide_position', this.reset_slide_position );
|
||||
if ( this.zoom_enabled ) {
|
||||
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 ) {
|
||||
return;
|
||||
}
|
||||
|
||||
$el.flexslider( {
|
||||
this.$target.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 ) {
|
||||
return;
|
||||
if ( ! this.flexslider_enabled ) {
|
||||
zoomTarget = zoomTarget.first();
|
||||
}
|
||||
|
||||
var zoom_target = gallery.$images,
|
||||
enable_zoom = false;
|
||||
|
||||
if ( ! gallery.flexslider_enabled ) {
|
||||
zoom_target = zoom_target.first();
|
||||
}
|
||||
|
||||
$( zoom_target ).each( function( index, target ) {
|
||||
$( zoomTarget ).each( function( index, target ) {
|
||||
var image = $( target ).find( 'img' );
|
||||
|
||||
if ( image.attr( 'width' ) > $el.width() ) {
|
||||
enable_zoom = true;
|
||||
if ( image.attr( 'width' ) > galleryWidth ) {
|
||||
zoomEnabled = true;
|
||||
return false;
|
||||
}
|
||||
} );
|
||||
|
||||
// But only zoom if the img is larger than its container.
|
||||
if ( enable_zoom ) {
|
||||
zoom_target.trigger( 'zoom.destroy' );
|
||||
zoom_target.zoom( {
|
||||
if ( zoomEnabled ) {
|
||||
zoomTarget.trigger( 'zoom.destroy' );
|
||||
zoomTarget.zoom( {
|
||||
touch: false
|
||||
} );
|
||||
}
|
||||
};
|
||||
|
||||
this.reset_slide_position = function() {
|
||||
|
||||
if ( ! gallery.flexslider_enabled ) {
|
||||
return;
|
||||
/**
|
||||
* Init PhotoSwipe.
|
||||
*/
|
||||
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() {
|
||||
|
||||
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;
|
||||
}
|
||||
|
||||
ProductGallery.prototype.openPhotoswipe = function( e ) {
|
||||
e.preventDefault();
|
||||
|
||||
var pswpElement = $( '.pswp' )[0],
|
||||
items = gallery.get_gallery_items(),
|
||||
target = $( e.target ),
|
||||
items = this.getGalleryItems(),
|
||||
eventTarget = $( e.target ),
|
||||
clicked;
|
||||
|
||||
if ( ! target.is( '.woocommerce-product-gallery__trigger' ) ) {
|
||||
clicked = e.target.closest( '.woocommerce-product-gallery__image' );
|
||||
if ( ! eventTarget.is( '.woocommerce-product-gallery__trigger' ) ) {
|
||||
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() {
|
||||
$( this ).wc_product_gallery();
|
||||
} );
|
||||
|
||||
$( '.woocommerce-product-gallery' ).wc_product_gallery();
|
||||
} );
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
Loading…
Reference in New Issue