@plohoj/html-editor v0.0.7
HTML editor
html-editor it's a tool for helping modification html elements
Table of contents
Observables
observeElementMutation
Converts the callback of the MutationObserver class to an Rx event stream.
Example:
observeElementMutation(
document.querySelector('#my-element'),
{ attributeFilter: ['data-my-data'] },
).subscribe(console.log); observeQuerySelector
Returns change (addition and deletion) of element that match selectors, like an Rx stream.
Example:
observeQuerySelector(
'.my-child',
{
parent: document.querySelector('#my-parent'),
has: '.my-sub-child',
filter: element => element.classList.contains('.my-child-modifier'),
}
).subscribe(console.log);Example log:
{added: Element, target: Element, removed: undefined};
{added: undefined, target: undefined, removed: Element}; observeQuerySelectorAll
Returns changes (additions and deletions) of elements that match selectors, like an Rx stream.
Example:
observeQuerySelectorAll(
'.my-child',
{
parent: document.querySelector('#my-parent'),
has: '.my-sub-child',
filter: element => element.classList.contains('.my-child-modifier'),
}
).subscribe(console.log);Example log:
{added: [Element], target: [Element, Element], removed: []};
{added: [], target: [Element], removed: [Element]}; awaitElement
Awaiting only one element to match the selector and returns it as an Rx stream. The stream ends immediately after one element is found / added.
Example:
awaitElement('#my-element')
.subscribe(console.log); awaitRandomElement
Awaiting Expects at least one element to match the selector and returns it as an Rx stream. If there are more than 1 elements, it will return a random one. The stream ends immediately after the elements are found / added.
Example:
awaitRandomElement('.my-element')
.subscribe(console.log); urlChange$
Emit new location url when the URL is changes
Example:
urlChange$.subscribe(console.log);Operators
mergeMapAddedElements
Conversion operator to a new stream for each new added element
Example:
observeQuerySelectorAll('.my-button')
.pipe(
mergeMapAddedElements(
element => fromEvent(element, 'click'),
{ isTakeUntilRemoved: true }
)
).subscribe(console.log); mergeMapStringToggle
The operator creates a separate stream when the source string is validated.
Example:
urlChange$
.pipe(
mergeMapStringToggle(
/my-url-segment/,
() => observeQuerySelectorAll('.my-element'),
{ isTakeUntilToggle: true },
)
).subscribe(console.log);