javier/Stirling-PDF
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Homepage update (#2663)

Browse Source 
# Description

Please provide a summary of the changes, including relevant motivation
and context.

Closes #(issue_number)

## Checklist

- [ ] I have read the [Contribution
Guidelines](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/CONTRIBUTING.md)
- [ ] I have performed a self-review of my own code
- [ ] I have attached images of the change if it is UI based
- [ ] I have commented my code, particularly in hard-to-understand areas
- [ ] If my code has heavily changed functionality I have updated
relevant docs on [Stirling-PDFs doc
repo](https://github.com/Stirling-Tools/Stirling-Tools.github.io/blob/main/docs/)
- [ ] My changes generate no new warnings
- [ ] I have read the section [Add New Translation
Tags](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/HowToAddNewLanguage.md#add-new-translation-tags)
(for new translation tags only)

---------

Co-authored-by: Reece Browne <reece@stirling.pdf>
This commit is contained in:
reecebrowne
2025-01-30 18:55:33 +00:00
committed by GitHub
parent 67569a8f6a
commit 60cc613c63
54 changed files with 7843 additions and 7158 deletions
Download Patch File Download Diff File Expand all files Collapse all files

97
src/main/resources/static/js/navbar.js
View File

@@ -1,46 +1,79 @@
function toolsManager() {
document.addEventListener('DOMContentLoaded', function () {
const stackedContainer = document.getElementById('stacked');
const convertToPDF = document.querySelector('#groupConvertTo');
const convertFromPDF = document.querySelector('#groupConvertFrom');
if (stackedContainer) {
const convertToPDF = stackedContainer.querySelector('.navbar-item:first-child');
const convertFromPDF = stackedContainer.querySelector('.navbar-item:nth-child(2)');
if (convertToPDF && convertFromPDF) {
const itemsTo = Array.from(convertToPDF.querySelectorAll('.dropdown-item')).filter(
(item) => !item.querySelector('hr.dropdown-divider')
);
const itemsFrom = Array.from(convertFromPDF.querySelectorAll('.dropdown-item')).filter(
(item) => !item.querySelector('hr.dropdown-divider')
);
if (convertToPDF && convertFromPDF) {
const dropdownItemsTo = convertToPDF.querySelectorAll('.dropdown-item');
const dropdownItemsFrom = convertFromPDF.querySelectorAll('.dropdown-item');
const totalItems = itemsTo.length + itemsFrom.length;
const itemsTo = Array.from(dropdownItemsTo).filter((item) => !item.querySelector('hr.dropdown-divider'));
const itemsFrom = Array.from(dropdownItemsFrom).filter((item) => !item.querySelector('hr.dropdown-divider'));
if (totalItems > 12) {
document.querySelectorAll('#convertGroup').forEach((element) => (element.style.display = 'none'));
document.querySelectorAll('#groupConvertTo').forEach((element) => (element.style.display = 'flex'));
document.querySelectorAll('#groupConvertFrom').forEach((element) => (element.style.display = 'flex'));
} else {
document.querySelectorAll('#convertGroup').forEach((element) => (element.style.display = 'flex'));
document.querySelectorAll('#groupConvertTo').forEach((element) => (element.style.display = 'none'));
document.querySelectorAll('#groupConvertFrom').forEach((element) => (element.style.display = 'none'));
}
}
const totalItems = itemsTo.length + itemsFrom.length;
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 (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%';
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();
}
}
});
}
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'));
window.tooltipSetup = () => {
const tooltipElements = document.querySelectorAll("[title]");
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();
}
}
tooltipElements.forEach((element) => {
const tooltipText = element.getAttribute("title");
element.removeAttribute("title");
const customTooltip = document.createElement("div");
customTooltip.className = "btn-tooltip";
customTooltip.textContent = tooltipText;
document.body.appendChild(customTooltip);
element.addEventListener("mouseenter", (event) => {
customTooltip.style.display = "block";
customTooltip.style.left = `${event.pageX + 10}px`; // Position tooltip slightly away from the cursor
customTooltip.style.top = `${event.pageY + 10}px`;
});
// Update the position of the tooltip as the user moves the mouse
element.addEventListener("mousemove", (event) => {
customTooltip.style.left = `${event.pageX + 10}px`;
customTooltip.style.top = `${event.pageY + 10}px`;
});
// Hide the tooltip when the mouse leaves
element.addEventListener("mouseleave", () => {
customTooltip.style.display = "none";
});
});
}
document.addEventListener("DOMContentLoaded", () => {
tooltipSetup();
});