npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

yadl

v0.3.4

Published

Yet Another DOM Library

Downloads

124

Readme

Yadl

Yet Another DOM Library

onReady / onLoad

// Listen when DOM is ready
onReady(() => {
    console.log('DOM is ready')
})

// Listen when body is loaded
onLoad(document.body, () => {
    console.log('Body and its assets are loaded')
})

// Listen when an image is loaded
onLoad(imageElement, () => {
    console.log(imageElement, 'has loaded')
})

Find / FindAll

  • find will get one element from the document or a container.
  • findAll will target several elements from the document or a container.
  • findAll is an array, not a dom iterator.
import { find, findAll } from "@zouloux/yadl"

// Select all divs which have "Special" class from document
const allSpecialDivs:HTMLElement[] = findAll('div.Special')

// Find the only element which have the id "Test"
const testElement:HTMLElement = find('#Test')

// Select all divs from element test
const allDivs:HTMLElement[] = findAll(testElement, 'div')

// allDivs is a regular array
allDivs.map( (div, i) => {
    // Do something with selected div
})
import { $, $$ } from "@zouloux/yadl"
// Alias for find
const oneDiv:HTMLElement = $('div#id') 
// Alias for findAll
const severalDivs:HTMLElement[] = $$('div.Special')

Get parent with class

getParentWithClass can help to select a parent of a DOM element with a specific class.

<div class="App">
    <!-- POPUP -->
    <div class="Popup_container">
        <div class="Popup_inner">
            <button onClick="popupCloseClicked()">Close</button>
        </div>
    </div>
</div>
import { popupCloseClicked } from "@zouloux/yadl"
// Close popup when close button is clicked
function popupCloseClicked ( event:Event ) {
    const popupContainer = getParentWithClass( event.currentTarget, 'Popup_container' )
    popupContainer.remove();
}

Listen events with on / once

import { on, once } from "@zouloux/yadl"

// Listen an event on a target
on(document, 'click', e => {
    console.log("Document has been clicked")
})

// Listen several events on a target from a selector
on("#Element", ['mouseenter', 'mouseleave'], e => {
    console.log("#Element mouse event", e.type)
})

// Listen an event only once (removed after first dispatch)
once(target, "click", e => {
    console.log("Called once")
})

// Remove several attached listeners
const listeners = on(target, ["eventA", "someevent"], event => {
    // Will remove event listeners if something is true
    if ( something )
        listeners();
})

// Listener options
on(target, 'scroll', scrollhandler, {
    // addEventListener options can be added here
    passive: true
})

Create elements with element

import { element, setAttributes } from "@zouloux/yadl"

// Create a new div element
const div1:HTMLDivElement = element('div')

// Create a new div element with attributes
const div2:HTMLDivElement = element('div', {
    'class': 'Class1 Class2',
    id: 'DivID',
    disabled: true,
})

// Create a new div element with style
const div3:HTMLDivElement = element('div', {}, {
    border: '1px solid red',
    width: '50%',
})

// Bonus, set attributes to an element
setAttributes(div2, {
	id: 'MyID', 	// override attribute
	'class': null, 	// remove attribute
	role: 'status'	// add attribute
})

Get and set style on elements with getStyle / setStyle

TODO DOC

More with getStyle

TODO DOC

  • splitSizeAndUnit
  • remToPixels

TODO DOC

setAttributes

TODO DOC

SVG svgColor / `svgPosition

TODO DOC