Skip to content

Commit

Permalink
Merge pull request #2505 from reecebrowne/toolbar-tweaks2
Browse files Browse the repository at this point in the history 
Toolbar tweaks2
  • Loading branch information
@Frooodle
Frooodle authored Dec 19, 2024
2 parents 2d82c5f + 63386ba commit 8dca4a5
Show file tree
Hide file tree
Showing 4 changed files with 92 additions and 51 deletions.
8 changes: 8 additions & 0 deletions src/main/resources/static/css/navbar.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -366,3 +366,11 @@ span.icon-text::after {
background-color: #0056b3;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

#stacked {
gap: 1rem;
}

#stacked > .navbar-item {
margin: 0;
}
76 changes: 30 additions & 46 deletions src/main/resources/static/js/languageSelection.js
View file
Original file line number Diff line number Diff line change
@@ -1,16 +1,16 @@
function getStoredOrDefaultLocale() {
const storedLocale = localStorage.getItem("languageCode");
const storedLocale = localStorage.getItem('languageCode');
return storedLocale || getDetailedLanguageCode();
}

function setLanguageForDropdown(dropdownClass) {
const storedLocale = getStoredOrDefaultLocale();
const dropdownItems = document.querySelectorAll(dropdownClass);

dropdownItems.forEach(item => {
item.classList.toggle("active", item.dataset.bsLanguageCode === storedLocale);
item.removeEventListener("click", handleDropdownItemClick);
item.addEventListener("click", handleDropdownItemClick);
dropdownItems.forEach((item) => {
item.classList.toggle('active', item.dataset.bsLanguageCode === storedLocale);
item.removeEventListener('click', handleDropdownItemClick);
item.addEventListener('click', handleDropdownItemClick);
});
}

Expand All @@ -24,62 +24,46 @@ function handleDropdownItemClick(event) {
event.preventDefault();
const languageCode = event.currentTarget.dataset.bsLanguageCode;
if (languageCode) {
localStorage.setItem("languageCode", languageCode);
updateUrlWithLanguage(languageCode);
localStorage.setItem('languageCode', languageCode);
updateUrlWithLanguage(languageCode);
} else {
console.error("Language code is not set for this item.");
console.error('Language code is not set for this item.');
}
}

function checkUserLanguage(defaultLocale) {
if (!localStorage.getItem("languageCode") || document.documentElement.getAttribute("data-language") != defaultLocale) {
localStorage.setItem("languageCode", defaultLocale);
updateUrlWithLanguage(defaultLocale);
if (
!localStorage.getItem('languageCode') ||
document.documentElement.getAttribute('data-language') != defaultLocale
) {
localStorage.setItem('languageCode', defaultLocale);
updateUrlWithLanguage(defaultLocale);
}
}

function initLanguageSettings() {
document.addEventListener("DOMContentLoaded", function () {
setLanguageForDropdown(".lang_dropdown-item");
document.addEventListener('DOMContentLoaded', function () {
setLanguageForDropdown('.lang_dropdown-item');

const defaultLocale = getStoredOrDefaultLocale();
checkUserLanguage(defaultLocale);
const defaultLocale = getStoredOrDefaultLocale();
checkUserLanguage(defaultLocale);

const dropdownItems = document.querySelectorAll(".lang_dropdown-item");
dropdownItems.forEach(item => {
item.classList.toggle("active", item.dataset.bsLanguageCode === defaultLocale);
});
});
}

function removeElements() {
document.addEventListener("DOMContentLoaded", function () {
document.querySelectorAll(".navbar-item").forEach((element) => {
const dropdownItems = element.querySelectorAll(".dropdown-item");
const items = Array.from(dropdownItems).filter(item => !item.querySelector("hr.dropdown-divider"));

if (items.length <= 2) {
if (
element.previousElementSibling &&
element.previousElementSibling.classList.contains("navbar-item") &&
element.previousElementSibling.classList.contains("nav-item-separator")
) {
element.previousElementSibling.remove();
}
element.remove();
}
});
const dropdownItems = document.querySelectorAll('.lang_dropdown-item');
dropdownItems.forEach((item) => {
item.classList.toggle('active', item.dataset.bsLanguageCode === defaultLocale);
});
});
}

function sortLanguageDropdown() {
document.addEventListener("DOMContentLoaded", function () {
const dropdownMenu = document.querySelector('.dropdown-menu .dropdown-item.lang_dropdown-item').parentElement;
if (dropdownMenu) {
const items = Array.from(dropdownMenu.children).filter(child => child.matches('a'));
items.sort((a, b) => a.dataset.bsLanguageCode.localeCompare(b.dataset.bsLanguageCode))
.forEach(node => dropdownMenu.appendChild(node));
}
document.addEventListener('DOMContentLoaded', function () {
const dropdownMenu = document.querySelector('.dropdown-menu .dropdown-item.lang_dropdown-item').parentElement;
if (dropdownMenu) {
const items = Array.from(dropdownMenu.children).filter((child) => child.matches('a'));
items
.sort((a, b) => a.dataset.bsLanguageCode.localeCompare(b.dataset.bsLanguageCode))
.forEach((node) => dropdownMenu.appendChild(node));
}
});
}

Expand Down
46 changes: 46 additions & 0 deletions src/main/resources/static/js/navbar.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,46 @@
function toolsManager() {
document.addEventListener('DOMContentLoaded', function () {
const stackedContainer = document.getElementById('stacked');

if (stackedContainer) {
const convertToPDF = stackedContainer.querySelector('.navbar-item:first-child');
const convertFromPDF = stackedContainer.querySelector('.navbar-item:nth-child(2)');

if (convertToPDF && convertFromPDF) {
const dropdownItemsTo = convertToPDF.querySelectorAll('.dropdown-item');
const dropdownItemsFrom = convertFromPDF.querySelectorAll('.dropdown-item');

const itemsTo = Array.from(dropdownItemsTo).filter((item) => !item.querySelector('hr.dropdown-divider'));
const itemsFrom = Array.from(dropdownItemsFrom).filter((item) => !item.querySelector('hr.dropdown-divider'));

const totalItems = itemsTo.length + itemsFrom.length;

if (totalItems > 12) {
stackedContainer.style.flexDirection = 'row';
stackedContainer.classList.remove('col-lg-2');
stackedContainer.classList.add('col-lg-4');
convertToPDF.style.flex = '1 1 50%';
convertFromPDF.style.flex = '1 1 50%';
}
}
}

document.querySelectorAll('.navbar-item').forEach((element) => {
if (!element.closest('#stacked')) {
const dropdownItems = element.querySelectorAll('.dropdown-item');
const items = Array.from(dropdownItems).filter((item) => !item.querySelector('hr.dropdown-divider'));

if (items.length === 0) {
if (
element.previousElementSibling &&
element.previousElementSibling.classList.contains('navbar-item') &&
element.previousElementSibling.classList.contains('nav-item-separator')
) {
element.previousElementSibling.remove();
}
element.remove();
}
}
});
});
}
13 changes: 8 additions & 5 deletions src/main/resources/templates/fragments/navbar.html
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,11 @@
<div th:fragment="navbar" class="mx-auto">
<script th:src="@{'/js/languageSelection.js'}"></script>
<script th:src="@{'/js/navbar.js'}"></script>
<script th:src="@{'/js/additionalLanguageCode.js'}"></script>
<script th:inline="javascript">
// Initializing the scripts
initLanguageSettings();
removeElements();
toolsManager();
</script>
<script th:inline="javascript">
const currentVersion = /*[[${@appVersion}]]*/ '';
Expand Down Expand Up @@ -45,7 +46,7 @@
<div class="container-fluid">
<div class="row">
<!-- Page tools menu items -->
<div class="navbar-item col-lg-2 col-sm-6 py px-xl-1 px-2">
<div class="navbar-item col-lg-2 col-sm-6 py px-xl-1">
<h6 class="menu-title" th:text="#{navbar.sections.organize}"></h6>
<div
th:replace="~{fragments/navbarEntry :: navbarEntry ('multi-tool', 'construction', 'home.multiTool.title', 'home.multiTool.desc', 'multiTool.tags', 'organize')}">
Expand Down Expand Up @@ -81,8 +82,9 @@ <h6 class="menu-title" th:text="#{navbar.sections.organize}"></h6>
th:replace="~{fragments/navbarEntry :: navbarEntry ('pdf-to-single-page', 'looks_one', 'home.PdfToSinglePage.title', 'home.PdfToSinglePage.desc', 'PdfToSinglePage.tags', 'organize')}">
</div>
</div>
<div id="stacked" class="navbar-item col-lg-2 col-sm-6 py px-xl-1 px-2"style="display:flex; flex-direction: column;">
<!-- Convert to PDF menu items -->
<div class="navbar-item col-lg-2 col-sm-6 py px-xl-1 px-2">
<div class="navbar-item py px-xl-1 px-2" style="margin-bottom: 1rem;">
<h6 class="menu-title" th:text="#{navbar.sections.convertTo}"></h6>
<div
th:replace="~{fragments/navbarEntry :: navbarEntry ('img-to-pdf', 'image', 'home.imageToPdf.title', 'home.imageToPdf.desc', 'imageToPdf.tags', 'image')}">
Expand All @@ -99,12 +101,12 @@ <h6 class="menu-title" th:text="#{navbar.sections.convertTo}"></h6>
<div
th:replace="~{fragments/navbarEntry :: navbarEntry ('markdown-to-pdf', 'markdown', 'home.MarkdownToPDF.title', 'home.MarkdownToPDF.desc', 'MarkdownToPDF.tags', 'convert')}">
</div>
<div
<div
th:replace="~{fragments/navbarEntry :: navbarEntry ('book-to-pdf', 'book', 'home.BookToPDF.title', 'home.BookToPDF.desc', 'BookToPDF.tags', 'convert')}">
</div>
</div>
<!-- Convert from PDF menu items -->
<div class="navbar-item col-lg-2 col-sm-6 py px-xl-1 px-2">
<div class="navbar-item py px-xl-1">
<h6 class="menu-title" th:text="#{navbar.sections.convertFrom}"></h6>
<div
th:replace="~{fragments/navbarEntry :: navbarEntry ('pdf-to-img', 'image', 'home.pdfToImage.title', 'home.pdfToImage.desc', 'pdfToImage.tags', 'image')}">
Expand Down Expand Up @@ -134,6 +136,7 @@ <h6 class="menu-title" th:text="#{navbar.sections.convertFrom}"></h6>
th:replace="~{fragments/navbarEntry :: navbarEntry ('pdf-to-book', 'book', 'home.PDFToBook.title', 'home.PDFToBook.desc', 'PDFToBook.tags', 'convert')}">
</div>
</div>
</div>
<!-- Security menu items -->
<div class="navbar-item col-lg-2 col-sm-6 py px-xl-1 px-2">
<h6 class="menu-title" th:text="#{navbar.sections.security}"></h6>
Expand Down

0 comments on commit 8dca4a5

Please sign in to comment.