5f610da671
# Description of Changes
### Summary
- Fixed incorrect syntax in `setAttribute` method in `navbar.js`, where
an invalid argument format was used.
- Corrected `setAttribute('data-title, tooltipText');` to
`setAttribute('data-title', tooltipText);`, ensuring the tooltip text is
correctly assigned.
### Why the Change?
- The incorrect attribute assignment prevented tooltips from displaying
properly.
- Ensures proper tooltip functionality in the navigation bar.
### Challenges Encountered
- Debugging the tooltip rendering issue and ensuring correct attribute
assignment.
---
## Checklist
### General
- [x] I have read the [Contribution
Guidelines](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/CONTRIBUTING.md)
- [x] I have read the [Stirling-PDF Developer
Guide](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/DeveloperGuide.md)
(if applicable)
- [ ] I have read the [How to add new languages to
Stirling-PDF](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/HowToAddNewLanguage.md)
(if applicable)
- [x] I have performed a self-review of my own code
- [x] My changes generate no new warnings
### Documentation
- [ ] I have updated relevant docs on [Stirling-PDF's doc
repo](https://github.com/Stirling-Tools/Stirling-Tools.github.io/blob/main/docs/)
(if functionality has heavily changed)
- [ ] 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)
### UI Changes (if applicable)
- [ ] Screenshots or videos demonstrating the UI changes are attached
(e.g., as comments or direct attachments in the PR)
### Testing (if applicable)
- [x] I have tested my changes locally. Refer to the [Testing
Guide](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/DeveloperGuide.md#6-testing)
for more details.
79 lines
3.1 KiB
JavaScript
79 lines
3.1 KiB
JavaScript
function toolsManager() {
|
|
const convertToPDF = document.querySelector('#groupConvertTo');
|
|
const convertFromPDF = document.querySelector('#groupConvertFrom');
|
|
|
|
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')
|
|
);
|
|
|
|
const totalItems = itemsTo.length + itemsFrom.length;
|
|
|
|
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'));
|
|
}
|
|
}
|
|
|
|
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();
|
|
}
|
|
}
|
|
});
|
|
}
|
|
|
|
window.tooltipSetup = () => {
|
|
const tooltipElements = document.querySelectorAll('[title]');
|
|
|
|
tooltipElements.forEach((element) => {
|
|
const tooltipText = element.getAttribute('title');
|
|
element.removeAttribute('title');
|
|
element.setAttribute('data-title', 'tooltipText');
|
|
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();
|
|
});
|