first commit
This commit is contained in:
aschwarz
6
assets/js/buttons.js
Normal file
6
assets/js/buttons.js
Normal file
File diff suppressed because one or more lines are too long
27
assets/js/config.js
Normal file
27
assets/js/config.js
Normal file
@ -0,0 +1,27 @@
|
||||
/**
|
||||
* Config
|
||||
* -------------------------------------------------------------------------------------
|
||||
* ! IMPORTANT: Make sure you clear the browser local storage In order to see the config changes in the template.
|
||||
* ! To clear local storage: (https://www.leadshook.com/help/how-to-clear-local-storage-in-google-chrome-browser/).
|
||||
*/
|
||||
|
||||
'use strict';
|
||||
|
||||
// JS global variables
|
||||
let config = {
|
||||
colors: {
|
||||
primary: '#696cff',
|
||||
secondary: '#8592a3',
|
||||
success: '#71dd37',
|
||||
info: '#03c3ec',
|
||||
warning: '#ffab00',
|
||||
danger: '#ff3e1d',
|
||||
dark: '#233446',
|
||||
black: '#000',
|
||||
white: '#fff',
|
||||
body: '#f4f5fb',
|
||||
headingColor: '#566a7f',
|
||||
axisColor: '#a1acb8',
|
||||
borderColor: '#eceef1'
|
||||
}
|
||||
};
|
||||
662
assets/js/dashboards-analytics.js
Normal file
662
assets/js/dashboards-analytics.js
Normal file
@ -0,0 +1,662 @@
|
||||
/**
|
||||
* Dashboard Analytics
|
||||
*/
|
||||
|
||||
'use strict';
|
||||
|
||||
(function () {
|
||||
let cardColor, headingColor, axisColor, shadeColor, borderColor;
|
||||
|
||||
cardColor = config.colors.white;
|
||||
headingColor = config.colors.headingColor;
|
||||
axisColor = config.colors.axisColor;
|
||||
borderColor = config.colors.borderColor;
|
||||
|
||||
// Total Revenue Report Chart - Bar Chart
|
||||
// --------------------------------------------------------------------
|
||||
const totalRevenueChartEl = document.querySelector('#totalRevenueChart'),
|
||||
totalRevenueChartOptions = {
|
||||
series: [
|
||||
{
|
||||
name: '2021',
|
||||
data: [18, 7, 15, 29, 18, 12, 9]
|
||||
},
|
||||
{
|
||||
name: '2020',
|
||||
data: [-13, -18, -9, -14, -5, -17, -15]
|
||||
}
|
||||
],
|
||||
chart: {
|
||||
height: 300,
|
||||
stacked: true,
|
||||
type: 'bar',
|
||||
toolbar: { show: false }
|
||||
},
|
||||
plotOptions: {
|
||||
bar: {
|
||||
horizontal: false,
|
||||
columnWidth: '33%',
|
||||
borderRadius: 12,
|
||||
startingShape: 'rounded',
|
||||
endingShape: 'rounded'
|
||||
}
|
||||
},
|
||||
colors: [config.colors.primary, config.colors.info],
|
||||
dataLabels: {
|
||||
enabled: false
|
||||
},
|
||||
stroke: {
|
||||
curve: 'smooth',
|
||||
width: 6,
|
||||
lineCap: 'round',
|
||||
colors: [cardColor]
|
||||
},
|
||||
legend: {
|
||||
show: true,
|
||||
horizontalAlign: 'left',
|
||||
position: 'top',
|
||||
markers: {
|
||||
height: 8,
|
||||
width: 8,
|
||||
radius: 12,
|
||||
offsetX: -3
|
||||
},
|
||||
labels: {
|
||||
colors: axisColor
|
||||
},
|
||||
itemMargin: {
|
||||
horizontal: 10
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
borderColor: borderColor,
|
||||
padding: {
|
||||
top: 0,
|
||||
bottom: -8,
|
||||
left: 20,
|
||||
right: 20
|
||||
}
|
||||
},
|
||||
xaxis: {
|
||||
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'],
|
||||
labels: {
|
||||
style: {
|
||||
fontSize: '13px',
|
||||
colors: axisColor
|
||||
}
|
||||
},
|
||||
axisTicks: {
|
||||
show: false
|
||||
},
|
||||
axisBorder: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
yaxis: {
|
||||
labels: {
|
||||
style: {
|
||||
fontSize: '13px',
|
||||
colors: axisColor
|
||||
}
|
||||
}
|
||||
},
|
||||
responsive: [
|
||||
{
|
||||
breakpoint: 1700,
|
||||
options: {
|
||||
plotOptions: {
|
||||
bar: {
|
||||
borderRadius: 10,
|
||||
columnWidth: '32%'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
breakpoint: 1580,
|
||||
options: {
|
||||
plotOptions: {
|
||||
bar: {
|
||||
borderRadius: 10,
|
||||
columnWidth: '35%'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
breakpoint: 1440,
|
||||
options: {
|
||||
plotOptions: {
|
||||
bar: {
|
||||
borderRadius: 10,
|
||||
columnWidth: '42%'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
breakpoint: 1300,
|
||||
options: {
|
||||
plotOptions: {
|
||||
bar: {
|
||||
borderRadius: 10,
|
||||
columnWidth: '48%'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
breakpoint: 1200,
|
||||
options: {
|
||||
plotOptions: {
|
||||
bar: {
|
||||
borderRadius: 10,
|
||||
columnWidth: '40%'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
breakpoint: 1040,
|
||||
options: {
|
||||
plotOptions: {
|
||||
bar: {
|
||||
borderRadius: 11,
|
||||
columnWidth: '48%'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
breakpoint: 991,
|
||||
options: {
|
||||
plotOptions: {
|
||||
bar: {
|
||||
borderRadius: 10,
|
||||
columnWidth: '30%'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
breakpoint: 840,
|
||||
options: {
|
||||
plotOptions: {
|
||||
bar: {
|
||||
borderRadius: 10,
|
||||
columnWidth: '35%'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
breakpoint: 768,
|
||||
options: {
|
||||
plotOptions: {
|
||||
bar: {
|
||||
borderRadius: 10,
|
||||
columnWidth: '28%'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
breakpoint: 640,
|
||||
options: {
|
||||
plotOptions: {
|
||||
bar: {
|
||||
borderRadius: 10,
|
||||
columnWidth: '32%'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
breakpoint: 576,
|
||||
options: {
|
||||
plotOptions: {
|
||||
bar: {
|
||||
borderRadius: 10,
|
||||
columnWidth: '37%'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
breakpoint: 480,
|
||||
options: {
|
||||
plotOptions: {
|
||||
bar: {
|
||||
borderRadius: 10,
|
||||
columnWidth: '45%'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
breakpoint: 420,
|
||||
options: {
|
||||
plotOptions: {
|
||||
bar: {
|
||||
borderRadius: 10,
|
||||
columnWidth: '52%'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
breakpoint: 380,
|
||||
options: {
|
||||
plotOptions: {
|
||||
bar: {
|
||||
borderRadius: 10,
|
||||
columnWidth: '60%'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
states: {
|
||||
hover: {
|
||||
filter: {
|
||||
type: 'none'
|
||||
}
|
||||
},
|
||||
active: {
|
||||
filter: {
|
||||
type: 'none'
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
if (typeof totalRevenueChartEl !== undefined && totalRevenueChartEl !== null) {
|
||||
const totalRevenueChart = new ApexCharts(totalRevenueChartEl, totalRevenueChartOptions);
|
||||
totalRevenueChart.render();
|
||||
}
|
||||
|
||||
// Growth Chart - Radial Bar Chart
|
||||
// --------------------------------------------------------------------
|
||||
const growthChartEl = document.querySelector('#growthChart'),
|
||||
growthChartOptions = {
|
||||
series: [78],
|
||||
labels: ['Growth'],
|
||||
chart: {
|
||||
height: 240,
|
||||
type: 'radialBar'
|
||||
},
|
||||
plotOptions: {
|
||||
radialBar: {
|
||||
size: 150,
|
||||
offsetY: 10,
|
||||
startAngle: -150,
|
||||
endAngle: 150,
|
||||
hollow: {
|
||||
size: '55%'
|
||||
},
|
||||
track: {
|
||||
background: cardColor,
|
||||
strokeWidth: '100%'
|
||||
},
|
||||
dataLabels: {
|
||||
name: {
|
||||
offsetY: 15,
|
||||
color: headingColor,
|
||||
fontSize: '15px',
|
||||
fontWeight: '600',
|
||||
fontFamily: 'Public Sans'
|
||||
},
|
||||
value: {
|
||||
offsetY: -25,
|
||||
color: headingColor,
|
||||
fontSize: '22px',
|
||||
fontWeight: '500',
|
||||
fontFamily: 'Public Sans'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
colors: [config.colors.primary],
|
||||
fill: {
|
||||
type: 'gradient',
|
||||
gradient: {
|
||||
shade: 'dark',
|
||||
shadeIntensity: 0.5,
|
||||
gradientToColors: [config.colors.primary],
|
||||
inverseColors: true,
|
||||
opacityFrom: 1,
|
||||
opacityTo: 0.6,
|
||||
stops: [30, 70, 100]
|
||||
}
|
||||
},
|
||||
stroke: {
|
||||
dashArray: 5
|
||||
},
|
||||
grid: {
|
||||
padding: {
|
||||
top: -35,
|
||||
bottom: -10
|
||||
}
|
||||
},
|
||||
states: {
|
||||
hover: {
|
||||
filter: {
|
||||
type: 'none'
|
||||
}
|
||||
},
|
||||
active: {
|
||||
filter: {
|
||||
type: 'none'
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
if (typeof growthChartEl !== undefined && growthChartEl !== null) {
|
||||
const growthChart = new ApexCharts(growthChartEl, growthChartOptions);
|
||||
growthChart.render();
|
||||
}
|
||||
|
||||
// Profit Report Line Chart
|
||||
// --------------------------------------------------------------------
|
||||
const profileReportChartEl = document.querySelector('#profileReportChart'),
|
||||
profileReportChartConfig = {
|
||||
chart: {
|
||||
height: 80,
|
||||
// width: 175,
|
||||
type: 'line',
|
||||
toolbar: {
|
||||
show: false
|
||||
},
|
||||
dropShadow: {
|
||||
enabled: true,
|
||||
top: 10,
|
||||
left: 5,
|
||||
blur: 3,
|
||||
color: config.colors.warning,
|
||||
opacity: 0.15
|
||||
},
|
||||
sparkline: {
|
||||
enabled: true
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
show: false,
|
||||
padding: {
|
||||
right: 8
|
||||
}
|
||||
},
|
||||
colors: [config.colors.warning],
|
||||
dataLabels: {
|
||||
enabled: false
|
||||
},
|
||||
stroke: {
|
||||
width: 5,
|
||||
curve: 'smooth'
|
||||
},
|
||||
series: [
|
||||
{
|
||||
data: [110, 270, 145, 245, 205, 285]
|
||||
}
|
||||
],
|
||||
xaxis: {
|
||||
show: false,
|
||||
lines: {
|
||||
show: false
|
||||
},
|
||||
labels: {
|
||||
show: false
|
||||
},
|
||||
axisBorder: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
yaxis: {
|
||||
show: false
|
||||
}
|
||||
};
|
||||
if (typeof profileReportChartEl !== undefined && profileReportChartEl !== null) {
|
||||
const profileReportChart = new ApexCharts(profileReportChartEl, profileReportChartConfig);
|
||||
profileReportChart.render();
|
||||
}
|
||||
|
||||
// Order Statistics Chart
|
||||
// --------------------------------------------------------------------
|
||||
const chartOrderStatistics = document.querySelector('#orderStatisticsChart'),
|
||||
orderChartConfig = {
|
||||
chart: {
|
||||
height: 165,
|
||||
width: 130,
|
||||
type: 'donut'
|
||||
},
|
||||
labels: ['Electronic', 'Sports', 'Decor', 'Fashion'],
|
||||
series: [85, 15, 50, 50],
|
||||
colors: [config.colors.primary, config.colors.secondary, config.colors.info, config.colors.success],
|
||||
stroke: {
|
||||
width: 5,
|
||||
colors: cardColor
|
||||
},
|
||||
dataLabels: {
|
||||
enabled: false,
|
||||
formatter: function (val, opt) {
|
||||
return parseInt(val) + '%';
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
show: false
|
||||
},
|
||||
grid: {
|
||||
padding: {
|
||||
top: 0,
|
||||
bottom: 0,
|
||||
right: 15
|
||||
}
|
||||
},
|
||||
plotOptions: {
|
||||
pie: {
|
||||
donut: {
|
||||
size: '75%',
|
||||
labels: {
|
||||
show: true,
|
||||
value: {
|
||||
fontSize: '1.5rem',
|
||||
fontFamily: 'Public Sans',
|
||||
color: headingColor,
|
||||
offsetY: -15,
|
||||
formatter: function (val) {
|
||||
return parseInt(val) + '%';
|
||||
}
|
||||
},
|
||||
name: {
|
||||
offsetY: 20,
|
||||
fontFamily: 'Public Sans'
|
||||
},
|
||||
total: {
|
||||
show: true,
|
||||
fontSize: '0.8125rem',
|
||||
color: axisColor,
|
||||
label: 'Weekly',
|
||||
formatter: function (w) {
|
||||
return '38%';
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
if (typeof chartOrderStatistics !== undefined && chartOrderStatistics !== null) {
|
||||
const statisticsChart = new ApexCharts(chartOrderStatistics, orderChartConfig);
|
||||
statisticsChart.render();
|
||||
}
|
||||
|
||||
// Income Chart - Area chart
|
||||
// --------------------------------------------------------------------
|
||||
const incomeChartEl = document.querySelector('#incomeChart'),
|
||||
incomeChartConfig = {
|
||||
series: [
|
||||
{
|
||||
data: [24, 21, 30, 22, 42, 26, 35, 29]
|
||||
}
|
||||
],
|
||||
chart: {
|
||||
height: 215,
|
||||
parentHeightOffset: 0,
|
||||
parentWidthOffset: 0,
|
||||
toolbar: {
|
||||
show: false
|
||||
},
|
||||
type: 'area'
|
||||
},
|
||||
dataLabels: {
|
||||
enabled: false
|
||||
},
|
||||
stroke: {
|
||||
width: 2,
|
||||
curve: 'smooth'
|
||||
},
|
||||
legend: {
|
||||
show: false
|
||||
},
|
||||
markers: {
|
||||
size: 6,
|
||||
colors: 'transparent',
|
||||
strokeColors: 'transparent',
|
||||
strokeWidth: 4,
|
||||
discrete: [
|
||||
{
|
||||
fillColor: config.colors.white,
|
||||
seriesIndex: 0,
|
||||
dataPointIndex: 7,
|
||||
strokeColor: config.colors.primary,
|
||||
strokeWidth: 2,
|
||||
size: 6,
|
||||
radius: 8
|
||||
}
|
||||
],
|
||||
hover: {
|
||||
size: 7
|
||||
}
|
||||
},
|
||||
colors: [config.colors.primary],
|
||||
fill: {
|
||||
type: 'gradient',
|
||||
gradient: {
|
||||
shade: shadeColor,
|
||||
shadeIntensity: 0.6,
|
||||
opacityFrom: 0.5,
|
||||
opacityTo: 0.25,
|
||||
stops: [0, 95, 100]
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
borderColor: borderColor,
|
||||
strokeDashArray: 3,
|
||||
padding: {
|
||||
top: -20,
|
||||
bottom: -8,
|
||||
left: -10,
|
||||
right: 8
|
||||
}
|
||||
},
|
||||
xaxis: {
|
||||
categories: ['', 'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'],
|
||||
axisBorder: {
|
||||
show: false
|
||||
},
|
||||
axisTicks: {
|
||||
show: false
|
||||
},
|
||||
labels: {
|
||||
show: true,
|
||||
style: {
|
||||
fontSize: '13px',
|
||||
colors: axisColor
|
||||
}
|
||||
}
|
||||
},
|
||||
yaxis: {
|
||||
labels: {
|
||||
show: false
|
||||
},
|
||||
min: 10,
|
||||
max: 50,
|
||||
tickAmount: 4
|
||||
}
|
||||
};
|
||||
if (typeof incomeChartEl !== undefined && incomeChartEl !== null) {
|
||||
const incomeChart = new ApexCharts(incomeChartEl, incomeChartConfig);
|
||||
incomeChart.render();
|
||||
}
|
||||
|
||||
// Expenses Mini Chart - Radial Chart
|
||||
// --------------------------------------------------------------------
|
||||
const weeklyExpensesEl = document.querySelector('#expensesOfWeek'),
|
||||
weeklyExpensesConfig = {
|
||||
series: [65],
|
||||
chart: {
|
||||
width: 60,
|
||||
height: 60,
|
||||
type: 'radialBar'
|
||||
},
|
||||
plotOptions: {
|
||||
radialBar: {
|
||||
startAngle: 0,
|
||||
endAngle: 360,
|
||||
strokeWidth: '8',
|
||||
hollow: {
|
||||
margin: 2,
|
||||
size: '45%'
|
||||
},
|
||||
track: {
|
||||
strokeWidth: '50%',
|
||||
background: borderColor
|
||||
},
|
||||
dataLabels: {
|
||||
show: true,
|
||||
name: {
|
||||
show: false
|
||||
},
|
||||
value: {
|
||||
formatter: function (val) {
|
||||
return '$' + parseInt(val);
|
||||
},
|
||||
offsetY: 5,
|
||||
color: '#697a8d',
|
||||
fontSize: '13px',
|
||||
show: true
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
fill: {
|
||||
type: 'solid',
|
||||
colors: config.colors.primary
|
||||
},
|
||||
stroke: {
|
||||
lineCap: 'round'
|
||||
},
|
||||
grid: {
|
||||
padding: {
|
||||
top: -10,
|
||||
bottom: -15,
|
||||
left: -10,
|
||||
right: -10
|
||||
}
|
||||
},
|
||||
states: {
|
||||
hover: {
|
||||
filter: {
|
||||
type: 'none'
|
||||
}
|
||||
},
|
||||
active: {
|
||||
filter: {
|
||||
type: 'none'
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
if (typeof weeklyExpensesEl !== undefined && weeklyExpensesEl !== null) {
|
||||
const weeklyExpenses = new ApexCharts(weeklyExpensesEl, weeklyExpensesConfig);
|
||||
weeklyExpenses.render();
|
||||
}
|
||||
})();
|
||||
37
assets/js/extended-ui-perfect-scrollbar.js
Normal file
37
assets/js/extended-ui-perfect-scrollbar.js
Normal file
@ -0,0 +1,37 @@
|
||||
/**
|
||||
* Perfect Scrollbar
|
||||
*/
|
||||
'use strict';
|
||||
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
(function () {
|
||||
const verticalExample = document.getElementById('vertical-example'),
|
||||
horizontalExample = document.getElementById('horizontal-example'),
|
||||
horizVertExample = document.getElementById('both-scrollbars-example');
|
||||
|
||||
// Vertical Example
|
||||
// --------------------------------------------------------------------
|
||||
if (verticalExample) {
|
||||
new PerfectScrollbar(verticalExample, {
|
||||
wheelPropagation: false
|
||||
});
|
||||
}
|
||||
|
||||
// Horizontal Example
|
||||
// --------------------------------------------------------------------
|
||||
if (horizontalExample) {
|
||||
new PerfectScrollbar(horizontalExample, {
|
||||
wheelPropagation: false,
|
||||
suppressScrollY: true
|
||||
});
|
||||
}
|
||||
|
||||
// Both vertical and Horizontal Example
|
||||
// --------------------------------------------------------------------
|
||||
if (horizVertExample) {
|
||||
new PerfectScrollbar(horizVertExample, {
|
||||
wheelPropagation: false
|
||||
});
|
||||
}
|
||||
})();
|
||||
});
|
||||
11
assets/js/form-basic-inputs.js
Normal file
11
assets/js/form-basic-inputs.js
Normal file
@ -0,0 +1,11 @@
|
||||
/**
|
||||
* Form Basic Inputs
|
||||
*/
|
||||
|
||||
'use strict';
|
||||
|
||||
(function () {
|
||||
// Indeterminate checkbox
|
||||
const checkbox = document.getElementById('defaultCheck2');
|
||||
checkbox.indeterminate = true;
|
||||
})();
|
||||
188
assets/js/jquery.redirect.js
Normal file
188
assets/js/jquery.redirect.js
Normal file
@ -0,0 +1,188 @@
|
||||
/*
|
||||
jQuery Redirect v1.2.0
|
||||
|
||||
Copyright (c) 2013-2022 Miguel Galante
|
||||
Copyright (c) 2011-2013 Nemanja Avramovic, www.avramovic.info
|
||||
|
||||
Licensed under CC BY-SA 4.0 License: http://creativecommons.org/licenses/by-sa/4.0/
|
||||
|
||||
This means everyone is allowed to:
|
||||
|
||||
Share - copy and redistribute the material in any medium or format
|
||||
Adapt - remix, transform, and build upon the material for any purpose, even commercially.
|
||||
Under following conditions:
|
||||
|
||||
Attribution - You must give appropriate credit, provide a link to the license, and indicate if changes were made. You may do so in any reasonable manner, but not in any way that suggests the licensor endorses you or your use.
|
||||
ShareAlike - If you remix, transform, or build upon the material, you must distribute your contributions under the same license as the original.
|
||||
*/
|
||||
; (function ($) {
|
||||
'use strict';
|
||||
|
||||
// Defaults configuration
|
||||
var defaults = {
|
||||
url: null,
|
||||
values: null,
|
||||
method: 'POST',
|
||||
target: null,
|
||||
traditional: false,
|
||||
redirectTop: false,
|
||||
shouldKeepBlankFields: false
|
||||
};
|
||||
|
||||
/**
|
||||
* jQuery Redirect
|
||||
* @param {string} url - Url of the redirection
|
||||
* @param {Object} values - (optional) An object with the data to send. If not present will look for values as QueryString in the target url.
|
||||
* @param {string} method - (optional) The HTTP verb can be GET or POST (defaults to POST)
|
||||
* @param {string} target - (optional) The target of the form. "_blank" will open the url in a new window.
|
||||
* @param {boolean} traditional - (optional) This provides the same function as jquery's ajax function. The brackets are omitted on the field name if its an array. This allows arrays to work with MVC.net among others.
|
||||
* @param {boolean} redirectTop - (optional) If its called from a iframe, force to navigate the top window.
|
||||
* @param {boolean} shouldKeepBlankFields - (optional) If shouldKeepBlankFields is false, blank fields will be removed.
|
||||
*//**
|
||||
* jQuery Redirect
|
||||
* @param {string} opts - Options object
|
||||
* @param {string} opts.url - Url of the redirection
|
||||
* @param {Object} opts.values - (optional) An object with the data to send. If not present will look for values as QueryString in the target url.
|
||||
* @param {string} opts.method - (optional) The HTTP verb can be GET or POST (defaults to POST)
|
||||
* @param {string} opts.target - (optional) The target of the form. "_blank" will open the url in a new window.
|
||||
* @param {boolean} opts.traditional - (optional) This provides the same function as jquery's ajax function. The brackets are omitted on the field name if its an array. This allows arrays to work with MVC.net among others.
|
||||
* @param {boolean} opts.redirectTop - (optional) If its called from a iframe, force to navigate the top window.
|
||||
* @param {boolean} opts.shouldKeepBlankFields - (optional) If shouldKeepBlankFields is false, blank fields will be removed.
|
||||
*/
|
||||
|
||||
$.redirect = function (url, values, method, target, traditional, redirectTop, shouldKeepBlankFields) {
|
||||
var opts = url;
|
||||
if (typeof url !== 'object') {
|
||||
opts = {
|
||||
url: url,
|
||||
values: values,
|
||||
method: method,
|
||||
target: target,
|
||||
traditional: traditional,
|
||||
redirectTop: redirectTop,
|
||||
shouldKeepBlankFields: shouldKeepBlankFields
|
||||
};
|
||||
}
|
||||
|
||||
var config = $.extend({}, defaults, opts);
|
||||
var generatedForm = $.redirect.getForm(config.url, config.values, config.method, config.target, config.traditional, config.shouldKeepBlankFields);
|
||||
$('body', config.redirectTop ? window.top.document : undefined).append(generatedForm.form);
|
||||
generatedForm.submit();
|
||||
generatedForm.form.remove();
|
||||
};
|
||||
|
||||
$.redirect.getForm = function (url, values, method, target, traditional, shouldKeepBlankFields) {
|
||||
method = (method && ['GET', 'POST', 'PUT', 'DELETE'].indexOf(method.toUpperCase()) !== -1) ? method.toUpperCase() : 'POST';
|
||||
|
||||
url = url.split('#');
|
||||
var hash = url[1] ? ('#' + url[1]) : '';
|
||||
url = url[0];
|
||||
|
||||
if (!values) {
|
||||
var obj = $.parseUrl(url);
|
||||
url = obj.url;
|
||||
values = obj.params;
|
||||
}
|
||||
|
||||
values = removeNulls(values, shouldKeepBlankFields);
|
||||
|
||||
var form = $('<form>')
|
||||
.attr('method', method)
|
||||
.attr('action', url + hash);
|
||||
|
||||
if (target) {
|
||||
form.attr('target', target);
|
||||
}
|
||||
|
||||
var submit = form[0].submit;
|
||||
iterateValues(values, [], form, null, traditional);
|
||||
|
||||
return { form: form, submit: function () { submit.call(form[0]); } };
|
||||
};
|
||||
|
||||
// Utility Functions
|
||||
/**
|
||||
* Url and QueryString Parser.
|
||||
* @param {string} url - a Url to parse.
|
||||
* @returns {object} an object with the parsed url with the following structure {url: URL, params:{ KEY: VALUE }}
|
||||
*/
|
||||
$.parseUrl = function (url) {
|
||||
if (url.indexOf('?') === -1) {
|
||||
return {
|
||||
url: url,
|
||||
params: {}
|
||||
};
|
||||
}
|
||||
var parts = url.split('?');
|
||||
var queryString = parts[1];
|
||||
var elems = queryString.split('&');
|
||||
url = parts[0];
|
||||
|
||||
var i;
|
||||
var pair;
|
||||
var obj = {};
|
||||
for (i = 0; i < elems.length; i += 1) {
|
||||
pair = elems[i].split('=');
|
||||
obj[pair[0]] = pair[1];
|
||||
}
|
||||
|
||||
return {
|
||||
url: url,
|
||||
params: obj
|
||||
};
|
||||
};
|
||||
|
||||
// Private Functions
|
||||
var getInput = function (name, value, parent, array, traditional) {
|
||||
var parentString;
|
||||
if (parent.length > 0) {
|
||||
parentString = parent[0];
|
||||
var i;
|
||||
for (i = 1; i < parent.length; i += 1) {
|
||||
parentString += '[' + parent[i] + ']';
|
||||
}
|
||||
|
||||
if (array) {
|
||||
if (traditional) {
|
||||
name = parentString;
|
||||
} else {
|
||||
name = parentString + '[' + name + ']';
|
||||
}
|
||||
} else {
|
||||
name = parentString + '[' + name + ']';
|
||||
}
|
||||
}
|
||||
|
||||
return $('<input>').attr('type', 'hidden')
|
||||
.attr('name', name)
|
||||
.attr('value', value);
|
||||
};
|
||||
|
||||
var iterateValues = function (values, parent, form, isArray, traditional) {
|
||||
var iterateParent = [];
|
||||
Object.keys(values).forEach(function (i) {
|
||||
if (typeof values[i] === 'object') {
|
||||
iterateParent = parent.slice();
|
||||
iterateParent.push(i);
|
||||
iterateValues(values[i], iterateParent, form, Array.isArray(values[i]), traditional);
|
||||
} else {
|
||||
form.append(getInput(i, values[i], parent, isArray, traditional));
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
var removeNulls = function (values, shouldKeepBlankFields) {
|
||||
var propNames = Object.getOwnPropertyNames(values);
|
||||
for (var i = 0; i < propNames.length; i++) {
|
||||
var propName = propNames[i];
|
||||
if (values[propName] === null || values[propName] === undefined) {
|
||||
delete values[propName];
|
||||
} else if (typeof values[propName] === 'object') {
|
||||
values[propName] = removeNulls(values[propName], shouldKeepBlankFields);
|
||||
} else if (!shouldKeepBlankFields && values[propName].length < 1) {
|
||||
delete values[propName];
|
||||
}
|
||||
}
|
||||
return values;
|
||||
};
|
||||
}(window.jQuery || window.Zepto || window.jqlite));
|
||||
118
assets/js/main.js
Normal file
118
assets/js/main.js
Normal file
@ -0,0 +1,118 @@
|
||||
/**
|
||||
* Main
|
||||
*/
|
||||
|
||||
'use strict';
|
||||
|
||||
let menu, animate;
|
||||
|
||||
(function () {
|
||||
// Initialize menu
|
||||
//-----------------
|
||||
|
||||
let layoutMenuEl = document.querySelectorAll('#layout-menu');
|
||||
layoutMenuEl.forEach(function (element) {
|
||||
menu = new Menu(element, {
|
||||
orientation: 'vertical',
|
||||
closeChildren: false
|
||||
});
|
||||
// Change parameter to true if you want scroll animation
|
||||
window.Helpers.scrollToActive((animate = false));
|
||||
window.Helpers.mainMenu = menu;
|
||||
});
|
||||
|
||||
// Initialize menu togglers and bind click on each
|
||||
let menuToggler = document.querySelectorAll('.layout-menu-toggle');
|
||||
menuToggler.forEach(item => {
|
||||
item.addEventListener('click', event => {
|
||||
event.preventDefault();
|
||||
window.Helpers.toggleCollapsed();
|
||||
});
|
||||
});
|
||||
|
||||
// Display menu toggle (layout-menu-toggle) on hover with delay
|
||||
let delay = function (elem, callback) {
|
||||
let timeout = null;
|
||||
elem.onmouseenter = function () {
|
||||
// Set timeout to be a timer which will invoke callback after 300ms (not for small screen)
|
||||
if (!Helpers.isSmallScreen()) {
|
||||
timeout = setTimeout(callback, 300);
|
||||
} else {
|
||||
timeout = setTimeout(callback, 0);
|
||||
}
|
||||
};
|
||||
|
||||
elem.onmouseleave = function () {
|
||||
// Clear any timers set to timeout
|
||||
document.querySelector('.layout-menu-toggle').classList.remove('d-block');
|
||||
clearTimeout(timeout);
|
||||
};
|
||||
};
|
||||
if (document.getElementById('layout-menu')) {
|
||||
delay(document.getElementById('layout-menu'), function () {
|
||||
// not for small screen
|
||||
if (!Helpers.isSmallScreen()) {
|
||||
document.querySelector('.layout-menu-toggle').classList.add('d-block');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Display in main menu when menu scrolls
|
||||
let menuInnerContainer = document.getElementsByClassName('menu-inner'),
|
||||
menuInnerShadow = document.getElementsByClassName('menu-inner-shadow')[0];
|
||||
if (menuInnerContainer.length > 0 && menuInnerShadow) {
|
||||
menuInnerContainer[0].addEventListener('ps-scroll-y', function () {
|
||||
if (this.querySelector('.ps__thumb-y').offsetTop) {
|
||||
menuInnerShadow.style.display = 'block';
|
||||
} else {
|
||||
menuInnerShadow.style.display = 'none';
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Init helpers & misc
|
||||
// --------------------
|
||||
|
||||
// Init BS Tooltip
|
||||
const tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
|
||||
tooltipTriggerList.map(function (tooltipTriggerEl) {
|
||||
return new bootstrap.Tooltip(tooltipTriggerEl);
|
||||
});
|
||||
|
||||
// Accordion active class
|
||||
const accordionActiveFunction = function (e) {
|
||||
if (e.type == 'show.bs.collapse' || e.type == 'show.bs.collapse') {
|
||||
e.target.closest('.accordion-item').classList.add('active');
|
||||
} else {
|
||||
e.target.closest('.accordion-item').classList.remove('active');
|
||||
}
|
||||
};
|
||||
|
||||
const accordionTriggerList = [].slice.call(document.querySelectorAll('.accordion'));
|
||||
const accordionList = accordionTriggerList.map(function (accordionTriggerEl) {
|
||||
accordionTriggerEl.addEventListener('show.bs.collapse', accordionActiveFunction);
|
||||
accordionTriggerEl.addEventListener('hide.bs.collapse', accordionActiveFunction);
|
||||
});
|
||||
|
||||
// Auto update layout based on screen size
|
||||
window.Helpers.setAutoUpdate(true);
|
||||
|
||||
// Toggle Password Visibility
|
||||
window.Helpers.initPasswordToggle();
|
||||
|
||||
// Speech To Text
|
||||
window.Helpers.initSpeechToText();
|
||||
|
||||
// Manage menu expanded/collapsed with templateCustomizer & local storage
|
||||
//------------------------------------------------------------------
|
||||
|
||||
// If current layout is horizontal OR current window screen is small (overlay menu) than return from here
|
||||
if (window.Helpers.isSmallScreen()) {
|
||||
return;
|
||||
}
|
||||
|
||||
// If current layout is vertical and current window screen is > small
|
||||
|
||||
// Auto update menu collapsed/expanded based on the themeConfig
|
||||
window.Helpers.setCollapsed(true, false);
|
||||
})();
|
||||
29
assets/js/pages-account-settings-account.js
Normal file
29
assets/js/pages-account-settings-account.js
Normal file
@ -0,0 +1,29 @@
|
||||
/**
|
||||
* Account Settings - Account
|
||||
*/
|
||||
|
||||
'use strict';
|
||||
|
||||
document.addEventListener('DOMContentLoaded', function (e) {
|
||||
(function () {
|
||||
const deactivateAcc = document.querySelector('#formAccountDeactivation');
|
||||
|
||||
// Update/reset user image of account page
|
||||
let accountUserImage = document.getElementById('uploadedAvatar');
|
||||
const fileInput = document.querySelector('.account-file-input'),
|
||||
resetFileInput = document.querySelector('.account-image-reset');
|
||||
|
||||
if (accountUserImage) {
|
||||
const resetImage = accountUserImage.src;
|
||||
fileInput.onchange = () => {
|
||||
if (fileInput.files[0]) {
|
||||
accountUserImage.src = window.URL.createObjectURL(fileInput.files[0]);
|
||||
}
|
||||
};
|
||||
resetFileInput.onclick = () => {
|
||||
fileInput.value = '';
|
||||
accountUserImage.src = resetImage;
|
||||
};
|
||||
}
|
||||
})();
|
||||
});
|
||||
33
assets/js/ui-modals.js
Normal file
33
assets/js/ui-modals.js
Normal file
@ -0,0 +1,33 @@
|
||||
/**
|
||||
* UI Modals
|
||||
*/
|
||||
|
||||
'use strict';
|
||||
|
||||
(function () {
|
||||
// On hiding modal, remove iframe video/audio to stop playing
|
||||
const youTubeModal = document.querySelector('#youTubeModal'),
|
||||
youTubeModalVideo = youTubeModal.querySelector('iframe');
|
||||
youTubeModal.addEventListener('hidden.bs.modal', function () {
|
||||
youTubeModalVideo.setAttribute('src', '');
|
||||
});
|
||||
|
||||
// Function to get and auto play youTube video
|
||||
const autoPlayYouTubeModal = function () {
|
||||
const modalTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="modal"]'));
|
||||
modalTriggerList.map(function (modalTriggerEl) {
|
||||
modalTriggerEl.onclick = function () {
|
||||
const theModal = this.getAttribute('data-bs-target'),
|
||||
videoSRC = this.getAttribute('data-theVideo'),
|
||||
videoSRCauto = `${videoSRC}?autoplay=1`,
|
||||
modalVideo = document.querySelector(`${theModal} iframe`);
|
||||
if (modalVideo) {
|
||||
modalVideo.setAttribute('src', videoSRCauto);
|
||||
}
|
||||
};
|
||||
});
|
||||
};
|
||||
|
||||
// Calling function on load
|
||||
autoPlayYouTubeModal();
|
||||
})();
|
||||
13
assets/js/ui-popover.js
Normal file
13
assets/js/ui-popover.js
Normal file
@ -0,0 +1,13 @@
|
||||
// /**
|
||||
// * UI Tooltips & Popovers
|
||||
// */
|
||||
|
||||
'use strict';
|
||||
|
||||
(function () {
|
||||
const popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'));
|
||||
const popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
|
||||
// added { html: true, sanitize: false } option to render button in content area of popover
|
||||
return new bootstrap.Popover(popoverTriggerEl, { html: true, sanitize: false });
|
||||
});
|
||||
})();
|
||||
39
assets/js/ui-toasts.js
Normal file
39
assets/js/ui-toasts.js
Normal file
@ -0,0 +1,39 @@
|
||||
/**
|
||||
* UI Toasts
|
||||
*/
|
||||
|
||||
'use strict';
|
||||
|
||||
(function () {
|
||||
// Bootstrap toasts example
|
||||
// --------------------------------------------------------------------
|
||||
const toastPlacementExample = document.querySelector('.toast-placement-ex'),
|
||||
toastPlacementBtn = document.querySelector('#showToastPlacement');
|
||||
let selectedType, selectedPlacement, toastPlacement;
|
||||
|
||||
// Dispose toast when open another
|
||||
function toastDispose(toast) {
|
||||
if (toast && toast._element !== null) {
|
||||
if (toastPlacementExample) {
|
||||
toastPlacementExample.classList.remove(selectedType);
|
||||
DOMTokenList.prototype.remove.apply(toastPlacementExample.classList, selectedPlacement);
|
||||
}
|
||||
toast.dispose();
|
||||
}
|
||||
}
|
||||
// Placement Button click
|
||||
if (toastPlacementBtn) {
|
||||
toastPlacementBtn.onclick = function () {
|
||||
if (toastPlacement) {
|
||||
toastDispose(toastPlacement);
|
||||
}
|
||||
selectedType = document.querySelector('#selectTypeOpt').value;
|
||||
selectedPlacement = document.querySelector('#selectPlacement').value.split(' ');
|
||||
|
||||
toastPlacementExample.classList.add(selectedType);
|
||||
DOMTokenList.prototype.add.apply(toastPlacementExample.classList, selectedPlacement);
|
||||
toastPlacement = new bootstrap.Toast(toastPlacementExample);
|
||||
toastPlacement.show();
|
||||
};
|
||||
}
|
||||
})();
|
||||
Reference in New Issue
Block a user