397 lines
11 KiB
JavaScript
397 lines
11 KiB
JavaScript
/*=========================================================================================
|
|
File Name: app-email.js
|
|
Description: Email Page js
|
|
----------------------------------------------------------------------------------------
|
|
Item Name: Vuexy - Vuejs, HTML & Laravel Admin Dashboard Template
|
|
Author: PIXINVENT
|
|
Author URL: http://www.themeforest.net/user/pixinvent
|
|
==========================================================================================*/
|
|
|
|
'use strict';
|
|
|
|
$(function () {
|
|
// Register Quill Fonts
|
|
var Font = Quill.import('formats/font');
|
|
Font.whitelist = ['sofia', 'slabo', 'roboto', 'inconsolata', 'ubuntu'];
|
|
Quill.register(Font, true);
|
|
|
|
var compose = $('.compose-email'),
|
|
composeMailModal = $('#compose-mail'),
|
|
menuToggle = $('.menu-toggle'),
|
|
sidebarToggle = $('.sidebar-toggle'),
|
|
sidebarLeft = $('.sidebar-left'),
|
|
sidebarMenuList = $('.sidebar-menu-list'),
|
|
emailAppList = $('.email-app-list'),
|
|
emailUserList = $('.email-user-list'),
|
|
emailUserListInput = $('.email-user-list .form-check'),
|
|
emailScrollArea = $('.email-scroll-area'),
|
|
emailTo = $('#email-to'),
|
|
emailCC = $('#emailCC'),
|
|
emailBCC = $('#emailBCC'),
|
|
toggleCC = $('.toggle-cc'),
|
|
toggleBCC = $('.toggle-bcc'),
|
|
wrapperCC = $('.cc-wrapper'),
|
|
wrapperBCC = $('.bcc-wrapper'),
|
|
emailDetails = $('.email-app-details'),
|
|
listGroupMsg = $('.list-group-messages'),
|
|
goBack = $('.go-back'),
|
|
favoriteStar = $('.email-application .email-favorite'),
|
|
userActions = $('.user-action'),
|
|
mailDelete = $('.mail-delete'),
|
|
mailUnread = $('.mail-unread'),
|
|
emailSearch = $('#email-search'),
|
|
composeModal = $('.modal'),
|
|
modalDialog = $('.modal-dialog'),
|
|
editorEl = $('#message-editor .editor'),
|
|
overlay = $('.body-content-overlay'),
|
|
composeMaximize = $('.compose-maximize'),
|
|
isRtl = $('html').attr('data-textdirection') === 'rtl';
|
|
|
|
var assetPath = '../../../app-assets/';
|
|
|
|
if ($('body').attr('data-framework') === 'laravel') {
|
|
assetPath = $('body').attr('data-asset-path');
|
|
}
|
|
|
|
// Toggle BCC on mount
|
|
if (wrapperBCC.length) {
|
|
wrapperBCC.toggle();
|
|
}
|
|
|
|
// Toggle CC on mount
|
|
if (wrapperCC) {
|
|
wrapperCC.toggle();
|
|
}
|
|
|
|
// Toggle BCC input
|
|
if (toggleBCC.length) {
|
|
toggleBCC.on('click', function () {
|
|
wrapperBCC.toggle();
|
|
});
|
|
}
|
|
|
|
// Toggle CC input
|
|
if (toggleCC.length) {
|
|
toggleCC.on('click', function () {
|
|
wrapperCC.toggle();
|
|
});
|
|
}
|
|
|
|
// if it is not touch device
|
|
if (!$.app.menu.is_touch_device()) {
|
|
// Email left Sidebar
|
|
if ($(sidebarMenuList).length > 0) {
|
|
var sidebar_menu_list = new PerfectScrollbar(sidebarMenuList[0]);
|
|
}
|
|
|
|
// User list scroll
|
|
if ($(emailUserList).length > 0) {
|
|
var users_list = new PerfectScrollbar(emailUserList[0]);
|
|
}
|
|
|
|
// Email detail section
|
|
if ($(emailScrollArea).length > 0) {
|
|
var users_list = new PerfectScrollbar(emailScrollArea[0]);
|
|
}
|
|
}
|
|
// if it is a touch device
|
|
else {
|
|
$(sidebarMenuList).css('overflow', 'scroll');
|
|
$(emailUserList).css('overflow', 'scroll');
|
|
$(emailScrollArea).css('overflow', 'scroll');
|
|
}
|
|
|
|
$(document).keyup(function (e) {
|
|
if (e.key === 'Escape') {
|
|
if (composeMailModal.find('.modal-dialog').hasClass('modal-fullscreen')) {
|
|
composeMaximize.click();
|
|
}
|
|
}
|
|
});
|
|
|
|
// Email to user select
|
|
function renderGuestAvatar(option) {
|
|
if (!option.id) {
|
|
return option.text;
|
|
}
|
|
var avatarImg = feather.icons['user'].toSvg({
|
|
class: 'me-0'
|
|
});
|
|
if ($(option.element).data('avatar')) {
|
|
avatarImg = "<img src='" + assetPath + 'images/avatars/' + $(option.element).data('avatar') + "' alt='avatar' />";
|
|
}
|
|
|
|
var $avatar =
|
|
"<div class='d-flex flex-wrap align-items-center'>" +
|
|
"<div class='avatar avatar-sm my-0 me-50'>" +
|
|
"<span class='avatar-content'>" +
|
|
avatarImg +
|
|
'</span>' +
|
|
'</div>' +
|
|
option.text +
|
|
'</div>';
|
|
|
|
return $avatar;
|
|
}
|
|
if (emailTo.length) {
|
|
emailTo.wrap('<div class="position-relative"></div>').select2({
|
|
dropdownParent: emailTo.parent(),
|
|
closeOnSelect: false,
|
|
templateResult: renderGuestAvatar,
|
|
templateSelection: renderGuestAvatar,
|
|
tags: true,
|
|
tokenSeparators: [',', ' '],
|
|
escapeMarkup: function (es) {
|
|
return es;
|
|
}
|
|
});
|
|
}
|
|
|
|
if (emailCC.length) {
|
|
emailCC.wrap('<div class="position-relative"></div>').select2({
|
|
dropdownParent: emailCC.parent(),
|
|
closeOnSelect: false,
|
|
templateResult: renderGuestAvatar,
|
|
templateSelection: renderGuestAvatar,
|
|
tags: true,
|
|
tokenSeparators: [',', ' '],
|
|
escapeMarkup: function (es) {
|
|
return es;
|
|
}
|
|
});
|
|
}
|
|
|
|
if (emailBCC.length) {
|
|
emailBCC.wrap('<div class="position-relative"></div>').select2({
|
|
dropdownParent: emailBCC.parent(),
|
|
closeOnSelect: false,
|
|
templateResult: renderGuestAvatar,
|
|
templateSelection: renderGuestAvatar,
|
|
tags: true,
|
|
tokenSeparators: [',', ' '],
|
|
escapeMarkup: function (es) {
|
|
return es;
|
|
}
|
|
});
|
|
}
|
|
|
|
// compose email
|
|
if (compose.length) {
|
|
compose.on('click', function () {
|
|
// showing rightSideBar
|
|
overlay.removeClass('show');
|
|
// hiding left sidebar
|
|
sidebarLeft.removeClass('show');
|
|
// all input forms
|
|
$('.compose-form input').val('');
|
|
emailTo.val([]).trigger('change');
|
|
emailCC.val([]).trigger('change');
|
|
emailBCC.val([]).trigger('change');
|
|
wrapperCC.hide();
|
|
wrapperBCC.hide();
|
|
// quill editor content
|
|
var quill_editor = $('.compose-form .ql-editor');
|
|
quill_editor[0].innerHTML = '';
|
|
});
|
|
}
|
|
|
|
// Main menu toggle should hide app menu
|
|
if (menuToggle.length) {
|
|
menuToggle.on('click', function (e) {
|
|
sidebarLeft.removeClass('show');
|
|
overlay.removeClass('show');
|
|
});
|
|
}
|
|
|
|
// Email sidebar toggle
|
|
if (sidebarToggle.length) {
|
|
sidebarToggle.on('click', function (e) {
|
|
e.stopPropagation();
|
|
sidebarLeft.toggleClass('show');
|
|
overlay.addClass('show');
|
|
});
|
|
}
|
|
|
|
if (composeMaximize)
|
|
composeMaximize.on('click', function () {
|
|
composeModal.toggleClass('modal-sticky');
|
|
modalDialog.toggleClass('modal-fullscreen');
|
|
if (modalDialog.hasClass('modal-fullscreen')) {
|
|
$(this).html(feather.icons['minimize-2'].toSvg());
|
|
} else {
|
|
$(this).html(feather.icons['maximize-2'].toSvg());
|
|
}
|
|
});
|
|
|
|
// Overlay Click
|
|
if (overlay.length) {
|
|
overlay.on('click', function (e) {
|
|
sidebarLeft.removeClass('show');
|
|
overlay.removeClass('show');
|
|
});
|
|
}
|
|
|
|
// Email Right sidebar toggle
|
|
if (emailUserList.find('li').length) {
|
|
emailUserList.find('li').on('click', function (e) {
|
|
emailDetails.toggleClass('show');
|
|
});
|
|
}
|
|
|
|
// Add class active on click of sidebar list
|
|
if (listGroupMsg.find('a').length) {
|
|
listGroupMsg.find('a').on('click', function () {
|
|
if (listGroupMsg.find('a').hasClass('active')) {
|
|
listGroupMsg.find('a').removeClass('active');
|
|
}
|
|
$(this).addClass('active');
|
|
});
|
|
}
|
|
|
|
// Email detail view back button click
|
|
if (goBack.length) {
|
|
goBack.on('click', function (e) {
|
|
e.stopPropagation();
|
|
emailDetails.removeClass('show');
|
|
});
|
|
}
|
|
|
|
// Favorite star click
|
|
if (favoriteStar.length) {
|
|
favoriteStar.on('click', function (e) {
|
|
$(this).find('svg').toggleClass('favorite');
|
|
e.stopPropagation();
|
|
// show toast only have favorite class
|
|
if ($(this).find('svg').hasClass('favorite')) {
|
|
toastr['success']('Updated mail to favorite', 'Favorite Mail ⭐️', {
|
|
closeButton: true,
|
|
tapToDismiss: false,
|
|
rtl: isRtl
|
|
});
|
|
}
|
|
});
|
|
}
|
|
|
|
// For app sidebar on small screen
|
|
if ($(window).width() > 768) {
|
|
if (overlay.hasClass('show')) {
|
|
overlay.removeClass('show');
|
|
}
|
|
}
|
|
|
|
// single checkbox select
|
|
if (emailUserListInput.length) {
|
|
emailUserListInput.on('click', function (e) {
|
|
e.stopPropagation();
|
|
});
|
|
emailUserListInput.find('input').on('change', function (e) {
|
|
e.stopPropagation();
|
|
var $this = $(this);
|
|
if ($this.is(':checked')) {
|
|
$this.closest('.user-mail').addClass('selected-row-bg');
|
|
} else {
|
|
$this.closest('.user-mail').removeClass('selected-row-bg');
|
|
}
|
|
});
|
|
}
|
|
|
|
// select all
|
|
$(document).on('click', '.email-app-list .selectAll input', function () {
|
|
if ($(this).is(':checked')) {
|
|
userActions
|
|
.find('.form-check .form-check-input')
|
|
.prop('checked', this.checked)
|
|
.closest('.user-mail')
|
|
.addClass('selected-row-bg');
|
|
} else {
|
|
userActions
|
|
.find('.form-check .form-check-input')
|
|
.prop('checked', '')
|
|
.closest('.user-mail')
|
|
.removeClass('selected-row-bg');
|
|
}
|
|
});
|
|
|
|
// Delete selected Mail from list
|
|
if (mailDelete.length) {
|
|
mailDelete.on('click', function () {
|
|
if (userActions.find('.form-check .form-check-input:checked').length) {
|
|
userActions.find('.form-check .form-check-input:checked').closest('.user-mail').remove();
|
|
emailAppList.find('.selectAll input').prop('checked', false);
|
|
toastr['error']('You have removed email.', 'Mail Deleted!', {
|
|
closeButton: true,
|
|
tapToDismiss: false,
|
|
rtl: isRtl
|
|
});
|
|
userActions.find('.form-check .form-check-input').prop('checked', '');
|
|
}
|
|
});
|
|
}
|
|
|
|
// Mark mail unread
|
|
if (mailUnread.length) {
|
|
mailUnread.on('click', function () {
|
|
userActions.find('.form-check .form-check-input:checked').closest('.user-mail').removeClass('mail-read');
|
|
});
|
|
}
|
|
|
|
// Filter
|
|
if (emailSearch.length) {
|
|
emailSearch.on('keyup', function () {
|
|
var value = $(this).val().toLowerCase();
|
|
if (value !== '') {
|
|
emailUserList.find('.email-media-list li').filter(function () {
|
|
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1);
|
|
});
|
|
var tbl_row = emailUserList.find('.email-media-list li:visible').length;
|
|
|
|
//Check if table has row or not
|
|
if (tbl_row == 0) {
|
|
emailUserList.find('.no-results').addClass('show');
|
|
emailUserList.animate({ scrollTop: '0' }, 500);
|
|
} else {
|
|
if (emailUserList.find('.no-results').hasClass('show')) {
|
|
emailUserList.find('.no-results').removeClass('show');
|
|
}
|
|
}
|
|
} else {
|
|
// If filter box is empty
|
|
emailUserList.find('.email-media-list li').show();
|
|
if (emailUserList.find('.no-results').hasClass('show')) {
|
|
emailUserList.find('.no-results').removeClass('show');
|
|
}
|
|
}
|
|
});
|
|
}
|
|
|
|
// Email compose Editor
|
|
if (editorEl.length) {
|
|
var emailEditor = new Quill(editorEl[0], {
|
|
bounds: '#message-editor .editor',
|
|
modules: {
|
|
formula: true,
|
|
syntax: true,
|
|
toolbar: '.compose-editor-toolbar'
|
|
},
|
|
placeholder: 'Message',
|
|
theme: 'snow'
|
|
});
|
|
}
|
|
|
|
// On navbar search and bookmark Icon click, hide compose mail
|
|
$('.nav-link-search, .bookmark-star').on('click', function () {
|
|
composeModal.modal('hide');
|
|
});
|
|
});
|
|
|
|
$(window).on('resize', function () {
|
|
var sidebarLeft = $('.sidebar-left');
|
|
// remove show classes from sidebar and overlay if size is > 992
|
|
if ($(window).width() > 768) {
|
|
if ($('.app-content .body-content-overlay').hasClass('show')) {
|
|
sidebarLeft.removeClass('show');
|
|
$('.app-content .body-content-overlay').removeClass('show');
|
|
}
|
|
}
|
|
});
|