Amazing Competition Selector

Like Barbara Mendes said in a previous publication, we’re currently developing Liga Portugal’s website. One of the most awesome features that we have, is the possibility to view the current week matches, standings and statistics, of the selected competition.

These three componentes are in the homepage, but in different places. So, we need to have a competition selector that follows the user through the entire page. The result was an Amazing Competition Selector, designed by Barbara, shown in the next image.

Amazing Competition Selector

Ok, that’s great, but now I need to make it work. But how? The biggest icon represents the selected competition, so when I selected one of the other two options, I have to change the selector to something like this:

Amazing Competition Selector 2

The selected competition needs to be represented with the biggest icon, and the previous selected competition need to go up and be represented with a smaller icon.

Oh, one more thing, the two top options only open when the mouse is hover the active one or when you click it (for touch devices). And when we choose a new competition, I have to get and show the matches, standings and statistics of the selected competition.

Let’s get started with the interface of the competition selector. The best solution is to have one small button and one big button for each competition, then we show and hide them using javascript. Ok, this is simple, I give each button the id of his competition, and the algorithm is something like:

function setSelectedCompetition(id) {
    $('.btn--fab-container').children().each(function () {
        if (!$(this).hasClass("btn--fab--small")) {
            if ($(this).attr("data-id") == id) {
                $(this).addClass("btn--fab--active");
            } else {
                $(this).removeClass("btn--fab--active");
            }
        } else {
            if ($(this).attr("data-id") == id) {
                $(this).hide();
            } else {
                $(this).show();
            }
        }
    });
}

When a new competition is selected, we hide his small button and make all the others visible, and make the reverse to the bigger buttons.

The interface is done, now we have to update the matches, standings and stats. There is a lot of things that have to be done to update all this data, so we came up with the idea of the competition selector to be a javascript object, witch stores callbacks (https://en.wikipedia.org/wiki/Callback_(computer_programming). We can add as many callback functions has we want, and they will all be executed when the selected competition changes. Like this:

var compSelector = {
    callbacks: $.Callbacks(),
    onChange: function (callback) {
        this.callbacks.add(callback);
    },
    init: function setupCompSelector() {
        //init setup
        $('.btn--fab--small').click(function (event) {
            var idc = $(this).attr("data-id");
            compSelector.callbacks.fire(idc, true);
        });
    }
};
function updateMatches(idc) {
}
function updateStandings(idc) {
}
function updateStats(idc) {
}
compSelector.init();
compSelector.onChange(updateMatches);
compSelector.onChange(updateStandings);
compSelector.onChange(updateStats);

Oh yeah, now we have everything working. But I only tested it in desktop, then I tried it in my phone and…

The problem was that, when I pressed the icon of the selected competition, to open the selector, nothing happens. Then I discovered that something happens, by the way, too much is happening, the selector opens and closes.

To open the selector one of two events have to happen in the selected competition icon, ‘click’ or ‘mouseenter’. In my phone both events are being fired when I click the icon. For some reason this only happens in touch devices, and there is no safe way to find out in javascript if we are dealing with a touch device or not. So, we came up with a simple solution:

$('.btn--fab').mouseenter(function (event) {
      //some logic code
      //unbind the 'click' event
      $(this).unbind('click');
      //wait 500ms and bind again the click event
      setTimeout(function (element) {
            element.bind('click', function () {
               toggleContainter();
            });
         }, 500, $(this));
      }
 });

Debugging we realized that the ‘mouseenter’ event is fired before the ‘click’ event so, when we catch the first event, we unbind the ‘click’ for 500ms. During this time the ‘click’ event is ignored. We tested it and it all worked great!

Now, we present to you, the Amazing Competition Selector!!!!!