forgejo/web_src/js/webcomponents/absolute-date.js

39 lines
1.3 KiB
JavaScript
Raw Normal View History

export function toAbsoluteLocaleDate(date, lang, opts) {
return new Date(date).toLocaleString(lang || [], opts);
}
Add `<overflow-menu>`, rename webcomponents (#29400) 1. Add `<overflow-menu>` web component 2. Rename `<gitea-origin-url>` to `<origin-url>` and make filenames match. <img width="439" alt="image" src="https://github.com/go-gitea/gitea/assets/115237/2fbe4ca4-110b-4ad2-8e17-c1e116ccbd74"> <img width="444" alt="Screenshot 2024-03-02 at 21 36 52" src="https://github.com/go-gitea/gitea/assets/115237/aa8f786e-dc8c-4030-b12d-7cfb74bdfd6e"> <img width="537" alt="Screenshot 2024-03-03 at 03 05 06" src="https://github.com/go-gitea/gitea/assets/115237/fddd50aa-adf1-4b4b-bd7f-caf30c7b2245"> ![image](https://github.com/go-gitea/gitea/assets/115237/0f43770c-834c-4a05-8e3d-d30eb8653786) ![image](https://github.com/go-gitea/gitea/assets/115237/4b4c6bd7-843f-4f49-808f-6b3aed5e9f9a) TODO: - [x] Check if removal of `requestAnimationFrame` is possible to avoid flash of content. Likely needs a `MutationObserver`. - [x] Hide tippy when button is removed from DOM. - [x] ~~Implement right-aligned items (https://github.com/go-gitea/gitea/pull/28976)~~. Not going to do it. - [x] Clean up CSS so base element has no background and add background via tailwind instead. - [x] Use it for org and user page. --------- Co-authored-by: Giteabot <teabot@gitea.io> Co-authored-by: wxiaoguang <wxiaoguang@gmail.com> (cherry picked from commit 256a1eeb9a67b18c62a10f5909b584b7b220848a) Conflicts: options/locale/locale_en-US.ini templates/package/content/cargo.tmpl templates/package/content/cran.tmpl templates/package/content/debian.tmpl templates/package/content/maven.tmpl
2024-03-15 05:05:31 +03:00
window.customElements.define('absolute-date', class extends HTMLElement {
static observedAttributes = ['date', 'year', 'month', 'weekday', 'day'];
initialized = false;
update = () => {
const opt = {};
for (const attr of ['year', 'month', 'weekday', 'day']) {
if (this.getAttribute(attr)) opt[attr] = this.getAttribute(attr);
}
const lang = this.closest('[lang]')?.getAttribute('lang') ||
this.ownerDocument.documentElement.getAttribute('lang') || '';
// only use the date part, it is guaranteed to be in ISO format (YYYY-MM-DDTHH:mm:ss.sssZ)
let date = this.getAttribute('date');
let dateSep = date.indexOf('T');
dateSep = dateSep === -1 ? date.indexOf(' ') : dateSep;
date = dateSep === -1 ? date : date.substring(0, dateSep);
if (!this.shadowRoot) this.attachShadow({mode: 'open'});
this.shadowRoot.textContent = toAbsoluteLocaleDate(date, lang, opt);
};
attributeChangedCallback(_name, oldValue, newValue) {
if (!this.initialized || oldValue === newValue) return;
this.update();
}
connectedCallback() {
this.initialized = false;
this.update();
this.initialized = true;
}
});