Skip to content

Commit

Permalink
Carousel: merge changes from Jetpack
Browse files Browse the repository at this point in the history 
Summary:
This merges this commit to the css file
 - adbde22

It also includes manual resolution for the divergent files:

- `mu-plugins/carousel/jetpack-carousel.php` -  significant commits:
   - #5469
   - 728c96f
   - 4b70301
   - 7fc7ebd
   - b4ad963
   - adbde22

- `mu-plugins/carousel/jetpack-carousel.js` - significant commits:
   - #8329
   - #7943
   - #8509

Test Plan:
Steps:

- Add an gallery widget to a site.
- Click on an image in the gallery
- The carousel should open and the navigation should work as expect.
- Check the dev console for any JS errors

Reviewers: dereksmart, zinigor

Reviewed By: zinigor

Subscribers: zinigor, brbrr, dereksmart

Differential Revision: https://[private link]

Merges r174217-wpcom.
  • Loading branch information
@jhnstn @dereksmart
jhnstn authored and dereksmart committed May 2, 2018
1 parent 2c19568 commit d9567d0
Showing 1 changed file with 112 additions and 45 deletions.
157 changes: 112 additions & 45 deletions modules/carousel/jetpack-carousel.js
View file
Expand Up @@ -386,6 +386,8 @@ jQuery(document).ready(function($) {
$(window).unbind('keydown', keyListener);
$(window).unbind('resize', resizeListener);
$(window).scrollTop(scroll);
$( '.jp-carousel-previous-button' ).hide();
$( '.jp-carousel-next-button' ).hide();
})
.bind('jp_carousel.afterClose', function(){
if ( window.location.hash && history.back ) {
Expand Down Expand Up @@ -433,6 +435,47 @@ jQuery(document).ready(function($) {
}
};

var processSingleImageGallery = function() {
// process links that contain img tag with attribute data-attachment-id
$( 'a img[data-attachment-id]' ).each(function() {
var container = $( this ).parent();

// skip if image was already added to gallery by shortcode
if( container.parent( '.gallery-icon' ).length ) {
return;
}

// skip if the container is not a link
if ( 'undefined' === typeof( $( container ).attr( 'href' ) ) ) {
return;
}

var valid = false;

// if link points to 'Media File' (ignoring GET parameters) and flag is set allow it
if ( $( container ).attr( 'href' ).split( '?' )[0] === $( this ).attr( 'data-orig-file' ).split( '?' )[0] &&
1 === Number( jetpackCarouselStrings.single_image_gallery_media_file )
) {
valid = true;
}

// if link points to 'Attachment Page' allow it
if( $( container ).attr( 'href' ) === $( this ).attr( 'data-permalink' ) ) {
valid = true;
}

// links to 'Custom URL' or 'Media File' when flag not set are not valid
if( ! valid ) {
return;
}

// make this node a gallery recognizable by event listener above
$( container ).addClass( 'single-image-gallery' ) ;
// blog_id is needed to allow posting comments to correct blog
$( container ).data( 'carousel-extra', { blog_id: Number( jetpackCarouselStrings.blog_id ) } );
});
};

var methods = {
testForData: function(gallery) {
gallery = $( gallery ); // make sure we have it as a jQuery object.
Expand Down Expand Up @@ -532,23 +575,28 @@ jQuery(document).ready(function($) {

},

next : function(){
var slide = gallery.jp_carousel( 'nextSlide' );
container.animate({scrollTop:0}, 'fast');
next : function() {
this.jp_carousel( 'previousOrNext', 'nextSlide' );
},

if ( slide ) {
this.jp_carousel('selectSlide', slide);
}
previous : function() {
this.jp_carousel( 'previousOrNext', 'prevSlide' );
},

previous : function(){
var slide = gallery.jp_carousel( 'prevSlide' );
container.animate({scrollTop:0}, 'fast');
previousOrNext : function ( slideSelectionMethodName ) {
if ( ! this.jp_carousel( 'hasMultipleImages' ) ) {
return false;
}

var slide = gallery.jp_carousel( slideSelectionMethodName );

if ( slide ) {
this.jp_carousel('selectSlide', slide);
container.animate( { scrollTop: 0 }, 'fast' );
this.jp_carousel( 'clearCommentTextAreaValue' );
this.jp_carousel( 'selectSlide', slide );
}
},
},



selectedSlide : function(){
Expand Down Expand Up @@ -691,6 +739,15 @@ jQuery(document).ready(function($) {
caption.fadeOut( 'fast' ).empty();
}

// Record pageview in WP Stats, for each new image loaded full-screen.
if ( jetpackCarouselStrings.stats ) {
new Image().src = document.location.protocol +
'//pixel.wp.com/g.gif?' +
jetpackCarouselStrings.stats +
'&post=' + encodeURIComponent( attachmentId ) +
'&rand=' + Math.random();
}


// Load the images for the next and previous slides.
$( next ).add( previous ).each( function() {
Expand Down Expand Up @@ -964,9 +1021,48 @@ jQuery(document).ready(function($) {
return args.medium_file;
}

if ( isPhotonUrl ) {
// args.orig_file doesn't point to a Photon url, so in this case we use args.large_file
// to return the photon url of the original image.
var largeFileIndex = args.large_file.lastIndexOf( '?' );
var origPhotonUrl = args.large_file;
if ( -1 !== largeFileIndex ) {
origPhotonUrl = args.large_file.substring( 0, largeFileIndex );
// If we have a really large image load a smaller version
// that is closer to the viewable size
if ( args.orig_width > args.max_width || args.orig_height > args.max_height ) {
origPhotonUrl += '?fit=' + args.orig_max_width + '%2C' + args.orig_max_height;
}
}
return origPhotonUrl;
}

return args.orig_file;
},

getImageSizeParts: function( file, orig_width, isPhotonUrl ) {
var size = isPhotonUrl ?
file.replace( /.*=([\d]+%2C[\d]+).*$/, '$1' ) :
file.replace( /.*-([\d]+x[\d]+)\..+$/, '$1' );

var size_parts = ( size !== file ) ?
( isPhotonUrl ? size.split( '%2C' ) : size.split( 'x' ) ) :
[ orig_width, 0 ];

// If one of the dimensions is set to 9999, then the actual value of that dimension can't be retrieved from the url.
// In that case, we set the value to 0.
if ( '9999' === size_parts[0] ) {
size_parts[0] = '0';
}

if ( '9999' === size_parts[1] ) {
size_parts[1] = '0';
}

return size_parts;
},


originalDimensions: function() {
var splitted = $(this).data('orig-size').split(',');
return {width: parseInt(splitted[0], 10), height: parseInt(splitted[1], 10)};
Expand Down Expand Up @@ -1077,7 +1173,7 @@ jQuery(document).ready(function($) {
var $ul = $( '<ul class=\'jp-carousel-image-exif\'></ul>' );

$.each( meta, function( key, val ) {
if ( 0 === parseFloat(val) || !val.length || -1 === $.inArray( key, [ 'camera', 'aperture', 'shutter_speed', 'focal_length' ] ) ) {
if ( 0 === parseFloat(val) || !val.length || -1 === $.inArray( key, $.makeArray( jetpackCarouselStrings.meta_data ) ) ) {
return;
}

Expand Down Expand Up @@ -1367,39 +1463,10 @@ jQuery(document).ready(function($) {

// handle lightbox (single image gallery) for images linking to 'Attachment Page'
if ( 1 === Number( jetpackCarouselStrings.single_image_gallery ) ) {
// process links that contain img tag with attribute data-attachment-id
$( 'a img[data-attachment-id]' ).each(function() {
var container = $( this ).parent();

// skip if image was already added to gallery by shortcode
if( container.parent( '.gallery-icon' ).length ) {
return;
}

var valid = false;

// if link points to 'Media File' and flag is set allow it
if ( $( container ).attr( 'href' ) === $( this ).attr( 'data-orig-file' ) &&
1 === Number( jetpackCarouselStrings.single_image_gallery_media_file )
) {
valid = true;
}

// if link points to 'Attachment Page' allow it
if( $( container ).attr( 'href' ) === $( this ).attr( 'data-permalink' ) ) {
valid = true;
}

// links to 'Custom URL' or 'Media File' when flag not set are not valid
if( ! valid ) {
return;
}

// make this node a gallery recognizable by event listener above
$( container ).addClass( 'single-image-gallery' ) ;
// blog_id is needed to allow posting comments to correct blog
$( container ).data( 'carousel-extra', { blog_id: Number( jetpackCarouselStrings.blog_id ) } );
});
processSingleImageGallery();
$( document.body ).on( 'post-load', function() {
processSingleImageGallery();
} );
}

// Makes carousel work on page load and when back button leads to same URL with carousel hash (ie: no actual document.ready trigger)
Expand Down

0 comments on commit d9567d0

Please sign in to comment.