Xargon/RetroDECK-Website
1
0
Fork 0
mirror of https://github.com/RetroDECK/RetroDECK-Website.git synced 2024-11-21 14:35:38 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Add keyboard control to carousel

Browse source
This commit is contained in:
Adam Iannazzone 2024-09-26 13:18:18 -04:00
parent 755e161eaa
commit 155a3ae809
2 changed files with 47 additions and 36 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
index.html
View file

@ -341,11 +341,11 @@
</div>
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#features-carousel" data-bs-slide="prev">
<button class="carousel-control-prev" type="button" data-bs-target="#features-carousel" data-bs-slide="prev" id="carousel-prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#features-carousel" data-bs-slide="next">
<button class="carousel-control-next" type="button" data-bs-target="#features-carousel" data-bs-slide="next" id="carousel-next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
@ -420,7 +420,7 @@
integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
crossorigin="anonymous"></script>
<!-- <script src="scripts/gradient.js"></script> -->
<!-- <script src="scripts/features.js"></script> -->
<script src="scripts/features.js"></script>
<script src="scripts/accessibility.js"></script>
</body>

77
scripts/features.js
View file

@ -1,38 +1,49 @@
const featureContainerElems = document.getElementsByClassName('feature-container');
let currentFeature = 1
// const featureContainerElems = document.getElementsByClassName('feature-container');
// let currentFeature = 1
for (let i = 0; i < featureContainerElems.length; i++) {
featureContainerElems[i].addEventListener('click', function() {
if (i != currentFeature) {
updateActiveFeature(i);
}
})
}
// for (let i = 0; i < featureContainerElems.length; i++) {
// featureContainerElems[i].addEventListener('click', function() {
// if (i != currentFeature) {
// updateActiveFeature(i);
// }
// })
// }
document.addEventListener('keyup', keyControl);
// document.addEventListener('keyup', keyControl);
function keyControl(e) {
// function keyControl(e) {
// if (e.code == 'ArrowRight') {
// if (currentFeature < featureContainerElems.length-2) {
// updateActiveFeature(currentFeature + 1);
// } else {
// updateActiveFeature(1);
// }
// }
// if (e.code == 'ArrowLeft') {
// if (currentFeature > 1) {
// updateActiveFeature(currentFeature - 1);
// } else {
// updateActiveFeature(featureContainerElems.length-2);
// }
// }
// }
// function updateActiveFeature(i) {
// const lastCurrentFeature = currentFeature;
// currentFeature = i;
// featureContainerElems[i].id = 'active-feature';
// featureContainerElems[i].scrollIntoView({block: 'start', inline: 'center'});
// featureContainerElems[lastCurrentFeature].id = ''
// }
document.addEventListener('keyup', function(e) {
if (e.code == 'ArrowRight') {
if (currentFeature < featureContainerElems.length-2) {
updateActiveFeature(currentFeature + 1);
} else {
updateActiveFeature(1);
}
document.getElementById('carousel-next').click();
document.getElementById('features').scrollIntoView({block: 'center'});
} else if (e.code == 'ArrowLeft') {
document.getElementById('carousel-prev').click();
document.getElementById('features').scrollIntoView({block: 'center'});
}
if (e.code == 'ArrowLeft') {
if (currentFeature > 1) {
updateActiveFeature(currentFeature - 1);
} else {
updateActiveFeature(featureContainerElems.length-2);
}
}
}
function updateActiveFeature(i) {
const lastCurrentFeature = currentFeature;
currentFeature = i;
featureContainerElems[i].id = 'active-feature';
featureContainerElems[i].scrollIntoView({block: 'start', inline: 'center'});
featureContainerElems[lastCurrentFeature].id = ''
}
});