From db67b9ca9da0fcadfe9415688d2809dc28aed381 Mon Sep 17 00:00:00 2001 From: barthy Date: Fri, 6 May 2022 18:38:23 +0200 Subject: [PATCH] [BUGFIX] #16 Rebuild order when disabling ScrollSnapLoop Plugin --- .eslintrc.json | 0 .github/FUNDING.yml | 0 .github/workflows/npm-publish.yml | 0 .gitignore | 0 .stylelintrc.json | 0 LICENSE | 0 README.md | 0 bin/io.sh | 0 demo/feature_toggle.css | 0 demo/index.css | 0 demo/index.js | 18 ++++++------------ demo/page.css | 0 index.html | 0 package.json | 2 +- src/ScrollSnapAutoplay.js | 0 src/ScrollSnapDraggable.js | 0 src/ScrollSnapLoop.js | 8 +++++++- src/ScrollSnapPlugin.js | 0 src/ScrollSnapSlider.js | 0 src/scroll-snap-slider.css | 0 src/scroll-snap-slider.scss | 0 yarn.lock | 13 ++++--------- 22 files changed, 18 insertions(+), 23 deletions(-) mode change 100644 => 100755 .eslintrc.json mode change 100644 => 100755 .github/FUNDING.yml mode change 100644 => 100755 .github/workflows/npm-publish.yml mode change 100644 => 100755 .gitignore mode change 100644 => 100755 .stylelintrc.json mode change 100644 => 100755 LICENSE mode change 100644 => 100755 README.md mode change 100644 => 100755 bin/io.sh mode change 100644 => 100755 demo/feature_toggle.css mode change 100644 => 100755 demo/index.css mode change 100644 => 100755 demo/index.js mode change 100644 => 100755 demo/page.css mode change 100644 => 100755 index.html mode change 100644 => 100755 package.json mode change 100644 => 100755 src/ScrollSnapAutoplay.js mode change 100644 => 100755 src/ScrollSnapDraggable.js mode change 100644 => 100755 src/ScrollSnapLoop.js mode change 100644 => 100755 src/ScrollSnapPlugin.js mode change 100644 => 100755 src/ScrollSnapSlider.js mode change 100644 => 100755 src/scroll-snap-slider.css mode change 100644 => 100755 src/scroll-snap-slider.scss mode change 100644 => 100755 yarn.lock diff --git a/.eslintrc.json b/.eslintrc.json old mode 100644 new mode 100755 diff --git a/.github/FUNDING.yml b/.github/FUNDING.yml old mode 100644 new mode 100755 diff --git a/.github/workflows/npm-publish.yml b/.github/workflows/npm-publish.yml old mode 100644 new mode 100755 diff --git a/.gitignore b/.gitignore old mode 100644 new mode 100755 diff --git a/.stylelintrc.json b/.stylelintrc.json old mode 100644 new mode 100755 diff --git a/LICENSE b/LICENSE old mode 100644 new mode 100755 diff --git a/README.md b/README.md old mode 100644 new mode 100755 diff --git a/bin/io.sh b/bin/io.sh old mode 100644 new mode 100755 diff --git a/demo/feature_toggle.css b/demo/feature_toggle.css old mode 100644 new mode 100755 diff --git a/demo/index.css b/demo/index.css old mode 100644 new mode 100755 diff --git a/demo/index.js b/demo/index.js old mode 100644 new mode 100755 index 6573485..d0d0d9b --- a/demo/index.js +++ b/demo/index.js @@ -7,21 +7,10 @@ const sliderElement = document.querySelector('.example-slider') const slides = sliderElement.getElementsByClassName('scroll-snap-slide') const slider = new ScrollSnapSlider(sliderElement) -slider.roundingMethod = function (x) { - const direction = x <= slider.slide ? -1 : 1 - - if (direction < 0) { - return Math.floor(x) - } - - return Math.ceil(x) -} - /** * @param {Number} x the current slide position as a decimal (e.g. 1,5 = slide at index 1 has been slided by 50%) */ slider.roundingMethod = function (x) { - // TODO return an integer that will be the the slider.slide return Math.round(x) } @@ -46,7 +35,10 @@ for (const button of buttons) { button.addEventListener('click', function (event) { event.preventDefault() - const slideElementIndex = Array.from(slides).findIndex(item => item.dataset.index === button.control.value) + const slideElementIndex = Array.prototype.slice + .call(slides) + .findIndex(item => item.dataset.index === button.control.value) + slider.slideTo(slideElementIndex) }) } @@ -108,3 +100,5 @@ draggableInput.addEventListener('change', function () { disablePlugin(draggablePlugin) }) + +window.slider = slider \ No newline at end of file diff --git a/demo/page.css b/demo/page.css old mode 100644 new mode 100755 diff --git a/index.html b/index.html old mode 100644 new mode 100755 diff --git a/package.json b/package.json old mode 100644 new mode 100755 index f1d3fbd..382fed6 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "scroll-snap-slider", - "version": "2.4.0", + "version": "2.4.1", "description": "Mostly CSS slider with great performance.", "keywords": [ "slider", diff --git a/src/ScrollSnapAutoplay.js b/src/ScrollSnapAutoplay.js old mode 100644 new mode 100755 diff --git a/src/ScrollSnapDraggable.js b/src/ScrollSnapDraggable.js old mode 100644 new mode 100755 diff --git a/src/ScrollSnapLoop.js b/src/ScrollSnapLoop.js old mode 100644 new mode 100755 index 1b716a8..42b79f8 --- a/src/ScrollSnapLoop.js +++ b/src/ScrollSnapLoop.js @@ -14,7 +14,7 @@ export class ScrollSnapLoop extends ScrollSnapPlugin { enable (slider) { this.slider = slider this.element = this.slider.element - this.slides = this.slider.element.getElementsByClassName('scroll-snap-slide') + this.slides = this.element.getElementsByClassName('scroll-snap-slide') this.slider.addEventListener('slide-stop', this.loopSlides) this.loopSlides() @@ -26,6 +26,12 @@ export class ScrollSnapLoop extends ScrollSnapPlugin { disable () { this.slider.removeEventListener('slide-stop', this.loopSlides) + const sortedSlides = Array.prototype.slice + .call(this.slides) + .sort((a, b) => parseInt(a.dataset.index, 10) - parseInt(b.dataset.index, 10)) + + Element.prototype.append.apply(this.element, sortedSlides) + this.slider = null this.element = null this.slides = null diff --git a/src/ScrollSnapPlugin.js b/src/ScrollSnapPlugin.js old mode 100644 new mode 100755 diff --git a/src/ScrollSnapSlider.js b/src/ScrollSnapSlider.js old mode 100644 new mode 100755 diff --git a/src/scroll-snap-slider.css b/src/scroll-snap-slider.css old mode 100644 new mode 100755 diff --git a/src/scroll-snap-slider.scss b/src/scroll-snap-slider.scss old mode 100644 new mode 100755 diff --git a/yarn.lock b/yarn.lock old mode 100644 new mode 100755 index 965ab46..5dc4921 --- a/yarn.lock +++ b/yarn.lock @@ -513,15 +513,10 @@ camelcase@^5.3.1: resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-5.3.1.tgz#e3c9b31569e106811df242f715725a1f4c494320" integrity sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg== -caniuse-lite@^1.0.30001109, caniuse-lite@^1.0.30001219, caniuse-lite@^1.0.30001274: - version "1.0.30001280" - resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001280.tgz#066a506046ba4be34cde5f74a08db7a396718fb7" - integrity sha512-kFXwYvHe5rix25uwueBxC569o53J6TpnGu0BEEn+6Lhl2vsnAumRFWEBhDft1fwyo6m1r4i+RqA4+163FpeFcA== - -caniuse-lite@^1.0.30001245: - version "1.0.30001279" - resolved "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001279.tgz" - integrity sha512-VfEHpzHEXj6/CxggTwSFoZBBYGQfQv9Cf42KPlO79sWXCD1QNKWKsKzFeWL7QpZHJQYAvocqV6Rty1yJMkqWLQ== +caniuse-lite@^1.0.30001109, caniuse-lite@^1.0.30001219, caniuse-lite@^1.0.30001245, caniuse-lite@^1.0.30001274: + version "1.0.30001338" + resolved "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001338.tgz" + integrity sha512-1gLHWyfVoRDsHieO+CaeYe7jSo/MT7D7lhaXUiwwbuR5BwQxORs0f1tAwUSQr3YbxRXJvxHM/PA5FfPQRnsPeQ== chalk@^2.0.0: version "2.4.2"