From 700c2771a6ae3101838b06003ec6206acdd61c6c Mon Sep 17 00:00:00 2001 From: Tony Air Date: Sun, 14 Aug 2022 22:29:09 +0200 Subject: [PATCH] IMPR: minor updates --- src/js/ui/carousel.js | 63 ++++++++++++++------- src/js_old/_components/_ui.form.datetime.js | 1 + src/js_old/_components/_ui.form.select2.js | 2 +- src/js_old/_components/_ui.form.validate.js | 5 +- src/scss/_animations.scss | 4 ++ src/scss/libs/bootstrap.scss | 1 - 6 files changed, 52 insertions(+), 24 deletions(-) diff --git a/src/js/ui/carousel.js b/src/js/ui/carousel.js index 5cf7311..bc5882a 100644 --- a/src/js/ui/carousel.js +++ b/src/js/ui/carousel.js @@ -13,8 +13,8 @@ const CarouselUI = ((window) => { interval, }) el.ui = carousel - const items = el.querySelectorAll('.carousel-item') - const numberOfItems = parseInt(items.length) + let items = el.querySelectorAll('.carousel-item') + let numberOfItems = parseInt(items.length) // create next/prev arrows if (el.dataset.bsArrows) { @@ -89,12 +89,21 @@ const CarouselUI = ((window) => { if (el.classList.contains('carousel-multislide')) { const inner = el.querySelector('.carousel-inner') - const items = el.querySelectorAll('.carousel-item') + + // add next elements by cloning originals + items.forEach((el, i) => { + const newItem = el.cloneNode(true); + newItem.classList.remove('active'); + inner.appendChild(newItem); + }); + + items = el.querySelectorAll('.carousel-item') + numberOfItems = parseInt(items.length) // fix animation glitch inner.style.left = '0px' - const calculate = new window.ResizeObserver((entries) => { + const calculate = (entries) => { const entry = entries[0] const el = entry.target const rect = entry.contentRect @@ -106,7 +115,7 @@ const CarouselUI = ((window) => { el.dataset.itemWidth = itemWidth el.dataset.numToDisplay = numToDisplay - el.querySelector('.carousel-inner').style.width = `${numberOfItems * itemWidth}px` + inner.style.width = `${numberOfItems * itemWidth}px` items.forEach((el, i) => { el.style.width = `${itemWidth}px` }) @@ -115,28 +124,38 @@ const CarouselUI = ((window) => { el.classList.add('js-carousel-no-slide') carousel.pause() } - }) + }; - calculate.observe(el) + const calcResize = new window.ResizeObserver(calculate) + + calcResize.observe(el) + const resetPosition = () => { + // disable transition + inner.style.transition = 'none' + inner.classList.add('no-transition') + inner.style.left = '0px' + + // enable transition + setTimeout(() => { + inner.style.transition = '' + inner.classList.remove('no-transition') + + inner.querySelectorAll('.carousel-item').forEach((el) => { + el.classList.remove('active') + }) + + inner.querySelector('.carousel-item:first-child').classList.add('active') + }, 1000); + }; el.addEventListener('slide.bs.carousel', (e) => { // infinite scroll const numToDisplay = Math.min(parseInt(el.dataset.length), numberOfItems) - if(numberOfItems - numToDisplay < e.to) { - // disable transition - //inner.style.transition = 'none' + console.log(`.${NAME}: ${e.to} ${numberOfItems / 2}`); - inner.querySelectorAll('.carousel-item').forEach((el) => { - el.classList.remove('active') - }) - - inner.querySelector('.carousel-item:first-child').classList.add('active') - inner.style.left = '0px' + if(numberOfItems - numToDisplay < e.to){ e.preventDefault(); - - - // enable transition - //inner.style.transition = '' + resetPosition(); return; } // @@ -149,6 +168,10 @@ const CarouselUI = ((window) => { inner.style.left = `${-(e.to * el.dataset.itemWidth)}px` break } + + if(numberOfItems / 2 === e.to){ + resetPosition(); + } }) el.classList.add(`${NAME}-multislide-active`) diff --git a/src/js_old/_components/_ui.form.datetime.js b/src/js_old/_components/_ui.form.datetime.js index 9bfc772..333d31c 100644 --- a/src/js_old/_components/_ui.form.datetime.js +++ b/src/js_old/_components/_ui.form.datetime.js @@ -38,6 +38,7 @@ const DatetimeUI = (($) => { const defaultDate = $el.attr('name').toLowerCase().indexOf('end') !== -1 ? '+4d' : '+3d' + $el.attr('type', 'text') $el.attr('readonly', 'true') $el.datepicker( $.extend( diff --git a/src/js_old/_components/_ui.form.select2.js b/src/js_old/_components/_ui.form.select2.js index 3e29302..21cb64e 100644 --- a/src/js_old/_components/_ui.form.select2.js +++ b/src/js_old/_components/_ui.form.select2.js @@ -2,7 +2,7 @@ import $ from 'jquery' -import select2 from 'select2/dist/js/select2.js' +import 'select2/dist/js/select2.js' import Events from '../_events' const FormSelect2 = (($) => { diff --git a/src/js_old/_components/_ui.form.validate.js b/src/js_old/_components/_ui.form.validate.js index b8d4faa..ba75d39 100644 --- a/src/js_old/_components/_ui.form.validate.js +++ b/src/js_old/_components/_ui.form.validate.js @@ -46,14 +46,15 @@ const FormValidate = (($) => { ui.validate(true, () => { e.preventDefault() + const $el = $element.find('.error').first() // switch to step if (ui._stepped_form) { - const $el = $element.find('.error').first() - if ($el.length) { ui._stepped_form.step($el.parents('.step')) } } + // scroll to error + $el[0].scrollIntoView() $element.trigger(Events.FORM_VALIDATION_FAILED) }) diff --git a/src/scss/_animations.scss b/src/scss/_animations.scss index 3437924..4ebb3cb 100755 --- a/src/scss/_animations.scss +++ b/src/scss/_animations.scss @@ -45,3 +45,7 @@ overflow: visible; } } + +.no-transition { + transition: none!important; +} diff --git a/src/scss/libs/bootstrap.scss b/src/scss/libs/bootstrap.scss index f98eb78..cf5f753 100644 --- a/src/scss/libs/bootstrap.scss +++ b/src/scss/libs/bootstrap.scss @@ -1,7 +1,6 @@ // Bootstrap // Configuration @import "~bootstrap/scss/functions"; -@import "~bootstrap/scss/maps"; @import "~bootstrap/scss/variables"; @import "~bootstrap/scss/mixins"; @import "~bootstrap/scss/utilities";