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

Add a proper dropdown, slow but steady progress lol.

Browse source
This commit is contained in:
wearrrrr 2024-01-11 23:29:42 -06:00
parent 38e17d6463
commit e129503865
2 changed files with 135 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

49
src/components/Dropdown.astro Normal file
View file

@ -0,0 +1,49 @@
---
// TODO: Add Props to make this component more dynamic!!
---
<div class="dropdown">
<button id="dropdown-toggle" class="dropdown-toggle" type="button" data-toggle="dropdown">
Auto
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li class="dropdown-item" id="proxy-auto" data-setting="auto">Auto</li>
<li class="dropdown-item" id="proxy-ultraviolet" data-setting="ultraviolet">Ultraviolet</li>
</ul>
</div>
<style>
.dropdown {
box-shadow: 4px 6px 15px 0px #0e0e0e;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
}
.dropdown-toggle {
background-color: #2e2e2e;
border: none;
color: white;
padding: 12px 16px;
font-size: 16px;
cursor: pointer;
font-family: 'Varela Round', sans-serif;
width: 100%;
border-radius: 10px;
}
.dropdown-menu {
margin: 0;
list-style: none;
padding: 0;
text-align: center;
height: 0px;
overflow: hidden;
transition: 350ms ease-in-out;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
background-color: #212121;
}
.dropdown-item {
border-bottom: 1px solid #4d4d4d;
padding: 10px;
color: white;
cursor: pointer;
}
</style>

103
src/components/TabList.astro
View file

@ -1,7 +1,12 @@
---
import Dropdown from "./Dropdown.astro";
---
<div class="content-hidden">
<div id="content-setting-tab-proxy">
<h1 style="color: white;">Proxy</h1>
<p style="color: white;">Proxy settings</p>
<p style="color: white; font-size: 18px;">Selected Proxy</p>
<Dropdown></Dropdown>
</div>
<div id="content-setting-tab-customization">
<h1 style="color: white;">Customization</h1>
@ -33,29 +38,92 @@
</div>
</div>
<div id="current-content">
<h1 style="color: white;">Testing testing</h1>
</div>
</div>
<script>
<script is:inline>
let currentlySelectedTab;
let loadedContentStorage = {}
Array.from(document.getElementsByClassName('setting-tab')).forEach((tab)=>{
tab.addEventListener('click', (event: any) =>{
loadContent(event.target.id)
})
let contentToLoad = document.getElementById('content-' + tab.id)
if (contentToLoad) {
loadedContentStorage[tab.id] = contentToLoad.innerHTML
contentToLoad.remove()
}
tab.addEventListener('click', (event) => {
loadContent(event.target.id)
})
})
let currentlySelectedTab: string;
function loadContent(tabToLoad: string) {
if (currentlySelectedTab == tabToLoad) return
else currentlySelectedTab = tabToLoad
function loadContent(tabID) {
if (currentlySelectedTab == tabID) return
else currentlySelectedTab = tabID
let currentContent = document.getElementById('current-content')
let contentToLoad = document.getElementById('content-' + tabToLoad)
if (currentContent && contentToLoad) {
currentContent.style.opacity = '0'
setTimeout(() => {
currentContent!.innerHTML = contentToLoad!.innerHTML
currentContent!.style.opacity = '1'
}, 250);
if (currentContent) {
currentContent.style.opacity = '0'
setTimeout(() => {
currentContent.innerHTML = loadedContentStorage[tabID]
currentContent.style.opacity = '1'
document.dispatchEvent(new CustomEvent('setting-tabChange', {detail: tabID}))
document.dispatchEvent(new CustomEvent('setting-tabLoad', {detail: 'setting-tab-proxy'}))
}, 250);
}
}
document.addEventListener('setting-tabChange', (event) => {
if (event.detail == "setting-tab-proxy") {
addDropdownListener()
}
})
loadContent('setting-tab-proxy')
function addDropdownListener() {
let dropdown_toggle = document.getElementById('dropdown-toggle');
if (dropdown_toggle) {
dropdown_toggle.addEventListener('click', () => {
let dropdown = document.getElementsByClassName('dropdown-menu')[0];
if (dropdown) {
if (dropdown.style.height == '0px' || dropdown.style.height == '') {
dropdown.style.height = '80px';
dropdown_toggle.style.borderRadius = '10px 10px 0 0';
} else {
dropdown.style.height = '0px';
setTimeout(() => {
dropdown_toggle.style.borderRadius = '10px';
}, 300);
}
}
});
}
}
document.addEventListener('setting-tabLoad', (event) => {
if (event.detail == "setting-tab-proxy") {
if (localStorage.getItem('selectedProxy')) {
let dropdown_toggle = document.getElementById('dropdown-toggle');
if (dropdown_toggle) {
dropdown_toggle.innerText = localStorage.getItem('selectedProxy').charAt(0).toUpperCase() + localStorage.getItem('selectedProxy').slice(1)
}
}
Array.from(document.getElementsByClassName('dropdown-item')).forEach((item) => {
item.addEventListener('click', (event) => {
console.log(event.target.dataset)
localStorage.setItem('selectedProxy', event.target.dataset.setting)
let dropdown = document.getElementsByClassName('dropdown-menu')[0];
if (dropdown) {
let dropdown_toggle = document.getElementById('dropdown-toggle');
dropdown_toggle.innerText = event.target.innerText
dropdown.style.height = '0px';
dropdown_toggle.style.borderRadius = '10px';
}
})
})
}
})
</script>
<style>
.content-hidden {
@ -63,6 +131,7 @@
}
#current-content {
transition: opacity 250ms ease-in-out;
margin-left: 20px;
}
label{
font-size: 24px;