Usage

# animateValue

This function displays a transition between a range of numbers in a DOM element

Code

/**
 * This prototype displays a transition between a range of numbers in a DOM element
 * 
 * @param {number} start number to start the count
 * @param {number} end number to end the count
 * @param {string} textBefore text to show before the number
 * @param {string} textAfter text to show after the number 
 */
Element.prototype.animateValue = function animateValue(start, end, textBefore = '', textAfter = ''){
    let current = start;
    let step = end / 70;
    let increment = step;
    let timer = setInterval(() => {
        current += increment;
        this.innerHTML = `${textBefore}${Math.floor(current).toLocaleString('de-DE')}${textAfter}`;
        if (current >= end) {
            clearInterval(timer);
            this.innerHTML = `${textBefore}${end.toLocaleString('de-DE')}${textAfter}`;
        }
    }, 10);
}

# elementTransition

This function make a transition for show or hide a element

Code

const productoList = document.querySelector('#productoList');
var countList = 1;

const addProduct = () => {
    let props = {
        id: `product_${countList}`,
        classList: 'div-transition div-hide',
        hidden: 'hidden'
    }

    let html = transformHTML(`
        <tr>
            <td>Producto ${countList}</td>
            <td>${countList}${countList}${countList}</td>
            <td>
                <button class="btn btn-danger" onclick="deleteRow('${props.id}')">
                    <i class="fa-solid fa-trash-can"></i>
                </button>
            </td>
        </tr>
    `);

    productoList.addRow(html, 'last', props);
    document.querySelector(`#${props.id}`).elementTransition('show');

    countList++;
}

const addManyProduct = () => {
    let props = {
        id: `product_${countList}`,
        classList: 'div-transition div-hide',
        hidden: 'hidden'
    }

    let html = transformHTML(`
        <tr>
            <td>Producto ${countList}</td>
            <td>${countList}${countList}${countList}</td>
            <td>
                <button class="btn btn-danger" onclick="deleteRow('${props.id}')">
                    <i class="fa-solid fa-trash-can"></i>
                </button>
            </td>
        </tr>
    `);

    countList++;

    let props2 = {
        id: `product_${countList}`,
        classList: 'div-transition div-hide',
        hidden: 'hidden'
    }

    let html2 = transformHTML(`
        <tr>
            <td>Producto ${countList}</td>
            <td>${countList}${countList}${countList}</td>
            <td>
                <button class="btn btn-danger" onclick="deleteRow('${props2.id}')">
                    <i class="fa-solid fa-trash-can"></i>
                </button>
            </td>
        </tr>
    `);

    productoList.addRow(html, 'last', props);
    productoList.addRow(html2, 'last', props2);

    let el1 = document.querySelector(`#${props.id}`);
    let el2 = document.querySelector(`#${props2.id}`);

    [el1, el2].elementTransition('show');

    countList++;
}

const clearProducts = () => {
    document.querySelector('#productoList tbody').innerHTML = '';
    countList = 1;
}

const deleteRow = async(id) => {
    let el = document.querySelector(`#${id}`);
    el.elementTransition('hide');

    setTimeout(() => {
        el.deleteRow();
    }, 400);
}

# loadingButton

This function disable a button and displays a custom text next to a spinner based on button text

Code

/** ATTENTION! this function just work with transition.css
 * This prototype disable a button and displays a custom text next to a spinner based on button text
 * 
 * @param {string} action action of button
 * @param {string} text text of button
 */
HTMLButtonElement.prototype.loadingButton = function loadingButton(action, text = null) {
    switch (action) {
        case 'start':
            this.setAttribute('data-btn-text', this.innerHTML);
            this.innerHTML = `<span class="spinner-loading"></span> ${text}`;
            this.disabled = true;
            break;
        case 'stop':
            this.innerHTML = this.getAttribute('data-btn-text');
            this.disabled = false;
            break;
    }
}

HTMLAnchorElement.prototype.loadingButton = function loadingButton(action, text = null) {
    switch (action) {
        case 'start':
            this.setAttribute('data-btn-text', this.innerHTML);
            this.setAttribute('data-href', this.href);
            this.setAttribute('href', 'javascript:;');
            this.innerHTML = `<span class="spinner-loading"></span> ${text}`;
            this.disabled = true;
            break;
        case 'stop':
            this.innerHTML = this.getAttribute('data-btn-text');
            this.href = this.getAttribute('data-href');
            break;
    }
}