Dropdowns are FINALLY not a mess. whew that took forever.
This commit is contained in:
wearrrrr
parent
a70f55e374
commit
eac21bb0d2
2 changed files with 86 additions and 42 deletions
|
|
@ -16,8 +16,6 @@ const { buttonNameDefault, dropdownList, id } = Astro.props;
|
|||
)
|
||||
})
|
||||
}
|
||||
<!-- <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>
|
||||
|
|
@ -42,9 +40,9 @@ const { buttonNameDefault, dropdownList, id } = Astro.props;
|
|||
list-style: none;
|
||||
padding: 0;
|
||||
text-align: center;
|
||||
height: 0px;
|
||||
max-height: 0px; /* Set max-height to 0 instead of height */
|
||||
overflow: hidden;
|
||||
transition: 350ms ease-in-out;
|
||||
transition: max-height 350ms ease-in-out; /* Use max-height in the transition property */
|
||||
border-bottom-left-radius: 10px;
|
||||
border-bottom-right-radius: 10px;
|
||||
background-color: #212121;
|
||||
|
|
@ -55,4 +53,7 @@ const { buttonNameDefault, dropdownList, id } = Astro.props;
|
|||
color: white;
|
||||
cursor: pointer;
|
||||
}
|
||||
.dropdown-item:nth-last-child(1) {
|
||||
border-bottom: none;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -5,8 +5,16 @@ 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; font-size: 18px;">Selected Proxy</p>
|
||||
<Dropdown buttonDefaultName="Auto" dropdownList={["Auto", "Ultraviolet", "Dynamic"]}, id="dropdown__selected-proxy"></Dropdown>
|
||||
<div class="settings-container">
|
||||
<div class="setting__selected-proxy">
|
||||
<p style="color: white; font-size: 18px;">Selected Proxy</p>
|
||||
<Dropdown buttonNameDefault="Auto" dropdownList={["Auto", "Ultraviolet", "Dynamic"]}, id="dropdown__selected-proxy"></Dropdown>
|
||||
</div>
|
||||
<div class="setting__search-engine">
|
||||
<p style="color: white; font-size: 18px;">Search Engine</p>
|
||||
<Dropdown buttonNameDefault="Google" dropdownList={["Google", "Bing", "Brave", "Searx"]}, id="dropdown__search-engine"></Dropdown>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="content-setting-tab-customization">
|
||||
<h1 style="color: white;">Customization</h1>
|
||||
|
|
@ -78,23 +86,23 @@ import Dropdown from "./Dropdown.astro";
|
|||
}
|
||||
|
||||
function addDropdownListener() {
|
||||
let dropdown_toggle = document.getElementById('dropdown__selected-proxy');
|
||||
if (dropdown_toggle) {
|
||||
dropdown_toggle.addEventListener('click', () => {
|
||||
let dropdown = document.getElementById('dropdown__selected-proxy-menu');
|
||||
if (dropdown) {
|
||||
if (dropdown.style.height == '0px' || dropdown.style.height == '') {
|
||||
dropdown.style.height = "120px";
|
||||
dropdown_toggle.style.borderRadius = '10px 10px 0 0';
|
||||
} else {
|
||||
dropdown.style.height = '0px';
|
||||
setTimeout(() => {
|
||||
dropdown_toggle.style.borderRadius = '10px';
|
||||
}, 300);
|
||||
}
|
||||
let dropdown_toggles = document.getElementsByClassName('dropdown-toggle')
|
||||
Array.from(dropdown_toggles).forEach((toggle) => {
|
||||
toggle.addEventListener('click', () => {
|
||||
let dropdown = document.getElementById(toggle.id + "-menu")
|
||||
if (dropdown) {
|
||||
if (dropdown.style.maxHeight == '0px' || dropdown.style.maxHeight == '') {
|
||||
dropdown.style.maxHeight = dropdown.scrollHeight + 'px'; /* Set max-height dynamically */
|
||||
toggle.style.borderRadius = '10px 10px 0 0';
|
||||
} else {
|
||||
dropdown.style.maxHeight = '0px';
|
||||
setTimeout(() => {
|
||||
toggle.style.borderRadius = '10px';
|
||||
}, 300);
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
function determineListener(event) {
|
||||
|
|
@ -103,32 +111,63 @@ import Dropdown from "./Dropdown.astro";
|
|||
}
|
||||
}
|
||||
|
||||
function closeDropdown(dropdownID) {
|
||||
let dropdown = document.getElementById(dropdownID)
|
||||
if (dropdown) {
|
||||
dropdown.style.maxHeight = '0px';
|
||||
setTimeout(() => {
|
||||
let dropdown_toggle = document.getElementById(dropdownID.replace('-menu', ''));
|
||||
dropdown_toggle.style.borderRadius = '10px';
|
||||
}, 300);
|
||||
}
|
||||
}
|
||||
|
||||
function applySavedLocalStorage(localStorageItem, dropdownID) {
|
||||
if (localStorage.getItem(localStorageItem)) {
|
||||
let dropdown_toggle = document.getElementById(dropdownID);
|
||||
if (dropdown_toggle) {
|
||||
dropdown_toggle.innerText = localStorage.getItem(localStorageItem).charAt(0).toUpperCase() + localStorage.getItem(localStorageItem).slice(1)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
document.addEventListener('setting-tabChange', determineListener)
|
||||
|
||||
loadContent('setting-tab-proxy')
|
||||
|
||||
function setLocalStorageItem(event) {
|
||||
if (event.detail == "setting-tab-proxy") {
|
||||
if (localStorage.getItem('selectedProxy')) {
|
||||
let dropdown_toggle = document.getElementById('dropdown__selected-proxy');
|
||||
|
||||
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.getElementById('dropdown__selected-proxy-menu');
|
||||
if (dropdown) {
|
||||
let dropdown_toggle = document.getElementById('dropdown__selected-proxy');
|
||||
dropdown_toggle.innerText = event.target.innerText
|
||||
dropdown.style.height = '0px';
|
||||
dropdown_toggle.style.borderRadius = '10px';
|
||||
}
|
||||
})
|
||||
applySavedLocalStorage('selectedProxy', 'dropdown__selected-proxy')
|
||||
applySavedLocalStorage('selectedSearchEngine', 'dropdown__search-engine')
|
||||
let selectedProxyDropdown = document.getElementById('dropdown__selected-proxy-menu')
|
||||
let searchEngineDropdown = document.getElementById('dropdown__search-engine-menu')
|
||||
Array.from(searchEngineDropdown.children).forEach((item) => {
|
||||
item.addEventListener('click', () => {
|
||||
localStorage.setItem('selectedSearchEngine', item.dataset.setting)
|
||||
applySavedLocalStorage('selectedSearchEngine', 'dropdown__search-engine')
|
||||
closeDropdown(searchEngineDropdown.id);
|
||||
})
|
||||
})
|
||||
Array.from(selectedProxyDropdown.children).forEach((item) => {
|
||||
item.addEventListener('click', () => {
|
||||
localStorage.setItem('selectedProxy', item.dataset.setting)
|
||||
applySavedLocalStorage('selectedProxy', 'dropdown__selected-proxy')
|
||||
closeDropdown(selectedProxyDropdown.id);
|
||||
})
|
||||
})
|
||||
// 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.getElementById('dropdown__selected-proxy-menu');
|
||||
// if (dropdown) {
|
||||
// let dropdown_toggle = document.getElementById('dropdown__selected-proxy');
|
||||
// dropdown_toggle.innerText = event.target.innerText
|
||||
// dropdown.style.height = '0px';
|
||||
// dropdown_toggle.style.borderRadius = '10px';
|
||||
// }
|
||||
// })
|
||||
// })
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -142,7 +181,11 @@ import Dropdown from "./Dropdown.astro";
|
|||
transition: opacity 250ms ease-in-out;
|
||||
margin-left: 20px;
|
||||
}
|
||||
label{
|
||||
.settings-container {
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
}
|
||||
label {
|
||||
font-size: 24px;
|
||||
font-weight: 700;
|
||||
cursor: pointer;
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue