RevelaNetwork/Revela-v4
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Make the dropdown MUCH more stable, and Dropdown more generic.

Browse source
This commit is contained in:
wearrrrr 2024-01-14 14:05:38 -06:00
parent b5976b9943
commit a70f55e374
2 changed files with 38 additions and 31 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
src/components/Dropdown.astro
View file

@ -1,14 +1,14 @@
--- ---
// TODO: Add Props to make this component more dynamic!! // TODO: Add Props to make this component more dynamic!!
const { buttonNameDefault, dropdownList } = Astro.props; const { buttonNameDefault, dropdownList, id } = Astro.props;
--- ---
<div class="dropdown"> <div class="dropdown">
<button id="dropdown-toggle" class="dropdown-toggle" type="button" data-toggle="dropdown"> <button id={id} class="dropdown-toggle" type="button" data-toggle="dropdown">
{buttonNameDefault} {buttonNameDefault}
<span class="caret"></span></button> <span class="caret"></span></button>
<ul class="dropdown-menu"> <ul class="dropdown-menu" id={id + "-menu"}>
{ {
dropdownList.map((item: any) => { dropdownList.map((item: any) => {
return ( return (

63
src/components/TabList.astro
View file

@ -6,7 +6,7 @@ import Dropdown from "./Dropdown.astro";
<div id="content-setting-tab-proxy"> <div id="content-setting-tab-proxy">
<h1 style="color: white;">Proxy</h1> <h1 style="color: white;">Proxy</h1>
<p style="color: white; font-size: 18px;">Selected Proxy</p> <p style="color: white; font-size: 18px;">Selected Proxy</p>
<Dropdown buttonDefaultName="Auto" dropdownList={["Auto", "Ultraviolet", "Dynamic"]}></Dropdown> <Dropdown buttonDefaultName="Auto" dropdownList={["Auto", "Ultraviolet", "Dynamic"]}, id="dropdown__selected-proxy"></Dropdown>
</div> </div>
<div id="content-setting-tab-customization"> <div id="content-setting-tab-customization">
<h1 style="color: white;">Customization</h1> <h1 style="color: white;">Customization</h1>
@ -42,13 +42,18 @@ import Dropdown from "./Dropdown.astro";
</div> </div>
</div> </div>
<script is:inline> <script is:inline>
let currentlySelectedTab; document.addEventListener("astro:before-swap", () => {
let loadedContentStorage = {} window.currentlySelectedTab = ""
document.removeEventListener('setting-tabChange', determineListener)
document.removeEventListener('setting-tabLoad', setLocalStorageItem)
})
window.currentlySelectedTab;
window.loadedContentStorage = {}
Array.from(document.getElementsByClassName('setting-tab')).forEach((tab)=>{ Array.from(document.getElementsByClassName('setting-tab')).forEach((tab)=>{
let contentToLoad = document.getElementById('content-' + tab.id) let contentToLoad = document.getElementById('content-' + tab.id)
if (contentToLoad) { if (contentToLoad) {
loadedContentStorage[tab.id] = contentToLoad.innerHTML window.loadedContentStorage[tab.id] = contentToLoad.innerHTML
contentToLoad.remove() contentToLoad.remove()
} }
@ -58,37 +63,28 @@ import Dropdown from "./Dropdown.astro";
}) })
function loadContent(tabID) { function loadContent(tabID) {
if (currentlySelectedTab == tabID) return if (window.currentlySelectedTab == tabID) return
else currentlySelectedTab = tabID else window.currentlySelectedTab = tabID
let currentContent = document.getElementById('current-content') let currentContent = document.getElementById('current-content')
if (currentContent) { if (currentContent) {
currentContent.style.opacity = '0' currentContent.style.opacity = '0'
setTimeout(() => { setTimeout(() => {
currentContent.innerHTML = loadedContentStorage[tabID] currentContent.innerHTML = window.loadedContentStorage[tabID]
currentContent.style.opacity = '1' currentContent.style.opacity = '1'
document.dispatchEvent(new CustomEvent('setting-tabChange', {detail: tabID})) document.dispatchEvent(new CustomEvent('setting-tabChange', {detail: tabID }))
document.dispatchEvent(new CustomEvent('setting-tabLoad', {detail: 'setting-tab-proxy'})) document.dispatchEvent(new CustomEvent('setting-tabLoad', {detail: tabID }))
}, 250); }, 250);
} }
} }
document.addEventListener('setting-tabChange', (event) => {
if (event.detail == "setting-tab-proxy") {
addDropdownListener()
}
})
loadContent('setting-tab-proxy')
const dropdownHeight = '120px'
function addDropdownListener() { function addDropdownListener() {
let dropdown_toggle = document.getElementById('dropdown-toggle'); let dropdown_toggle = document.getElementById('dropdown__selected-proxy');
if (dropdown_toggle) { if (dropdown_toggle) {
dropdown_toggle.addEventListener('click', () => { dropdown_toggle.addEventListener('click', () => {
let dropdown = document.getElementsByClassName('dropdown-menu')[0]; let dropdown = document.getElementById('dropdown__selected-proxy-menu');
if (dropdown) { if (dropdown) {
if (dropdown.style.height == '0px' || dropdown.style.height == '') { if (dropdown.style.height == '0px' || dropdown.style.height == '') {
dropdown.style.height = dropdownHeight; dropdown.style.height = "120px";
dropdown_toggle.style.borderRadius = '10px 10px 0 0'; dropdown_toggle.style.borderRadius = '10px 10px 0 0';
} else { } else {
dropdown.style.height = '0px'; dropdown.style.height = '0px';
@ -97,15 +93,24 @@ import Dropdown from "./Dropdown.astro";
}, 300); }, 300);
} }
} }
}); });
} }
} }
document.addEventListener('setting-tabLoad', (event) => { function determineListener(event) {
if (event.detail == "setting-tab-proxy") {
addDropdownListener()
}
}
document.addEventListener('setting-tabChange', determineListener)
loadContent('setting-tab-proxy')
function setLocalStorageItem(event) {
if (event.detail == "setting-tab-proxy") { if (event.detail == "setting-tab-proxy") {
if (localStorage.getItem('selectedProxy')) { if (localStorage.getItem('selectedProxy')) {
let dropdown_toggle = document.getElementById('dropdown-toggle'); let dropdown_toggle = document.getElementById('dropdown__selected-proxy');
if (dropdown_toggle) { if (dropdown_toggle) {
dropdown_toggle.innerText = localStorage.getItem('selectedProxy').charAt(0).toUpperCase() + localStorage.getItem('selectedProxy').slice(1) dropdown_toggle.innerText = localStorage.getItem('selectedProxy').charAt(0).toUpperCase() + localStorage.getItem('selectedProxy').slice(1)
@ -115,9 +120,9 @@ import Dropdown from "./Dropdown.astro";
item.addEventListener('click', (event) => { item.addEventListener('click', (event) => {
console.log(event.target.dataset) console.log(event.target.dataset)
localStorage.setItem('selectedProxy', event.target.dataset.setting) localStorage.setItem('selectedProxy', event.target.dataset.setting)
let dropdown = document.getElementsByClassName('dropdown-menu')[0]; let dropdown = document.getElementById('dropdown__selected-proxy-menu');
if (dropdown) { if (dropdown) {
let dropdown_toggle = document.getElementById('dropdown-toggle'); let dropdown_toggle = document.getElementById('dropdown__selected-proxy');
dropdown_toggle.innerText = event.target.innerText dropdown_toggle.innerText = event.target.innerText
dropdown.style.height = '0px'; dropdown.style.height = '0px';
dropdown_toggle.style.borderRadius = '10px'; dropdown_toggle.style.borderRadius = '10px';
@ -125,7 +130,9 @@ import Dropdown from "./Dropdown.astro";
}) })
}) })
} }
}) }
document.addEventListener('setting-tabLoad', setLocalStorageItem)
</script> </script>
<style> <style>
.content-hidden { .content-hidden {