From 1d5cd9409e8c46bcba52f32e0e99edf4576daf7b Mon Sep 17 00:00:00 2001 From: Manos Psychogyiopoulos Date: Mon, 13 Mar 2017 18:58:39 +0200 Subject: [PATCH 01/10] allow multiple galleries on page and init of dynamically loaded galleries --- assets/js/frontend/add-to-cart-variation.js | 10 +- assets/js/frontend/single-product.js | 136 ++++++++++++-------- 2 files changed, 90 insertions(+), 56 deletions(-) diff --git a/assets/js/frontend/add-to-cart-variation.js b/assets/js/frontend/add-to-cart-variation.js index 9a5a430fb07..f5cfe9ca758 100644 --- a/assets/js/frontend/add-to-cart-variation.js +++ b/assets/js/frontend/add-to-cart-variation.js @@ -10,6 +10,7 @@ this.$singleVariationWrap = $form.find( '.single_variation_wrap' ); this.$resetVariations = $form.find( '.reset_variations' ); this.$product = $form.closest( '.product' ); + this.$product_gallery = this.$product.find( '.woocommerce-product-gallery' ); this.variationData = $form.data( 'product_variations' ); this.useAjax = false === this.variationData; this.xhr = false; @@ -527,7 +528,9 @@ * Reset the slide position if the variation has a different image than the current one */ $.fn.wc_maybe_trigger_slide_position_reset = function( variation ) { - var $form = $( this ), + var $form = $( this ), + $product = $form.closest( '.product' ), + $product_gallery = $product.find( '.woocommerce-product-gallery' ), reset_slide_position = false, new_image_id = ( variation && variation.image_id ) ? variation.image_id : ''; @@ -538,7 +541,7 @@ $form.attr( 'current-image', new_image_id ); if ( reset_slide_position ) { - $( 'body' ).trigger( 'woocommerce_gallery_reset_slide_position' ); + $product_gallery.trigger( 'woocommerce_gallery_reset_slide_position' ); } }; @@ -548,6 +551,7 @@ $.fn.wc_variations_image_update = function( variation ) { var $form = this, $product = $form.closest( '.product' ), + $product_gallery = $product.find( '.woocommerce-product-gallery' ), $gallery_img = $product.find( '.flex-control-nav li:eq(0) img' ), $gallery_wrapper = $product.find( '.woocommerce-product-gallery__wrapper ' ), $product_img_wrap = $gallery_wrapper.find( '.woocommerce-product-gallery__image, .woocommerce-product-gallery__image--placeholder' ).eq( 0 ), @@ -583,7 +587,7 @@ } window.setTimeout( function() { - $( 'body' ).trigger( 'woocommerce_init_gallery' ); + $product_gallery.trigger( 'woocommerce_gallery_init_zoom' ); $form.wc_maybe_trigger_slide_position_reset( variation ); $( window ).trigger( 'resize' ); }, 10 ); diff --git a/assets/js/frontend/single-product.js b/assets/js/frontend/single-product.js index 4db3a244b20..b124870fe5e 100644 --- a/assets/js/frontend/single-product.js +++ b/assets/js/frontend/single-product.js @@ -22,7 +22,7 @@ jQuery( function( $ ) { } else { $tabs.find( 'li:first a' ).click(); } - }) + } ) .on( 'click', '.wc-tabs li a, ul.tabs li a', function( e ) { e.preventDefault(); var $tab = $( this ); @@ -34,16 +34,16 @@ jQuery( function( $ ) { $tab.closest( 'li' ).addClass( 'active' ); $tabs_wrapper.find( $tab.attr( 'href' ) ).show(); - }) + } ) // Review link .on( 'click', 'a.woocommerce-review-link', function() { $( '.reviews_tab a' ).click(); return true; - }) + } ) // Star ratings for comments .on( 'init', '#rating', function() { $( '#rating' ).hide().before( '

12345

' ); - }) + } ) .on( 'click', '#respond p.stars a', function() { var $star = $( this ), $rating = $( this ).closest( '#respond' ).find( '#rating' ), @@ -55,7 +55,7 @@ jQuery( function( $ ) { $container.addClass( 'selected' ); return false; - }) + } ) .on( 'click', '#respond #submit', function() { var $rating = $( this ).closest( '#respond' ).find( '#rating' ), rating = $rating.val(); @@ -65,12 +65,7 @@ jQuery( function( $ ) { return false; } - }) - .on( 'woocommerce_init_gallery', function() { - if ( $.isFunction( $.fn.zoom ) && wc_single_product_params.zoom_enabled ) { - wc_product_gallery.init_zoom(); - } - }); + } ); //Init Tabs and Star Ratings $( '.wc-tabs-wrapper, .woocommerce-tabs, #rating' ).trigger( 'init' ); @@ -78,28 +73,30 @@ jQuery( function( $ ) { /** * Product gallery class. */ - var wc_product_gallery = { + var Product_Gallery = function( $el ) { + + this.$el = $el; /** * Initialize gallery actions and events. */ - init: function() { - if ( $.isFunction( $.fn.flexslider ) && wc_single_product_params.flexslider_enabled ) { - this.init_flexslider(); - } - if ( $.isFunction( $.fn.zoom ) && wc_single_product_params.zoom_enabled ) { - this.init_zoom(); - } - if ( typeof PhotoSwipe !== 'undefined' && wc_single_product_params.photoswipe_enabled ) { - this.init_photoswipe(); - } - }, + this.init = function() { + + this.init_flexslider(); + this.init_zoom(); + this.init_photoswipe(); + }; /** * Initialize flexSlider. */ - init_flexslider: function() { - $( '.woocommerce-product-gallery' ).flexslider({ + this.init_flexslider = function() { + + if ( ! $.isFunction( $.fn.flexslider ) || ! wc_single_product_params.flexslider_enabled ) { + 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, @@ -118,24 +115,29 @@ jQuery( function( $ ) { if ( height > largest_height ) { largest_height = height; } - }); + } ); $images.each( function() { $( this ).css( 'min-height', largest_height ); - }); + } ); } - }); - - $( 'body' ).on( 'woocommerce_gallery_reset_slide_position', function(){ - $( '.woocommerce-product-gallery' ).flexslider( 0 ); } ); - }, + + $el.on( 'woocommerce_gallery_reset_slide_position', this.reset_slide_position ); + + $el.on( 'woocommerce_gallery_init_zoom', this.init_zoom ); + }; /** * Init zoom. */ - init_zoom: function() { - var zoom_target = $( '.woocommerce-product-gallery__image' ), + this.init_zoom = function() { + + if ( ! $.isFunction( $.fn.zoom ) || ! wc_single_product_params.zoom_enabled ) { + return; + } + + var zoom_target = $( '.woocommerce-product-gallery__image', $el ), enable_zoom = false; if ( ! wc_single_product_params.flexslider_enabled ) { @@ -145,7 +147,7 @@ jQuery( function( $ ) { $( zoom_target ).each( function( index, target ) { var image = $( target ).find( 'img' ); - if ( image.attr( 'width' ) > $( '.woocommerce-product-gallery' ).width() ) { + if ( image.attr( 'width' ) > $el.width() ) { enable_zoom = true; return false; } @@ -156,15 +158,19 @@ jQuery( function( $ ) { zoom_target.trigger( 'zoom.destroy' ); zoom_target.zoom({ touch: false - }); + } ); } - }, + }; + + this.reset_slide_position = function() { + $el.flexslider( 0 ); + }; /** * Get product gallery image items. */ - get_gallery_items: function() { - var $slides = $( '.woocommerce-product-gallery__wrapper' ).children(), + this.get_gallery_items = function() { + var $slides = $( '.woocommerce-product-gallery__wrapper', $el ).children(), items = [], index = $slides.filter( '.' + 'flex-active-slide' ).index(); @@ -181,41 +187,49 @@ jQuery( function( $ ) { title: img.attr( 'title' ) }; items.push( item ); - }); + } ); } return { index: index, items: items }; - }, + }; /** * Init PhotoSwipe. */ - init_photoswipe: function() { - if ( wc_single_product_params.zoom_enabled ) { - $( '.woocommerce-product-gallery--with-images' ).prepend( '🔍' ); - $( document ).on( 'click', '.woocommerce-product-gallery__trigger', this.trigger_photoswipe ); + this.init_photoswipe = function() { + + if ( typeof PhotoSwipe === 'undefined' || ! wc_single_product_params.photoswipe_enabled ) { + return; } - $( document ).on( 'click', '.woocommerce-product-gallery__image a', this.trigger_photoswipe ); - }, + + if ( wc_single_product_params.zoom_enabled ) { + if ( $el.hasClass( 'woocommerce-product-gallery--with-images' ) ) { + $el.prepend( '🔍' ); + } + $el.on( 'click', '.woocommerce-product-gallery__trigger', { gallery: this }, this.trigger_photoswipe ); + } + $el.on( 'click', '.woocommerce-product-gallery__image a', { gallery: this }, this.trigger_photoswipe ); + }; /** * Initialise photoswipe. */ - trigger_photoswipe: function( e ) { + this.trigger_photoswipe = function( e ) { + e.preventDefault(); var pswpElement = $( '.pswp' )[0], - items = wc_product_gallery.get_gallery_items(), + items = e.data.gallery.get_gallery_items(), target = $( e.target ), clicked; if ( ! target.is( '.woocommerce-product-gallery__trigger' ) ) { clicked = e.target.closest( 'figure' ); } else { - clicked = target.parents( '.woocommerce-product-gallery' ).find( '.flex-active-slide' ); + clicked = e.data.gallery.$el.find( '.flex-active-slide' ); } var options = { @@ -230,8 +244,24 @@ jQuery( function( $ ) { // Initializes and opens PhotoSwipe. var gallery = new PhotoSwipe( pswpElement, PhotoSwipeUI_Default, items.items, options ); gallery.init(); - } + }; + + this.init(); }; - wc_product_gallery.init(); -}); + /** + * Function to call wc_product_gallery on jquery selector. + */ + $.fn.wc_product_gallery = function() { + new Product_Gallery( this ); + return this; + }; + + /* + * Initialize all galleries on page. + */ + $( '.woocommerce-product-gallery' ).each( function() { + $( this ).wc_product_gallery( this ); + } ); + +} ); From 9181f1c1513c0df77b2139021e2469b1e487bc85 Mon Sep 17 00:00:00 2001 From: Manos Psychogyiopoulos Date: Tue, 14 Mar 2017 12:55:25 +0200 Subject: [PATCH 02/10] allow init with args --- assets/js/frontend/add-to-cart-variation.js | 27 ++++--- assets/js/frontend/single-product.js | 72 +++++++++++-------- templates/single-product/product-image.php | 8 +-- .../single-product/product-thumbnails.php | 6 +- 4 files changed, 62 insertions(+), 51 deletions(-) diff --git a/assets/js/frontend/add-to-cart-variation.js b/assets/js/frontend/add-to-cart-variation.js index f5cfe9ca758..cb9e251853f 100644 --- a/assets/js/frontend/add-to-cart-variation.js +++ b/assets/js/frontend/add-to-cart-variation.js @@ -10,7 +10,6 @@ this.$singleVariationWrap = $form.find( '.single_variation_wrap' ); this.$resetVariations = $form.find( '.reset_variations' ); this.$product = $form.closest( '.product' ); - this.$product_gallery = this.$product.find( '.woocommerce-product-gallery' ); this.variationData = $form.data( 'product_variations' ); this.useAjax = false === this.variationData; this.xhr = false; @@ -22,10 +21,10 @@ this.$attributeFields.unbind( 'change ' ); // Methods. - this.getChosenAttributes = this.getChosenAttributes.bind( this ); + this.getChosenAttributes = this.getChosenAttributes.bind( this ); this.findMatchingVariations = this.findMatchingVariations.bind( this ); - this.isMatch = this.isMatch.bind( this ); - this.toggleResetLink = this.toggleResetLink.bind( this ); + this.isMatch = this.isMatch.bind( this ); + this.toggleResetLink = this.toggleResetLink.bind( this ); // Events. $form.on( 'click', '.reset_variations', { variationForm: this }, this.onReset ); @@ -530,7 +529,7 @@ $.fn.wc_maybe_trigger_slide_position_reset = function( variation ) { var $form = $( this ), $product = $form.closest( '.product' ), - $product_gallery = $product.find( '.woocommerce-product-gallery' ), + $product_gallery = $product.find( '.images' ), reset_slide_position = false, new_image_id = ( variation && variation.image_id ) ? variation.image_id : ''; @@ -551,10 +550,9 @@ $.fn.wc_variations_image_update = function( variation ) { var $form = this, $product = $form.closest( '.product' ), - $product_gallery = $product.find( '.woocommerce-product-gallery' ), + $product_gallery = $product.find( '.images' ), $gallery_img = $product.find( '.flex-control-nav li:eq(0) img' ), - $gallery_wrapper = $product.find( '.woocommerce-product-gallery__wrapper ' ), - $product_img_wrap = $gallery_wrapper.find( '.woocommerce-product-gallery__image, .woocommerce-product-gallery__image--placeholder' ).eq( 0 ), + $product_img_wrap = $product_gallery.find( '.woocommerce-product-gallery__image, .woocommerce-product-gallery__image--placeholder' ).eq( 0 ), $product_img = $product_img_wrap.find( '.wp-post-image' ); if ( variation && variation.image && variation.image.src && variation.image.src.length > 1 ) { @@ -565,9 +563,9 @@ $product_img.wc_set_variation_attr( 'sizes', variation.image.sizes ); $product_img.wc_set_variation_attr( 'title', variation.image.title ); $product_img.wc_set_variation_attr( 'alt', variation.image.alt ); - $product_img.wc_set_variation_attr( 'data-large-image', variation.image.full_src ); - $product_img.wc_set_variation_attr( 'data-large-image-width', variation.image.full_src_w ); - $product_img.wc_set_variation_attr( 'data-large-image-height', variation.image.full_src_h ); + $product_img.wc_set_variation_attr( 'data-large_image', variation.image.full_src ); + $product_img.wc_set_variation_attr( 'data-large_image_width', variation.image.full_src_w ); + $product_img.wc_set_variation_attr( 'data-large_image_height', variation.image.full_src_h ); $product_img_wrap.wc_set_variation_attr( 'data-thumb', variation.image.src ); $gallery_img.wc_set_variation_attr( 'src', variation.image.src ); } else { @@ -578,11 +576,10 @@ $product_img.wc_reset_variation_attr( 'sizes' ); $product_img.wc_reset_variation_attr( 'title' ); $product_img.wc_reset_variation_attr( 'alt' ); - $product_img.wc_reset_variation_attr( 'data-large-image' ); - $product_img.wc_reset_variation_attr( 'data-large-image-width' ); - $product_img.wc_reset_variation_attr( 'data-large-image-height' ); + $product_img.wc_reset_variation_attr( 'data-large_image' ); + $product_img.wc_reset_variation_attr( 'data-large_image_width' ); + $product_img.wc_reset_variation_attr( 'data-large_image_height' ); $product_img_wrap.wc_reset_variation_attr( 'data-thumb' ); - $product_img.wc_reset_variation_attr( 'large-image' ); $gallery_img.wc_reset_variation_attr( 'src' ); } diff --git a/assets/js/frontend/single-product.js b/assets/js/frontend/single-product.js index b124870fe5e..5d09789e1a6 100644 --- a/assets/js/frontend/single-product.js +++ b/assets/js/frontend/single-product.js @@ -73,9 +73,27 @@ jQuery( function( $ ) { /** * Product gallery class. */ - var Product_Gallery = function( $el ) { + var Product_Gallery = function( $el, args ) { - this.$el = $el; + var gallery = this; + + this.$el = $el; + this.$images = $( '.woocommerce-product-gallery__image', $el ); + + // Make this object available. + $el.data['product_gallery'] = this; + + // Pick functionality to initialize... + this.flexslider_enabled = $.isFunction( $.fn.flexslider ) && wc_single_product_params.flexslider_enabled; + this.zoom_enabled = $.isFunction( $.fn.zoom ) && wc_single_product_params.zoom_enabled; + this.photoswipe_enabled = typeof PhotoSwipe !== 'undefined' && wc_single_product_params.photoswipe_enabled; + + // ...also taking args into account. + if ( args ) { + this.flexslider_enabled = false === args.photoswipe_enabled ? false : this.flexslider_enabled; + this.zoom_enabled = false === args.zoom_enabled ? false : this.zoom_enabled; + this.photoswipe_enabled = false === args.photoswipe_enabled ? false : this.photoswipe_enabled; + } /** * Initialize gallery actions and events. @@ -92,7 +110,7 @@ jQuery( function( $ ) { */ this.init_flexslider = function() { - if ( ! $.isFunction( $.fn.flexslider ) || ! wc_single_product_params.flexslider_enabled ) { + if ( ! this.flexslider_enabled ) { return; } @@ -106,10 +124,10 @@ jQuery( function( $ ) { animationSpeed: wc_single_product_params.flexslider.animationSpeed, animationLoop: wc_single_product_params.flexslider.animationLoop, // Breaks photoswipe pagination if true. start: function() { - var $images = $( '.woocommerce-product-gallery__image' ); + var largest_height = 0; - $images.each( function() { + gallery.$images.each( function() { var height = $( this ).height(); if ( height > largest_height ) { @@ -117,7 +135,7 @@ jQuery( function( $ ) { } } ); - $images.each( function() { + gallery.$images.each( function() { $( this ).css( 'min-height', largest_height ); } ); } @@ -133,11 +151,11 @@ jQuery( function( $ ) { */ this.init_zoom = function() { - if ( ! $.isFunction( $.fn.zoom ) || ! wc_single_product_params.zoom_enabled ) { + if ( ! gallery.zoom_enabled ) { return; } - var zoom_target = $( '.woocommerce-product-gallery__image', $el ), + var zoom_target = gallery.$images, enable_zoom = false; if ( ! wc_single_product_params.flexslider_enabled ) { @@ -156,7 +174,7 @@ jQuery( function( $ ) { // But only zoom if the img is larger than its container. if ( enable_zoom ) { zoom_target.trigger( 'zoom.destroy' ); - zoom_target.zoom({ + zoom_target.zoom( { touch: false } ); } @@ -170,16 +188,16 @@ jQuery( function( $ ) { * Get product gallery image items. */ this.get_gallery_items = function() { - var $slides = $( '.woocommerce-product-gallery__wrapper', $el ).children(), - items = [], - index = $slides.filter( '.' + 'flex-active-slide' ).index(); + + var $slides = this.$images, + items = []; if ( $slides.length > 0 ) { $slides.each( function( i, el ) { var img = $( el ).find( 'img' ), - large_image_src = img.attr( 'data-large-image' ), - large_image_w = img.attr( 'data-large-image-width' ), - large_image_h = img.attr( 'data-large-image-height' ), + large_image_src = img.data( 'large_image' ), + large_image_w = img.data( 'large_image_width' ), + large_image_h = img.data( 'large_image_height' ), item = { src: large_image_src, w: large_image_w, @@ -190,10 +208,7 @@ jQuery( function( $ ) { } ); } - return { - index: index, - items: items - }; + return items; }; /** @@ -201,16 +216,15 @@ jQuery( function( $ ) { */ this.init_photoswipe = function() { - if ( typeof PhotoSwipe === 'undefined' || ! wc_single_product_params.photoswipe_enabled ) { + if ( ! this.photoswipe_enabled ) { return; } - if ( wc_single_product_params.zoom_enabled ) { - if ( $el.hasClass( 'woocommerce-product-gallery--with-images' ) ) { - $el.prepend( '🔍' ); - } + if ( this.zoom_enabled && this.$images.length > 0 ) { + $el.prepend( '🔍' ); $el.on( 'click', '.woocommerce-product-gallery__trigger', { gallery: this }, this.trigger_photoswipe ); } + $el.on( 'click', '.woocommerce-product-gallery__image a', { gallery: this }, this.trigger_photoswipe ); }; @@ -227,7 +241,7 @@ jQuery( function( $ ) { clicked; if ( ! target.is( '.woocommerce-product-gallery__trigger' ) ) { - clicked = e.target.closest( 'figure' ); + clicked = e.target.closest( '.woocommerce-product-gallery__image' ); } else { clicked = e.data.gallery.$el.find( '.flex-active-slide' ); } @@ -242,7 +256,7 @@ jQuery( function( $ ) { }; // Initializes and opens PhotoSwipe. - var gallery = new PhotoSwipe( pswpElement, PhotoSwipeUI_Default, items.items, options ); + var gallery = new PhotoSwipe( pswpElement, PhotoSwipeUI_Default, items, options ); gallery.init(); }; @@ -252,8 +266,8 @@ jQuery( function( $ ) { /** * Function to call wc_product_gallery on jquery selector. */ - $.fn.wc_product_gallery = function() { - new Product_Gallery( this ); + $.fn.wc_product_gallery = function( args ) { + new Product_Gallery( this, args ); return this; }; @@ -261,7 +275,7 @@ jQuery( function( $ ) { * Initialize all galleries on page. */ $( '.woocommerce-product-gallery' ).each( function() { - $( this ).wc_product_gallery( this ); + $( this ).wc_product_gallery(); } ); } ); diff --git a/templates/single-product/product-image.php b/templates/single-product/product-image.php index 5b70531697b..2e74ce71fa8 100644 --- a/templates/single-product/product-image.php +++ b/templates/single-product/product-image.php @@ -38,10 +38,10 @@ $wrapper_classes = apply_filters( 'woocommerce_single_product_image_gallery_cl
$image_title, - 'data-large-image' => $full_size_image[0], - 'data-large-image-width' => $full_size_image[1], - 'data-large-image-height' => $full_size_image[2], + 'title' => $image_title, + 'data-large_image' => $full_size_image[0], + 'data-large_image_width' => $full_size_image[1], + 'data-large_image_height' => $full_size_image[2], ); if ( has_post_thumbnail() ) { diff --git a/templates/single-product/product-thumbnails.php b/templates/single-product/product-thumbnails.php index 120cea46c11..f24fd07ba18 100644 --- a/templates/single-product/product-thumbnails.php +++ b/templates/single-product/product-thumbnails.php @@ -33,9 +33,9 @@ if ( $attachment_ids && has_post_thumbnail() ) { $attributes = array( 'title' => $image_title, - 'data-large-image' => $full_size_image[0], - 'data-large-image-width' => $full_size_image[1], - 'data-large-image-height' => $full_size_image[2], + 'data-large_image' => $full_size_image[0], + 'data-large_image_width' => $full_size_image[1], + 'data-large_image_height' => $full_size_image[2], ); $html = '
'; From 4e48a2ddfaeb3f8236825462b13b35c53a935336 Mon Sep 17 00:00:00 2001 From: Manos Psychogyiopoulos Date: Tue, 14 Mar 2017 13:33:05 +0200 Subject: [PATCH 03/10] revert change from attr. to data. --- assets/js/frontend/single-product.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/assets/js/frontend/single-product.js b/assets/js/frontend/single-product.js index 5d09789e1a6..dc6f8f094f2 100644 --- a/assets/js/frontend/single-product.js +++ b/assets/js/frontend/single-product.js @@ -195,9 +195,9 @@ jQuery( function( $ ) { if ( $slides.length > 0 ) { $slides.each( function( i, el ) { var img = $( el ).find( 'img' ), - large_image_src = img.data( 'large_image' ), - large_image_w = img.data( 'large_image_width' ), - large_image_h = img.data( 'large_image_height' ), + large_image_src = img.attr( 'data-large_image' ), + large_image_w = img.attr( 'data-large_image_width' ), + large_image_h = img.attr( 'data-large_image_height' ), item = { src: large_image_src, w: large_image_w, From fb6c1b09fcb25366382289e4ed71468b5ddde566 Mon Sep 17 00:00:00 2001 From: Manos Psychogyiopoulos Date: Tue, 14 Mar 2017 13:44:45 +0200 Subject: [PATCH 04/10] use class prop `flexslider_enabled` in `init_zoom` --- assets/js/frontend/single-product.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/assets/js/frontend/single-product.js b/assets/js/frontend/single-product.js index dc6f8f094f2..ebe4185af6d 100644 --- a/assets/js/frontend/single-product.js +++ b/assets/js/frontend/single-product.js @@ -158,7 +158,7 @@ jQuery( function( $ ) { var zoom_target = gallery.$images, enable_zoom = false; - if ( ! wc_single_product_params.flexslider_enabled ) { + if ( ! gallery.flexslider_enabled ) { zoom_target = zoom_target.first(); } From 4cc936c38311f9f9806f2bfe6cbc6bdc42fe8890 Mon Sep 17 00:00:00 2001 From: Manos Psychogyiopoulos Date: Tue, 14 Mar 2017 13:52:48 +0200 Subject: [PATCH 05/10] move event handlers to init --- assets/js/frontend/single-product.js | 11 ++++++++--- 1 file changed, 8 insertions(+), 3 deletions(-) diff --git a/assets/js/frontend/single-product.js b/assets/js/frontend/single-product.js index ebe4185af6d..4903aef6cd3 100644 --- a/assets/js/frontend/single-product.js +++ b/assets/js/frontend/single-product.js @@ -103,6 +103,9 @@ jQuery( function( $ ) { this.init_flexslider(); this.init_zoom(); this.init_photoswipe(); + + $el.on( 'woocommerce_gallery_init_zoom', this.init_zoom ); + $el.on( 'woocommerce_gallery_reset_slide_position', this.reset_slide_position ); }; /** @@ -141,9 +144,6 @@ jQuery( function( $ ) { } } ); - $el.on( 'woocommerce_gallery_reset_slide_position', this.reset_slide_position ); - - $el.on( 'woocommerce_gallery_init_zoom', this.init_zoom ); }; /** @@ -181,6 +181,11 @@ jQuery( function( $ ) { }; this.reset_slide_position = function() { + + if ( ! gallery.flexslider_enabled ) { + return; + } + $el.flexslider( 0 ); }; From 290e000bcbb7fcaea64bf3b8f637b95690c8172a Mon Sep 17 00:00:00 2001 From: Manos Psychogyiopoulos Date: Tue, 14 Mar 2017 15:04:08 +0200 Subject: [PATCH 06/10] better use of gallery var --- assets/js/frontend/single-product.js | 16 ++++++++++------ 1 file changed, 10 insertions(+), 6 deletions(-) diff --git a/assets/js/frontend/single-product.js b/assets/js/frontend/single-product.js index 4903aef6cd3..f8ceec81879 100644 --- a/assets/js/frontend/single-product.js +++ b/assets/js/frontend/single-product.js @@ -227,10 +227,10 @@ jQuery( function( $ ) { if ( this.zoom_enabled && this.$images.length > 0 ) { $el.prepend( '🔍' ); - $el.on( 'click', '.woocommerce-product-gallery__trigger', { gallery: this }, this.trigger_photoswipe ); + $el.on( 'click', '.woocommerce-product-gallery__trigger', this.trigger_photoswipe ); } - $el.on( 'click', '.woocommerce-product-gallery__image a', { gallery: this }, this.trigger_photoswipe ); + $el.on( 'click', '.woocommerce-product-gallery__image a', this.trigger_photoswipe ); }; /** @@ -238,17 +238,21 @@ jQuery( function( $ ) { */ this.trigger_photoswipe = function( e ) { + if ( ! gallery.photoswipe_enabled ) { + return; + } + e.preventDefault(); var pswpElement = $( '.pswp' )[0], - items = e.data.gallery.get_gallery_items(), + items = gallery.get_gallery_items(), target = $( e.target ), clicked; if ( ! target.is( '.woocommerce-product-gallery__trigger' ) ) { clicked = e.target.closest( '.woocommerce-product-gallery__image' ); } else { - clicked = e.data.gallery.$el.find( '.flex-active-slide' ); + clicked = gallery.$el.find( '.flex-active-slide' ); } var options = { @@ -261,8 +265,8 @@ jQuery( function( $ ) { }; // Initializes and opens PhotoSwipe. - var gallery = new PhotoSwipe( pswpElement, PhotoSwipeUI_Default, items, options ); - gallery.init(); + var photoswipe = new PhotoSwipe( pswpElement, PhotoSwipeUI_Default, items, options ); + photoswipe.init(); }; this.init(); From 161b6a132bf61cf62489b6a2d04b5f42f4d97134 Mon Sep 17 00:00:00 2001 From: Manos Psychogyiopoulos Date: Tue, 14 Mar 2017 15:42:15 +0200 Subject: [PATCH 07/10] use data() correctly --- assets/js/frontend/single-product.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/assets/js/frontend/single-product.js b/assets/js/frontend/single-product.js index f8ceec81879..c33feb4677e 100644 --- a/assets/js/frontend/single-product.js +++ b/assets/js/frontend/single-product.js @@ -81,7 +81,7 @@ jQuery( function( $ ) { this.$images = $( '.woocommerce-product-gallery__image', $el ); // Make this object available. - $el.data['product_gallery'] = this; + $el.data( 'product_gallery', this ); // Pick functionality to initialize... this.flexslider_enabled = $.isFunction( $.fn.flexslider ) && wc_single_product_params.flexslider_enabled; From a6436eb91589a049e9413d841dfa7fffe470b931 Mon Sep 17 00:00:00 2001 From: Mike Jolley Date: Tue, 14 Mar 2017 15:48:18 +0000 Subject: [PATCH 08/10] prototype pattern --- assets/js/frontend/single-product.js | 334 +++++++++++------------ assets/js/frontend/single-product.min.js | 2 +- 2 files changed, 157 insertions(+), 179 deletions(-) diff --git a/assets/js/frontend/single-product.js b/assets/js/frontend/single-product.js index c33feb4677e..cd867acd73a 100644 --- a/assets/js/frontend/single-product.js +++ b/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(); @@ -67,21 +67,18 @@ jQuery( function( $ ) { } } ); - //Init Tabs and Star Ratings + // Init Tabs and Star Ratings $( '.wc-tabs-wrapper, .woocommerce-tabs, #rating' ).trigger( 'init' ); /** * 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,196 +92,177 @@ 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 ); + } - /** - * Initialize flexSlider. - */ - this.init_flexslider = function() { + if ( this.photoswipe_enabled ) { + this.initPhotoswipe(); + } + }; - if ( ! this.flexslider_enabled ) { - return; - } + /** + * Initialize flexSlider. + */ + ProductGallery.prototype.initFlexslider = function() { + var images = this.$images; - $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, - directionNav: wc_single_product_params.flexslider.directionNav, - controlNav: wc_single_product_params.flexslider.controlNav, - slideshow: wc_single_product_params.flexslider.slideshow, - animationSpeed: wc_single_product_params.flexslider.animationSpeed, - animationLoop: wc_single_product_params.flexslider.animationLoop, // Breaks photoswipe pagination if true. - start: function() { + 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, + directionNav: wc_single_product_params.flexslider.directionNav, + controlNav: wc_single_product_params.flexslider.controlNav, + slideshow: wc_single_product_params.flexslider.slideshow, + 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; - var largest_height = 0; + images.each( function() { + var height = $( this ).height(); - gallery.$images.each( function() { - var height = $( this ).height(); + if ( height > largest_height ) { + largest_height = height; + } + } ); - if ( height > largest_height ) { - largest_height = height; - } - } ); - - gallery.$images.each( function() { - $( this ).css( 'min-height', largest_height ); - } ); - } - } ); - - }; - - /** - * Init zoom. - */ - this.init_zoom = function() { - - if ( ! gallery.zoom_enabled ) { - return; - } - - var zoom_target = gallery.$images, - 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() ) { - enable_zoom = 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( { - touch: false + images.each( function() { + $( this ).css( 'min-height', largest_height ); } ); } + } ); + }; + + /** + * Init zoom. + */ + ProductGallery.prototype.initZoom = function() { + var zoomTarget = this.$images, + galleryWidth = this.$target.width(), + zoomEnabled = false; + + if ( ! this.flexslider_enabled ) { + zoomTarget = zoomTarget.first(); + } + + $( zoomTarget ).each( function( index, target ) { + var image = $( target ).find( 'img' ); + + if ( image.attr( 'width' ) > galleryWidth ) { + zoomEnabled = true; + return false; + } + } ); + + // But only zoom if the img is larger than its container. + if ( zoomEnabled ) { + zoomTarget.trigger( 'zoom.destroy' ); + zoomTarget.zoom( { + touch: false + } ); + } + }; + + /** + * Init PhotoSwipe. + */ + ProductGallery.prototype.initPhotoswipe = function() { + if ( this.zoom_enabled && this.$images.length > 0 ) { + this.$target.prepend( '🔍' ); + this.$target.on( 'click', '.woocommerce-product-gallery__trigger', this.openPhotoswipe ); + } + this.$target.on( 'click', '.woocommerce-product-gallery__image a', this.openPhotoswipe ); + }; + + /** + * Reset slide position to 0. + */ + ProductGallery.prototype.onResetSlidePosition = function() { + this.$target.flexslider( 0 ); + }; + + /** + * Get product gallery image items. + */ + ProductGallery.prototype.getGalleryItems = function() { + var $slides = this.$images, + items = []; + + if ( $slides.length > 0 ) { + $slides.each( function( i, el ) { + var img = $( el ).find( 'img' ), + large_image_src = img.attr( 'data-large_image' ), + large_image_w = img.attr( 'data-large_image_width' ), + large_image_h = img.attr( 'data-large_image_height' ), + item = { + src: large_image_src, + w: large_image_w, + h: large_image_h, + title: img.attr( 'title' ) + }; + items.push( item ); + } ); + } + + return items; + }; + + /** + * Open photoswipe modal. + */ + ProductGallery.prototype.openPhotoswipe = function( e ) { + e.preventDefault(); + + var pswpElement = $( '.pswp' )[0], + items = this.getGalleryItems(), + eventTarget = $( e.target ), + clicked; + + if ( ! eventTarget.is( '.woocommerce-product-gallery__trigger' ) ) { + clicked = eventTarget.closest( '.woocommerce-product-gallery__image' ); + } else { + clicked = this.$target.find( '.flex-active-slide' ); + } + + var options = { + index: $( clicked ).index(), + shareEl: false, + closeOnScroll: false, + history: false, + hideAnimationDuration: 0, + showAnimationDuration: 0 }; - this.reset_slide_position = function() { - - if ( ! gallery.flexslider_enabled ) { - return; - } - - $el.flexslider( 0 ); - }; - - /** - * Get product gallery image items. - */ - this.get_gallery_items = function() { - - var $slides = this.$images, - items = []; - - if ( $slides.length > 0 ) { - $slides.each( function( i, el ) { - var img = $( el ).find( 'img' ), - large_image_src = img.attr( 'data-large_image' ), - large_image_w = img.attr( 'data-large_image_width' ), - large_image_h = img.attr( 'data-large_image_height' ), - item = { - src: large_image_src, - w: large_image_w, - h: large_image_h, - title: img.attr( 'title' ) - }; - items.push( item ); - } ); - } - - return items; - }; - - /** - * Init PhotoSwipe. - */ - this.init_photoswipe = function() { - - if ( ! this.photoswipe_enabled ) { - return; - } - - if ( this.zoom_enabled && this.$images.length > 0 ) { - $el.prepend( '🔍' ); - $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(), - target = $( e.target ), - clicked; - - if ( ! target.is( '.woocommerce-product-gallery__trigger' ) ) { - clicked = e.target.closest( '.woocommerce-product-gallery__image' ); - } else { - clicked = gallery.$el.find( '.flex-active-slide' ); - } - - var options = { - index: $( clicked ).index(), - shareEl: false, - closeOnScroll: false, - history: false, - hideAnimationDuration: 0, - showAnimationDuration: 0 - }; - - // Initializes and opens PhotoSwipe. - var photoswipe = new PhotoSwipe( pswpElement, PhotoSwipeUI_Default, items, options ); - photoswipe.init(); - }; - - this.init(); + // Initializes and opens PhotoSwipe. + var photoswipe = new PhotoSwipe( pswpElement, PhotoSwipeUI_Default, items, options ); + photoswipe.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(); } ); diff --git a/assets/js/frontend/single-product.min.js b/assets/js/frontend/single-product.min.js index c70e3d9b476..20cb07b27da 100644 --- a/assets/js/frontend/single-product.min.js +++ b/assets/js/frontend/single-product.min.js @@ -1 +1 @@ -jQuery(function(a){if("undefined"==typeof wc_single_product_params)return!1;a("body").on("init",".wc-tabs-wrapper, .woocommerce-tabs",function(){a(".wc-tab, .woocommerce-tabs .panel:not(.panel .panel)").hide();var b=window.location.hash,c=window.location.href,d=a(this).find(".wc-tabs, ul.tabs").first();b.toLowerCase().indexOf("comment-")>=0||"#reviews"===b||"#tab-reviews"===b?d.find("li.reviews_tab a").click():c.indexOf("comment-page-")>0||c.indexOf("cpage=")>0?d.find("li.reviews_tab a").click():d.find("li:first a").click()}).on("click",".wc-tabs li a, ul.tabs li a",function(b){b.preventDefault();var c=a(this),d=c.closest(".wc-tabs-wrapper, .woocommerce-tabs"),e=d.find(".wc-tabs, ul.tabs");e.find("li").removeClass("active"),d.find(".wc-tab, .panel:not(.panel .panel)").hide(),c.closest("li").addClass("active"),d.find(c.attr("href")).show()}).on("click","a.woocommerce-review-link",function(){return a(".reviews_tab a").click(),!0}).on("init","#rating",function(){a("#rating").hide().before('

12345

')}).on("click","#respond p.stars a",function(){var b=a(this),c=a(this).closest("#respond").find("#rating"),d=a(this).closest(".stars");return c.val(b.text()),b.siblings("a").removeClass("active"),b.addClass("active"),d.addClass("selected"),!1}).on("click","#respond #submit",function(){var b=a(this).closest("#respond").find("#rating"),c=b.val();if(b.length>0&&!c&&"yes"===wc_single_product_params.review_rating_required)return window.alert(wc_single_product_params.i18n_required_rating_text),!1}).on("woocommerce_init_gallery",function(){a.isFunction(a.fn.zoom)&&wc_single_product_params.zoom_enabled&&b.init_zoom()}),a(".wc-tabs-wrapper, .woocommerce-tabs, #rating").trigger("init");var b={init:function(){a.isFunction(a.fn.flexslider)&&wc_single_product_params.flexslider_enabled&&this.init_flexslider(),a.isFunction(a.fn.zoom)&&wc_single_product_params.zoom_enabled&&this.init_zoom(),"undefined"!=typeof PhotoSwipe&&wc_single_product_params.photoswipe_enabled&&this.init_photoswipe()},init_flexslider:function(){a(".woocommerce-product-gallery").flexslider({selector:".woocommerce-product-gallery__wrapper > .woocommerce-product-gallery__image",animation:wc_single_product_params.flexslider.animation,smoothHeight:wc_single_product_params.flexslider.smoothHeight,directionNav:wc_single_product_params.flexslider.directionNav,controlNav:wc_single_product_params.flexslider.controlNav,slideshow:wc_single_product_params.flexslider.slideshow,animationSpeed:wc_single_product_params.flexslider.animationSpeed,animationLoop:wc_single_product_params.flexslider.animationLoop,start:function(){var b=a(".woocommerce-product-gallery__image"),c=0;b.each(function(){var b=a(this).height();b>c&&(c=b)}),b.each(function(){a(this).css("min-height",c)})}}),a("body").on("woocommerce_gallery_reset_slide_position",function(){a(".woocommerce-product-gallery").flexslider(0)})},init_zoom:function(){var b=a(".woocommerce-product-gallery__image"),c=!1;wc_single_product_params.flexslider_enabled||(b=b.first()),a(b).each(function(b,d){var e=a(d).find("img");if(e.attr("width")>a(".woocommerce-product-gallery").width())return c=!0,!1}),c&&(b.trigger("zoom.destroy"),b.zoom({touch:!1}))},get_gallery_items:function(){var b=a(".woocommerce-product-gallery__wrapper").children(),c=[],d=b.filter(".flex-active-slide").index();return b.length>0&&b.each(function(b,d){var e=a(d).find("img"),f=e.attr("data-large-image"),g=e.attr("data-large-image-width"),h=e.attr("data-large-image-height"),i={src:f,w:g,h:h,title:e.attr("title")};c.push(i)}),{index:d,items:c}},init_photoswipe:function(){wc_single_product_params.zoom_enabled&&(a(".woocommerce-product-gallery--with-images").prepend('🔍'),a(document).on("click",".woocommerce-product-gallery__trigger",this.trigger_photoswipe)),a(document).on("click",".woocommerce-product-gallery__image a",this.trigger_photoswipe)},trigger_photoswipe:function(c){c.preventDefault();var d,e=a(".pswp")[0],f=b.get_gallery_items(),g=a(c.target);d=g.is(".woocommerce-product-gallery__trigger")?g.parents(".woocommerce-product-gallery").find(".flex-active-slide"):c.target.closest("figure");var h={index:a(d).index(),shareEl:!1,closeOnScroll:!1,history:!1,hideAnimationDuration:0,showAnimationDuration:0},i=new PhotoSwipe(e,PhotoSwipeUI_Default,f.items,h);i.init()}};b.init()}); \ No newline at end of file +jQuery(function(a){if("undefined"==typeof wc_single_product_params)return!1;a("body").on("init",".wc-tabs-wrapper, .woocommerce-tabs",function(){a(".wc-tab, .woocommerce-tabs .panel:not(.panel .panel)").hide();var b=window.location.hash,c=window.location.href,d=a(this).find(".wc-tabs, ul.tabs").first();b.toLowerCase().indexOf("comment-")>=0||"#reviews"===b||"#tab-reviews"===b?d.find("li.reviews_tab a").click():c.indexOf("comment-page-")>0||c.indexOf("cpage=")>0?d.find("li.reviews_tab a").click():d.find("li:first a").click()}).on("click",".wc-tabs li a, ul.tabs li a",function(b){b.preventDefault();var c=a(this),d=c.closest(".wc-tabs-wrapper, .woocommerce-tabs"),e=d.find(".wc-tabs, ul.tabs");e.find("li").removeClass("active"),d.find(".wc-tab, .panel:not(.panel .panel)").hide(),c.closest("li").addClass("active"),d.find(c.attr("href")).show()}).on("click","a.woocommerce-review-link",function(){return a(".reviews_tab a").click(),!0}).on("init","#rating",function(){a("#rating").hide().before('

12345

')}).on("click","#respond p.stars a",function(){var b=a(this),c=a(this).closest("#respond").find("#rating"),d=a(this).closest(".stars");return c.val(b.text()),b.siblings("a").removeClass("active"),b.addClass("active"),d.addClass("selected"),!1}).on("click","#respond #submit",function(){var b=a(this).closest("#respond").find("#rating"),c=b.val();if(b.length>0&&!c&&"yes"===wc_single_product_params.review_rating_required)return window.alert(wc_single_product_params.i18n_required_rating_text),!1}),a(".wc-tabs-wrapper, .woocommerce-tabs, #rating").trigger("init");var b=function(b,c){this.$target=b,this.$images=a(".woocommerce-product-gallery__image",b),b.data("product_gallery",this),this.flexslider_enabled=a.isFunction(a.fn.flexslider)&&wc_single_product_params.flexslider_enabled,this.zoom_enabled=a.isFunction(a.fn.zoom)&&wc_single_product_params.zoom_enabled,this.photoswipe_enabled="undefined"!=typeof PhotoSwipe&&wc_single_product_params.photoswipe_enabled,c&&(this.flexslider_enabled=!1!==c.photoswipe_enabled&&this.flexslider_enabled,this.zoom_enabled=!1!==c.zoom_enabled&&this.zoom_enabled,this.photoswipe_enabled=!1!==c.photoswipe_enabled&&this.photoswipe_enabled),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.flexslider_enabled&&(this.initFlexslider(),b.on("woocommerce_gallery_reset_slide_position",this.onResetSlidePosition)),this.zoom_enabled&&(this.initZoom(),b.on("woocommerce_gallery_init_zoom",this.initZoom)),this.photoswipe_enabled&&this.initPhotoswipe()};b.prototype.initFlexslider=function(){var b=this.$images;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,directionNav:wc_single_product_params.flexslider.directionNav,controlNav:wc_single_product_params.flexslider.controlNav,slideshow:wc_single_product_params.flexslider.slideshow,animationSpeed:wc_single_product_params.flexslider.animationSpeed,animationLoop:wc_single_product_params.flexslider.animationLoop,start:function(){var c=0;b.each(function(){var b=a(this).height();b>c&&(c=b)}),b.each(function(){a(this).css("min-height",c)})}})},b.prototype.initZoom=function(){var b=this.$images,c=this.$target.width(),d=!1;this.flexslider_enabled||(b=b.first()),a(b).each(function(b,e){var f=a(e).find("img");if(f.attr("width")>c)return d=!0,!1}),d&&(b.trigger("zoom.destroy"),b.zoom({touch:!1}))},b.prototype.initPhotoswipe=function(){this.zoom_enabled&&this.$images.length>0&&(this.$target.prepend('🔍'),this.$target.on("click",".woocommerce-product-gallery__trigger",this.openPhotoswipe)),this.$target.on("click",".woocommerce-product-gallery__image a",this.openPhotoswipe)},b.prototype.onResetSlidePosition=function(){this.$target.flexslider(0)},b.prototype.getGalleryItems=function(){var b=this.$images,c=[];return b.length>0&&b.each(function(b,d){var e=a(d).find("img"),f=e.attr("data-large_image"),g=e.attr("data-large_image_width"),h=e.attr("data-large_image_height"),i={src:f,w:g,h:h,title:e.attr("title")};c.push(i)}),c},b.prototype.openPhotoswipe=function(b){b.preventDefault();var c,d=a(".pswp")[0],e=this.getGalleryItems(),f=a(b.target);c=f.is(".woocommerce-product-gallery__trigger")?this.$target.find(".flex-active-slide"):f.closest(".woocommerce-product-gallery__image");var g={index:a(c).index(),shareEl:!1,closeOnScroll:!1,history:!1,hideAnimationDuration:0,showAnimationDuration:0},h=new PhotoSwipe(d,PhotoSwipeUI_Default,e,g);h.init()},a.fn.wc_product_gallery=function(a){return new b(this,a),this},a(".woocommerce-product-gallery").wc_product_gallery()}); \ No newline at end of file From 1b8e4612eed8a10fc31e6afb8f34f4971e7586e4 Mon Sep 17 00:00:00 2001 From: Mike Jolley Date: Tue, 14 Mar 2017 16:32:59 +0000 Subject: [PATCH 09/10] Load markup for photoswipe so shortcodes can use it --- templates/single-product/photoswipe.php | 7 +------ 1 file changed, 1 insertion(+), 6 deletions(-) diff --git a/templates/single-product/photoswipe.php b/templates/single-product/photoswipe.php index 44c27846536..d4fc63124bf 100644 --- a/templates/single-product/photoswipe.php +++ b/templates/single-product/photoswipe.php @@ -19,17 +19,12 @@ if ( ! defined( 'ABSPATH' ) ) { exit; // Exit if accessed directly. } - -if ( ! is_product() ) { - return; -} ?>