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

Performance improvements to features selector

Browse source
This commit is contained in:
Adam Iannazzone 2024-04-23 18:52:54 -04:00
parent b8183ae21a
commit 12093d0551
3 changed files with 21 additions and 27 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

15
css/style.css
View file

@ -73,6 +73,11 @@ footer {
padding: 0.5rem; padding: 0.5rem;
cursor: pointer; cursor: pointer;
background: #333; background: #333;
border: 1px transparent solid;
}
#active-feature-item {
border: 1px white solid;
} }
.feature-detail-container { .feature-detail-container {
@ -81,12 +86,4 @@ footer {
#active-feature-detail { #active-feature-detail {
display: inherit; display: inherit;
} }
.feature-list-item {
border: 1px transparent solid;
}
#active-feature-item {
border: 1px white solid;
}

3
features.html
View file

@ -178,8 +178,7 @@
<!-- Right Column --> <!-- Right Column -->
<div class="col-8" id="feature-detail-column"> <div class="col-8" id="feature-detail-column">
<div class="my-gradient gradient-spin rounded-3"> <div class="my-gradient gradient-spin rounded-3">
<div class="feature-detail-container rounded-3 p-3" <div class="feature-detail-container rounded-3 p-3" id="active-feature-detail">
id="active-feature-detail">
<!-- Image/Video Container --> <!-- Image/Video Container -->
<div class="row" id="feature-media-container"> <div class="row" id="feature-media-container">
<div class="col"> <div class="col">

30
scripts/features.js
View file

@ -1,6 +1,6 @@
featureTitles = document.getElementsByClassName('feature-list-item'); const featureTitles = document.getElementsByClassName('feature-list-item');
featureDetails = document.getElementsByClassName('feature-detail-container'); const featureDetails = document.getElementsByClassName('feature-detail-container');
// let currentFeature = 0; let currentFeature = 0;
for (let i = 0; i < featureTitles.length; i++) { for (let i = 0; i < featureTitles.length; i++) {
featureTitles[i].addEventListener('click', function () { featureTitles[i].addEventListener('click', function () {
@ -12,20 +12,18 @@ for (let i = 0; i < featureTitles.length; i++) {
} }
function updateActiveFeature(i) { function updateActiveFeature(i) {
// Reset all const lastCurrentFeature = currentFeature;
for (let j = 0; j < featureTitles.length; j++) { currentFeature = i;
featureTitles[j].removeAttribute('id');
featureDetails[j].removeAttribute('id');
featureTitles[j].className = 'row feature-list-item rounded-3';
featureTitles[j].style = '';
}
// currentFeature = i; // New current feature
featureTitles[currentFeature].className += ' gradient-spin my-gradient';
featureTitles[currentFeature].id = 'active-feature-item';
featureDetails[currentFeature].id = 'active-feature-detail'
// Update the active feature // Reset previous current feature
featureTitles[i].id = 'active-feature-item'; featureTitles[lastCurrentFeature].removeAttribute('id');
featureDetails[i].id = 'active-feature-detail' featureTitles[lastCurrentFeature].className = 'row feature-list-item rounded-3';
featureTitles[lastCurrentFeature].style = '';
featureDetails[lastCurrentFeature].removeAttribute('id');
// Handle styles
featureTitles[i].className += ' gradient-spin my-gradient';
} }