Skip to content
  • 13 Votes
    30 Posts
    1k Views

    Here’s a small modification to the chatBanner function that will place the message just above the composer/reply component meaning it is pinned at the bottom and always in view as a reminder. I’ve made this change to support the threadedChat I’m currently developing

    // Chat message banner function chatBanner() { var roomName = $("h5[component='chat/header/title']").text().trim(); var bannerContent; if (roomName === "Testing 3") { bannerContent = '<div id="chatbanner">This message will fire for chat rooms with the title of "Testing 3"</div>'; } else { bannerContent = '<div id="chatbanner">This session is for <strong>private discussion only</strong> between the chosen participants. Please do <strong>not</strong> place support requests here and create a <a href="#" onclick="app.newTopic();">new topic</a> instead.</div>'; } var chatMessagesContainer = $('[component="chat/system-message"]:last-of-type'); //var existingMessages = $('[component="chat/message"]'); var existingMessages = $('[component="chat/composer"]'); if (existingMessages.length === 0) { // If there are no messages, append the banner to the messages container chatMessagesContainer.first().after(bannerContent); } else { // If there are messages, add the banner after the last message // existingMessages.last().after(bannerContent); existingMessages.before(bannerContent); } }

    There are only two changes here:

    var existingMessages = $('[component="chat/message"]');

    becomes

    var existingMessages = $('[component="chat/composer"]');

    and

    existingMessages.last().after(bannerContent);

    becomes

    existingMessages.before(bannerContent);