Xargon/RetroDECK-Website
1
0
Fork 0
mirror of https://github.com/RetroDECK/RetroDECK-Website.git synced 2024-11-22 06:55:37 +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> </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="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span> <span class="visually-hidden">Previous</span>
</button> </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="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span> <span class="visually-hidden">Next</span>
</button> </button>
@ -420,7 +420,7 @@
integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
crossorigin="anonymous"></script> crossorigin="anonymous"></script>
<!-- <script src="scripts/gradient.js"></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> <script src="scripts/accessibility.js"></script>
</body> </body>

77
scripts/features.js
View file

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