From a6436eb91589a049e9413d841dfa7fffe470b931 Mon Sep 17 00:00:00 2001 From: Mike Jolley Date: Tue, 14 Mar 2017 15:48:18 +0000 Subject: [PATCH] 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