lambda-dom playground

Play with the UMD bundle of lambda-dom.

by Jeffrey Westerkamp

HTML

<script src="https://cdn.jsdelivr.net/npm/lambda-dom/umd/lambda-dom.js"></script>
<meta name="my-meta" content='{ "foo": "bar", "baz": 42 }'>

<h1 id="title">Play with the UMD bundle of <code>lambda-dom</code>.</h1>

<ul>
    <li><a data-color="SlateBlue" href="https://jjwesterkamp.github.io/lambda-dom/" target="_blank">view documentation</a></li>
    <li><a data-color="DodgerBlue" href="https://github.com/JJWesterkamp/lambda-dom" target="_blank">view on Github</a></li>
    <li><a data-color="MediumSeaGreen" href="https://www.npmjs.com/package/lambda-dom" target="_blank">view on npm</a></li>
    <li><a data-color="Orange" href="https://www.jsdelivr.com/package/npm/lambda-dom" target="_blank">view on jsDelivr</a></li>
    <li><a data-color="Tomato" href="https://github.com/JJWesterkamp/lambda-dom/blob/master/CHANGELOG.md" target="_blank">view changelog</a></li>
</ul>

<h2>Available functions</h2>

<small>Missing documented functions? Try a hard refresh to force fetching the latest UMD bundle from jsdelivr.</small>

<ul id="functions"></ul>

SCSS

body {
    font-family: sans-serif;
    color: black;
}

#title {
    padding: 1rem;
}

a {
    color: black;
    font-weight: bold;
    line-height: 30px;
    &:not(:hover) {
        text-decoration: none;
    }
}

JavaScript

const {
    windowLoadP,
    deferFramesP,
    touchElementP,
    style,
    onWindowLoad,
    queryAll,
    deferFrames,
    readDataset,
    getMeta
} = LD

// promise style

windowLoadP()                            // await window load event
    .then(() => deferFramesP(100))       // then wait another 100 animation frames
    .then(() => touchElementP('#title')) // then find #title
    .then(style({   					 // then make it pretty
        color: 'white',
        backgroundColor: '#202020',
    }))


// callback style

const getColor = readDataset('color')
const waitTime = (i) => 5 * i + 105

onWindowLoad(() => {						          // await window load event
    queryAll('a[data-color]').forEach((link, i) => {  // find all <a data-color> tags and loop over them
        deferFrames(waitTime(i), () => {              // await an incremental amount of animation frames
            style({ color: getColor(link) })(link)    // make the link its color
        })
    })
})

// easily fetch meta-data and transform it:

const myMeta = getMeta('my-meta', JSON.parse)

console.log('myMeta', myMeta)

// List the available functions in HTML

windowLoadP()
    .then(() => deferFramesP(120))
    .then(() => touchElementP('#functions'))
    .then(async (ul) => {
        for (const fn of Object.keys(LD)) {
            await deferFramesP(5)

            const li = document.createElement('li')
            const a  = document.createElement('a')

            a.href      = `https://jjwesterkamp.github.io/lambda-dom/modules.html#${fn.toLowerCase()}`
            a.innerHTML = `<code>${fn}</code>`
            a.target    = '_blank'

            li.appendChild(a)
            ul.appendChild(li)
        }
    })