wrench-set

Table of Contents

• Info
• wrench-set
• Element
  • initializeElement
  • getElement
  • renderTo
  • on
  • un
  • isDestroyed
  • destroy
• event.getTarget

Info

To install:

npm install --save wrench-set

If you have any issues, features, requests, drop them in the issues section.

Please give enough info, so I can replicate, in case of issues.

Type: Info

wrench-set

Type: Namespace

Properties

• Element Class

Element

Parameters

• config Object
  • config.elementType string type of node we are going to be (optional, default "div")
  • config.className string class names the self element will take
  • config.innerHTML string HTML that will be applied when element it's initialized
  • config.renderTo DOMElement element on which to render, if not provided, you have to call renderTo manually to render on element (optional, default null)
  • config.xAutoInitElement boolean if true initializeElement won't be called (optional, default false)

Examples

import wrenchSet from 'wrench-set'

class MyClass extends wrenchSet.Element {
    constructor() {
        super({
            className: "my-CSS-Class",
            elementType: "span",
            innerHTML: "Hi it's me :) <b class='my-button'><i>XOX</i></b>",
            renderTo: document.body
        })

        this.on('click', this.onClick.bind(this))
    }

    onClick (e) {
        if (e.getTarget('.my-button'))
            console.log('do something')
    }
}

let myInstance = new MyClass()

Returns Object this

initializeElement

initializes the DOMElement and renders it to the renderTo config provided

Returns undefined initializes element and sets it's default configs

getElement

returns the DOMElement for direct access or if querySelector is passed will return the matching child of the DOMElement

Parameters

• querySelector string css selector to get the child of the element, if not provided, it will return the main element (optional, default null)

Returns DOMElement

renderTo

Parameters

• domElement DOMElement target on which we appendChild

Returns undefined renders the element on whaterver element provided

on

attaches event listener to element, it wraps the event and adds functionalities

Parameters

• eventName string e.g. "click", "touchstart" all the default events
• callback Function your callback where you handle your logic check event.* for more details on the event parameter in the callback
• stdArgs Array all the standard arguments that follow after callback (optional, default [])

Returns undefined

un

detaches event listener from element

Parameters

• eventName string e.g. "click", "touchstart" all the default events

Returns undefined

isDestroyed

if destroy() was called it will return true

Returns boolean

destroy

handles the destruction/removal of listeners and the internal element adds destroyed propery

Returns undefined

event.getTarget

similar to DOMElement.querySelector but instead of propagating from parent to child, it propagates from child to parent

Type: Function

Parameters

• selector string Valid CSS selector

Examples

...
this.on('mousedown', this.onMouseDown.bind(this))
...

...
onMouseDown(e) {
    let cssSelector = '.cls-x'
    let myButton = e.getTarget(cssSelector)

    if (myButton)
        myButton.classList.add('pressed')
}
...

Returns (DOMElement | null)