-
-
Notifications
You must be signed in to change notification settings - Fork 11
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
refactor: add mount to refactor code
- Loading branch information
Simon he
committed
Oct 14, 2022
1 parent
daf569d
commit 68a86ba
Showing
10 changed files
with
79 additions
and
189 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,26 +1,5 @@ | ||
| import { addEventListener } from './addEventListener' | ||
| import { findElement } from './findElement' | ||
| import { isStr } from './isStr' | ||
| import { mount } from './mount' | ||
|
|
||
| export function insertElement(parent: HTMLElement | string, element: HTMLElement | string, target?: HTMLElement | null): void { | ||
| let isMounted = false | ||
| let hasMounted = false | ||
| update() | ||
| addEventListener(document, 'DOMContentLoaded', update) | ||
| function update() { | ||
| if (hasMounted) | ||
| return | ||
| if (isStr(parent)) | ||
| parent = findElement(parent) || parent | ||
| if (isStr(element)) | ||
| element = findElement(element) || element | ||
| if (!isMounted && (isStr(parent) || isStr(element))) | ||
| return isMounted = true | ||
| if (isStr(parent)) | ||
| throw new Error(`${parent} is not a HTMLElement`) | ||
| if (isStr(element)) | ||
| throw new Error(`${element} is not a HTMLElement`); | ||
| (parent as HTMLElement).insertBefore(element as HTMLElement, target === undefined ? (parent as HTMLElement).firstChild : target) | ||
| hasMounted = true | ||
| } | ||
| mount(parent, element, (parent, element) => (parent as HTMLElement).insertBefore(element as HTMLElement, target === undefined ? (parent as HTMLElement).firstChild : target)) | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,26 @@ | ||
| import { findElement } from './findElement' | ||
| import { isStr } from './isStr' | ||
|
|
||
| type MountArgs = [...Array<string | Element | Window | Document | ParentNode>, (...elements: Element[]) => void] | ||
| export function mount(...args: MountArgs): void { | ||
| const len = args.length | ||
| const params = [...args] | ||
| const elements = params.slice(0, len - 1) | ||
| const callback = params.slice(-1)[0] as unknown as (...elements: Element[]) => void | ||
| let isMounted = false | ||
| let hasMounted = false | ||
| update() | ||
| document.addEventListener('DOMContentLoaded', update) | ||
| setTimeout(() => document.removeEventListener('DOMContentLoaded', update)) | ||
| function update() { | ||
| if (hasMounted) | ||
| return | ||
| elements.forEach((element, index) => isStr(element) && (elements[index] = findElement(element) || element)) | ||
| if (!isMounted && elements.some(isStr)) | ||
| return isMounted = true | ||
| if (elements.some(isStr)) | ||
| throw new Error(`${elements.filter(isStr).join(', ')} is not a HTMLElement`) | ||
| callback?.(...elements as Element[]) | ||
| hasMounted = true | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,23 +1,7 @@ | ||
| import { addEventListener } from './addEventListener' | ||
| import { findElement } from './findElement' | ||
| import { isStr } from './isStr' | ||
|
|
||
| import { mount } from './mount' | ||
| export function useElementBounding(element: Element | string, callback: (rect: DOMRect) => void) { | ||
| let isMounted = false | ||
| let hasMounted = false | ||
| update() | ||
| addEventListener(document, 'DOMContentLoaded', update) | ||
| return addEventListener(window, 'scroll', update) | ||
| function update() { | ||
| if (hasMounted) | ||
| return | ||
| if (isStr(element)) | ||
| element = findElement(element) || element | ||
| if (!isMounted && isStr(element)) | ||
| return isMounted = true | ||
| if (isStr(element)) | ||
| throw new Error(`${element} is not a Element`) | ||
| callback?.((element as Element).getBoundingClientRect()) | ||
| hasMounted = true | ||
| } | ||
| mount(element, el => callback?.((element = el).getBoundingClientRect())) | ||
| return addEventListener(window, 'scroll', () => callback?.((element as Element).getBoundingClientRect())) | ||
| } | ||
|
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,22 +1,5 @@ | ||
| import { findElement } from './findElement' | ||
| import { isStr } from './isStr' | ||
| import { addEventListener } from './addEventListener' | ||
|
|
||
| import { mount } from './mount' | ||
| export function useFocus(target: string | HTMLElement) { | ||
| let isMounted = false | ||
| let hasMounted = false | ||
| update() | ||
| addEventListener(document, 'DOMContentLoaded', update) | ||
| function update() { | ||
| if (hasMounted) | ||
| return | ||
| if (isStr(target)) | ||
| target = findElement(target) as HTMLElement || target | ||
| if (!isMounted && isStr(target)) | ||
| return isMounted = true | ||
| else if (isStr(target)) | ||
| throw new Error(`${target} is not a Element`) | ||
| findElement('input', target.parentElement!)?.focus() | ||
| hasMounted = true | ||
| } | ||
| mount(target, target => findElement('input', target.parentElement!)?.focus()) | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,24 +1,18 @@ | ||
| import { findElement } from './findElement' | ||
| import { isStr } from './isStr' | ||
| import { addEventListener } from './addEventListener' | ||
| import { mount } from './mount' | ||
|
|
||
| export function useHover(target: string | HTMLElement, callback: (isHover: boolean) => void) { | ||
| let hasMounted = false | ||
| let isMounted = false | ||
| update() | ||
| addEventListener(document, 'DOMContentLoaded', update) | ||
|
|
||
| function update() { | ||
| if (hasMounted) | ||
| return | ||
| if (isStr(target)) | ||
| target = findElement(target) as HTMLElement || target | ||
| if (!isMounted && isStr(target)) | ||
| return isMounted = true | ||
| else if (isStr(target)) | ||
| throw new Error(`${target} is not a Element`) | ||
| addEventListener(target, 'mouseenter', () => callback(true)) | ||
| addEventListener(target, 'mouseleave', () => callback(false)) | ||
| hasMounted = true | ||
| export function useHover(target: string | HTMLElement, callback: (isHover: boolean) => void): () => void { | ||
| let stopped = false | ||
| const stop: (() => void)[] = [] | ||
| mount(target, (target) => { | ||
| stop.push(addEventListener(target, 'mouseenter', () => callback(true))) | ||
| stop.push(addEventListener(target, 'mouseleave', () => callback(false))) | ||
| if (stopped) | ||
| stop.forEach(stop => stop()) | ||
| }) | ||
| return () => { | ||
| if (!stop.length) | ||
| return stopped = true | ||
| stop.forEach(fn => fn()) | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.