// window resize
window.addEventListener( 'resize', function() { self._resizeHandler(); } );
// keyboard navigation events
document.addEventListener( 'keydown', function( ev ) {
if ( self.isSlideshowVisible ) {
var keyCode = ev.keyCode || ev.which;
switch (keyCode) {
case 37:
self._navigate( 'prev' );
break;
case 39:
self._navigate( 'next' );
break;
case 27:
self._closeSlideshow();
break;
}
}
} );
// trick to prevent scrolling when slideshow is visible
window.addEventListener( 'scroll', function() {
if ( self.isSlideshowVisible ) {
window.scrollTo( self.scrollPosition ? self.scrollPosition.x : 0, self.scrollPosition ? self.scrollPosition.y : 0 );
}
else {
self.scrollPosition = { x : window.pageXOffset || docElem.scrollLeft, y : window.pageYOffset || docElem.scrollTop };
}
});
};
CBPGridGallery.prototype._openSlideshow = function( pos ) {
this.isSlideshowVisible = true;
this.current = pos;
classie.addClass( this.el, 'slideshow-open' );
/* position slideshow items */
// set viewport items (current, next and previous)
this._setViewportItems();
// add class "current" and "show" to currentItem
classie.addClass( this.currentItem, 'current' );
classie.addClass( this.currentItem, 'show' );
// add class show to next and previous items
// position previous item on the left side and the next item on the right side
if( this.prevItem ) {
classie.addClass( this.prevItem, 'show' );
var translateVal = Number( -1 * ( getViewportW() / 2 + this.prevItem.offsetWidth / 2 ) );
setTransform( this.prevItem, support.support3d ? 'translate3d(' + translateVal + 'px, 0, -150px)' : 'translate(' + translateVal + 'px)' );
}
if( this.nextItem ) {
classie.addClass( this.nextItem, 'show' );
var translateVal = Number( getViewportW() / 2 + this.nextItem.offsetWidth / 2 );
setTransform( this.nextItem, support.support3d ? 'translate3d(' + translateVal + 'px, 0, -150px)' : 'translate(' + translateVal + 'px)' );
}
};
CBPGridGallery.prototype._navigate = function( dir ) {
if( this.isAnimating ) return;
if( dir === 'next' && this.current === this.itemsCount - 1 || dir === 'prev' && this.current === 0 ) {
this._closeSlideshow();
return;
}
this.isAnimating = true;
// reset viewport items
this._setViewportItems();
var self = this,
itemWidth = this.currentItem.offsetWidth,
// positions for the centered/current item, both the side items and the incoming ones
transformLeftStr = support.support3d ? 'translate3d(-' + Number( getViewportW() / 2 + itemWidth / 2 ) + 'px, 0, -150px)' : 'translate(-' + Number( getViewportW() / 2 + itemWidth / 2 ) + 'px)',
transformRightStr = support.support3d ? 'translate3d(' + Number( getViewportW() / 2 + itemWidth / 2 ) + 'px, 0, -150px)' : 'translate(' + Number( getViewportW() / 2 + itemWidth / 2 ) + 'px)',
transformCenterStr = '', transformOutStr, transformIncomingStr,
// incoming item
incomingItem;
if( dir === 'next' ) {
transformOutStr = support.support3d ? 'translate3d( -' + Number( (getViewportW() * 2) / 2 + itemWidth / 2 ) + 'px, 0, -150px )' : 'translate(-' + Number( (getViewportW() * 2) / 2 + itemWidth / 2 ) + 'px)';
transformIncomingStr = support.support3d ? 'translate3d( ' + Number( (getViewportW() * 2) / 2 + itemWidth / 2 ) + 'px, 0, -150px )' : 'translate(' + Number( (getViewportW() * 2) / 2 + itemWidth / 2 ) + 'px)';
}
else {
transformOutStr = support.support3d ? 'translate3d( ' + Number( (getViewportW() * 2) / 2 + itemWidth / 2 ) + 'px, 0, -150px )' : 'translate(' + Number( (getViewportW() * 2) / 2 + itemWidth / 2 ) + 'px)';
transformIncomingStr = support.support3d ? 'translate3d( -' + Number( (getViewportW() * 2) / 2 + itemWidth / 2 ) + 'px, 0, -150px )' : 'translate(-' + Number( (getViewportW() * 2) / 2 + itemWidth / 2 ) + 'px)';
}
// remove class animatable from the slideshow grid (if it has already)
classie.removeClass( self.slideshow, 'animatable' );
if( dir === 'next' && this.current < this.itemsCount - 2 || dir === 'prev' && this.current > 1 ) {
// we have an incoming item!
incomingItem = this.slideshowItems[ dir === 'next' ? this.current + 2 : this.current - 2 ];
setTransform( incomingItem, transformIncomingStr );
classie.addClass( incomingItem, 'show' );
}
var slide = function() {
// add class animatable to the slideshow grid
classie.addClass( self.slideshow, 'animatable' );
// overlays:
classie.removeClass( self.currentItem, 'current' );
var nextCurrent = dir === 'next' ? self.nextItem : self.prevItem;
classie.addClass( nextCurrent, 'current' );