Tools

This project contains library of useful javascript functions. Can be used only for es6+ code.

Install

``
npm i -D @brandund/tools
`

Usage

#### 1) Install @brandund/tools in your npm project.
`
npm i -D @brandund/tools
`

#### 2) Import Tools in your code.
`javascript
import * as Tools from '@brandund/tools';
`

$3


for example:
`javascript
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} children - Array of HTML elements
* @return {boolean}

example:
`js
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:
`js
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} elements - Array of HTML elements

example:
`js
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} elements - Array of HTML elements

example:
`js
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:
`js
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:
`js
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:
`js
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:
`js
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:
`js
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:
`js
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:
`js
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:
`js
const parent = document.querySelector('div');

console.log(parent.childElementCount); // For example 2
removeAllChildren(parent);
console.log(parent.childElementCount); // 0
``