mirror of
https://github.com/go-gitea/gitea
synced 2024-08-27 01:32:53 +02:00
Fixes: https://github.com/go-gitea/gitea/issues/28371 Fixed by using a JS solution that formats according to `lang`, but alters the 24h format setting as per user's locale. This will work for all tooltips: <img width="243" alt="Screenshot 2024-03-07 at 23 03 35" src="https://github.com/go-gitea/gitea/assets/115237/6d16c71c-6786-4eda-8cdc-50ec68ba62c6"> <img width="250" alt="Screenshot 2024-03-07 at 23 03 17" src="https://github.com/go-gitea/gitea/assets/115237/4e26bbb7-12df-4b81-bd37-14705e87e8f7"> <img width="310" alt="Screenshot 2024-03-07 at 23 14 34" src="https://github.com/go-gitea/gitea/assets/115237/1ef599f0-6401-4e19-b1da-59cdfc09b0f6"> I think there is only one other place in the UI where we render such absolute dates, which is in the actions view and which I've also fixed: <img width="275" alt="Screenshot 2024-03-07 at 23 04 00" src="https://github.com/go-gitea/gitea/assets/115237/df0fbe1f-96ee-4338-ab5e-2b10e215005d">
197 lines
7.2 KiB
JavaScript
197 lines
7.2 KiB
JavaScript
import tippy, {followCursor} from 'tippy.js';
|
|
import {isDocumentFragmentOrElementNode} from '../utils/dom.js';
|
|
import {formatDatetime} from '../utils/time.js';
|
|
|
|
const visibleInstances = new Set();
|
|
|
|
export function createTippy(target, opts = {}) {
|
|
// the callback functions should be destructured from opts,
|
|
// because we should use our own wrapper functions to handle them, do not let the user override them
|
|
const {onHide, onShow, onDestroy, ...other} = opts;
|
|
const instance = tippy(target, {
|
|
appendTo: document.body,
|
|
animation: false,
|
|
allowHTML: false,
|
|
hideOnClick: false,
|
|
interactiveBorder: 20,
|
|
ignoreAttributes: true,
|
|
maxWidth: 500, // increase over default 350px
|
|
onHide: (instance) => {
|
|
visibleInstances.delete(instance);
|
|
return onHide?.(instance);
|
|
},
|
|
onDestroy: (instance) => {
|
|
visibleInstances.delete(instance);
|
|
return onDestroy?.(instance);
|
|
},
|
|
onShow: (instance) => {
|
|
// hide other tooltip instances so only one tooltip shows at a time
|
|
for (const visibleInstance of visibleInstances) {
|
|
if (visibleInstance.props.role === 'tooltip') {
|
|
visibleInstance.hide();
|
|
}
|
|
}
|
|
visibleInstances.add(instance);
|
|
return onShow?.(instance);
|
|
},
|
|
arrow: `<svg width="16" height="7"><path d="m0 7 8-7 8 7Z" class="tippy-svg-arrow-outer"/><path d="m0 8 8-7 8 7Z" class="tippy-svg-arrow-inner"/></svg>`,
|
|
role: 'menu', // HTML role attribute, only tooltips should use "tooltip"
|
|
theme: other.role || 'menu', // CSS theme, either "tooltip", "menu" or "box-with-header"
|
|
plugins: [followCursor],
|
|
...other,
|
|
});
|
|
|
|
// for popups where content refers to a DOM element, we use the 'tippy-target' class
|
|
// to initially hide the content, now we can remove it as the content has been removed
|
|
// from the DOM by tippy
|
|
if (other.content instanceof Element) {
|
|
other.content.classList.remove('tippy-target');
|
|
}
|
|
|
|
return instance;
|
|
}
|
|
|
|
/**
|
|
* Attach a tooltip tippy to the given target element.
|
|
* If the target element already has a tooltip tippy attached, the tooltip will be updated with the new content.
|
|
* If the target element has no content, then no tooltip will be attached, and it returns null.
|
|
*
|
|
* Note: "tooltip" doesn't equal to "tippy". "tooltip" means a auto-popup content, it just uses tippy as the implementation.
|
|
*
|
|
* @param target {HTMLElement}
|
|
* @param content {null|string}
|
|
* @returns {null|tippy}
|
|
*/
|
|
function attachTooltip(target, content = null) {
|
|
switchTitleToTooltip(target);
|
|
|
|
content = content ?? target.getAttribute('data-tooltip-content');
|
|
if (!content) return null;
|
|
|
|
// when element has a clipboard target, we update the tooltip after copy
|
|
// in which case it is undesirable to automatically hide it on click as
|
|
// it would momentarily flash the tooltip out and in.
|
|
const hasClipboardTarget = target.hasAttribute('data-clipboard-target');
|
|
const hideOnClick = !hasClipboardTarget;
|
|
|
|
const props = {
|
|
content,
|
|
delay: 100,
|
|
role: 'tooltip',
|
|
theme: 'tooltip',
|
|
hideOnClick,
|
|
placement: target.getAttribute('data-tooltip-placement') || 'top-start',
|
|
followCursor: target.getAttribute('data-tooltip-follow-cursor') || false,
|
|
...(target.getAttribute('data-tooltip-interactive') === 'true' ? {interactive: true, aria: {content: 'describedby', expanded: false}} : {}),
|
|
};
|
|
|
|
if (!target._tippy) {
|
|
createTippy(target, props);
|
|
} else {
|
|
target._tippy.setProps(props);
|
|
}
|
|
return target._tippy;
|
|
}
|
|
|
|
function switchTitleToTooltip(target) {
|
|
let title = target.getAttribute('title');
|
|
if (title) {
|
|
// apply custom formatting to relative-time's tooltips
|
|
if (target.tagName.toLowerCase() === 'relative-time') {
|
|
const datetime = target.getAttribute('datetime');
|
|
if (datetime) {
|
|
title = formatDatetime(new Date(datetime));
|
|
}
|
|
}
|
|
target.setAttribute('data-tooltip-content', title);
|
|
target.setAttribute('aria-label', title);
|
|
// keep the attribute, in case there are some other "[title]" selectors
|
|
// and to prevent infinite loop with <relative-time> which will re-add
|
|
// title if it is absent
|
|
target.setAttribute('title', '');
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Creating tooltip tippy instance is expensive, so we only create it when the user hovers over the element
|
|
* According to https://www.w3.org/TR/DOM-Level-3-Events/#events-mouseevent-event-order , mouseover event is fired before mouseenter event
|
|
* Some browsers like PaleMoon don't support "addEventListener('mouseenter', capture)"
|
|
* The tippy by default uses "mouseenter" event to show, so we use "mouseover" event to switch to tippy
|
|
* @param e {Event}
|
|
*/
|
|
function lazyTooltipOnMouseHover(e) {
|
|
e.target.removeEventListener('mouseover', lazyTooltipOnMouseHover, true);
|
|
attachTooltip(this);
|
|
}
|
|
|
|
// Activate the tooltip for current element.
|
|
// If the element has no aria-label, use the tooltip content as aria-label.
|
|
function attachLazyTooltip(el) {
|
|
el.addEventListener('mouseover', lazyTooltipOnMouseHover, {capture: true});
|
|
|
|
// meanwhile, if the element has no aria-label, use the tooltip content as aria-label
|
|
if (!el.hasAttribute('aria-label')) {
|
|
const content = el.getAttribute('data-tooltip-content');
|
|
if (content) {
|
|
el.setAttribute('aria-label', content);
|
|
}
|
|
}
|
|
}
|
|
|
|
// Activate the tooltip for all children elements.
|
|
function attachChildrenLazyTooltip(target) {
|
|
for (const el of target.querySelectorAll('[data-tooltip-content]')) {
|
|
attachLazyTooltip(el);
|
|
}
|
|
}
|
|
|
|
export function initGlobalTooltips() {
|
|
// use MutationObserver to detect new "data-tooltip-content" elements added to the DOM, or attributes changed
|
|
const observerConnect = (observer) => observer.observe(document, {
|
|
subtree: true,
|
|
childList: true,
|
|
attributeFilter: ['data-tooltip-content', 'title']
|
|
});
|
|
const observer = new MutationObserver((mutationList, observer) => {
|
|
const pending = observer.takeRecords();
|
|
observer.disconnect();
|
|
for (const mutation of [...mutationList, ...pending]) {
|
|
if (mutation.type === 'childList') {
|
|
// mainly for Vue components and AJAX rendered elements
|
|
for (const el of mutation.addedNodes) {
|
|
if (!isDocumentFragmentOrElementNode(el)) continue;
|
|
attachChildrenLazyTooltip(el);
|
|
if (el.hasAttribute('data-tooltip-content')) {
|
|
attachLazyTooltip(el);
|
|
}
|
|
}
|
|
} else if (mutation.type === 'attributes') {
|
|
attachTooltip(mutation.target);
|
|
}
|
|
}
|
|
observerConnect(observer);
|
|
});
|
|
observerConnect(observer);
|
|
|
|
attachChildrenLazyTooltip(document.documentElement);
|
|
}
|
|
|
|
export function showTemporaryTooltip(target, content) {
|
|
// if the target is inside a dropdown, don't show the tooltip because when the dropdown
|
|
// closes, the tippy would be pushed unsightly to the top-left of the screen like seen
|
|
// on the issue comment menu.
|
|
if (target.closest('.ui.dropdown > .menu')) return;
|
|
|
|
const tippy = target._tippy ?? attachTooltip(target, content);
|
|
tippy.setContent(content);
|
|
if (!tippy.state.isShown) tippy.show();
|
|
tippy.setProps({
|
|
onHidden: (tippy) => {
|
|
// reset the default tooltip content, if no default, then this temporary tooltip could be destroyed
|
|
if (!attachTooltip(target)) {
|
|
tippy.destroy();
|
|
}
|
|
},
|
|
});
|
|
}
|