Interaction between 3 buttons

Question

This question is the following of that. At initialization of the page, the buttons are not "bridged", and becomes when the user clicks on the blue button with the icon inside.

Conditions :

1. If 2 buttons are bridged (action when clicked on blue button), the other must become bridged (join with numbers around) [this works]

2. After that, if the user clicks on any button, the 3 buttons have to separate from numbers around

I have this HTML code (using Bootstrap 3) :

<div class="col-sm-12 interfacesBridge">
    <h3 class="text-info">Interfaces</h3>

    <div class="col-sm-4">
        <div class="input-group input-group-lg">
            <div class="input-group-btn">
                <button type="button" class="btn btn-default bRLeft" disabled="disabled" style="margin-right: 15px !important;">3</button>
                <button type="button" class="btn btn-info linkInterfaces" data-interfaces="3-4"><i class="fa fa-chain-broken"></i></button>
                <button type="button" class="btn btn-default bRRight" disabled="disabled" style="margin-left: 15px !important;">4</button>
            </div>
        </div>
    </div>

    <div class="col-sm-4">
        <div class="input-group input-group-lg">
            <div class="input-group-btn">
                <button type="button" class="btn btn-default bRLeft" disabled="disabled" style="margin-right: 15px !important;">3</button>
                <button type="button" class="btn btn-info linkInterfaces" data-interfaces="3-5"><i class="fa fa-chain-broken"></i></button>
                <button type="button" class="btn btn-default bRRight" disabled="disabled" style="margin-left: 15px !important;">5</button>
            </div>
        </div>
    </div>

    <div class="col-sm-4">
        <div class="input-group input-group-lg">
            <div class="input-group-btn">
                <button type="button" class="btn btn-default bRLeft" disabled="disabled" style="margin-right: 15px !important;">4</button>
                <button type="button" class="btn btn-info linkInterfaces" data-interfaces="4-5"><i class="fa fa-chain-broken"></i></button>
                <button type="button" class="btn btn-default bRRight" disabled="disabled" style="margin-left: 15px !important;">5</button>
            </div>
        </div>
    </div>
</div>

And this jQuery code :

function setBridged(selector) {
    selector.addClass('bridged');
    selector.prev().animate({'marginRight': '0', 'marginLeft': '15px'}, 1000);
    selector.next().animate({'marginLeft': '0'}, 1000);
    selector.find('i').removeClass().addClass('fa fa-link');
}

function unsetBridged(selector) {
    selector.removeClass('bridged');
    selector.prev().animate({'marginRight': '15px', 'marginLeft': '0'}, 1000);
    selector.next().animate({'marginLeft': '15px'}, 1000);
    selector.find('i').removeClass().addClass('fa fa-chain-broken');
}

$(document).ready(function () {

    $('.linkInterfaces').click(function () {
        if ($(this).find('i').hasClass('fa-chain-broken')) {
            setBridged($(this));
        } else {
            unsetBridged($(this));                    
        }

        if ($('.interfacesBridge .bridged').length >= 2) {
            $('.linkInterfaces:not(.bridged)').trigger('click', function() {
                setBridged($(this));
            });
        }
    });

});

I tried many things to get there, but that's me stuck.

Please see the jsfiddle associated.

Answer 1

After observing the conditions, the click event's trigger timing is:

1. When something bridged, if there's more than 2 (include self), then bridge every one that is not bridge yet.

2. When something unbridged, if there's still more than 2 bridged, which means prev state is all bridged, unbridge all.

So you can change the logic to:

$('.linkInterfaces').click(function () {
    if ($(this).find('i').hasClass('fa-chain-broken')) {
        //targetFunc = setBridged;
        setBridged($(this));
        if ($('.interfacesBridge .bridged').length >= 2) {
            $('.linkInterfaces:not(.bridged)').trigger('click');
        }
    } else {
        unsetBridged($(this));           
        if ($('.interfacesBridge .bridged').length >= 2) {
            $('.interfacesBridge .bridged').trigger('click');
        }
    }
});

Altered jsfiddle.

It's also possible to extract the logic out in this case, but note if the condition to bridge/unbridge all becomes different(e.g: >= 2 to bridge, <= 1 to unbridge), than the first one would be better to separate the logic.

$('.linkInterfaces').click(function () {
    var relatedTargets;
    if ($(this).find('i').hasClass('fa-chain-broken')) {
        setBridged($(this));
        relatedTargets = '.linkInterfaces:not(.bridged)';
    } else {
        unsetBridged($(this));           
        relatedTargets = '.linkInterfaces.bridged';
    }

    // When bridged element is more than 2 when clicked, we need to either link all, or unlink all.
    if ($('.interfacesBridge .bridged').length >= 2) {
        $(relatedTargets).trigger('click');
    }
});

And note the .trigger's 2nd or later params would be passed to event handler, but won't trigger, so in your original code, that passed in function won't take effect unless you call it in your event handler.