Tab grouping

by Silvestrs Kante

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/1.3.1/lodash.min.js"></script>
<div>
    <input data-tabgroup="first" data-tabgroupindex="1" />
    <input data-tabgroup="first" data-tabgroupindex="2" />
    <input data-tabgroup="first" data-tabgroupindex="3" />
    <input data-tabgroup="first" data-tabgroupindex="4" />
</div>
<div>
    <input data-tabgroup="second" data-tabgroupindex="1" />
    <input data-tabgroup="second" data-tabgroupindex="3" />
    <input data-tabgroup="second" data-tabgroupindex="2" />
    <input data-tabgroup="second" data-tabgroupindex="4" />
</div>

CSS

div {
    width: 300px;
    border: 1px solid black;
    margin: 10px;
}
input {
    display: inline-block;
}

JavaScript

console.clear();

function isNumber(n) {
    return !isNaN(parseFloat(n)) && isFinite(n);
}
$(document).on('keydown', '[data-tabgroup]', function (e) {
    // TODO
    // Get elements tabgroup [DONE]
    // Find element position by tabgroupindex
    // Check if pressed shift+tab or tab
    // Check if it's first or the last element
    // Check which is next element to focus
    // Focus appropriate element
    
    if (e.which === 9) {
        
        var indexNode = $(e.target);
        var nodeIndex = indexNode.data("tabgroupindex");
        var tabgroup = indexNode.data("tabgroup");
        var tabgroupNodes = $("[data-tabgroup='" + tabgroup + "']");
        var tabgroupIndexes = [];
        _.each(tabgroupNodes, function (item) {
            tabgroupIndexes.push(+$(item).data("tabgroupindex"));
        });
        tabgroupIndexes = _(tabgroupIndexes).compact()
            .sortBy(function (num) {
            return num;
        }).value();
        if (isNumber(nodeIndex)) {
            if (e.which === 9) if (e.shiftKey) {
                var nextElement = tabgroupIndexes[tabgroupIndexes.indexOf(nodeIndex) - 1];
                if (typeof(nextElement) === "undefined") {
                    $("[data-tabgroup='" + tabgroup + "'][data-tabgroupindex='" + tabgroupIndexes[tabgroupIndexes.length - 1] + "']").focus();
                    console.log($("[data-tabgroup='" + tabgroup + "'][data-tabgroupindex='" + tabgroupIndexes[tabgroupIndexes.length - 1] + "']").get(0));
                } else {
                    $("[data-tabgroup='" + tabgroup + "'][data-tabgroupindex='" + nextElement + "']").focus();
                }
            } else {
                
                var nextElement = tabgroupIndexes[tabgroupIndexes.indexOf(nodeIndex) + 1];
                
                if (typeof(nextElement) === "undefined") {
                    console.log("Im in ")
                    $("[data-tabgroup='" + tabgroup + "'][data-tabgroupindex='" + tabgroupIndexes[0] +...