Steve-Dee-Designs
/
woocommerce
mirror of https://github.com/woocommerce/woocommerce.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

prototype pattern

This commit is contained in:
Mike Jolley 2017-03-14 15:48:18 +00:00
parent 161b6a132b
commit a6436eb915
2 changed files with 157 additions and 179 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

156
assets/js/frontend/single-product.js
View File

@ -1,13 +1,13 @@
/*global wc_single_product_params, PhotoSwipe, PhotoSwipeUI_Default */ /*global wc_single_product_params, PhotoSwipe, PhotoSwipeUI_Default */
jQuery( function( $ ) { 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' ) { if ( typeof wc_single_product_params === 'undefined' ) {
return false; return false;
} }
// Tabs
$( 'body' ) $( 'body' )
// Tabs
.on( 'init', '.wc-tabs-wrapper, .woocommerce-tabs', function() { .on( 'init', '.wc-tabs-wrapper, .woocommerce-tabs', function() {
$( '.wc-tab, .woocommerce-tabs .panel:not(.panel .panel)' ).hide(); $( '.wc-tab, .woocommerce-tabs .panel:not(.panel .panel)' ).hide();
@ -67,21 +67,18 @@ jQuery( function( $ ) {
} }
} ); } );
//Init Tabs and Star Ratings // Init Tabs and Star Ratings
$( '.wc-tabs-wrapper, .woocommerce-tabs, #rating' ).trigger( 'init' ); $( '.wc-tabs-wrapper, .woocommerce-tabs, #rating' ).trigger( 'init' );
/** /**
* Product gallery class. * 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. // Make this object available.
$el.data( 'product_gallery', this ); $target.data( 'product_gallery', this );
// Pick functionality to initialize... // Pick functionality to initialize...
this.flexslider_enabled = $.isFunction( $.fn.flexslider ) && wc_single_product_params.flexslider_enabled; 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; 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. * 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', selector: '.woocommerce-product-gallery__wrapper > .woocommerce-product-gallery__image',
animation: wc_single_product_params.flexslider.animation, animation: wc_single_product_params.flexslider.animation,
smoothHeight: wc_single_product_params.flexslider.smoothHeight, smoothHeight: wc_single_product_params.flexslider.smoothHeight,
@ -127,10 +131,9 @@ jQuery( function( $ ) {
animationSpeed: wc_single_product_params.flexslider.animationSpeed, animationSpeed: wc_single_product_params.flexslider.animationSpeed,
animationLoop: wc_single_product_params.flexslider.animationLoop, // Breaks photoswipe pagination if true. animationLoop: wc_single_product_params.flexslider.animationLoop, // Breaks photoswipe pagination if true.
start: function() { start: function() {
var largest_height = 0; var largest_height = 0;
gallery.$images.each( function() { images.each( function() {
var height = $( this ).height(); var height = $( this ).height();
if ( height > largest_height ) { if ( height > largest_height ) {
@ -138,62 +141,65 @@ jQuery( function( $ ) {
} }
} ); } );
gallery.$images.each( function() { images.each( function() {
$( this ).css( 'min-height', largest_height ); $( this ).css( 'min-height', largest_height );
} ); } );
} }
} ); } );
}; };
/** /**
* Init zoom. * 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' ); var image = $( target ).find( 'img' );
if ( image.attr( 'width' ) > $el.width() ) { if ( image.attr( 'width' ) > galleryWidth ) {
enable_zoom = true; zoomEnabled = true;
return false; return false;
} }
} ); } );
// But only zoom if the img is larger than its container. // 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 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. * Get product gallery image items.
*/ */
this.get_gallery_items = function() { ProductGallery.prototype.getGalleryItems = function() {
var $slides = this.$images, var $slides = this.$images,
items = []; 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(); e.preventDefault();
var pswpElement = $( '.pswp' )[0], var pswpElement = $( '.pswp' )[0],
items = gallery.get_gallery_items(), items = this.getGalleryItems(),
target = $( e.target ), eventTarget = $( e.target ),
clicked; 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 { } else {
clicked = gallery.$el.find( '.flex-active-slide' ); clicked = this.$target.find( '.flex-active-slide' );
} }
var options = { var options = {
@ -269,22 +253,16 @@ jQuery( function( $ ) {
photoswipe.init(); photoswipe.init();
}; };
this.init();
};
/** /**
* Function to call wc_product_gallery on jquery selector. * Function to call wc_product_gallery on jquery selector.
*/ */
$.fn.wc_product_gallery = function( args ) { $.fn.wc_product_gallery = function( args ) {
new Product_Gallery( this, args ); new ProductGallery( this, args );
return this; return this;
}; };
/* /*
* Initialize all galleries on page. * Initialize all galleries on page.
*/ */
$( '.woocommerce-product-gallery' ).each( function() { $( '.woocommerce-product-gallery' ).wc_product_gallery();
$( this ).wc_product_gallery();
} );
} ); } );

2
assets/js/frontend/single-product.min.js vendored
View File

File diff suppressed because one or more lines are too long