Skip to content
This repository has been archived by the owner on Feb 8, 2022. It is now read-only.

Commit

Permalink
Bugfix IE10
Browse files Browse the repository at this point in the history
  • Loading branch information
thomasmester committed Mar 9, 2020
1 parent 76304a3 commit 4b46d73
Show file tree
Hide file tree
Showing 7 changed files with 158 additions and 43 deletions.
76 changes: 60 additions & 16 deletions dist/a11y-carousel.min.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -115,6 +115,37 @@ if (window.NodeList && !NodeList.prototype.forEach) {
}
};
}
if (typeof Object.assign !== 'function') {
// Must be writable: true, enumerable: false, configurable: true
Object.defineProperty(Object, "assign", {
value: function assign(target, varArgs) {
// .length of function is 2
'use strict';

if (target === null || target === undefined) {
throw new TypeError('Cannot convert undefined or null to object');
}

var to = Object(target);

for (var index = 1; index < arguments.length; index++) {
var nextSource = arguments[index];

if (nextSource !== null && nextSource !== undefined) {
for (var nextKey in nextSource) {
// Avoid bugs when hasOwnProperty is shadowed
if (Object.prototype.hasOwnProperty.call(nextSource, nextKey)) {
to[nextKey] = nextSource[nextKey];
}
}
}
}
return to;
},
writable: true,
configurable: true
});
}
/**
* TinyGesture.js
*
Expand Down Expand Up @@ -350,6 +381,7 @@ try {
//@prepros-prepend lib/Array.from.js
//@prepros-prepend lib/Debounce.js
//@prepros-prepend lib/NodeList.forEach.js
//@prepros-prepend lib/Object.assign.js
//@prepros-prepend lib/TinyGesture.js

var A11yCarousel = function A11yCarousel(selector, userSettings) {
Expand All @@ -360,19 +392,21 @@ var A11yCarousel = function A11yCarousel(selector, userSettings) {
this.setSlider = debounce(function () {
var sliderIndex = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;

// If current slider do nothing
if (_this4._sliderIndex == sliderIndex) {
return null;
}
// If last slider, got to the first one
if (sliderIndex >= _this4._slides.length) {
sliderIndex = 0;
}

// If first slider, got to the last one
if (sliderIndex < 0) {
sliderIndex = _this4._slides.length - 1;
}

// If current slider do nothing
if (_this4._sliderIndex == sliderIndex) {
return null;
}

// Annimation
var oldIndex = _this4._sliderIndex;
var newIndex = sliderIndex;
Expand All @@ -389,8 +423,10 @@ var A11yCarousel = function A11yCarousel(selector, userSettings) {
dots.forEach(function (item) {
if (item.getAttribute('slider-id') == newIndex) {
item.classList.add('active');
item.setAttribute('tabindex', 0);
} else {
item.classList.remove('active');
item.setAttribute('tabindex', -1);
}
});
}
Expand All @@ -401,25 +437,29 @@ var A11yCarousel = function A11yCarousel(selector, userSettings) {
_this4._slides[newIndex].style.zIndex = 2;
_this4._slides[oldIndex].style.opacity = null;
_this4._slides[oldIndex].style.display = 'none';
}, _this4.getSettings().transitionSpeed + 100); // Need more time than transitionSpeed to avoid annimation glitches
}, parseInt(_this4.getSettings().transitionSpeed) + 100); // Need more time than transitionSpeed to avoid annimation glitches
}, 200);

this.initSlidesSize = function () {
var imgs = Array.from(_this4._element.querySelectorAll('img'));

// If there's no imgs or the imgs are cached
if (imgs.length == 0) {
_this4.setSize();
} else {
_this4.setSize();
}

// If there's imgs and when need to wait them
imgs[imgs.length - 1].addEventListener('load', function () {
_this4.setSize();
});
};

this.setSize = debounce(function () {
if (_this4.getSettings().width !== 'auto') {
_this4._element.style.width = _this4.getSettings().height;
_this4._element.style.maxWidth = _this4.getSettings().height;
_this4._element.style.width = _this4.getSettings().width;
_this4._element.style.maxWidth = _this4.getSettings().width;
_this4._element.style.overflowX = 'hidden';
}

Expand All @@ -428,13 +468,13 @@ var A11yCarousel = function A11yCarousel(selector, userSettings) {
_this4._element.style.maxHeight = _this4.getSettings().height;
_this4._element.style.overflowY = 'hidden';
} else {
_this4._element.style.height = _this4._slides[_this4._sliderIndex].offsetSize + 'px';
_this4._element.style.height = _this4._slides[_this4._sliderIndex].offsetHeight + 'px';
}
}, 100);

this.autoPlay = function () {
if (_this4._canAutoSlide) {
_this4.setSlider(_this4._sliderIndex + 1);
_this4.setSlider(parseInt(_this4._sliderIndex) + 1);
}
};

Expand All @@ -445,9 +485,9 @@ var A11yCarousel = function A11yCarousel(selector, userSettings) {
// Default Settings of the Slide show
var defaultSettings = {
autoplay: true,
autoplaySpeed: 3000,
autoplaySpeed: 7000,
transitionSpeed: 300,
arrows: true,
arrows: false,
dots: true,
sliderIndex: 0,
width: 'auto',
Expand Down Expand Up @@ -480,6 +520,10 @@ var A11yCarousel = function A11yCarousel(selector, userSettings) {
this._canAutoSlide = true;
this._autoPlayInterval = null;

if (this.getSettings().transitionSpeed > this.getSettings().autoplaySpeed) {
throw 'a11y Carousel: \uD83E\uDD1A transitionSpeed can be greater than autoplaySpeed';
}

// Create a wrapper for the whole slide show
var sliderWrapper = document.createElement('div');
sliderWrapper.setAttribute('aria-roledescription', this.getSettings().ariaRoledescription);
Expand Down Expand Up @@ -611,7 +655,7 @@ var A11yCarousel = function A11yCarousel(selector, userSettings) {
if (this.getSettings().autoplay) {
playBtn.setAttribute('id', this._playId);

this._autoPlayInterval = setInterval(this.autoPlay, this.getSettings().autoplaySpeed);
this._autoPlayInterval = setInterval(this.autoPlay, parseInt(this.getSettings().autoplaySpeed));

if (this.getSettings().autoplay) {
playBtn.textContent = this.getSettings().pauseText;
Expand Down Expand Up @@ -643,11 +687,11 @@ var A11yCarousel = function A11yCarousel(selector, userSettings) {
}
// prev
else if (e.target && e.target.id == _this4._prevId) {
_this4.setSlider(_this4._sliderIndex - 1);
_this4.setSlider(parseInt(_this4._sliderIndex) - 1);
}
// next
else if (e.target && e.target.id == _this4._nextId) {
_this4.setSlider(_this4._sliderIndex + 1);
_this4.setSlider(parseInt(_this4._sliderIndex) + 1);
} else {}
}, 200));

Expand All @@ -656,11 +700,11 @@ var A11yCarousel = function A11yCarousel(selector, userSettings) {
var gesture = new TinyGesture(this._element);
// next
gesture.on('swiperight', debounce(function () {
_this4.setSlider(_this4._sliderIndex - 1);
_this4.setSlider(parseInt(_this4._sliderIndex) - 1);
}, 200));
// prev
gesture.on('swipeleft', debounce(function () {
_this4.setSlider(_this4._sliderIndex + 1);
_this4.setSlider(parseInt(_this4._sliderIndex) + 1);
}, 200));
}

Expand Down
2 changes: 1 addition & 1 deletion dist/demo.css
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

16 changes: 8 additions & 8 deletions dist/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,39 +9,39 @@
</head>
<body>
<h1>A11y Carousel</h1>
<div id="slider">
<div id="my-slider">
<div>
<a href="#">
<img src="https://i.picsum.photos/id/1068/970/400.jpg" alt="" />
<img src="https://i.picsum.photos/id/1057/970/400.jpg" alt="" />
</a>
</div>
<div>
<a href="#">
<img src="https://i.picsum.photos/id/656/970/400.jpg" alt="" />
<img src="https://i.picsum.photos/id/605/970/400.jpg" alt="" />
</a>
</div>
<div>
<a href="#">
<img src="https://i.picsum.photos/id/227/970/400.jpg" alt="" />
<img src="https://i.picsum.photos/id/218/970/400.jpg" alt="" />
</a>
</div>
<div>
<a href="#">
<img src="https://i.picsum.photos/id/427/970/400.jpg" alt="" />
<img src="https://i.picsum.photos/id/419/970/400.jpg" alt="" />
</a>
</div>
<div>
<a href="#">
<img src="https://i.picsum.photos/id/1073/970/400.jpg" alt="" />
<img src="https://i.picsum.photos/id/1054/970/400.jpg" alt="" />
</a>
</div>
</div>
<script src="a11y-carousel.min.js"></script>
<!--<script src="../src/a11y-carousel.js"></script>-->
<script>
document.addEventListener("DOMContentLoaded", function(event) {
var slider = new A11yCarousel("#slider", {
autoplay: true,
var slider = new A11yCarousel("#my-slider", {
autoplay: true
});
});
</script>
Expand Down
1 change: 1 addition & 0 deletions prepros-6.config
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,7 @@
"src/lib/Array.from.js",
"src/lib/Debounce.js",
"src/lib/NodeList.forEach.js",
"src/lib/Object.assign.js",
"src/lib/TinyGesture.js"
]
}
Expand Down
Loading

0 comments on commit 4b46d73

Please sign in to comment.