From ea230e0c05391c460affa4ee1b281b0972523385 Mon Sep 17 00:00:00 2001 From: msigley Date: Thu, 24 Mar 2016 10:13:27 -0400 Subject: [PATCH 1/5] Fixed live NodeList bug in IE #26, #45, #60. Made the element selection more performant. --- ideal-image-slider.js | 35 ++++++++++++++++++++++++++++++++--- 1 file changed, 32 insertions(+), 3 deletions(-) diff --git a/ideal-image-slider.js b/ideal-image-slider.js index f8889b4..d6d2ff3 100644 --- a/ideal-image-slider.js +++ b/ideal-image-slider.js @@ -440,14 +440,37 @@ var IdealImageSlider = (function() { } // Slider (container) element - var sliderEl = document.querySelector(this.settings.selector); + 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]; + } + + // Fallback to querySelector + if (!sliderEl) + sliderEl = document.querySelector(this.settings.selector); + + console.log(sliderEl); if (!sliderEl) return null; // 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) { + console.log(slide); if (slide instanceof HTMLImageElement || slide instanceof HTMLAnchorElement) { var slideEl = document.createElement('a'), href = '', @@ -542,7 +565,13 @@ var IdealImageSlider = (function() { }.bind(this)); // Touch Navigation - if (('ontouchstart' in window) || window.DocumentTouch && document instanceof DocumentTouch) { + if (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'; From 4524a11c14bf003a7c1c07d8e33e581e37f2183e Mon Sep 17 00:00:00 2001 From: msigley Date: Thu, 24 Mar 2016 16:06:19 -0400 Subject: [PATCH 2/5] Added length property for testing for empty objects. Fixed querySelector fallback. Removed debugging calls. Added support for the Media Query 4 shim for more accurate touch support detection in chrome. --- ideal-image-slider.js | 25 +++++++++++++++++-------- 1 file changed, 17 insertions(+), 8 deletions(-) diff --git a/ideal-image-slider.js b/ideal-image-slider.js index d6d2ff3..ab2fc9b 100644 --- a/ideal-image-slider.js +++ b/ideal-image-slider.js @@ -431,6 +431,7 @@ var IdealImageSlider = (function() { beforeChange: function() {}, afterChange: function() {} }; + this.length = 0; // Parse args if (typeof args === 'string') { @@ -456,21 +457,22 @@ var IdealImageSlider = (function() { } else if ((s = selectionType[1])) { if ((elem = document.getElementsByClassName( s ))) sliderEl = elem[0]; - } - - // Fallback to querySelector - if (!sliderEl) + } else { sliderEl = document.querySelector(this.settings.selector); + } - console.log(sliderEl); - if (!sliderEl) return null; + if (!sliderEl) { + return null; + } + + //Add loading class + _addClass(sliderEl, 'iis-loading'); // Slides var origChildren = _toArray(sliderEl.cloneNode(true).children), //ensure slideEl is a static nodeList validSlides = []; sliderEl.innerHTML = ''; Array.prototype.forEach.call(origChildren, function(slide, i) { - console.log(slide); if (slide instanceof HTMLImageElement || slide instanceof HTMLAnchorElement) { var slideEl = document.createElement('a'), href = '', @@ -535,6 +537,9 @@ var IdealImageSlider = (function() { return null; } + // Set length + this.length = 1; + // Create navigation if (!this.settings.disableNav) { var previousNav, nextNav; @@ -565,7 +570,7 @@ var IdealImageSlider = (function() { }.bind(this)); // Touch Navigation - if (typeof(jQuery.supportsTrueHover) == 'function' ? + if ( (typeof jQuery !== 'undefined' && typeof(jQuery.supportsTrueHover)) == 'function' ? !jQuery.supportsTrueHover() : !!('ontouchstart' in window) || !!('ontouchstart' in document.documentElement) @@ -656,6 +661,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) { From 35b2cd8f8e72deca90bc7fd134eb89de4aa1f202 Mon Sep 17 00:00:00 2001 From: Matthew Sigley Date: Wed, 16 Nov 2016 16:09:46 -0500 Subject: [PATCH 3/5] Fixed indentation --- ideal-image-slider.js | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/ideal-image-slider.js b/ideal-image-slider.js index ab2fc9b..c188e98 100644 --- a/ideal-image-slider.js +++ b/ideal-image-slider.js @@ -571,12 +571,12 @@ var IdealImageSlider = (function() { // Touch Navigation 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)) { + !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'; @@ -867,4 +867,4 @@ var IdealImageSlider = (function() { Slider: Slider }; -})(); \ No newline at end of file +})(); From 16055f38e23aab7a4a0675c3365c54f6a4d02fe7 Mon Sep 17 00:00:00 2001 From: Matthew Sigley Date: Wed, 21 Feb 2018 13:20:27 -0500 Subject: [PATCH 4/5] Prevent a slider from being started twice. --- ideal-image-slider.js | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/ideal-image-slider.js b/ideal-image-slider.js index c188e98..9547b2c 100644 --- a/ideal-image-slider.js +++ b/ideal-image-slider.js @@ -681,6 +681,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); From d66a4b5c038f1eed60355a6d16dd2b339c89d924 Mon Sep 17 00:00:00 2001 From: Matthew Sigley Date: Thu, 8 Mar 2018 13:20:59 -0500 Subject: [PATCH 5/5] Fixed slider bullet nav support on touch enabled devices. Fixed slider initial size calulation for aspect ratio heights. --- ideal-image-slider.js | 35 +++++++++++++++++++++-------------- 1 file changed, 21 insertions(+), 14 deletions(-) diff --git a/ideal-image-slider.js b/ideal-image-slider.js index 9547b2c..6a87301 100644 --- a/ideal-image-slider.js +++ b/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; } }, @@ -432,7 +440,7 @@ var IdealImageSlider = (function() { afterChange: function() {} }; this.length = 0; - + // Parse args if (typeof args === 'string') { this.settings.selector = args; @@ -571,12 +579,12 @@ var IdealImageSlider = (function() { // Touch Navigation 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)) { + !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'; @@ -622,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() {