README
Table of Contents
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
Objectconfig.elementType
string type of node we are going to be (optional, default"div"
)config.className
string class names the self element will takeconfig.innerHTML
string HTML that will be applied when element it's initializedconfig.renderTo
DOMElement element on which to render, if not provided, you have to call renderTo manually to render on element (optional, defaultnull
)config.xAutoInitElement
boolean if true initializeElement won't be called (optional, defaultfalse
)
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, defaultnull
)
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 eventscallback
Function your callback where you handle your logic check event.* for more details on the event parameter in the callbackstdArgs
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)