mirror of
https://github.com/Frooodle/Stirling-PDF.git
synced 2025-08-11 13:48:37 +02:00
Merge 8d943313a0
into 74c92ef215
This commit is contained in:
commit
a36c17495b
@ -75,39 +75,46 @@ function setupDropdowns() {
|
|||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
window.tooltipSetup = () => {
|
function tooltipSetup() {
|
||||||
const tooltipElements = document.querySelectorAll('[title]');
|
// initialize global tooltip element or get reference
|
||||||
|
let customTooltip = document.getElementById("customTooltip");
|
||||||
|
if (!customTooltip) {
|
||||||
|
customTooltip = document.createElement("div");
|
||||||
|
customTooltip.id = "customTooltip";
|
||||||
|
customTooltip.className = "btn-tooltip";
|
||||||
|
document.body.appendChild(customTooltip);
|
||||||
|
}
|
||||||
|
|
||||||
|
function updateTooltipPosition(event, text) {
|
||||||
|
if (window.innerWidth >= 1200) {
|
||||||
|
customTooltip.textContent = text;
|
||||||
|
customTooltip.style.display = "block";
|
||||||
|
customTooltip.style.left = `${event.pageX + 10}px`;
|
||||||
|
customTooltip.style.top = `${event.pageY + 10}px`;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function hideTooltip() {
|
||||||
|
customTooltip.style.display = "none";
|
||||||
|
}
|
||||||
|
|
||||||
|
// find uninitialized tooltips and set up event listeners
|
||||||
|
const tooltipElements = document.querySelectorAll("[title]");
|
||||||
|
|
||||||
tooltipElements.forEach((element) => {
|
tooltipElements.forEach((element) => {
|
||||||
const tooltipText = element.getAttribute('title');
|
const tooltipText = element.getAttribute("title");
|
||||||
element.removeAttribute('title');
|
element.removeAttribute("title");
|
||||||
element.setAttribute('data-title', tooltipText);
|
element.setAttribute("data-title", tooltipText); // no UI effect, just for reference
|
||||||
const customTooltip = document.createElement('div');
|
|
||||||
customTooltip.className = 'btn-tooltip';
|
|
||||||
customTooltip.textContent = tooltipText;
|
|
||||||
|
|
||||||
document.body.appendChild(customTooltip);
|
element.addEventListener("mouseenter", (event) => updateTooltipPosition(event, tooltipText));
|
||||||
|
element.addEventListener("mousemove", (event) => updateTooltipPosition(event, tooltipText));
|
||||||
|
element.addEventListener("mouseleave", hideTooltip);
|
||||||
|
|
||||||
element.addEventListener('mouseenter', (event) => {
|
// in case UI moves and mouseleave is not triggered, tooltip is readded when mouse is moved over the element
|
||||||
if (window.innerWidth >= 1200) {
|
element.addEventListener("click", hideTooltip);
|
||||||
customTooltip.style.display = 'block';
|
|
||||||
customTooltip.style.left = `${event.pageX + 10}px`;
|
|
||||||
customTooltip.style.top = `${event.pageY + 10}px`;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
element.addEventListener('mousemove', (event) => {
|
|
||||||
if (window.innerWidth >= 1200) {
|
|
||||||
customTooltip.style.left = `${event.pageX + 10}px`;
|
|
||||||
customTooltip.style.top = `${event.pageY + 10}px`;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
element.addEventListener('mouseleave', () => {
|
|
||||||
customTooltip.style.display = 'none';
|
|
||||||
});
|
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
window.tooltipSetup = tooltipSetup;
|
||||||
|
|
||||||
// Override the bootstrap dropdown styles for mobile
|
// Override the bootstrap dropdown styles for mobile
|
||||||
function fixNavbarDropdownStyles() {
|
function fixNavbarDropdownStyles() {
|
||||||
|
@ -316,9 +316,7 @@ document.addEventListener("DOMContentLoaded", function () {
|
|||||||
updateBookmarkData();
|
updateBookmarkData();
|
||||||
|
|
||||||
// Initialize tooltips for dynamically added elements
|
// Initialize tooltips for dynamically added elements
|
||||||
if (typeof $ !== "undefined") {
|
window.tooltipSetup();
|
||||||
$('[data-bs-toggle="tooltip"]').tooltip();
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// Create the main bookmark element with collapsible interface
|
// Create the main bookmark element with collapsible interface
|
||||||
@ -390,8 +388,6 @@ document.addEventListener("DOMContentLoaded", function () {
|
|||||||
childCount.style.fontSize = "0.7rem";
|
childCount.style.fontSize = "0.7rem";
|
||||||
childCount.style.padding = "0.2em 0.5em";
|
childCount.style.padding = "0.2em 0.5em";
|
||||||
childCount.textContent = bookmark.children.length;
|
childCount.textContent = bookmark.children.length;
|
||||||
childCount.setAttribute("data-bs-toggle", "tooltip");
|
|
||||||
childCount.setAttribute("data-bs-placement", "top");
|
|
||||||
childCount.title = `${bookmark.children.length} child bookmark${bookmark.children.length > 1 ? "s" : ""}`;
|
childCount.title = `${bookmark.children.length} child bookmark${bookmark.children.length > 1 ? "s" : ""}`;
|
||||||
toggleContainer.appendChild(childCount);
|
toggleContainer.appendChild(childCount);
|
||||||
} else {
|
} else {
|
||||||
@ -577,10 +573,6 @@ document.addEventListener("DOMContentLoaded", function () {
|
|||||||
button.type = "button";
|
button.type = "button";
|
||||||
button.className = `btn ${className} btn-bookmark-action`;
|
button.className = `btn ${className} btn-bookmark-action`;
|
||||||
button.innerHTML = `<span class="material-symbols-rounded">${icon}</span>`;
|
button.innerHTML = `<span class="material-symbols-rounded">${icon}</span>`;
|
||||||
|
|
||||||
// Use Bootstrap tooltips
|
|
||||||
button.setAttribute("data-bs-toggle", "tooltip");
|
|
||||||
button.setAttribute("data-bs-placement", "top");
|
|
||||||
button.title = title;
|
button.title = title;
|
||||||
|
|
||||||
button.addEventListener("click", clickHandler);
|
button.addEventListener("click", clickHandler);
|
||||||
@ -601,10 +593,6 @@ document.addEventListener("DOMContentLoaded", function () {
|
|||||||
// Update the add bookmark button appearance with clear visual cue
|
// Update the add bookmark button appearance with clear visual cue
|
||||||
addBookmarkBtn.innerHTML = '<span class="material-symbols-rounded">add</span> Add Top-level Bookmark';
|
addBookmarkBtn.innerHTML = '<span class="material-symbols-rounded">add</span> Add Top-level Bookmark';
|
||||||
addBookmarkBtn.className = "btn btn-primary btn-add-bookmark top-level";
|
addBookmarkBtn.className = "btn btn-primary btn-add-bookmark top-level";
|
||||||
|
|
||||||
// Use Bootstrap tooltips
|
|
||||||
addBookmarkBtn.setAttribute("data-bs-toggle", "tooltip");
|
|
||||||
addBookmarkBtn.setAttribute("data-bs-placement", "top");
|
|
||||||
addBookmarkBtn.title = "Add a new top-level bookmark";
|
addBookmarkBtn.title = "Add a new top-level bookmark";
|
||||||
|
|
||||||
// Add icon to empty state button as well
|
// Add icon to empty state button as well
|
||||||
@ -612,14 +600,10 @@ document.addEventListener("DOMContentLoaded", function () {
|
|||||||
const emptyStateBtn = document.querySelector(".btn-add-first-bookmark");
|
const emptyStateBtn = document.querySelector(".btn-add-first-bookmark");
|
||||||
if (emptyStateBtn) {
|
if (emptyStateBtn) {
|
||||||
emptyStateBtn.innerHTML = '<span class="material-symbols-rounded">add</span> Add First Bookmark';
|
emptyStateBtn.innerHTML = '<span class="material-symbols-rounded">add</span> Add First Bookmark';
|
||||||
emptyStateBtn.setAttribute("data-bs-toggle", "tooltip");
|
|
||||||
emptyStateBtn.setAttribute("data-bs-placement", "top");
|
|
||||||
emptyStateBtn.title = "Add first bookmark";
|
emptyStateBtn.title = "Add first bookmark";
|
||||||
|
|
||||||
// Initialize tooltips for the empty state button
|
// Initialize tooltips for the empty state button
|
||||||
if (typeof $ !== "undefined") {
|
window.tooltipSetup();
|
||||||
$('[data-bs-toggle="tooltip"]').tooltip();
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
Loading…
Reference in New Issue
Block a user