|
1 | 1 | import {svg} from '../svg.ts'; |
2 | 2 |
|
| 3 | +function parseTransitionValue(value: string): number { |
| 4 | + let max = 0; |
| 5 | + for (const current of value.split(',')) { |
| 6 | + const trimmed = current.trim(); |
| 7 | + if (!trimmed) continue; |
| 8 | + const isMs = trimmed.endsWith('ms'); |
| 9 | + const numericPortion = Number.parseFloat(trimmed.replace(/ms|s$/u, '')); |
| 10 | + if (Number.isNaN(numericPortion)) continue; |
| 11 | + const duration = numericPortion * (isMs ? 1 : 1000); |
| 12 | + max = Math.max(max, duration); |
| 13 | + } |
| 14 | + return max; |
| 15 | +} |
| 16 | + |
| 17 | +function waitForTransitionEnd(element: Element): Promise<void> { |
| 18 | + if (!(element instanceof HTMLElement)) return Promise.resolve(); |
| 19 | + const transitionTarget = element.querySelector<HTMLElement>('.diff-file-body') ?? element; |
| 20 | + const styles = window.getComputedStyle(transitionTarget); |
| 21 | + const transitionDuration = parseTransitionValue(styles.transitionDuration); |
| 22 | + const transitionDelay = parseTransitionValue(styles.transitionDelay); |
| 23 | + const total = transitionDuration + transitionDelay; |
| 24 | + if (total === 0) return Promise.resolve(); |
| 25 | + |
| 26 | + return new Promise((resolve) => { |
| 27 | + let resolved = false; |
| 28 | + function cleanup() { |
| 29 | + if (resolved) return; |
| 30 | + resolved = true; |
| 31 | + transitionTarget.removeEventListener('transitionend', onTransitionEnd); |
| 32 | + resolve(); |
| 33 | + } |
| 34 | + function onTransitionEnd(event: TransitionEvent) { |
| 35 | + if (event.target !== transitionTarget) return; |
| 36 | + cleanup(); |
| 37 | + } |
| 38 | + transitionTarget.addEventListener('transitionend', onTransitionEnd); |
| 39 | + window.setTimeout(cleanup, total + 50); |
| 40 | + }); |
| 41 | +} |
| 42 | + |
3 | 43 | // Hides the file if newFold is true, and shows it otherwise. The actual hiding is performed using CSS. |
4 | 44 | // |
5 | 45 | // The fold arrow is the icon displayed on the upper left of the file box, especially intended for components having the 'fold-file' class. |
6 | 46 | // The file content box is the box that should be hidden or shown, especially intended for components having the 'file-content' class. |
7 | 47 | // |
8 | | -export function setFileFolding(fileContentBox: Element, foldArrow: HTMLElement, newFold: boolean) { |
| 48 | +export function setFileFolding(fileContentBox: Element, foldArrow: HTMLElement, newFold: boolean): Promise<void> { |
9 | 49 | foldArrow.innerHTML = svg(`octicon-chevron-${newFold ? 'right' : 'down'}`, 18); |
10 | 50 | fileContentBox.setAttribute('data-folded', String(newFold)); |
11 | 51 | if (newFold && fileContentBox.getBoundingClientRect().top < 0) { |
12 | 52 | fileContentBox.scrollIntoView(); |
13 | 53 | } |
| 54 | + return waitForTransitionEnd(fileContentBox); |
14 | 55 | } |
15 | 56 |
|
16 | 57 | // Like `setFileFolding`, except that it automatically inverts the current file folding state. |
17 | | -export function invertFileFolding(fileContentBox:HTMLElement, foldArrow: HTMLElement) { |
18 | | - setFileFolding(fileContentBox, foldArrow, fileContentBox.getAttribute('data-folded') !== 'true'); |
| 58 | +export function invertFileFolding(fileContentBox:HTMLElement, foldArrow: HTMLElement): Promise<void> { |
| 59 | + return setFileFolding(fileContentBox, foldArrow, fileContentBox.getAttribute('data-folded') !== 'true'); |
19 | 60 | } |
0 commit comments