Custom events

by Kenneth Luplau-Brøgger

HTML

<div class="login-status">
    Status: <span class="status"></span><br>
    Time: <span class="time"></span>
</div>
<input type="submit" value="Change login status" />

JavaScript

window.loginSession = {
    status: true,
    statusChange: new Date()
}

$(document).on('session ready', function(event, eventdata) {
    $.extend(loginSession, loginSession, eventdata); //Merge objects

    $(".login-status .status").text(loginSession.status);
    $(".login-status .time").text(loginSession.statusChange);
});

window.logout = function() {
    $(document).trigger('session', {
        status: false,
        statusChange: new Date()        
    });
};
window.login = function() {
    $(document).trigger('session', {
        status: true,
        statusChange: new Date()        
    });
};
    
$("input").on("click", function() {
    if (loginSession.status) {
        logout();
    } else {
        login();
    }
});