domik

    1.0.4 • Public • Published

    Description

    DOM-manipulating API in pure Javascriptn is verbose and pain to write in. JQuery partially solves this problem, but who wants to have another bulky dependency? domik is a tiny toolbox of DOM-manipulating helpers written in pure javacript, that allows creating complex DOM element structures in declarative fashion with significantly less code. It uses concise clear API inspired by JQuery, but manipulates native DOM elements without any extra wrappers.

    Basic usage

    Import the entire module:

    import * as util from "domik";
    

    API

    bake(name, recipe)

    Bakes DOM element according to recipe in a declarative fashion.

    • name (string) Required. Type of the created element.
    • recipe (object) Optional JSON object that describes created element. can have following properties:
      • id - string id to be set
      • classes - string or array. Single class or array of classes to be set
      • attributes - object of attributes key vaule pairs. Any valid html attributes can be passed
      • html - inner html
      • text - inner text
      • val - value
      • style - css string inline style for the element
      • children - single DOM element or array of DOM elements that will be appended as children
      • listeners - JSON object with keys - events types, vaules - event handlers

    Code example:

        import * as util from "domik";
        
        //baking simple span
        let mySpan = util.bake("span", {
            text: "I am simple span",
        });
        
        //baking complex DOM structure
        let wrapper = util.bake("div", {
            classes: "wrapper",
            style: "width: 100px; display: flex;",
            listeners: {
                "click": ()=>{ alert("Hello world") }
            },
            children: [
                mySpan,
                util.bake("div", {
                    style: "border: 1px solid grey; border-radius: 5px",
                    children: util.bake("h1", {
                        html: "Hello World",
                        style: "color: green",
                        listeners: {
                            "click": ()=>{ alert("Hello hello!") }
                        }
                    })
                })
            ]
        })
     

    $(selector)

    • selector (string) Query selector

    This is an alias for native document.querySelector method

    util.$("#selector")
    

    $$(selector)

    • selector (string) Query selector

    This is an alias for native document.querySelectorAll method

    util.$$(".another-selector")
    

    appendChildren(parent, children)

    • parent (DOM element)
    • children (DOM element or array of DOM elements)

    Appends child or array of children to a parent

    show(element)

    • element (string or DOM element)

    Alias in jquery style for display: block

    hide(element)

    • element (string or DOM element)

    Alias in jquery style for display: none

    flex(element)

    • element (string or DOM element)

    Alias in jquery style for display: flex

    val(element, value)

    • element (string or DOM element)
    • value (string)

    Sets value for given element

    html(element, html)

    • element (string or DOM element)
    • html (string)

    Sets innerHTML for given element

    text(element, text)

    • element (string or DOM element)
    • text (string)

    Sets innerText for given element

    addClass(element, class)

    • element (string or DOM element)
    • class (string) css class

    Adds class to element’s classlist

    removeClass(element, class)

    • element (string or DOM element)
    • class (string) css class

    Removes class from element’s classlist

    generateRandomId(length, prefix, postfix)

    • length (number) Length of generated id not including prefix and postfix
    • prefix (string) Optional prefix string
    • postfix (string) Optional postfix string

    Generates and returns random id of a given length in form of: “prefix-random-id-postfix”

    Install

    npm i domik

    DownloadsWeekly Downloads

    0

    Version

    1.0.4

    License

    MIT

    Unpacked Size

    35.5 kB

    Total Files

    10

    Last publish

    Collaborators

    • viocost