1. 코드 작성
1.1 초대할 수 있는 인원이 보여지는 팝업 모달창
- Git을 통해 소스를 다운 받으시면 맨처음에 초대 버튼을 누르면 모달창이 뜨는 코드가 포함되어 있는 상태
/**
* Dom 로딩 후 동작
*/
document.addEventListener('DOMContentLoaded', function() {
//FirebaseChat 클래스 초기화
window.fbChat = new FirebaseChat();
//다운로드 프로그레스 팝업 modal 설정
$('#dnModal').modal();
//채팅방 초대 modal 설정
$('#dvAddUser').modal();
});
1.2 팝업 모달 창을 채울 유저리스트 추가
/**
* 초기 필드 변수 할당
*/
FirebaseChat.prototype.init = function(){
// ...생략
this.ulAddUserList = document.getElementById('ulAddUserList');
}
/**
* 챗방 오픈 , 메세지 로드 및 AddUserList
*/
FirebaseChat.prototype.openChatRoom = function(roomId, roomTitle){ // 파라미터 추가
//...생략
this.setAddUserList();
}
/**
* 유저 초대 팝업 모달 창 셋팅
*/
FirebaseChat.prototype.setAddUserList = function(){
this.ulAddUserList.innerHTML = this.ulUserList.innerHTML
var arrAddUserList = Array.prototype.slice.call(this.ulAddUserList.getElementsByTagName('li'));
var cbArrayForEach = function(item){
var itemUserUid = item.getAttribute('data-targetUserUid');
if(this.roomUserlist.indexOf(itemUserUid) === -1){
item.getElementsByClassName('done')[0].classList.remove('hiddendiv');
item.addEventListener('click',function(){
if(Array.prototype.slice.call(this.classList).indexOf('blue-text') == -1){
this.classList.add('blue-text');
}else{
this.classList.remove('blue-text');
}
});
}else{
item.parentNode.removeChild(item);
}
}
arrAddUserList.forEach(cbArrayForEach.bind(this));
}
- 코드 설명 :
- 유저리스트는 앱 첫화면 유저리스트의 Dom을 그대로 가지고 와서 채팅방 안에 속한 인원을 제외 시키고, 숨겨두었던 체크버튼을 보이도록 함
- openChatRoom메소드에 setAddUserList 메소드를 실행하는 코드를 추가
- setAddUserList메소드 내부의 foreach메소드는 배열을 순회하는 메소드
- 배열을 순회하면서 방에 속한 유저가 아닐 경우 숨겨져있던 체크표시 엘리먼트를 숨김을 해제하고, 클릭시 체크색깔에 변화를 주게 합니다. 방에 속한 유저일 경우 해당 child 를 제거 하는 코드
var cbArrayForEach = function(item){ var itemUserUid = item.getAttribute('data-targetUserUid'); if(this.roomUserlist.indexOf(itemUserUid) === -1){ item.getElementsByClassName('done')[0].classList.remove('hiddendiv'); item.addEventListener('click',function(){ if(Array.prototype.slice.call(this.classList).indexOf('blue-text') == -1){ this.classList.add('blue-text'); }else{ this.classList.remove('blue-text'); } }); }else{ item.parentNode.removeChild(item); }
1.3 모달창에서 모달창 아래 추가 버튼을 클릭했을 시 체크된 인원을 초대하는 프로세스 추가
/**
* 초기 필드 변수 할당
*/
FirebaseChat.prototype.init = function(){
//...생략
this.aConfirmInvite =document.getElementById('aConfirmInvite');
}
/**
* 초기 이벤트 바인딩
*/
FirebaseChat.prototype.initEvent = function(){
//...생략
this.aConfirmInvite.addEventListener('click', this.onConfirmInviteClick.bind(this));
}
/**
* 초대
*/
FirebaseChat.prototype.onConfirmInviteClick = function(){
var arrInviteUserList = Array.prototype.slice.call(this.ulAddUserList.getElementsByClassName('blue-text'));
var arrInviteUserListLength = arrInviteUserList.length;
var arrInviteUserName = [];
var updates = {};
for(var i=0; i < arrInviteUserListLength; i++){
var inviteUserUid = arrInviteUserList[i].getAttribute('data-targetUserUid');
var inviteUserName = arrInviteUserList[i].getAttribute('data-username') + '님';
updates['RoomUsers/'+ this.roomId +'/'+ inviteUserUid] = true;
arrInviteUserList[i].outerHTML = '';
this.roomUserlist.push(inviteUserUid);
this.roomUserName.push(inviteUserName);
arrInviteUserName.push(inviteUserName);
}
this.roomUserlist.sort();
this.database.ref().update(updates);
//초대 메세지
this.saveMessages(arrInviteUserName.join() + '이 초대되었습니다.');
}
/**
* 메세지 전송
*/
FirebaseChat.prototype.saveMessages = function(inviteMessage){ //파라미터 추가
var user = this.auth.currentUser;
var msg = inviteMessage ? inviteMessage : this.dvInputChat.innerHTML.trim();
//...생략
}
- 코드 설명 :
- 추가 버튼을 누르면 onConfirmInviteClick 메소드가 실행.
- onConfirmInviteClick 메소드를 살펴보면, ‘blue-text’ 클래스가 포함된,선택표시인 파란색 글자인 유저들을 찾아서 배열을 만든 후 해당 배열의 인원들을 Realtime Database 의 RoomUsers 위치에 데이터를 저장하고, 현재 방인원과 방인원의 이름 변수에 추가합니다. 그리고 마지막으로 초대 메세지를 발송합니다.
- 초대 메세지 발송을 위해서 saveMessages메소드에 파라미터가 추가되고, 메세지 변수에 데이터를 대입하는 부분이 조금 변경되었습니다.
- 작성완료