yavsc/src/Yavsc/wwwroot/js/chat.js

window.ChatHubHandler = (function ($) {

  /*
  # chat control ids
  
  ## inputs
  
  * msg_<rname> : input providing a room message
  * pv_<uname>  : input providing a private message
  * command : input providing server command
  * roomname : input (hidden or not) providing a room name
  
  ## persistent containers
  
  * chatview : the global container
  * rooms : container from room displays
  * pvs : container from pv displays
  * server : container for server messages
  
  ## temporary containers
  
  * room_<rname> : room message list
  * pv_<uname> : private discussion display
  
  ## css classes
  
  * form-control
  * btn btn-default
  
  */
  $.fn.filterByData = function (prop, val) {
    return this.filter(function () { return $(this).data(prop) == val; });
  };
  var ChatView = function ($view, full) {

    if (!full) throw new Error('not implemented');

    // build a channel list
    var chans = [];
    var frontRoomName;

    var ulist = $('<ul></ul>').addClass('userlist');
    var notifications = $('<ul></ul>').addClass('notifs');

    ulist.appendTo($view);
    notifications.appendTo($view);

    var chat = $.connection.chatHub;
    // Create a function that the hub can call back to display messages.
    chat.client.addMessage = function (name, room, message) {
      // Add the message to the page.
      $('#room_' + room).append('<li class="discussion"><strong>' + htmlEncode(name) + '</strong>: ' + htmlEncode(message) + '</li>');
    };

    chat.client.addPV = function (name, message) {
      if (!$('#mute').prop('checked')) {
        audio.play();
      }
      // Add the pv to the page.
      $('#pv_' + name).append('<li class="pv"><strong>' + htmlEncode(name) + '</strong>: ' + htmlEncode(message) + '</li>');
    };

    chat.client.notifyRoom = function (tag, targetid, message) {
      // Add the notification to the page.
      if (tag === 'connected' || tag === 'reconnected') onUserConnected(targetid, message);
      else if (tag === 'disconnected') onUserDisconnected(targetid, message);
      // eslint-disable-next-line no-warning-comments
      // TODO reconnected userpart userjoin deniedpv
      $('<li></li>').addClass(tag).append(tag + ': ' + targetid + ' ').append(message).addClass(tag).appendTo($('#room_' + targetid));
    };

    chat.client.notifyUser = function (tag, targetid, message) {
      // Add the notification to the page.
      if (tag === 'connected' || tag === 'reconnected') onUserConnected(targetid, message);
      else if (tag === 'disconnected') onUserDisconnected(targetid, message);
      // eslint-disable-next-line no-warning-comments
      // TODO reconnected userpart userjoin deniedpv
      $('<li></li>').append(tag + ': ' + targetid).append(message).addClass(tag).appendTo(notifications);
    };

    var setActiveRoom = function (room) {
      var frontRoom;
      if (frontRoomName !== '') {
        frontRoom = $('#vroom_' + frontRoomName);
        // eslint-disable-next-line no-warning-comments
        // TODO animate
        frontRoom.addClass('hidden');
        $('#sel_' + frontRoomName).addClass('btn-primary');
      }
      frontRoomName = room;
      frontRoom = $('#vroom_' + room);
      $('#sel_' + room).removeClass('btn-primary');
      frontRoom.removeClass('hidden');
    };

    var chatbar = $('<div class="chatbar"></div>');

    var roomjoin = $('<div class="chatctl" class="form-control"></div>');

    var roomlist = $('<div class="roomlist"></div>');
    roomlist.appendTo(chatbar);
    $('<label for="channame">Join&nbsp;:</label>')
      .appendTo(roomjoin);
    var chanName = $('<input id="channame" title="channel name" hint="yavsc"  >');
    chanName.appendTo(roomjoin);
    roomjoin.appendTo(chatbar);

    chatbar.appendTo($view);
    var chatlist = $('<div class="chatlist" ></div>');
    chatlist.appendTo($view);
    var buildRoom = function (room) {
      var roomTag = $('<a>' + room + '</a>').addClass('btn');
      roomTag.prop('id', 'sel_' + room).click(function () {
        setActiveRoom(room);
        $(this).removeClass('btn-primary');
      });

      roomTag.appendTo(roomlist);
      var roomview = $('<div></div>').addClass('container');
      roomview.appendTo(chatlist);
      roomview.prop('id', 'vroom_' + room);
      var msglist = $('<ul></ul>').addClass('mesglist');
      msglist.prop('id', 'room_' + room);
      msglist.appendTo(roomview);
      $('<input type="text">')
        .prop('id', 'inp_' + room)
        .prop('enable', false)
        .prop('hint', 'hello')
        .prop('title', 'send to ' + room)
        .addClass('form-control')
        .keydown(function (ev) {
          if (ev.which == 13) {
            if (this.value.length == 0) return;
            chat.server.send(room, this.value);
            this.value = '';
          }
        }).appendTo(roomview);
      chans.push(room);
      setActiveRoom(room);
    };

    $view.data('chans').split(',').forEach(function (chan) {
      buildRoom(chan);
    });

    function onCx() {
      setTimeout(function () {
        getUsers();
      }, 120);

      $('#chatview').removeClass('disabled');

      chans.forEach(function (room) {
        chat.server.join(room).done(function (chatInfo) {
          setActiveRoom(chatInfo.Name);
        });
      });
    }

    function onDisCx() {
      $('#chatview').addClass('disabled');
    }

    // Start the connection.
    $.connection.hub.start().done(function () {
      onCx();
    });

    $.connection.hub.disconnected(function () {

      onDisCx();
      setTimeout(function () {
        $.connection.hub.start().done(function () {
          // $('#mySignalRConnectionIdHidden').val($.connection.hub.id)
          onCx();
        }, 30000); // Re-start connection after 30 seconds
      });
    });

    chanName.keydown(function (event) {
      if (event.which == 13) {
        if (this.value.length == 0) return;
        buildRoom(this.value);
        chat.server.join(this.value).done(function (chatInfo) {
          setActiveRoom(chatInfo.Name);
        });
        this.value = '';
      }
      // else TODO showRoomInfo(this.value);
    });

    var pvuis;
    // eslint-disable-next-line no-warning-comments
    // TODO get this data from the chatview element
    var audio = new Audio('/sounds/bell.mp3');

    var sendPV = function () {
      var msg = $('#pv').val();
      // Call the Send method on the hub.
      $.each(pvuis.CXs, function () {
        chat.server.sendPV(this, msg);
      });
      $('#discussion').append('<li class="pv">' + htmlEncode(pvuis.UserName) + '<< ' + htmlEncode(msg) + '</li>');
      // Clear text box and reset focus for next comment.
      $('#pv').val('');
    };

    $('#pv').keydown(function (event) {
      if (event.which == 13) {
        sendPV();
      }
    });

    $('#command').keydown(function (event) {
      if (event.which == 13) {
        // eslint-disable-next-line no-warning-comments
        // TODO server command: sendCommand()
      }
    });

    var addChatUser = function (uname) {

      $('#u_' + uname).remove();
      // ulist.remove("li.user[data='"+uname+"']");

      $('<li class="user"><img src="/Avatars/' + uname + '.xs.png"> ' + uname + '</li>')
        .prop('id', 'u_' + uname)
        .css('cursor', 'pointer')
        .click(function () { setPrivateTarget(this); })
        .appendTo(ulist);
    };

    var getUsers = function () {
      $.get('/api/chat/users').done(function (users) {
        $.each(users, function () {
          var user = this;
          addChatUser(user.UserName);
        });
      });
    };

    // This optional function html-encodes messages for display in the page.
    function htmlEncode(value) {
      var encodedValue = $('<div />').text(value).html();
      return encodedValue;
    }

    var setPrivateTarget = function (li) {
      $('#rooms').addClass('hidden');
      $('#sendpvbox').removeClass('hidden');
      pvuis = { CXs: $(li).data('cxids'), UserName: $(li).data('name') };
      $('#sendpvdest').html(pvuis.UserName);
      $('#pvs').focus();
    };

    var setPublic = function () {
      $('#rooms').removeClass('hidden');
      $('#sendpvbox').addClass('hidden');
      $('#message').focus();
    };

    $('#pubChan').css('cursor', 'pointer');
    $('#pubChan').click(setPublic);
    setPublic();

    var onUserDisconnected = function (uname) {
      $('#u_' + uname).remove();
    };

    var onUserConnected = function (username) {
      addChatUser(username);
    };

    $(window).unload(function () { chat.server.abort(); });

  };

  $(document).ready(function ($) {
    ChatView($('#chatview'), true);
  });

})(window.jQuery);