515 lines
22 KiB
JavaScript
515 lines
22 KiB
JavaScript
/*
|
||
Template Name: Grenviro Monitoring
|
||
Author: Themesbrand
|
||
Website: https://Themesbrand.com/
|
||
Contact: Themesbrand@gmail.com
|
||
File: mailbox init Js File
|
||
*/
|
||
|
||
var url="build/json/";
|
||
var allmaillist = '';
|
||
const loader = document.querySelector("#elmLoader");
|
||
// showing loading
|
||
|
||
//mail list by json
|
||
var getJSON = function (jsonurl, callback) {
|
||
var xhr = new XMLHttpRequest();
|
||
xhr.open("GET", url + jsonurl, true);
|
||
xhr.responseType = "json";
|
||
xhr.onload = function () {
|
||
var status = xhr.status;
|
||
if (status === 200) {
|
||
document.getElementById("elmLoader").innerHTML = '';
|
||
callback(null, xhr.response);
|
||
} else {
|
||
callback(status, xhr.response);
|
||
}
|
||
};
|
||
xhr.send();
|
||
};
|
||
|
||
// load mail data
|
||
function loadMailData(datas) {
|
||
var triggerEl = document.querySelector('#mail-filter-navlist button[data-bs-target="#pills-primary"]')
|
||
triggerEl.click()
|
||
document.querySelector("#mail-list").innerHTML = '';
|
||
|
||
Array.from(datas).forEach(function (mailData, index) {
|
||
|
||
var checkReaded = mailData.readed ? "" : "unread";
|
||
var checkStarred = mailData.starred ? "active" : "";
|
||
var mailcounted = mailData.counted ? '(' + mailData.counted + ')' : "";
|
||
|
||
document.querySelector("#mail-list").innerHTML +=
|
||
'<li class="' + checkReaded + '">\
|
||
<div class="col-mail col-mail-1">\
|
||
<div class="form-check checkbox-wrapper-mail fs-14">\
|
||
<input class="form-check-input" type="checkbox" value="' + mailData.id + '" id="checkbox-' + mailData.id + '">\
|
||
<label class="form-check-label" for="checkbox-' + mailData.id + '"></label>\
|
||
</div>\
|
||
<input type="hidden" value=' + mailData.userImg + ' class="mail-userimg" />\
|
||
<button type="button" class="btn avatar-xs p-0 favourite-btn fs-15 ' + checkStarred + '">\
|
||
<i class="ri-star-fill"></i>\
|
||
</button>\
|
||
<a href="javascript: void(0);" class="title"><span class="title-name">' + mailData.name + '</span> ' + mailcounted + '</a>\
|
||
</div>\
|
||
<div class="col-mail col-mail-2">\
|
||
<a href="javascript: void(0);" class="subject"><span class="subject-title">' + mailData.title + '</span> – <span class="teaser">' + mailData.description + '</span>\
|
||
</a>\
|
||
<div class="date">' + mailData.date + '</div>\
|
||
</div>\
|
||
</li>';
|
||
favouriteBtn();
|
||
emailDetailShow();
|
||
emailDetailChange();
|
||
checkBoxAll();
|
||
});
|
||
}
|
||
|
||
// load social mail data
|
||
function loadSocialMailData(datas) {
|
||
Array.from(datas).forEach(function (mailData, index) {
|
||
var checkReaded = mailData.readed ? "" : "unread";
|
||
var checkStarred = mailData.starred ? "active" : "";
|
||
var mailcounted = mailData.counted ? '(' + mailData.counted + ')' : "";
|
||
|
||
document.getElementById("social-mail-list").innerHTML +=
|
||
'<li class="' + checkReaded + '">\
|
||
<div class="col-mail col-mail-1">\
|
||
<div class="form-check checkbox-wrapper-mail fs-14">\
|
||
<input class="form-check-input" type="checkbox" value="' + mailData.id + '" id="checkbox-' + mailData.id + '">\
|
||
<label class="form-check-label" for="checkbox-' + mailData.id + '"></label>\
|
||
</div>\
|
||
<input type="hidden" value=' + mailData.userImg + ' class="mail-userimg" />\
|
||
<button type="button" class="btn avatar-xs p-0 favourite-btn fs-15 ' + checkStarred + '">\
|
||
<i class="ri-star-fill"></i>\
|
||
</button>\
|
||
<a href="javascript: void(0);" class="title"><span class="title-name">' + mailData.name + '</span> ' + mailcounted + '</a>\
|
||
</div>\
|
||
<div class="col-mail col-mail-2">\
|
||
<a href="javascript: void(0);" class="subject"><span class="subject-title">' + mailData.title + '</span> – <span class="teaser">' + mailData.description + '</span>\
|
||
</a>\
|
||
<div class="date">' + mailData.date + '</div>\
|
||
</div>\
|
||
</li>';
|
||
emailDetailShow();
|
||
emailDetailChange();
|
||
checkBoxAll();
|
||
});
|
||
}
|
||
|
||
// load promotions mail data
|
||
function loadPromotionsMailData(datas) {
|
||
Array.from(datas).forEach(function (mailData, index) {
|
||
var checkReaded = mailData.readed ? "" : "unread";
|
||
var checkStarred = mailData.starred ? "active" : "";
|
||
var mailcounted = mailData.counted ? '(' + mailData.counted + ')' : "";
|
||
|
||
document.getElementById("promotions-mail-list").innerHTML +=
|
||
'<li class="' + checkReaded + '">\
|
||
<div class="col-mail col-mail-1">\
|
||
<div class="form-check checkbox-wrapper-mail fs-14">\
|
||
<input class="form-check-input" type="checkbox" value="' + mailData.id + '" id="checkbox-' + mailData.id + '">\
|
||
<label class="form-check-label" for="checkbox-' + mailData.id + '"></label>\
|
||
</div>\
|
||
<input type="hidden" value=' + mailData.userImg + ' class="mail-userimg" />\
|
||
<button type="button" class="btn avatar-xs p-0 favourite-btn fs-15 ' + checkStarred + '">\
|
||
<i class="ri-star-fill"></i>\
|
||
</button>\
|
||
<a href="javascript: void(0);" class="title"><span class="title-name">' + mailData.name + '</span> ' + mailcounted + '</a>\
|
||
</div>\
|
||
<div class="col-mail col-mail-2">\
|
||
<a href="javascript: void(0);" class="subject"><span class="subject-title">' + mailData.title + '</span> – <span class="teaser">' + mailData.description + '</span>\
|
||
</a>\
|
||
<div class="date">' + mailData.date + '</div>\
|
||
</div>\
|
||
</li>';
|
||
emailDetailShow();
|
||
emailDetailChange();
|
||
checkBoxAll();
|
||
});
|
||
}
|
||
|
||
// get json
|
||
getJSON("mail-list.init.json", function (err, data) {
|
||
if (err !== null) {
|
||
console.log("Something went wrong: " + err);
|
||
} else {
|
||
allmaillist = data[0].primary;
|
||
socialmaillist = data[0].social;
|
||
promotionsmaillist = data[0].promotions;
|
||
|
||
loadMailData(allmaillist);
|
||
loadSocialMailData(socialmaillist);
|
||
loadPromotionsMailData(promotionsmaillist);
|
||
}
|
||
});
|
||
|
||
|
||
// mail list click event
|
||
Array.from(document.querySelectorAll('.mail-list a')).forEach(function (mailTab) {
|
||
mailTab.addEventListener("click", function () {
|
||
var chatUserList = document.querySelector(".mail-list a.active");
|
||
if (chatUserList) chatUserList.classList.remove("active");
|
||
mailTab.classList.add('active');
|
||
|
||
if (mailTab.querySelector('.mail-list-link').hasAttribute('data-type')) {
|
||
var tabname = mailTab.querySelector('.mail-list-link').innerHTML;
|
||
var filterData = allmaillist.filter(maillist => maillist.labeltype === tabname);
|
||
} else {
|
||
var tabname = mailTab.querySelector('.mail-list-link').innerHTML;
|
||
document.getElementById("mail-list").innerHTML = '';
|
||
if (tabname != 'All') {
|
||
var filterData = allmaillist.filter(maillist => maillist.tabtype === tabname);
|
||
} else {
|
||
var filterData = allmaillist;
|
||
}
|
||
if (tabname != 'All' && tabname != 'Inbox') {
|
||
document.getElementById("mail-filter-navlist").style.display = "none";
|
||
} else {
|
||
document.getElementById("mail-filter-navlist").style.display = "block";
|
||
}
|
||
}
|
||
loadMailData(filterData);
|
||
favouriteBtn();
|
||
});
|
||
})
|
||
|
||
// favourite btn
|
||
function favouriteBtn() {
|
||
Array.from(document.querySelectorAll(".favourite-btn")).forEach(function (item) {
|
||
item.addEventListener("click", function () {
|
||
if (item.classList.contains("active")) {
|
||
item.classList.remove("active");
|
||
} else {
|
||
item.classList.add("active");
|
||
}
|
||
});
|
||
});
|
||
}
|
||
favouriteBtn();
|
||
|
||
// emailDetailShow
|
||
function emailDetailShow() {
|
||
var bodyElement = document.getElementsByTagName('body')[0];
|
||
Array.from(document.querySelectorAll(".message-list a")).forEach(function (item) {
|
||
item.addEventListener("click", function (event) {
|
||
bodyElement.classList.add("email-detail-show");
|
||
Array.from(document.querySelectorAll(".message-list li.unread")).forEach(function (element) {
|
||
if (element.classList.contains("unread")) {
|
||
event.target.closest('li').classList.remove("unread");
|
||
}
|
||
});
|
||
});
|
||
});
|
||
|
||
Array.from(document.querySelectorAll(".close-btn-email")).forEach(function (item) {
|
||
item.addEventListener("click", function () {
|
||
bodyElement.classList.remove("email-detail-show");
|
||
});
|
||
});
|
||
|
||
var isShowMenu = false;
|
||
var emailMenuSidebar = document.getElementsByClassName('email-menu-sidebar');
|
||
Array.from(document.querySelectorAll(".email-menu-btn")).forEach(function (item) {
|
||
item.addEventListener("click", function () {
|
||
Array.from(emailMenuSidebar).forEach(function (elm) {
|
||
elm.classList.add("menubar-show");
|
||
isShowMenu = true;
|
||
});
|
||
});
|
||
});
|
||
|
||
window.addEventListener('click', function (e) {
|
||
if (document.querySelector(".email-menu-sidebar").classList.contains('menubar-show')) {
|
||
if (!isShowMenu) {
|
||
document.querySelector(".email-menu-sidebar").classList.remove("menubar-show");
|
||
}
|
||
isShowMenu = false;
|
||
}
|
||
});
|
||
favouriteBtn();
|
||
}
|
||
|
||
// editor
|
||
ClassicEditor.create(document.querySelector('#email-editor')).then(function (editor) {
|
||
editor.ui.view.editable.element.style.height = '200px';
|
||
})
|
||
.catch(function (error) {
|
||
console.error(error);
|
||
});
|
||
|
||
// check all
|
||
function checkBoxAll() {
|
||
// checkbox-wrapper-mail
|
||
Array.from(document.querySelectorAll(".checkbox-wrapper-mail input")).forEach(function (element) {
|
||
element.addEventListener('click', function (el) {
|
||
if (el.target.checked == true) {
|
||
el.target.closest('li').classList.add("active");
|
||
} else {
|
||
el.target.closest('li').classList.remove("active");
|
||
}
|
||
});
|
||
});
|
||
|
||
// checkbox
|
||
var checkboxes = document.querySelectorAll('.tab-pane.show .checkbox-wrapper-mail input');
|
||
Array.from(checkboxes).forEach(function (element) {
|
||
element.addEventListener('click', function (event) {
|
||
var checkboxes = document.querySelectorAll('.tab-pane.show .checkbox-wrapper-mail input');
|
||
var checkall = document.getElementById('checkall');
|
||
var checkedCount = document.querySelectorAll('.tab-pane.show .checkbox-wrapper-mail input:checked').length;
|
||
checkall.checked = checkedCount > 0;
|
||
checkall.indeterminate = checkedCount > 0 && checkedCount < checkboxes.length;
|
||
|
||
if (event.target.closest('li').classList.contains("active")) {
|
||
(checkedCount > 0) ? document.getElementById("email-topbar-actions").style.display = 'block': document.getElementById("email-topbar-actions").style.display = 'none';
|
||
} else {
|
||
(checkedCount > 0) ? document.getElementById("email-topbar-actions").style.display = 'block': document.getElementById("email-topbar-actions").style.display = 'none';
|
||
}
|
||
});
|
||
});
|
||
|
||
|
||
function checkAll() {
|
||
var checkboxes = document.querySelectorAll('.tab-pane.show .checkbox-wrapper-mail input');
|
||
var checkedCount = document.querySelectorAll('.tab-pane.show .checkbox-wrapper-mail input:checked').length;
|
||
Array.from(checkboxes).forEach(function (chkbox) {
|
||
chkbox.checked = true;
|
||
chkbox.parentNode.parentNode.parentNode.classList.add("active");
|
||
});
|
||
(checkedCount > 0) ? document.getElementById("email-topbar-actions").style.display = 'none' : document.getElementById("email-topbar-actions").style.display = 'block';
|
||
|
||
if (checkedCount > 0) {
|
||
Array.from(checkboxes).forEach(function (chkbox) {
|
||
chkbox.checked = false;
|
||
chkbox.parentNode.parentNode.parentNode.classList.remove("active");
|
||
});
|
||
} else {
|
||
Array.from(checkboxes).forEach(function (chkbox) {
|
||
chkbox.checked = true;
|
||
chkbox.parentNode.parentNode.parentNode.classList.add("active");
|
||
});
|
||
}
|
||
this.onclick = uncheckAll;
|
||
removeItems();
|
||
}
|
||
|
||
function uncheckAll() {
|
||
var checkboxes = document.querySelectorAll('.tab-pane.show .checkbox-wrapper-mail input');
|
||
var checkedCount = document.querySelectorAll('.tab-pane.show .checkbox-wrapper-mail input:checked').length;
|
||
Array.from(checkboxes).forEach(function (chkbox) {
|
||
chkbox.checked = false;
|
||
chkbox.parentNode.parentNode.parentNode.classList.remove("active");
|
||
});
|
||
(checkedCount > 0) ? document.getElementById("email-topbar-actions").style.display = 'none' : document.getElementById("email-topbar-actions").style.display = 'block';
|
||
if (checkedCount > 0) {
|
||
Array.from(checkboxes).forEach(function (chkbox) {
|
||
chkbox.checked = false;
|
||
chkbox.parentNode.parentNode.parentNode.classList.remove("active");
|
||
});
|
||
} else {
|
||
Array.from(checkboxes).forEach(function (chkbox) {
|
||
chkbox.checked = true;
|
||
chkbox.parentNode.parentNode.parentNode.classList.add("active");
|
||
});
|
||
}
|
||
this.onclick = checkAll;
|
||
}
|
||
|
||
var checkall = document.getElementById("checkall");
|
||
checkall.onclick = checkAll;
|
||
}
|
||
|
||
//User current Id
|
||
var currentChatId = "users-chat";
|
||
scrollToBottom(currentChatId);
|
||
// // Scroll to Bottom
|
||
function scrollToBottom(id) {
|
||
setTimeout(() => {
|
||
var scrollEl = new SimpleBar(document.getElementById('chat-conversation'));
|
||
scrollEl.getScrollElement().scrollTop = document.getElementById("users-conversation").scrollHeight;
|
||
}, 100);
|
||
}
|
||
|
||
// removeItems
|
||
function removeItems() {
|
||
var removeItem = document.getElementById('removeItemModal');
|
||
removeItem.addEventListener('show.bs.modal', function (event) {
|
||
document.getElementById("delete-record").addEventListener("click", function () {
|
||
Array.from(document.querySelectorAll(".message-list li")).forEach(function (element) {
|
||
var filtered = '';
|
||
if (element.classList.contains("active")) {
|
||
|
||
var getid = element.querySelector('.form-check-input').value;
|
||
|
||
function arrayRemove(arr, value) {
|
||
return arr.filter(function (ele) {
|
||
return ele.id != value;
|
||
});
|
||
}
|
||
|
||
var filtered = arrayRemove(allmaillist, getid);
|
||
|
||
allmaillist = filtered;
|
||
|
||
element.remove();
|
||
}
|
||
});
|
||
document.getElementById("btn-close").click();
|
||
if (document.getElementById("email-topbar-actions"))
|
||
document.getElementById("email-topbar-actions").style.display = 'none';
|
||
checkall.indeterminate = false;
|
||
checkall.checked = false;
|
||
});
|
||
})
|
||
}
|
||
removeItems();
|
||
|
||
function removeSingleItem() {
|
||
var getid = 0;
|
||
document.querySelectorAll(".remove-mail").forEach(function (item) {
|
||
item.addEventListener('click', function (event) {
|
||
getid = item.getAttribute('data-remove-id');
|
||
document.getElementById("delete-record").addEventListener("click", function () {
|
||
var filtered = '';
|
||
function arrayRemove(arr, value) {
|
||
return arr.filter(function (ele) {
|
||
return ele.id != value;
|
||
});
|
||
}
|
||
filtered = arrayRemove(allmaillist, getid);
|
||
allmaillist = filtered;
|
||
loadMailData(allmaillist);
|
||
document.getElementById("close-btn-email").click();
|
||
});
|
||
});
|
||
});
|
||
}
|
||
removeSingleItem();
|
||
|
||
var markAllReadBtn = document.getElementById("mark-all-read");
|
||
|
||
markAllReadBtn.addEventListener('click', function (event) {
|
||
if (document.querySelectorAll(".message-list li.unread").length === 0) {
|
||
document.getElementById("unreadConversations").style.display = "block";
|
||
setTimeout(hideclipboardNew, 1000);
|
||
|
||
function hideclipboardNew() {
|
||
document.getElementById("unreadConversations").style.display = "none";
|
||
}
|
||
};
|
||
|
||
Array.from(document.querySelectorAll(".message-list li.unread")).forEach(function (element) {
|
||
if (element.classList.contains("unread")) {
|
||
element.classList.remove("unread");
|
||
}
|
||
});
|
||
});
|
||
|
||
var dummyUserImage = "build/images/users/user-dummy-img.jpg";
|
||
|
||
// email chat detail element
|
||
var mailChatDetailElm = false;
|
||
document.querySelectorAll(".email-chat-list a").forEach(function (item) {
|
||
if (item.classList.contains("active")) {
|
||
document.getElementById("emailchat-detailElem").style.display = "block";
|
||
var userListName = document.querySelector(".email-chat-list a.active").querySelector(".chatlist-user-name").innerHTML;
|
||
var userListProfile = document.querySelector(".email-chat-list a.active").querySelector(".chatlist-user-image img").getAttribute("src");
|
||
document.querySelector(".email-chat-detail .profile-username").innerHTML = userListName;
|
||
document.getElementById("users-conversation").querySelectorAll(".left .chat-avatar").forEach(function (item) {
|
||
if (userListProfile) {
|
||
item.querySelector("img").setAttribute("src", userListProfile);
|
||
} else {
|
||
item.querySelector("img").setAttribute("src", dummyUserImage);
|
||
}
|
||
});
|
||
}
|
||
item.addEventListener("click", function (event) {
|
||
document.getElementById("emailchat-detailElem").style.display = "block";
|
||
mailChatDetailElm = true;
|
||
|
||
// chat user list link active
|
||
var chatUserList = document.querySelector(".email-chat-list a.active");
|
||
if (chatUserList) chatUserList.classList.remove("active");
|
||
this.classList.add("active");
|
||
|
||
var currentChatId = "users-chat";
|
||
scrollToBottom(currentChatId);
|
||
|
||
//user Name and user Profile change on click
|
||
var username = item.querySelector(".chatlist-user-name").innerHTML;
|
||
var userProfile = item.querySelector(".chatlist-user-image img").getAttribute("src");
|
||
|
||
document.querySelector(".email-chat-detail .profile-username").innerHTML = username;
|
||
var conversationImg = document.getElementById("users-conversation");
|
||
Array.from(conversationImg.querySelectorAll(".left .chat-avatar")).forEach(function (item) {
|
||
if (userProfile) {
|
||
item.querySelector("img").setAttribute("src", userProfile);
|
||
} else {
|
||
item.querySelector("img").setAttribute("src", dummyUserImage);
|
||
}
|
||
});
|
||
});
|
||
});
|
||
|
||
document.getElementById("emailchat-btn-close").addEventListener("click", function () {
|
||
document.getElementById("emailchat-detailElem").style.display = "none";
|
||
mailChatDetailElm = false;
|
||
document.querySelector(".email-chat-list a.active").classList.remove("active");
|
||
})
|
||
|
||
// emailDetailChange
|
||
function emailDetailChange() {
|
||
Array.from(document.querySelectorAll(".message-list li")).forEach(function (item) {
|
||
item.addEventListener("click", function () {
|
||
var mailListId = item.querySelector(".checkbox-wrapper-mail .form-check-input").value
|
||
document.querySelector(".remove-mail").setAttribute("data-remove-id", mailListId);;
|
||
var subjectTitle = item.querySelector(".subject-title").innerHTML;
|
||
document.querySelector(".email-subject-title").innerHTML = subjectTitle;
|
||
|
||
var emailTitleLeftName = item.querySelector(".title-name").innerHTML;
|
||
Array.from(document.querySelectorAll(".accordion-item.left")).forEach(function (subitem) {
|
||
subitem.querySelector(".email-user-name").innerHTML = emailTitleLeftName;
|
||
var userImg = item.querySelector(".mail-userimg").value;
|
||
subitem.querySelector("img").setAttribute("src", userImg)
|
||
});
|
||
|
||
var messageUserName = document.querySelector(".user-name-text").innerHTML;
|
||
var usermailProfile = document.querySelector(".header-profile-user").getAttribute("src");
|
||
Array.from(document.querySelectorAll(".accordion-item.right")).forEach(function (subitem) {
|
||
subitem.querySelector(".email-user-name-right").innerHTML = messageUserName;
|
||
subitem.querySelector("img").setAttribute("src", usermailProfile);
|
||
});
|
||
});
|
||
});
|
||
}
|
||
|
||
const triggerTabList = document.querySelectorAll('#mail-filter-navlist .nav-tabs button')
|
||
triggerTabList.forEach(triggerEl => {
|
||
const tabTrigger = new bootstrap.Tab(triggerEl)
|
||
|
||
triggerEl.addEventListener('click', event => {
|
||
event.preventDefault()
|
||
|
||
var activeTab = document.querySelector(".tab-content .tab-pane.show")
|
||
|
||
tabTrigger.show()
|
||
})
|
||
})
|
||
|
||
|
||
function resizeEvent(){
|
||
var windowSize = document.documentElement.clientWidth;
|
||
if (windowSize < 767) {
|
||
var chatUserList = document.querySelector(".email-chat-list a.active");
|
||
if (chatUserList) chatUserList.classList.remove("active");
|
||
document.getElementById("emailchat-detailElem").style.display = "none";
|
||
}
|
||
}
|
||
resizeEvent();
|
||
|
||
window.onresize = resizeEvent;
|
||
|
||
|