/* Made By __ __ _ _ __ _ __ __ __ \ \ / /| || | / /| | / / \ \ / / \ \ / / | || |/ / | |/ / \ \/ / \ \/ / | || |\ \ | |\ \ \/ / \__/ |_||_| \_\|_| \_\ _/_/ #T&c : Don't copy without my permission ❌ #last_updated: 12-Nov-2019 #summary : Responsive layout of whatsapp UI for screen greater than 260px */ $(() => { var screenWidth = parseInt($(window).width()); var screenHeight = parseInt($(window).height()); const users = [ { avatar: `https://api.sololearn.com/uploads/avatars/10571652.jpg`, name: "Andy", message: "Ugh you're late for the submission..", isTo: false, time: '1:10 AM', isunread: true }, { avatar: `https://api.sololearn.com/uploads/avatars/12942084.jpg`, name: "Aakaanksha💕", message: "😊", isTo: false, time: '11.24 AM', isunread: true }, { avatar: `https://api.sololearn.com/uploads/avatars/7002535.jpg`, name: "Ashwin", message: "😎", isTo: false, time: '9:36 AM', isunread: true }, { avatar: `https://api.sololearn.com/uploads/avatars/8001152.jpg`, name: "Kae🙌🏽☕️", message: "😜", isTo: false, time: '10:15 PM', isunread: true }, { avatar: `https://api.sololearn.com/uploads/avatars/14102594.jpg`, name: "👑Kunyu👑", message: "😄", isTo: false, time: '2:00 PM', isunread: true }, { avatar: `https://api.sololearn.com/uploads/avatars/10228465.jpg`, name: "M.MANIVANNAN", message: "?", isTo: false, time: '4:30 PM', isunread: true }, { avatar: `https://api.sololearn.com/uploads/avatars/11718035.jpg`, name: "Antonio Pin", message: "😱", isTo: false, time: '8:45 PM', isunread: true }, { avatar: null, name: "", message: null, isTo: null, time: null, isunread: null } ] const status = [ { avatar: `https://api.sololearn.com/uploads/avatars/10571682.jpg`, name: "My status", time: 'Today, 01:10 AM' }, { avatar: `https://api.sololearn.com/uploads/avatars/12942084.jpg`, name: "Aakaanksha💕", time: '15 minutes ago', }, { avatar: `https://api.sololearn.com/uploads/avatars/7002535.jpg`, name: "Ashwin", time: 'Today, 12:02 PM', }, { avatar: `https://api.sololearn.com/uploads/avatars/8001152.jpg`, name: "Kae🙌🏽☕️", time: 'Today, 12:00 PM', }, { avatar: `https://api.sololearn.com/uploads/avatars/14102594.jpg`, name: "👑Kunyu👑", time: 'Today, 11.42 AM', }, { avatar: `https://api.sololearn.com/uploads/avatars/10228465.jpg`, name: "M.MANIVANNAN", time: 'Yesterday, 4:30 PM', }, { avatar: `https://api.sololearn.com/uploads/avatars/11718035.jpg`, name: "Antonio Pin", time: 'Yesterday, 2:45 PM', }, { avatar:null, name:'', time:null } ] const calls = [ { avatar: `https://api.sololearn.com/uploads/avatars/10571682.jpg`, name: "Vignesh", type: 'i', time: 'November 10, 1:10 AM', AV: true }, { avatar: `https://api.sololearn.com/uploads/avatars/12942084.jpg`, name: "Aakaanksha💕", type: 'm', time: 'November 10, 4:10 PM', AV: true }, { avatar: `https://api.sololearn.com/uploads/avatars/7002535.jpg`, name: "Ashwin", type: 'o', time: 'Today, 12:02 PM', AV: false }, { avatar: `https://api.sololearn.com/uploads/avatars/8001152.jpg`, name: "Kae🙌🏽☕️", type: 'i', time: 'Today, 12:00 PM', AV: false }, { avatar: `https://api.sololearn.com/uploads/avatars/14102594.jpg`, name: "👑Kunyu👑", type: 'i', time: 'Today, 11.42 AM', AV: false }, { avatar: null, name: "", type: null, time: null, AV: false } ] setsize = () => { // var ofst = parseInt($(".nav-search").offset()); // $(".search").css({'transform-origin':`${(ofst.left*100)/screenWidth}% ${(ofst.top*100)/screenHeight}%`}) var opt = parseInt($("#backbtn").css('width')) + parseInt($("#clrbtn").css('width')); $(".search input").css({ 'width': (screenWidth - opt - 20) + 'px' }); $('#camera-tab').css({ 'width': ((screenWidth * 0.1)) + 'px' }); $('.tab-item:not(#camera-tab)').css({ 'width': (((screenWidth * 0.9) / 3)) + 'px' }); var navHeight = parseInt($(".nav").css('height')); $(".content").css({ 'height': screenHeight - navHeight - 1 + 'px' }); checkUnread(); var profilewidth = parseInt($(".profilepic img").css('width')) || 0; $(".msg-content").css({ 'width': screenWidth - profilewidth - 30 + 'px' }); const msgContent = parseInt($(".msg-content").css('width')) const msgrow2 = parseInt($(".msgrow2").css('width')) $(".msgrow1").css({ 'width': msgContent - msgrow2 + 'px' }) var sprofilewidth = parseInt($(".s-profilepic img").css('width')); $(".s-content").css({ 'width': screenWidth - sprofilewidth - 30 + 'px' }); const sContent = parseInt($(".s-content").css('width')) const srow2 = parseInt($(".srow2").css('width')) $(".srow1").css({ 'width': sContent - srow2 + 'px' }) var cprofilewidth = parseInt($(".c-profilepic img").css('width')); $(".c-content").css({ 'width': screenWidth - cprofilewidth - 30 + 'px' }); const cContent = parseInt($(".c-content").css('width')) const crow2 = parseInt($(".crow2").css('width')) $(".crow1").css({ 'width': cContent - crow2 + 'px' }) var fbtnw = parseInt($(".f-btn").css('width')) var fbtnh = parseInt($(".f-btn").css('height')) //console.log(fbtnw,fbtnh); $(".f-btn").css({ 'top': screenHeight - fbtnh-10 + 'px', 'left': screenWidth - fbtnw + 10 + 'px' }); var mWidth = parseInt($(".more ul").css('width')); $(".more ul").css({ 'left': screenWidth - mWidth - 25 + 'px' }); } checkUnread = () => { var unread_msg = 0; $(".msgrow2 .msg-badge").toArray().forEach(msg => { msg.dataset['isRead'] == 'false' ? unread_msg += 1 : null; }) $(".notf-badge").text(unread_msg); } handleClick = (e) => { const el = $(e); //console.log(el.attr('class').split(' ')[0], screenWidth) switch (el.attr('class').split(' ')[0]) { case 'overlay': el.css({ 'display': 'none' }); $(".more").hide(150); break; case 'nav-more': $(".overlay").css({ 'display': 'block' }); $('.more').css({ 'display': 'none' }) var more_opt = $('.tabs .active').attr('data-more').split('.'); more_opt.forEach(opt => { if (opt != '') { $(`.${opt}`).show(200); } }) break; case 'nav-search': $(".search").css({ 'width': `${screenWidth}px`, 'padding': '11px 5px' }); $("#search").focus(); $(".nav-tabs").slideUp(150); break; case 'material-icons': switch (el.attr('id').split(' ')[0]) { case 'backbtn': $('#search').val(''); $("#search").trigger('input'); $(".search").css({ 'width': '0', 'padding': '0' }); $(".nav-tabs").slideDown(150); break; case 'clrbtn': $('#search').val(''); $('#search').focus(); $("#search").trigger('input'); break; default: break; } break; default: break; } }; $("#search").on('input', () => { const str = $('#search').val().toLowerCase(); const pattern = new RegExp(`^(${str.indexOf(' ') != 0 ? [str] : "^[a-z0-9]"})`); switch ($(".tabs .active").attr('id').slice(0, -4)) { case 'chats': const chatstr = users.map(user => { if (pattern.test(user.name.toLowerCase())) { // console.log(true) return newUser(user); } }).join(''); // console.log(chatstr) $("#chats").html(chatstr != '' ? chatstr : `

No resuls found for '${str}'

`); setsize(); break; case 'status': const statusstr = status.map(sts => { if (pattern.test(sts.name.toLowerCase())) { // console.log(true) return newStatus(sts); } }).join(''); // console.log(chatstr) $("#status").html(statusstr != '' ? statusstr : `

No resuls found for '${str}'

`); setsize(); break; case 'calls': const callstr = calls.map(call => { if (pattern.test(call.name.toLowerCase())) { // console.log(true) return newCall(call); } }).join(''); // console.log(chatstr) $("#calls").html(callstr != '' ? callstr : `

No resuls found for '${str}'

`); setsize(); break; } }) slideTo = (el) => { $('.tab-item').removeClass('active'); $(el + '-tab').addClass('active'); const tabs = { '#camera': [0, 1, 2, 3], '#chats': [-1, 0, 1, 2], '#status': [-2, -1, 0, 1], '#calls': [-3, -2, -1, 0] } var elements = ['#camera', '#chats', '#status', '#calls'] var off = $('.tabs .active').offset(); $('.nav-tabs .tab-indicator').css({ 'width': `${$('.tabs .active').css('width')}`, 'margin-left': off.left + 'px' }); tabs[el].forEach((pos, ind) => { var offleft = parseInt($(el).css('width')); $(elements[ind]).css({ 'left': offleft * (pos) + 'px' }); }) $('.floatbtn').css({ 'display': 'none' }) var floatbtn = $(el + '-tab').attr('data-fbtn').split('#'); floatbtn.forEach(btn => { //console.log(btn); if (btn != '') { $(`#${btn}`).css({ 'display': '' }) } }) setsize(); } newMessage = () => { } newUser = (obj) => { // console.log(obj) const { avatar, name, message, isTo, time, isunread } = obj; if(name==""){ return `

Tap and hold the chat for more options

` } return `

${name}

${message}

${time}

` } newStatus = (obj) => { // console.log(obj) const { avatar, name, time } = obj; if (name == 'My status') { return `

${name}

${time}

` } else if(name==""){ return `

` } return `

${name}

${time}

` } newCall = (obj) => { // console.log(obj) const { avatar, name, type, time, AV } = obj; if(name===""){ return `

` } return `

${name}

${time}

` } $(".more ul li, .floatbtn").click(()=>{ alert("This feature is still in developement...!") $(".overlay").trigger("click"); }) init = () => { // var req = new XMLHttpRequest(); // req.open('GET', "https://cors-anywhere.herokuapp.com/https://www.sololearn.com/Profile/11718035",async=false); // req.send(); // console.log(req.responseText) var chats = ""; var statuses = ""; var call = ''; users.forEach(user => { chats += newUser(user); }) status.forEach(status => { statuses += newStatus(status); }); calls.forEach(calls => { call += newCall(calls); }) $("#chats").html(chats); $("#status").html(statuses); $("#calls").html(call); setsize(); $('#chats-tab').trigger('click'); } window.onresize = function () { screenWidth = parseInt($(window).width()); screenHeight = parseInt($(window).height()); slideTo("#" + $(".tabs .active").attr('id').split('-')[0]) setsize(); } init(); alert("Thanks for visiting my code. Do support and share if you like it...!") alert("Not fully functional but will make that in future") })

whatsapp clone v 1.0.0