diff options
Diffstat (limited to 'web_src/js/utils')
| -rw-r--r-- | web_src/js/utils/dom.test.ts | 24 | ||||
| -rw-r--r-- | web_src/js/utils/dom.ts | 97 | ||||
| -rw-r--r-- | web_src/js/utils/filetree.test.ts | 86 | ||||
| -rw-r--r-- | web_src/js/utils/filetree.ts | 85 | ||||
| -rw-r--r-- | web_src/js/utils/html.test.ts | 8 | ||||
| -rw-r--r-- | web_src/js/utils/html.ts | 32 |
6 files changed, 117 insertions, 215 deletions
diff --git a/web_src/js/utils/dom.test.ts b/web_src/js/utils/dom.test.ts index 6e71596850..057ea9808c 100644 --- a/web_src/js/utils/dom.test.ts +++ b/web_src/js/utils/dom.test.ts @@ -1,4 +1,10 @@ -import {createElementFromAttrs, createElementFromHTML, queryElemChildren, querySingleVisibleElem} from './dom.ts'; +import { + createElementFromAttrs, + createElementFromHTML, + queryElemChildren, + querySingleVisibleElem, + toggleElem, +} from './dom.ts'; test('createElementFromHTML', () => { expect(createElementFromHTML('<a>foo<span>bar</span></a>').outerHTML).toEqual('<a>foo<span>bar</span></a>'); @@ -19,10 +25,14 @@ test('createElementFromAttrs', () => { }); test('querySingleVisibleElem', () => { - let el = createElementFromHTML('<div><span>foo</span></div>'); + let el = createElementFromHTML('<div></div>'); + expect(querySingleVisibleElem(el, 'span')).toBeNull(); + el = createElementFromHTML('<div><span>foo</span></div>'); expect(querySingleVisibleElem(el, 'span').textContent).toEqual('foo'); el = createElementFromHTML('<div><span style="display: none;">foo</span><span>bar</span></div>'); expect(querySingleVisibleElem(el, 'span').textContent).toEqual('bar'); + el = createElementFromHTML('<div><span class="some-class tw-hidden">foo</span><span>bar</span></div>'); + expect(querySingleVisibleElem(el, 'span').textContent).toEqual('bar'); el = createElementFromHTML('<div><span>foo</span><span>bar</span></div>'); expect(() => querySingleVisibleElem(el, 'span')).toThrowError('Expected exactly one visible element'); }); @@ -32,3 +42,13 @@ test('queryElemChildren', () => { const children = queryElemChildren(el, '.a'); expect(children.length).toEqual(1); }); + +test('toggleElem', () => { + const el = createElementFromHTML('<p><div>a</div><div class="tw-hidden">b</div></p>'); + toggleElem(el.children); + expect(el.outerHTML).toEqual('<p><div class="tw-hidden">a</div><div class="">b</div></p>'); + toggleElem(el.children, false); + expect(el.outerHTML).toEqual('<p><div class="tw-hidden">a</div><div class="tw-hidden">b</div></p>'); + toggleElem(el.children, true); + expect(el.outerHTML).toEqual('<p><div class="">a</div><div class="">b</div></p>'); +}); diff --git a/web_src/js/utils/dom.ts b/web_src/js/utils/dom.ts index 4d15784e6e..8b540cebb1 100644 --- a/web_src/js/utils/dom.ts +++ b/web_src/js/utils/dom.ts @@ -9,55 +9,50 @@ type ElementsCallback<T extends Element> = (el: T) => Promisable<any>; type ElementsCallbackWithArgs = (el: Element, ...args: any[]) => Promisable<any>; export type DOMEvent<E extends Event, T extends Element = HTMLElement> = E & { target: Partial<T>; }; -function elementsCall(el: ElementArg, func: ElementsCallbackWithArgs, ...args: any[]) { +function elementsCall(el: ElementArg, func: ElementsCallbackWithArgs, ...args: any[]): ArrayLikeIterable<Element> { if (typeof el === 'string' || el instanceof String) { el = document.querySelectorAll(el as string); } if (el instanceof Node) { func(el, ...args); + return [el]; } else if (el.length !== undefined) { // this works for: NodeList, HTMLCollection, Array, jQuery - for (const e of (el as ArrayLikeIterable<Element>)) { - func(e, ...args); - } - } else { - throw new Error('invalid argument to be shown/hidden'); + const elems = el as ArrayLikeIterable<Element>; + for (const elem of elems) func(elem, ...args); + return elems; } + throw new Error('invalid argument to be shown/hidden'); +} + +export function toggleClass(el: ElementArg, className: string, force?: boolean): ArrayLikeIterable<Element> { + return elementsCall(el, (e: Element) => { + if (force === true) { + e.classList.add(className); + } else if (force === false) { + e.classList.remove(className); + } else if (force === undefined) { + e.classList.toggle(className); + } else { + throw new Error('invalid force argument'); + } + }); } /** - * @param el Element + * @param el ElementArg * @param force force=true to show or force=false to hide, undefined to toggle */ -function toggleShown(el: Element, force: boolean) { - if (force === true) { - el.classList.remove('tw-hidden'); - } else if (force === false) { - el.classList.add('tw-hidden'); - } else if (force === undefined) { - el.classList.toggle('tw-hidden'); - } else { - throw new Error('invalid force argument'); - } +export function toggleElem(el: ElementArg, force?: boolean): ArrayLikeIterable<Element> { + return toggleClass(el, 'tw-hidden', force === undefined ? force : !force); } -export function showElem(el: ElementArg) { - elementsCall(el, toggleShown, true); +export function showElem(el: ElementArg): ArrayLikeIterable<Element> { + return toggleElem(el, true); } -export function hideElem(el: ElementArg) { - elementsCall(el, toggleShown, false); -} - -export function toggleElem(el: ElementArg, force?: boolean) { - elementsCall(el, toggleShown, force); -} - -export function isElemHidden(el: ElementArg) { - const res: boolean[] = []; - elementsCall(el, (e) => res.push(e.classList.contains('tw-hidden'))); - if (res.length > 1) throw new Error(`isElemHidden doesn't work for multiple elements`); - return res[0]; +export function hideElem(el: ElementArg): ArrayLikeIterable<Element> { + return toggleElem(el, false); } function applyElemsCallback<T extends Element>(elems: ArrayLikeIterable<T>, fn?: ElementsCallback<T>): ArrayLikeIterable<T> { @@ -87,7 +82,7 @@ export function queryElemChildren<T extends Element>(parent: Element | ParentNod } // it works like parent.querySelectorAll: all descendants are selected -// in the future, all "queryElems(document, ...)" should be refactored to use a more specific parent +// in the future, all "queryElems(document, ...)" should be refactored to use a more specific parent if the targets are not for page-level components. export function queryElems<T extends HTMLElement>(parent: Element | ParentNode, selector: string, fn?: ElementsCallback<T>): ArrayLikeIterable<T> { return applyElemsCallback<T>(parent.querySelectorAll(selector), fn); } @@ -166,6 +161,7 @@ export function autosize(textarea: HTMLTextAreaElement, {viewportMarginBottom = function resizeToFit() { if (isUserResized) return; if (textarea.offsetWidth <= 0 && textarea.offsetHeight <= 0) return; + const previousMargin = textarea.style.marginBottom; try { const {top, bottom} = overflowOffset(); @@ -181,6 +177,9 @@ export function autosize(textarea: HTMLTextAreaElement, {viewportMarginBottom = const curHeight = parseFloat(computedStyle.height); const maxHeight = curHeight + bottom - adjustedViewportMarginBottom; + // In Firefox, setting auto height momentarily may cause the page to scroll up + // unexpectedly, prevent this by setting a temporary margin. + textarea.style.marginBottom = `${textarea.clientHeight}px`; textarea.style.height = 'auto'; let newHeight = textarea.scrollHeight + borderAddOn; @@ -201,6 +200,12 @@ export function autosize(textarea: HTMLTextAreaElement, {viewportMarginBottom = textarea.style.height = `${newHeight}px`; lastStyleHeight = textarea.style.height; } finally { + // restore previous margin + if (previousMargin) { + textarea.style.marginBottom = previousMargin; + } else { + textarea.style.removeProperty('margin-bottom'); + } // ensure that the textarea is fully scrolled to the end, when the cursor // is at the end during an input event if (textarea.selectionStart === textarea.selectionEnd && @@ -273,14 +278,12 @@ export function initSubmitEventPolyfill() { document.body.addEventListener('focus', submitEventPolyfillListener); } -/** - * Check if an element is visible, equivalent to jQuery's `:visible` pseudo. - * Note: This function doesn't account for all possible visibility scenarios. - */ -export function isElemVisible(element: HTMLElement): boolean { - if (!element) return false; - // checking element.style.display is not necessary for browsers, but it is required by some tests with happy-dom because happy-dom doesn't really do layout - return Boolean((element.offsetWidth || element.offsetHeight || element.getClientRects().length) && element.style.display !== 'none'); +export function isElemVisible(el: HTMLElement): boolean { + // Check if an element is visible, equivalent to jQuery's `:visible` pseudo. + // This function DOESN'T account for all possible visibility scenarios, its behavior is covered by the tests of "querySingleVisibleElem" + if (!el) return false; + // checking el.style.display is not necessary for browsers, but it is required by some tests with happy-dom because happy-dom doesn't really do layout + return !el.classList.contains('tw-hidden') && Boolean((el.offsetWidth || el.offsetHeight || el.getClientRects().length) && el.style.display !== 'none'); } // replace selected text in a textarea while preserving editor history, e.g. CTRL-Z works after this @@ -311,6 +314,7 @@ export function replaceTextareaSelection(textarea: HTMLTextAreaElement, text: st export function createElementFromHTML<T extends HTMLElement>(htmlString: string): T { htmlString = htmlString.trim(); // some tags like "tr" are special, it must use a correct parent container to create + // eslint-disable-next-line github/unescaped-html-literal -- FIXME: maybe we need to use other approaches to create elements from HTML, e.g. using DOMParser if (htmlString.startsWith('<tr')) { const container = document.createElement('table'); container.innerHTML = htmlString; @@ -358,7 +362,16 @@ export function querySingleVisibleElem<T extends HTMLElement>(parent: Element, s export function addDelegatedEventListener<T extends HTMLElement, E extends Event>(parent: Node, type: string, selector: string, listener: (elem: T, e: E) => Promisable<void>, options?: boolean | AddEventListenerOptions) { parent.addEventListener(type, (e: Event) => { const elem = (e.target as HTMLElement).closest(selector); - if (!elem) return; + // It strictly checks "parent contains the target elem" to avoid side effects of selector running on outside the parent. + // Keep in mind that the elem could have been removed from parent by other event handlers before this event handler is called. + // For example: tippy popup item, the tippy popup could be hidden and removed from DOM before this. + // It is caller's responsibility make sure the elem is still in parent's DOM when this event handler is called. + if (!elem || (parent !== document && !parent.contains(elem))) return; listener(elem as T, e as E); }, options); } + +/** Returns whether a click event is a left-click without any modifiers held */ +export function isPlainClick(e: MouseEvent) { + return e.button === 0 && !e.ctrlKey && !e.metaKey && !e.altKey && !e.shiftKey; +} diff --git a/web_src/js/utils/filetree.test.ts b/web_src/js/utils/filetree.test.ts deleted file mode 100644 index f561cb75f0..0000000000 --- a/web_src/js/utils/filetree.test.ts +++ /dev/null @@ -1,86 +0,0 @@ -import {mergeChildIfOnlyOneDir, pathListToTree, type File} from './filetree.ts'; - -const emptyList: File[] = []; -const singleFile = [{Name: 'file1'}] as File[]; -const singleDir = [{Name: 'dir1/file1'}] as File[]; -const nestedDir = [{Name: 'dir1/dir2/file1'}] as File[]; -const multiplePathsDisjoint = [{Name: 'dir1/dir2/file1'}, {Name: 'dir3/file2'}] as File[]; -const multiplePathsShared = [{Name: 'dir1/dir2/dir3/file1'}, {Name: 'dir1/file2'}] as File[]; - -test('pathListToTree', () => { - expect(pathListToTree(emptyList)).toEqual([]); - expect(pathListToTree(singleFile)).toEqual([ - {isFile: true, name: 'file1', path: 'file1', file: {Name: 'file1'}}, - ]); - expect(pathListToTree(singleDir)).toEqual([ - {isFile: false, name: 'dir1', path: 'dir1', children: [ - {isFile: true, name: 'file1', path: 'dir1/file1', file: {Name: 'dir1/file1'}}, - ]}, - ]); - expect(pathListToTree(nestedDir)).toEqual([ - {isFile: false, name: 'dir1', path: 'dir1', children: [ - {isFile: false, name: 'dir2', path: 'dir1/dir2', children: [ - {isFile: true, name: 'file1', path: 'dir1/dir2/file1', file: {Name: 'dir1/dir2/file1'}}, - ]}, - ]}, - ]); - expect(pathListToTree(multiplePathsDisjoint)).toEqual([ - {isFile: false, name: 'dir1', path: 'dir1', children: [ - {isFile: false, name: 'dir2', path: 'dir1/dir2', children: [ - {isFile: true, name: 'file1', path: 'dir1/dir2/file1', file: {Name: 'dir1/dir2/file1'}}, - ]}, - ]}, - {isFile: false, name: 'dir3', path: 'dir3', children: [ - {isFile: true, name: 'file2', path: 'dir3/file2', file: {Name: 'dir3/file2'}}, - ]}, - ]); - expect(pathListToTree(multiplePathsShared)).toEqual([ - {isFile: false, name: 'dir1', path: 'dir1', children: [ - {isFile: false, name: 'dir2', path: 'dir1/dir2', children: [ - {isFile: false, name: 'dir3', path: 'dir1/dir2/dir3', children: [ - {isFile: true, name: 'file1', path: 'dir1/dir2/dir3/file1', file: {Name: 'dir1/dir2/dir3/file1'}}, - ]}, - ]}, - {isFile: true, name: 'file2', path: 'dir1/file2', file: {Name: 'dir1/file2'}}, - ]}, - ]); -}); - -const mergeChildWrapper = (testCase: File[]) => { - const tree = pathListToTree(testCase); - mergeChildIfOnlyOneDir(tree); - return tree; -}; - -test('mergeChildIfOnlyOneDir', () => { - expect(mergeChildWrapper(emptyList)).toEqual([]); - expect(mergeChildWrapper(singleFile)).toEqual([ - {isFile: true, name: 'file1', path: 'file1', file: {Name: 'file1'}}, - ]); - expect(mergeChildWrapper(singleDir)).toEqual([ - {isFile: false, name: 'dir1', path: 'dir1', children: [ - {isFile: true, name: 'file1', path: 'dir1/file1', file: {Name: 'dir1/file1'}}, - ]}, - ]); - expect(mergeChildWrapper(nestedDir)).toEqual([ - {isFile: false, name: 'dir1/dir2', path: 'dir1/dir2', children: [ - {isFile: true, name: 'file1', path: 'dir1/dir2/file1', file: {Name: 'dir1/dir2/file1'}}, - ]}, - ]); - expect(mergeChildWrapper(multiplePathsDisjoint)).toEqual([ - {isFile: false, name: 'dir1/dir2', path: 'dir1/dir2', children: [ - {isFile: true, name: 'file1', path: 'dir1/dir2/file1', file: {Name: 'dir1/dir2/file1'}}, - ]}, - {isFile: false, name: 'dir3', path: 'dir3', children: [ - {isFile: true, name: 'file2', path: 'dir3/file2', file: {Name: 'dir3/file2'}}, - ]}, - ]); - expect(mergeChildWrapper(multiplePathsShared)).toEqual([ - {isFile: false, name: 'dir1', path: 'dir1', children: [ - {isFile: false, name: 'dir2/dir3', path: 'dir1/dir2/dir3', children: [ - {isFile: true, name: 'file1', path: 'dir1/dir2/dir3/file1', file: {Name: 'dir1/dir2/dir3/file1'}}, - ]}, - {isFile: true, name: 'file2', path: 'dir1/file2', file: {Name: 'dir1/file2'}}, - ]}, - ]); -}); diff --git a/web_src/js/utils/filetree.ts b/web_src/js/utils/filetree.ts deleted file mode 100644 index 35f9f58189..0000000000 --- a/web_src/js/utils/filetree.ts +++ /dev/null @@ -1,85 +0,0 @@ -import {dirname, basename} from '../utils.ts'; - -export type FileStatus = 'added' | 'modified' | 'deleted' | 'renamed' | 'copied' | 'typechange'; - -export type File = { - Name: string; - NameHash: string; - Status: FileStatus; - IsViewed: boolean; - IsSubmodule: boolean; -} - -type DirItem = { - isFile: false; - name: string; - path: string; - - children: Item[]; -} - -type FileItem = { - isFile: true; - name: string; - path: string; - file: File; -} - -export type Item = DirItem | FileItem; - -export function pathListToTree(fileEntries: File[]): Item[] { - const pathToItem = new Map<string, DirItem>(); - - // init root node - const root: DirItem = {name: '', path: '', isFile: false, children: []}; - pathToItem.set('', root); - - for (const fileEntry of fileEntries) { - const [parentPath, fileName] = [dirname(fileEntry.Name), basename(fileEntry.Name)]; - - let parentItem = pathToItem.get(parentPath); - if (!parentItem) { - parentItem = constructParents(pathToItem, parentPath); - } - - const fileItem: FileItem = {name: fileName, path: fileEntry.Name, isFile: true, file: fileEntry}; - - parentItem.children.push(fileItem); - } - - return root.children; -} - -function constructParents(pathToItem: Map<string, DirItem>, dirPath: string): DirItem { - const [dirParentPath, dirName] = [dirname(dirPath), basename(dirPath)]; - - let parentItem = pathToItem.get(dirParentPath); - if (!parentItem) { - // if the parent node does not exist, create it - parentItem = constructParents(pathToItem, dirParentPath); - } - - const dirItem: DirItem = {name: dirName, path: dirPath, isFile: false, children: []}; - parentItem.children.push(dirItem); - pathToItem.set(dirPath, dirItem); - - return dirItem; -} - -export function mergeChildIfOnlyOneDir(nodes: Item[]): void { - for (const node of nodes) { - if (node.isFile) { - continue; - } - const dir = node as DirItem; - - mergeChildIfOnlyOneDir(dir.children); - - if (dir.children.length === 1 && dir.children[0].isFile === false) { - const child = dir.children[0]; - dir.name = `${dir.name}/${child.name}`; - dir.path = child.path; - dir.children = child.children; - } - } -} diff --git a/web_src/js/utils/html.test.ts b/web_src/js/utils/html.test.ts new file mode 100644 index 0000000000..3028b7bb0a --- /dev/null +++ b/web_src/js/utils/html.test.ts @@ -0,0 +1,8 @@ +import {html, htmlEscape, htmlRaw} from './html.ts'; + +test('html', async () => { + expect(html`<a>${'<>&\'"'}</a>`).toBe(`<a><>&'"</a>`); + expect(html`<a>${htmlRaw('<img>')}</a>`).toBe(`<a><img></a>`); + expect(html`<a>${htmlRaw`<img ${'&'}>`}</a>`).toBe(`<a><img &></a>`); + expect(htmlEscape(`<a></a>`)).toBe(`<a></a>`); +}); diff --git a/web_src/js/utils/html.ts b/web_src/js/utils/html.ts new file mode 100644 index 0000000000..22e5703c34 --- /dev/null +++ b/web_src/js/utils/html.ts @@ -0,0 +1,32 @@ +export function htmlEscape(s: string, ...args: Array<any>): string { + if (args.length !== 0) throw new Error('use html or htmlRaw instead of htmlEscape'); // check legacy usages + return s.replace(/&/g, '&') + .replace(/"/g, '"') + .replace(/'/g, ''') + .replace(/</g, '<') + .replace(/>/g, '>'); +} + +class rawObject { + private readonly value: string; + constructor(v: string) { this.value = v } + toString(): string { return this.value } +} + +export function html(tmpl: TemplateStringsArray, ...parts: Array<any>): string { + let output = tmpl[0]; + for (let i = 0; i < parts.length; i++) { + const value = parts[i]; + const valueEscaped = (value instanceof rawObject) ? value.toString() : htmlEscape(String(parts[i])); + output = output + valueEscaped + tmpl[i + 1]; + } + return output; +} + +export function htmlRaw(s: string|TemplateStringsArray, ...tmplParts: Array<any>): rawObject { + if (typeof s === 'string') { + if (tmplParts.length !== 0) throw new Error("either htmlRaw('str') or htmlRaw`tmpl`"); + return new rawObject(s); + } + return new rawObject(html(s, ...tmplParts)); +} |