Skip to content

Commit e5469e7

Browse files
andreamalinandreamalin
committed
v1.0.1: Blocked carousels implementation
1 parent 7a07132 commit e5469e7

File tree

2 files changed

+102
-42
lines changed

2 files changed

+102
-42
lines changed

‎src/navigation.js

+51-21
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,6 @@
1+
let maxVertical = 0;
2+
let minVertical = 0;
3+
14
/**
25
* Focus the next focusable element based on the actualHorizontal and actualVertical indexes
36
*/
@@ -6,15 +9,16 @@ const carouselHorizontalMovement = () => {
69
window.actualHorizontal
710
];
811

12+
checkBlockedCarousels();
913
carouselCard.focus();
1014
};
1115

1216
/**
1317
* Check the next focusable element on a grid carousel
14-
*
18+
*
1519
* actualGridRow indicates the current row of the carousel
1620
* actualGridCell indicates the current cell of the row
17-
*
21+
*
1822
* @param movement = down, up, left or right
1923
*/
2024
const carouselGridMovement = (movement = 'down | up | left | right') => {
@@ -113,9 +117,9 @@ const carouselGridMovement = (movement = 'down | up | left | right') => {
113117
/**
114118
* If the user goes down or right, sum +1 to actualVertical index
115119
* If the user goes up or left, substract -1 to actualVertical index
116-
*
120+
*
117121
* Check the type of the carousel to focus
118-
*
122+
*
119123
* @param movement = down, up, left or right
120124
* @returns true if there is a next carousel, false if there is not a next carousel based on the movement
121125
*/
@@ -124,21 +128,29 @@ const focusNextCarousel = (movement = 'down | up | left | right') => {
124128

125129
if (movement === 'down' || movement === 'right') {
126130
try {
127-
listOfCarousels[window.actualVertical + 1].focus();
128-
window.actualVertical += 1;
129-
checkTypeOfCarousel(listOfCarousels);
130-
carouselVerticalCenter();
131-
return true;
131+
if ((maxVertical !== 0 && window.actualVertical < maxVertical) || (maxVertical === 0 && minVertical === 0)) {
132+
listOfCarousels[window.actualVertical + 1].focus();
133+
window.actualVertical += 1;
134+
checkTypeOfCarousel(listOfCarousels);
135+
carouselVerticalCenter();
136+
return true;
137+
} else {
138+
return false;
139+
}
132140
} catch (e) {
133141
return false;
134142
}
135143
} else if (movement === 'up' || movement === 'left') {
136144
try {
137-
listOfCarousels[window.actualVertical - 1].focus();
138-
window.actualVertical -= 1;
139-
checkTypeOfCarousel(listOfCarousels);
140-
carouselVerticalCenter();
141-
return true;
145+
if ((maxVertical !== 0 && window.actualVertical > minVertical) || (maxVertical === 0 && minVertical === 0)) {
146+
listOfCarousels[window.actualVertical - 1].focus();
147+
window.actualVertical -= 1;
148+
checkTypeOfCarousel(listOfCarousels);
149+
carouselVerticalCenter();
150+
return true;
151+
} else {
152+
return false;
153+
}
142154
} catch (e) {
143155
return false;
144156
}
@@ -147,10 +159,11 @@ const focusNextCarousel = (movement = 'down | up | left | right') => {
147159

148160
/**
149161
* Check if the currently focused carousel is a grid or a normal carousel (vertical or horizontal)
162+
*
150163
* @param listOfCarousels = List of carousels with the .carousel-container class
151164
*/
152165
const checkTypeOfCarousel = (listOfCarousels) => {
153-
// It is a grid carousel if there are rows on the carousel
166+
// It is a grid carousel if there are rows on the carousel
154167
if (listOfCarousels[window.actualVertical].querySelectorAll('.carousel-container-row')?.length > 0) {
155168
// Reset variables for grid carousel
156169
window.isInGridCarousel = true;
@@ -188,9 +201,7 @@ const carouselVerticalCenter = () => {
188201
const carousel = document?.querySelectorAll('.carousel-container');
189202

190203
let y =
191-
carousel[window.actualVertical].offsetTop -
192-
window.innerHeight / 2 +
193-
carousel[window.actualVertical].getBoundingClientRect().height / 2;
204+
carousel[window.actualVertical].offsetTop - window.innerHeight / 2 + carousel[window.actualVertical].getBoundingClientRect().height / 2;
194205
y = Math.round(y);
195206

196207
carousel[window.actualVertical].focus();
@@ -208,9 +219,7 @@ const carouselVerticalCenter = () => {
208219
* Else; do the vertical center
209220
*/
210221
const carouselVerticalCenterGrid = () => {
211-
const carousel = document
212-
?.querySelectorAll('.carousel-container')
213-
[window.actualVertical]?.querySelectorAll('.carousel-container-row');
222+
const carousel = document?.querySelectorAll('.carousel-container')[window.actualVertical]?.querySelectorAll('.carousel-container-row');
214223

215224
let y =
216225
carousel[window.actualGridRow].offsetTop - window.innerHeight / 2 + carousel[window.actualGridRow].getBoundingClientRect().height / 2;
@@ -258,6 +267,7 @@ const focusElement = () => {
258267

259268
/**
260269
* Close any closable carousel
270+
*
261271
* @returns true if there is any closable carousel, false if there is not
262272
*/
263273
const closeCarousel = () => {
@@ -268,4 +278,24 @@ const closeCarousel = () => {
268278
return false;
269279
};
270280

281+
/*
282+
* If it is a blocked container
283+
* * Get all the quantity of blocked containers on the page
284+
* * The minVertical will be the actualVertical
285+
* * The maxVertical will be all the quantity of blocked containers followed by actualVertical index
286+
*
287+
* Else if
288+
* * The user is not longer focusing a blocked-container
289+
* * * Reset the minVertical and maxVertical to 0
290+
*/
291+
const checkBlockedCarousels = () => {
292+
const carousel = document?.querySelectorAll('.carousel-container');
293+
if (carousel[window.actualVertical]?.classList.contains('blocked-container') && minVertical === 0 && maxVertical === 0) {
294+
minVertical = window.actualVertical - 1;
295+
maxVertical = minVertical + document.querySelectorAll('.blocked-container').length - 1;
296+
} else if (!carousel[window.actualVertical]?.classList.contains('blocked-container')) {
297+
minVertical = 0;
298+
maxVertical = 0;
299+
}
300+
};
271301
export { carouselHorizontalMovement, carouselOK, carouselGridMovement, focusNextCarousel, focusElement, closeCarousel };

‎usage-examples/angular-example/src/assets/src/navigation.js

+51-21
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,6 @@
1+
let maxVertical = 0;
2+
let minVertical = 0;
3+
14
/**
25
* Focus the next focusable element based on the actualHorizontal and actualVertical indexes
36
*/
@@ -6,15 +9,16 @@ const carouselHorizontalMovement = () => {
69
window.actualHorizontal
710
];
811

12+
checkBlockedCarousels();
913
carouselCard.focus();
1014
};
1115

1216
/**
1317
* Check the next focusable element on a grid carousel
14-
*
18+
*
1519
* actualGridRow indicates the current row of the carousel
1620
* actualGridCell indicates the current cell of the row
17-
*
21+
*
1822
* @param movement = down, up, left or right
1923
*/
2024
const carouselGridMovement = (movement = 'down | up | left | right') => {
@@ -113,9 +117,9 @@ const carouselGridMovement = (movement = 'down | up | left | right') => {
113117
/**
114118
* If the user goes down or right, sum +1 to actualVertical index
115119
* If the user goes up or left, substract -1 to actualVertical index
116-
*
120+
*
117121
* Check the type of the carousel to focus
118-
*
122+
*
119123
* @param movement = down, up, left or right
120124
* @returns true if there is a next carousel, false if there is not a next carousel based on the movement
121125
*/
@@ -124,21 +128,29 @@ const focusNextCarousel = (movement = 'down | up | left | right') => {
124128

125129
if (movement === 'down' || movement === 'right') {
126130
try {
127-
listOfCarousels[window.actualVertical + 1].focus();
128-
window.actualVertical += 1;
129-
checkTypeOfCarousel(listOfCarousels);
130-
carouselVerticalCenter();
131-
return true;
131+
if ((maxVertical !== 0 && window.actualVertical < maxVertical) || (maxVertical === 0 && minVertical === 0)) {
132+
listOfCarousels[window.actualVertical + 1].focus();
133+
window.actualVertical += 1;
134+
checkTypeOfCarousel(listOfCarousels);
135+
carouselVerticalCenter();
136+
return true;
137+
} else {
138+
return false;
139+
}
132140
} catch (e) {
133141
return false;
134142
}
135143
} else if (movement === 'up' || movement === 'left') {
136144
try {
137-
listOfCarousels[window.actualVertical - 1].focus();
138-
window.actualVertical -= 1;
139-
checkTypeOfCarousel(listOfCarousels);
140-
carouselVerticalCenter();
141-
return true;
145+
if ((maxVertical !== 0 && window.actualVertical > minVertical) || (maxVertical === 0 && minVertical === 0)) {
146+
listOfCarousels[window.actualVertical - 1].focus();
147+
window.actualVertical -= 1;
148+
checkTypeOfCarousel(listOfCarousels);
149+
carouselVerticalCenter();
150+
return true;
151+
} else {
152+
return false;
153+
}
142154
} catch (e) {
143155
return false;
144156
}
@@ -147,10 +159,11 @@ const focusNextCarousel = (movement = 'down | up | left | right') => {
147159

148160
/**
149161
* Check if the currently focused carousel is a grid or a normal carousel (vertical or horizontal)
162+
*
150163
* @param listOfCarousels = List of carousels with the .carousel-container class
151164
*/
152165
const checkTypeOfCarousel = (listOfCarousels) => {
153-
// It is a grid carousel if there are rows on the carousel
166+
// It is a grid carousel if there are rows on the carousel
154167
if (listOfCarousels[window.actualVertical].querySelectorAll('.carousel-container-row')?.length > 0) {
155168
// Reset variables for grid carousel
156169
window.isInGridCarousel = true;
@@ -188,9 +201,7 @@ const carouselVerticalCenter = () => {
188201
const carousel = document?.querySelectorAll('.carousel-container');
189202

190203
let y =
191-
carousel[window.actualVertical].offsetTop -
192-
window.innerHeight / 2 +
193-
carousel[window.actualVertical].getBoundingClientRect().height / 2;
204+
carousel[window.actualVertical].offsetTop - window.innerHeight / 2 + carousel[window.actualVertical].getBoundingClientRect().height / 2;
194205
y = Math.round(y);
195206

196207
carousel[window.actualVertical].focus();
@@ -208,9 +219,7 @@ const carouselVerticalCenter = () => {
208219
* Else; do the vertical center
209220
*/
210221
const carouselVerticalCenterGrid = () => {
211-
const carousel = document
212-
?.querySelectorAll('.carousel-container')
213-
[window.actualVertical]?.querySelectorAll('.carousel-container-row');
222+
const carousel = document?.querySelectorAll('.carousel-container')[window.actualVertical]?.querySelectorAll('.carousel-container-row');
214223

215224
let y =
216225
carousel[window.actualGridRow].offsetTop - window.innerHeight / 2 + carousel[window.actualGridRow].getBoundingClientRect().height / 2;
@@ -258,6 +267,7 @@ const focusElement = () => {
258267

259268
/**
260269
* Close any closable carousel
270+
*
261271
* @returns true if there is any closable carousel, false if there is not
262272
*/
263273
const closeCarousel = () => {
@@ -268,4 +278,24 @@ const closeCarousel = () => {
268278
return false;
269279
};
270280

281+
/*
282+
* If it is a blocked container
283+
* * Get all the quantity of blocked containers on the page
284+
* * The minVertical will be the actualVertical
285+
* * The maxVertical will be all the quantity of blocked containers followed by actualVertical index
286+
*
287+
* Else if
288+
* * The user is not longer focusing a blocked-container
289+
* * * Reset the minVertical and maxVertical to 0
290+
*/
291+
const checkBlockedCarousels = () => {
292+
const carousel = document?.querySelectorAll('.carousel-container');
293+
if (carousel[window.actualVertical]?.classList.contains('blocked-container') && minVertical === 0 && maxVertical === 0) {
294+
minVertical = window.actualVertical - 1;
295+
maxVertical = minVertical + document.querySelectorAll('.blocked-container').length - 1;
296+
} else if (!carousel[window.actualVertical]?.classList.contains('blocked-container')) {
297+
minVertical = 0;
298+
maxVertical = 0;
299+
}
300+
};
271301
export { carouselHorizontalMovement, carouselOK, carouselGridMovement, focusNextCarousel, focusElement, closeCarousel };

0 commit comments

Comments
 (0)