lambda-dom

Index

Interfaces

Type aliases

CssDisplayValue

Autocomplete list for the most commonly used style.display values. Includes the generic string type for compatibility and special syntax, as well as null | undefined which are used by lambda-dom as a signal to unset inline display values.

StylableElement

StylableElement: ElementCSSInlineStyle

Type alias for ElementCSSInlineStyle (objects with a style property of type CSSStyleDeclaration, most commonly elements)

Functions

DOMReadyP

DOMReadyP(): Promise<void>

- Defined in DOMReadyP.ts:9
Returns a promise that resolves as soon as possible after the DOM content is loaded. If the document.readyState is 'interactive' or 'complete' at call-time, the returned promise resolves immediately, otherwise it resolves upon the DOMContentLoaded event.

Returns Promise<void>

addClasses

addClasses(...classes: string[]): (element: Element) => void

- Defined in addClasses.ts:24
Curried function that first takes a list of classes, then returns a new function that takes the element to add those classes to.
example
```
declare const elements: Element[]
declare const someElement: Element

// You can either partially apply addClasses to re-use it:
const addTwoClasses = addClasses('class-one', 'class-two')

elements.forEach(addTwoClasses)

// Or execute addClasses in one go:
addClasses('class-one', 'class-two') (someElement)
```
Parameters
- Rest ...classes: string[]
  
  Rest parameter for one or multiple classes to add.
Returns (element: Element) => void
- - (element: Element): void
  - Parameters
    - element: Element
      
      The element to add the classes to.
    Returns void

addClassesForMS

addClassesForMS(ms: number, ...classes: string[]): (element: Element) => void

- Defined in addClassesForMS.ts:18
Adds classes to an element for a given amount of milliseconds.
example
```
declare const element: Element
addClassesForMS(500, 'class-a', 'class-b') (element)
```
Parameters
- ms: number
  
  The amount of milliseconds to add the classes for
- Rest ...classes: string[]
  
  Rest parameter for one or multiple classes to temporarily add
Returns (element: Element) => void
- - (element: Element): void
  - Parameters
    - element: Element
      
      The element to add the classes to
    Returns void

addClassesForNFrames

addClassesForNFrames(n: number, ...classes: string[]): (element: Element) => void

- Defined in addClassesForNFrames.ts:19
Adds classes to an element for a given amount of animation frames.
example
```
declare const element: Element
addClassesForNFrames(10, 'class-a', 'class-b') (element)
```
Parameters
- n: number
  
  The amount of animation frames to add the classes for.
- Rest ...classes: string[]
  
  Rest parameter for one or multiple classes to temporarily add.
Returns (element: Element) => void
- - (element: Element): void
  - Parameters
    - element: Element
      
      The element to add the classes to.
    Returns void

deferFrames

deferFrames(n: number, handler: () => any): void

- Defined in deferFrames.ts:28
Takes a positive (>= 0) integer n and a callback function, and executes the callback function after n animation frames have passed.
todo

Add the possibility to cancel. The requires the request ID of the latest request.

example
```
declare const f: () => void
// Run `f` after ten animation frames
deferFrames(10, f)

// The following 2 statements are equivalent:
deferFrames(0, f)
requestAnimationFrame(f)

// And the following 2 statements are equivalent:
deferFrames(1, f)
requestAnimationFrame(() => requestAnimationFrame(f))

// Etc..
```
Parameters
- n: number
  
  The amount of animation frames to wait.
- handler: () => any
  
  The callback function to run after n animation-frames have passed.
  - - (): any
    - Returns any
Returns void

deferFramesP

deferFramesP(n: number): Promise<void>

- Defined in deferFramesP.ts:20
Returns a Promise<void> that resolves after n animation frames have passed. Like deferFrames but 'portable', so that many callbacks can subscribe to the 'event' of n frames having passed.
example
```
async function f() {
     // Do something immediately...
     await deferFramesP(10)
     // Do something else after 10 animation frames:
}
```
Parameters
- n: number
  
  The amount of animation frames to wait before the returned promise resolves.
Returns Promise<void>

display

display(value: CssDisplayValue): (element: StylableElement) => void

Takes a CSS display value and returns a function that takes elements. When applied to an element the returned function assigns the given display value to the given element's style.display property.

example

declare const someElement: Element

// This will unset any inline style for `display` and let CSS take over control
display(null) (someElement)

// This will explicitly set the display property to 'flex'
display('flex') (someElement)

// and this will hide the element
display('none') (someElement)

// You can store the display strategies in advance:
const hideFn = display('none')
const showFn = display('grid')

// And then use them on any element conditionally:
declare const shouldShow: boolean
(shouldShow ? showFn : hideFn) (someElement)

Parameters

value: CssDisplayValue

The display CSS value to use. When null any inline display value is removed.

Returns (element: StylableElement) => void

- (element: StylableElement): void
- Parameters
  - element: StylableElement
    
    The target element to set the display value on.
  Returns void

displayIf

displayIf(cond: boolean, displayValue?: CssDisplayValue): (element: StylableElement) => void

- Defined in displayIf.ts:28
Takes a boolean condition and a CSS display value, and returns a function that takes elements. The returned function will set style.display onto given elements to either given value or to 'none' based on the given cond boolean.

Note that the condition is constant for all future calls to the returned function. See displayUsing() for cases where the boolean condition should be determined for each element individually.
example
```
declare const checkboxes: HTMLInputElement[]
declare const myCondition: boolean

// Sets display: 'flex' to all checkboxes if myCondition is true
// Sets display: 'none' to all checkboxes otherwise
checkboxes.forEach(displayIf(myCondition, 'flex'))
```
Parameters
- cond: boolean
  
  The condition for showing elements
- Optional displayValue: CssDisplayValue
  
  The style.display value to use
Returns (element: StylableElement) => void
- - (element: StylableElement): void
  - Parameters
    - element: StylableElement
    Returns void

displayUsing

displayUsing<T>(pred: (element: T) => boolean, displayValue: CssDisplayValue): (element: T) => void

- Defined in displayUsing.ts:28
Takes a predicate function for elements and a CSS display value, and returns a function that takes elements. The returned function will set style.display onto given elements to either given value or to 'none' based on the result of applying the predicate to those elements.
example
```
declare const checkboxes: HTMLInputElement[]
const isChecked = (checkbox: HTMLInputElement) => checkbox.checked

// Sets display: 'flex' to all checkboxes that are checked
// Sets display: 'none' to all other checkboxes.
checkboxes.forEach(displayUsing(isChecked, 'flex'))

// This is equivalent to following usage of displayIf():
checkboxes.forEach((checkbox) => displayIf(isChecked(checkbox), 'flex')(checkbox))
```
Type parameters
- T: ElementCSSInlineStyle
Parameters
- pred: (element: T) => boolean
  - - (element: T): boolean
    - Parameters
      - element: T
      Returns boolean
- displayValue: CssDisplayValue
Returns (element: T) => void
- - (element: T): void
  - Parameters
    - element: T
    Returns void

getMeta

getMeta(name: string): string | null
getMeta<T>(name: string, transformer: (content: string) => T): T | null

- Defined in getMeta.ts:42
Get the value of the content attribute for the first (and presumably only) <meta> element with given name as the value for its name attribute. Optionally takes a transformer to deserialize string values.
example
Considering these meta tags:
```
<meta name="some-json-meta" content='{ "foo": "bar", "baz": 42 }'>
<meta name="just-string-meta" content="Lorem ipsum">
```
And this object interface:
```
interface JsonMeta { foo: string, baz: number }
```
We can get the JSON data and parse it like so:
```
const jsonMeta: A = getMeta<JsonMeta>('some-json-meta', JSON.parse)
```
and simple string metadata doesn't need to be transformed:
```
const textgMeta: B = getMeta('just-string-meta')
```
And because the queries can fail:
```
type A = null | JsonMeta
type b = null | string
```
Parameters
- name: string
  
  The value for the name attribute to find the <meta> element by.
Returns string | null
- Defined in getMeta.ts:85
Get the value of the content attribute for the first (and presumably only) <meta> element with given name as the value for its name attribute. Optionally takes a transformer to deserialize string values.
example
Considering these meta tags:
```
<meta name="some-json-meta" content='{ "foo": "bar", "baz": 42 }'>
<meta name="just-string-meta" content="Lorem ipsum">
```
And this object interface:
```
interface JsonMeta { foo: string, baz: number }
```
We can get the JSON data and parse it like so:
```
const jsonMeta: A = getMeta<JsonMeta>('some-json-meta', JSON.parse)
```
and simple string metadata doesn't need to be transformed:
```
const textgMeta: B = getMeta('just-string-meta')
```
And because the queries can fail:
```
type A = null | JsonMeta
type b = null | string
```
Type parameters
- T
Parameters
- name: string
  
  The value for the name attribute to find the <meta> element by.
- transformer: (content: string) => T
  
  A transformer function that deserializes content values.
  - - (content: string): T
    - Parameters
      - content: string
      Returns T
Returns T | null

hide

hide(element: StylableElement): void

- Defined in hide.ts:21
Hide the given element through the style.display property. This is a specialisation of display() that always sets display to 'none'.
example
```
declare const someElement: Element

// Hides the given element
hide(someElement)

// This is equivalent to:
display('none') (someElement)
```
Parameters
- element: StylableElement
  
  The element to hide.
Returns void

innerHTML

innerHTML(html: string | null): (element: Element) => void

- Defined in innerHTML.ts:18
Takes an HTML string or null, and returns a function that takes Element objects. Sets innerHTML of given elements to the given string, or to an empty string if given null.
example
```
// to set inner HTML
innerHTML('<span>foo</span>')(element)

// to clear inner HTML
innerHTML(null)(element)

// batch-clear contents:
declare const elements: Element[]
elements.forEach(innerHTML(null))
```
Parameters
- html: string | null
Returns (element: Element) => void
- - (element: Element): void
  - Parameters
    - element: Element
    Returns void

innerText

innerText(text: string | null): (element: HTMLElement) => void

- Defined in innerText.ts:18
Takes a string or null, and returns a function that takes HTMLElement elements. Sets innerText of given elements to the given string, or to an empty string if given null.
example
```
// to set inner text
innerText('foo')(element)

// to clear inner text
innerText(null)(element)

// batch-clear contents:
declare const elements: HTMLElement[]
elements.forEach(innerText(null))
```
Parameters
- text: string | null
Returns (element: HTMLElement) => void
- - (element: HTMLElement): void
  - Parameters
    - element: HTMLElement
    Returns void

onDOMReady

onDOMReady<T>(fn: () => T): Promise<T>

- Defined in onDOMReady.ts:12
Takes a callback that is executed as soon as possible after the DOM content is loaded. If the document.readyState is either 'interactive' or 'complete' at call-time, the callback is called immediately, otherwise it is called upon the DOMContentLoaded event.

Type parameters
- T
Parameters
- fn: () => T
  - - (): T
    - Returns T
Returns Promise<T>

A promise that resolves with the eventual return value of given callback.

onWindowLoad

onWindowLoad<T>(fn: () => T): Promise<T>

- Defined in onWindowLoad.ts:12
Takes a callback that is executed as soon as possible after the window is loaded. If the document.readyState is 'complete' at call-time, the callback is called immediately, otherwise it is called upon the window load event.

Type parameters
- T
Parameters
- fn: () => T
  - - (): T
    - Returns T
Returns Promise<T>

A promise that resolves with the eventual return value of given callback.

preventDefault

preventDefault(event: Event): void

- Defined in preventDefault.ts:12
Takes events and calls their .preventDefault() method.
example
```
declare const event: Event
preventDefault(event)
```
Parameters
- event: Event
  
  The event instance to call the method on.
Returns void

queryAll

queryAll<S>(selector: S, scope?: ParentNode): ParseSelector<S>[]
queryAll<T>(selector: string, scope?: ParentNode): T[]

- Defined in queryAll.ts:24
Calls querySelectorAll with given selector on given scope, or on document by default when the scope is omitted. Returns an array containing the found elements. Attempts to parse the given CSS selector to determine the element type.
example
```
// Automatically attempts to parse CSS selectors into an element type.
const headings = queryAll('h2.large-heading, h3.medium-heading') // HTMLHeadingElement[]

// Defaults to Element for unrecognised selectors:
const components = queryAll('custom-web-component')              // Element[]

// Accepts an explicit type argument for the searched elements:
const components = queryAll<MyComponent>('custom-web-component') // MyComponent[]
```
Type parameters
- S: string
Parameters
- selector: S
  
  The selector to match elements against.
- Optional scope: ParentNode
  
  The scope of the element query. When omitted queryAll performs a global search.
Returns ParseSelector<S>[]
- Defined in queryAll.ts:25
Type parameters
- T: Element
Parameters
- selector: string
- Optional scope: ParentNode
Returns T[]

queryAllWithin

queryAllWithin(scope: ParentNode): QueryAllWithinSelector

Takes an element as scope for CSS selector queries. Returns a function that takes selectors to query elements for within the set scope. The returned function finds all elements matching given selector and returns them in an array.

example

declare const scope: HTMLElement
const queryFn = queryAllWithin(scope)

// Automatically attempts to parse CSS selectors into an element type.
const headings = queryFn('h2.large-heading, h3.medium-heading') // HTMLHeadingElement[]

// defaults to Element for element types - others: Element[]
const others = queryFn('.other')

// takes an explicit element type for other selectors - buttons: HTMLButtonElement[]
const buttons = queryFn<HTMLButtonElement>('.button')

// You can call queryWithin in one go, and still provide type arguments:
const buttons2 = queryAllWithin(scope)<HTMLButtonElement>('.button')

Parameters

scope: ParentNode

Returns QueryAllWithinSelector

queryOne

queryOne<S>(selector: S, scope?: ParentNode): ParseSelector<S> | null
queryOne<T>(selector: string, scope?: ParentNode): T | null

- Defined in queryOne.ts:24
Calls querySelector with given selector on given scope, or on document by default when the scope is omitted. Returns the first element matching given selector if any exists, or null otherwise. Attempts to parse the given CSS selector to determine the element type.
example
```
// Automatically attempts to parse CSS selectors into an element type.
const heading = queryOne('h2.large-heading, h3.medium-heading') // HTMLHeadingElement | null

// Defaults to Element for unrecognised selectors:
const component = queryOne('custom-web-component')              // Element | null

// Accepts an explicit type argument for the searched elements:
const component = queryOne<MyComponent>('custom-web-component') // MyComponent | null
```
Type parameters
- S: string
Parameters
- selector: S
  
  The selector to match elements against.
- Optional scope: ParentNode
  
  The scope of the element query. When omitted queryOne performs a global search.
Returns ParseSelector<S> | null
- Defined in queryOne.ts:25
Type parameters
- T: Element
Parameters
- selector: string
- Optional scope: ParentNode
Returns T | null

queryOneWithin

queryOneWithin(scope: ParentNode): QueryOneWithinSelector

Takes an element as scope for CSS selector queries. Returns a function that takes selectors to query elements for within the set scope. The returned function finds the first element matching given selector and returns it. Returns null if no matching element exists.

example

declare const scope: HTMLElement
const queryFn = queryOneWithin(scope)

// Automatically attempts to parse CSS selectors into an element type.
const headings = queryFn('h2.large-heading') // HTMLHeadingElement | null

// defaults to Element for element types - other: Element | null
const other = queryFn('.other')

// takes an explicit element type for other selectors - button: HTMLButtonElement | null
const button = queryFn<HTMLButtonElement>('.button')

// You can call queryOneWithin in one go, and still provide type arguments:
const button2 = queryOneWithin(scope)<HTMLButtonElement>('.button')

Parameters

scope: ParentNode

Returns QueryOneWithinSelector

readDataset

readDataset(key: string): (element: HTMLOrSVGElement) => string | undefined
readDataset<T>(key: string, transform: (value: string) => T): (element: HTMLOrSVGElement) => T | undefined

- Defined in readDataset.ts:20
Read dataset values. Takes a dataset key and optionally a transformer for the corresponding value, and returns a new function that takes the element to read the dataset key from.
example
```
declare const someElement: HTMLElement

const x: T = readDataset('someKey') (someElement)
const y: U = readDataset('someOtherKey', parseInt) (someElement)

type T = undefined | string
type U = undefined | number
```
Parameters
- key: string
  
  The dataset key to read (camelCase, like the native dataset API).
Returns (element: HTMLOrSVGElement) => string | undefined
- - (element: HTMLOrSVGElement): string | undefined
  - Parameters
    - element: HTMLOrSVGElement
      
      The element to read the dataset value from.
    Returns string | undefined
- Defined in readDataset.ts:30
Read dataset values. Takes a dataset key and optionally a transformer for the corresponding value, and returns a new function that takes the element to read the dataset key from.

Type parameters
- T
Parameters
- key: string
  
  The dataset key to read (camelCase, like the native dataset API).
- transform: (value: string) => T
  
  The optional transformer function for dataset values.
  - - (value: string): T
    - Parameters
      - value: string
      Returns T
Returns (element: HTMLOrSVGElement) => T | undefined
- - (element: HTMLOrSVGElement): T | undefined
  - Parameters
    - element: HTMLOrSVGElement
      
      The element to read the dataset value from.
    Returns T | undefined

remove

remove(element: Element): void

- Defined in remove.ts:5
Removes given element from the DOM if it's currently in it.

Parameters
- element: Element
Returns void

removeClasses

removeClasses(...classes: string[]): (element: Element) => void

- Defined in removeClasses.ts:24
Curried function that first takes a list of classes, then returns a new function that takes the element to remove those classes from.
example
```
declare const someElement: Element
declare const elements: Element[]

// You can either partially apply removeClasses:
const removeTwoClasses = removeClasses('class-one', 'class-two')
elements.forEach(removeTwoClasses)

// Or execute removeClasses in one go:
removeClasses('class-one', 'class-two', 'even-more-classes')(element)
```
Parameters
- Rest ...classes: string[]
  
  Rest parameter for one or multiple classes to remove.
Returns (element: Element) => void
- - (element: Element): void
  - Parameters
    - element: Element
      
      The element to remove the classes from.
    Returns void

removeClassesForMS

removeClassesForMS(ms: number, ...classes: string[]): (element: Element) => void

- Defined in removeClassesForMS.ts:17
Removes classes from an element for a given amount of milliseconds.
example
```
declare const element: Element
removeClassesForMS(500, 'class-a', 'class-b') (element)
```
Parameters
- ms: number
  
  The amount of milliseconds to remove the classes for.
- Rest ...classes: string[]
  
  Rest parameter for one or multiple classes to remove.
Returns (element: Element) => void
- - (element: Element): void
  - Parameters
    - element: Element
      
      The element to remove the classes from.
    Returns void

removeClassesForNFrames

removeClassesForNFrames(n: number, ...classes: string[]): (element: Element) => void

- Defined in removeClassesForNFrames.ts:19
Removes classes from an element for a given amount of animation frames.
example
```
declare const element: Element
removeClassesForNFrames(10, 'class-a', 'class-b') (element)
```
Parameters
- n: number
  
  The amount of animation frames to remove the classes for.
- Rest ...classes: string[]
  
  Rest parameter for one or multiple classes to temporarily remove.
Returns (element: Element) => void
- - (element: Element): void
  - Parameters
    - element: Element
      
      The element to remove the classes from.
    Returns void

setMeta

setMeta(name: string): (content: string) => HTMLMetaElement

- Defined in setMeta.ts:21
Takes a string name and returns a new function that takes a string content, and then updates the <meta> tag with the given name if it exists, or otherwise creates a new one. The meta element to which the content value was set is returned for reference.

When a new element is created it will be appended to the end of <head>.
example
```
const element = setMeta('foo')('bar')
```
This updates or creates the following element
```
<meta name="foo" content="bar">
```
Parameters
- name: string
  
  The value for the name attribute.
Returns (content: string) => HTMLMetaElement
- - (content: string): HTMLMetaElement
  - Parameters
    - content: string
      
      The value for the content attribute.
    Returns HTMLMetaElement

show

show(element: StylableElement): void

- Defined in show.ts:25
Shows the given element by unsetting any inline style.display value. This is a specialisation of display() that always unsets inline display.

Note

This function assumes that given elements are shown by default - ie. there's no CSS rule that has set the element's display to 'none'.
example
```
declare const someElement: Element

show(someElement)

// This is equivalent to:
display(null) (someElement)
```
Parameters
- element: StylableElement
  
  The element to unset the inline display value for.
Returns void

showIf

showIf(cond: boolean): (element: StylableElement) => void

- Defined in showIf.ts:34
Takes a boolean condition, and returns a function that takes elements. The returned function will unset style.display onto a given element if the given condition is true. If the condition is false, style.display is set to 'none'.

Note

This function assumes that given elements are shown by default - ie. there's no CSS rule that has set the element's display to 'none'.

Note

The condition is constant for all future calls to the returned function. See showUsing() for cases where the boolean condition should be determined for each element individually.
example
```
declare const checkboxes: HTMLInputElement[]
declare const myCondition: boolean

// Unsets inline display to all checkboxes if myCondition is true
// Sets display: 'none' to all checkboxes otherwise
checkboxes.forEach(showIf(myCondition))
```
Parameters
- cond: boolean
  
  The condition for showing elements
Returns (element: StylableElement) => void
- - (element: StylableElement): void
  - Parameters
    - element: StylableElement
    Returns void

showUsing

showUsing<T>(pred: (element: T) => boolean): (element: T) => void

- Defined in showUsing.ts:31
Takes a predicate function for elements and returns a function that takes elements to conditionally show depending on the result of applying the predicate function to given elements.

Note

This function assumes that given elements are shown by default - ie. there's no CSS rule that has set the element's display to 'none'.
example
```
declare const checkboxes: HTMLInputElement[]
const isChecked = (input: HTMLInputElement) => input.checked

// Unsets inline display of all checkboxes that are checked
// Sets display: 'none' to all other checkboxes.
checkboxes.forEach(showUsing(isChecked))

// This is equivalent to following usage of showIf():
checkboxes.forEach((checkbox) => showIf(isChecked(checkbox))(checkbox))
```
Type parameters
- T: ElementCSSInlineStyle
Parameters
- pred: (element: T) => boolean
  - - (element: T): boolean
    - Parameters
      - element: T
      Returns boolean
Returns (element: T) => void
- - (element: T): void
  - Parameters
    - element: T
    Returns void

style

style(styles: Partial<CSSStyleDeclaration>): (element: StylableElement) => void

- Defined in style.ts:27
Takes an object of style attribute values, and returns a new function that takes an element to apply those styles to.
example
```
declare const someElement: HTMLElement
style({ color: 'red' }) (someElement)

// Or partially apply to re-use the style set:
const warningButtonStyle = style({
    color: 'red',
    backgroundColor: 'white',
    border: '1px solid red',
})

declare const elements: HTMLElement[]
elements.forEach(warningButtonStyle)
```
Parameters
- styles: Partial<CSSStyleDeclaration>
  
  An object with inline styles to set.
Returns (element: StylableElement) => void
- - (element: StylableElement): void
  - Parameters
    - element: StylableElement
      
      An element to apply the inline styles to.
    Returns void

toggleClasses

toggleClasses(...classes: string[]): (element: Element, force?: boolean) => void

- Defined in toggleClasses.ts:33
Curried function that first takes a list of classes, then returns a new function that takes the element on which to toggle those classes. The second function optionally takes the second argument force: boolean to use on the native DOMTokenList.toggle() method. Note that the value for force will be the same for all classes that are toggled.
example
```
declare const someElement: Element
declare const elements: Element[]

// You can either partially apply toggleClasses:
const toggleTwoClasses = toggleClasses('class-one', 'class-two')
elements.forEach(toggleTwoClasses)

// Or execute toggleClasses in one go:
toggleClasses('class-one', 'class-two', '...') (someElement)
// Equivalently
toggleClasses('class-one', 'class-two', '...') (someElement, undefined)

// This is like addClasses:
toggleClasses('class-one', 'class-two', '...') (someElement, true)

// This is like removeClasses:
toggleClasses('class-one', 'class-two', '...') (someElement, false)
```
Parameters
- Rest ...classes: string[]
  
  One or multiple classes to toggle.
Returns (element: Element, force?: boolean) => void
- - (element: Element, force?: boolean): void
  - Parameters
    - element: Element
      
      An element onto which to toggle provided classes.
    - Optional force: boolean
      
      The optional boolean for force adding / removing the classes (like the native DOMTokenList.toggle)
    Returns void

touchAll

touchAll<S1, U>(selectors: [S1], cb: (v1: P<S1>) => U, scope?: ParentNode): U | null
touchAll<T1, U>(selectors: [string], cb: (v1: T1) => U, scope?: ParentNode): U | null
touchAll<S1, S2, U>(selectors: [S1, S2], cb: (v1: P<S1>, v2: P<S2>) => U, scope?: ParentNode): U | null
touchAll<T1, T2, U>(selectors: [string, string], cb: (v1: T1, v2: T2) => U, scope?: ParentNode): U | null
touchAll<S1, S2, S3, U>(selectors: [S1, S2, S3], cb: (v1: P<S1>, v2: P<S2>, v3: P<S3>) => U, scope?: ParentNode): U | null
touchAll<T1, T2, T3, U>(selectors: [string, string, string], cb: (v1: T1, v2: T2, v3: T3) => U, scope?: ParentNode): U | null
touchAll<S1, S2, S3, S4, U>(selectors: [S1, S2, S3, S4], cb: (v1: P<S1>, v2: P<S2>, v3: P<S3>, v4: P<S4>) => U, scope?: ParentNode): U | null
touchAll<T1, T2, T3, T4, U>(selectors: [string, string, string, string], cb: (v1: T1, v2: T2, v3: T3, v4: T4) => U, scope?: ParentNode): U | null
touchAll<S1, S2, S3, S4, S5, U>(selectors: [S1, S2, S3, S4, S5], cb: (v1: P<S1>, v2: P<S2>, v3: P<S3>, v4: P<S4>, v5: P<S5>) => U, scope?: ParentNode): U | null
touchAll<T1, T2, T3, T4, T5, U>(selectors: [string, string, string, string, string], cb: (v1: T1, v2: T2, v3: T3, v4: T4, v5: T5) => U, scope?: ParentNode): U | null
touchAll<S1, S2, S3, S4, S5, S6, U>(selectors: [S1, S2, S3, S4, S5, S6], cb: (v1: P<S1>, v2: P<S2>, v3: P<S3>, v4: P<S4>, v5: P<S5>, v6: P<S6>) => U, scope?: ParentNode): U | null
touchAll<T1, T2, T3, T4, T5, T6, U>(selectors: [string, string, string, string, string, string], cb: (v1: T1, v2: T2, v3: T3, v4: T4, v5: T5, v6: T6) => U, scope?: ParentNode): U | null
touchAll<S1, S2, S3, S4, S5, S6, S7, U>(selectors: [S1, S2, S3, S4, S5, S6, S7], cb: (v1: P<S1>, v2: P<S2>, v3: P<S3>, v4: P<S4>, v5: P<S5>, v6: P<S6>, v7: P<S7>) => U, scope?: ParentNode): U | null
touchAll<T1, T2, T3, T4, T5, T6, T7, U>(selectors: [string, string, string, string, string, string, string], cb: (v1: T1, v2: T2, v3: T3, v4: T4, v5: T5, v6: T6, v7: T7) => U, scope?: ParentNode): U | null
touchAll<S1, S2, S3, S4, S5, S6, S7, S8, U>(selectors: [S1, S2, S3, S4, S5, S6, S7, S8], cb: (v1: P<S1>, v2: P<S2>, v3: P<S3>, v4: P<S4>, v5: P<S5>, v6: P<S6>, v7: P<S7>, v8: P<S8>) => U, scope?: ParentNode): U | null
touchAll<T1, T2, T3, T4, T5, T6, T7, T8, U>(selectors: [string, string, string, string, string, string, string, string], cb: (v1: T1, v2: T2, v3: T3, v4: T4, v5: T5, v6: T6, v7: T7, v8: T8) => U, scope?: ParentNode): U | null

Takes an array of CSS-style element selectors and a callback function. When for all selectors an element is found, the callback is called with each found element in order. Optionally takes a scope as third argument to use for the element search.

Note: touchAll has overloads for tuples of up to 8 selectors.

example

// -------------------------------------------------------------------------
// Automatically attempts to parse CSS selectors into element types, which
// should work for tag-qualified CSS selectors
// -------------------------------------------------------------------------

const resultA = touchAll([
    'button.my-button',
    '.article form#the-form',
], (button, form) => {
    // button is HTMLButtonElement
    // form is HTMLFormElement
})

// -------------------------------------------------------------------------
// When using non-recognised selectors all element types default to `Element`
// -------------------------------------------------------------------------

const resultB = touchAll([
    '.my-button',
    '.article #the-form',
], (button, form) => {
    // button is Element
    // form is Element
})

// -------------------------------------------------------------------------
// When it fails to infer the element types from given CSS selectors you can
// specify the types explicitly
// -------------------------------------------------------------------------

// Either let the callback specify the element types, this also works for
// referenced functions that satisfy the expected signature:

const resultC = touchAll([
    '.my-button',
    '.article #the-form',
], (button: HTMLButtonElement, form: HTMLFormElement) => {
    // ...
})

// or provide the element types as type arguments list:

const resultD = touchAll<HTMLButtonElement, HTMLFormElement>([
    '.my-button',
    '.article #the-form',
], (button, form) => {
    // ...
})

Type parameters

S1: string
U = any

Parameters

selectors: [S1]

An array of CSS-style selectors. For each selector an element will be searched.
cb: (v1: P<S1>) => U

The callback to execute when all elements are found.
- - (v1: P<S1>): U
  - Parameters
    - v1: P<S1>
    Returns U
Optional scope: ParentNode

An optional scope for the element queries.

Returns U | null

- Defined in touchAll.ts:71
Type parameters
- T1: Element
- U = any
Parameters
- selectors: [string]
- cb: (v1: T1) => U
  - - (v1: T1): U
    - Parameters
      - v1: T1
      Returns U
- Optional scope: ParentNode
Returns U | null
- Defined in touchAll.ts:75
Type parameters
- S1: string
- S2: string
- U = any
Parameters
- selectors: [S1, S2]
- cb: (v1: P<S1>, v2: P<S2>) => U
  - - (v1: P<S1>, v2: P<S2>): U
    - Parameters
      - v1: P<S1>
      - v2: P<S2>
      Returns U
- Optional scope: ParentNode
Returns U | null
- Defined in touchAll.ts:80
Type parameters
- T1: Element
- T2: Element
- U = any
Parameters
- selectors: [string, string]
- cb: (v1: T1, v2: T2) => U
  - - (v1: T1, v2: T2): U
    - Parameters
      - v1: T1
      - v2: T2
      Returns U
- Optional scope: ParentNode
Returns U | null
- Defined in touchAll.ts:85
Type parameters
- S1: string
- S2: string
- S3: string
- U = any
Parameters
- selectors: [S1, S2, S3]
- cb: (v1: P<S1>, v2: P<S2>, v3: P<S3>) => U
  - - (v1: P<S1>, v2: P<S2>, v3: P<S3>): U
    - Parameters
      - v1: P<S1>
      - v2: P<S2>
      - v3: P<S3>
      Returns U
- Optional scope: ParentNode
Returns U | null
- Defined in touchAll.ts:91
Type parameters
- T1: Element
- T2: Element
- T3: Element
- U = any
Parameters
- selectors: [string, string, string]
- cb: (v1: T1, v2: T2, v3: T3) => U
  - - (v1: T1, v2: T2, v3: T3): U
    - Parameters
      - v1: T1
      - v2: T2
      - v3: T3
      Returns U
- Optional scope: ParentNode
Returns U | null
- Defined in touchAll.ts:97
Type parameters
- S1: string
- S2: string
- S3: string
- S4: string
- U = any
Parameters
- selectors: [S1, S2, S3, S4]
- cb: (v1: P<S1>, v2: P<S2>, v3: P<S3>, v4: P<S4>) => U
  - - (v1: P<S1>, v2: P<S2>, v3: P<S3>, v4: P<S4>): U
    - Parameters
      - v1: P<S1>
      - v2: P<S2>
      - v3: P<S3>
      - v4: P<S4>
      Returns U
- Optional scope: ParentNode
Returns U | null
- Defined in touchAll.ts:104
Type parameters
- T1: Element
- T2: Element
- T3: Element
- T4: Element
- U = any
Parameters
- selectors: [string, string, string, string]
- cb: (v1: T1, v2: T2, v3: T3, v4: T4) => U
  - - (v1: T1, v2: T2, v3: T3, v4: T4): U
    - Parameters
      - v1: T1
      - v2: T2
      - v3: T3
      - v4: T4
      Returns U
- Optional scope: ParentNode
Returns U | null
- Defined in touchAll.ts:111
Type parameters
- S1: string
- S2: string
- S3: string
- S4: string
- S5: string
- U = any
Parameters
- selectors: [S1, S2, S3, S4, S5]
- cb: (v1: P<S1>, v2: P<S2>, v3: P<S3>, v4: P<S4>, v5: P<S5>) => U
  - - (v1: P<S1>, v2: P<S2>, v3: P<S3>, v4: P<S4>, v5: P<S5>): U
    - Parameters
      - v1: P<S1>
      - v2: P<S2>
      - v3: P<S3>
      - v4: P<S4>
      - v5: P<S5>
      Returns U
- Optional scope: ParentNode
Returns U | null
- Defined in touchAll.ts:119
Type parameters
- T1: Element
- T2: Element
- T3: Element
- T4: Element
- T5: Element
- U = any
Parameters
- selectors: [string, string, string, string, string]
- cb: (v1: T1, v2: T2, v3: T3, v4: T4, v5: T5) => U
  - - (v1: T1, v2: T2, v3: T3, v4: T4, v5: T5): U
    - Parameters
      - v1: T1
      - v2: T2
      - v3: T3
      - v4: T4
      - v5: T5
      Returns U
- Optional scope: ParentNode
Returns U | null
- Defined in touchAll.ts:127
Type parameters
- S1: string
- S2: string
- S3: string
- S4: string
- S5: string
- S6: string
- U = any
Parameters
- selectors: [S1, S2, S3, S4, S5, S6]
- cb: (v1: P<S1>, v2: P<S2>, v3: P<S3>, v4: P<S4>, v5: P<S5>, v6: P<S6>) => U
  - - (v1: P<S1>, v2: P<S2>, v3: P<S3>, v4: P<S4>, v5: P<S5>, v6: P<S6>): U
    - Parameters
      - v1: P<S1>
      - v2: P<S2>
      - v3: P<S3>
      - v4: P<S4>
      - v5: P<S5>
      - v6: P<S6>
      Returns U
- Optional scope: ParentNode
Returns U | null
- Defined in touchAll.ts:136
Type parameters
- T1: Element
- T2: Element
- T3: Element
- T4: Element
- T5: Element
- T6: Element
- U = any
Parameters
- selectors: [string, string, string, string, string, string]
- cb: (v1: T1, v2: T2, v3: T3, v4: T4, v5: T5, v6: T6) => U
  - - (v1: T1, v2: T2, v3: T3, v4: T4, v5: T5, v6: T6): U
    - Parameters
      - v1: T1
      - v2: T2
      - v3: T3
      - v4: T4
      - v5: T5
      - v6: T6
      Returns U
- Optional scope: ParentNode
Returns U | null
- Defined in touchAll.ts:145
Type parameters
- S1: string
- S2: string
- S3: string
- S4: string
- S5: string
- S6: string
- S7: string
- U = any
Parameters
- selectors: [S1, S2, S3, S4, S5, S6, S7]
- cb: (v1: P<S1>, v2: P<S2>, v3: P<S3>, v4: P<S4>, v5: P<S5>, v6: P<S6>, v7: P<S7>) => U
  - - (v1: P<S1>, v2: P<S2>, v3: P<S3>, v4: P<S4>, v5: P<S5>, v6: P<S6>, v7: P<S7>): U
    - Parameters
      - v1: P<S1>
      - v2: P<S2>
      - v3: P<S3>
      - v4: P<S4>
      - v5: P<S5>
      - v6: P<S6>
      - v7: P<S7>
      Returns U
- Optional scope: ParentNode
Returns U | null
- Defined in touchAll.ts:155
Type parameters
- T1: Element
- T2: Element
- T3: Element
- T4: Element
- T5: Element
- T6: Element
- T7: Element
- U = any
Parameters
- selectors: [string, string, string, string, string, string, string]
- cb: (v1: T1, v2: T2, v3: T3, v4: T4, v5: T5, v6: T6, v7: T7) => U
  - - (v1: T1, v2: T2, v3: T3, v4: T4, v5: T5, v6: T6, v7: T7): U
    - Parameters
      - v1: T1
      - v2: T2
      - v3: T3
      - v4: T4
      - v5: T5
      - v6: T6
      - v7: T7
      Returns U
- Optional scope: ParentNode
Returns U | null
- Defined in touchAll.ts:165
Type parameters
- S1: string
- S2: string
- S3: string
- S4: string
- S5: string
- S6: string
- S7: string
- S8: string
- U = any
Parameters
- selectors: [S1, S2, S3, S4, S5, S6, S7, S8]
- cb: (v1: P<S1>, v2: P<S2>, v3: P<S3>, v4: P<S4>, v5: P<S5>, v6: P<S6>, v7: P<S7>, v8: P<S8>) => U
  - - (v1: P<S1>, v2: P<S2>, v3: P<S3>, v4: P<S4>, v5: P<S5>, v6: P<S6>, v7: P<S7>, v8: P<S8>): U
    - Parameters
      - v1: P<S1>
      - v2: P<S2>
      - v3: P<S3>
      - v4: P<S4>
      - v5: P<S5>
      - v6: P<S6>
      - v7: P<S7>
      - v8: P<S8>
      Returns U
- Optional scope: ParentNode
Returns U | null
- Defined in touchAll.ts:176
Type parameters
- T1: Element
- T2: Element
- T3: Element
- T4: Element
- T5: Element
- T6: Element
- T7: Element
- T8: Element
- U = any
Parameters
- selectors: [string, string, string, string, string, string, string, string]
- cb: (v1: T1, v2: T2, v3: T3, v4: T4, v5: T5, v6: T6, v7: T7, v8: T8) => U
  - - (v1: T1, v2: T2, v3: T3, v4: T4, v5: T5, v6: T6, v7: T7, v8: T8): U
    - Parameters
      - v1: T1
      - v2: T2
      - v3: T3
      - v4: T4
      - v5: T5
      - v6: T6
      - v7: T7
      - v8: T8
      Returns U
- Optional scope: ParentNode
Returns U | null

touchAllP

touchAllP<S1>(selectors: [S1], scope?: ParentNode): Promise<[P<S1>]>
touchAllP<T1>(selectors: [string], scope?: ParentNode): Promise<[T1]>
touchAllP<S1, S2>(selectors: [S1, S2], scope?: ParentNode): Promise<[P<S1>, P<S2>]>
touchAllP<T1, T2>(selectors: [string, string], scope?: ParentNode): Promise<[T1, T2]>
touchAllP<S1, S2, S3>(selectors: [S1, S2, S3], scope?: ParentNode): Promise<[P<S1>, P<S2>, P<S3>]>
touchAllP<T1, T2, T3>(selectors: [string, string, string], scope?: ParentNode): Promise<[T1, T2, T3]>
touchAllP<S1, S2, S3, S4>(selectors: [S1, S2, S3, S4], scope?: ParentNode): Promise<[P<S1>, P<S2>, P<S3>, P<S4>]>
touchAllP<T1, T2, T3, T4>(selectors: [string, string, string, string], scope?: ParentNode): Promise<[T1, T2, T3, T4]>
touchAllP<S1, S2, S3, S4, S5>(selectors: [S1, S2, S3, S4, S5], scope?: ParentNode): Promise<[P<S1>, P<S2>, P<S3>, P<S4>, P<S5>]>
touchAllP<T1, T2, T3, T4, T5>(selectors: [string, string, string, string, string], scope?: ParentNode): Promise<[T1, T2, T3, T4, T5]>
touchAllP<S1, S2, S3, S4, S5, S6>(selectors: [S1, S2, S3, S4, S5, S6], scope?: ParentNode): Promise<[P<S1>, P<S2>, P<S3>, P<S4>, P<S5>, P<S6>]>
touchAllP<T1, T2, T3, T4, T5, T6>(selectors: [string, string, string, string, string, string], scope?: ParentNode): Promise<[T1, T2, T3, T4, T5, T6]>
touchAllP<S1, S2, S3, S4, S5, S6, S7>(selectors: [S1, S2, S3, S4, S5, S6, S7], scope?: ParentNode): Promise<[P<S1>, P<S2>, P<S3>, P<S4>, P<S5>, P<S6>, P<S7>]>
touchAllP<T1, T2, T3, T4, T5, T6, T7>(selectors: [string, string, string, string, string, string, string], scope?: ParentNode): Promise<[T1, T2, T3, T4, T5, T6, T7]>
touchAllP<S1, S2, S3, S4, S5, S6, S7, S8>(selectors: [S1, S2, S3, S4, S5, S6, S7, S8], scope?: ParentNode): Promise<[P<S1>, P<S2>, P<S3>, P<S4>, P<S5>, P<S6>, P<S7>, P<S8>]>
touchAllP<T1, T2, T3, T4, T5, T6, T7, T8>(selectors: [string, string, string, string, string, string, string, string], scope?: ParentNode): Promise<[T1, T2, T3, T4, T5, T6, T7, T8]>

Takes an array of CSS-style selectors. Returns a promise that will only resolve when for all selectors an element is found. The promise value is an array of the elements in the order of the selector array. Optionally takes a scope as third argument to use for the element search.

Note: touchAllP has overloads for tuples of up to 8 selectors.

Like touchAll but 'portable', so that many callbacks can subscribe to the 'event' of the elements being found.

example

// -------------------------------------------------------------------------
// Automatically attempts to parse CSS selectors into element types, which
// should work for tag-qualified CSS selectors
// -------------------------------------------------------------------------

const elementsPA = touchAllP(['button.my-button', 'form#the-form'])
// > Promise<[HTMLButtonElement, HTMLFormElement]>

// -------------------------------------------------------------------------
// When using non-recognised selectors all element types default to `Element`
// -------------------------------------------------------------------------

const elementsPB = touchAllP(['.my-button', '#the-form'])
// > Promise<[Element, Element]>

// -------------------------------------------------------------------------
// When it fails to infer the element types from given CSS selectors you can
// specify the types explicitly
// -------------------------------------------------------------------------

const elementsPB = touchAllP<HTMLButtonElement, HTMLFormElement>(['.my-button', '#the-form'])
// > Promise<[HTMLButtonElement, HTMLFormElement]>

Type parameters

S1: string

Parameters

selectors: [S1]

An array of CSS-style selectors. For each selector an element will be searched.
Optional scope: ParentNode

An optional scope for the element queries.

Returns Promise<[P<S1>]>

- Defined in touchAllP.ts:49
Type parameters
- T1: Element
Parameters
- selectors: [string]
- Optional scope: ParentNode
Returns Promise<[T1]>
- Defined in touchAllP.ts:52
Type parameters
- S1: string
- S2: string
Parameters
- selectors: [S1, S2]
- Optional scope: ParentNode
Returns Promise<[P<S1>, P<S2>]>
- Defined in touchAllP.ts:56
Type parameters
- T1: Element
- T2: Element
Parameters
- selectors: [string, string]
- Optional scope: ParentNode
Returns Promise<[T1, T2]>
- Defined in touchAllP.ts:60
Type parameters
- S1: string
- S2: string
- S3: string
Parameters
- selectors: [S1, S2, S3]
- Optional scope: ParentNode
Returns Promise<[P<S1>, P<S2>, P<S3>]>
- Defined in touchAllP.ts:65
Type parameters
- T1: Element
- T2: Element
- T3: Element
Parameters
- selectors: [string, string, string]
- Optional scope: ParentNode
Returns Promise<[T1, T2, T3]>
- Defined in touchAllP.ts:70
Type parameters
- S1: string
- S2: string
- S3: string
- S4: string
Parameters
- selectors: [S1, S2, S3, S4]
- Optional scope: ParentNode
Returns Promise<[P<S1>, P<S2>, P<S3>, P<S4>]>
- Defined in touchAllP.ts:76
Type parameters
- T1: Element
- T2: Element
- T3: Element
- T4: Element
Parameters
- selectors: [string, string, string, string]
- Optional scope: ParentNode
Returns Promise<[T1, T2, T3, T4]>
- Defined in touchAllP.ts:82
Type parameters
- S1: string
- S2: string
- S3: string
- S4: string
- S5: string
Parameters
- selectors: [S1, S2, S3, S4, S5]
- Optional scope: ParentNode
Returns Promise<[P<S1>, P<S2>, P<S3>, P<S4>, P<S5>]>
- Defined in touchAllP.ts:89
Type parameters
- T1: Element
- T2: Element
- T3: Element
- T4: Element
- T5: Element
Parameters
- selectors: [string, string, string, string, string]
- Optional scope: ParentNode
Returns Promise<[T1, T2, T3, T4, T5]>
- Defined in touchAllP.ts:96
Type parameters
- S1: string
- S2: string
- S3: string
- S4: string
- S5: string
- S6: string
Parameters
- selectors: [S1, S2, S3, S4, S5, S6]
- Optional scope: ParentNode
Returns Promise<[P<S1>, P<S2>, P<S3>, P<S4>, P<S5>, P<S6>]>
- Defined in touchAllP.ts:104
Type parameters
- T1: Element
- T2: Element
- T3: Element
- T4: Element
- T5: Element
- T6: Element
Parameters
- selectors: [string, string, string, string, string, string]
- Optional scope: ParentNode
Returns Promise<[T1, T2, T3, T4, T5, T6]>
- Defined in touchAllP.ts:112
Type parameters
- S1: string
- S2: string
- S3: string
- S4: string
- S5: string
- S6: string
- S7: string
Parameters
- selectors: [S1, S2, S3, S4, S5, S6, S7]
- Optional scope: ParentNode
Returns Promise<[P<S1>, P<S2>, P<S3>, P<S4>, P<S5>, P<S6>, P<S7>]>
- Defined in touchAllP.ts:121
Type parameters
- T1: Element
- T2: Element
- T3: Element
- T4: Element
- T5: Element
- T6: Element
- T7: Element
Parameters
- selectors: [string, string, string, string, string, string, string]
- Optional scope: ParentNode
Returns Promise<[T1, T2, T3, T4, T5, T6, T7]>
- Defined in touchAllP.ts:130
Type parameters
- S1: string
- S2: string
- S3: string
- S4: string
- S5: string
- S6: string
- S7: string
- S8: string
Parameters
- selectors: [S1, S2, S3, S4, S5, S6, S7, S8]
- Optional scope: ParentNode
Returns Promise<[P<S1>, P<S2>, P<S3>, P<S4>, P<S5>, P<S6>, P<S7>, P<S8>]>
- Defined in touchAllP.ts:140
Type parameters
- T1: Element
- T2: Element
- T3: Element
- T4: Element
- T5: Element
- T6: Element
- T7: Element
- T8: Element
Parameters
- selectors: [string, string, string, string, string, string, string, string]
- Optional scope: ParentNode
Returns Promise<[T1, T2, T3, T4, T5, T6, T7, T8]>

touchElement

touchElement<S, U>(selector: S, callback: (element: ParseSelector<S>) => U, scope?: ParentNode): U | null
touchElement<T, U>(selector: string, callback: (element: T) => U, scope?: ParentNode): U | null

Finds the first element within the set scope that matches selector. If found the element is applied to the given callback function, and the function's return value will be propagated as return value of touchElement. If no element is found, the callback is not invoked, and null is returned from touchElement.

example

// -------------------------------------------------------------------------
// Automatically attempts to parse CSS selectors into element types, which
// should work for tag-qualified CSS selectors
// -------------------------------------------------------------------------

touchElement('input#my-input', (input) => {
    // input is HTMLInputElement
})

// -------------------------------------------------------------------------
// When using non-recognised selectors the element type defaults to `Element`
// -------------------------------------------------------------------------

touchElement('#my-input', (input) => {
    // input is Element
})

// -------------------------------------------------------------------------
// When it fails to infer the element types from given CSS selector you can
// specify the type explicitly
// -------------------------------------------------------------------------

// Either let the callback specify the element types:
touchElement('#my-input', (input: HTMLElement) => { ... })s

// or provide the element type as type argument:
touchElement<HTMLElement>('#my-input', (input) => { ... })

// -------------------------------------------------------------------------
// The callback's return value is returned from touchElement:
// -------------------------------------------------------------------------

const result: TheType = touchElement('input#my-input', (input) => input.value)

// and because the query for 'input#my-input' can fail to find an element:
type TheType = string | null

Type parameters

S: string
U = any

Parameters

selector: S

A CSS-compatible selector to match the searched element against.
callback: (element: ParseSelector<S>) => U

The callback to execute when the element is found.
- - (element: ParseSelector<S>): U
  - Parameters
    - element: ParseSelector<S>
    Returns U
Optional scope: ParentNode

An optional scope for the element query.

Returns U | null

- Defined in touchElement.ts:54
Type parameters
- T: Element
- U = any
Parameters
- selector: string
- callback: (element: T) => U
  - - (element: T): U
    - Parameters
      - element: T
      Returns U
- Optional scope: ParentNode
Returns U | null

touchElementP

touchElementP<S>(selector: S, scope?: ParentNode): Promise<ParseSelector<S>>
touchElementP<T>(selector: string, scope?: ParentNode): Promise<T>

Finds the first element within the set scope that matches selector. If found the returned promise resolves with the element. If no element is found, the promise will never resolve. Like touchElement but 'portable', so that many callbacks can subscribe to the 'event' of the element being found.

example

// -------------------------------------------------------------------------
// Automatically attempts to parse CSS selectors into element types, which
// should work for tag-qualified CSS selectors
// -------------------------------------------------------------------------

touchElementP('form.my-form button#my-button')
// Promise<HTMLButtonElement>

// -------------------------------------------------------------------------
// When using non-recognised selectors the element type defaults to `Element`
// -------------------------------------------------------------------------

touchElementP<HTMLButtonElement>('#my-button')
// Promise<Element>

// -------------------------------------------------------------------------
// When it fails to infer the element types from given CSS selector you can
// specify the type explicitly
// -------------------------------------------------------------------------

touchElementP<HTMLButtonElement>('#my-button')
// Promise<HTMLButtonElement>

Type parameters

S: string

Parameters

selector: S

A CSS-compatible selector to match the searched element against.
Optional scope: ParentNode

An optional scope for the element query.

Returns Promise<ParseSelector<S>>

- Defined in touchElementP.ts:40
Type parameters
- T: Element
Parameters
- selector: string
- Optional scope: ParentNode
Returns Promise<T>

windowLoadP

windowLoadP(): Promise<void>

- Defined in windowLoadP.ts:9
Returns a promise that resolves as soon as possible after the window is loaded. If the document.readyState is 'complete' at call-time, the returned promise resolves immediately, otherwise it resolves upon the window load event.

Returns Promise<void>

writeDataset

writeDataset(key: string): (value: string) => (element: HTMLOrSVGElement) => void

- Defined in writeDataset.ts:17
Write dataset values. Takes a key, and returns a new function that takes the value, which in turn returns the last function that takes the element to write the key-value pair to.
example
```
declare const someElement: HTMLElement

writeDataset('someKey') ('someValue') (someElement)
```
Parameters
- key: string
  
  The dataset property to write.
Returns (value: string) => (element: HTMLOrSVGElement) => void
- - (value: string): (element: HTMLOrSVGElement) => void
  - Parameters
    - value: string
      
      The value to write to the property.
    Returns (element: HTMLOrSVGElement) => void
    - - (element: HTMLOrSVGElement): void
      - Parameters
        
        element: HTMLOrSVGElement
        
        An element upon which to perform the dataset update.
        
        Returns void

Index

Interfaces

Type aliases

Functions

Type aliases

CssDisplayValue

StylableElement

Functions

DOMReadyP

Returns Promise<void>

addClasses

Parameters

Rest ...classes: string[]

Returns (element: Element) => void

Parameters

element: Element

Returns void

addClassesForMS

Parameters

ms: number

Rest ...classes: string[]

Returns (element: Element) => void

Parameters

element: Element

Returns void

addClassesForNFrames

Parameters

n: number

Rest ...classes: string[]

Returns (element: Element) => void

Parameters

element: Element

Returns void

deferFrames

Parameters

n: number

handler: () => any

Returns any

Returns void

deferFramesP

Parameters

n: number

Returns Promise<void>

display

Parameters

value: CssDisplayValue

Returns (element: StylableElement) => void

Parameters

element: StylableElement

Returns void

displayIf

Parameters

cond: boolean

Optional displayValue: CssDisplayValue

Returns (element: StylableElement) => void

Parameters

element: StylableElement

Returns void

displayUsing

Type parameters

T: ElementCSSInlineStyle

Parameters

pred: (element: T) => boolean

Parameters

element: T

Returns boolean

displayValue: CssDisplayValue

Returns (element: T) => void

Parameters

element: T

Returns void

getMeta

Parameters

name: string

Returns string | null

Type parameters

T

Parameters

name: string

transformer: (content: string) => T