InfStarMC/infstarweb
1
0
Fork 0
mirror of https://github.com/Coldsmiles/infstarweb.git synced 2026-04-23 02:30:41 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: Refactor mobile menu and modal logic into setupUI function for improved organization

Browse Source
This commit is contained in:
zhangyuheng
2026-02-27 11:32:41 +08:00
parent d0a74226fd
commit 905113d240
2 changed files with 74 additions and 70 deletions
Download Patch File Download Diff File Expand all files Collapse all files

70
sponsor.html
View File

@@ -640,75 +640,5 @@
</div> </div>
<script src="sponsor_script.js"></script> <script src="sponsor_script.js"></script>
<script>
// Inline script for mobile menu toggling (copied from script.js)
// Since we are not using the full script.js which might have index-specific logic
document.addEventListener('DOMContentLoaded', () => {
const toggle = document.getElementById('mobile-toggle');
const menu = document.getElementById('mobile-menu');
if (toggle && menu) {
const icon = toggle.querySelector('i');
toggle.addEventListener('click', () => {
menu.classList.toggle('active');
document.body.classList.toggle('menu-open');
if (menu.classList.contains('active')) {
if(icon) {
icon.classList.remove('fa-bars');
icon.classList.add('fa-times');
}
} else {
if(icon) {
icon.classList.remove('fa-times');
icon.classList.add('fa-bars');
}
}
});
}
// Modal Logic
const modal = document.getElementById('sponsor-modal');
const btn = document.getElementById('open-sponsor-modal');
const span = document.getElementsByClassName('close-modal')[0];
const desktopView = document.getElementById('desktop-qr-view');
const mobileView = document.getElementById('mobile-btn-view');
// Detect Mobile
const isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) || window.innerWidth < 768;
if (isMobile) {
if(desktopView) desktopView.style.display = 'none';
if(mobileView) mobileView.style.display = 'block';
} else {
if(desktopView) desktopView.style.display = 'block';
if(mobileView) mobileView.style.display = 'none';
}
btn.onclick = function() {
modal.style.display = "flex";
// Trigger reflow
void modal.offsetWidth;
modal.classList.add('show');
}
span.onclick = function() {
modal.classList.remove('show');
setTimeout(() => {
modal.style.display = "none";
}, 300);
}
window.onclick = function(event) {
if (event.target == modal) {
modal.classList.remove('show');
setTimeout(() => {
modal.style.display = "none";
}, 300);
}
}
});
</script>
</body> </body>
</html> </html>

74
sponsor_script.js
View File

@@ -5,8 +5,82 @@ let filterState = { search: '', project: 'all' };
document.addEventListener('DOMContentLoaded', () => { document.addEventListener('DOMContentLoaded', () => {
fetchSponsorsData(); fetchSponsorsData();
setupListeners(); setupListeners();
setupUI();
}); });
function setupUI() {
// Mobile menu toggle
const toggle = document.getElementById('mobile-toggle');
const menu = document.getElementById('mobile-menu');
if (toggle && menu) {
const icon = toggle.querySelector('i');
toggle.addEventListener('click', () => {
menu.classList.toggle('active');
document.body.classList.toggle('menu-open');
if (menu.classList.contains('active')) {
if(icon) {
icon.classList.remove('fa-bars');
icon.classList.add('fa-times');
}
} else {
if(icon) {
icon.classList.remove('fa-times');
icon.classList.add('fa-bars');
}
}
});
}
// Modal Logic
const modal = document.getElementById('sponsor-modal');
const btn = document.getElementById('open-sponsor-modal');
const span = document.querySelector('.close-modal');
const desktopView = document.getElementById('desktop-qr-view');
const mobileView = document.getElementById('mobile-btn-view');
// Detect Mobile
const isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) || window.innerWidth < 768;
if (isMobile) {
if(desktopView) desktopView.style.display = 'none';
if(mobileView) mobileView.style.display = 'block';
} else {
if(desktopView) desktopView.style.display = 'block';
if(mobileView) mobileView.style.display = 'none';
}
if (modal && btn) {
btn.addEventListener('click', (e) => {
e.preventDefault(); // Prevent accidental form submission
modal.style.display = "flex";
// Trigger reflow
void modal.offsetWidth;
modal.classList.add('show');
});
}
if (span && modal) {
span.addEventListener('click', () => {
modal.classList.remove('show');
setTimeout(() => {
modal.style.display = "none";
}, 300);
});
}
window.addEventListener('click', (event) => {
if (modal && event.target == modal) {
modal.classList.remove('show');
setTimeout(() => {
modal.style.display = "none";
}, 300);
}
});
}
function setupListeners() { function setupListeners() {
const searchInput = document.getElementById('sponsor-search'); const searchInput = document.getElementById('sponsor-search');
const filterContainer = document.getElementById('project-filters'); const filterContainer = document.getElementById('project-filters');