Skip to content

Commit f5536c3

Browse files
Smoke-ckSmoke-ck
authored
Merge pull request #238 from activebridge/fix/carousel
Fix desktop, IOS carousel js logic
2 parents d73bf01 + 8df11a9 commit f5536c3

File tree

9 files changed

+87
-91
lines changed

9 files changed

+87
-91
lines changed

‎_includes/solutions_subpages_carousel.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<div class="carousel-scroll" >
2-
<div class="carousel-scroll__scroller" data-scroll="scroller" onscroll='loop(event)'>
2+
<div class="carousel-scroll__scroller" data-scroll="scroller">
33
{% for item in site.data.solutions.industries.applications %}
44
<div class="carousel-scroll__animate-visibility animate-visibility with-opacity" data-scroll="item">
55
<h2 class="animate-visibility__title">{{ item.title }}</h2>

‎_includes/testimonials_carousel.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<div class="carousel-scroll" >
2-
<div class="carousel-scroll__scroller" data-scroll="scroller" onscroll='loop(event)'>
2+
<div class="carousel-scroll__scroller" data-scroll="scroller">
33
{% for item in site.data.testimonials.all %}
44
<div class="carousel-scroll__animate-visibility animate-visibility with-opacity testimonials" data-scroll="item">
55
<h2 class="animate-visibility__title">{{ item.title }}</h2>

‎_sass/carousel.scss‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,6 @@
1515
margin: 0 auto;
1616
scrollbar-width: none;
1717
perspective: 1000px;
18-
touch-action: pan-y;
1918
&::-webkit-scrollbar { display: none; }
2019
}
2120

‎assets/js/carousel.js‎

Lines changed: 78 additions & 81 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,14 @@
11
const setCarousel = (scroller) => {
2-
const mainSection = document.querySelector('.body-content__main-section');
3-
const items = scroller.querySelectorAll('[data-scroll="item"]');
4-
const mobileStep = screen.width <= 768 ? scroller.children[0].offsetWidth/2 : 0;
2+
if (scroller.children.length <= 4 ) scroller.innerHTML += scroller.innerHTML;
3+
4+
const items = scroller.querySelectorAll('.animate-visibility');
5+
const mobileStep = screen.width <= 768 ? scroller.children[0].offsetWidth / 2 : 0;
56

67
let clones = [];
78
let disableScroll = false;
89
let scrollWidth = 0;
910
let scrollPos = 0;
1011
let clonesWidth = 0;
11-
let isScrolling = false;
1212
let isDragging = false;
1313

1414
scroller.innerHTML += scroller.innerHTML;
@@ -24,10 +24,9 @@ const setCarousel = (scroller) => {
2424

2525
clones = scroller.querySelectorAll('.js-clone');
2626

27-
const getClonesWidth = () => {
27+
const getClonesWidth = () =>{
2828
clonesWidth = 0;
2929
clones.forEach(clone => { clonesWidth += clone.offsetWidth; });
30-
3130
return clonesWidth;
3231
}
3332

@@ -46,12 +45,12 @@ const setCarousel = (scroller) => {
4645
if (!disableScroll) {
4746
scrollPos = Math.round(getScrollPos() / 100) * 100;
4847
if (clonesWidth + scrollPos >= scrollWidth) {
49-
setScrollPos(clonesWidth + mobileStep);
48+
setScrollPos(clonesWidth);
5049
disableScroll = true;
51-
} else if (scrollPos == 0 ) {
50+
} else if (scrollPos == 0) {
5251
setScrollPos(scrollWidth - clonesWidth * 2);
5352
disableScroll = true;
54-
} else if(scrollPos <= mobileStep ){
53+
} else if (scrollPos <= mobileStep) {
5554
setScrollPos(scrollWidth - clonesWidth * 2 + mobileStep);
5655
disableScroll = true;
5756
}
@@ -63,111 +62,109 @@ const setCarousel = (scroller) => {
6362
}
6463
}
6564

66-
const easeInOutQuad = (t, b, c, d) => {
67-
t /= d / 2;
68-
if (t < 1) return c / 2 * t * t + b;
69-
t--;
70-
return -c / 2 * (t * (t - 2) - 1) + b;
71-
}
72-
73-
const smoothScroll = (element, to) => {
74-
if (isScrolling) return;
75-
isScrolling = true;
76-
77-
const start = element.scrollLeft;
78-
const change = to - start;
79-
const duration = 500;
80-
let currentTime = 0;
81-
82-
const animateScroll = () => {
83-
currentTime += 20;
84-
const val = easeInOutQuad(currentTime, start, change, duration);
85-
element.scrollLeft = val;
86-
87-
if (currentTime < duration) {
88-
requestAnimationFrame(animateScroll);
89-
} else {
90-
isScrolling = false;
91-
requestAnimationFrame(scrollUpdate);
92-
}
93-
}
94-
95-
animateScroll();
96-
}
97-
98-
const handleWheelEvent = (e) => {
99-
e.preventDefault();
100-
const direction = e.shiftKey ? Math.sign(e.deltaY) : Math.sign(e.deltaX);
101-
102-
if (Math.abs(e.deltaX) > Math.abs(e.deltaY) || e.shiftKey) {
103-
const delta = direction * scroller.children[0].offsetWidth;
104-
smoothScroll(scroller, scroller.scrollLeft + delta);
105-
} else {
106-
const mainBlock = screen.width <= 768 ? mainSection : window;
107-
mainBlock.scrollBy(0, e.deltaY);
108-
}
109-
}
110-
111-
scroller.addEventListener("click", (event) => {
65+
scroller.addEventListener('click', (event) => {
11266
const rect = event.currentTarget.getBoundingClientRect();
11367
const clickX = event.clientX - rect.left;
11468
const middle = rect.width / 2;
11569

11670
if (clickX > middle) {
117-
smoothScroll(scroller, scroller.scrollLeft + scroller.children[1].offsetWidth);
71+
scroller.scrollTo({
72+
left: scroller.scrollLeft + scroller.children[1].offsetWidth,
73+
behavior: 'smooth'
74+
});
11875
} else {
119-
smoothScroll(scroller, scroller.scrollLeft - scroller.children[1].offsetWidth);
76+
scroller.scrollTo({
77+
left: scroller.scrollLeft - scroller.children[1].offsetWidth,
78+
behavior: 'smooth'
79+
});
12080
}
12181
isDragging = false;
12282
});
12383

124-
let startX, deltaX, currentX, delta;
84+
let isDesktopScrolling;
85+
scroller.addEventListener('scroll', (event) => {
86+
const target = event.target;
87+
const offsetWidth = target.offsetWidth;
88+
89+
const checkPos = () => {
90+
[...target.children].map(e => {
91+
const toCenter = Math.abs(window.outerWidth / 2 - e.getBoundingClientRect().left - e.getBoundingClientRect().width / 2);
92+
const toCenter2 = window.outerWidth / 2 - e.getBoundingClientRect().left - e.getBoundingClientRect().width / 2;
93+
const viewport = toCenter / offsetWidth * 100;
94+
const viewport2 = toCenter2 / offsetWidth * 100;
95+
e.style.setProperty('--viewport', viewport);
96+
e.style.setProperty('--viewport2', viewport2);
97+
});
98+
};
99+
checkPos();
100+
scrollUpdate();
101+
102+
if(screen.width >= 768 ) {
103+
clearTimeout(isDesktopScrolling);
104+
isDesktopScrolling = setTimeout(() => {
105+
onScrollStop();
106+
}, 100);
107+
108+
function onScrollStop() {
109+
scroller.scrollTo({
110+
left: scroller.children[0].offsetWidth * Math.round(scroller.scrollLeft / scroller.children[0].offsetWidth),
111+
behavior: 'smooth'
112+
});
113+
};
114+
}
115+
});
116+
117+
let startX, deltaX, currentX, halfOfCard, startY, deltaY, currentY, isHorizontalScroll;
125118

126119
const onTouchStart = (event) => {
127120
startX = event.touches[0].pageX;
121+
startY = event.touches[0].pageY;
128122
deltaX = 0;
129123
currentX = 0;
130-
delta = 0;
124+
currentY = 0;
125+
halfOfCard = 0;
126+
deltaY = 0;
127+
isHorizontalScroll = undefined;
131128
}
132129

133130
const onTouchMove = (event) => {
131+
if (event.touches.length > 1) return;
132+
134133
isDragging = true;
135134
currentX = event.touches[0].pageX;
135+
currentY = event.touches[0].pageY;
136136
deltaX = currentX - startX;
137-
delta = currentX - startX > 0 ? -1 : 1;
138-
scroller.scrollLeft -= deltaX;
137+
deltaY = currentY - startY;
138+
const scrollDelta = currentX - startX > 0 ? -1 : 1;
139+
halfOfCard = screen.width <= 768 ? (scroller.children[0].offsetWidth/2) * scrollDelta : 0;
140+
if (typeof isHorizontalScroll === 'undefined') isHorizontalScroll = Math.abs(deltaY) > Math.abs(deltaX);
141+
142+
if (!isHorizontalScroll) {
143+
event.preventDefault();
144+
scroller.scrollLeft -= deltaX;
145+
}
146+
139147
startX = currentX;
148+
startY = currentY;
140149
}
141150

142151
const onTouchEnd = () => {
143-
if (isDragging) {
144-
const scrollToPos = scroller.children[0].offsetWidth * Math.round(scroller.scrollLeft / scroller.children[0].offsetWidth) + mobileStep * delta;
145-
smoothScroll(scroller, scrollToPos);
146-
isDragging = false;
152+
if (!isHorizontalScroll && isDragging) {
153+
setTimeout(() => {
154+
scroller.scrollTo({
155+
left: scroller.children[0].offsetWidth * Math.round(scroller.scrollLeft / scroller.children[0].offsetWidth) + halfOfCard,
156+
behavior: 'smooth'
157+
});
158+
}, 0);
147159
}
160+
isDragging = false;
148161
}
149162

150-
scroller.addEventListener('wheel', handleWheelEvent, { passive: false });
151163
scroller.addEventListener('touchstart', onTouchStart, { passive: false });
152164
scroller.addEventListener('touchmove', onTouchMove, { passive: false });
153165
scroller.addEventListener('touchend', onTouchEnd, { passive: false });
154166
}
155167

156-
function loop({ target, target: { offsetWidth } }) {
157-
const checkPos = () => {
158-
[...target.children].map(e => {
159-
const toCenter = Math.abs(window.outerWidth / 2 - e.getBoundingClientRect().left - e.getBoundingClientRect().width / 2)
160-
const toCenter2 = window.outerWidth / 2 - e.getBoundingClientRect().left - e.getBoundingClientRect().width / 2
161-
const viewport = toCenter / offsetWidth * 100
162-
const viewport2 = toCenter2 / offsetWidth * 100
163-
e.style.setProperty('--viewport', viewport)
164-
e.style.setProperty('--viewport2', viewport2)
165-
})
166-
}
167-
requestAnimationFrame(checkPos);
168-
}
169-
window.loop = loop;
170-
171168
document.addEventListener("DOMContentLoaded", () => {
172169
const carousels = document.querySelectorAll('[data-scroll="scroller"]');
173170
carousels.forEach((element) => setCarousel(element));

‎expertise.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,7 @@ <h2 class="message inria-bold">{{ site.data.expertise.technologies.subtitle }}</
4141
<p class="block-sub-title">{{ site.data.expertise.industries.title }}</p>
4242
</div>
4343
<div class="carousel-scroll" >
44-
<div class="carousel-scroll__scroller" data-scroll="scroller" onscroll='loop(event)'>
44+
<div class="carousel-scroll__scroller" data-scroll="scroller">
4545
{% for element in site.data.expertise.industries.all %}
4646
<div class="carousel-scroll__animate-visibility animate-visibility with-opacity" data-scroll="item">
4747
<h2 class="animate-visibility__title">{{ element.title }}</h2>

‎index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -132,7 +132,7 @@ <h2 class="message inria-bold">{{ site.data.index.build_great_product }}</h2>
132132
<p class="description">{{ site.data.index.help_businesses }}</p>
133133
</div>
134134
<div class="carousel-scroll" >
135-
<div class="carousel-scroll__scroller" data-scroll="scroller" onscroll='loop(event)'>
135+
<div class="carousel-scroll__scroller" data-scroll="scroller">
136136
{% for item in site.data.index.solutions %}
137137
<div class="carousel-scroll__animate-visibility animate-visibility with-opacity" data-scroll="item">
138138
<h2 class="animate-visibility__title">{{ item.title }}</h2>

‎reviews.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -57,7 +57,7 @@ <h1 class="page-title white-text">{{ site.data.testimonials.title }}</h1>
5757
<h2 class="message inria-bold white-text">{{ site.data.testimonials.solutions.description }}</h2>
5858
</div>
5959
<div class="carousel-scroll" >
60-
<div class="carousel-scroll__scroller" data-scroll="scroller" onscroll='loop(event)'>
60+
<div class="carousel-scroll__scroller" data-scroll="scroller">
6161
{% for item in site.data.testimonials.solutions.all %}
6262
<div class="carousel-scroll__animate-visibility animate-visibility with-opacity" data-scroll="item">
6363
<h2 class="animate-visibility__title">{{ item.title }}</h2>

‎services.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@ <h2 class="block-cera-title">{{ site.data.services.web_services.title }}</h2>
3030
</div>
3131
<div class="carousel-background">
3232
<div class="carousel-scroll" >
33-
<div class="carousel-scroll__scroller" data-scroll="scroller" onscroll='loop(event)'>
33+
<div class="carousel-scroll__scroller" data-scroll="scroller">
3434
{% for item in site.data.services.web_services.all %}
3535
<div class="carousel-scroll__animate-visibility animate-visibility with-opacity" data-scroll="item">
3636
<h2 class="animate-visibility__title">{{ item.title }}</h2>
@@ -57,7 +57,7 @@ <h2 class="block-cera-title white-text">{{ site.data.services.custom_ror_dev_ser
5757
<p class="description white-text">{{ site.data.services.custom_ror_dev_services.description }}</p>
5858
</div>
5959
<div class="carousel-scroll" >
60-
<div class="carousel-scroll__scroller" data-scroll="scroller" onscroll='loop(event)'>
60+
<div class="carousel-scroll__scroller" data-scroll="scroller">
6161
{% for item in site.data.services.custom_ror_dev_services.all %}
6262
<div class="carousel-scroll__animate-visibility animate-visibility with-opacity" data-scroll="item">
6363
<h2 class="animate-visibility__title">{{ item.title }}</h2>

‎solutions.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -62,7 +62,7 @@ <h1 class="block-inria-title">{{ site.data.solutions.title }}</h1>
6262
<h2 class="block-cera-title">{{site.data.solutions.industries.title}}</h2>
6363
</div>
6464
<div class="carousel-scroll" >
65-
<div class="carousel-scroll__scroller" data-scroll="scroller" onscroll='loop(event)'>
65+
<div class="carousel-scroll__scroller" data-scroll="scroller">
6666
{% for item in site.data.solutions.industries.all %}
6767
<div class="carousel-scroll__animate-visibility animate-visibility with-opacity" data-scroll="item">
6868
<h2 class="animate-visibility__title">{{ item.title }}</h2>
@@ -150,7 +150,7 @@ <h2 class="block-cera-title white-text">{{ site.data.solutions.build-test-produc
150150
<p class="message inria-regular white-text">{{ site.data.solutions.build-test-product.description }}</p>
151151
</div>
152152
<div class="carousel-scroll" >
153-
<div class="carousel-scroll__scroller" data-scroll="scroller" onscroll='loop(event)'>
153+
<div class="carousel-scroll__scroller" data-scroll="scroller">
154154
{% for item in site.data.team_extension.services.all %}
155155
<div class="carousel-scroll__animate-visibility animate-visibility with-opacity" data-scroll="item">
156156
<h2 class="animate-visibility__title">{{ item.title }}</h2>

0 commit comments

Comments
 (0)