Package dev.fritz2.dom

Types

CommentNode

js

class CommentNode(content: String, domNode: Comment) : WithDomNode<Comment>

Represents a DOM-CommentNode

DomListener

js

class DomListener<E : Event, out X : Element>(events: Flow<E>) : Listener<E>

Handles a Flow of Dom Events.

DummyContext

js

class DummyContext(mountJob: Job, mountScope: Scope) : Tag<HTMLElement>

Implementation of RenderContext that just renders its children but does not add them anywhere to the Dom.

EventContext

js

interface EventContext<out T : Element> : WithJob, WithEvents<T>

Context for handling events

HtmlTagMarker

js

annotation class HtmlTagMarker

A marker to separate the layers of calls in the type-safe-builder pattern.

Listener

js

interface Listener<E : Event>

Handles a Flow of Events

ProxyContext

js

class ProxyContext<T : HTMLElement>(mountJob: Job, proxee: Tag<T>) : Tag<HTMLElement>

Implementation of RenderContext that forwards all registrations of children to the element it proxies.

Tag

js

open class Tag<out E : Element>(tagName: String, id: String?, baseClass: String?, job: Job, scope: Scope, domNode: E) : WithDomNode<E> , WithComment<E> , EventContext<E> , TagContext

Represents a tag in the resulting HTML.

TextNode

js

class TextNode(content: String, domNode: Text) : WithDomNode<Text>

Represents a DOM-TextNode

Window

js

object Window

Represents all Events of the browser window object as WindowListeners

WindowListener

js

class WindowListener<E : Event>(events: Flow<E>) : Listener<E>

Handles a Flow of Window Events

WithComment

js

interface WithComment<out T : Node> : WithDomNode<T> , TagContext

Provides functionality to handle comments.

WithDomNode

js

external interface WithDomNode<out T : Node>

Base-interface for everything that represents a node in the DOM.

WithEvents

js

interface WithEvents<out T : Element> : WithDomNode<T>

Offers DomListeners for all DOM-events available.

WithText

js

interface WithText<N : Node> : WithDomNode<N> , TagContext

Interface providing functionality to handle text-content

Functions

accumulate

js

fun <T> accumulate(accumulator: Pair<List<T>, List<T>>, newValue: List<T>): Pair<List<T>, List<T>>

Accumulates a Pair and a List to a new Pair of Lists

delete

js

fun <N : Node> N.delete(start: Int, count: Int, cancelJob: (Node) -> Unit)

Deletes elements from the DOM.

eachIndex

js

fun <V> Flow<List<V>>.eachIndex(): Flow<Patch<V>>

Compares each new List on a Flow to its predecessor element by element to create Patches.

enter

js

fun DomListener<KeyboardEvent, HTMLInputElement>.enter(): Flow<String>

Gives you the new value as String from the targeting Element when enter is pressed.

fun DomListener<KeyboardEvent, HTMLTextAreaElement>.enter(): Flow<String>

Gives you the new value as String from the targeting Element.

enterAsNumber

js

fun DomListener<KeyboardEvent, HTMLInputElement>.enterAsNumber(): Flow<Double>

Gives you the new value as Double from the targeting Element when enter is pressed.

files

js

fun DomListener<Event, HTMLInputElement>.files(): Flow<FileList?>

Gives you the FileList from the targeting Element.

insert

js

fun <N : Node> N.insert(element: WithDomNode<N>, index: Int)

Inserts or appends elements to the DOM.

insertMany

js

fun <N : Node> N.insertMany(elements: List<WithDomNode<N>>, index: Int)

Inserts a List of elements to the DOM.

key

js

fun <X : Element> DomListener<KeyboardEvent, X>.key(): Flow<Key>

Gives you the pressed key as Key from a KeyboardEvent.

fun WindowListener<KeyboardEvent>.key(): Flow<Key>

Gives you the pressed key as Key from a KeyboardEvent.

merge

js

fun merge(vararg listener: DomListener<*, *>): Flow<Unit>

Merges mutiple DomListener like the analog method on Flows

mount

js

inline fun <V> TagContext.mount(into: RenderContext?, store: Store<List<V>>, crossinline content: RenderContext.(Store<V>) -> RenderContext)

Compares each new List on store's data-Flow to its predecessor element by element to create Patches.

inline fun <V> TagContext.mount(into: RenderContext?, upstream: Flow<V>, crossinline content: RenderContext.(V) -> Unit)

Uses the content-lambda to render a subtree for each value on the upstream-Flow and mounts it to the DOM either

creating a new context-Div as a child of the receiver and adding the content as children to this Div
of, if into is set, replacing all children of this Tag.

inline fun <V> TagContext.mount(into: RenderContext?, store: Store<List<V>>, noinline idProvider: IdProvider<V, *>, crossinline content: RenderContext.(Store<V>) -> RenderContext)

Compares each new List on store's data-Flow to its predecessor to create Patches using Myer's diff-algorithm.

inline fun <V> TagContext.mount(into: RenderContext?, upstream: Flow<List<V>>, noinline idProvider: IdProvider<V, *>?, crossinline content: RenderContext.(V) -> RenderContext)

Compares each new List on upstream to its predecessor to create Patches using Myer's diff-algorithm.

mountContext

js

inline fun TagContext.mountContext(mountJob: Job): Div

Creates a Div as context for the mounted content using the given job and adds it to the receiver of this function inheriting its scope.

mountPatches

js

inline fun <V> TagContext.mountPatches(into: RenderContext?, upstream: Flow<List<V>>, crossinline createPatches: (Flow<List<V>>, MutableMap<Node, Job>) -> Flow<List<Patch<RenderContext>>>)

Mounts a Flow of Patches to the DOM either

creating a new context-Div as a child of the receiver
or, if into is set, replacing all children of this Tag.

move

js

fun <N : Node> N.move(from: Int, to: Int)

Moves elements from on place to another in the DOM.

selectedIndex

js

fun DomListener<Event, HTMLSelectElement>.selectedIndex(): Flow<Int>

Gives you the selected index as Int from the targeting Element.

selectedText

js

fun DomListener<Event, HTMLSelectElement>.selectedText(): Flow<String>

Gives you the selected text as String from the targeting Element.

selectedValue

js

fun DomListener<Event, HTMLSelectElement>.selectedValue(): Flow<String>

Gives you the selected value as String from the targeting Element.

states

js

fun DomListener<Event, HTMLInputElement>.states(): Flow<Boolean>

Gives you the checked value as Boolean from the targeting Element.

values

js

fun DomListener<Event, HTMLFieldSetElement>.values(): Flow<String>

Gives you the new value as String from the targeting Element.

fun DomListener<Event, HTMLInputElement>.values(): Flow<String>

Gives you the new value as String from the targeting Element.

fun DomListener<Event, HTMLSelectElement>.values(): Flow<String>

Gives you the new value as String from the targeting Element.

fun DomListener<Event, HTMLTextAreaElement>.values(): Flow<String>

Gives you the new value as String from the targeting Element.

fun DomListener<InputEvent, HTMLInputElement>.values(): Flow<String>

Gives you the new value as String from the targeting Element.

valuesAsNumber

js

fun DomListener<Event, HTMLInputElement>.valuesAsNumber(): Flow<Double>

Gives you the new value as Double from the targeting Element.

fun DomListener<InputEvent, HTMLInputElement>.valuesAsNumber(): Flow<Double>

Gives you the new value as Double from the targeting Element.