JezK

Edit File: jquery.flipster.js

/* jshint browser: true, jquery: true, devel: true */
/* global window, jQuery */

(function($, window, undefined) {
  'use strict';

function throttle(func, delay) {
      var timer = null;

return function() {
          var context = this,
              args = arguments;

if ( timer === null ) {
              timer = setTimeout(function() {
                  func.apply(context, args);
                  timer = null;
              }, delay);
          }
      };
  }

// Check for browser CSS support and cache the result for subsequent calls.
  var checkStyleSupport = (function() {
      var support = {};
      return function(prop) {
          if ( support[prop] !== undefined ) { return support[prop]; }

var div = document.createElement('div'),
              style = div.style,
              ucProp = prop.charAt(0).toUpperCase() + prop.slice(1),
              prefixes = ["webkit", "moz", "ms", "o"],
              props = (prop + ' ' + (prefixes).join(ucProp + ' ') + ucProp).split(' ');

for (var i in props) {
              if ( props[i] in style ) { return support[prop] = props[i]; }
          }

return support[prop] = false;
      };
  }());

var $window = $(window),

transformSupport = checkStyleSupport('transform'),

defaults = {
          itemContainer: 'ul',
          // [string|object]
          // Selector for the container of the flippin' items.

itemSelector: 'li',
          // [string|object]
          // Selector for children of `itemContainer` to flip

start: 'center',
          // ['center'|number]
          // Zero based index of the starting item, or use 'center' to start in the middle

fadeIn: 400,
          // [milliseconds]
          // Speed of the fade in animation after items have been setup

loop: false,
          // [true|false|number]
          // Loop around when the start or end is reached
          // If number, this is the number of items that will be shown when the beginning or end is reached

autoplay: false,
          // [false|milliseconds]
          // If a positive number, Flipster will automatically advance to next item after that number of milliseconds

pauseOnHover: true,
          // [true|false]
          // If true, autoplay advancement will pause when Flipster is hovered

style: 'coverflow',
          // [coverflow|carousel|flat|...]
          // Adds a class (e.g. flipster--coverflow) to the flipster element to switch between display styles
          // Create your own theme in CSS and use this setting to have Flipster add the custom class

spacing: -0.6,
          // [number]
          // Space between items relative to each item's width. 0 for no spacing, negative values to overlap

click: true,
          // [true|false]
          // Clicking an item switches to that item

keyboard: true,
          // [true|false]
          // Enable left/right arrow navigation

scrollwheel: true,
          // [true|false]
          // Enable mousewheel/trackpad navigation; up/left = previous, down/right = next

touch: true,
          // [true|false]
          // Enable swipe navigation for touch devices

nav: false,
          // [true|false|'before'|'after']
          // If not false, Flipster will build an unordered list of the items
          // Values true or 'before' will insert the navigation before the items, 'after' will append the navigation after the items

buttons: false,
          // [true|false|'custom']
          // If true, Flipster will insert Previous / Next buttons with SVG arrows
          // If 'custom', Flipster will not insert the arrows and will instead use the values of `buttonPrev` and `buttonNext`

buttonPrev: 'Previous',
          // [text|html]
          // Changes the text for the Previous button

buttonNext: 'Next',
          // [text|html]
          // Changes the text for the Next button

onItemSwitch: false
          // [function]
          // Callback function when items are switched
          // Arguments received: [currentItem, previousItem]
      },

classes = {
          main: 'flipster',
          active: 'flipster--active',
          container: 'flipster__container',

nav: 'flipster__nav',
          navChild: 'flipster__nav__child',
          navItem: 'flipster__nav__item',
          navLink: 'flipster__nav__link',
          navCurrent: 'flipster__nav__item--current',
          navCategory: 'flipster__nav__item--category',
          navCategoryLink: 'flipster__nav__link--category',

button: 'flipster__button',
          buttonPrev: 'flipster__button--prev',
          buttonNext: 'flipster__button--next',

item: 'flipster__item',
          itemCurrent: 'flipster__item--current',
          itemPast: 'flipster__item--past',
          itemFuture: 'flipster__item--future',
          itemContent: 'flipster__item__content'
      },

classRemover = new RegExp('\\b(' + classes.itemCurrent + '|' + classes.itemPast + '|' + classes.itemFuture + ')(.*?)(\\s|$)', 'g'),
      whiteSpaceRemover = new RegExp('\\s\\s+', 'g');

$.fn.flipster = function(options) {
      var isMethodCall = (typeof options === 'string' ? true : false);

if ( isMethodCall ) {
          var args = Array.prototype.slice.call(arguments, 1);
          return this.each(function() {
              var methods = $(this).data('methods');
              if ( methods[options] ) {
                  return methods[options].apply(this, args);
              } else {
                  return this;
              }
          });
      }

var settings = $.extend({}, defaults, options);

return this.each(function() {

var self = $(this),
              methods,

_container,
              _containerWidth,

_items,
              _itemOffsets = [],
              _currentItem,
              _currentIndex = 0,

_nav,
              _navItems,
              _navLinks,

_playing = false,
              _startDrag = false,
              _isItemClicked = false;

function buildButtonContent(dir) {
              var text = ( dir === 'next' ? settings.buttonNext : settings.buttonPrev );

if ( settings.buttons === 'custom' || !svgSupport ) { return text; }

return '<svg viewBox="0 0 13 20" xmlns="' + svgNS + '" aria-labelledby="title"><title>' + text + '</title><polyline points="10,3 3,10 10,17"' + (dir === 'next' ? ' transform="rotate(180 6.5,10)"' : '') + '/></svg>';
          }

function buildButton(dir) {
              dir = dir || 'next';

return $('<button class="' + classes.button + ' ' + ( dir === 'next' ? classes.buttonNext : classes.buttonPrev ) + '" role="button" />')
                  .html(buildButtonContent(dir))
                  .on('click', function(e) {
                      jump(dir);
                      e.preventDefault();
                  });

}

function buildButtons() {
              if ( settings.buttons && _items.length > 1 ) {
                  self.find('.' + classes.button).remove();
                  self.append(buildButton('prev'), buildButton('next'));
              }
          }

function buildNav() {
              var navCategories = {};

if ( !settings.nav || _items.length <= 1 ) { return; }

if ( _nav ) { _nav.remove(); }

_nav = $('<ul class="' + classes.nav + '" role="navigation" />');
              _navLinks = $('');

_items.each(function(i) {
                  var item = $(this),
                      category = item.data('flip-category'),
                      itemTitle = item.data('flip-title') || item.attr('title') || i,
                      navLink = $('<a href="#" class="' + classes.navLink + '">' + itemTitle + '</a>')
                      .data('index', i);

_navLinks = _navLinks.add(navLink);

if ( category ) {

if ( !navCategories[category] ) {

var categoryItem = $('<li class="' + classes.navItem + ' ' + classes.navCategory + '">');
                          var categoryLink = $('<a href="#" class="' + classes.navLink + ' ' + classes.navCategoryLink + '" data-flip-category="' + category + '">' + category + '</a>')
                                  .data('category', category)
                                  .data('index', i);

navCategories[category] = $('<ul class="' + classes.navChild + '" />');

_navLinks = _navLinks.add(categoryLink);

categoryItem
                              .append(categoryLink, navCategories[category])
                              .appendTo(_nav);
                      }

navCategories[category].append(navLink);
                  } else {
                      _nav.append(navLink);
                  }

navLink.wrap('<li class="' + classes.navItem + '">');

});

_nav.on('click', 'a', function(e) {
                  var index = $(this).data('index');
                  if ( index >= 0 ) {
                      jump(index);
                      e.preventDefault();
                  }
              });

if ( settings.nav === 'after' ) { self.append(_nav); }
              else { self.prepend(_nav); }

_navItems = _nav.find('.' + classes.navItem);
          }

function updateNav() {
              if ( settings.nav ) {

var category = _currentItem.data('flip-category');

_navItems.removeClass(classes.navCurrent);

_navLinks
                      .filter(function() {
                          return ($(this).data('index') === _currentIndex || (category && $(this).data('category') === category));
                      })
                      .parent()
                      .addClass(classes.navCurrent);

}
          }

function noTransition() {
              self.css('transition', 'none');
              _container.css('transition', 'none');
              _items.css('transition', 'none');
          }

function resetTransition() {
              self.css('transition', '');
              _container.css('transition', '');
              _items.css('transition', '');
          }

function calculateBiggestItemHeight() {
              var biggestHeight = 0,
                  itemHeight;

_items.each(function() {
                  itemHeight = $(this).height();
                  if ( itemHeight > biggestHeight ) { biggestHeight = itemHeight; }
              });
              return biggestHeight;
          }

function resize(skipTransition) {

//check for hidden parents
              
              if(hasHiddenParent() == true)
              return(false);

if ( skipTransition ) { noTransition(); }

_containerWidth = _container.width();
             
              _container.height(calculateBiggestItemHeight());

_items.each(function(i) {
                  var item = $(this),
                      width,
                      left;

item.attr('class', function(i, c) {
                      return c && c.replace(classRemover, '').replace(whiteSpaceRemover, ' ');
                  });

width = item.outerWidth();

if ( settings.spacing !== 0 ) {
                      item.css('margin-right', ( width * settings.spacing ) + 'px');
                  }

left = item.position().left;
                  _itemOffsets[i] = -1 * ((left + (width / 2)) - (_containerWidth / 2));

if ( i === _items.length - 1 ) {
                      center();
                      if ( skipTransition ) { setTimeout(resetTransition, 1); }
                  }
              });
          }

function center() {
              var total = _items.length,
                  loopCount = ( settings.loop !== true && settings.loop > 0 ? settings.loop : false ),
                  item, newClass, zIndex, past, offset;

if ( _currentIndex >= 0 ) {

_items.each(function(i) {
                      item = $(this);
                      newClass = ' ';

if ( i === _currentIndex ) {
                          newClass += classes.itemCurrent;
                          zIndex = (total + 2);
                      } else {
                          past = ( i < _currentIndex ? true : false );
                          offset = ( past ? _currentIndex - i : i - _currentIndex );

if ( loopCount ) {
                              if ( _currentIndex <= loopCount && i > _currentIndex + loopCount ) {
                                  past = true;
                                  offset = (total + _currentIndex) - i;
                              } else if ( _currentIndex >= total - loopCount && i < _currentIndex - loopCount ) {
                                  past = false;
                                  offset = (total - _currentIndex) + i;
                              }
                          }

newClass += (past ?
                              classes.itemPast + ' ' + classes.itemPast + '-' + offset :
                              classes.itemFuture + ' ' + classes.itemFuture + '-' + offset
                          );

zIndex = total - offset;
                      }

item
                          .css('z-index', zIndex * 2)
                          .attr('class', function(i, c) {
                              return c && c.replace(classRemover, '').replace(whiteSpaceRemover, ' ') + newClass;
                          });
                  });

if ( !_containerWidth || _itemOffsets[_currentIndex] === undefined ) { resize(true); }

if ( transformSupport ) {
                      _container.css('transform', 'translateX(' + _itemOffsets[_currentIndex] + 'px)');
                  } else {
                      _container.css('left', _itemOffsets[_currentIndex] + 'px' );
                  }
              }

updateNav();
          }

function jump(to) {
              var _previous = _currentIndex;

if ( _items.length <= 1 ) { return; }

if ( to === 'prev' ) {
                  if ( _currentIndex > 0 ) { _currentIndex--; }
                  else if ( settings.loop ) { _currentIndex = _items.length - 1; }
              } else if ( to === 'next' ) {
                  if ( _currentIndex < _items.length - 1 ) { _currentIndex++; }
                  else if ( settings.loop ) { _currentIndex = 0; }
              } else if ( typeof to === 'number' ) { _currentIndex = to;
              } else if ( to !== undefined ) {
                  // if object is sent, get its index
                  _currentIndex = _items.index(to);
              }

_currentItem = _items.eq(_currentIndex);

if ( _currentIndex !== _previous && settings.onItemSwitch ) {
                  settings.onItemSwitch.call(self, _items[_currentIndex], _items[_previous]);
              }

center();

return self;
          }

function play(interval) {
              settings.autoplay = interval || settings.autoplay;

clearInterval(_playing);

_playing = setInterval(function() {
                  var prev = _currentIndex;
                  jump('next');
                  if ( prev === _currentIndex && !settings.loop ) { clearInterval(_playing); }
              }, settings.autoplay);

return self;
          }

function pause() {
              clearInterval(_playing);
              if ( settings.autoplay ) { _playing = -1; }

return self;
          }

function show() {
              resize(true);
              self.hide()
                  .css('visibility', '')
                  .addClass(classes.active)
                  .fadeIn(settings.fadeIn);
          }

function index() {

_container = self.find(settings.itemContainer).addClass(classes.container);

_items = _container.find(settings.itemSelector);

if ( _items.length <= 1 ) { return; }

_items
                  .addClass(classes.item)
                  // Wrap inner content
                  .each(function() {
                      var item = $(this);
                      if ( !item.children('.' + classes.itemContent ).length) {
                          item.wrapInner('<div class="' + classes.itemContent + '" />');
                      }
                  });

// Navigate directly to an item by clicking
              if ( settings.click ) {
                  _items.on('click.flipster touchend.flipster', function(e) {
                      
                      if ( !_startDrag ) {
                          if ( !$(this).hasClass(classes.itemCurrent) ) { e.preventDefault(); }
                          jump(this);
                      }
                  });
              }

// Insert navigation if enabled.
              buildButtons();
              buildNav();

if ( _currentIndex >= 0 ) { jump(_currentIndex); }

return self;
          }

function wheelEvents(elem) {
              if ( settings.scrollwheel ) {
                  var _wheelInside = false,
                      _actionThrottle = 0,
                      _throttleTimeout = 0,
                      _delta = 0,
                      _dir, _lastDir;

elem
                      .on('mousewheel.flipster wheel.flipster', function() { _wheelInside = true; })
                      .on('mousewheel.flipster wheel.flipster', throttle(function(e) {

// Reset after a period without scrolling.
                          clearTimeout(_throttleTimeout);
                          _throttleTimeout = setTimeout(function() {
                              _actionThrottle = 0;
                              _delta = 0;
                          }, 300);

e = e.originalEvent;

// Add to delta (+=) so that continuous small events can still get past the speed limit, and quick direction reversals get cancelled out
                          _delta += (e.wheelDelta || (e.deltaY + e.deltaX) * -1); // Invert numbers for Firefox

// Don't trigger unless the scroll is decent speed.
                          if ( Math.abs(_delta) < 25 ) { return; }

_actionThrottle++;

_dir = (_delta > 0 ? 'prev' : 'next');

// Reset throttle if direction changed.
                          if ( _lastDir !== _dir ) { _actionThrottle = 0; }
                          _lastDir = _dir;

// Regular scroll wheels trigger less events, so they don't need to be throttled. Trackpads trigger many events (inertia), so only trigger jump every three times to slow things down.
                          if ( _actionThrottle < 6 || _actionThrottle % 3 === 0 ) { jump(_dir); }

_delta = 0;

}, 50));

// Disable mousewheel on window if event began in elem.
                  elem.on('mousewheel.flipster wheel.flipster', function(e) {
                      if ( _wheelInside ) {
                          e.preventDefault();
                          _wheelInside = false;
                      }
                  });
              }
          }

function touchEvents(elem) {
              
              if ( settings.touch ) {
                  
                  var _startDragY, _startDragX = false,
                  _touchJump = throttle(jump, 300),
                  x, y, offsetY, offsetX;
                  
                  var lastPosition = _itemOffsets[_currentIndex];   
                  var isMousePressed = false;

elem.on({

'touchstart.flipster': function(e) {
                      
                          e = e.originalEvent;
                          _startDragX = (e.touches ? e.touches[0].clientX : e.clientX);
                          _startDragY = (e.touches ? e.touches[0].clientY : e.clientY);
                          //e.preventDefault();
                          lastPosition = _itemOffsets[_currentIndex];
                          _isItemClicked = true;
                      },

'touchmove.flipster': function(e) {
                  
                          if ( _startDragX !== false ) {
                              e = e.originalEvent;

x = (e.touches ? e.touches[0].clientX : e.clientX);
                              y = (e.touches ? e.touches[0].clientY : e.clientY);
                              offsetY = y - _startDragY;
                              offsetX = x - _startDragX;

if(settings.style != 'flat'){

if ( Math.abs(offsetY) < 100 && Math.abs(offsetX) >= 30 ) {
                                      _touchJump((offsetX < 0 ? 'next' : 'prev'));
                                      _startDragX = x;
                                      // e.preventDefault();
                                  }
                                  
                              }

//swipe settings
                              if(settings.style == 'flat'){

if ( Math.abs(offsetY) < 100 && Math.abs(offsetX) >= 30) {
                                      
                                      // e.preventDefault();              
                                      
                                      _container.css('transform', 'translateX(' + (lastPosition + offsetX) + 'px)');    
                                      _container.css('transition', '0s');  
                                      _isItemClicked = false;
                                          
                                  }

}

}
                      },

'touchend.flipster touchcancel.flipster ': function() {
                    
                          //swipe settings
                          if(settings.style == 'flat'){

if(Math.abs(offsetX) >= 30){
                                  
                                  lastPosition += offsetX;
                                  
                                  var closestItemCoord = _itemOffsets.reduce((a, b) => {
                                      return Math.abs(b - lastPosition) < Math.abs(a - lastPosition) ? b : a;
                                  });           
                                                                                                           
                                  var selectedIndex = _itemOffsets.indexOf(closestItemCoord)
                                                                  
                                  if(_isItemClicked == false)
                                  jump(selectedIndex);         
                                  
                                  _container.css('transition', ''); 
                                  lastPosition = closestItemCoord;

}

_startDragX = false; 
                          
                      },

});

elem.parents('.'+classes.main).on({

'mousedown.flipster': function(e) {

var objTarget = jQuery(e.target);
                          var isButtonClicked = objTarget.hasClass(classes.button) || objTarget.parents().hasClass(classes.button);

if(isButtonClicked == false){

_isItemClicked = true;

e = e.originalEvent;
                              _startDragX = e.clientX;
                              _startDragY = e.clientY;
                                
                              isMousePressed = true;
                              lastPosition = _itemOffsets[_currentIndex]; 
  
                              e.preventDefault();
                              
                              _items.css('cursor', 'grab');

}
                       
                      },

'mousemove.flipster': function(e) {

var objTarget = jQuery(e.target);
                          var isButtonClicked = objTarget.hasClass(classes.button) || objTarget.parents().hasClass(classes.button);
                          
                          if(isButtonClicked == false){

if ( _startDragX !== false ) {
                                  e = e.originalEvent;
  
                                  x = e.clientX;
                                  y = e.clientY;
                                  offsetY = y - _startDragY;
                                  offsetX = x - _startDragX;
  
                                  //drag settings
                                  if(settings.style == 'flat'){
  
                                      if ( Math.abs(offsetY) < 100 && Math.abs(offsetX) >= 30) {
                                          
                                          e.preventDefault();           
                                             
                                          _container.css('transform', 'translateX(' + (lastPosition + offsetX) + 'px)');   
                                          
                                          _container.css('transition', '0s');    
                                        
                                          _isItemClicked = false;
                                              
                                      }
  
                                  }
  
                              }

}
                      },

'mouseup.flipster': function(e) {

var objTarget = jQuery(e.target);
                          var isButtonClicked = objTarget.hasClass(classes.button) || objTarget.parents().hasClass(classes.button);

//swipe settings
                          if(settings.style == 'flat' && isButtonClicked == false){
                              
                              if(isMousePressed == true && Math.abs(offsetX) >= 30){
                               
                                  lastPosition += offsetX;
                                  
                                  var closestItemCoord = _itemOffsets.reduce((a, b) => {
                                      return Math.abs(b - lastPosition) < Math.abs(a - lastPosition) ? b : a;
                                  });
                                                                                                                      
                                  var selectedIndex = _itemOffsets.indexOf(closestItemCoord);

_items.css('cursor', '');  
                                  _container.css('transition', '');  
                               
                                  if(_isItemClicked == false)
                                  jump(selectedIndex);
                                  
                                  lastPosition = closestItemCoord;
                                  
                                  isMousePressed = false;
                                  
                              }                                
                              
                              _startDragX = false; 
                          }

},
                      
                      'mouseleave.flipster': function() {
  
                          //swipe settings
                          if(settings.style == 'flat'){
  
                              if(isMousePressed == true && Math.abs(offsetX) >= 30){
                                  
                                  _container.css('transform', 'translateX(' + lastPosition + 'px)');

_items.css('cursor', '');  
                                  _container.css('transition', '');  
                                  
                                  isMousePressed = false;      
  
                              }
                              
                              _startDragX = false; 
                          }
  
                          
                      },

});
              }
          }

/*
          * potection from hidden parent
          */
          function hasHiddenParent(){

var objParents = self.parents();
            var hasHiddenParent = false;
            
            objParents.each(function(){

var objParent = jQuery(this);
              var isParentVisible = objParent.is(":visible");

if(isParentVisible == false)
              hasHiddenParent = true;

});

return(hasHiddenParent);
            
          }

function init() {

var style;

self.css('visibility', 'hidden');

index();

if ( _items.length <= 1 ) {
                  self.css('visibility', '');
                  return;
              }

style = (settings.style ? 'flipster--' + settings.style.split(' ').join(' flipster--') : false);

self.addClass([
                  classes.main,
                  (transformSupport ? 'flipster--transform' : ' flipster--no-transform'),
                  style, // 'flipster--'+settings.style : '' ),
                  (settings.click ? 'flipster--click' : '')
              ].join(' '));

// Set the starting item
              if ( settings.start ) {
                  // Find the middle item if start = center
                  _currentIndex = ( settings.start === 'center' ? Math.floor(_items.length / 2) : settings.start );
              }

jump(_currentIndex);

var images = self.find('img');

if ( images.length ) {
                  var imagesLoaded = 0;

// Resize after all images have loaded.
                  images.on('load', function() {
                      imagesLoaded++;
                      if ( imagesLoaded >= images.length ) { show(); }
                  });

// Fallback to show Flipster while images load in case it takes a while.
                  setTimeout(show, 750);
              } else {
                  show();
              }

// Attach event bindings.
              $window.on('resize.flipster', throttle(resize, 400));

if ( settings.autoplay ) { play(); }

if ( settings.pauseOnHover ) {
                  _container
                      .on('mouseenter.flipster', pause)
                      .on('mouseleave.flipster', function() {
                          if ( _playing === -1 ) { play(); }
                      });
              }

keyboardEvents(self);
              wheelEvents(_container);
              touchEvents(_container);
          }

// public methods
          methods = {
              jump: jump,
              next: function() { return jump('next'); },
              prev: function() { return jump('prev'); },
              play: play,
              pause: pause,
              index: index
          };
          self.data('methods', methods);

// Initialize if flipster is not already active.
          if ( !self.hasClass(classes.active) ) { init(); }

});
  };
})(jQuery, window);