Neutrinos Peludos Magnéticos

    ez-dom

    3.0.1 • Public • Published

    Travis CI

    ez-dom is a easy library to manipulate the DOM, with a simple API.

    Getting started

    ez-dom promotes a functional programming (FP) style to manipulate the DOM. Most methods are auto-curried and data-last(dom element(s)).

    Curried methods

    cap iteratees to one argument:

    addClass append removeClass toggleClass css html trigger setText

    Methods that cap iteratees to two argument:

    on

    Methods that are not curried:

    remove, ready, show, hide, offset, query, getText

    e.g : ez.remove(element)

    Installation

    npm

     npm install ez-dom

    yarn

     yarn add ez-dom
    import * as ez from 'ez-dom'

    or destructuring

    import { addClass }  from 'ez-dom'

    To reduce size all you need is to use bundler with tree shaking support like webpack 2 or Rollup.

    You can do imports like below without actually including the entire library content.

    import ready from 'ez-dom/lib/dom/ready'
    import query from 'ez-dom/lib/dom/query'
    import addClass from 'ez-dom/lib/dom/addClass'

    Examples

    ez.ready(() => {
     
        const body = ez.query('body')
        const test = ez.query('.test')
     
        const handleClick = function(e, el) {
            e.preventDefault()
            ez.addClass('bar', el)
            console.log(e.detail) // Object {derp: "derp!"}
        }
     
        const addClassOnClick = ez.on(ez._, handleClick)
        
        addClassOnClick('click')(body)
        addClassOnClick('click', test)
     
        const trigger = ez.trigger({ event : 'click', detail : { 'derp' : 'derp!' }})
        trigger(body)
     
        const applyStyle = ez.compose(
            ez.addClass('elon'),
            ez.css({ backgroundColor: 'red' })
        )
     
        applyStyle(ez.query('div'))
     
    })

    API

    query

    (selectors: any) => Array<HTMLElement>

    Query one or many element.

     const el = query('div')

    ready

    (callback: Function) => void

    Specify a function to execute when the DOM is fully loaded.

     ez.ready(() => { console.log('ready!') })

    addClass

    (classes: string, selectors: Array<HTMLElement>) => Array<HTMLElement>

    Adds the specified class(es) to each element in the set of matched elements.

     addClass('myClass')(element)

    append

    (html: any, selectors: Array<HTMLElement>) => Array<HTMLElement>

    Insert content, specified by the parameter, to the end of each element in the set of matched elements.

     append(`<div>hi</div>`)(element)

    css

    (css: object, selectors: Array<HTMLElement>) => Array<HTMLElement>

    Set one or more CSS properties for every matched element.

     css({ backgroundColor: 'blue', fontSize: '20px' })(element)

    getText

    (selectors: Array<HTMLElement>) => string

    Get the text of the first element

     getText(element)

    hide

    (selectors: Array<HTMLElement>) => Array<HTMLElement>

    Hide the matched elements.

     hide(element)

    html

    (selectors: Array<HTMLElement>) => string

    Get the HTML contents of the first element.

     const html = html(element)

    offset

    (selectors: Array<HTMLElement>) => Object

    Get the current coordinates of the first element.

    const offset = offset(element)

    on

    (event: string, callback: Function, selectors: Array<HTMLElement>) => Array<HTMLElement>

    Attach an event handler function for one or more events to the selected elements.

     on('click')(handleClick)(div)

    remove

    (selectors: Function) => Array<HTMLElement>

    Remove the set of matched elements from the DOM.

     remove(element)

    removeClass

    (classes: string selectors: Array<HTMLElement>) => Array<HTMLElement>

    Remove a single class, multiple classes, or all classes from each element in the set of matched elements

     removeClass('foo derp')(element)

    setText

    (text: string, selectors: Array<HTMLElement>) => Array<HTMLElement>

    Set the text contents of the matched elements.

     setText('foo')(div)

    show

    (selectors: Array<HTMLElement>) => Array<HTMLElement>

    Display the matched elements.

     show(div)

    toggleClass

    (classes: string, selectors: Array<HTMLElement>) => Array<HTMLElement>

    Add or remove one or more classes from each element in the set of matched elements.

     toggleClass('myToggleClass')(div)

    trigger

    ({event, detail}: { event: string; detail: Object; }, selectors: Array<HTMLElement> ) => Array<HTMLElement>

    Execute all handlers and behaviors attached to the matched elements for the given event type.

     trigger({ event : 'click', detail : { 'test' : 'hi' } })(element)

    Placeholder

    A special placeholder value used to specify "gaps" within curried functions, allowing partial application of any combination of arguments, regardless of their positions.

    e.g:

     const addClassOnClick = ez.on(_, handleClick)
     addClassOnClick('click')(body)

    Browser support

    ez-dom works on modern browsers such as Chrome, Firefox, and Safari.

    License

    MIT

    Install

    npm i ez-dom

    DownloadsWeekly Downloads

    3

    Version

    3.0.1

    License

    MIT

    Last publish

    Collaborators

    • jonathandion