fix(settings): restrict sidebar reorder to main vs bottom sections
This commit is contained in:
Gareth Dawson
parent
179e08c148
commit
bd2ef5d8d5
4 changed files with 191 additions and 156 deletions
232
index.html
232
index.html
|
|
@ -2776,124 +2776,130 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="settings-group">
|
<div class="settings-group" id="sidebar-order-settings-group">
|
||||||
<div class="setting-item">
|
<div class="sidebar-settings-section sidebar-settings-main">
|
||||||
<div class="info">
|
<span class="sidebar-settings-section-label">Main sidebar</span>
|
||||||
<span class="label">Show Home in Sidebar</span>
|
<div class="setting-item">
|
||||||
<span class="description">Display the Home link in the sidebar navigation</span>
|
<div class="info">
|
||||||
|
<span class="label">Show Home in Sidebar</span>
|
||||||
|
<span class="description">Display the Home link in the sidebar navigation</span>
|
||||||
|
</div>
|
||||||
|
<label class="toggle-switch">
|
||||||
|
<input type="checkbox" id="sidebar-show-home-toggle" checked />
|
||||||
|
<span class="slider"></span>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
<div class="setting-item">
|
||||||
|
<div class="info">
|
||||||
|
<span class="label">Show Library in Sidebar</span>
|
||||||
|
<span class="description"
|
||||||
|
>Display the Library link in the sidebar navigation</span
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
<label class="toggle-switch">
|
||||||
|
<input type="checkbox" id="sidebar-show-library-toggle" checked />
|
||||||
|
<span class="slider"></span>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
<div class="setting-item">
|
||||||
|
<div class="info">
|
||||||
|
<span class="label">Show Recent in Sidebar</span>
|
||||||
|
<span class="description"
|
||||||
|
>Display the Recent link in the sidebar navigation</span
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
<label class="toggle-switch">
|
||||||
|
<input type="checkbox" id="sidebar-show-recent-toggle" checked />
|
||||||
|
<span class="slider"></span>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
<div class="setting-item">
|
||||||
|
<div class="info">
|
||||||
|
<span class="label">Show Unreleased in Sidebar</span>
|
||||||
|
<span class="description"
|
||||||
|
>Display the Unreleased link in the sidebar navigation</span
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
<label class="toggle-switch">
|
||||||
|
<input type="checkbox" id="sidebar-show-unreleased-toggle" checked />
|
||||||
|
<span class="slider"></span>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
<div class="setting-item">
|
||||||
|
<div class="info">
|
||||||
|
<span class="label">Show Donate in Sidebar</span>
|
||||||
|
<span class="description"
|
||||||
|
>Display the Donate link in the sidebar navigation</span
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
<label class="toggle-switch">
|
||||||
|
<input type="checkbox" id="sidebar-show-donate-toggle" checked />
|
||||||
|
<span class="slider"></span>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
<div class="setting-item">
|
||||||
|
<div class="info">
|
||||||
|
<span class="label">Show Settings in Sidebar</span>
|
||||||
|
<span class="description"
|
||||||
|
>Display the Settings link in the sidebar navigation</span
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
<label class="toggle-switch">
|
||||||
|
<input type="checkbox" id="sidebar-show-settings-toggle" checked />
|
||||||
|
<span class="slider"></span>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
<div class="setting-item">
|
||||||
|
<div class="info">
|
||||||
|
<span class="label">Show Account in Sidebar</span>
|
||||||
|
<span class="description"
|
||||||
|
>Display the Account link in the sidebar navigation</span
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
<label class="toggle-switch">
|
||||||
|
<input type="checkbox" id="sidebar-show-account-toggle" checked />
|
||||||
|
<span class="slider"></span>
|
||||||
|
</label>
|
||||||
</div>
|
</div>
|
||||||
<label class="toggle-switch">
|
|
||||||
<input type="checkbox" id="sidebar-show-home-toggle" checked />
|
|
||||||
<span class="slider"></span>
|
|
||||||
</label>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="setting-item">
|
<div class="sidebar-settings-section sidebar-settings-bottom">
|
||||||
<div class="info">
|
<span class="sidebar-settings-section-label">Bottom bar</span>
|
||||||
<span class="label">Show Library in Sidebar</span>
|
<div class="setting-item">
|
||||||
<span class="description"
|
<div class="info">
|
||||||
>Display the Library link in the sidebar navigation</span
|
<span class="label">Show About in Sidebar</span>
|
||||||
>
|
<span class="description"
|
||||||
|
>Display the About link in the sidebar navigation</span
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
<label class="toggle-switch">
|
||||||
|
<input type="checkbox" id="sidebar-show-about-bottom-toggle" checked />
|
||||||
|
<span class="slider"></span>
|
||||||
|
</label>
|
||||||
</div>
|
</div>
|
||||||
<label class="toggle-switch">
|
<div class="setting-item">
|
||||||
<input type="checkbox" id="sidebar-show-library-toggle" checked />
|
<div class="info">
|
||||||
<span class="slider"></span>
|
<span class="label">Show Download in Sidebar</span>
|
||||||
</label>
|
<span class="description"
|
||||||
</div>
|
>Display the Download link in the sidebar navigation</span
|
||||||
<div class="setting-item">
|
>
|
||||||
<div class="info">
|
</div>
|
||||||
<span class="label">Show Recent in Sidebar</span>
|
<label class="toggle-switch">
|
||||||
<span class="description"
|
<input type="checkbox" id="sidebar-show-download-bottom-toggle" checked />
|
||||||
>Display the Recent link in the sidebar navigation</span
|
<span class="slider"></span>
|
||||||
>
|
</label>
|
||||||
</div>
|
</div>
|
||||||
<label class="toggle-switch">
|
<div class="setting-item">
|
||||||
<input type="checkbox" id="sidebar-show-recent-toggle" checked />
|
<div class="info">
|
||||||
<span class="slider"></span>
|
<span class="label">Show Discord in Sidebar</span>
|
||||||
</label>
|
<span class="description"
|
||||||
</div>
|
>Display the Discord link in the sidebar navigation</span
|
||||||
<div class="setting-item">
|
>
|
||||||
<div class="info">
|
</div>
|
||||||
<span class="label">Show Unreleased in Sidebar</span>
|
<label class="toggle-switch">
|
||||||
<span class="description"
|
<input type="checkbox" id="sidebar-show-discordbtn-toggle" checked />
|
||||||
>Display the Unreleased link in the sidebar navigation</span
|
<span class="slider"></span>
|
||||||
>
|
</label>
|
||||||
</div>
|
</div>
|
||||||
<label class="toggle-switch">
|
|
||||||
<input type="checkbox" id="sidebar-show-unreleased-toggle" checked />
|
|
||||||
<span class="slider"></span>
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
<div class="setting-item">
|
|
||||||
<div class="info">
|
|
||||||
<span class="label">Show Donate in Sidebar</span>
|
|
||||||
<span class="description"
|
|
||||||
>Display the Donate link in the sidebar navigation</span
|
|
||||||
>
|
|
||||||
</div>
|
|
||||||
<label class="toggle-switch">
|
|
||||||
<input type="checkbox" id="sidebar-show-donate-toggle" checked />
|
|
||||||
<span class="slider"></span>
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
<div class="setting-item">
|
|
||||||
<div class="info">
|
|
||||||
<span class="label">Show Settings in Sidebar</span>
|
|
||||||
<span class="description"
|
|
||||||
>Display the Settings link in the sidebar navigation</span
|
|
||||||
>
|
|
||||||
</div>
|
|
||||||
<label class="toggle-switch">
|
|
||||||
<input type="checkbox" id="sidebar-show-settings-toggle" checked />
|
|
||||||
<span class="slider"></span>
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
<div class="setting-item">
|
|
||||||
<div class="info">
|
|
||||||
<span class="label">Show Account in Sidebar</span>
|
|
||||||
<span class="description"
|
|
||||||
>Display the Account link in the sidebar navigation</span
|
|
||||||
>
|
|
||||||
</div>
|
|
||||||
<label class="toggle-switch">
|
|
||||||
<input type="checkbox" id="sidebar-show-account-toggle" checked />
|
|
||||||
<span class="slider"></span>
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
<div class="setting-item">
|
|
||||||
<div class="info">
|
|
||||||
<span class="label">Show About in Sidebar</span>
|
|
||||||
<span class="description"
|
|
||||||
>Display the About link in the sidebar navigation</span
|
|
||||||
>
|
|
||||||
</div>
|
|
||||||
<label class="toggle-switch">
|
|
||||||
<input type="checkbox" id="sidebar-show-about-toggle" checked />
|
|
||||||
<span class="slider"></span>
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
<div class="setting-item">
|
|
||||||
<div class="info">
|
|
||||||
<span class="label">Show Download in Sidebar</span>
|
|
||||||
<span class="description"
|
|
||||||
>Display the Download link in the sidebar navigation</span
|
|
||||||
>
|
|
||||||
</div>
|
|
||||||
<label class="toggle-switch">
|
|
||||||
<input type="checkbox" id="sidebar-show-download-toggle" checked />
|
|
||||||
<span class="slider"></span>
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
<div class="setting-item">
|
|
||||||
<div class="info">
|
|
||||||
<span class="label">Show Discord in Sidebar</span>
|
|
||||||
<span class="description"
|
|
||||||
>Display the Discord link in the sidebar navigation</span
|
|
||||||
>
|
|
||||||
</div>
|
|
||||||
<label class="toggle-switch">
|
|
||||||
<input type="checkbox" id="sidebar-show-discord-toggle" checked />
|
|
||||||
<span class="slider"></span>
|
|
||||||
</label>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -1940,7 +1940,7 @@ export function initializeSettings(scrobbler, player, api, ui) {
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
const sidebarShowAboutToggle = document.getElementById('sidebar-show-about-toggle');
|
const sidebarShowAboutToggle = document.getElementById('sidebar-show-about-bottom-toggle');
|
||||||
if (sidebarShowAboutToggle) {
|
if (sidebarShowAboutToggle) {
|
||||||
sidebarShowAboutToggle.checked = sidebarSectionSettings.shouldShowAbout();
|
sidebarShowAboutToggle.checked = sidebarSectionSettings.shouldShowAbout();
|
||||||
sidebarShowAboutToggle.addEventListener('change', (e) => {
|
sidebarShowAboutToggle.addEventListener('change', (e) => {
|
||||||
|
|
@ -1949,7 +1949,7 @@ export function initializeSettings(scrobbler, player, api, ui) {
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
const sidebarShowDownloadToggle = document.getElementById('sidebar-show-download-toggle');
|
const sidebarShowDownloadToggle = document.getElementById('sidebar-show-download-bottom-toggle');
|
||||||
if (sidebarShowDownloadToggle) {
|
if (sidebarShowDownloadToggle) {
|
||||||
sidebarShowDownloadToggle.checked = sidebarSectionSettings.shouldShowDownload();
|
sidebarShowDownloadToggle.checked = sidebarSectionSettings.shouldShowDownload();
|
||||||
sidebarShowDownloadToggle.addEventListener('change', (e) => {
|
sidebarShowDownloadToggle.addEventListener('change', (e) => {
|
||||||
|
|
@ -1958,7 +1958,7 @@ export function initializeSettings(scrobbler, player, api, ui) {
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
const sidebarShowDiscordToggle = document.getElementById('sidebar-show-discord-toggle');
|
const sidebarShowDiscordToggle = document.getElementById('sidebar-show-discordbtn-toggle');
|
||||||
if (sidebarShowDiscordToggle) {
|
if (sidebarShowDiscordToggle) {
|
||||||
sidebarShowDiscordToggle.checked = sidebarSectionSettings.shouldShowDiscord();
|
sidebarShowDiscordToggle.checked = sidebarSectionSettings.shouldShowDiscord();
|
||||||
sidebarShowDiscordToggle.addEventListener('change', (e) => {
|
sidebarShowDiscordToggle.addEventListener('change', (e) => {
|
||||||
|
|
@ -1989,18 +1989,29 @@ export function initializeSettings(scrobbler, player, api, ui) {
|
||||||
item.draggable = true;
|
item.draggable = true;
|
||||||
});
|
});
|
||||||
|
|
||||||
const getSidebarItems = () =>
|
const mainContainer = sidebarSettingsGroup.querySelector('.sidebar-settings-main');
|
||||||
Array.from(sidebarSettingsGroup.querySelectorAll('.sidebar-setting-item[data-sidebar-id]'));
|
const bottomContainer = sidebarSettingsGroup.querySelector('.sidebar-settings-bottom');
|
||||||
|
|
||||||
|
const getSidebarItems = () => [
|
||||||
|
...(mainContainer?.querySelectorAll('.sidebar-setting-item[data-sidebar-id]') ?? []),
|
||||||
|
...(bottomContainer?.querySelectorAll('.sidebar-setting-item[data-sidebar-id]') ?? []),
|
||||||
|
];
|
||||||
|
|
||||||
const applySidebarSettingsOrder = () => {
|
const applySidebarSettingsOrder = () => {
|
||||||
const order = sidebarSectionSettings.getOrder();
|
const order = sidebarSectionSettings.getOrder();
|
||||||
const itemMap = new Map(getSidebarItems().map((item) => [item.dataset.sidebarId, item]));
|
const bottomIds = sidebarSectionSettings.getBottomNavIds();
|
||||||
|
const mainOrder = order.filter((id) => !bottomIds.includes(id));
|
||||||
|
const bottomOrder = order.filter((id) => bottomIds.includes(id));
|
||||||
|
const allItems = getSidebarItems();
|
||||||
|
const itemMap = new Map(allItems.map((item) => [item.dataset.sidebarId, item]));
|
||||||
|
|
||||||
order.forEach((id) => {
|
mainOrder.forEach((id) => {
|
||||||
const item = itemMap.get(id);
|
const item = itemMap.get(id);
|
||||||
if (item) {
|
if (item && mainContainer) mainContainer.appendChild(item);
|
||||||
sidebarSettingsGroup.appendChild(item);
|
});
|
||||||
}
|
bottomOrder.forEach((id) => {
|
||||||
|
const item = itemMap.get(id);
|
||||||
|
if (item && bottomContainer) bottomContainer.appendChild(item);
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
@ -2032,9 +2043,8 @@ export function initializeSettings(scrobbler, player, api, ui) {
|
||||||
saveSidebarOrder();
|
saveSidebarOrder();
|
||||||
};
|
};
|
||||||
|
|
||||||
const getDragAfterElement = (container, y) => {
|
const getDragAfterElement = (elements, y) => {
|
||||||
const draggableElements = [...container.querySelectorAll('.sidebar-setting-item:not(.dragging)')];
|
const draggableElements = elements.filter((el) => el !== draggedItem);
|
||||||
|
|
||||||
return draggableElements.reduce(
|
return draggableElements.reduce(
|
||||||
(closest, child) => {
|
(closest, child) => {
|
||||||
const box = child.getBoundingClientRect();
|
const box = child.getBoundingClientRect();
|
||||||
|
|
@ -2051,12 +2061,15 @@ export function initializeSettings(scrobbler, player, api, ui) {
|
||||||
const handleDragOver = (e) => {
|
const handleDragOver = (e) => {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
if (!draggedItem) return;
|
if (!draggedItem) return;
|
||||||
const afterElement = getDragAfterElement(sidebarSettingsGroup, e.clientY);
|
const container = draggedItem.parentElement;
|
||||||
|
if (container !== mainContainer && container !== bottomContainer) return;
|
||||||
|
const sectionItems = Array.from(container.querySelectorAll('.sidebar-setting-item[data-sidebar-id]'));
|
||||||
|
const afterElement = getDragAfterElement(sectionItems, e.clientY);
|
||||||
if (afterElement === draggedItem) return;
|
if (afterElement === draggedItem) return;
|
||||||
if (afterElement) {
|
if (afterElement) {
|
||||||
sidebarSettingsGroup.insertBefore(draggedItem, afterElement);
|
container.insertBefore(draggedItem, afterElement);
|
||||||
} else {
|
} else {
|
||||||
sidebarSettingsGroup.appendChild(draggedItem);
|
container.appendChild(draggedItem);
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1501,11 +1501,17 @@ export const sidebarSectionSettings = {
|
||||||
'sidebar-nav-donate',
|
'sidebar-nav-donate',
|
||||||
'sidebar-nav-settings',
|
'sidebar-nav-settings',
|
||||||
'sidebar-nav-account',
|
'sidebar-nav-account',
|
||||||
'sidebar-nav-about',
|
'sidebar-nav-about-bottom',
|
||||||
'sidebar-nav-download',
|
'sidebar-nav-download-bottom',
|
||||||
'sidebar-nav-discord',
|
'sidebar-nav-discordbtn',
|
||||||
],
|
],
|
||||||
|
|
||||||
|
getBottomNavIds() {
|
||||||
|
const ul = document.querySelector('.sidebar-nav.bottom ul');
|
||||||
|
if (!ul) return [];
|
||||||
|
return Array.from(ul.children).map((li) => li.id);
|
||||||
|
},
|
||||||
|
|
||||||
shouldShowHome() {
|
shouldShowHome() {
|
||||||
try {
|
try {
|
||||||
const val = localStorage.getItem(this.SHOW_HOME_KEY);
|
const val = localStorage.getItem(this.SHOW_HOME_KEY);
|
||||||
|
|
@ -1661,37 +1667,24 @@ export const sidebarSectionSettings = {
|
||||||
},
|
},
|
||||||
|
|
||||||
applySidebarOrder() {
|
applySidebarOrder() {
|
||||||
const lists = document.querySelectorAll('.sidebar-nav ul');
|
const mainList = document.querySelector('.sidebar-nav.main ul');
|
||||||
const primaryList = lists[0];
|
const bottomList = document.querySelector('.sidebar-nav.bottom ul');
|
||||||
if (!primaryList) return;
|
if (!mainList) return;
|
||||||
const secondaryList = lists[1];
|
|
||||||
|
|
||||||
const order = this.getOrder();
|
const order = this.getOrder();
|
||||||
const secondaryCount = secondaryList ? secondaryList.children.length : 0;
|
const bottomIds = this.getBottomNavIds();
|
||||||
const splitIndex = secondaryCount ? Math.max(0, order.length - secondaryCount) : order.length;
|
const mainOrder = order.filter((id) => !bottomIds.includes(id));
|
||||||
const primaryOrder = order.slice(0, splitIndex);
|
const bottomOrder = order.filter((id) => bottomIds.includes(id));
|
||||||
const secondaryOrder = order.slice(splitIndex);
|
|
||||||
|
|
||||||
primaryOrder.forEach((id) => {
|
mainOrder.forEach((id) => {
|
||||||
const item = document.getElementById(id);
|
const item = document.getElementById(id);
|
||||||
if (item) {
|
if (item) mainList.appendChild(item);
|
||||||
primaryList.appendChild(item);
|
|
||||||
}
|
|
||||||
});
|
});
|
||||||
|
|
||||||
if (secondaryList) {
|
if (bottomList) {
|
||||||
secondaryOrder.forEach((id) => {
|
bottomOrder.forEach((id) => {
|
||||||
const item = document.getElementById(id);
|
const item = document.getElementById(id);
|
||||||
if (item) {
|
if (item) bottomList.appendChild(item);
|
||||||
secondaryList.appendChild(item);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
} else {
|
|
||||||
secondaryOrder.forEach((id) => {
|
|
||||||
const item = document.getElementById(id);
|
|
||||||
if (item) {
|
|
||||||
primaryList.appendChild(item);
|
|
||||||
}
|
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
|
||||||
23
styles.css
23
styles.css
|
|
@ -1820,6 +1820,29 @@ input[type='search']::-webkit-search-cancel-button {
|
||||||
padding: 0;
|
padding: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.sidebar-settings-section {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidebar-settings-section-label {
|
||||||
|
font-size: 0.75rem;
|
||||||
|
font-weight: 600;
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 0.05em;
|
||||||
|
color: var(--muted-foreground);
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidebar-settings-section .sidebar-settings-section-label + .setting-item {
|
||||||
|
margin-top: var(--spacing-sm);
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidebar-settings-section .setting-item + .setting-item {
|
||||||
|
margin-top: var(--spacing-md);
|
||||||
|
}
|
||||||
|
|
||||||
.setting-item {
|
.setting-item {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue