Various Fixes

ideal-image-slider.js

@@ -1,9 +1,13 @@
 /*
- * Ideal Image Slider v1.5.1
+ * Ideal Image Slider v1.6.0
  *
  * By Gilbert Pellegrom
  * http://gilbert.pellegrom.me
+ * v1.6.0+ By Matthew Sigley
+ * https://github.com/msigley/
  *
+ * Copyright (C) 2017 Matthew Sigley
+ * https://github.com/msigley/
  * Copyright (C) 2014 Dev7studios
  * https://raw.githubusercontent.com/gilbitron/Ideal-Image-Slider/master/LICENSE
  */
@@ -242,7 +246,8 @@ var IdealImageSlider = (function() {
 			start: {},
 			delta: {},
 			isScrolling: undefined,
-			direction: null
+			direction: null,
+			moved: false
 		},
 
 		start: function(event) {
@@ -282,6 +287,7 @@ var IdealImageSlider = (function() {
 			// If user is not trying to scroll vertically
 			if (!_touch.vars.isScrolling) {
 				event.preventDefault(); // Prevent native scrolling
+				_touch.vars.moved = true;
 
 				_translate(this._attributes.previousSlide, _touch.vars.delta.x - this._attributes.previousSlide.offsetWidth, 0);
 				_translate(this._attributes.currentSlide, _touch.vars.delta.x, 0);
@@ -301,7 +307,7 @@ var IdealImageSlider = (function() {
 			var speed = this.settings.transitionDuration ? this.settings.transitionDuration / 2 : 0;
 
 			// If not scrolling vertically
-			if (!_touch.vars.isScrolling) {
+			if (!_touch.vars.isScrolling && _touch.vars.moved) {
 				if (isChangeSlide) {
 					_touch.vars.direction = direction;
 
@@ -331,6 +337,8 @@ var IdealImageSlider = (function() {
 						_removeClass(this._attributes.container, this.settings.classes.animating);
 					}.bind(this), speed);
 				}
+
+				_touch.vars.moved = false;
 			}
 		},
 
@@ -431,7 +439,8 @@ var IdealImageSlider = (function() {
 			beforeChange: function() {},
 			afterChange: function() {}
 		};
-
+		this.length = 0;
+
 		// Parse args
 		if (typeof args === 'string') {
 			this.settings.selector = args;
@@ -440,11 +449,35 @@ var IdealImageSlider = (function() {
 		}
 
 		// Slider (container) element
-		var sliderEl = document.querySelector(this.settings.selector);
-		if (!sliderEl) return null;
+		var sliderEl = false,
+			rquickExpr =  /^(?:#([\w-]+)|(\w+)|\.([\w-]+))$/,
+			selectionType = rquickExpr.exec( this.settings.selector ),
+			s, elem;
+
+		// Handle ID, Name, and Class selection
+		if ((s = selectionType[1])) {
+			// getElementById can match elements by name instead of ID
+			if ((elem = document.getElementById( s )) && elem.id === s)
+				sliderEl = elem;
+		} else if (selectionType[2]) {
+			if ((elem = document.getElementsByTagName( this.settings.selector )))
+				sliderEl = elem[0];
+		} else if ((s = selectionType[1])) {
+			if ((elem = document.getElementsByClassName( s )))
+				sliderEl = elem[0];
+		} else {
+			sliderEl = document.querySelector(this.settings.selector);
+		}
+
+		if (!sliderEl) {
+			return null;
+		}
+
+		//Add loading class
+		_addClass(sliderEl, 'iis-loading');
 
 		// Slides
-		var origChildren = _toArray(sliderEl.children),
+		var origChildren = _toArray(sliderEl.cloneNode(true).children), //ensure slideEl is a static nodeList
 			validSlides = [];
 		sliderEl.innerHTML = '';
 		Array.prototype.forEach.call(origChildren, function(slide, i) {
@@ -512,6 +545,9 @@ var IdealImageSlider = (function() {
 			return null;
 		}
 
+		// Set length
+		this.length = 1;
+
 		// Create navigation
 		if (!this.settings.disableNav) {
 			var previousNav, nextNav;
@@ -542,7 +578,13 @@ var IdealImageSlider = (function() {
 			}.bind(this));
 
 			// Touch Navigation
-			if (('ontouchstart' in window) || window.DocumentTouch && document instanceof DocumentTouch) {
+			if ( (typeof jQuery !== 'undefined' && typeof(jQuery.supportsTrueHover)) == 'function' ?
+	!jQuery.supportsTrueHover() :
+	!!('ontouchstart' in window) 
+	|| !!('ontouchstart' in document.documentElement) 
+	|| !!window.ontouchstart 
+	|| (!!window.Touch && !!window.Touch.length) 
+	|| !!window.onmsgesturechange || (window.DocumentTouch && window.document instanceof window.DocumentTouch)) {
 				this.settings.effect = 'slide';
 				previousNav.style.display = 'none';
 				nextNav.style.display = 'none';
@@ -588,17 +630,16 @@ var IdealImageSlider = (function() {
 		if (_isInteger(this.settings.height)) {
 			this._attributes.container.style.height = this.settings.height + 'px';
 		} else {
-			if (_isInteger(this.settings.initialHeight)) {
-				this._attributes.container.style.height = this.settings.initialHeight + 'px';
-			}
-
 			// If aspect ratio parse and store
 			if (this.settings.height.indexOf(':') > -1) {
 				var aspectRatioParts = this.settings.height.split(':');
 				if (aspectRatioParts.length == 2 && _isInteger(parseInt(aspectRatioParts[0], 10)) && _isInteger(parseInt(aspectRatioParts[1], 10))) {
 					this._attributes.aspectWidth = parseInt(aspectRatioParts[0], 10);
 					this._attributes.aspectHeight = parseInt(aspectRatioParts[1], 10);
+					this._attributes.container.style.height = Math.round( (this._attributes.aspectHeight / this._attributes.aspectWidth) * this._attributes.container.offsetWidth ) + 'px';
 				}
+			} else if (_isInteger(this.settings.initialHeight)) {
+				this._attributes.container.style.height = this.settings.initialHeight + 'px';
 			}
 
 			_addEvent(window, 'resize', function() {
@@ -627,6 +668,10 @@ var IdealImageSlider = (function() {
 		// Preload next images
 		_loadImg(this._attributes.previousSlide);
 		_loadImg(this._attributes.nextSlide);
+
+		//Remove loading class
+		_removeClass(sliderEl, 'iis-loading');
+		_addClass(sliderEl, 'iis-loaded');
 	};
 
 	Slider.prototype.get = function(attribute) {
@@ -643,6 +688,10 @@ var IdealImageSlider = (function() {
 
 	Slider.prototype.start = function() {
 		if (!this._attributes) return;
+		if (this._attributes.timerId) {
+			clearInterval(this._attributes.timerId);
+			this._attributes.timerId = 0;
+		}
 		this._attributes.timerId = setInterval(this.nextSlide.bind(this), this.settings.interval);
 		this.settings.onStart.apply(this);
 
@@ -829,4 +878,4 @@ var IdealImageSlider = (function() {
 		Slider: Slider
 	};
 
-})();
+})();