Utiles.js

Usage

After you have chosen how you will use it, start by writing UtilesJS(), with that you will be able to use all the functions that it has integrated. Review the documentation to see how to use each of the functions.

Promises

# initPromise

This function initializes a promise.

Code
Example
# fetchDataPromise

This function uses fetch together with a promise with any method.

Code
Example

Arrays

# arrayOrderBy

This function orders an array by string, date or number according to the attribute and in both ascending and descending order.

Code
Example
# arrayGroupBy

This function groups an array by category/attribute. Just work in a new variable.

Code
Example
# arrayFusionByAttribute

This function merges arrays and groups them based on the value of an attribute that matches between them. Just work in a new variable.

Code
Example
# arrayRemoveItemsByIndex

This function removes the elements of an array based on their index, respecting the initial order.

Code
Example

Strings

# capFirstLetter

This function converts the first letter of a string to uppercase.

Code
Example
# addLineBreak

This function generates line breaks based on the number of characters specified.

Code
Example
# validateEmail

This function validates the format of the mail.

Code
Example
@
The email entered is valid!
The email entered is not valid

Numbers

# formatPrice

This function add thousand points to prices.

Code
Example
# roundPrice

This function round prices in base 10.

Code
Example
# discountPrice

This function get the discounted price.

Code
Example

DOM

# getTextOfSelect

This function get the selected option text from a select element.

Code
Example
# getDataOfSelect

This function get the value of an attribute of the selected option of select element.

Code
Example
# getAllDataOfSelect

This function get all attributes values of the selected options of a select element.

Code
Example
# getValuesSelectMultiple

This function get selected options values of a select multiple.

Code
Example
# setValueOfSelect

This function change the value of a select element.

Code
Example
# setValuesSelectMultiple

This function assign values to a select multiple.

Code
Example
# addRowToTable

This function add a row to an HTML table in a designed position.

Code
Example
Column 1 Column 2 Column 3 Column 4 Column 5
Data 1 Data 2 Data 3 Data 4 Data 5
# deleteRowOfTable

This function delete a row from an HTML table.

Code
Example
Column 1 Column 2 Column 3 Column 4 Action
Data 1 Data 2 Data 3 Data 4
Data 5 Data 6 Data 7 Data 8
Data 9 Data 10 Data 11 Data 12
# getParamUrl

This function get a URL parameter.

Code
Example
# setParamUrl

This function adds parameters to the url (this reloads the page to take effect).

Code
Example
# deleteParamUrl

This function removes a parameter from the url (this reloads the page to take effect).

Code
Example
# getHashUrl

This function gets the current hash of the url.

Code
Example
# setHashUrl

This function add a hash in the url.

Code
Example
# deleteHashUrl

This function removes the hash in the url.

Code
Example
# filterPage

This function filters the page using parameters in the url.

Code

/**
 * This function filters the page using parameters in the url
 * 
 * @param {string} elClass filter element class
 * @param {string} page url name of actual page 
 * @param {number} numPage number of page to filter
 */
filterPage: (elClass, page, numPage = null) => {
    const filters = document.querySelectorAll(elClass);
    let url = `${page}?`;

    filters.forEach(element = (element, index) => {
        if(index == 0){
            url += `${element.id}=${element.value}`;
        }

        if(index != 0){
            if(element.id == 'page' && numPage != null){
                url += `&${element.id}=${numPage}`;
            }else{
                url += `&${element.id}=${element.value}`;
            }
        }
    });

    url += `${UtilesJS().getHashUrl()}`;

    window.location.href = url;
}
Example
# listenerInputsFilter

This function filters the page by pressing enter in filter inputs.

Code
Example
# listenerNumberPage

This function filters the page by clicking on the page number (links).

Code
Example
# simulateKeyPress

This function simulates that the user is pressing a key and writes the character in the input.

Code

/**
 * This function simulates that the user is pressing a key and writes the character in the input
 * 
 * @param {string} elementId id of input element
 * @param {string|number} value value to write to input
 */
simulateKeyPress: (elementId, value) => {

    let inputElement = document.querySelector(`#${elementId}`);
    let event = new Event('keypress');
    let text = value.toString();
    let index = 0;

    setInterval(addCharacter, 100);

    function addCharacter() {
        if (index < text.length) {
            var currentChar = text.charAt(index);
            inputElement.value += currentChar;
            inputElement.dispatchEvent(event);
            index++;
        } else {
            clearInterval();
        }
    }
}
Example