Titan/titanembeds/static/js/embed.js

/* global $ */
/* global Materialize */
/* global Mustache */
/* global guild_id */
/* global bot_client_id */
/* global moment */

var logintimer; // timer to keep track of user inactivity after hitting login
var fetchtimeout; // fetch routine timer
var last_message_id; // last message tracked
var selected_channel = guild_id; // user selected channel, defaults to #general channel

function element_in_view(element, fullyInView) {
    var pageTop = $(window).scrollTop();
    var pageBottom = pageTop + $(window).height();
    var elementTop = $(element).offset().top;
    var elementBottom = elementTop + $(element).height();

    if (fullyInView === true) {
        return ((pageTop < elementTop) && (pageBottom > elementBottom));
    } else {
        return ((elementTop <= pageBottom) && (elementBottom >= pageTop));
    }
}

function query_guild() {
    var funct = $.ajax({
        dataType: "json",
        url: "/api/query_guild",
        data: {"guild_id": guild_id}
    });
    return funct.promise();
}

function create_authenticated_user() {
    var funct = $.ajax({
        method: "POST",
        dataType: "json",
        url: "/api/create_authenticated_user",
        data: {"guild_id": guild_id}
    });
    return funct.promise();
}

function create_unauthenticated_user(username) {
    var funct = $.ajax({
        method: "POST",
        dataType: "json",
        url: "/api/create_unauthenticated_user",
        data: {"username": username, "guild_id": guild_id}
    });
    return funct.promise();
}

function fetch(channel_id, after=null) {
    var funct = $.ajax({
        method: "GET",
        dataType: "json",
        url: "/api/fetch",
        data: {"guild_id": guild_id,"channel_id": channel_id, "after": after}
    });
    return funct.promise();
}

function post(channel_id, content) {
    var funct = $.ajax({
        method: "POST",
        dataType: "json",
        url: "/api/post",
        data: {"guild_id": guild_id, "channel_id": channel_id, "content": content}
    });
    return funct.promise();
}

$(function(){
    $("#loginmodal").modal({
        dismissible: false, // Modal can be dismissed by clicking outside of the modal
        opacity: .5, // Opacity of modal background
        inDuration: 300, // Transition in duration
        outDuration: 200, // Transition out duration
        startingTop: '4%', // Starting top style attribute
        endingTop: '10%', // Ending top style attribute
      }
    );

    var guild = query_guild();
    guild.fail(function() {
        $('#loginmodal').modal('open');
    });

    guild.done(function(data) {
        initialize_embed(data);
        //$('#loginmodal').modal('open');
    });
});

function lock_login_fields() {
    $("#loginProgress").show();
    $("#discordlogin_btn").attr("disabled",true);
    $("#custom_username_field").prop("disabled",true);
    logintimer = setTimeout(function() {
        unlock_login_fields();
    }, 60000);
}

function unlock_login_fields() {
    $("#loginProgress").hide();
    $("#discordlogin_btn").attr("disabled",false);
    $("#custom_username_field").prop("disabled",false);
    clearTimeout(logintimer);
}

function initialize_embed(guildobj) {
    $('#loginmodal').modal('close');
    unlock_login_fields();
    if (guildobj === undefined) {
        var guild = query_guild();
        guild.done(function(data) {
            prepare_guild(data);
        });
    } else {
        prepare_guild(guildobj);
    }
}

function prepare_guild(guildobj) {
    fill_channels(guildobj.channels);
    fill_discord_members(guildobj.discordmembers);
    fill_authenticated_users(guildobj.embedmembers.authenticated);
    fill_unauthenticated_users(guildobj.embedmembers.unauthenticated);
    run_fetch_routine();
}

function fill_channels(channels) {
    var template = $('#mustache_channellistings').html();
    Mustache.parse(template);
    $("#channels-list").empty();
    for (var i = 0; i < channels.length; i++) {
        var chan = channels[i];
        if (chan.read) {
          var rendered = Mustache.render(template, {"channelid": chan.channel.id, "channelname": chan.channel.name});
          $("#channels-list").append(rendered);
          if (chan.channel.id == selected_channel) {
            if (chan.write) {
              $("#messagebox").prop('disabled', false);
              $("#messagebox").prop('placeholder', "Enter message");
            } else {
              $("#messagebox").prop('disabled', true);
              $("#messagebox").prop('placeholder', "Messages is disabled in this channel.");
            }
            $("#channeltopic").text(chan.channel.topic);
          }
        }
    }
    $("#channel-"+selected_channel).parent().addClass("active");
}

function mention_member(member_id) {
  if (!$('#messagebox').prop('disabled')) {
    $('#messagebox').val( $('#messagebox').val() + "[@" + member_id + "] " );
    $('.button-collapse').sideNav('hide');
    $("#messagebox").focus();
  }
}

function fill_discord_members(discordmembers) {
    var template = $('#mustache_authedusers').html();
    Mustache.parse(template);
    $("#discord-members").empty();
    for (var i = 0; i < discordmembers.length; i++) {
        var member = discordmembers[i];
        var rendered = Mustache.render(template, {"id": member.id.toString() + "d", "username": member.username, "avatar": member.avatar_url});
        $("#discord-members").append(rendered);
        $( "#discorduser-" + member.id.toString() + "d").click({"member_id": member.id.toString()}, function(event) {
          mention_member(event.data.member_id);
        });
    }
}

function fill_authenticated_users(users) {
    var template = $('#mustache_authedusers').html();
    Mustache.parse(template);
    $("#embed-discord-members").empty();
    for (var i = 0; i < users.length; i++) {
        var member = users[i];
        var rendered = Mustache.render(template, {"id": member.id.toString() + "a", "username": member.username, "avatar": member.avatar_url});
        $("#embed-discord-members").append(rendered);
        $( "#discorduser-" + member.id.toString() + "a").click({"member_id": member.id.toString()}, function(event) {
          mention_member(event.data.member_id);
        });
    }
}

function fill_unauthenticated_users(users) {
    var template = $('#mustache_unauthedusers').html();
    Mustache.parse(template);
    $("#embed-unauth-users").empty();
    for (var i = 0; i < users.length; i++) {
        var member = users[i];
        var rendered = Mustache.render(template, {"username": member.username, "discriminator": member.discriminator});
        $("#embed-unauth-users").append(rendered);
    }
}

function wait_for_discord_login() {
    _wait_for_discord_login(0);
}

function _wait_for_discord_login(index) {
    setTimeout(function() {
        var usr = create_authenticated_user();
        usr.done(function(data) {
            initialize_embed();
            return;
        });
        usr.fail(function(data) {
            if (data.status == 403) {
                Materialize.toast('Authentication error! You have been banned.', 10000);
            } else if (index < 10) {
                _wait_for_discord_login(index + 1);
            }
        });
    }, 5000);
}

function select_channel(channel_id) {
    if (selected_channel != channel_id) {
        selected_channel = channel_id;
        last_message_id = null;
        $("#channels-list > li.active").removeClass("active");
        $("#channel-"+selected_channel).parent().addClass("active");
        clearTimeout(fetchtimeout);
        run_fetch_routine();
    }
}

function replace_message_mentions(message) {
    var mentions = message.mentions;
    for (var i = 0; i < mentions.length; i++) {
        var mention = mentions[i];
        message.content = message.content.replace(new RegExp("<@" + mention.id + ">", 'g'), "@" + mention.username + "#" + mention.discriminator);
        message.content = message.content.replace(new RegExp("<@!" + mention.id + ">", 'g'), "@" + mention.username + "#" + mention.discriminator);
        message.content = message.content.replace("<@&" + guild_id + ">", "@everyone");
    }
    return message;
}

function getPosition(string, subString, index) {
   return string.split(subString, index).join(subString).length;
}

function format_bot_message(message) {
    if (message.author.id == bot_client_id && (message.content.includes("**") && ( (message.content.includes("<")&&message.content.includes(">")) || (message.content.includes("[") && message.content.includes("]")) ))) {
        var usernamefield = message.content.substring(getPosition(message.content, "**", 1)+3, getPosition(message.content, "**", 2)-1);
        message.content = message.content.substring(usernamefield.length+7);
        message.author.username = usernamefield.split("#")[0];
        message.author.discriminator = usernamefield.split("#")[1];
    }
    return message;
}

function parse_message_time(message) {
    var mome = moment(message.timestamp);
    message.formatted_timestamp = mome.toDate().toString();
    message.formatted_time = mome.format("h:mm A");
    return message;
}

function parse_message_attachments(message) {
    for (var i = 0; i < message.attachments.length; i++) {
        var attach = "";
        if (message.content.length != 0) {
            attach = " ";
        }
        attach += message.attachments[i].url;
        message.content += attach;
    }
    return message;
}

function handle_last_message_mention() {
    var lastmsg = $("#chatcontent p:last-child");
    var content = lastmsg.text().toLowerCase();
    var username_discrim = $("#currentusername").text().toLowerCase();
    if (content.includes("@everyone") || content.includes("@" + username_discrim)) {
        lastmsg.css( "color", "#ff5252" );
        lastmsg.css( "font-weight", "bold" );
    }
}

function escapeHtml(unsafe) { /* http://stackoverflow.com/questions/6234773/can-i-escape-html-special-chars-in-javascript */
    return unsafe
         .replace(/&/g, "&amp;")
         .replace(/</g, "&lt;")
         .replace(/>/g, "&gt;")
         .replace(/"/g, "&quot;")
         .replace(/'/g, "&#039;");
 }
 
function nl2br (str, is_xhtml) {   /* http://stackoverflow.com/questions/2919337/jquery-convert-line-breaks-to-br-nl2br-equivalent/ */
    var breakTag = (is_xhtml || typeof is_xhtml === 'undefined') ? '<br />' : '<br>';    
    return (str + '').replace(/([^>\r\n]?)(\r\n|\n\r|\r|\n)/g, '$1'+ breakTag +'$2');
}

function fill_discord_messages(messages, jumpscroll) {
    if (messages.length == 0) {
        return last_message_id;
    }
    var last = 0;
    var template = $('#mustache_usermessage').html();
    Mustache.parse(template);
    for (var i = messages.length-1; i >= 0; i--) {
        var message = messages[i];
        message = replace_message_mentions(message);
        message = format_bot_message(message);
        message = parse_message_time(message);
        message = parse_message_attachments(message);
        var rendered = Mustache.render(template, {"id": message.id, "full_timestamp": message.formatted_timestamp, "time": message.formatted_time, "username": message.author.username, "discriminator": message.author.discriminator, "content": nl2br(escapeHtml(message.content))});
        $("#chatcontent").append(rendered);
        last = message.id;
        handle_last_message_mention();
    }
    $("html, body").animate({ scrollTop: $(document).height() }, "slow");
    $('#chatcontent').linkify({
        target: "_blank"
    });
    return last;
}

function run_fetch_routine() {
    var channel_id = selected_channel;
    var fet;
    var jumpscroll;
    if (last_message_id == null) {
        $("#chatcontent").empty();
        fet = fetch(channel_id);
        jumpscroll = true;
    } else {
        fet = fetch(channel_id, last_message_id);
        jumpscroll = element_in_view($('#discordmessage_'+last_message_id), true);
    }
    fet.done(function(data) {
        var status = data.status;
        update_embed_userchip(status.authenticated, status.avatar, status.username, status.user_id, status.discriminator);
        last_message_id = fill_discord_messages(data.messages, jumpscroll);
        if (status.manage_embed) {
            $("#administrate_link").show();
        } else {
            $("#administrate_link").hide();
        }
        var guild = query_guild();
        guild.done(function(guildobj) {
            fill_channels(guildobj.channels);
            fill_discord_members(guildobj.discordmembers);
            fill_authenticated_users(guildobj.embedmembers.authenticated);
            fill_unauthenticated_users(guildobj.embedmembers.unauthenticated);
            fetchtimeout = setTimeout(run_fetch_routine, 5000);
        });
    });
    fet.fail(function(data) {
        if (data.status == 403) {
            $('#loginmodal').modal('open');
            Materialize.toast('Authentication error! You have been disconnected by the server.', 10000);
        } else if (data.status == 401) {
            $('#loginmodal').modal('open');
            Materialize.toast('Session expired! You have been logged out.', 10000);
        }
    });
    fet.catch(function(data) {
      if (!(data.status != 403 || data.status != 401)) {
          fetchtimeout = setTimeout(run_fetch_routine, 10000);
      }
    });
}

function update_embed_userchip(authenticated, avatar, username, userid, discrim=null) {
    if (authenticated) {
        $("#currentuserimage").show();
        $("#currentuserimage").attr("src", avatar);
        $("#currentusername").text(username + "#" + discrim);
    } else {
        $("#currentuserimage").hide();
        $("#currentusername").text(username + "#" + userid);
    }
}

$("#discordlogin_btn").click(function() {
    lock_login_fields();
    wait_for_discord_login();
});

$("#custom_username_field").keyup(function(event){
    if (event.keyCode == 13) {
        if (!(new RegExp(/^[a-z\d\-_\s]+$/i).test($(this).val()))) {
            Materialize.toast('Illegal username provided! Only alphanumeric, spaces, dashes, and underscores allowed in usernames.', 10000);
            return;
        }
        if($(this).val().length >= 2 && $(this).val().length <= 32) {
            lock_login_fields();
            var usr = create_unauthenticated_user($(this).val());
            usr.done(function(data) {
                initialize_embed();
            });
            usr.fail(function(data) {
                if (data.status == 429) {
                    Materialize.toast('Sorry! You are allowed to log in as a guest once every 15 minutes.', 10000);
                } else if (data.status == 403) {
                    Materialize.toast('Authentication error! You have been banned.', 10000);
                } else if (data.status == 406) {
                    Materialize.toast('Illegal username provided! Only alphanumeric, spaces, dashes, and underscores allowed in usernames.', 10000);
                }
                unlock_login_fields();
            })
        }
    }
});

$("#messagebox").keyup(function(event){
    if ($(this).val().length == 1) {
        $(this).val($.trim($(this).val()));
    }
    if(event.keyCode == 13 && $(this).val().length >= 1 && $(this).val().length <= 350) {
        $(this).val($.trim($(this).val()));
        $(this).blur();
        $("#messagebox").attr('readonly', true);
        var funct = post(selected_channel, $(this).val());
        funct.done(function(data) {
            $("#messagebox").val("");
            clearTimeout(fetchtimeout);
            run_fetch_routine();
        });
        funct.fail(function(data) {
            Materialize.toast('Failed to send message.', 10000);
        });
        funct.catch(function(data) {
            if (data.status == 429) {
                Materialize.toast('You are sending messages too fast! 1 message per 10 seconds', 10000);
            }
        });
        funct.always(function() {
            $("#messagebox").attr('readonly', false);
        })
    }
});

$('#guild-btn').sideNav({
    menuWidth: 300, // Default is 300
    edge: 'left', // Choose the horizontal origin
    closeOnClick: true, // Closes side-nav on <a> clicks, useful for Angular/Meteor
    draggable: true // Choose whether you can drag to open on touch screens
}
);

$('#members-btn').sideNav({
    menuWidth: 300, // Default is 300
    edge: 'right', // Choose the horizontal origin
    draggable: true // Choose whether you can drag to open on touch screens
}
);