Develop.new chat sample fixes

samples/newChat/css/dashboard.css

@@ -44,6 +44,11 @@
  flex: 1 0 56px;
 }
 
+.dashboard__logo img{
+ width: 41px;
+ height: 41px;
+}
+
 .dashboard__status_wrap {
  flex: 1 1 100%
 }
@@ -52,6 +57,7 @@
  font-weight: 500;
  line-height: 20px;
  color: #4A4A4A;
+ margin: 0 0 6px;
 }
 
 .dashboard__status {

samples/newChat/index.html

@@ -74,7 +74,7 @@ <h3>Please enter your username and user group.
  </a>
 
  <div class="dashboard__status_wrap">
- <h2 class="dashboard__title">Text Chat Sample</h2>
+ <h2 class="dashboard__title"><%- user.user_tags %></h2>
  <p class="dashboard__status j-dashboard_status">
  Logged in as <%- user.name %>
  </p>
@@ -191,7 +191,7 @@ <h1 class="dialog__title j-dialog__title"><%- title %></h1>
  </div>
  <form action="" name="update_dialog" class="dialog_form m_dialog_form_update j-update_dialog_form">
  <button type="button" class="btn m-update_dialog_btn_cancel j-update_dialog_btn_cancel" name="update_dialog_cancel">cancel</button>
- <button class="btn m-update_dialog_btn j-update_dialog_btn" type="submit" name="update_dialog_submit">add member</button>
+ <button class="btn m-update_dialog_btn j-update_dialog_btn" type="submit" name="update_dialog_submit" disabled>add member</button>
  </form>
  </div>
  </script>

samples/newChat/js/dialog.js

@@ -5,6 +5,7 @@ function Dialog() {
 
  this.dialogId = null;
  this.prevDialogId = null;
+ this.limit = appConfig.dilogsPerRequers || 30;
 
  // elements
  this.sidebar = null;
@@ -15,7 +16,6 @@ function Dialog() {
  this.editLink = null;
  this.quitLink = null;
  this.attachmentsPreviewContainer = null;
- this.limit = appConfig.dilogsPerRequers || 30;
 }
 
 Dialog.prototype.init = function () {
@@ -352,7 +352,7 @@ Dialog.prototype.createDialog = function (params) {
 
  self.joinToDialog(id).then(function(){
  if(createdDialog.type === CONSTANTS.DIALOG_TYPES.GROUPCHAT){
- QB.chat.send(self._cache[id].jidOrUserId, notificationMessage);
+ messageModule.sendMessage(id, notificationMessage);
  }
  });
 
@@ -364,7 +364,6 @@ Dialog.prototype.createDialog = function (params) {
  var tab = document.querySelector('.j-sidebar__tab_link[data-type="chat"]');
  app.loadChatList(tab).then(function () {
  self.renderDialog(self._cache[id], true);
-
  }).catch(function(error){
  console.error(error);
  });
@@ -462,7 +461,7 @@ Dialog.prototype.updateDialog = function (updates) {
 
  self._cache[dialogId].users = self._cache[dialogId].users.concat(newUsers);
 
- updatedMsg.body = app.user.name + ' add ' + usernames.join(',') + ' to the conversation.';
+ updatedMsg.body = app.user.name + ' adds ' + usernames.join(',') + ' to the conversation.';
  updatedMsg.extension.occupants_ids_added = newUsers.join(',');
  } else {
  router.navigate('/dialog/' + dialogId);
@@ -475,7 +474,7 @@ Dialog.prototype.updateDialog = function (updates) {
  _notifyNewUsers(newUsers);
  }
 
- QB.chat.send(dialog.xmpp_room_jid, updatedMsg);
+ messageModule.sendMessage(dialogId, updatedMsg);
 
  router.navigate('/dialog/' + dialog._id);
  }).catch(function(error){
@@ -573,7 +572,7 @@ Dialog.prototype.quitFromTheDialog = function(dialogId){
  function _notuyfyUsers(){
  var msg = {
  type: 'groupchat',
- body: app.user.name + ' leave the chat.',
+ body: app.user.name + ' left the chat.',
  extension: {
  save_to_history: 1,
  dialog_id: dialog._id,
@@ -583,7 +582,7 @@ Dialog.prototype.quitFromTheDialog = function(dialogId){
  }
  };
 
- QB.chat.send(self._cache[dialogId].jidOrUserId, msg)
+ messageModule.sendMessage(dialogId, msg);
  }
 
 };

samples/newChat/js/helpers.js

@@ -102,10 +102,26 @@ Helpers.prototype.fillMessagePrams = function (message) {
 };
 
 Helpers.prototype.fillMessageBody = function (str) {
- // replace links
- return str.replace(/(https?:\/\/[^\s]+)/g, function (url) {
- return '<a href="' + url + '" target="_blank">' + url + '</a>';
+ var url, url_text;
+ var URL_REGEXP = /\b((?:https?:\/\/|www\d{0,3}[.]|[a-z0-9.\-]+[.][a-z]{2,4}\/)(?:[^\s()<>]+|\(([^\s()<>]+|(\([^\s()<>]+\)))*\))+(?:\(([^\s()<>]+|(\([^\s()<>]+\)))*\)|[^\s`!()\[\]{};:'".,<>?«»“”‘’]))/gi;
+
+ str = escapeHTML(str);
+
+ // parser of paragraphs
+ str = str.replace(/\n/g, '<br>');
+
+ // parser of links
+ str = str.replace(URL_REGEXP, function(match) {
+ url = (/^[a-z]+:/i).test(match) ? match : 'http://' + match;
+ url_text = match;
+ return '<a href="' + escapeHTML(url) + '" target="_blank">' + escapeHTML(url_text) + '</a>';
  });
+
+ return str;
+
+ function escapeHTML(s) {
+ return s.replace(/</g, "&lt;").replace(/>/g, "&gt;");
+ }
 };
 
 Helpers.prototype.getSrcFromAttachmentId = function (id) {

samples/newChat/js/listeners.js

@@ -21,6 +21,8 @@
 function Listeners() {};
 
 Listeners.prototype.onMessageListener = function (userId, message) {
+ if(userId === app.user.id) return false;
+
  var self = this,
  msg = helpers.fillNewMessageParams(userId, message),
  dialog = dialogModule._cache[message.dialog_id];

samples/newChat/js/login.js

@@ -159,7 +159,7 @@ Login.prototype.setListeners = function(){
  _.each(formInputs, function(i){
  i.addEventListener('focus', function(e){
  var elem = e.currentTarget,
- container = elem.closest('.login_form__row');
+ container = elem.parentElement;
 
  if (!container.classList.contains('filled')) {
  container.classList.add('filled');
@@ -168,7 +168,7 @@ Login.prototype.setListeners = function(){
 
  i.addEventListener('focusout', function(e){
  var elem = e.currentTarget,
- container = elem.closest('.login_form__row');
+ container = elem.parentElement;
 
  if (!elem.value.length && container.classList.contains('filled')) {
  container.classList.remove('filled');

samples/newChat/js/message.js

@@ -20,7 +20,7 @@ Message.prototype.init = function () {
 
  document.forms.send_message.addEventListener('submit', function (e) {
  e.preventDefault();
- self.sendMessage(dialogModule.dialogId);
+ self.submitSendMessage(dialogModule.dialogId);
  document.forms.send_message.message_feald.focus();
  });
 
@@ -33,7 +33,7 @@ Message.prototype.init = function () {
  if (key === 13) {
  if (!e.ctrlKey && !e.shiftKey && !e.metaKey) {
  e.preventDefault();
- self.sendMessage(dialogModule.dialogId);
+ self.submitSendMessage(dialogModule.dialogId);
  }
  }
  });
@@ -84,7 +84,7 @@ Message.prototype.sendStopTypingStatus = function (dialogId) {
  self._typingTime = null;
 };
 
-Message.prototype.sendMessage = function (dialogId) {
+Message.prototype.submitSendMessage = function (dialogId) {
  if (!app.checkInternetConnection()) {
  return false;
  }
@@ -122,19 +122,8 @@ Message.prototype.sendMessage = function (dialogId) {
 
  // Don't send empty message
  if (!msg.body) return false;
- msg.id = QB.chat.send(dialog.jidOrUserId, msg);
- msg.extension.dialog_id = dialogId;
-
- var message = helpers.fillNewMessageParams(app.user.id, msg);
-
- if (dialog.type === 3) {
- dialogModule._cache[dialogId].messages.unshift(message);
- if (dialogModule.dialogId === dialogId) {
- self.renderMessage(message, true);
- }
- }
 
- dialogModule.changeLastMessagePreview(dialogId, message);
+ self.sendMessage(dialogId, msg);
 };
 
 Message.prototype.setLoadMoreMessagesListener = function () {
@@ -160,6 +149,25 @@ Message.prototype.setLoadMoreMessagesListener = function () {
  }
 };
 
+Message.prototype.sendMessage = function(dialogId, msg){
+ var self = this,
+ message = JSON.parse(JSON.stringify(msg)),
+ dialog = dialogModule._cache[dialogId],
+ jidOrUserId = dialog.jidOrUserId;
+
+ message.id = QB.chat.send(jidOrUserId, msg);
+ message.extension.dialog_id = dialogId;
+
+ var newMessage = helpers.fillNewMessageParams(app.user.id, msg);
+
+ dialogModule._cache[dialogId].messages.unshift(newMessage);
+ if (dialogModule.dialogId === dialogId) {
+ self.renderMessage(newMessage, true);
+ }
+
+ dialogModule.changeLastMessagePreview(dialogId, newMessage);
+};
+
 Message.prototype.getMessages = function (dialogId) {
  if(!navigator.onLine) return false;
  var self = this,
@@ -175,7 +183,6 @@ Message.prototype.getMessages = function (dialogId) {
  QB.chat.message.list(params, function (err, messages) {
  if (!err) {
  var dialog = dialogModule._cache[dialogId];
-
  dialog.messages = dialog.messages.concat(messages.items);
 
  if (messages.items.length < self.limit) {
@@ -335,7 +342,6 @@ Message.prototype.prepareToUpload = function (e) {
 };
 
 Message.prototype.uploadFilesAndGetIds = function (file, dialogId) {
-
  if (file.size >= CONSTANTS.ATTACHMENT.MAXSIZE) {
  return alert(CONSTANTS.ATTACHMENT.MAXSIZEMESSAGE);
  }
@@ -359,7 +365,7 @@ Message.prototype.uploadFilesAndGetIds = function (file, dialogId) {
 
  dialogModule._cache[dialogId].draft.attachments[response.uid] = helpers.getSrcFromAttachmentId(response.uid);
 
- self.sendMessage(dialogId);
+ self.submitSendMessage(dialogId);
  }
  });
 };

samples/newChat/js/route.js

@@ -100,7 +100,6 @@ router.on({
 
  function _renderSelectedDialog(){
  var currentDialog = dialogModule._cache[dialogId];
-
  if(!currentDialog){
  dialogModule.getDialogById(dialogId).then(function(dialog){
  var tabDataType = dialog.type === CONSTANTS.DIALOG_TYPES.PUBLICCHAT ? 'public' : 'chat',
@@ -115,6 +114,9 @@ router.on({
  });
 
  }).catch(function(error){
+ console.error(error);
+ var tab = document.querySelector('.j-sidebar__tab_link[data-type="chat"]');
+ app.loadChatList(tab)
  router.navigate('/dashboard');
  });
  } else {
@@ -174,6 +176,8 @@ router.on({
  function _renderUsers(dialogOccupants){
  var userList = document.querySelector('.j-update_chat__user_list'),
  counterElem = document.querySelector('.j-update__chat_counter'),
+ addUsersBtn = document.querySelector('.j-update_dialog_btn'),
+
  newUsersCount = +counterElem.innerText.trim();
 
  userModule.getUsers().then(function(usersArray){
@@ -201,6 +205,12 @@ router.on({
  }
 
  counterElem.innerText = newUsersCount;
+
+ if(newUsersCount) {
+ addUsersBtn.disabled = false;
+ } else {
+ addUsersBtn.disabled = true;
+ }
  });
 
  userList.appendChild(userElem);
@@ -223,13 +233,15 @@ router.on({
  e.preventDefault();
  e.stopPropagation();
 
- editTitleForm.classList.add('active');
 
- if(!editTitleForm.classList.contains('active')){
- editTitleInput.setAttribute('disabled', true);
- } else {
+ editTitleForm.classList.toggle('active');
+
+ if(editTitleForm.classList.contains('active')){
  editTitleInput.removeAttribute('disabled');
  editTitleInput.focus();
+ } else {
+ editTitleInput.setAttribute('disabled', true);
+ _updateDialogTitleRequest();
  }
  });
 
@@ -241,24 +253,11 @@ router.on({
  }
  });
 
- editTitleInput.addEventListener('blur', function(e){
- var params = {
- id: dialogId,
- title: editTitleInput.value.trim()
- };
-
- if(dialogModule._cache[dialogId].name !== params.title) {
- dialogModule.updateDialog(params);
- editTitleForm.classList.remove('active');
- editTitleInput.setAttribute('disabled', true);
- }
- });
-
  editTitleForm.addEventListener('submit', function (e) {
  e.preventDefault();
- editTitleInput.blur();
- });
 
+ _updateDialogTitleRequest();
+ });
 
  editUsersCountForm.addEventListener('submit', function(e){
  e.preventDefault();
@@ -283,6 +282,19 @@ router.on({
  e.stopPropagation();
  router.navigate('/dialog/' + dialogId);
  });
+
+ function _updateDialogTitleRequest(){
+ var params = {
+ id: dialogId,
+ title: editTitleInput.value.trim()
+ };
+
+ if(dialogModule._cache[dialogId].name !== params.title) {
+ dialogModule.updateDialog(params);
+ editTitleForm.classList.remove('active');
+ editTitleInput.setAttribute('disabled', true);
+ }
+ }
  }
  }
 }).resolve();

samples/newChat/js/user.js

@@ -75,7 +75,8 @@ User.prototype.getUsersByIds = function (userList) {
 User.prototype.getUsers = function () {
  var self = this,
  params = {
- tags: app.user.user_tags
+ tags: app.user.user_tags,
+ per_page: 100
  };
 
  return new Promise(function(resolve, reject){