Feat(front): Make columns movable and further configurable

[dd84ai]

feature requester:

Wildkins — 07/09/2024 6:17 PM let me move the internal nickname column over

• Create openable menu where all columns are listed.
  • For each column u can disable column off
  • Set a different order number
  • Resizing capabilities?
  • Persist choices in session storage? Have button to reset then too

Perhaps swapping code will be useful for that?

/**
 * Swap any nodes, not siblings, not adjecent siblings, no temp nodes, no cloning, no jquery... IE9+
 * @param {HTMLElement} n1
 * @param {HTMLElement} n2
 */
function swapNodes(nodeA, nodeB) {

    const parentA = nodeA.parentNode;
    const siblingA = nodeA.nextSibling === nodeB ? nodeA : nodeA.nextSibling;

    // Move `nodeA` to before the `nodeB`
    nodeB.parentNode.insertBefore(nodeA, nodeB);

    // Move `nodeB` to before the sibling of `nodeA`
    parentA.insertBefore(nodeB, siblingA);
}

/**
 * @param {HTMLElement} arrow
 */
function swapColumnLeft(arrow, event) {
    swapColumns(arrow, -1);
    event.stopPropagation(); // prevent default
}

/**
 * @param {HTMLElement} arrow
 */
function swapColumnRight(arrow, event) {
    swapColumns(arrow, 1);
    event.stopPropagation(); // prevent default
}

var functionLock = false;

/** 
 * @param {HTMLElement} arrow
 * @param {number} shift
 */
function swapColumns(arrow, shift) {
    /* arrow = document.querySelector("#table-top-main table th"); */
    // 

    if (functionLock) {
        return
    } else {
        functionLock = true
    }

    let th = arrow.closest("th");
    let ths = document.querySelectorAll("#table-top-main table th");

    let ths_index = Array.prototype.indexOf.call(ths, th);

    let extra_shift = 0; // to skip none values
    let shift_vector = shift; // always -1 or +1
    try {
        while (ths[ths_index + shift + extra_shift].style.display == "none") {
            extra_shift = extra_shift + shift_vector;
        }
    }
    catch (err) {
        console.log("failed getting extra_shift")
        console.log(err)
    }

    swapNodes(ths[ths_index + shift + extra_shift], ths[ths_index]);

    const rows = document.querySelectorAll("#table-top-main table tbody tr");
    let index = ths_index;

    if (shift > 0) {
        for (const row of rows) {
            swapNodes(row.children[index + shift + extra_shift], row.children[index]);
        }
    } else {
        for (const row of rows) {
            swapNodes(row.children[index], row.children[index + shift + extra_shift]);
        }
    }

    functionLock = false
}

[dd84ai]

Sounds like too much javascript effort perhaps for some fragile functionality. With through column size optimizations i think it is not necessary feature.

[dd84ai]

At least we can offer hide button that just hides the text in curret column, that will lead to it being minimized. Hide cell and column text and leave button to unhide

At least do hiding

[dd84ai]

https://github.com/darklab8/fl-darkstat/issues/48 will be done by me