Tools
This project contains library of useful javascript functions. Can be used only for es6+ code.
Install
npm i -D @brandund/tools
Usage
@brandund/tools
in your npm
project.
1) Install npm i -D @brandund/tools
Tools
in your code.
2) Import import * as Tools from '@brandund/tools';
3) Use tools!
for example:
const newElement = Tools.createHTMLElement('div', {
'class': ['class1', 'class2', 'class3'],
'data-id': '1234'
});
Documentation
Documentation taken from code.
- appendChildren - This function appends one or more HTML elements (children) to HTML element (parent).
- createHTMLElement - This function creates HTML element.
- addListeners - This function adds event listener on the HTML elements.
- removeListeners - This function removes event listener from the HTML elements.
- dispatchCustomEvent - This function invokes custom event.
- nodeListToArray - This function converts NodeList into an array.
- removeClass - This function removes class from the HTML element.
- addClass - This function adds class to an HTML element.
- post - This function creates and sends POST request.
- get - This function creates and sends GET request.
- monkeyPatch - This function rewrites existing variable of an object. It can rewrite only variables which are type of function.
appendChildren
appendChildren(parent, ...children)
This function appends one or more HTML elements (children) to HTML element (parent).
- @param
{HTMLElement} parent
- HTML parent element - @param
{array<HTMLElement>} children
- Array of HTML elements - @return
{boolean}
example:
const parent = document.body;
const child1 = document.body.querySelector('.class1');
const child2 = document.body.querySelector('.class2');
appendChildren(parent, child1, child2);
createHTMLElement
createHTMLElement(type, specifications = {})
This function creates HTML element.
- @param
{string} type
- Type of HTML element (div, p, a, ...) - @param
{object} specifications
- Object which contains attributes for HTML element (class, name, type, ...) - @return
{HTMLElement}
example:
const newElement = createHTMLElement('div', {
'class': ['class1', 'class2', 'class3'],
'data-id': 'div0001'
});
addListeners
addListeners(event, fn, ...elements)
This function adds event listener on the HTML elements.
- @param
{string} event
- Type of event - @param
{function} fn
- Method which handle event (callback) - @param
{array<HTMLElement>} elements
- Array of HTML elements
example:
const button1 = document.body.querySelector('.class1');
const button2 = document.body.querySelector('.class2');
const showEvent = event => {
console.log(event);
};
addListeners('click', showEvent, button1, button2);
removeListeners
removeListeners(event, fn, ...elements)
This function removes event listener from the HTML elements.
- @param
{string} event
- Type of event - @param
{function} fn
- Method which handle event (callback) - @param
{array<HTMLElement>} elements
- Array of HTML elements
example:
const button1 = document.body.querySelector('.class1');
const button2 = document.body.querySelector('.class2');
const showEvent = event => {
console.log(event);
};
addListener('click', showEvent, button1, button2);
removeListeners('click', showEvent, button1, button2);
dispatchCustomEvent
dispatchCustomEvent(type, data = {})
This function invokes custom event.
- @param
{string} type
- Name of invoked event. - @param
{object} data
- Data which will be sended to an event handler. - @return
{boolean|Error}
example:
addListener('showSomething', e => console.log(e.detail.message), document);
dispatchCustomEvent('showSomething', {message: 'Hello!'});
nodeListToArray
nodeListToArray(array)
This function converts NodeList into an array.
- @param
{object} array
- Nodelist which we want to convert into an array - @return
{array}
example:
const elements = document.querySelectorAll('p');
const elementsInArray = nodeListToArray(elements);
removeClass
removeClass(element, className)
This function removes class from the HTML element.
- @param
{HTMLElement} element
- HTML element. - @param
{string} className
- Class which will be deleted.
example:
const paragraph = document.querySelector('p.paragraph--bold');
removeClass(paragraph, 'paragraph--bold');
addClass
addClass(element, className)
This function adds class to an HTML element.
- @param
{HTMLElement} element
- HTML element. - @param
{string} className
- Class which will be deleted.
example:
const paragraph = document.querySelector('p');
addClass(paragraph, 'paragraph--bold');
post
post(url, config = {})
This function creates and sends POST request.
- @param
{string} url
- Requested url. - @param
{{data: object, resolve: function, reject: function, async: boolean}} config
- Configuration of request. - @return
{XMLHttpRequest}
example:
const config = {
data: {message: 'Hi!'},
resolve: response => console.log(response),
reject: error => console.log(error),
async: true
};
const request = post('www.bachrony.com/something', config);
get
get(url, config = {})
This function creates and sends GET request.
- @param
{string} url
- Requested url. - @param
{{data: object, resolve: function, reject: function, async: boolean}} config
- Configuration of request. - @return
{XMLHttpRequest}
example:
const config = {
resolve: response => console.log(response),
reject: error => console.log(error),
async: true
};
const request = get('www.bachrony.com/something', config);
monkeyPatch
monkeyPatch(object, key, newImplementation)
This function rewrites existing variable of an object. It can rewrite only variables which are type of function.
- @param
{object} object
- Object (path) to variable which will be re-setted. - @param
{string} key
- Name of variable of an object. This variable will be re-setted. - @param
{function} newImplementation
- This function will be new implementation of object[key]. - @returns
{object}
original re-setted object.
example:
const object = XMLHttpRequest.prototype;
const key = 'open';
const oldOpen = monkeyPatch(object, key, function() {
console.log('I am in XMLHttpRequest.open function :-).');
if (oldOpen) {
oldOpen.apply(this, arguments);
}
});
const request = new XMLHttpRequest();
request.open('POST', '/');
removeAllChildren
removeAllChildren(parent)
This function removes all children of HTML node.
- @param {HTMLElement} parent - All children of this element will be removed.
example:
const parent = document.querySelector('div');
console.log(parent.childElementCount); // For example 2
removeAllChildren(parent);
console.log(parent.childElementCount); // 0