/*========================================================================================= File Name: app-email.js Description: app-email Javascripts ---------------------------------------------------------------------------------------- Item Name: Modern Admin - Clean Bootstrap 4 Dashboard HTML Template Author: PIXINVENT Author URL: http://www.themeforest.net/user/pixinvent ==========================================================================================*/ $(function () { "use strict"; // variables var appContent = $(".app-content"), appContentOverlay = $(".app-content-overlay"), sideBarLeft = $(".sidebar-left"), email_app_details = $(".email-app-details"), email_application = $(".email-application"), userNewMailSideBar = $(".compose-new-mail-sidebar"), email_user_list = $(".email-user-list"), email_app_list = $(".email-app-list"), checkbox_con = $(".user-action .checkbox-con"), $primary = "#5A8DEE"; // if it is not touch device if (!$.app.menu.is_touch_device()) { // To add Perfect Scrollbar // --------------------------- // Email left Sidebar if ($('.sidebar-menu-list').length > 0) { var sidebar_menu_list = new PerfectScrollbar(".sidebar-menu-list", { wheelPropagation: false }); } // User list scroll if (email_user_list.length > 0) { var users_list = new PerfectScrollbar(".email-user-list", { wheelPropagation: false }); } // Email detail section if ($('.email-scroll-area').length > 0) { var email_scroll_area = new PerfectScrollbar(".email-scroll-area", { wheelPropagation: false }); } // new email dialog scroll if (userNewMailSideBar.length > 0) { var compose_new_mail_sidebar = new PerfectScrollbar(".compose-new-mail-sidebar", { wheelPropagation: false }); } } // if it is a touch device else { $(".sidebar-menu-list").css("overflow", "scroll"); $(".email-user-list").css("overflow", "scroll"); $(".email-scroll-area").css("overflow", "scroll"); $(".compose-new-mail-sidebar").css("overflow", "scroll"); } // -------------------------------------- // Quill Editor //--------------------------------------- // Details mail Message reply field var detailMailEditor = new Quill('.snow-container .detail-view-editor', { modules: { toolbar: '.detail-quill-toolbar' }, placeholder: 'Type something..... ', theme: 'snow' }); //email new compose message compose field var composeMailEditor = new Quill('.snow-container .compose-editor', { modules: { toolbar: '.compose-quill-toolbar' }, placeholder: 'Type something..... ', theme: 'snow' }); // Quill get focus when click on reply $('.mail-reply').on('click', function () { detailMailEditor.focus(); }); //------------------------------------ // sidebar-left // ----------------------------------- // Main menu toggle should hide app menu $('.menu-toggle').on('click', function (e) { appContent.find('.sidebar-left').removeClass('show'); appContentOverlay.removeClass('show'); userNewMailSideBar.removeClass('show'); }); // Sidebar menu close button on click remove show class form both compose mail sidebar and App content overlay email_application.find(".sidebar-close-icon").on('click', function () { sideBarLeft.removeClass('show'); appContentOverlay.removeClass('show'); }); // Email Sidebar Toggle button to show email sidebar $('.sidebar-toggle').on('click', function (e) { e.stopPropagation(); sideBarLeft.toggleClass('show'); appContentOverlay.addClass('show'); }); // On Ovelay Click remove show class form both sidebarleft and App content Overlay appContentOverlay.on('click', function () { sideBarLeft.removeClass('show'); appContentOverlay.removeClass('show'); }); // Add class active on click of sidebar list folder and label email_application.find(".list-group-messages a,.list-group-labels a").on('click', function () { var $this = $(this); if (email_application.find('.list-group-messages a,.list-group-labels a').hasClass('active')) { email_application.find('.list-group-messages a,.list-group-labels a').removeClass('active'); $this.addClass("active"); } }); // sidebar content's close btn on small screen $(".sidebar-close-icon").on('click', function () { $('.sidebar-content').removeClass('show'); appContentOverlay.removeClass('show'); }); // ------------------------------- // Content Right // ------------------------------- // on click show class from Email details email_app_list.find('.email-user-list li').on('click', function () { email_app_details.toggleClass('show'); }); // on click of go button or inbox btn get back to inbox $('.go-back, #inbox-menu').on('click', function (e) { e.stopPropagation(); email_app_details.removeClass('show'); var quill_editor = $(".detail-view-editor .ql-editor"); // quill editor content quill_editor[0].innerHTML = ""; }); //on star click bookmark email email_application.find(".favorite i").on("click", function (e) { e.stopPropagation(); var $this = $(this) $this.parent('.favorite').toggleClass("warning"); if ($this.hasClass("bx-star")) { $this.addClass("bxs-star"); $this.removeClass("bx-star"); } else { $this.addClass("bx-star"); $this.removeClass("bxs-star"); } }); // On checkbox click stop propogation checkbox_con.on("click", function (e) { e.stopPropagation(); }); // on checkbox status change add or remove background color class checkbox_con.find("input").on('change', function () { var $this = $(this); if ($this.is(":checked")) { $this.closest(".media").addClass("selected-row-bg"); } else { $this.closest(".media").removeClass("selected-row-bg"); } }); // Select all checkbox $(document).on("change", ".email-app-list .selectAll input", function () { if ($(this).is(":checked")) { checkbox_con.find("input").prop('checked', this.checked).closest(".media").addClass("selected-row-bg"); } else { checkbox_con.find("input").prop('checked', "").closest(".media").removeClass("selected-row-bg"); } }); // On click of delete btn, delete all emails & show "no result found" email_application.find(".mail-delete").on("click", function () { checkbox_con.find("input:checked").closest("li").remove(); email_application.find(".selectAll input").prop('checked', ""); var tbl_row = $(".email-user-list .users-list-wrapper li:visible").length; //here tbl_test is table name //Check if table has row or not if (tbl_row == 0) { email_user_list.find('.no-results').addClass('show'); } else { if (email_user_list.find('.no-results').hasClass('show')) { email_user_list.find('.no-results').removeClass('show'); } } }); // Mark unread mail and remove background color when checkbox unchecked email_application.find(".mail-unread").on("click", function () { checkbox_con.find("input:checked").closest("li").removeClass("mail-read"); email_application.find(".user-action .checkbox-con input:checked , .selectAll input").prop('checked', "").closest(".media").removeClass("selected-row-bg"); }); // Search Filter email_app_list.find("#email-search").on("keyup", function () { var value = $(this).val().toLowerCase(); $('.media').css('animation', 'none') if (value != "") { email_user_list.find(".users-list-wrapper li").filter(function () { $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1); }); var tbl_row = $(".email-user-list .users-list-wrapper li:visible").length; //here tbl_row is table name //Check if table has row or not if (tbl_row == 0) { email_user_list.find('.no-results').addClass('show'); } else { if (email_user_list.find('.no-results').hasClass('show')) { email_user_list.find('.no-results').removeClass('show'); } } } else { // If filter box is empty email_user_list.find(".users-list-wrapper li").show(); if (email_user_list.find('.no-results').hasClass('show')) { email_user_list.find('.no-results').removeClass('show'); } } }); // manually hide dropdown menu $(".email-detail-head .dropdown-item").on("click", function () { $(".dropdown-toggle").dropdown('hide'); }); // collapse email details $(".collapse-header").on("click", function () { $(this).toggleClass("open") }) // ------------------------------------------ // Compose new mail sidebar // ------------------------------------------- // On Click of Close Icon btn, cancel btn and overlay remove show class from compose mail and overlay // and reset all form field $(".close-icon, .cancel-btn, .app-content-overlay").on('click', function () { userNewMailSideBar.removeClass('show'); appContentOverlay.removeClass('show'); $('#compose-form').find('input').val(""); // input filed reset when close or cancel var file_input = $(".custom-file .custom-file-label"); // file input content file_input[0].innerHTML = "Attach File"; var quill_editor = $("#compose-form .ql-editor"); // quill editor content quill_editor[0].innerHTML = ""; }); // On compose btn clik of compose mail visible and sidebar left hide $('.compose-btn').on('click', function () { userNewMailSideBar.addClass('show'); appContentOverlay.addClass('show'); sideBarLeft.removeClass('show'); }); // stop propogation on dropdown $(".information .dropdown-menu a").on("click", function (e) { e.stopPropagation(); $(this).parent().removeClass('show'); }); // On screen Resize JS // ----------------------------------- // For app sidebar on small screen if ($(window).width() > 768) { if (appContentOverlay.hasClass('show')) { appContentOverlay.removeClass('show'); } } $(window).on("resize", function () { // remove show classes from sidebar and overlay if size is > 768 if ($(window).width() > 768) { if (appContentOverlay.hasClass('show')) { sideBarLeft.removeClass('show'); appContentOverlay.removeClass('show'); userNewMailSideBar.removeClass('show'); } $('#compose-form').find('input').val(""); // input filed reset when resize screen var file_input = $(".custom-file .custom-file-label"); // file input content file_input[0].innerHTML = "Attach File"; var quill_editor = $("#compose-form .ql-editor"); // quill editor content quill_editor[0].innerHTML = ""; } }); });