DRAFT of sms style forum chat for forumotion

fa-sms-chat.js

(function() {
  window.faSMS = {

    // general config
    config : {
      chat_category : '', // specify category e.g. '/c1-category' or leave empty '' for all index forums
      group_title : 'Select a Group', // initial title
      embed : '', // selector of element that you want to embed the chat app into. e.g. #wrap, #my-custom-element, etc..

      refresh : 5000,
      timeout : 10*60*1000,

      ignore_announcements : false,
      ignore_firstpost : true,

      no_avatar : 'https://illiweb.com/fa/invision/pp-blank-thumb.png',
      no_name : 'Anon'
    },


    // toggles the chat
    toggleChat : function () {
      if (faSMS.cache.chat.dataset.hidden == 'true') {
        faSMS.cache.chat.dataset.hidden = false;
        faSMS.getCategory();

      } else {
        faSMS.cache.chat.dataset.hidden = true;
      }
    },


    // gets the designated chat_category
    getCategory : function () {
      faSMS.cache.title.querySelector('.faSMS-back').style.display = 'none';
      faSMS.cache.title.querySelector('.faSMS-maintitle').innerText = faSMS.config.group_title;
      faSMS.cache.content.innerHTML = '<p class="faSMS-loading">Getting groups...</p>';

      $.get(faSMS.config.chat_category || '/forum', function (data) {
        var forums = $('a.forumtitle', data),
            i = 0,
            j = forums.length,
            html = '',
            row, avatar, date;

        for (; i < j; i++) {
          row = $(forums[i]).closest(faSMS.selector.row)[0];
          avatar = $('.lastpost-avatar img', row)[0];
          date = $(faSMS.selector.row_date, row)[0];

          html +=
          '<a class="faSMS-chat" href="' + forums[i].href + '?view=newest" onclick="faSMS.openForum(this); return false;">'+
            '<span class="faSMS-chat-avatar">'+
              '<img src="' + ( avatar ? avatar.src : faSMS.config.no_avatar ) + '" alt="avatar">'+
            '</span>'+

            '<span class="faSMS-chat-title">' + forums[i].innerText + '</span>'+

            '<span class="faSMS-chat-date">' + ( date ? date.innerText : '' ) + '</span>'+
          '</a>';
        }

        faSMS.cache.content.innerHTML = html;
        faSMS.cache.actions.innerHTML = '';
      });
    },


    // opens the selected forum to view its topics
    openForum : function (forum) {
      if (forum) {
        faSMS.activeForum = forum.cloneNode(true);
      }

      var back = faSMS.cache.title.querySelector('.faSMS-back');
      back.style.display = '';
      back.href = 'javascript:faSMS.getCategory();';

      faSMS.cache.title.querySelector('.faSMS-maintitle').innerText = (forum || faSMS.activeForum).querySelector('.faSMS-chat-title').innerText;
      faSMS.cache.content.innerHTML = '<p class="faSMS-loading">Getting chats...</p>';

      $.get((forum || faSMS.activeForum).href, function (data) {
        var chats = $('a.topictitle', data),
            i = 0,
            j = chats.length,
            html = '',
            row, avatar, date;

        for (; i < j; i++) {
          row = $(chats[i]).closest(faSMS.selector.row)[0];
          avatar = $('.lastpost-avatar img', row)[0];
          date = $(faSMS.selector.row_date, row)[0];

          html +=
          '<a class="faSMS-chat" href="' + chats[i].href + '?view=newest" onclick="faSMS.openChat(this); return false;">'+
            '<span class="faSMS-chat-avatar">'+
              '<img src="' + ( avatar ? avatar.src : faSMS.config.no_avatar ) + '" alt="avatar">'+
            '</span>'+

            '<span class="faSMS-chat-title">' + chats[i].innerText + '</span>'+

            '<span class="faSMS-chat-date">' + ( date ? date.innerText : '' ) + '</span>'+
          '</a>';
        }

        faSMS.cache.content.innerHTML = html;
        faSMS.cache.actions.innerHTML = '';
      });
    },


    // opens the selected chat
    openChat : function (topic) {
      var back = faSMS.cache.title.querySelector('.faSMS-back');
      back.style.display = '';
      back.href = 'javascript:faSMS.openForum();';

      faSMS.cache.title.querySelector('.faSMS-maintitle').innerText = topic.querySelector('.faSMS-chat-title').innerText;
      faSMS.cache.content.innerHTML = '<p class="faSMS-loading">Getting messages...</p>';

      $.get(topic.href, function (data) {
        var posts = $('.post', data),
            form = $('form[action="/post"]', data),
            i = 0,
            j = posts.length,
            html = '',
            avatar, date, name, msg;

        for (; i < j; i++) {
          avatar = $(faSMS.selector.post_avatar, posts[i])[0];
          name = $(faSMS.selector.post_name, posts[i])[0];
          name = name ? name.innerText : faSMS.config.no_name;
          date = $(faSMS.selector.post_date, posts[i])[0];
          msg = $(faSMS.selector.post_message, posts[i])[0];

          html +=
          '<div class="faSMS-msg' + ( name == _userdata.username ? ' faSMS-my-msg' : '' ) + '">'+
            '<span class="faSMS-msg-avatar">'+
              '<img src="' + ( avatar ? avatar.src : faSMS.config.no_avatar ) + '" alt="avatar">'+
            '</span>'+

            '<div class="faSMS-msg-box">'+
              '<span class="faSMS-msg-name">' + name + '</span>'+

              '<p class="faSMS-msg-content">' + faSMS.cleanMessage( msg ? msg.innerHTML : '' ) + '</p>'+

              '<span class="faSMS-msg-date">' + ( date ? date.innerText : '' ) + '</span>'+
            '</div>'+
          '</div>';
        }

        faSMS.cache.content.innerHTML = html + '</div>';
        faSMS.cache.actions.innerHTML =
        '<button id="faSMS-attachment" type="button"><i class="fa fa-paperclip"></i></button>'+
        '<button id="faSMS-emoji" type="button"><i class="fa fa-smile-o"></i></button>'+
        '<input id="faSMS-msg" type="text" placeholder="enter message" onkeyup="faSMS.validate(this.value);">'+
        '<button id="faSMS-send" type="button" onclick="faSMS.send();" data-disabled="true"><i class="fa fa-paper-plane"></i></button>'+
        '<div style="display:none;">' + ( form ? form.innerHTML : '' ) + '</div>';
      });
    },


    // validate a message to make sure that sending it is okay
    validate : function (message) {
      var send = faSMS.cache.actions.querySelector('#faSMS-send');

      if (message && send.dataset.disabled == 'true') {
        send.dataset.disabled = false;

      } else if (!message && send.dataset.disabled == 'false') {
        send.dataset.disabled = true;
      }
    },


    // send a message to the topic
    send : function () {

    },


    // clean message content and strip unnecessary data
    cleanMessage : function (string) {
      return string.replace(/<blockquote>[\s\S]*?<\/blockquote>|<dl class="codebox.*?">[\s\S]*?<\/dl>/g, '')
                   .replace(/<br>/g, '\n')
                   .replace(/^\n+|\n+$|^\s+|\s+$/g, '')
                   .replace(/\n/g, '<br>');
    },


    // initial setup of faSMS
    init : function () {
      var initialized = false;

      // builds the necessary chat elements
      function build () {
        if (!_userdata.session_logged_in) {
          return;
        }

        var button = document.createElement('A'),
            chat = document.createElement('DIV'),
            frag = document.createDocumentFragment();

        chat.id = 'faSMS';
        chat.className = faSMS.config.embed ? 'faSMS-embeded' : '';
        chat.dataset.hidden = faSMS.config.embed ? false : true;
        chat.innerHTML =
        '<div id="faSMS-toolbar">'+
          '<a class="faSMS-back" style="display:none">&lt;</a>'+
          '<h1 class="faSMS-maintitle"></h1>'+
       '</div>'+
       '<div id="faSMS-content"></div>'+
       '<div id="faSMS-actions"></div>';
       frag.appendChild(chat);

        if (!faSMS.config.embed) {
          button.id = 'faSMS-button';
          button.innerHTML = 'Chat';
          button.onclick = faSMS.toggleChat;
          frag.appendChild(button);
        }

        // cache nodes
        faSMS.cache = {
          button : button,
          chat : chat,
          title : chat.querySelector('#faSMS-toolbar'),
          content : chat.querySelector('#faSMS-content'),
          actions : chat.querySelector('#faSMS-actions')
        };

        // set forum version
        faSMS.fVersion = $('.bodylinewidth')[0] ? 0 :
                      $('#phpbb #wrap')[0] ? 1 :
                      $('div.pun')[0] ? 2 :
                      document.getElementById('ipbwrapper') ? 3 :
                      document.getElementById('fa_edge') ? 4 :
                      document.getElementById('modernbb') ? 5 :
                      'badapple';

        // css selectors by version
        faSMS.selector = {
          row : [
            'tr', // phpbb2
            '.row', // phpbb3
            'tr', // punbb
            'tr', // invision
            '.forum-block', // forumactif edge
            '.row' // modernbb
          ][faSMS.fVersion],

          row_date : [
            '.row3Right .postdetails', // phpbb2
            '.lastpost', // phpbb3
            '.tcr', // punbb
            '.lastaction', // invision
            '.forum-lastpost', // forumactif edge
            '.lastpost' // modernbb
          ][faSMS.fVersion],

          post_avatar : [
            '.postdetails.poster-profile > a img', // phpbb2
            '.postprofile dt > a img', // phpbb3
            '.user-basic-info > a img', // punbb
            '.postprofile dt > a img', // invision
            '.user-avatar img', // forumactif edge
            '.postprofile-avatar img' // modernbb
          ][faSMS.fVersion],

          post_name : [
            '.name', // phpbb2
            '.postprofile dt > strong', // phpbb3
            '.username', // punbb
            '.postprofile dt > a strong', // invision
            '.username', // forumactif edge
            '.postprofile-name' // modernbb
          ][faSMS.fVersion],

          post_data : [
            '.postdetails:not(.poster-profile)', // phpbb2
            '.author', // phpbb3
            '.posthead h2', // punbb
            '.author', // invision
            '.author', // forumactif edge
            '.topic-date' // modernbb
          ][faSMS.fVersion],

          post_message : [
            '.postbody > div', // phpbb2
            '.content > div', // phpbb3
            '.entry-content > div > div', // punbb
            '.post-entry > div:not(.clear, .vote)', // invision
            '.content > div', // forumactif edge
            '.content > div' // modernbb
          ][faSMS.fVersion]
        };

        (faSMS.config.embed ? document.querySelector(faSMS.config.embed) : document.body).appendChild(frag);

        if (faSMS.config.embed) {
          faSMS.getCategory();
        }

        delete faSMS.init;
      };


      try {
        // wait for the doc to be interactive / complete
        function ready () {
          if (!initialized && /interactive|complete/.test(document.readyState)) {
            build();
            initialized = true;
          }
        };

        ready();

        if (!initialized) {
          document.onreadystatechange = ready;
        }

      } catch (error) {
        $(build); // jQuery fallback
      }

    }
  };

  // setup faSMS
  faSMS.init();


  // faSMS styles
  $('head').append('<style>@import url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css);#faSMS,#faSMS *{box-sizing:border-box}#faSMS,#faSMS-button{font-family:Arial;position:fixed;right:3px;z-index:99999}#faSMS{background:#fff;border:1px solid #ddd;height:70%;width:40%;min-height:400px;min-width:300px;overflow:hidden;visibility:visible;opacity:1;transition:500ms;color:#333;font-size:13px;bottom:35px}#faSMS[data-hidden=true]{visibility:hidden;opacity:0;bottom:-100%}#faSMS.faSMS-embeded{position:relative;bottom:0;right:0;width:100%;height:400px;margin:12px 0;z-index:1}#faSMS-button{color:#fff;font-size:16px;background:#39c;padding:6px 12px;bottom:3px;cursor:pointer}#faSMS-button:hover{background-color:#069}#faSMS-toolbar{color:#fff;background:#39c;border-bottom:1px solid #28b;height:40px;line-height:40px;margin:-1px -1px 0}.faSMS-maintitle{font-size:18px;text-align:center;width:70%;margin:0 auto;overflow:hidden;text-overflow:ellipsis}a.faSMS-back{color:#fff;font-size:24px;position:absolute;left:10px}a.faSMS-back:hover{color:#ccc}#faSMS-content{height:90%;height:calc(100% - 80px);overflow-y:auto;overflow-x:hidden}.faSMS-loading{font-size:18px;font-weight:700;display:flex;justify-content:center;align-items:center;position:absolute;top:0;left:0;right:0;bottom:0}#faSMS-content::-webkit-scrollbar{width:8px;height:8px}#faSMS-content::-webkit-scrollbar-track{background:0 0}#faSMS-content::-webkit-scrollbar-thumb{background-color:#39c;border:none}#faSMS-content::-webkit-scrollbar-button:single-button{height:0;width:0}#faSMS-content::-webkit-scrollbar-thumb:hover,::-webkit-scrollbar-button:hover{background-color:#28b}#faSMS-content::-webkit-scrollbar-thumb:active,::-webkit-scrollbar-button:active{background-color:#069}#faSMS-actions{height:40px;border-top:1px solid #ddd}#faSMS-actions button{color:#333;font-size:18px;background:#fff;border:none;border-left:1px solid #ddd;height:40px;width:40px;cursor:pointer;outline:none}#faSMS-actions button:first-child{border:none}#faSMS-actions button:hover{background:#eee}#faSMS-actions button:active{background:#ddd}#faSMS-actions button[data-disabled=true]{pointer-events:none}#faSMS-actions button[data-disabled=true]>*{opacity:.5}#faSMS-msg{font-size:14px;border:none;border-left:1px solid #ddd;height:40px;width:calc(100% - 120px);margin:0;padding:0 6px;vertical-align:top}a.faSMS-chat,a.faSMS-chat *{display:block}a.faSMS-chat{color:#333;border-bottom:2px solid #ddd;position:relative;padding:12px;height:80px}a.faSMS-chat:hover{background-color:#eee}.faSMS-chat-avatar{position:absolute;left:10px;top:50%;margin-top:-20px;height:40px;width:40px;overflow:hidden}.faSMS-chat-avatar img,.faSMS-msg-avatar img{height:100%;width:100%}.faSMS-chat-date,.faSMS-chat-title{position:absolute;left:0;width:100%;padding:0 12px 0 60px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.faSMS-chat-title{font-size:14px;font-weight:700;top:20px}.faSMS-chat-date{bottom:20px}.faSMS-msg{position:relative;padding:12px;margin-bottom:12px}.faSMS-msg:after{content:"";display:table;clear:both}.faSMS-msg-avatar{height:40px;width:40px;display:block;margin-top:15px;overflow:hidden;float:left}.faSMS-msg-box{float:right;width:80%;width:calc(100% - 40px);padding-left:15px}.faSMS-my-msg .faSMS-msg-avatar{margin-top:0;float:right}.faSMS-my-msg .faSMS-msg-box{float:left;padding:0 15px 0 0}.faSMS-msg-content{color:#000;background:#ddd;border-radius:6px;padding:8px;margin:3px 0;word-break:break-word;position:relative}.faSMS-msg-content:before{content:"";height:0;width:0;border-top:5px solid transparent;border-bottom:5px solid transparent;border-right:10px solid #ddd;position:absolute;top:10px;left:-10px}.faSMS-my-msg .faSMS-msg-content:before{border-right:none;border-left:10px solid #07c;top:12px;left:auto;right:-10px}.faSMS-msg-content a{color:inherit;text-decoration:underline}.faSMS-msg-content a:hover{text-decoration:none}.faSMS-msg-content *{max-width:100%}.faSMS-my-msg .faSMS-msg-content{color:#fff;background:#07c;text-align:right}.faSMS-my-msg .faSMS-msg-name{display:none}.faSMS-msg-date{text-align:right}.faSMS-msg-date,.faSMS-msg-name{font-size:12px;display:block;padding:0 3px;width:100%}</style>');
}());