Package dev.fritz2.dom

Types

CommentNode
Link copied to clipboard
js
class CommentNode(content: String, domNode: Comment) : WithDomNode<Comment>
Represents a DOM-CommentNode
DomListener
Link copied to clipboard
js
class DomListener<E : Event, out X : Element>(events: Flow<E>) : Listener<E>
Handles a Flow of Dom Events.
DummyContext
Link copied to clipboard
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
Link copied to clipboard
js
interface EventContext<out T : Element> : WithJob, WithEvents<T>
Context for handling events
HtmlTagMarker
Link copied to clipboard
js
annotation class HtmlTagMarker
A marker to separate the layers of calls in the type-safe-builder pattern.
Listener
Link copied to clipboard
js
interface Listener<E : Event>
Handles a Flow of Events
ProxyContext
Link copied to clipboard
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
Link copied to clipboard
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
Link copied to clipboard
js
class TextNode(content: String, domNode: Text) : WithDomNode<Text>
Represents a DOM-TextNode
Window
Link copied to clipboard
js
object Window
Represents all Events of the browser window object as WindowListeners
WindowListener
Link copied to clipboard
js
class WindowListener<E : Event>(events: Flow<E>) : Listener<E>
Handles a Flow of Window Events
WithComment
Link copied to clipboard
js
interface WithComment<out T : Node> : WithDomNode<T> , TagContext
Provides functionality to handle comments.
WithDomNode
Link copied to clipboard
js
external interface WithDomNode<out T : Node>
Base-interface for everything that represents a node in the DOM.
WithEvents
Link copied to clipboard
js
interface WithEvents<out T : Element> : WithDomNode<T>
Offers DomListeners for all DOM-events available.
WithText
Link copied to clipboard
js
interface WithText<N : Node> : WithDomNode<N> , TagContext
Interface providing functionality to handle text-content

Functions

accumulate
Link copied to clipboard
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
Link copied to clipboard
js
fun <N : Node> N.delete(start: Int, count: Int, cancelJob: (Node) -> Unit)
Deletes elements from the DOM.
eachIndex
Link copied to clipboard
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
Link copied to clipboard
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
Link copied to clipboard
js
fun DomListener<KeyboardEvent, HTMLInputElement>.enterAsNumber(): Flow<Double>
Gives you the new value as Double from the targeting Element when enter is pressed.
files
Link copied to clipboard
js
fun DomListener<Event, HTMLInputElement>.files(): Flow<FileList?>
Gives you the FileList from the targeting Element.
insert
Link copied to clipboard
js
fun <N : Node> N.insert(element: WithDomNode<N>, index: Int)
Inserts or appends elements to the DOM.
insertMany
Link copied to clipboard
js
fun <N : Node> N.insertMany(elements: List<WithDomNode<N>>, index: Int)
Inserts a List of elements to the DOM.
key
Link copied to clipboard
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
Link copied to clipboard
js
fun merge(vararg listener: DomListener<*, *>): Flow<Unit>
Merges mutiple DomListener like the analog method on Flows
mount
Link copied to clipboard
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
Link copied to clipboard
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
Link copied to clipboard
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
Link copied to clipboard
js
fun <N : Node> N.move(from: Int, to: Int)
Moves elements from on place to another in the DOM.
selectedIndex
Link copied to clipboard
js
fun DomListener<Event, HTMLSelectElement>.selectedIndex(): Flow<Int>
Gives you the selected index as Int from the targeting Element.
selectedText
Link copied to clipboard
js
fun DomListener<Event, HTMLSelectElement>.selectedText(): Flow<String>
Gives you the selected text as String from the targeting Element.
selectedValue
Link copied to clipboard
js
fun DomListener<Event, HTMLSelectElement>.selectedValue(): Flow<String>
Gives you the selected value as String from the targeting Element.
states
Link copied to clipboard
js
fun DomListener<Event, HTMLInputElement>.states(): Flow<Boolean>
Gives you the checked value as Boolean from the targeting Element.
values
Link copied to clipboard
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
Link copied to clipboard
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.