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.

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