(function ($) {
"use strict"; // Start of use strict
/*
- Counter
- Data table
- Popup youtube & gallery
- File Up
- Apex Charts
- Tooltip
*/
/*-------------------------------------------
Counter
--------------------------------------------- */
if ($('.counter').length) {
$('.counter').counterUp({
delay: 1,
time: 500,
});
}
/*-------------------------------------------
Data table
--------------------------------------------- */
if ($('.category-list').length) {
$('.category-list').DataTable({
language: {
oPaginate: {
sNext: '',
sPrevious: ''
}
}
});
}
/*-------------------------------------------
Popup youtube & gallery
--------------------------------------------- */
if ($('.zoom-gallery').length) {
$('.zoom-gallery').magnificPopup({
delegate: 'a',
type: 'image',
closeOnContentClick: false,
closeBtnInside: false,
mainClass: 'mfp-with-zoom mfp-img-mobile',
image: {
verticalFit: true,
titleSrc: function (item) {
return item.el.attr('title') + ' · image source';
}
},
gallery: {
enabled: true
},
zoom: {
enabled: true,
duration: 300, // don't foget to change the duration also in CSS
opener: function (element) {
return element.find('img');
}
}
});
}
/*-------------------------------------------
File Up
--------------------------------------------- */
if ($('.fileUp').length) {
$('.fileUp').FancyFileUpload({
params: {
action: 'fileuploader'
},
maxfilesize: 1000000
});
}
/*-------------------------------------------
Apex Charts
--------------------------------------------- */
if ($('#chart').length) {
// Dark Mode Setup
const darkMode = localStorage.getItem('dark-mode') || 'light';
$('html').toggleClass('dark', darkMode === 'dark');
$('.dark-button').toggle(darkMode !== 'dark');
$('.light-button').toggle(darkMode === 'dark');
// ApexCharts Options
var lightOptions = {
// Light theme options
colors: ['#f84525'],
series: [
{
data: [10, 20, 15, 30, 35, 30, 45, 59, 30, 35, 25, 29, 15]
}
],
chart: {
type: "area",
height: 350,
zoom: {
enabled: false
},
toolbar: {
tools: {
download: ''
}
}
},
dataLabels: {
enabled: false
},
markers: {
colors: ["#FFFFFF"]
},
stroke: {
curve: "smooth",
width: 3,
},
fill: {
type: "gradient",
gradient: {
shadeIntensity: 1,
type: "vertical",
colorStops: [
[
{
offset: 0,
color: "#f84525",
opacity: 1.0
},
{
offset: 70,
color: "#f7b733",
opacity: 0.2
},
{
offset: 97,
color: "#f7b733",
opacity: 0.0
}
]
]
}
},
xaxis: {
axisBorder: {
show: false
},
axisTicks: {
show: false
},
labels: {
style: {
colors: "#aaa"
}
}
},
yaxis: {
labels: {
show: false
}
},
grid: {
borderColor: "#eff2f7"
},
legend: {
horizontalAlign: "left"
}
};
var darkOptions = {
colors: ['#f84525'],
series: [
{
data: [10, 20, 15, 30, 35, 30, 45, 59, 30, 35, 25, 29, 15]
}
],
chart: {
type: "area",
height: 350,
zoom: {
enabled: false
},
toolbar: {
tools: {
download: ''
}
}
},
dataLabels: {
enabled: false
},
markers: {
colors: ["#FFFFFF"]
},
stroke: {
curve: "smooth",
width: 3,
},
fill: {
type: "gradient",
gradient: {
shadeIntensity: 1,
type: "vertical",
colorStops: [
[
{
offset: 0,
color: "#f84525",
opacity: 1.0
},
{
offset: 70,
color: "#f7b733",
opacity: 0.2
},
{
offset: 97,
color: "#f7b733",
opacity: 0.0
}
]
]
}
},
xaxis: {
axisBorder: {
show: false
},
axisTicks: {
show: false
},
labels: {
style: {
colors: "#aaa"
}
}
},
yaxis: {
labels: {
show: false
}
},
grid: {
borderColor: "#26292d"
},
legend: {
horizontalAlign: "left"
},
};
var options = darkMode === 'dark' ? darkOptions : lightOptions;
var chart = new ApexCharts(document.querySelector("#chart"), options);
chart.render();
// Toggle dark UI
$('.dark-button, .light-button').on('click', function () {
const isDark = $(this).hasClass('dark-button');
$('.dark-button').toggle(!isDark);
$('.light-button').toggle(isDark);
$('html').toggleClass('dark', isDark);
localStorage.setItem('dark-mode', isDark ? 'dark' : 'light');
// Update chart theme
options = isDark ? darkOptions : lightOptions;
chart.updateOptions(options);
});
}
/*-------------------------------------------
Tooltip
--------------------------------------------- */
const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]')
const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl))
})(jQuery);