/*
Template: POSDash - Responsive Bootstrap 4 Admin Dashboard Template
Author: iqonicthemes.in
Design and Developed by: iqonicthemes.in
NOTE: This file contains the styling for responsive Template.
*/
/*----------------------------------------------
Index Of Script
------------------------------------------------
:: Tooltip
:: Fixed Nav
:: Magnific Popup
:: Ripple Effect
:: Sidebar Widget
:: FullScreen
:: Page Loader
:: Counter
:: Progress Bar
:: Page Menu
:: Close navbar Toggle
:: Mailbox
:: chatuser
:: chatuser main
:: Chat start
:: todo Page
:: user toggle
:: Data tables
:: Form Validation
:: Active Class for Pricing Table
:: Flatpicker
:: Scrollbar
:: checkout
:: Datatables
:: image-upload
:: video
:: Button
:: Pricing tab
------------------------------------------------
Index Of Script
----------------------------------------------*/
(function (jQuery) {
"use strict";
/*---------------------------------------------------------------------
Tooltip
-----------------------------------------------------------------------*/
jQuery('[data-toggle="popover"]').popover();
jQuery('[data-toggle="tooltip"]').tooltip();
/*---------------------------------------------------------------------
Fixed Nav
-----------------------------------------------------------------------*/
$(window).on("scroll", function () {
if ($(window).scrollTop() > 0) {
$(".iq-top-navbar").addClass("fixed");
} else {
$(".iq-top-navbar").removeClass("fixed");
}
});
$(window).on("scroll", function () {
if ($(window).scrollTop() > 0) {
$(".white-bg-menu").addClass("sticky-menu");
} else {
$(".white-bg-menu").removeClass("sticky-menu");
}
});
/*---------------------------------------------------------------------
Magnific Popup
-----------------------------------------------------------------------*/
if (typeof $.fn.magnificPopup !== typeof undefined) {
jQuery(".popup-gallery").magnificPopup({
delegate: "a.popup-img",
type: "image",
tLoading: "Loading image #%curr%...",
mainClass: "mfp-img-mobile",
gallery: {
enabled: true,
navigateByImgClick: true,
preload: [0, 1], // Will preload 0 - before current, and 1 after the current image
},
image: {
tError: 'The image #%curr% could not be loaded.',
titleSrc: function (item) {
return item.el.attr("title") + "by Marsel Van Oosten";
},
},
});
jQuery(".popup-youtube, .popup-vimeo, .popup-gmaps").magnificPopup({
disableOn: 700,
type: "iframe",
mainClass: "mfp-fade",
removalDelay: 160,
preloader: false,
fixedContentPos: false,
});
}
/*---------------------------------------------------------------------
Ripple Effect
-----------------------------------------------------------------------*/
jQuery(document).on("click", ".iq-waves-effect", function (e) {
// Remove any old one
jQuery(".ripple").remove();
// Setup
let posX = jQuery(this).offset().left,
posY = jQuery(this).offset().top,
buttonWidth = jQuery(this).width(),
buttonHeight = jQuery(this).height();
// Add the element
jQuery(this).prepend("");
// Make it round!
if (buttonWidth >= buttonHeight) {
buttonHeight = buttonWidth;
} else {
buttonWidth = buttonHeight;
}
// Get the center of the element
let x = e.pageX - posX - buttonWidth / 2;
let y = e.pageY - posY - buttonHeight / 2;
// Add the ripples CSS and start the animation
jQuery(".ripple")
.css({
width: buttonWidth,
height: buttonHeight,
top: y + "px",
left: x + "px",
})
.addClass("rippleEffect");
});
/*---------------------------------------------------------------------
Sidebar Widget
-----------------------------------------------------------------------*/
jQuery(document).on("click", ".iq-menu > li > a", function () {
jQuery(".iq-menu > li > a").parent().removeClass("active");
jQuery(this).parent().addClass("active");
});
// Active menu
var parents = jQuery("li.active").parents(".iq-submenu.collapse");
parents.addClass("show");
parents.parents("li").addClass("active");
jQuery('li.active > a[aria-expanded="false"]').attr("aria-expanded", "true");
/*---------------------------------------------------------------------
FullScreen
-----------------------------------------------------------------------*/
jQuery(document).on("click", ".iq-full-screen", function () {
let elem = jQuery(this);
if (
!document.fullscreenElement &&
!document.mozFullScreenElement && // Mozilla
!document.webkitFullscreenElement && // Webkit-Browser
!document.msFullscreenElement
) {
// MS IE ab version 11
if (document.documentElement.requestFullscreen) {
document.documentElement.requestFullscreen();
} else if (document.documentElement.mozRequestFullScreen) {
document.documentElement.mozRequestFullScreen();
} else if (document.documentElement.webkitRequestFullscreen) {
document.documentElement.webkitRequestFullscreen(
Element.ALLOW_KEYBOARD_INPUT
);
} else if (document.documentElement.msRequestFullscreen) {
document.documentElement.msRequestFullscreen(
Element.ALLOW_KEYBOARD_INPUT
);
}
} else {
if (document.cancelFullScreen) {
document.cancelFullScreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.webkitCancelFullScreen) {
document.webkitCancelFullScreen();
} else if (document.msExitFullscreen) {
document.msExitFullscreen();
}
}
elem
.find("i")
.toggleClass("ri-fullscreen-line")
.toggleClass("ri-fullscreen-exit-line");
});
/*---------------------------------------------------------------------
Page Loader
-----------------------------------------------------------------------*/
jQuery("#load").fadeOut();
jQuery("#loading").delay().fadeOut("");
/*---------------------------------------------------------------------
Counter
-----------------------------------------------------------------------*/
if (window.counterUp !== undefined) {
const counterUp = window.counterUp["default"];
const $counters = $(".counter");
$counters.each(function (ignore, counter) {
var waypoint = new Waypoint({
element: $(this),
handler: function () {
counterUp(counter, {
duration: 1000,
delay: 10,
});
this.destroy();
},
offset: "bottom-in-view",
});
});
}
/*---------------------------------------------------------------------
Progress Bar
-----------------------------------------------------------------------*/
jQuery(".iq-progress-bar > span").each(function () {
let progressBar = jQuery(this);
let width = jQuery(this).data("percent");
progressBar.css({
transition: "width 2s",
});
setTimeout(function () {
progressBar.appear(function () {
progressBar.css("width", width + "%");
});
}, 100);
});
jQuery(".progress-bar-vertical > span").each(function () {
let progressBar = jQuery(this);
let height = jQuery(this).data("percent");
progressBar.css({
transition: "height 2s",
});
setTimeout(function () {
progressBar.appear(function () {
progressBar.css("height", height + "%");
});
}, 100);
});
/*---------------------------------------------------------------------
Page Menu
-----------------------------------------------------------------------*/
jQuery(document).on("click", ".wrapper-menu", function () {
jQuery(this).toggleClass("open");
});
jQuery(document).on("click", ".wrapper-menu", function () {
jQuery("body").toggleClass("sidebar-main");
});
/*---------------------------------------------------------------------
Close navbar Toggle
-----------------------------------------------------------------------*/
jQuery(".close-toggle").on("click", function () {
jQuery(".h-collapse.navbar-collapse").collapse("hide");
});
/*---------------------------------------------------------------------
Mailbox
-----------------------------------------------------------------------*/
jQuery(document).on("click", "ul.iq-email-sender-list li", function () {
jQuery(this).next().addClass("show");
// jQuery('.mail-box-detail').css('filter','blur(4px)');
});
jQuery(document).on("click", ".email-app-details li h4", function () {
jQuery(".email-app-details").removeClass("show");
});
/*---------------------------------------------------------------------
chatuser
-----------------------------------------------------------------------*/
jQuery(document).on("click", ".chat-head .chat-user-profile", function () {
jQuery(this).parent().next().toggleClass("show");
});
jQuery(document).on("click", ".user-profile .close-popup", function () {
jQuery(this).parent().parent().removeClass("show");
});
/*---------------------------------------------------------------------
chatuser main
-----------------------------------------------------------------------*/
jQuery(document).on("click", ".chat-search .chat-profile", function () {
jQuery(this).parent().next().toggleClass("show");
});
jQuery(document).on("click", ".user-profile .close-popup", function () {
jQuery(this).parent().parent().removeClass("show");
});
/*---------------------------------------------------------------------
Chat start
-----------------------------------------------------------------------*/
jQuery(document).on("click", "#chat-start", function () {
jQuery(".chat-data-left").toggleClass("show");
});
jQuery(document).on("click", ".close-btn-res", function () {
jQuery(".chat-data-left").removeClass("show");
});
jQuery(document).on("click", ".iq-chat-ui li", function () {
jQuery(".chat-data-left").removeClass("show");
});
jQuery(document).on("click", ".sidebar-toggle", function () {
jQuery(".chat-data-left").addClass("show");
});
/*---------------------------------------------------------------------
todo Page
-----------------------------------------------------------------------*/
jQuery(document).on("click", ".todo-task-list > li > a", function () {
jQuery(".todo-task-list li").removeClass("active");
jQuery(".todo-task-list .sub-task").removeClass("show");
jQuery(this).parent().toggleClass("active");
jQuery(this).next().toggleClass("show");
});
jQuery(document).on("click", ".todo-task-list > li li > a", function () {
jQuery(".todo-task-list li li").removeClass("active");
jQuery(this).parent().toggleClass("active");
});
/*---------------------------------------------------------------------
user toggle
-----------------------------------------------------------------------*/
jQuery(document).on("click", ".iq-user-toggle", function () {
jQuery(this).parent().addClass("show-data");
});
jQuery(document).on("click", ".close-data", function () {
jQuery(".iq-user-toggle").parent().removeClass("show-data");
});
jQuery(document).on("click", function (event) {
var $trigger = jQuery(".iq-user-toggle");
if ($trigger !== event.target && !$trigger.has(event.target).length) {
jQuery(".iq-user-toggle").parent().removeClass("show-data");
}
});
/*-------hide profile when scrolling--------*/
jQuery(window).scroll(function () {
let scroll = jQuery(window).scrollTop();
if (
scroll >= 10 &&
jQuery(".iq-user-toggle").parent().hasClass("show-data")
) {
jQuery(".iq-user-toggle").parent().removeClass("show-data");
}
});
let Scrollbar = window.Scrollbar;
if (jQuery(".data-scrollbar").length) {
Scrollbar.init(document.querySelector(".data-scrollbar"), {
continuousScrolling: false,
});
}
/*---------------------------------------------------------------------
Datatables
-----------------------------------------------------------------------*/
if(jQuery('.data-tables').length)
{
$('.data-tables').DataTable();
}
/*---------------------------------------------------------------------
Form Validation
-----------------------------------------------------------------------*/
// Example starter JavaScript for disabling form submissions if there are invalid fields
window.addEventListener(
"load",
function () {
// Fetch all the forms we want to apply custom Bootstrap validation styles to
var forms = document.getElementsByClassName("needs-validation");
// Loop over them and prevent submission
var validation = Array.prototype.filter.call(forms, function (form) {
form.addEventListener(
"submit",
function (event) {
if (form.checkValidity() === false) {
event.preventDefault();
event.stopPropagation();
}
form.classList.add("was-validated");
},
false
);
});
},
false
);
/*---------------------------------------------------------------------
Active Class for Pricing Table
-----------------------------------------------------------------------*/
jQuery("#my-table tr th").click(function () {
jQuery("#my-table tr th").children().removeClass("active");
jQuery(this).children().addClass("active");
jQuery("#my-table td").each(function () {
if (jQuery(this).hasClass("active")) {
jQuery(this).removeClass("active");
}
});
var col = jQuery(this).index();
jQuery("#my-table tr td:nth-child(" + parseInt(col + 1) + ")").addClass(
"active"
);
});
/*------------------------------------------------------------------
Select 2 Selectpicker
* -----------------------------------------------------------------*/
if ($.fn.select2 !== undefined) {
$("#single").select2({
placeholder: "Select a Option",
allowClear: true,
});
$("#multiple").select2({
placeholder: "Select a Multiple Option",
allowClear: true,
});
$("#multiple2").select2({
placeholder: "Select a Multiple Option",
allowClear: true,
});
}
/*------------------------------------------------------------------
Flatpicker
* -----------------------------------------------------------------*/
if (jQuery.fn.flatpickr !== undefined) {
if (jQuery(".basicFlatpickr").length > 0) {
jQuery(".basicFlatpickr").flatpickr();
}
if (jQuery("#inputTime").length > 0) {
jQuery("#inputTime").flatpickr({
enableTime: true,
noCalendar: true,
dateFormat: "H:i",
});
}
if (jQuery("#inputDatetime").length > 0) {
jQuery("#inputDatetime").flatpickr({
enableTime: true,
});
}
if (jQuery("#inputWeek").length > 0) {
jQuery("#inputWeek").flatpickr({
weekNumbers: true,
});
}
if (jQuery("#inline-date").length > 0) {
jQuery("#inline-date").flatpickr({
inline: true,
});
}
if (jQuery("#inline-date1").length > 0) {
jQuery("#inline-date1").flatpickr({
inline: true,
});
}
}
/*---------------------------------------------------------------------
Scrollbar
-----------------------------------------------------------------------*/
jQuery(window)
.on("resize", function () {
if (jQuery(this).width() <= 1299) {
jQuery("#salon-scrollbar").addClass("data-scrollbar");
} else {
jQuery("#salon-scrollbar").removeClass("data-scrollbar");
}
})
.trigger("resize");
jQuery(".data-scrollbar").each(function () {
var attr = $(this).attr("data-scroll");
if (typeof attr !== typeof undefined && attr !== false) {
let Scrollbar = window.Scrollbar;
var a = jQuery(this).data("scroll");
Scrollbar.init(document.querySelector('div[data-scroll= "' + a + '"]'));
}
});
/*---------------------------------------------------------------------
Pricing tab
-----------------------------------------------------------------------*/
jQuery(window).on("scroll", function (e) {
// Pricing Pill Tab
var nav = jQuery("#pricing-pills-tab");
if (nav.length) {
var contentNav = nav.offset().top - window.outerHeight;
if (jQuery(window).scrollTop() >= contentNav) {
e.preventDefault();
jQuery("#pricing-pills-tab li a").removeClass("active");
jQuery("#pricing-pills-tab li a[aria-selected=true]").addClass(
"active"
);
}
}
});
/*---------------------------------------------------------------------
Sweet alt Delete
-----------------------------------------------------------------------*/
$('[data-extra-toggle="delete"]').on("click", function (e) {
const closestElem = $(this).attr("data-closest-elem");
const swalWithBootstrapButtons = Swal.mixin({
customClass: {
confirmButton: "btn btn-primary",
cancelButton: "btn btn-outline-primary ml-2",
},
buttonsStyling: false,
});
swalWithBootstrapButtons
.fire({
title: "Are you sure?",
text: "You won't be able to revert this!",
icon: "warning",
showCancelButton: true,
confirmButtonText: "Yes, delete it!",
showClass: {
popup: "animate__animated animate__zoomIn",
},
hideClass: {
popup: "animate__animated animate__zoomOut",
},
})
.then((willDelete) => {
if (willDelete.isConfirmed) {
swalWithBootstrapButtons
.fire({
title: "Deleted!",
text: "Your note has been deleted.",
icon: "success",
showClass: {
popup: "animate__animated animate__zoomIn",
},
hideClass: {
popup: "animate__animated animate__zoomOut",
},
})
.then(() => {
if (closestElem == ".card") {
$(this).closest(closestElem).parent().remove();
} else {
$(this).closest(closestElem).remove();
}
});
} else {
swalWithBootstrapButtons.fire({
title: "Your note is safe!",
showClass: {
popup: "animate__animated animate__zoomIn",
},
hideClass: {
popup: "animate__animated animate__zoomOut",
},
});
}
});
});
if ($.fn.slick !== undefined && $(".top-product").length > 0) {
jQuery(".top-product").slick({
slidesToShow: 3,
speed: 300,
slidesToScroll: 1,
focusOnSelect: true,
autoplay: true,
arrows: false,
responsive: [
{
breakpoint: 768,
settings: {
arrows: false,
slidesToShow: 2,
},
},
{
breakpoint: 480,
settings: {
arrows: false,
autoplay: true,
slidesToShow: 1,
},
},
],
});
}
})(jQuery);