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

13
css/style.css
View file

@ -73,6 +73,11 @@ footer {
padding: 0.5rem;
cursor: pointer;
background: #333;
border: 1px transparent solid;
}
#active-feature-item {
border: 1px white solid;
}
.feature-detail-container {
@ -82,11 +87,3 @@ footer {
#active-feature-detail {
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 -->
<div class="col-8" id="feature-detail-column">
<div class="my-gradient gradient-spin rounded-3">
<div class="feature-detail-container rounded-3 p-3"
id="active-feature-detail">
<div class="feature-detail-container rounded-3 p-3" id="active-feature-detail">
<!-- Image/Video Container -->
<div class="row" id="feature-media-container">
<div class="col">

36
scripts/features.js
View file

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