Skip to content

Commit 0bc6b27

Browse files
andreamalinandreamalin
committed
v1.0.2: Bugfix on negative index minVertical
1 parent e5469e7 commit 0bc6b27

File tree

2 files changed

+10
-54
lines changed

2 files changed

+10
-54
lines changed

‎src/navigation.js

+5-27
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,15 @@
11
let maxVertical = 0;
22
let minVertical = 0;
3-
43
/**
54
* Focus the next focusable element based on the actualHorizontal and actualVertical indexes
65
*/
76
const carouselHorizontalMovement = () => {
87
const carouselCard = document?.querySelectorAll('.carousel-container')[window.actualVertical]?.querySelectorAll('.focusable-element')[
98
window.actualHorizontal
109
];
11-
1210
checkBlockedCarousels();
1311
carouselCard.focus();
1412
};
15-
1613
/**
1714
* Check the next focusable element on a grid carousel
1815
*
@@ -26,7 +23,6 @@ const carouselGridMovement = (movement = 'down | up | left | right') => {
2623
?.querySelectorAll('.carousel-container')
2724
[window.actualVertical]?.querySelectorAll('.carousel-container-row');
2825
const actualRow = carouselGridRows[window.actualGridRow].childElementCount;
29-
3026
if (movement === 'down' || movement === 'up') {
3127
try {
3228
// Getting quanity of childs on previous or next row
@@ -42,15 +38,13 @@ const carouselGridMovement = (movement = 'down | up | left | right') => {
4238
window.actualGridRow -= 1;
4339
}
4440
}
45-
4641
if (actualRow - 1 === rowToFocus || window.actualGridCell === 0) {
4742
// Focusing on same position on next row
4843
carouselGridRows[window.actualGridRow].querySelectorAll('.focusable-element')[window.actualGridCell].focus();
4944
} else {
5045
try {
5146
// Calculating neareast aligned child
5247
const actualChildrenPos = Math.round((rowToFocus * window.actualGridCell + 1) / actualRow);
53-
5448
carouselGridRows[window.actualGridRow].querySelectorAll('.focusable-element')[actualChildrenPos].focus();
5549
window.actualGridCell = actualChildrenPos;
5650
} catch (e2) {
@@ -83,7 +77,6 @@ const carouselGridMovement = (movement = 'down | up | left | right') => {
8377
} catch (e) {
8478
try {
8579
let rowToFocus;
86-
8780
// Try getting previous or next row
8881
// Getting quanity of childs on previous or next row
8982
if (movement === 'right') {
@@ -113,7 +106,6 @@ const carouselGridMovement = (movement = 'down | up | left | right') => {
113106
}
114107
}
115108
};
116-
117109
/**
118110
* If the user goes down or right, sum +1 to actualVertical index
119111
* If the user goes up or left, substract -1 to actualVertical index
@@ -125,7 +117,6 @@ const carouselGridMovement = (movement = 'down | up | left | right') => {
125117
*/
126118
const focusNextCarousel = (movement = 'down | up | left | right') => {
127119
const listOfCarousels = document?.querySelectorAll('.carousel-container');
128-
129120
if (movement === 'down' || movement === 'right') {
130121
try {
131122
if ((maxVertical !== 0 && window.actualVertical < maxVertical) || (maxVertical === 0 && minVertical === 0)) {
@@ -156,7 +147,6 @@ const focusNextCarousel = (movement = 'down | up | left | right') => {
156147
}
157148
}
158149
};
159-
160150
/**
161151
* Check if the currently focused carousel is a grid or a normal carousel (vertical or horizontal)
162152
*
@@ -168,11 +158,9 @@ const checkTypeOfCarousel = (listOfCarousels) => {
168158
// Reset variables for grid carousel
169159
window.isInGridCarousel = true;
170160
window.isInNormalCarousel = false;
171-
172161
window.actualHorizontal = 0;
173162
window.actualGridRow = 0;
174163
window.actualGridCell = 0;
175-
176164
// Focus the element based on row and cell
177165
listOfCarousels[window.actualVertical]
178166
.querySelectorAll('.carousel-container-row')
@@ -183,48 +171,40 @@ const checkTypeOfCarousel = (listOfCarousels) => {
183171
// Reset variables for normal carousel
184172
window.isInNormalCarousel = true;
185173
window.isInGridCarousel = false;
186-
187174
window.actualGridRow = 0;
188175
window.actualGridCell = 0;
189176
window.actualHorizontal = 0;
190177
// Focus the current carousel
191178
carouselHorizontalMovement();
192179
}
193180
};
194-
195181
/**
196182
* Vertical center the next carousel
197183
* If the element height is less than the body or the current vertical position is 0, mantain the scroll on 0
198184
* Else; do the vertical center
199185
*/
200186
const carouselVerticalCenter = () => {
201187
const carousel = document?.querySelectorAll('.carousel-container');
202-
203188
let y =
204189
carousel[window.actualVertical].offsetTop - window.innerHeight / 2 + carousel[window.actualVertical].getBoundingClientRect().height / 2;
205190
y = Math.round(y);
206-
207191
carousel[window.actualVertical].focus();
208-
209192
if (y < 100 || window.actualVertical === 0 || (window.isInGridCarousel && window.actualGridCell === 0)) {
210193
document.getElementsByTagName('body')[0].scrollTop = 0;
211194
} else {
212195
document.getElementsByTagName('body')[0].scrollTop = y;
213196
}
214197
};
215-
216198
/**
217199
* Vertical center the next row on grid carousels
218200
* If the element height is less than the body, mantain the scroll on 0
219201
* Else; do the vertical center
220202
*/
221203
const carouselVerticalCenterGrid = () => {
222204
const carousel = document?.querySelectorAll('.carousel-container')[window.actualVertical]?.querySelectorAll('.carousel-container-row');
223-
224205
let y =
225206
carousel[window.actualGridRow].offsetTop - window.innerHeight / 2 + carousel[window.actualGridRow].getBoundingClientRect().height / 2;
226207
y = Math.round(y);
227-
228208
if (
229209
document?.querySelectorAll('.carousel-container')[window.actualVertical].clientHeight <
230210
document.getElementsByTagName('body')[0].clientHeight
@@ -234,21 +214,17 @@ const carouselVerticalCenterGrid = () => {
234214
document.getElementsByTagName('body')[0].scrollTop = y;
235215
}
236216
};
237-
238217
/**
239218
* Click the focused element and focus the next element based on the window.actualVertical and window.actualHorizontal
240219
*/
241220
const carouselOK = () => {
242221
document.getElementsByTagName('body')[0].scrollTop = 0;
243-
244222
// Stop double propagation on button elements
245223
if (document.activeElement.tagName !== 'BUTTON') {
246224
document.activeElement.click();
247225
}
248-
249226
focusElement();
250227
};
251-
252228
/**
253229
* If there is not any focus, focus the element based on the window.actualVertical and window.actualHorizontal
254230
*/
@@ -264,7 +240,6 @@ const focusElement = () => {
264240
firstFocusableElementCounter += 1;
265241
}, 200);
266242
};
267-
268243
/**
269244
* Close any closable carousel
270245
*
@@ -277,7 +252,6 @@ const closeCarousel = () => {
277252
}
278253
return false;
279254
};
280-
281255
/*
282256
* If it is a blocked container
283257
* * Get all the quantity of blocked containers on the page
@@ -291,7 +265,11 @@ const closeCarousel = () => {
291265
const checkBlockedCarousels = () => {
292266
const carousel = document?.querySelectorAll('.carousel-container');
293267
if (carousel[window.actualVertical]?.classList.contains('blocked-container') && minVertical === 0 && maxVertical === 0) {
294-
minVertical = window.actualVertical - 1;
268+
if (window.actualVertical === 0) {
269+
minVertical = 0;
270+
} else {
271+
minVertical = window.actualVertical - 1;
272+
}
295273
maxVertical = minVertical + document.querySelectorAll('.blocked-container').length - 1;
296274
} else if (!carousel[window.actualVertical]?.classList.contains('blocked-container')) {
297275
minVertical = 0;

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

+5-27
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,15 @@
11
let maxVertical = 0;
22
let minVertical = 0;
3-
43
/**
54
* Focus the next focusable element based on the actualHorizontal and actualVertical indexes
65
*/
76
const carouselHorizontalMovement = () => {
87
const carouselCard = document?.querySelectorAll('.carousel-container')[window.actualVertical]?.querySelectorAll('.focusable-element')[
98
window.actualHorizontal
109
];
11-
1210
checkBlockedCarousels();
1311
carouselCard.focus();
1412
};
15-
1613
/**
1714
* Check the next focusable element on a grid carousel
1815
*
@@ -26,7 +23,6 @@ const carouselGridMovement = (movement = 'down | up | left | right') => {
2623
?.querySelectorAll('.carousel-container')
2724
[window.actualVertical]?.querySelectorAll('.carousel-container-row');
2825
const actualRow = carouselGridRows[window.actualGridRow].childElementCount;
29-
3026
if (movement === 'down' || movement === 'up') {
3127
try {
3228
// Getting quanity of childs on previous or next row
@@ -42,15 +38,13 @@ const carouselGridMovement = (movement = 'down | up | left | right') => {
4238
window.actualGridRow -= 1;
4339
}
4440
}
45-
4641
if (actualRow - 1 === rowToFocus || window.actualGridCell === 0) {
4742
// Focusing on same position on next row
4843
carouselGridRows[window.actualGridRow].querySelectorAll('.focusable-element')[window.actualGridCell].focus();
4944
} else {
5045
try {
5146
// Calculating neareast aligned child
5247
const actualChildrenPos = Math.round((rowToFocus * window.actualGridCell + 1) / actualRow);
53-
5448
carouselGridRows[window.actualGridRow].querySelectorAll('.focusable-element')[actualChildrenPos].focus();
5549
window.actualGridCell = actualChildrenPos;
5650
} catch (e2) {
@@ -83,7 +77,6 @@ const carouselGridMovement = (movement = 'down | up | left | right') => {
8377
} catch (e) {
8478
try {
8579
let rowToFocus;
86-
8780
// Try getting previous or next row
8881
// Getting quanity of childs on previous or next row
8982
if (movement === 'right') {
@@ -113,7 +106,6 @@ const carouselGridMovement = (movement = 'down | up | left | right') => {
113106
}
114107
}
115108
};
116-
117109
/**
118110
* If the user goes down or right, sum +1 to actualVertical index
119111
* If the user goes up or left, substract -1 to actualVertical index
@@ -125,7 +117,6 @@ const carouselGridMovement = (movement = 'down | up | left | right') => {
125117
*/
126118
const focusNextCarousel = (movement = 'down | up | left | right') => {
127119
const listOfCarousels = document?.querySelectorAll('.carousel-container');
128-
129120
if (movement === 'down' || movement === 'right') {
130121
try {
131122
if ((maxVertical !== 0 && window.actualVertical < maxVertical) || (maxVertical === 0 && minVertical === 0)) {
@@ -156,7 +147,6 @@ const focusNextCarousel = (movement = 'down | up | left | right') => {
156147
}
157148
}
158149
};
159-
160150
/**
161151
* Check if the currently focused carousel is a grid or a normal carousel (vertical or horizontal)
162152
*
@@ -168,11 +158,9 @@ const checkTypeOfCarousel = (listOfCarousels) => {
168158
// Reset variables for grid carousel
169159
window.isInGridCarousel = true;
170160
window.isInNormalCarousel = false;
171-
172161
window.actualHorizontal = 0;
173162
window.actualGridRow = 0;
174163
window.actualGridCell = 0;
175-
176164
// Focus the element based on row and cell
177165
listOfCarousels[window.actualVertical]
178166
.querySelectorAll('.carousel-container-row')
@@ -183,48 +171,40 @@ const checkTypeOfCarousel = (listOfCarousels) => {
183171
// Reset variables for normal carousel
184172
window.isInNormalCarousel = true;
185173
window.isInGridCarousel = false;
186-
187174
window.actualGridRow = 0;
188175
window.actualGridCell = 0;
189176
window.actualHorizontal = 0;
190177
// Focus the current carousel
191178
carouselHorizontalMovement();
192179
}
193180
};
194-
195181
/**
196182
* Vertical center the next carousel
197183
* If the element height is less than the body or the current vertical position is 0, mantain the scroll on 0
198184
* Else; do the vertical center
199185
*/
200186
const carouselVerticalCenter = () => {
201187
const carousel = document?.querySelectorAll('.carousel-container');
202-
203188
let y =
204189
carousel[window.actualVertical].offsetTop - window.innerHeight / 2 + carousel[window.actualVertical].getBoundingClientRect().height / 2;
205190
y = Math.round(y);
206-
207191
carousel[window.actualVertical].focus();
208-
209192
if (y < 100 || window.actualVertical === 0 || (window.isInGridCarousel && window.actualGridCell === 0)) {
210193
document.getElementsByTagName('body')[0].scrollTop = 0;
211194
} else {
212195
document.getElementsByTagName('body')[0].scrollTop = y;
213196
}
214197
};
215-
216198
/**
217199
* Vertical center the next row on grid carousels
218200
* If the element height is less than the body, mantain the scroll on 0
219201
* Else; do the vertical center
220202
*/
221203
const carouselVerticalCenterGrid = () => {
222204
const carousel = document?.querySelectorAll('.carousel-container')[window.actualVertical]?.querySelectorAll('.carousel-container-row');
223-
224205
let y =
225206
carousel[window.actualGridRow].offsetTop - window.innerHeight / 2 + carousel[window.actualGridRow].getBoundingClientRect().height / 2;
226207
y = Math.round(y);
227-
228208
if (
229209
document?.querySelectorAll('.carousel-container')[window.actualVertical].clientHeight <
230210
document.getElementsByTagName('body')[0].clientHeight
@@ -234,21 +214,17 @@ const carouselVerticalCenterGrid = () => {
234214
document.getElementsByTagName('body')[0].scrollTop = y;
235215
}
236216
};
237-
238217
/**
239218
* Click the focused element and focus the next element based on the window.actualVertical and window.actualHorizontal
240219
*/
241220
const carouselOK = () => {
242221
document.getElementsByTagName('body')[0].scrollTop = 0;
243-
244222
// Stop double propagation on button elements
245223
if (document.activeElement.tagName !== 'BUTTON') {
246224
document.activeElement.click();
247225
}
248-
249226
focusElement();
250227
};
251-
252228
/**
253229
* If there is not any focus, focus the element based on the window.actualVertical and window.actualHorizontal
254230
*/
@@ -264,7 +240,6 @@ const focusElement = () => {
264240
firstFocusableElementCounter += 1;
265241
}, 200);
266242
};
267-
268243
/**
269244
* Close any closable carousel
270245
*
@@ -277,7 +252,6 @@ const closeCarousel = () => {
277252
}
278253
return false;
279254
};
280-
281255
/*
282256
* If it is a blocked container
283257
* * Get all the quantity of blocked containers on the page
@@ -291,7 +265,11 @@ const closeCarousel = () => {
291265
const checkBlockedCarousels = () => {
292266
const carousel = document?.querySelectorAll('.carousel-container');
293267
if (carousel[window.actualVertical]?.classList.contains('blocked-container') && minVertical === 0 && maxVertical === 0) {
294-
minVertical = window.actualVertical - 1;
268+
if (window.actualVertical === 0) {
269+
minVertical = 0;
270+
} else {
271+
minVertical = window.actualVertical - 1;
272+
}
295273
maxVertical = minVertical + document.querySelectorAll('.blocked-container').length - 1;
296274
} else if (!carousel[window.actualVertical]?.classList.contains('blocked-container')) {
297275
minVertical = 0;

0 commit comments

Comments
 (0)