µDOM utilities
npm install mudom
Table of Contents generated with DocToc
- What it Is
- Installation
- API
- DOM
- TEXT
- KB
- How to Use It
- To Do
utilities to handle DOM-related tasks
``bash`
npm install -g mudom
browserify -r mudom -o app/static/browserified/mudom.js
Demo on https://loveencounterflow.github.io/hengist/dev/mudom/static/index.html
* runs in the browser using browserify
* [–] absorb µ.keyboard-modifier-emitter.js (svelte app2)src/components/Toolbox/index.svelte#µ_DOM_detect_doublekey_events()
* [–] absorb computedStyleMap()
* [–] documentation
* [–] offer browserified builds
* [–] allow lists of elements with event binding
* [–] include things like , attributeStyleMap, computedStyleMap() from CSS HoudiniDom
* https://www.smashingmagazine.com/2020/03/practical-overview-css-houdini/
* https://web.dev/houdini-how/?utm_campaign=CSS%2BLayout%2BNews&utm_medium=web&utm_source=CSS_Layout_News_281
* https://web.dev/css-props-and-vals/
* https://houdini.how/
* [–] export classes , Text, &c.
* [–] this should work but doesn't:
`coffee`
sub_document = iframe.contentDocument
first_tracker = µ.DOM.select_first_from sub_document, '.tracker'
Error message is not a valid delement: HTMLDocument{...; suspicion is that HTMLDocument should beelement
accepted as a (DOM)
Note the real problem is not the test x instanceof Element, the problem lies in the realm-crossing
nature of the
* [–] allow to instantiate with virtual DOM object so µDOM can be used outside the browser
* [–] integrate XPath &c from playlist µDOM2
[–] remove µ.DOM.select__from() methods; instead allow µ.DOM.select_first(), µ.DOM.select_all()document
to take one or two parameters
* [–] ??? allow to pass in on creation as it can differ from main document within iframesµ
* [–] don't reference from with libraries, use private ref to avoid name collisionsloupe.js
* [–] move to deps
* [–] integrate method to monitor all events in document or on given element as discussed in
https://stackoverflow.com/a/72945018:
`js`
for (const key in document) if (key.startsWith('on')) document.addEventListener(key.slice(2), console.log);
`js``
// https://stackoverflow.com/a/72945018/319266
function monitorEvents(element) {
for (const key in element) {
if (key.startsWith('on')) {
element.addEventListener(key.slice(2), console.log);
}
}
}