web/forgejo
10
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 4

Use auto-updating, natively hoverable, localized time elements (#23988)

Browse source 
- Added [GitHub's `relative-time` element](https://github.com/github/relative-time-element)
- Converted all formatted timestamps to use this element
- No more flashes of unstyled content around time elements
- These elements are localized using the `lang` property of the HTML file
- Relative (e.g. the activities in the dashboard) and duration (e.g.
server uptime in the admin page) time elements are auto-updated to keep
up with the current time without refreshing the page
- Code that is not needed anymore such as `formatting.js` and parts of `since.go` have been deleted

Replaces #21440
Follows #22861

## Screenshots

### Localized

![image](https://user-images.githubusercontent.com/20454870/230775041-f0af4fda-8f6b-46d3-b8e3-d340c791a50c.png)

![image](https://user-images.githubusercontent.com/20454870/230673393-931415a9-5729-4ac3-9a89-c0fb5fbeeeb7.png)

### Tooltips

#### Native for dates

![image](https://user-images.githubusercontent.com/20454870/230797525-1fa0a854-83e3-484c-9da5-9425ab6528a3.png)

#### Interactive for relative

![image](https://user-images.githubusercontent.com/115237/230796860-51e1d640-c820-4a34-ba2e-39087020626a.png)

### Auto-update

![rec](https://user-images.githubusercontent.com/20454870/230672159-37480d8f-435a-43e9-a2b0-44073351c805.gif)

---------

Signed-off-by: Yarden Shoham <git@yardenshoham.com>
Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>
Co-authored-by: silverwind <me@silverwind.io>
Co-authored-by: delvh <dev.lh@web.de>
This commit is contained in:
Yarden Shoham 2023-04-11 02:01:20 +03:00 • committed by GitHub
parent 2b91841cd3
commit b7b5834831
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
45 changed files with 111 additions and 336 deletions
Download patch file Download diff file Expand all files Collapse all files

75
web_src/js/modules/tippy.js
View file

@ -6,7 +6,7 @@ export function createTippy(target, opts = {}) {
animation: false,
allowHTML: false,
hideOnClick: false,
interactiveBorder: 30,
interactiveBorder: 20,
ignoreAttributes: true,
maxWidth: 500, // increase over default 350px
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>`,
@ -36,6 +36,8 @@ export function createTippy(target, opts = {}) {
* @returns {null|tippy}
*/
function attachTooltip(target, content = null) {
switchTitleToTooltip(target);
content = content ?? target.getAttribute('data-tooltip-content');
if (!content) return null;
@ -55,6 +57,18 @@ function attachTooltip(target, content = null) {
return target._tippy;
}
function switchTitleToTooltip(target) {
const title = target.getAttribute('title');
if (title) {
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
@ -67,48 +81,57 @@ function lazyTooltipOnMouseHover(e) {
attachTooltip(this);
}
/**
* Activate the tooltip for all children elements
* And if the element has no aria-label, use the tooltip content as aria-label
* @param target {HTMLElement}
*/
function attachChildrenLazyTooltip(target) {
for (const el of target.querySelectorAll('[data-tooltip-content]')) {
el.addEventListener('mouseover', lazyTooltipOnMouseHover, true);
// 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 = target.getAttribute('data-tooltip-content');
if (content) {
el.setAttribute('aria-label', content);
}
// 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);
}
}
const elementNodeTypes = new Set([Node.ELEMENT_NODE, Node.DOCUMENT_FRAGMENT_NODE]);
export function initGlobalTooltips() {
// use MutationObserver to detect new elements added to the DOM, or attributes changed
const observer = new MutationObserver((mutationList) => {
for (const mutation of mutationList) {
// 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) {
// handle all "tooltip" elements in added nodes which have 'querySelectorAll' method, skip non-related nodes (eg: "#text")
if ('querySelectorAll' in el) {
if (elementNodeTypes.has(el.nodeType)) {
attachChildrenLazyTooltip(el);
if (el.hasAttribute('data-tooltip-content')) {
attachLazyTooltip(el);
}
}
}
} else if (mutation.type === 'attributes') {
// sync the tooltip content if the attributes change
attachTooltip(mutation.target);
}
}
observerConnect(observer);
});
observer.observe(document, {
subtree: true,
childList: true,
attributeFilter: ['data-tooltip-content'],
});
observerConnect(observer);
attachChildrenLazyTooltip(document.documentElement);
}