/////////////////////////////////////////// /* You are in the js tab meaning that you have curiosity to read the codes! Go on, I appreciate! Case 1 : (Read) Greetings from Arb! I know, the world is right now a bit messed up, it has lost a bit in an imbalanced situation. We're tryna survive with all our powers. Most of the countries have been shutted down. The best thing we can do is, make ourselves stay at home. Let's do that. Case 2 : (Must Read) A lot of poeple everyday ask me to share design ideas, to teach them and to help them code. Depending on the things I do everyday, it is never possible to reply them all. But actually if you think from the outside of the box, you don't need to have talked with me nor you need my help. Basically, you can do it yourself. You just need to visit my profile and click on the codes I've. I TRY TO MAKE THE CODE AS READABLE AS POSSIBLE. IT IS NOT IMPOSSIBLE TO LEARN FROM THERE IF YOU HAVE A PROPER MINDSET. I'VE SEEN MANY WEB DESIGNERS HERE, WHO (FOR SOME COPY-PASTER LOL) ENCRYPT THEIR CODES. WELL, AS PER MY OBSERVATION, THE NUMBER OF HELP SEEKERS IS GREATTER THAN THE NUMBER OF THOSE WHO COPY. SO, IN MY OPINION, THE CODE SHOULDN'T BE ENCRYPTED! Let us give a chance to learn. Case 3 : (You gotta read) This code is dedicated to a sololearner Ranju Alam, in my opinion the nicest person in the world having a very deep, big & warm heart. He has proved that litrally gifting a laptop within 3 days from where does he live. THANKS A LOT BIG BRO. I'LL NEVER FORGET YOU. Thanks to ma dog bro too for being the tester 😆 ! Case 4 : (Interesting!) I've something interesting for you all guys. Specially those who love math and have fun with it. If you go through all the javascript codes, you will find seven fucntions representing seven numbers! Some logical hints are given to find the number in the corresponding function. You'll have fun reading the code and and finding the numbers as well. The excited part is that, the numbers express a special meaning. You've been given a hint too at the very end of the js codes to find the meaning. Let's see if you can find! Case 5 : (Features) 1) You can make conversation. 2) You can see the last msg on the conversation page. 3) You can see online status 4) You get a random profile picture. And you don't know if you are a girl or a booy. lol 5) Realtime message update 6) You can swipe to go to the people page. 7) You can delete the conversation and at last 8) You can chat as long as you want, before I change the rules on firebase! Enjoy. --- Arb -- Dhaka, Bangladesh Date: 31 - 03 - 2020 */ /////////////////////////////////////////// /*≠≠=≠≠==≠≠==≠≠==≠≠==≠≠==≠≠==≠≠==≠≠==≠≠==≠≠= ≠≠====≠≠==≠≠== Conversation =≠≠==≠≠==≠≠==≠ ≠==≠≠==≠≠==≠≠==≠≠==≠≠==≠≠==≠≠==≠≠==≠≠=≠≠==*/ const hasConv = () => { const ref = db.ref('/users/conversations/' + currentUid()); ref.once('value').then(snap => { snap.forEach(snapshot => { const val = snapshot.val(); let user; const you = val.user1.id == currentUid(); const other = val.user2.id == currentUid(); if(you) user = val.user2; else if (other) user = val.user1; for (let u of usersArray) { const matched = u.id == user.id; if (matched) hide(u.conDiv); //console.log(u.name) } }); }); // Well, trust me, invention of this function was a real hard thing I've had ever faced in my entire life. I've done more difficult problem than this, but idk why it took so much of time to come to a solution. this function checks if an user a conversation } const firstNumber = () => { return 'This number has two digits. The sum of the digits is 4 and the substraction is -2'; } const makeConv = (user, cId) => { const conv = new Conversation(user, 'Hola there. This is a demo msg.', cId); conv.init(); conv.onClick(); } const convHelper = (snapshot) => { const val = snapshot.val(); let user; const you = val.user1.id == currentUid(); const other = val.user2.id == currentUid(); if(you) user = val.user2; else if (other) user = val.user1; makeConv(user, val.id); } const getConversations = () => { id('conv-holder').innerHTML = ''; showLoader(); const ref = db.ref('/users/conversations/' + currentUid()).orderByChild('time'); ref.on('child_added', snap => { convHelper(snap); hideLoader(); }); } const getAllConvOnce = () => { id('conv-holder').innerHTML = ''; showLoader(); const ref = db.ref('/users/conversations/' + currentUid()).orderByKey(); ref.once('value').then(snap => { snap.forEach(snapshot => { convHelper(snapshot); }); hideLoader(); // ^.^ }); } const makeConversation = (user1, user2) => { hide(id('homePage')); showLoader(); const convId = uuid(); const ref1 = db.ref('/users/conversations/' + user1.id + '/' + convId); const ref2 = db.ref('/users/conversations/' + currentUid() + '/' + convId); const promise = new Promise((resolve, reject) => { const ref = db.ref('/users/general/' + currentUid()); ref.once('value').then(snap => { resolve({ id: snap.val().id, name: snap.val().name, image: snap.val().image }); }); }); promise.then(data => { ref1.set({user1: user1, user2: data, id: convId, time: currentTime()}, err => { if (!err) { ref2.set({user1: user1, user2: data, id: convId, time: currentTime()}, er => { if (!er) { goToConversation(convId, user1); // Open conversation page! } }); } }); }); } const goToConversation = (cId, oponent) => { id('msgs-holder').innerHTML = ''; hide(id('homePage')); show(id('conversationPage'), 'block'); hideLoader(); updateUser(oponent.name, oponent.image); publicId = cId; // this is important to do to store msgs; } const makeMsg = (msgData) => { const msg = new Message(msgData.id, msgData.sender, msgData.text, msgData.time); msg.init(); } const secondNumber = () => { const first = 'the 5th prime number'; const second = '2'; return first - second; } const dateFormat = (timestamp) => { const date = new Date(timestamp); let hour = date.getHours(); let minute = date.getMinutes(); let ampm; if (hour == 0) { hour = 12; ampm = 'AM'; } else if (hour > 0 && hour < 12) { ampm = 'AM'; } else if (hour > 12) { hour -= 12; ampm = 'PM'; } hour = hour < 10 ? '0' + hour : hour; minute = minute < 10 ? '0' + minute : minute; return hour + ':' + minute + ' ' + ampm; } const msgHelper = (snap) => { snap.forEach(snapshot => { const val = snapshot.val(); makeMsg({ id: val.id, sender: val.sender, text: val.text, time: dateFormat(val.time) }); }); } const getMessages = (cId) => { id('msgs-holder').innerHTML = ''; showLoader(); const ref = db.ref('/messages/' + cId).orderByChild('time'); ref.once('value').then(snap => { msgHelper(snap); toBottom(cls('messages')[0]); hideLoader(); }); } const realtimeMsg = (cId) => { const ref = db.ref('/messages/' + cId).orderByChild('time'); ref.on('child_added', snapshot => { const val = snapshot.val(); const data = { id: val.id, sender: val.sender, text: val.text, time: dateFormat(val.time) }; makeMsg(data); toBottom(cls('messages')[0]); }); // realtime msg update on conversation page. just pass the conversation id 😝 } const addMessage = (convId) => { const msgId = uuid(); const ref = db.ref('/messages/' + convId + '/' + msgId); if (id('message-txt').value !== '') ref.set(getMsgDetails(msgId)); // Add message id('message-txt').value = ''; } const getMsgDetails = (mId) => { return { id: mId, sender: currentUid(), text: id('message-txt').value, time: firebase.database .ServerValue.TIMESTAMP }; // retreive msg details } /*----------------!!-------------------*/ /*≠≠=≠≠==≠≠==≠≠==≠≠==≠≠==≠≠==≠≠==≠≠==≠≠==≠≠= ≠≠====≠≠==≠≠== Users =≠≠==≠≠==≠≠==≠≠==≠==≠= ≠==≠≠==≠≠==≠≠==≠≠==≠≠==≠≠==≠≠==≠≠==≠≠=≠≠==*/ const thirdNumber = () => { return 'the first or the last two digits of this year!'; // isn't it interesting? } const hideClikedUsers = () => { for (let u of clickedUsers) { for (let u1 of usersArray) { if (u.id == u1.id) { hide(u1.conDiv); } } } // use less function 😂 } const subStr = (txt, len) => { let acceptedText = txt.length < len ? txt : txt.substring(0, len - 1) + '...'; return acceptedText; } const generateUser = (snapshot) => { const label = 'A simple boy with many dreams'; //snap.forEach(snapshot => { const val = snapshot.val(); const currentUser = val.id == currentUid(); const user = new User( val.id, subStr(val.name, 15), val.image, '', label ); if (!currentUser) { user.init(); user.onClick(); usersArray.push(user); hideLoader(); } //}); } const getCurrentUser = (uid) => { return new Promise((resolve, reject) => { const ref = db.ref('/users/general/' + uid); ref.once('value').then(snap => { const val = snap.val(); resolve({ id: val.id, name: val.name, image: val.image, sts: '', label: '' }); }); }); // returns a promise with user data - uaing an id. useless tho. lol } const getAllUsers = () => { const ref = db.ref('/users/general/'); id('people').innerText = ''; showLoader(); ref.on('child_added', snap => { generateUser(snap); }); // this is important. I'm getting all your infromation by this. 😂 } const userHelp = (val) => { const lblArray = ['I am curious to know about the world', 'I like to travel more.', 'I am going to win the upcoming olympic.', 'I hate dancing.', 'I do have attitude.']; const ranLbl = lblArray[Math.floor(Math.random() * lblArray.length)]; const currentUser = val.id == currentUid(); const user = new User( val.id, subStr(val.name, 15), val.image, '', ranLbl ); if (!currentUser) { user.init(); user.onClick(); usersArray.push(user); hideLoader(); } } const generateSmallUsers = () => { id('u-wrapper').innerHTML = ''; const promise = new Promise((resolve, reject) => { const users = []; const ref = db.ref('users/general'); ref.once('value').then(snap => { snap.forEach(snapshot => { const val = snapshot.val(); const you = snapshot.val().id == currentUid(); if (!you) users.push({ id: val.id, name: val.name, image: val.image }); }); resolve(users); }); }); promise.then(users => { const matched = users.length > 4; if (matched) { for (let i = 0; i < 4; i++) { const sUser = new UserSmall(users[i]); sUser.init(); sUser.onClick(); sUser.length; } } else { for (let i = 0; i < users.length; i++) { const sUser = new UserSmall(users[i]); sUser.init(); sUser.onClick(); sUser.length; } } }); } const getAllUsersOnce = () => { const ref = db.ref('/users/general/'); showLoader(); usersArray = []; id('people').innerHTML = ''; ref.once('value').then(snap => { snap.forEach(snapshot => { const val = snapshot.val(); userHelp(val); updateUserStatus(); }); }).catch(err => { hideLoader(); }); // this is important too - as it updates the online status 🤞 } const addUser = (data) => { const usersRef = db.ref('/users/general/' + data.id); usersRef.set(data); } const addUserWithImage = (id, name, email, pass) => { $.ajax( { url: 'https://randomuser.me/api/?results=100', dataType: 'json', success: (data) => { addUser({ id: id, name: name, email: email, pass: pass, image: data.results[0] .picture.large, // this is a random picture. well, you don't know if the picture is of a boy or a girl 🤣 I think it is the most interesting side of this code. you can not see your own profiel, so you won't be able to know whether you are a girl or a boy. lol 😆 }); // Add User after getting image data } } ); } const updateUser = (n, i) => { cls('conv-img')[0].src = i; // update user image id('conv-user-name').innerText = n; // update user name } const fourthNumber = () => { return 'flip infinity by 90 degrees and you there you go.'; // my favourite number } /*≠≠=≠≠==≠≠==≠≠==≠≠==≠≠==≠≠==≠≠==≠≠==≠≠==≠≠= ≠≠====≠≠==≠≠== Firebase Func. =≠≠==≠≠==≠≠==≠ ≠==≠≠==≠≠==≠≠==≠≠==≠≠==≠≠==≠≠==≠≠==≠≠=≠≠==*/ /* Firebase Functions */ const presenceChecker = () => { const presenceRef = db.ref('/status/' + currentUid()); // ref const isOffline = { state: 'offline', last_changed: firebase.database.ServerValue.TIMESTAMP, uid: currentUid(), }; // if offline data const isOnline = { state: 'online', last_changed: firebase.database.ServerValue.TIMESTAMP, uid: currentUid(), }; // if online data // connected ref (important) db.ref('.info/connected') .on('value', snap => { if (snap.val == false) return; presenceRef.onDisconnect() .set(isOffline) .then(() => { presenceRef.set(isOnline); }); }); } const setStatus = (uid) => { for (let u of usersArray) { const allowed = uid == u.id; if (allowed) { u.sts = 'online'; u.updateStatus(); } } } const updateUserStatus = () => { const statusRef = db.ref('/status/'); statusRef.once('value').then(snap => { snap.forEach(childSnap => { const currentUser = childSnap.val().uid == currentUid(); const online = childSnap.val().state === 'online'; if (!currentUser) if (online) setStatus( childSnap.val().uid ); }); }); } const firebaseAuthForLogin = () => { const email = id('email').value; // email const pass = id('pass').value; // password const auth = firebase.auth(); const promise = auth .signInWithEmailAndPassword(email, pass) .then(val => { getCurrentUser(val.user.uid) .then(usr => { myUser = usr; hideLoader(); // hide the loader after adding users to database }); // make myuser }) .catch(err => { /* Error */ hideLoader(); alert(err.message); // alert the error message }); } const firebaseAuthForRegister = () => { const name = id('regName').value.length == '' ? 'empty' : id('regName').value; // name const email = id('regEmail').value.length == '' ? 'Empty' : id('regEmail').value; // email const pass = id('regPass').value; // password const auth = firebase.auth(); const promise = auth .createUserWithEmailAndPassword(email, pass).then(val => { /* add user if registration is successful */ addUserWithImage( val.user.uid, // unique id. this is important to get user information and conversation later. name, email, pass ); }).catch(err => { /* Error */ hideLoader(); alert(err.message); // alert the error message }); } const stateObserver = () => { const auth = firebase.auth(); // state observer (meaning that when login / register is succesfull auth.onAuthStateChanged(user => { if (user) { // make sure user is singed in hide(id('loginRegisterPage')); // hide register / login page show(id('homePage'), 'block'); // show home page; initSwiper(); // main page swiper hideLoader(); // hideLoader presenceChecker(); // status initializer getConversations(); // get all conv. getAllUsers(); // get all users //getAllUsersOnce(); // get all users using once listener generateSmallUsers(); } }); // this function runs when a state is observed } const currentUid = () => { return firebase.auth().currentUser.uid; } const currentTime = () => { return firebase .database.ServerValue.TIMESTAMP; // get current time.. } const initFirebase = () => { // Your web app's Firebase configuration var firebaseConfig = { apiKey: "AIzaSyDVugRnls8L2UvnkiiHKuQMCI9U9capF_8", authDomain: "word-mania-898ff.firebaseapp.com", databaseURL: "https://word-mania-898ff.firebaseio.com", projectId: "word-mania-898ff", storageBucket: "word-mania-898ff.appspot.com", messagingSenderId: "752616793545", appId: "1:752616793545:web:419376565796f26b19b418" }; // Initialize Firebase firebase.initializeApp(firebaseConfig); // state observer stateObserver(); /* Init Db */ db = firebase.database(); // database instance userRef = db.ref('/users/'); // user refference } const fifthNumber = () => { return '1001'; // you may need to convert this number 😉 } /*----------------!!-------------------*/ /*≠≠=≠≠==≠≠==≠≠==≠≠==≠≠==≠≠==≠≠==≠≠==≠≠==≠≠= ≠≠====≠≠==≠≠== Utilities =≠≠==≠≠==≠≠==≠ ≠==≠≠==≠≠==≠≠==≠≠==≠≠==≠≠==≠≠==≠≠==≠≠=≠≠==*/ /* Events */ const allClickEvents = () => { id('forward') // move to p-page .addEventListener('click', () => { swiper.slideNext(); }); id('message-txt') .addEventListener('click', () => { show(cls('swiper-scrollbar')[0], 'block'); }); bars[0].addEventListener('click', () => { swiper.slidePrev(); }); // tab 1 clicked bars[1].addEventListener('click', () => { swiper.slideNext(); }); // tab 2 clicked fab[0].addEventListener('click', () => { swiper.slideNext(); //firebase.auth().signOut(); }); // fab clicked id('backToHome') .addEventListener('click', () => { hide(id('conversationPage')); show(id('homePage'), 'block'); show(cls('swiper-scrollbar')[0], 'block'); }); // back button clicked on c-page id('regNow') .addEventListener('click', () => { lrSwiper.slideNext(); }); // register now clicked id('logNow') .addEventListener('click', () => { lrSwiper.slidePrev(); }); // login now clicked id('send-msg') .addEventListener('click', () => { addMessage(publicId); }); onLogin(); //login button clicked onRegister(); // register btn clicked } const slideLeft = (el1, el2) => { el1.style.left = '-100%'; el2.style.left = '0'; } const slideRight = (el1, el2) => { el1.style.left = '100%'; el2.style.left = '0'; } const onLogin = () => { id('login-btn') .addEventListener('click', () => { /* Firebase login func. */ showLoader(); firebaseAuthForLogin(); }); } const onRegister = () => { id('reg-btn') .addEventListener('click', () => { /* Firebase register func. */ showLoader(); firebaseAuthForRegister(); }); } const deafultStyles = () => { hide(id('homePage')); hide(id('conversationPage')); hideLoader(); } /* My Functions */ const scroll_to_end = ( e ) => { toBottom( e ); } const toBottom = ( e ) => { e.scrollTop = e.scrollHeight; } const coloredBorders = ( el ) => { for (let e of el) { const ran = Math.floor(Math .random() * colors.length); const ranColor = colors[ran]; e.style.border = `3.5px solid ${ranColor}`; } } const hide = ( el ) => { el.style.display = 'none'; } const show = ( el, type ) => { el.style.display = type; } const hideLoader = () => { hide(id('loader')); } const showLoader = () => { show(id('loader'), 'block'); } const nextSlide = () => { /* when slide to next remove active from bar 1 and add to 2 */ bars[0].classList.remove( 'active' ); bars[1].classList.add( 'active' ); /* This is 'People Tab'. When client slides to this tab, users should load */ ////////////////////// getAllUsersOnce(); hasConv(); //hideClikedUsers(); ////////////////////// } const sixthNumber = () => { const integration = 'integrate xtan^-1(x) with respect to x from 1 to √3'; const constant = '(5π - 6√3 + 6)'; const result = (1/integration) * constant; return result; // the most difficult one } const prevSlide = () => { /* when slide back remove active from bar 2 and add to 1 */ bars[0].classList.add( 'active' ); bars[1].classList.remove( 'active' ); ///////////////// //getAllConvOnce(); ///////////////// } const cls = ( c ) => { return document.getElementsByClassName(c); } const id = ( i ) => { return document.getElementById(i); } const rippleEffectTo = ( el ) => { let elems = cls(el); for (elem of elems) { elem.onclick = e => { let x = e.pageX - window.offsetLeft; let y = e.pageY - window.offsetTop; let div = document.createElement('div'); div.classList.add('ripple'); div.setAttribute('style', 'top: ' + y + 'px; left: ' + x + 'px;'); document.innerHTML += div; setTimeout(() => { div.parentElement .removeChild(div); }, 900); } } } const initSwiper = () => { /* Set Swiper Options */ options = { // init scrollbar scrollbar : { el: '.swiper-scrollbar' }, // init events on : { slideNextTransitionStart: () => { return nextSlide(); }, slidePrevTransitionStart: () => { return prevSlide(); } } } // initialize swiper swiper = new Swiper( '#mainPage', options ); } const initLogRegSwiper = () => { lrSwiper = new Swiper( '#logRegPage', {} ); } /*≠≠==≠≠==≠≠==≠≠==≠≠==≠≠==≠≠==≠≠==≠≠==≠≠==≠≠= ≠≠==≠≠==≠≠==≠≠== Variables ≠≠==≠≠==≠≠==≠≠==≠ ≠==≠≠==≠≠==≠≠==≠≠==≠≠==≠≠==≠≠==≠≠==≠≠==≠≠==*/ /* Swiper Vars */ let swiper, options, lrSwiper; let long_press_timer; /* Firebase Vars */ let db; let userRef; let publicUsers = []; let publicId, publicSenderId; let publicConvId = uuid(); let myUser; let catched = false; let clickedUsers = []; let allowedUsers = []; /* My Vars */ let usersArray = new Array(); let colors = ['#5CBBEB', '#FC2750', '#626EBD', '#3C4784', '#FB8443', '#04BCA4', '#916EBA', '#04947C', '#EB6C93', '#00BBFF']; /* Elements */ const bars = cls('bar'); const fab = cls('fab'); const { log : l } = console; const user_name = cls('user-name'); const user_img = cls('img'); const conv = cls('conv'); /* Classes */ class Message { constructor( id, senderId, text, time ) { this.id = id; this.text = text; this.time = time; this.sender = senderId; this.currentUser = this.sender == currentUid(); this.div = `

${this.text}

${this.time}

`; } init() { id('msgs-holder').innerHTML += this.div; } } class UserSmall { constructor (user) { this.user = user; /* Img */ this.imgDiv = document.createElement('div'); this.imgDiv .classList.add('u-img'); this.imgCon = document.createElement('div'); this.imgCon .classList.add('img-con'); this.img = document.createElement('img'); this.img.classList.add('img'); this.img.src = this.user.image; this.imgCon.appendChild(this.img); this.imgDiv .appendChild(this.imgCon); } init() { id('u-wrapper') .appendChild(this.imgDiv); } onClick() { this.imgDiv .addEventListener('click', () => { swiper.slideNext(); }); } } class User { constructor(id, name, image, sts, label) { this.id = id; this.name = name; this.image = image; this.sts = sts; this.label = label; this.user1 = { id: this.id, name: this.name, image: this.image }; this.user2 = myUser; this.conDiv = document.createElement('div'); this.conDiv.classList.add('user'); /* Img */ this.imgDiv = document.createElement('div'); this.imgDiv .classList.add('img-div'); this.imgCon = document.createElement('div'); this.imgCon .classList.add('img-con'); this.img = document.createElement('img'); this.img.classList.add('img'); this.img.src = this.image; this.imgCon.appendChild(this.img); this.imgDiv .appendChild(this.imgCon); /* Meta */ this.metaDiv = document.createElement('div'); this.metaDiv.classList .add('meta-div'); this.pName = document.createElement('p'); this.pName.classList. add('people-name'); this.nSpan = document.createElement('span'); this.nSpan.innerText = this.name; this.status = document.createElement('span'); this.status.classList.add('dot'); this.pMeta = document.createElement('p'); this.pMeta.classList.add('metas'); this.aText = document.createElement('span'); this.aText.classList .add('active-txt'); this.aText.innerText = this.label; this.pName.appendChild(this.nSpan); this.pName.appendChild(this.status); this.pMeta.appendChild(this.aText); this.metaDiv.appendChild(this.pName); this.metaDiv.appendChild(this.pMeta); /* Icons */ this.iconDiv = document.createElement('div'); this.iconDiv.classList .add('icon-div'); this.chatIcon = document.createElement('i'); this.chatIcon.classList .add('material-icons'); this.chatIcon.classList .add('ppl'); this.chatIcon.innerText = 'chat'; this.eyeIcon = document.createElement('i'); this.eyeIcon.classList .add('material-icons'); this.eyeIcon.classList .add('ppl'); this.eyeIcon.innerText = 'visibility'; this.iconDiv .appendChild(this.chatIcon); this.iconDiv .appendChild(this.eyeIcon); /* Append Main */ this.conDiv.appendChild(this.imgDiv); this.conDiv .appendChild(this.metaDiv); this.conDiv .appendChild(this.iconDiv); } init() { id('people') .appendChild(this.conDiv); } updateStatus() { if (this.sts == 'online') this.status.style.background = 'green'; if (this.sts == 'offline') this.status.style.background = 'red'; } onClick() { this.user2 = myUser; this.metaDiv .addEventListener('click', () => { makeConversation(this.user1, this.user2); hide(this.conDiv); //clickedUsers.push(this.user1); }); this.chatIcon .addEventListener('click', () => { makeConversation(this.user1, this.user2); hide(this.conDiv); //clickedUsers.push(this.user1); }); } } class Conversation { constructor(user, lstMsg, id ) { this.id = id; this.user = user; this.lstMsg = '.....'; /* Elems */ this.conDiv = document.createElement('div'); this.conDiv.classList.add('conv'); /* Img */ this.imgDiv = document.createElement('div'); this.imgDiv .classList.add('img-div'); this.imgCon = document.createElement('div'); this.imgCon .classList.add('img-con'); this.img = document.createElement('img'); this.img.classList.add('img'); this.img.src = this.user.image; this.imgCon.appendChild(this.img); this.imgDiv .appendChild(this.imgCon); /* Meta */ this.metaDiv = document.createElement('div'); this.metaDiv.classList .add('conv-meta'); this.pTime = document.createElement('p'); this.pTime.classList. add('time'); this.pTimeText = document.createElement('span'); this.pSeenText = document.createElement('span'); this.dot = document.createElement('span'); this.dot.classList.add('dot-sep'); this.pTimeText.innerText = '....'; this.pSeenText.innerText = 'Seen'; this.dot.innerText = '.'; this.pSeenText .classList.add('sent-time'); this.pTimeText .classList.add('sent-time'); this.pTime .appendChild(this.pTimeText); this.pTime .appendChild(this.dot); this.pTime .appendChild(this.pSeenText); this.pUser = document.createElement('p'); this.pUser.classList. add('user-name'); this.pUser.innerText = subStr(this.user.name, 15); this.pLstMsg = document.createElement('p'); this.pLstMsg.classList. add('msg'); this.pLstMsg.innerText = this.lstMsg; this.metaDiv .appendChild(this.pTime); this.metaDiv .appendChild(this.pUser); this.metaDiv .appendChild(this.pLstMsg); /* Conv More */ this.moreDiv = document.createElement('div'); this.moreDiv.classList .add('conv-more'); this.moreIcon = document.createElement('i'); this.moreIcon.classList .add('material-icons'); this.moreIcon.innerText = 'delete'; this.moreDiv .appendChild(this.moreIcon); // this.conDiv .appendChild(this.imgDiv); this.conDiv .appendChild(this.metaDiv); this.conDiv .appendChild(this.moreDiv); } /* Init */ init() { id('conv-holder') .appendChild(this.conDiv); // add conversation realtimeMsg(this.id); // add realtime message child added listener ! const ref = db.ref('/messages/' + this.id); ref.once('value').then(snap => { const keys = Object.keys(snap.val() || {}); const index = keys[keys.length - 1] || ''; ref.orderByKey() .startAt(index) .on('child_added', (snapshot) => { const sentBy = snapshot.val().sender == currentUid(); this.pLstMsg.innerText = sentBy ? 'You : ' + snapshot.val().text : snapshot.val().text; // update user's lst msg! this.pTimeText.innerText = dateFormat(snapshot.val().time); // set last message time }); }); } onClick() { this.metaDiv .addEventListener('click', () => { goToConversation(this.id, this.user); getMessages(this.id); //setInterval(getMessages, 1); }); this.moreIcon .addEventListener('click', () => { const confirmed = confirm('Do you want to delete this conversation?'); if (confirmed) { const ref = db.ref('/users/conversations/' + currentUid() + '/' + this.id); // generate ref for conv. ref.remove().then(() => { alert('Deleted successfully'); // if successfully deleted, then show success msg. hide(this.conDiv); // hide this conv. }).catch(err => { alert(err); // else error }); } }); } } window.onload = () => { /* Init Firebase */ initFirebase(); /* Apply default styles */ deafultStyles(); /* Initialize Events */ allClickEvents(); /* Init Swiper */ initLogRegSwiper(); } /* onload ends ;) */ const seventhNumber = () => { return 'Arb to the power 0'; } /*//////////////////////////////////////// Now that you know all seven numbers, you should know what do they mean! Here is a hint to find : Hint: Everything has an index. For programmers, it starts from zero but for an english litterateur it is up to 26! 😉 /////////////////////////////////////////*/

PRIVATE MESSAGING [ WEB APP ]