talksik/nirvana
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

adding files of assets

Browse Source
This commit is contained in:
Arjun Patel
2022-01-10 22:32:53 -08:00
parent f2779a0c2e
commit 91a01f7b7c
1582 changed files with 424006 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/js/custom/documentation/base/indicator.js
+68
View File
@@ -0,0 +1,68 @@
"use strict";
// Class definition
var KTBaseIndicatorDemos = function() {
// Private functions
var _example1 = function(element) {
// Element to indecate
var button = document.querySelector("#kt_button_1");
// Handle button click event
button.addEventListener("click", function() {
// Activate indicator
button.setAttribute("data-kt-indicator", "on");
// Disable indicator after 3 seconds
setTimeout(function() {
button.removeAttribute("data-kt-indicator");
}, 3000);
});
}
var _example2 = function(element) {
// Element to indecate
var button = document.querySelector("#kt_button_2");
// Handle button click event
button.addEventListener("click", function() {
// Activate indicator
button.setAttribute("data-kt-indicator", "on");
// Disable indicator after 3 seconds
setTimeout(function() {
button.removeAttribute("data-kt-indicator");
}, 3000);
});
}
var _example3 = function(element) {
// Element to indecate
var button = document.querySelector("#kt_button_3");
// Handle button click event
button.addEventListener("click", function() {
// Activate indicator
button.setAttribute("data-kt-indicator", "on");
// Disable indicator after 3 seconds
setTimeout(function() {
button.removeAttribute("data-kt-indicator");
}, 3000);
});
}
return {
// Public Functions
init: function(element) {
_example1();
_example2();
_example3();
}
};
}();
// On document ready
KTUtil.onDOMContentLoaded(function() {
KTBaseIndicatorDemos.init();
});
assets/js/custom/documentation/base/rotate.js
+50
View File
@@ -0,0 +1,50 @@
"use strict";
// Class definition
var KTBaseRotateDemos = function() {
// Private functions
var _example1 = function(element) {
// Element to indecate
var button = document.querySelector("#kt_button_1");
// Handle button click event
button.addEventListener("click", function() {
button.classList.toggle("active");
});
}
var _example2 = function(element) {
// Element to indecate
var button = document.querySelector("#kt_button_2");
// Handle button click event
button.addEventListener("click", function() {
button.classList.toggle("active");
});
}
var _example3 = function(element) {
// Element to indecate
var button = document.querySelector("#kt_button_3");
// Handle button click event
button.addEventListener("click", function() {
button.classList.toggle("active");
});
}
return {
// Public Functions
init: function(element) {
_example1();
_example2();
_example3();
}
};
}();
// On document ready
KTUtil.onDOMContentLoaded(function() {
KTBaseRotateDemos.init();
});
assets/js/custom/documentation/base/toast.js
+60
View File
@@ -0,0 +1,60 @@
"use strict";
// Class definition
const KTBaseToastDemos = function () {
// Private functions
const exampleToggle = () => {
// Select elements
const button = document.getElementById('kt_docs_toast_toggle_button');
const toastElement = document.getElementById('kt_docs_toast_toggle');
// Get toast instance --- more info: https://getbootstrap.com/docs/5.1/components/toasts/#getinstance
const toast = bootstrap.Toast.getOrCreateInstance(toastElement);
// Handle button click
button.addEventListener('click', e => {
e.preventDefault();
// Toggle toast to show --- more info: https://getbootstrap.com/docs/5.1/components/toasts/#show
toast.show();
});
}
const exampleStack = () => {
// Select elements
const button = document.getElementById('kt_docs_toast_stack_button');
const container = document.getElementById('kt_docs_toast_stack_container');
const targetElement = document.querySelector('[data-kt-docs-toast="stack"]'); // Use CSS class or HTML attr to avoid duplicating ids
// Remove base element markup
targetElement.parentNode.removeChild(targetElement);
// Handle button click
button.addEventListener('click', e => {
e.preventDefault();
// Create new toast element
const newToast = targetElement.cloneNode(true);
container.append(newToast);
// Create new toast instance --- more info: https://getbootstrap.com/docs/5.1/components/toasts/#getorcreateinstance
const toast = bootstrap.Toast.getOrCreateInstance(newToast);
// Toggle toast to show --- more info: https://getbootstrap.com/docs/5.1/components/toasts/#show
toast.show();
});
}
return {
// Public Functions
init: function () {
exampleToggle();
exampleStack();
}
};
}();
// On document ready
KTUtil.onDOMContentLoaded(function () {
KTBaseToastDemos.init();
});
assets/js/custom/documentation/charts/apexcharts.js
+843
View File
@@ -0,0 +1,843 @@
"use strict";
// Class definition
var KTGeneralApexCharts = function () {
// Shared variables
// Private functions
var example1 = function () {
var element = document.getElementById("kt_apexcharts_1");
var height = parseInt(KTUtil.css(element, 'height'));
var labelColor = KTUtil.getCssVariableValue('--bs-gray-500');
var borderColor = KTUtil.getCssVariableValue('--bs-gray-200');
var baseColor = KTUtil.getCssVariableValue('--bs-primary');
var secondaryColor = KTUtil.getCssVariableValue('--bs-gray-300');
var dangerColor = KTUtil.getCssVariableValue('--bs-danger');
if (!element) {
return;
}
var options = {
series: [{
name: 'Net Profit',
data: [44, 55, 57, 56, 61, 58, 43, 56, 65, 41, 55, 66]
}, {
name: 'Cost',
data: [32, 34, 52, 46, 27, 60, 41, 49, 13, 11, 44, 33]
}, {
name: 'Revenue',
data: [76, 85, 101, 98, 87, 105, 87, 99, 75, 82, 91, 89]
}],
chart: {
fontFamily: 'inherit',
type: 'bar',
height: height,
toolbar: {
show: false
}
},
plotOptions: {
bar: {
horizontal: false,
columnWidth: ['40%'],
endingShape: 'rounded'
},
},
legend: {
show: false
},
dataLabels: {
enabled: false
},
stroke: {
show: true,
width: 2,
colors: ['transparent']
},
xaxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
axisBorder: {
show: false,
},
axisTicks: {
show: false
},
labels: {
style: {
colors: labelColor,
fontSize: '12px'
}
}
},
yaxis: {
labels: {
style: {
colors: labelColor,
fontSize: '12px'
}
}
},
fill: {
opacity: 1
},
states: {
normal: {
filter: {
type: 'none',
value: 0
}
},
hover: {
filter: {
type: 'none',
value: 0
}
},
active: {
allowMultipleDataPointsSelection: false,
filter: {
type: 'none',
value: 0
}
}
},
tooltip: {
style: {
fontSize: '12px'
},
y: {
formatter: function (val) {
return "$" + val + " thousands"
}
}
},
colors: [baseColor, dangerColor, secondaryColor],
grid: {
borderColor: borderColor,
strokeDashArray: 4,
yaxis: {
lines: {
show: true
}
}
}
};
var chart = new ApexCharts(element, options);
chart.render();
}
var example2 = function () {
var element = document.getElementById("kt_apexcharts_2");
var height = parseInt(KTUtil.css(element, 'height'));
var labelColor = KTUtil.getCssVariableValue('--bs-gray-500');
var borderColor = KTUtil.getCssVariableValue('--bs-gray-200');
var baseColor = KTUtil.getCssVariableValue('--bs-warning');
var secondaryColor = KTUtil.getCssVariableValue('--bs-gray-300');
if (!element) {
return;
}
var options = {
series: [{
name: 'Net Profit',
data: [44, 55, 57, 56, 61, 58]
}, {
name: 'Revenue',
data: [76, 85, 101, 98, 87, 105]
}],
chart: {
fontFamily: 'inherit',
type: 'bar',
height: height,
toolbar: {
show: false
}
},
plotOptions: {
bar: {
horizontal: true,
columnWidth: ['30%'],
endingShape: 'rounded'
},
},
legend: {
show: false
},
dataLabels: {
enabled: false
},
stroke: {
show: true,
width: 2,
colors: ['transparent']
},
xaxis: {
categories: ['Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'],
axisBorder: {
show: false,
},
axisTicks: {
show: false
},
labels: {
style: {
colors: labelColor,
fontSize: '12px'
}
}
},
yaxis: {
labels: {
style: {
colors: labelColor,
fontSize: '12px'
}
}
},
fill: {
opacity: 1
},
states: {
normal: {
filter: {
type: 'none',
value: 0
}
},
hover: {
filter: {
type: 'none',
value: 0
}
},
active: {
allowMultipleDataPointsSelection: false,
filter: {
type: 'none',
value: 0
}
}
},
tooltip: {
style: {
fontSize: '12px'
},
y: {
formatter: function (val) {
return "$" + val + " thousands"
}
}
},
colors: [baseColor, secondaryColor],
grid: {
borderColor: borderColor,
strokeDashArray: 4,
yaxis: {
lines: {
show: true
}
}
}
};
var chart = new ApexCharts(element, options);
chart.render();
}
var example3 = function () {
var element = document.getElementById("kt_apexcharts_3");
var height = parseInt(KTUtil.css(element, 'height'));
var labelColor = KTUtil.getCssVariableValue('--bs-gray-500');
var borderColor = KTUtil.getCssVariableValue('--bs-gray-200');
var baseColor = KTUtil.getCssVariableValue('--bs-info');
var lightColor = KTUtil.getCssVariableValue('--bs-light-info');
if (!element) {
return;
}
var options = {
series: [{
name: 'Net Profit',
data: [30, 40, 40, 90, 90, 70, 70]
}],
chart: {
fontFamily: 'inherit',
type: 'area',
height: height,
toolbar: {
show: false
}
},
plotOptions: {
},
legend: {
show: false
},
dataLabels: {
enabled: false
},
fill: {
type: 'solid',
opacity: 1
},
stroke: {
curve: 'smooth',
show: true,
width: 3,
colors: [baseColor]
},
xaxis: {
categories: ['Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug'],
axisBorder: {
show: false,
},
axisTicks: {
show: false
},
labels: {
style: {
colors: labelColor,
fontSize: '12px'
}
},
crosshairs: {
position: 'front',
stroke: {
color: baseColor,
width: 1,
dashArray: 3
}
},
tooltip: {
enabled: true,
formatter: undefined,
offsetY: 0,
style: {
fontSize: '12px'
}
}
},
yaxis: {
labels: {
style: {
colors: labelColor,
fontSize: '12px'
}
}
},
states: {
normal: {
filter: {
type: 'none',
value: 0
}
},
hover: {
filter: {
type: 'none',
value: 0
}
},
active: {
allowMultipleDataPointsSelection: false,
filter: {
type: 'none',
value: 0
}
}
},
tooltip: {
style: {
fontSize: '12px'
},
y: {
formatter: function (val) {
return "$" + val + " thousands"
}
}
},
colors: [lightColor],
grid: {
borderColor: borderColor,
strokeDashArray: 4,
yaxis: {
lines: {
show: true
}
}
},
markers: {
strokeColor: baseColor,
strokeWidth: 3
}
};
var chart = new ApexCharts(element, options);
chart.render();
}
var example4 = function () {
var element = document.getElementById("kt_apexcharts_4");
var height = parseInt(KTUtil.css(element, 'height'));
var labelColor = KTUtil.getCssVariableValue('--bs-gray-500');
var borderColor = KTUtil.getCssVariableValue('--bs-gray-200');
var baseColor = KTUtil.getCssVariableValue('--bs-success');
var baseLightColor = KTUtil.getCssVariableValue('--bs-light-success');
var secondaryColor = KTUtil.getCssVariableValue('--bs-warning');
var secondaryLightColor = KTUtil.getCssVariableValue('--bs-light-warning');
if (!element) {
return;
}
var options = {
series: [{
name: 'Net Profit',
data: [60, 50, 80, 40, 100, 60]
}, {
name: 'Revenue',
data: [70, 60, 110, 40, 50, 70]
}],
chart: {
fontFamily: 'inherit',
type: 'area',
height: height,
toolbar: {
show: false
}
},
plotOptions: {},
legend: {
show: false
},
dataLabels: {
enabled: false
},
fill: {
type: 'solid',
opacity: 1
},
stroke: {
curve: 'smooth'
},
xaxis: {
categories: ['Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'],
axisBorder: {
show: false,
},
axisTicks: {
show: false
},
labels: {
style: {
colors: labelColor,
fontSize: '12px'
}
},
crosshairs: {
position: 'front',
stroke: {
color: labelColor,
width: 1,
dashArray: 3
}
},
tooltip: {
enabled: true,
formatter: undefined,
offsetY: 0,
style: {
fontSize: '12px'
}
}
},
yaxis: {
labels: {
style: {
colors: labelColor,
fontSize: '12px'
}
}
},
states: {
normal: {
filter: {
type: 'none',
value: 0
}
},
hover: {
filter: {
type: 'none',
value: 0
}
},
active: {
allowMultipleDataPointsSelection: false,
filter: {
type: 'none',
value: 0
}
}
},
tooltip: {
style: {
fontSize: '12px'
},
y: {
formatter: function (val) {
return "$" + val + " thousands"
}
}
},
colors: [baseColor, secondaryColor],
grid: {
borderColor: borderColor,
strokeDashArray: 4,
yaxis: {
lines: {
show: true
}
}
},
markers: {
colors: [baseLightColor, secondaryLightColor],
strokeColor: [baseLightColor, secondaryLightColor],
strokeWidth: 3
}
};
var chart = new ApexCharts(element, options);
chart.render();
}
var example5 = function () {
var element = document.getElementById("kt_apexcharts_5");
var height = parseInt(KTUtil.css(element, 'height'));
var labelColor = KTUtil.getCssVariableValue('--bs-gray-500');
var borderColor = KTUtil.getCssVariableValue('--bs-gray-200');
var baseColor = KTUtil.getCssVariableValue('--bs-primary');
var baseLightColor = KTUtil.getCssVariableValue('--bs-light-primary');
var secondaryColor = KTUtil.getCssVariableValue('--bs-info');
if (!element) {
return;
}
var options = {
series: [{
name: 'Net Profit',
type: 'bar',
stacked: true,
data: [40, 50, 65, 70, 50, 30]
}, {
name: 'Revenue',
type: 'bar',
stacked: true,
data: [20, 20, 25, 30, 30, 20]
}, {
name: 'Expenses',
type: 'area',
data: [50, 80, 60, 90, 50, 70]
}],
chart: {
fontFamily: 'inherit',
stacked: true,
height: height,
toolbar: {
show: false
}
},
plotOptions: {
bar: {
stacked: true,
horizontal: false,
endingShape: 'rounded',
columnWidth: ['12%']
},
},
legend: {
show: false
},
dataLabels: {
enabled: false
},
stroke: {
curve: 'smooth',
show: true,
width: 2,
colors: ['transparent']
},
xaxis: {
categories: ['Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'],
axisBorder: {
show: false,
},
axisTicks: {
show: false
},
labels: {
style: {
colors: labelColor,
fontSize: '12px'
}
}
},
yaxis: {
max: 120,
labels: {
style: {
colors: labelColor,
fontSize: '12px'
}
}
},
fill: {
opacity: 1
},
states: {
normal: {
filter: {
type: 'none',
value: 0
}
},
hover: {
filter: {
type: 'none',
value: 0
}
},
active: {
allowMultipleDataPointsSelection: false,
filter: {
type: 'none',
value: 0
}
}
},
tooltip: {
style: {
fontSize: '12px'
},
y: {
formatter: function (val) {
return "$" + val + " thousands"
}
}
},
colors: [baseColor, secondaryColor, baseLightColor],
grid: {
borderColor: borderColor,
strokeDashArray: 4,
yaxis: {
lines: {
show: true
}
},
padding: {
top: 0,
right: 0,
bottom: 0,
left: 0
}
}
};
var chart = new ApexCharts(element, options);
chart.render();
}
var example6 = function () {
var element = document.getElementById("kt_apexcharts_6");
var height = parseInt(KTUtil.css(element, 'height'));
var baseColor = KTUtil.getCssVariableValue('--bs-primary');
var baseLightColor = KTUtil.getCssVariableValue('--bs-success');
var secondaryColor = KTUtil.getCssVariableValue('--bs-info');
if (!element) {
return;
}
var options = {
series: [
{
name: 'Bob',
data: [
{
x: 'Design',
y: [
new Date('2019-03-05').getTime(),
new Date('2019-03-08').getTime()
]
},
{
x: 'Code',
y: [
new Date('2019-03-02').getTime(),
new Date('2019-03-05').getTime()
]
},
{
x: 'Code',
y: [
new Date('2019-03-05').getTime(),
new Date('2019-03-07').getTime()
]
},
{
x: 'Test',
y: [
new Date('2019-03-03').getTime(),
new Date('2019-03-09').getTime()
]
},
{
x: 'Test',
y: [
new Date('2019-03-08').getTime(),
new Date('2019-03-11').getTime()
]
},
{
x: 'Validation',
y: [
new Date('2019-03-11').getTime(),
new Date('2019-03-16').getTime()
]
},
{
x: 'Design',
y: [
new Date('2019-03-01').getTime(),
new Date('2019-03-03').getTime()
]
}
]
},
{
name: 'Joe',
data: [
{
x: 'Design',
y: [
new Date('2019-03-02').getTime(),
new Date('2019-03-05').getTime()
]
},
{
x: 'Test',
y: [
new Date('2019-03-06').getTime(),
new Date('2019-03-16').getTime()
]
},
{
x: 'Code',
y: [
new Date('2019-03-03').getTime(),
new Date('2019-03-07').getTime()
]
},
{
x: 'Deployment',
y: [
new Date('2019-03-20').getTime(),
new Date('2019-03-22').getTime()
]
},
{
x: 'Design',
y: [
new Date('2019-03-10').getTime(),
new Date('2019-03-16').getTime()
]
}
]
},
{
name: 'Dan',
data: [
{
x: 'Code',
y: [
new Date('2019-03-10').getTime(),
new Date('2019-03-17').getTime()
]
},
{
x: 'Validation',
y: [
new Date('2019-03-05').getTime(),
new Date('2019-03-09').getTime()
]
},
]
}
],
chart: {
type: 'rangeBar',
fontFamily: 'inherit',
height: height,
toolbar: {
show: false
}
},
colors: [baseColor, secondaryColor, baseLightColor],
plotOptions: {
bar: {
horizontal: true,
barHeight: '80%'
}
},
xaxis: {
type: 'datetime'
},
stroke: {
width: 1
},
fill: {
type: 'solid',
opacity: 1
},
legend: {
position: 'top',
horizontalAlign: 'left'
}
};
var chart = new ApexCharts(element, options);
chart.render();
}
return {
// Public Functions
init: function () {
example1();
example2();
example3();
example4();
example5();
example6();
}
};
}();
// On document ready
KTUtil.onDOMContentLoaded(function () {
KTGeneralApexCharts.init();
});
assets/js/custom/documentation/charts/chartjs.js
+333
View File
@@ -0,0 +1,333 @@
"use strict";
// Class definition
var KTGeneralChartJS = function () {
// Randomizer function
function getRandom(min = 1, max = 100) {
return Math.floor(Math.random() * (max - min) + min);
}
function generateRandomData(min = 1, max = 100, count = 10) {
var arr = [];
for (var i = 0; i < count; i++) {
arr.push(getRandom(min, max));
}
return arr;
}
// Private functions
var example1 = function () {
// Define chart element
var ctx = document.getElementById('kt_chartjs_1');
// Define colors
var primaryColor = KTUtil.getCssVariableValue('--bs-primary');
var dangerColor = KTUtil.getCssVariableValue('--bs-danger');
var successColor = KTUtil.getCssVariableValue('--bs-success');
// Define fonts
var fontFamily = KTUtil.getCssVariableValue('--bs-font-sans-serif');
// Chart labels
const labels = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
// Chart data
const data = {
labels: labels,
datasets: [
{
label: 'Dataset 1',
data: generateRandomData(1, 100, 12),
backgroundColor: primaryColor,
stack: 'Stack 0',
},
{
label: 'Dataset 2',
data: generateRandomData(1, 100, 12),
backgroundColor: dangerColor,
stack: 'Stack 1',
},
{
label: 'Dataset 3',
data: generateRandomData(1, 100, 12),
backgroundColor: successColor,
stack: 'Stack 2',
},
]
};
// Chart config
const config = {
type: 'bar',
data: data,
options: {
plugins: {
title: {
display: false,
}
},
responsive: true,
interaction: {
intersect: false,
},
scales: {
x: {
stacked: true,
},
y: {
stacked: true
}
}
}
};
// Init ChartJS -- for more info, please visit: https://www.chartjs.org/docs/latest/
var myChart = new Chart(ctx, config);
}
var example2 = function () {
// Define chart element
var ctx = document.getElementById('kt_chartjs_2');
// Define colors
var primaryColor = KTUtil.getCssVariableValue('--bs-primary');
var dangerColor = KTUtil.getCssVariableValue('--bs-danger');
var successColor = KTUtil.getCssVariableValue('--bs-success');
// Define fonts
var fontFamily = KTUtil.getCssVariableValue('--bs-font-sans-serif');
// Chart labels
const labels = ['January', 'February', 'March', 'April', 'May', 'June', 'July'];
// Chart data
const data = {
labels: labels,
datasets: [
{
label: 'Dataset 1',
data: generateRandomData(1, 50, 7),
borderColor: primaryColor,
backgroundColor: 'transparent'
},
{
label: 'Dataset 2',
data: generateRandomData(1, 50, 7),
borderColor: dangerColor,
backgroundColor: 'transparent'
},
]
};
// Chart config
const config = {
type: 'line',
data: data,
options: {
plugins: {
title: {
display: false,
}
},
responsive: true,
}
};
// Init ChartJS -- for more info, please visit: https://www.chartjs.org/docs/latest/
var myChart = new Chart(ctx, config);
}
var example3 = function () {
// Define chart element
var ctx = document.getElementById('kt_chartjs_3');
// Define colors
var primaryColor = KTUtil.getCssVariableValue('--bs-primary');
var dangerColor = KTUtil.getCssVariableValue('--bs-danger');
var successColor = KTUtil.getCssVariableValue('--bs-success');
var warningColor = KTUtil.getCssVariableValue('--bs-warning');
var infoColor = KTUtil.getCssVariableValue('--bs-info');
// Chart labels
const labels = ['January', 'February', 'March', 'April', 'May'];
// Chart data
const data = {
labels: labels,
datasets: [
{
label: 'Dataset 1',
data: generateRandomData(1, 100, 5),
backgroundColor: [primaryColor, dangerColor, successColor, warningColor, infoColor]
},
]
};
// Chart config
const config = {
type: 'pie',
data: data,
options: {
plugins: {
title: {
display: false,
}
},
responsive: true,
}
};
// Init ChartJS -- for more info, please visit: https://www.chartjs.org/docs/latest/
var myChart = new Chart(ctx, config);
}
var example4 = function () {
// Define chart element
var ctx = document.getElementById('kt_chartjs_4');
// Define colors
var primaryColor = KTUtil.getCssVariableValue('--bs-primary');
var dangerColor = KTUtil.getCssVariableValue('--bs-danger');
var dangerLightColor = KTUtil.getCssVariableValue('--bs-light-danger');
// Define fonts
var fontFamily = KTUtil.getCssVariableValue('--bs-font-sans-serif');
// Chart labels
const labels = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
// Chart data
const data = {
labels: labels,
datasets: [
{
label: 'Dataset 1',
data: generateRandomData(50, 100, 12),
borderColor: primaryColor,
backgroundColor: 'transparent',
stack: 'combined'
},
{
label: 'Dataset 2',
data: generateRandomData(1, 60, 12),
backgroundColor: dangerColor,
borderColor: dangerColor,
stack: 'combined',
type: 'bar'
},
]
};
// Chart config
const config = {
type: 'line',
data: data,
options: {
plugins: {
title: {
display: false,
}
},
responsive: true,
interaction: {
intersect: false,
},
scales: {
y: {
stacked: true
}
}
},
defaults: {
font: {
family: 'inherit',
}
}
};
// Init ChartJS -- for more info, please visit: https://www.chartjs.org/docs/latest/
var myChart = new Chart(ctx, config);
}
var example5 = function () {
// Define chart element
var ctx = document.getElementById('kt_chartjs_5');
// Define colors
var infoColor = KTUtil.getCssVariableValue('--bs-info');
var infoLightColor = KTUtil.getCssVariableValue('--bs-light-info');
var warningColor = KTUtil.getCssVariableValue('--bs-warning');
var warningLightColor = KTUtil.getCssVariableValue('--bs-light-warning');
var primaryColor = KTUtil.getCssVariableValue('--bs-primary');
var primaryLightColor = KTUtil.getCssVariableValue('--bs-light-primary');
// Define fonts
var fontFamily = KTUtil.getCssVariableValue('--bs-font-sans-serif');
// Chart labels
const labels = ['January', 'February', 'March', 'April', 'May', 'June'];
// Chart data
const data = {
labels: labels,
datasets: [
{
label: 'Dataset 1',
data: generateRandomData(20, 80, 6),
borderColor: infoColor,
backgroundColor: infoLightColor,
},
{
label: 'Dataset 2',
data: generateRandomData(10, 60, 6),
backgroundColor: warningLightColor,
borderColor: warningColor,
},
{
label: 'Dataset 3',
data: generateRandomData(0, 80, 6),
backgroundColor: primaryLightColor,
borderColor: primaryColor,
},
]
};
// Chart config
const config = {
type: 'radar',
data: data,
options: {
plugins: {
title: {
display: false,
}
},
responsive: true,
}
};
// Init ChartJS -- for more info, please visit: https://www.chartjs.org/docs/latest/
var myChart = new Chart(ctx, config);
}
return {
// Public Functions
init: function () {
// Global font settings: https://www.chartjs.org/docs/latest/general/fonts.html
Chart.defaults.font.size = 13;
Chart.defaults.font.family = KTUtil.getCssVariableValue('--bs-font-sans-serif');
example1();
example2();
example3();
example4();
example5();
}
};
}();
// On document ready
KTUtil.onDOMContentLoaded(function () {
KTGeneralChartJS.init();
});
assets/js/custom/documentation/charts/flotcharts/axis.js
+179
View File
@@ -0,0 +1,179 @@
"use strict";
// Class definition
var KTFlotDemoAxis = function () {
// Private functions
var exampleAxis = function () {
function randValue() {
return (Math.floor(Math.random() * (1 + 40 - 20))) + 20;
}
var pageviews = [
[1, randValue()],
[2, randValue()],
[3, 2 + randValue()],
[4, 3 + randValue()],
[5, 5 + randValue()],
[6, 10 + randValue()],
[7, 15 + randValue()],
[8, 20 + randValue()],
[9, 25 + randValue()],
[10, 30 + randValue()],
[11, 35 + randValue()],
[12, 25 + randValue()],
[13, 15 + randValue()],
[14, 20 + randValue()],
[15, 45 + randValue()],
[16, 50 + randValue()],
[17, 65 + randValue()],
[18, 70 + randValue()],
[19, 85 + randValue()],
[20, 80 + randValue()],
[21, 75 + randValue()],
[22, 80 + randValue()],
[23, 75 + randValue()],
[24, 70 + randValue()],
[25, 65 + randValue()],
[26, 75 + randValue()],
[27, 80 + randValue()],
[28, 85 + randValue()],
[29, 90 + randValue()],
[30, 95 + randValue()]
];
var visitors = [
[1, randValue() - 5],
[2, randValue() - 5],
[3, randValue() - 5],
[4, 6 + randValue()],
[5, 5 + randValue()],
[6, 20 + randValue()],
[7, 25 + randValue()],
[8, 36 + randValue()],
[9, 26 + randValue()],
[10, 38 + randValue()],
[11, 39 + randValue()],
[12, 50 + randValue()],
[13, 51 + randValue()],
[14, 12 + randValue()],
[15, 13 + randValue()],
[16, 14 + randValue()],
[17, 15 + randValue()],
[18, 15 + randValue()],
[19, 16 + randValue()],
[20, 17 + randValue()],
[21, 18 + randValue()],
[22, 19 + randValue()],
[23, 20 + randValue()],
[24, 21 + randValue()],
[25, 14 + randValue()],
[26, 24 + randValue()],
[27, 25 + randValue()],
[28, 26 + randValue()],
[29, 27 + randValue()],
[30, 31 + randValue()]
];
var plot = $.plot($("#kt_docs_flot_axis"), [{
data: pageviews,
label: "Unique Visits",
lines: {
lineWidth: 1,
},
shadowSize: 0
}, {
data: visitors,
label: "Page Views",
lines: {
lineWidth: 1,
},
shadowSize: 0
}], {
series: {
lines: {
show: true,
lineWidth: 2,
fill: true,
fillColor: {
colors: [{
opacity: 0.05
}, {
opacity: 0.01
}]
}
},
points: {
show: true,
radius: 3,
lineWidth: 1
},
shadowSize: 2
},
grid: {
hoverable: true,
clickable: true,
tickColor: KTUtil.getCssVariableValue('--bs-light-dark'),
borderColor: KTUtil.getCssVariableValue('--bs-light-dark'),
borderWidth: 1
},
colors: [KTUtil.getCssVariableValue('--bs-active-primary'), KTUtil.getCssVariableValue('--bs-active-danger')],
xaxis: {
ticks: 11,
tickDecimals: 0,
tickColor: KTUtil.getCssVariableValue('--bs-active-dark'),
},
yaxis: {
ticks: 11,
tickDecimals: 0,
tickColor: KTUtil.getCssVariableValue('--bs-active-dark'),
}
});
function showTooltip(x, y, contents) {
$('<div id="tooltip">' + contents + '</div>').css({
position: 'absolute',
display: 'none',
top: y + 5,
left: x + 15,
border: '1px solid ' + KTUtil.getCssVariableValue('--bs-light-dark'),
padding: '4px',
color: + KTUtil.getCssVariableValue('--bs-active-dark'),
'border-radius': '3px',
'background-color': + KTUtil.getCssVariableValue('--bs-light-dark'),
opacity: 0.80
}).appendTo("body").fadeIn(200);
}
var previousPoint = null;
$("#chart_2").bind("plothover", function(event, pos, item) {
$("#x").text(pos.x.toFixed(2));
$("#y").text(pos.y.toFixed(2));
if (item) {
if (previousPoint != item.dataIndex) {
previousPoint = item.dataIndex;
$("#tooltip").remove();
var x = item.datapoint[0].toFixed(2),
y = item.datapoint[1].toFixed(2);
showTooltip(item.pageX, item.pageY, item.series.label + " of " + x + " = " + y);
}
} else {
$("#tooltip").remove();
previousPoint = null;
}
});
}
return {
// Public Functions
init: function () {
exampleAxis();
}
};
}();
// On document ready
KTUtil.onDOMContentLoaded(function () {
KTFlotDemoAxis.init();
});
assets/js/custom/documentation/charts/flotcharts/bar.js
+56
View File
@@ -0,0 +1,56 @@
"use strict";
// Class definition
var KTFlotDemoBar = function () {
// Private functions
var exampleBar = function () {
// horizontal bar chart:
var data1 = [
[10, 10],
[20, 20],
[30, 30],
[40, 40],
[50, 50],
[60, 60],
[70, 70],
[80, 80],
[90, 90],
[100, 100],
];
var options = {
colors: [KTUtil.getCssVariableValue('--bs-active-primary')],
series: {
bars: {
show: true
}
},
bars: {
horizontal: true,
barWidth: 6,
lineWidth: 0, // in pixels
shadowSize: 0,
align: 'left'
},
grid: {
tickColor: KTUtil.getCssVariableValue('--bs-light-dark'),
borderColor: KTUtil.getCssVariableValue('--bs-light-dark'),
borderWidth: 1
}
};
$.plot($("#kt_docs_flot_bar"), [data1], options);
}
return {
// Public Functions
init: function () {
exampleBar();
}
};
}();
// On document ready
KTUtil.onDOMContentLoaded(function () {
KTFlotDemoBar.init();
});
assets/js/custom/documentation/charts/flotcharts/basic.js
+109
View File
@@ -0,0 +1,109 @@
"use strict";
// Class definition
var KTFlotDemoBasic = function () {
// Private functions
var exampleBasic = function () {
var data = [];
var totalPoints = 250;
// random data generator for plot charts
function getRandomData() {
if (data.length > 0) data = data.slice(1);
// do a random walk
while (data.length < totalPoints) {
var prev = data.length > 0 ? data[data.length - 1] : 50;
var y = prev + Math.random() * 10 - 5;
if (y < 0) y = 0;
if (y > 100) y = 100;
data.push(y);
}
// zip the generated y values with the x values
var res = [];
for (var i = 0; i < data.length; ++i) {
res.push([i, data[i]]);
}
return res;
}
var d1 = [];
for (var i = 0; i < Math.PI * 2; i += 0.25)
d1.push([i, Math.sin(i)]);
var d2 = [];
for (var i = 0; i < Math.PI * 2; i += 0.25)
d2.push([i, Math.cos(i)]);
var d3 = [];
for (var i = 0; i < Math.PI * 2; i += 0.1)
d3.push([i, Math.tan(i)]);
$.plot($("#kt_docs_flot_basic"), [{
label: "sin(x)",
data: d1,
lines: {
lineWidth: 1,
},
shadowSize: 0
}, {
label: "cos(x)",
data: d2,
lines: {
lineWidth: 1,
},
shadowSize: 0
}, {
label: "tan(x)",
data: d3,
lines: {
lineWidth: 1,
},
shadowSize: 0
}], {
colors: [KTUtil.getCssVariableValue('--bs-active-success'), KTUtil.getCssVariableValue('--bs-active-primary'), KTUtil.getCssVariableValue('--bs-active-danger')],
series: {
lines: {
show: true,
},
points: {
show: true,
fill: true,
radius: 3,
lineWidth: 1
}
},
xaxis: {
tickColor: KTUtil.getCssVariableValue('--bs-light-dark'),
ticks: [0, [Math.PI / 2, "\u03c0/2"],
[Math.PI, "\u03c0"],
[Math.PI * 3 / 2, "3\u03c0/2"],
[Math.PI * 2, "2\u03c0"]
]
},
yaxis: {
tickColor: KTUtil.getCssVariableValue('--bs-light-dark'),
ticks: 10,
min: -2,
max: 2
},
grid: {
borderColor: KTUtil.getCssVariableValue('--bs-light-dark'),
borderWidth: 1
}
});
}
return {
// Public Functions
init: function () {
exampleBasic();
}
};
}();
// On document ready
KTUtil.onDOMContentLoaded(function () {
KTFlotDemoBasic.init();
});
assets/js/custom/documentation/charts/flotcharts/dynamic.js
+90
View File
@@ -0,0 +1,90 @@
"use strict";
// Class definition
var KTFlotDemoDynamic = function () {
// Private functions
var exampleDynamic = function () {
var data = [];
var totalPoints = 250;
// random data generator for plot charts
function getRandomData() {
if (data.length > 0) data = data.slice(1);
// do a random walk
while (data.length < totalPoints) {
var prev = data.length > 0 ? data[data.length - 1] : 50;
var y = prev + Math.random() * 10 - 5;
if (y < 0) y = 0;
if (y > 100) y = 100;
data.push(y);
}
// zip the generated y values with the x values
var res = [];
for (var i = 0; i < data.length; ++i) {
res.push([i, data[i]]);
}
return res;
}
//server load
var options = {
colors: [KTUtil.getCssVariableValue('--bs-active-danger'), KTUtil.getCssVariableValue('--bs-active-primary')],
series: {
shadowSize: 1
},
lines: {
show: true,
lineWidth: 0.5,
fill: true,
fillColor: {
colors: [{
opacity: 0.1
}, {
opacity: 1
}]
}
},
yaxis: {
min: 0,
max: 100,
tickColor: KTUtil.getCssVariableValue('--bs-light-dark'),
tickFormatter: function(v) {
return v + "%";
}
},
xaxis: {
show: false,
},
colors: [KTUtil.getCssVariableValue('--bs-active-primary')],
grid: {
tickColor: KTUtil.getCssVariableValue('--bs-light-dark'),
borderWidth: 0,
}
};
var updateInterval = 30;
var plot = $.plot($("#kt_docs_flot_dynamic"), [getRandomData()], options);
function update() {
plot.setData([getRandomData()]);
plot.draw();
setTimeout(update, updateInterval);
}
update();
}
return {
// Public Functions
init: function () {
exampleDynamic();
}
};
}();
// On document ready
KTUtil.onDOMContentLoaded(function () {
KTFlotDemoDynamic.init();
});
assets/js/custom/documentation/charts/flotcharts/pie.js
+34
View File
@@ -0,0 +1,34 @@
"use strict";
// Class definition
var KTFlotDemoPie = function () {
// Private functions
var examplePie = function () {
var data = [
{ label: "CSS", data: 10, color: KTUtil.getCssVariableValue('--bs-active-primary') },
{ label: "HTML5", data: 40, color: KTUtil.getCssVariableValue('--bs-active-success') },
{ label: "PHP", data: 30, color: KTUtil.getCssVariableValue('--bs-active-danger') },
{ label: "Angular", data: 20, color: KTUtil.getCssVariableValue('--bs-active-warning') }
];
$.plot($("#kt_docs_flot_pie"), data, {
series: {
pie: {
show: true
}
}
});
}
return {
// Public Functions
init: function () {
examplePie();
}
};
}();
// On document ready
KTUtil.onDOMContentLoaded(function () {
KTFlotDemoPie.init();
});
assets/js/custom/documentation/charts/flotcharts/stack.js
+103
View File
@@ -0,0 +1,103 @@
"use strict";
// Class definition
var KTFlotDemoStack = function () {
// Private functions
var exampleStack = function () {
var d1 = [];
for (var i = 0; i <= 10; i += 1)
d1.push([i, parseInt(Math.random() * 30)]);
var d2 = [];
for (var i = 0; i <= 10; i += 1)
d2.push([i, parseInt(Math.random() * 30)]);
var d3 = [];
for (var i = 0; i <= 10; i += 1)
d3.push([i, parseInt(Math.random() * 30)]);
var stack = 0,
bars = true,
lines = false,
steps = false;
function plotWithOptions() {
$.plot($("#kt_docs_flot_stack"),
[{
label: "sales",
data: d1,
lines: {
lineWidth: 1,
},
shadowSize: 0
}, {
label: "tax",
data: d2,
lines: {
lineWidth: 1,
},
shadowSize: 0
}, {
label: "profit",
data: d3,
lines: {
lineWidth: 1,
},
shadowSize: 0
}], {
colors: [KTUtil.getCssVariableValue('--bs-active-danger'), KTUtil.getCssVariableValue('--bs-active-primary')],
series: {
stack: stack,
lines: {
show: lines,
fill: true,
steps: steps,
lineWidth: 0, // in pixels
},
bars: {
show: bars,
barWidth: 0.5,
lineWidth: 0, // in pixels
shadowSize: 0,
align: 'center'
}
},
grid: {
tickColor: KTUtil.getCssVariableValue('--bs-light-dark'),
borderColor: KTUtil.getCssVariableValue('--bs-light-dark'),
borderWidth: 1
}
}
);
}
$(".stackControls input").click(function(e) {
e.preventDefault();
stack = $(this).val() == "With stacking" ? true : null;
plotWithOptions();
});
$(".graphControls input").click(function(e) {
e.preventDefault();
bars = $(this).val().indexOf("Bars") != -1;
lines = $(this).val().indexOf("Lines") != -1;
steps = $(this).val().indexOf("steps") != -1;
plotWithOptions();
});
plotWithOptions();
}
return {
// Public Functions
init: function () {
exampleStack();
}
};
}();
// On document ready
KTUtil.onDOMContentLoaded(function () {
KTFlotDemoStack.init();
});
assets/js/custom/documentation/charts/flotcharts/tracking.js
+105
View File
@@ -0,0 +1,105 @@
"use strict";
// Class definition
var KTFlotDemoTracking = function () {
// Private functions
var exampleTracking = function () {
var sin = [],
cos = [];
for (var i = 0; i < 14; i += 0.1) {
sin.push([i, Math.sin(i)]);
cos.push([i, Math.cos(i)]);
}
var plot = $.plot($("#kt_docs_flot_tracking"), [{
data: sin,
label: "sin(x) = -0.00",
lines: {
lineWidth: 1,
},
shadowSize: 0
}, {
data: cos,
label: "cos(x) = -0.00",
lines: {
lineWidth: 1,
},
shadowSize: 0
}], {
colors: [KTUtil.getCssVariableValue('--bs-active-primary'), KTUtil.getCssVariableValue('--bs-active-warning')],
series: {
lines: {
show: true
}
},
crosshair: {
mode: "x"
},
grid: {
hoverable: true,
autoHighlight: false,
tickColor: KTUtil.getCssVariableValue('--bs-light-dark'),
borderColor: KTUtil.getCssVariableValue('--bs-light-dark'),
borderWidth: 1
},
yaxis: {
min: -1.2,
max: 1.2
}
});
var legends = $("#kt_docs_flot_tracking .legendLabel");
legends.each(function() {
// fix the widths so they don't jump around
$(this).css('width', $(this).width());
});
var updateLegendTimeout = null;
var latestPosition = null;
function updateLegend() {
updateLegendTimeout = null;
var pos = latestPosition;
var axes = plot.getAxes();
if (pos.x < axes.xaxis.min || pos.x > axes.xaxis.max || pos.y < axes.yaxis.min || pos.y > axes.yaxis.max) return;
var i, j, dataset = plot.getData();
for (i = 0; i < dataset.length; ++i) {
var series = dataset[i];
// find the nearest points, x-wise
for (j = 0; j < series.data.length; ++j)
if (series.data[j][0] > pos.x) break;
// now interpolate
var y, p1 = series.data[j - 1],
p2 = series.data[j];
if (p1 == null) y = p2[1];
else if (p2 == null) y = p1[1];
else y = p1[1] + (p2[1] - p1[1]) * (pos.x - p1[0]) / (p2[0] - p1[0]);
legends.eq(i).text(series.label.replace(/=.*/, "= " + y.toFixed(2)));
}
}
$("#kt_docs_flot_tracking").bind("plothover", function(event, pos, item) {
latestPosition = pos;
if (!updateLegendTimeout) updateLegendTimeout = setTimeout(updateLegend, 50);
});
}
return {
// Public Functions
init: function () {
exampleTracking();
}
};
}();
// On document ready
KTUtil.onDOMContentLoaded(function () {
KTFlotDemoTracking.init();
});
assets/js/custom/documentation/charts/google-charts/column.js
+95
View File
@@ -0,0 +1,95 @@
"use strict";
// Class definition
var KTGoogleChartColumnDemo = function () {
// Private functions
var exampleColumn = function () {
// GOOGLE CHARTS INIT
google.load('visualization', '1', {
packages: ['corechart', 'bar', 'line']
});
google.setOnLoadCallback(function () {
// COLUMN CHART
var data = new google.visualization.DataTable();
data.addColumn('timeofday', 'Time of Day');
data.addColumn('number', 'Motivation Level');
data.addColumn('number', 'Energy Level');
data.addRows([
[{
v: [8, 0, 0],
f: '8 am'
}, 1, .25],
[{
v: [9, 0, 0],
f: '9 am'
}, 2, .5],
[{
v: [10, 0, 0],
f: '10 am'
}, 3, 1],
[{
v: [11, 0, 0],
f: '11 am'
}, 4, 2.25],
[{
v: [12, 0, 0],
f: '12 pm'
}, 5, 2.25],
[{
v: [13, 0, 0],
f: '1 pm'
}, 6, 3],
[{
v: [14, 0, 0],
f: '2 pm'
}, 7, 4],
[{
v: [15, 0, 0],
f: '3 pm'
}, 8, 5.25],
[{
v: [16, 0, 0],
f: '4 pm'
}, 9, 7.5],
[{
v: [17, 0, 0],
f: '5 pm'
}, 10, 10],
]);
var options = {
title: 'Motivation and Energy Level Throughout the Day',
focusTarget: 'category',
hAxis: {
title: 'Time of Day',
format: 'h:mm a',
viewWindow: {
min: [7, 30, 0],
max: [17, 30, 0]
},
},
vAxis: {
title: 'Rating (scale of 1-10)'
},
colors: ['#6e4ff5', '#fe3995']
};
var chart = new google.visualization.ColumnChart(document.getElementById('kt_docs_google_chart_column'));
chart.draw(data, options);
});
}
return {
// Public Functions
init: function () {
exampleColumn();
}
};
}();
// On document ready
KTUtil.onDOMContentLoaded(function () {
KTGoogleChartColumnDemo.init();
});
assets/js/custom/documentation/charts/google-charts/line.js
+61
View File
@@ -0,0 +1,61 @@
"use strict";
// Class definition
var KTGoogleChartLineDemo = function () {
// Private functions
var exampleLine = function () {
// GOOGLE CHARTS INIT
google.load('visualization', '1', {
packages: ['corechart', 'bar', 'line']
});
google.setOnLoadCallback(function () {
// LINE CHART
var data = new google.visualization.DataTable();
data.addColumn('number', 'Day');
data.addColumn('number', 'Guardians of the Galaxy');
data.addColumn('number', 'The Avengers');
data.addColumn('number', 'Transformers: Age of Extinction');
data.addRows([
[1, 37.8, 80.8, 41.8],
[2, 30.9, 69.5, 32.4],
[3, 25.4, 57, 25.7],
[4, 11.7, 18.8, 10.5],
[5, 11.9, 17.6, 10.4],
[6, 8.8, 13.6, 7.7],
[7, 7.6, 12.3, 9.6],
[8, 12.3, 29.2, 10.6],
[9, 16.9, 42.9, 14.8],
[10, 12.8, 30.9, 11.6],
[11, 5.3, 7.9, 4.7],
[12, 6.6, 8.4, 5.2],
[13, 4.8, 6.3, 3.6],
[14, 4.2, 6.2, 3.4]
]);
var options = {
chart: {
title: 'Box Office Earnings in First Two Weeks of Opening',
subtitle: 'in millions of dollars (USD)'
},
colors: ['#6e4ff5', '#f6aa33', '#fe3995']
};
var chart = new google.charts.Line(document.getElementById('kt_docs_google_chart_line'));
chart.draw(data, options);
});
}
return {
// Public Functions
init: function () {
exampleLine();
}
};
}();
// On document ready
KTUtil.onDOMContentLoaded(function () {
KTGoogleChartLineDemo.init();
});
assets/js/custom/documentation/charts/google-charts/pie.js
+52
View File
@@ -0,0 +1,52 @@
"use strict";
// Class definition
var KTGoogleChartPieDemo = function () {
// Private functions
var examplePie = function () {
// GOOGLE CHARTS INIT
google.load('visualization', '1', {
packages: ['corechart', 'bar', 'line']
});
google.setOnLoadCallback(function () {
var data = google.visualization.arrayToDataTable([
['Task', 'Hours per Day'],
['Work', 11],
['Eat', 2],
['Commute', 2],
['Watch TV', 2],
['Sleep', 7]
]);
var options = {
title: 'My Daily Activities',
colors: ['#fe3995', '#f6aa33', '#6e4ff5', '#2abe81', '#c7d2e7', '#593ae1']
};
var chart = new google.visualization.PieChart(document.getElementById('kt_docs_google_chart_pie'));
chart.draw(data, options);
// Example of a doughnut chart
// var options = {
// pieHole: 0.4,
// colors: ['#fe3995', '#f6aa33', '#6e4ff5', '#2abe81', '#c7d2e7', '#593ae1']
// };
// var chart = new google.visualization.PieChart(document.getElementById('kt_docs_google_chart_pie'));
// chart.draw(data, options);
});
}
return {
// Public Functions
init: function () {
examplePie();
}
};
}();
// On document ready
KTUtil.onDOMContentLoaded(function () {
KTGoogleChartPieDemo.init();
});
assets/js/custom/documentation/documentation.js
+55
View File
@@ -0,0 +1,55 @@
"use strict";
var KTLayoutDocumentation = function() {
var _init = function(element) {
var elements = element;
if ( typeof elements === 'undefined' ) {
elements = document.querySelectorAll('.highlight');
}
if ( elements && elements.length > 0 ) {
for ( var i = 0; i < elements.length; ++i ) {
var highlight = elements[i];
var copy = highlight.querySelector('.highlight-copy');
if ( copy ) {
var clipboard = new ClipboardJS(copy, {
target: function(trigger) {
var highlight = trigger.closest('.highlight');
var el = highlight.querySelector('.tab-pane.active');
if ( el == null ) {
el = highlight.querySelector('.highlight-code');
}
return el;
}
});
clipboard.on('success', function(e) {
var caption = e.trigger.innerHTML;
e.trigger.innerHTML = 'copied';
e.clearSelection();
setTimeout(function() {
e.trigger.innerHTML = caption;
}, 2000);
});
}
}
}
}
return {
init: function(element) {
_init(element);
}
};
}();
// On document ready
KTUtil.onDOMContentLoaded(function() {
KTLayoutDocumentation.init();
});
assets/js/custom/documentation/editors/ckeditor/balloon-block.js
+28
View File
@@ -0,0 +1,28 @@
"use strict";
// Class definition
var KTFormsCKEditorBalloonBlock = function () {
// Private functions
var exampleBalloonBlock = function () {
BalloonEditor
.create(document.querySelector('#kt_docs_ckeditor_balloon_block'))
.then(editor => {
console.log(editor);
})
.catch(error => {
console.error(error);
});
}
return {
// Public Functions
init: function () {
exampleBalloonBlock();
}
};
}();
// On document ready
KTUtil.onDOMContentLoaded(function () {
KTFormsCKEditorBalloonBlock.init();
});
assets/js/custom/documentation/editors/ckeditor/balloon.js
+28
View File
@@ -0,0 +1,28 @@
"use strict";
// Class definition
var KTFormsCKEditorBalloon = function () {
// Private functions
var exampleBalloon = function () {
BalloonEditor
.create(document.querySelector('#kt_docs_ckeditor_balloon'))
.then(editor => {
console.log(editor);
})
.catch(error => {
console.error(error);
});
}
return {
// Public Functions
init: function () {
exampleBalloon();
}
};
}();
// On document ready
KTUtil.onDOMContentLoaded(function () {
KTFormsCKEditorBalloon.init();
});
assets/js/custom/documentation/editors/ckeditor/classic.js
+28
View File
@@ -0,0 +1,28 @@
"use strict";
// Class definition
var KTFormsCKEditorClassic = function () {
// Private functions
var exampleClassic = function () {
ClassicEditor
.create(document.querySelector('#kt_docs_ckeditor_classic'))
.then(editor => {
console.log(editor);
})
.catch(error => {
console.error(error);
});
}
return {
// Public Functions
init: function () {
exampleClassic();
}
};
}();
// On document ready
KTUtil.onDOMContentLoaded(function () {
KTFormsCKEditorClassic.init();
});
assets/js/custom/documentation/editors/ckeditor/document.js
+30
View File
@@ -0,0 +1,30 @@
"use strict";
// Class definition
var KTFormsCKEditorDocument = function () {
// Private functions
var exampleDocument = function () {
DecoupledEditor
.create(document.querySelector('#kt_docs_ckeditor_document'))
.then(editor => {
const toolbarContainer = document.querySelector('#kt_docs_ckeditor_document_toolbar');
toolbarContainer.appendChild(editor.ui.view.toolbar.element);
})
.catch(error => {
console.error(error);
});
}
return {
// Public Functions
init: function () {
exampleDocument();
}
};
}();
// On document ready
KTUtil.onDOMContentLoaded(function () {
KTFormsCKEditorDocument.init();
});
assets/js/custom/documentation/editors/ckeditor/inline.js
+28
View File
@@ -0,0 +1,28 @@
"use strict";
// Class definition
var KTFormsCKEditorInline = function () {
// Private functions
var exampleInline = function () {
InlineEditor
.create(document.querySelector('#kt_docs_ckeditor_inline'))
.then(editor => {
console.log(editor);
})
.catch(error => {
console.error(error);
});
}
return {
// Public Functions
init: function () {
exampleInline();
}
};
}();
// On document ready
KTUtil.onDOMContentLoaded(function () {
KTFormsCKEditorInline.init();
});
assets/js/custom/documentation/editors/quill/autosave.js
+60
View File
@@ -0,0 +1,60 @@
"use strict";
// Class definition
var KTFormsQuillAutosave = function () {
// Private functions
var exampleAutosave = function () {
var Delta = Quill.import('delta');
var quill = new Quill('#kt_docs_quill_autosave', {
modules: {
toolbar: true
},
placeholder: 'Type your text here...',
theme: 'snow'
});
// Store accumulated changes
var change = new Delta();
quill.on('text-change', function (delta) {
change = change.compose(delta);
});
// Save periodically
setInterval(function () {
if (change.length() > 0) {
console.log('Saving changes', change);
/*
Send partial changes
$.post('/your-endpoint', {
partial: JSON.stringify(change)
});
Send entire document
$.post('/your-endpoint', {
doc: JSON.stringify(quill.getContents())
});
*/
change = new Delta();
}
}, 5 * 1000);
// Check for unsaved data
window.onbeforeunload = function () {
if (change.length() > 0) {
return 'There are unsaved changes. Are you sure you want to leave?';
}
}
}
return {
// Public Functions
init: function () {
exampleAutosave();
}
};
}();
// On document ready
KTUtil.onDOMContentLoaded(function () {
KTFormsQuillAutosave.init();
});
assets/js/custom/documentation/editors/quill/basic.js
+33
View File
@@ -0,0 +1,33 @@
"use strict";
// Class definition
var KTFormsQuillBasic = function() {
// Private functions
var exampleBasic = function() {
var quill = new Quill('#kt_docs_quill_basic', {
modules: {
toolbar: [
[{
header: [1, 2, false]
}],
['bold', 'italic', 'underline'],
['image', 'code-block']
]
},
placeholder: 'Type your text here...',
theme: 'snow' // or 'bubble'
});
}
return {
// Public Functions
init: function() {
exampleBasic();
}
};
}();
// On document ready
KTUtil.onDOMContentLoaded(function() {
KTFormsQuillBasic.init();
});
assets/js/custom/documentation/editors/tinymce/basic.js
+28
View File
@@ -0,0 +1,28 @@
"use strict";
// Class definition
var KTFormsTinyMCEBasic = function() {
// Private functions
var exampleBasic = function() {
var options = {selector: '#kt_docs_tinymce_basic'};
if (KTApp.isDarkMode()) {
options['skin'] = 'oxide-dark';
options['content_css'] = 'dark';
}
tinymce.init(options);
}
return {
// Public Functions
init: function() {
exampleBasic();
}
};
}();
// On document ready
KTUtil.onDOMContentLoaded(function() {
KTFormsTinyMCEBasic.init();
});
assets/js/custom/documentation/editors/tinymce/hidden.js
+28
View File
@@ -0,0 +1,28 @@
"use strict";
// Class definition
var KTFormsTinyMCEHidden = function() {
// Private functions
var exampleHidden = function() {
tinymce.init({
selector: '#kt_docs_tinymce_hidden',
menubar: false,
toolbar: ['styleselect fontselect fontsizeselect',
'undo redo | cut copy paste | bold italic | link image | alignleft aligncenter alignright alignjustify',
'bullist numlist | outdent indent | blockquote subscript superscript | advlist | autolink | lists charmap | print preview | code'],
plugins : 'advlist autolink link image lists charmap print preview code'
});
}
return {
// Public Functions
init: function() {
exampleHidden();
}
};
}();
// On document ready
KTUtil.onDOMContentLoaded(function() {
KTFormsTinyMCEHidden.init();
});
assets/js/custom/documentation/editors/tinymce/plugins.js
+25
View File
@@ -0,0 +1,25 @@
"use strict";
// Class definition
var KTFormsTinyMCEPlugins = function() {
// Private functions
var examplePlugins = function() {
tinymce.init({
selector: '#kt_docs_tinymce_plugins',
toolbar: 'advlist | autolink | link image | lists charmap | print preview',
plugins : 'advlist autolink link image lists charmap print preview'
});
}
return {
// Public Functions
init: function() {
examplePlugins();
}
};
}();
// On document ready
KTUtil.onDOMContentLoaded(function() {
KTFormsTinyMCEPlugins.init();
});
assets/js/custom/documentation/forms/bootstrap-maxlength.js
Vendored
+97
View File
@@ -0,0 +1,97 @@
"use strict";
// Class definition
var KTFormsMaxlengthDemos = function () {
// Private functions
var exampleBasic = function () {
// minimum setup
$('#kt_docs_maxlength_basic').maxlength({
warningClass: "badge badge-primary",
limitReachedClass: "badge badge-success"
});
}
var exampleThreshold = function () {
// Threshold setup
$('#kt_docs_maxlength_threshold').maxlength({
threshold: 20,
warningClass: "badge badge-primary",
limitReachedClass: "badge badge-success"
});
}
var exampleAlwaysShow = function () {
// Always show setup
$('#kt_docs_maxlength_always_show').maxlength({
alwaysShow: true,
threshold: 20,
warningClass: "badge badge-danger",
limitReachedClass: "badge badge-info"
});
}
var exampleCustomText = function () {
// Always show setup
$('#kt_docs_maxlength_custom_text').maxlength({
threshold: 20,
warningClass: "badge badge-danger",
limitReachedClass: "badge badge-success",
separator: ' of ',
preText: 'You have ',
postText: ' chars remaining.',
validate: true
});
}
var exampleTextarea = function () {
// Textarea setup
$('#kt_docs_maxlength_textarea').maxlength({
warningClass: "badge badge-primary",
limitReachedClass: "badge badge-success"
});
}
var examplePosition = function () {
// Position setup
$('#kt_docs_maxlength_position_top_left').maxlength({
placement: 'top-left',
warningClass: "badge badge-danger",
limitReachedClass: "badge badge-primary"
});
$('#kt_docs_maxlength_position_top_right').maxlength({
placement: 'top-right',
warningClass: "badge badge-success",
limitReachedClass: "badge badge-danger"
});
$('#kt_docs_maxlength_position_bottom_left').maxlength({
placement: 'bottom-left',
warningClass: "badge badge-info",
limitReachedClass: "badge badge-warning"
});
$('#kt_docs_maxlength_position_bottom_right').maxlength({
placement: 'bottom-right',
warningClass: "badge badge-primary",
limitReachedClass: "badge badge-success"
});
}
return {
// Public Functions
init: function () {
exampleBasic();
exampleThreshold();
exampleAlwaysShow();
exampleCustomText();
exampleTextarea();
examplePosition();
}
};
}();
// On document ready
KTUtil.onDOMContentLoaded(function () {
KTFormsMaxlengthDemos.init();
});
assets/js/custom/documentation/forms/clipboard.js
+172
View File
@@ -0,0 +1,172 @@
"use strict";
// Class definition
var KTFormsClipboard = function () {
// Shared variables
var clipboard;
// Private functions
var example1 = function () {
// Select elements
const target = document.getElementById('kt_clipboard_1');
const button = target.nextElementSibling;
// Init clipboard -- for more info, please read the offical documentation: https://clipboardjs.com/
clipboard = new ClipboardJS(button, {
target: target,
text: function () {
return target.value;
}
});
// Success action handler
clipboard.on('success', function (e) {
const currentLabel = button.innerHTML;
// Exit label update when already in progress
if (button.innerHTML === 'Copied!') {
return;
}
// Update button label
button.innerHTML = "Copied!";
// Revert button label after 3 seconds
setTimeout(function () {
button.innerHTML = currentLabel;
}, 3000)
});
}
var example2 = function () {
// Select elements
const target = document.getElementById('kt_clipboard_2');
const button = target.nextElementSibling;
// Init clipboard -- for more info, please read the offical documentation: https://clipboardjs.com/
clipboard = new ClipboardJS(button, {
target: target,
text: function () {
return target.innerText;
}
});
// Success action handler
clipboard.on('success', function (e) {
const currentLabel = button.innerHTML;
// Exit label update when already in progress
if (button.innerHTML === 'Copied!') {
return;
}
// Update button label
button.innerHTML = "Copied!";
// Revert button label after 3 seconds
setTimeout(function () {
button.innerHTML = currentLabel;
}, 3000)
});
}
var example3 = function () {
// Select element
const target = document.getElementById('kt_clipboard_3');
// Init clipboard -- for more info, please read the offical documentation: https://clipboardjs.com/
clipboard = new ClipboardJS(target);
// Success action handler
clipboard.on('success', function (e) {
const currentLabel = target.innerHTML;
// Exit label update when already in progress
if (target.innerHTML === 'Copied!') {
return;
}
// Update button label
target.innerHTML = "Copied!";
// Revert button label after 3 seconds
setTimeout(function () {
target.innerHTML = currentLabel;
}, 3000)
});
}
var example4 = function () {
// Select elements
const target = document.getElementById('kt_clipboard_4');
const button = target.nextElementSibling;
// Init clipboard -- for more info, please read the offical documentation: https://clipboardjs.com/
clipboard = new ClipboardJS(button, {
target: target,
text: function () {
return target.innerHTML;
}
});
// Success action handler
clipboard.on('success', function (e) {
var checkIcon = button.querySelector('.bi.bi-check');
var svgIcon = button.querySelector('.svg-icon');
// Exit check icon when already showing
if (checkIcon) {
return;
}
// Create check icon
checkIcon = document.createElement('i');
checkIcon.classList.add('bi');
checkIcon.classList.add('bi-check');
checkIcon.classList.add('fs-2x');
// Append check icon
button.appendChild(checkIcon);
// Highlight target
const classes = ['text-success', 'fw-boldest'];
target.classList.add(...classes);
// Highlight button
button.classList.add('btn-success');
// Hide copy icon
svgIcon.classList.add('d-none');
// Revert button label after 3 seconds
setTimeout(function () {
// Remove check icon
svgIcon.classList.remove('d-none');
// Revert icon
button.removeChild(checkIcon);
// Remove target highlight
target.classList.remove(...classes);
// Remove button highlight
button.classList.remove('btn-success');
}, 3000)
});
}
return {
// Public Functions
init: function () {
example1();
example2();
example3();
example4();
}
};
}();
// On document ready
KTUtil.onDOMContentLoaded(function () {
KTFormsClipboard.init();
});
assets/js/custom/documentation/forms/daterangepicker.js
+77
View File
@@ -0,0 +1,77 @@
"use strict";
// Class definition
var KTFormsDaterangepickerDemos = function() {
// Private functions
var example1 = function(element) {
$("#kt_daterangepicker_1").daterangepicker();
}
var example2 = function(element) {
$("#kt_daterangepicker_2").daterangepicker({
timePicker: true,
startDate: moment().startOf("hour"),
endDate: moment().startOf("hour").add(32, "hour"),
locale: {
format: "M/DD hh:mm A"
}
});
}
var example3 = function(element) {
$("#kt_daterangepicker_3").daterangepicker({
singleDatePicker: true,
showDropdowns: true,
minYear: 1901,
maxYear: parseInt(moment().format("YYYY"),10)
}, function(start, end, label) {
var years = moment().diff(start, "years");
alert("You are " + years + " years old!");
}
);
}
var example4 = function(element) {
var start = moment().subtract(29, "days");
var end = moment();
function cb(start, end) {
$("#kt_daterangepicker_4").html(start.format("MMMM D, YYYY") + " - " + end.format("MMMM D, YYYY"));
}
$("#kt_daterangepicker_4").daterangepicker({
startDate: start,
endDate: end,
ranges: {
"Today": [moment(), moment()],
"Yesterday": [moment().subtract(1, "days"), moment().subtract(1, "days")],
"Last 7 Days": [moment().subtract(6, "days"), moment()],
"Last 30 Days": [moment().subtract(29, "days"), moment()],
"This Month": [moment().startOf("month"), moment().endOf("month")],
"Last Month": [moment().subtract(1, "month").startOf("month"), moment().subtract(1, "month").endOf("month")]
}
}, cb);
cb(start, end);
}
var example5 = function(element) {
$("#kt_daterangepicker_5").daterangepicker();
}
return {
// Public Functions
init: function(element) {
example1();
example2();
example3();
example4();
example5();
}
};
}();
// On document ready
KTUtil.onDOMContentLoaded(function() {
KTFormsDaterangepickerDemos.init();
});
assets/js/custom/documentation/forms/dialer.js
+31
View File
@@ -0,0 +1,31 @@
"use strict";
// Class definition
var KTFormsDialerDemos = function() {
// Private functions
var example1 = function(element) {
// Dialer container element
var dialerElement = document.querySelector("#kt_dialer_example_1");
// Create dialer object and initialize a new instance
var dialerObject = new KTDialer(dialerElement, {
min: 1000,
max: 50000,
step: 1000,
prefix: "$",
decimals: 2
});
}
return {
// Public Functions
init: function(element) {
example1();
}
};
}();
// On document ready
KTUtil.onDOMContentLoaded(function() {
KTFormsDialerDemos.init();
});
assets/js/custom/documentation/forms/dropzonejs.js
+187
View File
@@ -0,0 +1,187 @@
"use strict";
// Class definition
var KTFormsDropzoneJSDemos = function () {
// Private functions
var exampleBasic = function () {
// For more info about Dropzone plugin visit: https://www.dropzonejs.com/#usage
var myDropzone = new Dropzone("#kt_dropzonejs_example_1", {
url: "https://keenthemes.com/scripts/void.php", // Set the url for your upload script location
paramName: "file", // The name that will be used to transfer the file
maxFiles: 10,
maxFilesize: 10, // MB
addRemoveLinks: true,
accept: function (file, done) {
if (file.name == "wow.jpg") {
done("Naha, you don't.");
} else {
done();
}
}
});
}
var exampleQueue = function () {
// set the dropzone container id
const id = "#kt_dropzonejs_example_2";
const dropzone = document.querySelector(id);
// set the preview element template
var previewNode = dropzone.querySelector(".dropzone-item");
previewNode.id = "";
var previewTemplate = previewNode.parentNode.innerHTML;
previewNode.parentNode.removeChild(previewNode);
var myDropzone = new Dropzone(id, { // Make the whole body a dropzone
url: "https://preview.keenthemes.com/api/dropzone/void.php", // Set the url for your upload script location
parallelUploads: 20,
previewTemplate: previewTemplate,
maxFilesize: 1, // Max filesize in MB
autoQueue: false, // Make sure the files aren't queued until manually added
previewsContainer: id + " .dropzone-items", // Define the container to display the previews
clickable: id + " .dropzone-select" // Define the element that should be used as click trigger to select files.
});
myDropzone.on("addedfile", function (file) {
// Hookup the start button
file.previewElement.querySelector(id + " .dropzone-start").onclick = function () { myDropzone.enqueueFile(file); };
const dropzoneItems = dropzone.querySelectorAll('.dropzone-item');
dropzoneItems.forEach(dropzoneItem => {
dropzoneItem.style.display = '';
});
dropzone.querySelector('.dropzone-upload').style.display = "inline-block";
dropzone.querySelector('.dropzone-remove-all').style.display = "inline-block";
});
// Update the total progress bar
myDropzone.on("totaluploadprogress", function (progress) {
const progressBars = dropzone.querySelectorAll('.progress-bar');
progressBars.forEach(progressBar => {
progressBar.style.width = progress + "%";
});
});
myDropzone.on("sending", function (file) {
// Show the total progress bar when upload starts
const progressBars = dropzone.querySelectorAll('.progress-bar');
progressBars.forEach(progressBar => {
progressBar.style.opacity = "1";
});
// And disable the start button
file.previewElement.querySelector(id + " .dropzone-start").setAttribute("disabled", "disabled");
});
// Hide the total progress bar when nothing's uploading anymore
myDropzone.on("complete", function (progress) {
const progressBars = dropzone.querySelectorAll('.dz-complete');
setTimeout(function () {
progressBars.forEach(progressBar => {
progressBar.querySelector('.progress-bar').style.opacity = "0";
progressBar.querySelector('.progress').style.opacity = "0";
progressBar.querySelector('.dropzone-start').style.opacity = "0";
});
}, 300);
});
// Setup the buttons for all transfers
dropzone.querySelector(".dropzone-upload").addEventListener('click', function () {
myDropzone.enqueueFiles(myDropzone.getFilesWithStatus(Dropzone.ADDED));
});
// Setup the button for remove all files
dropzone.querySelector(".dropzone-remove-all").addEventListener('click', function () {
dropzone.querySelector('.dropzone-upload').style.display = "none";
dropzone.querySelector('.dropzone-remove-all').style.display = "none";
myDropzone.removeAllFiles(true);
});
// On all files completed upload
myDropzone.on("queuecomplete", function (progress) {
const uploadIcons = dropzone.querySelectorAll('.dropzone-upload');
uploadIcons.forEach(uploadIcon => {
uploadIcon.style.display = "none";
});
});
// On all files removed
myDropzone.on("removedfile", function (file) {
if (myDropzone.files.length < 1) {
dropzone.querySelector('.dropzone-upload').style.display = "none";
dropzone.querySelector('.dropzone-remove-all').style.display = "none";
}
});
}
var exampleQueueAutoUpload = function () {
// set the dropzone container id
const id = "#kt_dropzonejs_example_3";
const dropzone = document.querySelector(id);
// set the preview element template
var previewNode = dropzone.querySelector(".dropzone-item");
previewNode.id = "";
var previewTemplate = previewNode.parentNode.innerHTML;
previewNode.parentNode.removeChild(previewNode);
var myDropzone = new Dropzone(id, { // Make the whole body a dropzone
url: "https://preview.keenthemes.com/api/dropzone/void.php", // Set the url for your upload script location
parallelUploads: 20,
maxFilesize: 1, // Max filesize in MB
previewTemplate: previewTemplate,
previewsContainer: id + " .dropzone-items", // Define the container to display the previews
clickable: id + " .dropzone-select" // Define the element that should be used as click trigger to select files.
});
myDropzone.on("addedfile", function (file) {
// Hookup the start button
const dropzoneItems = dropzone.querySelectorAll('.dropzone-item');
dropzoneItems.forEach(dropzoneItem => {
dropzoneItem.style.display = '';
});
});
// Update the total progress bar
myDropzone.on("totaluploadprogress", function (progress) {
const progressBars = dropzone.querySelectorAll('.progress-bar');
progressBars.forEach(progressBar => {
progressBar.style.width = progress + "%";
});
});
myDropzone.on("sending", function (file) {
// Show the total progress bar when upload starts
const progressBars = dropzone.querySelectorAll('.progress-bar');
progressBars.forEach(progressBar => {
progressBar.style.opacity = "1";
});
});
// Hide the total progress bar when nothing"s uploading anymore
myDropzone.on("complete", function (progress) {
const progressBars = dropzone.querySelectorAll('.dz-complete');
setTimeout(function () {
progressBars.forEach(progressBar => {
progressBar.querySelector('.progress-bar').style.opacity = "0";
progressBar.querySelector('.progress').style.opacity = "0";
});
}, 300);
});
}
return {
// Public Functions
init: function (element) {
exampleBasic();
exampleQueue();
exampleQueueAutoUpload();
}
};
}();
// On document ready
KTUtil.onDOMContentLoaded(function () {
KTFormsDropzoneJSDemos.init();
});
assets/js/custom/documentation/forms/flatpickr.js
+103
View File
@@ -0,0 +1,103 @@
"use strict";
// Class definition
var KTFormsFlatpickrDemos = function() {
// Private functions
var example1 = function(element) {
$("#kt_datepicker_1").flatpickr();
$("#kt_datepicker_2").flatpickr();
}
var example2 = function(element) {
$("#kt_datepicker_3").flatpickr({
enableTime: true,
dateFormat: "Y-m-d H:i",
});
}
var example3 = function(element) {
$("#kt_datepicker_4").flatpickr({
onReady: function () {
this.jumpToDate("2025-01")
},
disable: ["2025-01-10", "22025-01-11", "2025-01-12", "2025-01-13", "2025-01-14", "2025-01-15", "2025-01-16", "2025-01-17"],
dateFormat: "Y-m-d",
});
$("#kt_datepicker_5").flatpickr({
onReady: function () {
this.jumpToDate("2025-01")
},
dateFormat: "Y-m-d",
disable: [
{
from: "2025-01-05",
to: "2025-01-25"
},
{
from: "2025-02-03",
to: "2025-02-15"
}
]
});
}
var example4 = function(element) {
$("#kt_datepicker_6").flatpickr({
onReady: function () {
this.jumpToDate("2025-01")
},
mode: "multiple",
dateFormat: "Y-m-d",
defaultDate: ["2025-01-05", "2025-01-10"]
});
}
var example5 = function(element) {
$("#kt_datepicker_7").flatpickr({
altInput: true,
altFormat: "F j, Y",
dateFormat: "Y-m-d",
mode: "range"
});
}
var example6 = function(element) {
$("#kt_datepicker_8").flatpickr({
enableTime: true,
noCalendar: true,
dateFormat: "H:i",
});
}
var example7 = function(element) {
$("#kt_datepicker_9").flatpickr({
weekNumbers: true
});
}
var example8 = function(element) {
$("#kt_datepicker_10").flatpickr();
}
return {
// Public Functions
init: function(element) {
example1();
example2();
example3();
example4();
example5();
example6();
example7();
example8();
}
};
}();
// On document ready
KTUtil.onDOMContentLoaded(function() {
KTFormsFlatpickrDemos.init();
});
assets/js/custom/documentation/forms/formrepeater/advanced.js
+55
View File
@@ -0,0 +1,55 @@
"use strict";
// Class definition
var KTFormRepeaterAdvanced = function () {
// Private functions
var example1 = function () {
$('#kt_docs_repeater_advanced').repeater({
initEmpty: false,
defaultValues: {
'text-input': 'foo'
},
show: function () {
$(this).slideDown();
// Re-init select2
$(this).find('[data-kt-repeater="select2"]').select2();
// Re-init flatpickr
$(this).find('[data-kt-repeater="datepicker"]').flatpickr();
// Re-init tagify
new Tagify(this.querySelector('[data-kt-repeater="tagify"]'));
},
hide: function (deleteElement) {
$(this).slideUp(deleteElement);
},
ready: function(){
// Init select
$('[data-kt-repeater="select2"]').select2();
// Init flatpickr
$('[data-kt-repeater="datepicker"]').flatpickr();
// Init Tagify
new Tagify(document.querySelector('[data-kt-repeater="tagify"]'));
}
});
}
return {
// Public Functions
init: function () {
example1();
}
};
}();
// On document ready
KTUtil.onDOMContentLoaded(function () {
KTFormRepeaterAdvanced.init();
});
assets/js/custom/documentation/forms/formrepeater/basic.js
+35
View File
@@ -0,0 +1,35 @@
"use strict";
// Class definition
var KTFormRepeaterBasic = function () {
// Private functions
var example1 = function () {
$('#kt_docs_repeater_basic').repeater({
initEmpty: false,
defaultValues: {
'text-input': 'foo'
},
show: function () {
$(this).slideDown();
},
hide: function (deleteElement) {
$(this).slideUp(deleteElement);
}
});
}
return {
// Public Functions
init: function () {
example1();
}
};
}();
// On document ready
KTUtil.onDOMContentLoaded(function () {
KTFormRepeaterBasic.init();
});
assets/js/custom/documentation/forms/formrepeater/nested.js
+47
View File
@@ -0,0 +1,47 @@
"use strict";
// Class definition
var KTFormRepeaterNested = function() {
// Private functions
var example1 = function() {
$('#kt_docs_repeater_nested').repeater({
// (Required if there is a nested repeater)
// Specify the configuration of the nested repeaters.
// Nested configuration follows the same format as the base configuration,
// supporting options "defaultValues", "show", "hide", etc.
// Nested repeaters additionally require a "selector" field.
repeaters: [{
// (Required)
// Specify the jQuery selector for this nested repeater
selector: '.inner-repeater',
show: function () {
$(this).slideDown();
},
hide: function (deleteElement) {
$(this).slideUp(deleteElement);
}
}],
show: function () {
$(this).slideDown();
},
hide: function (deleteElement) {
$(this).slideUp(deleteElement);
}
});
}
return {
// Public Functions
init: function() {
example1();
}
};
}();
// On document ready
KTUtil.onDOMContentLoaded(function() {
KTFormRepeaterNested.init();
});
assets/js/custom/documentation/forms/formvalidation/advanced.js
+664
View File
@@ -0,0 +1,664 @@
"use strict";
// Class definition
var KTFormValidationDemoAdvanced = function () {
// Private functions
var exampleAdvanced = function () {
// Define form element
const form = document.getElementById('kt_docs_formvalidation_advanced');
// Init daterangepicker --- for more info, please visit: https://www.daterangepicker.com/
$("#kt_daterangepicker").daterangepicker();
// Init flatpickr --- for more info, please visit: https://flatpickr.js.org/
$("#kt_flatpickr").flatpickr();
// Init tagify --- for more info, please visit: https://yaireo.github.io/tagify/
new Tagify(document.querySelector("#kt_tagify"), {
whitelist: ["Tag 1", "Tag 2", "Tag 3", "Tag 4", "Tag 5", "Tag 6", "Tag 7", "Tag 8", "Tag 9", "Tag 10", "Tag 11", "Tag 12"],
maxTags: 6,
dropdown: {
maxItems: 20, // <- mixumum allowed rendered suggestions
classname: "tagify__inline__suggestions", // <- custom classname for this dropdown, so it could be targeted
enabled: 0, // <- show suggestions on focus
closeOnSelect: false // <- do not hide the suggestions dropdown once an item has been selected
}
});
// Init form validation rules. For more info check the FormValidation plugin's official documentation:https://formvalidation.io/
var validator = FormValidation.formValidation(
form,
{
fields: {
'daterangepicker_input': {
validators: {
notEmpty: {
message: 'Date range input is required'
}
}
},
'flatpickr_input': {
validators: {
date: {
format: 'YYYY-MM-DD',
message: 'The value is not a valid date',
},
notEmpty: {
message: 'Flatpickr input is required'
}
}
},
'avatar': {
validators: {
notEmpty: {
message: 'Please select an image'
},
file: {
extension: 'jpg,jpeg,png',
type: 'image/jpeg,image/png',
message: 'The selected file is not valid'
},
}
},
'select2_input': {
validators: {
notEmpty: {
message: 'Select2 input is required'
}
}
},
'tagify_input': {
validators: {
notEmpty: {
message: 'Tagify input is required'
}
}
},
},
plugins: {
trigger: new FormValidation.plugins.Trigger(),
bootstrap: new FormValidation.plugins.Bootstrap5({
rowSelector: '.fv-row',
eleInvalidClass: '',
eleValidClass: ''
})
}
}
);
// Revalidate Select2 input. For more info, plase visit the official plugin site: https://select2.org/
$(form.querySelector('[name="select2_input"]')).on('change', function () {
// Revalidate the field when an option is chosen
validator.revalidateField('select2_input');
});
// Submit button handler
const submitButton = document.getElementById('kt_docs_formvalidation_submit');
submitButton.addEventListener('click', function (e) {
// Prevent default button action
e.preventDefault();
// Validate form before submit
if (validator) {
validator.validate().then(function (status) {
console.log('validated!');
if (status == 'Valid') {
// Show loading indication
submitButton.setAttribute('data-kt-indicator', 'on');
// Disable button to avoid multiple click
submitButton.disabled = true;
// Simulate form submission. For more info check the plugin's official documentation: https://sweetalert2.github.io/
setTimeout(function () {
// Remove loading indication
submitButton.removeAttribute('data-kt-indicator');
// Enable button
submitButton.disabled = false;
// Show popup confirmation
Swal.fire({
text: "Form has been successfully submitted!",
icon: "success",
buttonsStyling: false,
confirmButtonText: "Ok, got it!",
customClass: {
confirmButton: "btn btn-primary"
}
});
//form.submit(); // Submit form
}, 2000);
}
});
}
});
}
var exampleDateRangePicker = function () {
// Define form element
const form = document.getElementById('kt_docs_formvalidation_daterangepicker');
// Init daterangepicker --- for more info, please visit: https://www.daterangepicker.com/
$("#kt_daterangepicker").daterangepicker();
// Init form validation rules. For more info check the FormValidation plugin's official documentation:https://formvalidation.io/
var validator = FormValidation.formValidation(
form,
{
fields: {
'daterangepicker_input': {
validators: {
notEmpty: {
message: 'Date range input is required'
}
}
},
},
plugins: {
trigger: new FormValidation.plugins.Trigger(),
bootstrap: new FormValidation.plugins.Bootstrap5({
rowSelector: '.fv-row',
eleInvalidClass: '',
eleValidClass: ''
})
}
}
);
// Submit button handler
const submitButton = document.getElementById('kt_docs_formvalidation_daterangepicker_submit');
submitButton.addEventListener('click', function (e) {
// Prevent default button action
e.preventDefault();
// Validate form before submit
if (validator) {
validator.validate().then(function (status) {
console.log('validated!');
if (status == 'Valid') {
// Show loading indication
submitButton.setAttribute('data-kt-indicator', 'on');
// Disable button to avoid multiple click
submitButton.disabled = true;
// Simulate form submission. For more info check the plugin's official documentation: https://sweetalert2.github.io/
setTimeout(function () {
// Remove loading indication
submitButton.removeAttribute('data-kt-indicator');
// Enable button
submitButton.disabled = false;
// Show popup confirmation
Swal.fire({
text: "Form has been successfully submitted!",
icon: "success",
buttonsStyling: false,
confirmButtonText: "Ok, got it!",
customClass: {
confirmButton: "btn btn-primary"
}
});
//form.submit(); // Submit form
}, 2000);
}
});
}
});
}
var exampleFlatpickr = function () {
// Define form element
const form = document.getElementById('kt_docs_formvalidation_flatpickr');
// Init flatpickr --- for more info, please visit: https://flatpickr.js.org/
$("#kt_flatpickr").flatpickr();
// Init form validation rules. For more info check the FormValidation plugin's official documentation:https://formvalidation.io/
var validator = FormValidation.formValidation(
form,
{
fields: {
'flatpickr_input': {
validators: {
date: {
format: 'YYYY-MM-DD',
message: 'The value is not a valid date',
},
notEmpty: {
message: 'Flatpickr input is required'
}
}
},
},
plugins: {
trigger: new FormValidation.plugins.Trigger(),
bootstrap: new FormValidation.plugins.Bootstrap5({
rowSelector: '.fv-row',
eleInvalidClass: '',
eleValidClass: ''
})
}
}
);
// Submit button handler
const submitButton = document.getElementById('kt_docs_formvalidation_flatpickr_submit');
submitButton.addEventListener('click', function (e) {
// Prevent default button action
e.preventDefault();
// Validate form before submit
if (validator) {
validator.validate().then(function (status) {
console.log('validated!');
if (status == 'Valid') {
// Show loading indication
submitButton.setAttribute('data-kt-indicator', 'on');
// Disable button to avoid multiple click
submitButton.disabled = true;
// Simulate form submission. For more info check the plugin's official documentation: https://sweetalert2.github.io/
setTimeout(function () {
// Remove loading indication
submitButton.removeAttribute('data-kt-indicator');
// Enable button
submitButton.disabled = false;
// Show popup confirmation
Swal.fire({
text: "Form has been successfully submitted!",
icon: "success",
buttonsStyling: false,
confirmButtonText: "Ok, got it!",
customClass: {
confirmButton: "btn btn-primary"
}
});
//form.submit(); // Submit form
}, 2000);
}
});
}
});
}
var exampleImageInput = function () {
// Define form element
const form = document.getElementById('kt_docs_formvalidation_image_input');
// Init form validation rules. For more info check the FormValidation plugin's official documentation:https://formvalidation.io/
var validator = FormValidation.formValidation(
form,
{
fields: {
'avatar': {
validators: {
notEmpty: {
message: 'Please select an image'
},
file: {
extension: 'jpg,jpeg,png',
type: 'image/jpeg,image/png',
message: 'The selected file is not valid'
},
}
},
},
plugins: {
trigger: new FormValidation.plugins.Trigger(),
bootstrap: new FormValidation.plugins.Bootstrap5({
rowSelector: '.fv-row',
eleInvalidClass: '',
eleValidClass: ''
})
}
}
);
// Submit button handler
const submitButton = document.getElementById('kt_docs_formvalidation_image_input_submit');
submitButton.addEventListener('click', function (e) {
// Prevent default button action
e.preventDefault();
// Validate form before submit
if (validator) {
validator.validate().then(function (status) {
console.log('validated!');
if (status == 'Valid') {
// Show loading indication
submitButton.setAttribute('data-kt-indicator', 'on');
// Disable button to avoid multiple click
submitButton.disabled = true;
// Simulate form submission. For more info check the plugin's official documentation: https://sweetalert2.github.io/
setTimeout(function () {
// Remove loading indication
submitButton.removeAttribute('data-kt-indicator');
// Enable button
submitButton.disabled = false;
// Show popup confirmation
Swal.fire({
text: "Form has been successfully submitted!",
icon: "success",
buttonsStyling: false,
confirmButtonText: "Ok, got it!",
customClass: {
confirmButton: "btn btn-primary"
}
});
//form.submit(); // Submit form
}, 2000);
}
});
}
});
}
var examplePassword = function () {
// Define form element
const form = document.getElementById('kt_docs_formvalidation_password');
// Init form validation rules. For more info check the FormValidation plugin's official documentation:https://formvalidation.io/
var validator = FormValidation.formValidation(
form,
{
fields: {
'current_password': {
validators: {
notEmpty: {
message: 'Current password is required'
}
}
},
'new_password': {
validators: {
notEmpty: {
message: 'The password is required'
},
callback: {
message: 'Please enter valid password',
callback: function (input) {
if (input.value.length > 0) {
return validatePassword();
}
}
}
}
},
'confirm_password': {
validators: {
notEmpty: {
message: 'The password confirmation is required'
},
identical: {
compare: function () {
return form.querySelector('[name="new_password"]').value;
},
message: 'The password and its confirm are not the same'
}
}
},
},
plugins: {
trigger: new FormValidation.plugins.Trigger(),
bootstrap: new FormValidation.plugins.Bootstrap5({
rowSelector: '.fv-row',
eleInvalidClass: '',
eleValidClass: ''
})
}
}
);
// Submit button handler
const submitButton = document.getElementById('kt_docs_formvalidation_password_submit');
submitButton.addEventListener('click', function (e) {
// Prevent default button action
e.preventDefault();
// Validate form before submit
if (validator) {
validator.validate().then(function (status) {
console.log('validated!');
if (status == 'Valid') {
// Show loading indication
submitButton.setAttribute('data-kt-indicator', 'on');
// Disable button to avoid multiple click
submitButton.disabled = true;
// Simulate form submission. For more info check the plugin's official documentation: https://sweetalert2.github.io/
setTimeout(function () {
// Remove loading indication
submitButton.removeAttribute('data-kt-indicator');
// Enable button
submitButton.disabled = false;
// Show popup confirmation
Swal.fire({
text: "Form has been successfully submitted!",
icon: "success",
buttonsStyling: false,
confirmButtonText: "Ok, got it!",
customClass: {
confirmButton: "btn btn-primary"
}
});
//form.submit(); // Submit form
}, 2000);
}
});
}
});
}
var exampleSelect2 = function () {
// Define form element
const form = document.getElementById('kt_docs_formvalidation_select2');
// Init form validation rules. For more info check the FormValidation plugin's official documentation:https://formvalidation.io/
var validator = FormValidation.formValidation(
form,
{
fields: {
'select2_input': {
validators: {
notEmpty: {
message: 'Select2 input is required'
}
}
},
},
plugins: {
trigger: new FormValidation.plugins.Trigger(),
bootstrap: new FormValidation.plugins.Bootstrap5({
rowSelector: '.fv-row',
eleInvalidClass: '',
eleValidClass: ''
})
}
}
);
// Revalidate Select2 input. For more info, plase visit the official plugin site: https://select2.org/
$(form.querySelector('[name="select2_input"]')).on('change', function () {
// Revalidate the field when an option is chosen
validator.revalidateField('select2_input');
});
// Submit button handler
const submitButton = document.getElementById('kt_docs_formvalidation_select2_submit');
submitButton.addEventListener('click', function (e) {
// Prevent default button action
e.preventDefault();
// Validate form before submit
if (validator) {
validator.validate().then(function (status) {
console.log('validated!');
if (status == 'Valid') {
// Show loading indication
submitButton.setAttribute('data-kt-indicator', 'on');
// Disable button to avoid multiple click
submitButton.disabled = true;
// Simulate form submission. For more info check the plugin's official documentation: https://sweetalert2.github.io/
setTimeout(function () {
// Remove loading indication
submitButton.removeAttribute('data-kt-indicator');
// Enable button
submitButton.disabled = false;
// Show popup confirmation
Swal.fire({
text: "Form has been successfully submitted!",
icon: "success",
buttonsStyling: false,
confirmButtonText: "Ok, got it!",
customClass: {
confirmButton: "btn btn-primary"
}
});
//form.submit(); // Submit form
}, 2000);
}
});
}
});
}
var exampleTagify = function () {
// Define form element
const form = document.getElementById('kt_docs_formvalidation_tagify');
// Init tagify --- for more info, please visit: https://yaireo.github.io/tagify/
new Tagify(document.querySelector("#kt_tagify"), {
whitelist: ["Tag 1", "Tag 2", "Tag 3", "Tag 4", "Tag 5", "Tag 6", "Tag 7", "Tag 8", "Tag 9", "Tag 10", "Tag 11", "Tag 12"],
maxTags: 6,
dropdown: {
maxItems: 20, // <- mixumum allowed rendered suggestions
classname: "tagify__inline__suggestions", // <- custom classname for this dropdown, so it could be targeted
enabled: 0, // <- show suggestions on focus
closeOnSelect: false // <- do not hide the suggestions dropdown once an item has been selected
}
});
// Init form validation rules. For more info check the FormValidation plugin's official documentation:https://formvalidation.io/
var validator = FormValidation.formValidation(
form,
{
fields: {
'tagify_input': {
validators: {
notEmpty: {
message: 'Tagify input is required'
}
}
},
},
plugins: {
trigger: new FormValidation.plugins.Trigger(),
bootstrap: new FormValidation.plugins.Bootstrap5({
rowSelector: '.fv-row',
eleInvalidClass: '',
eleValidClass: ''
})
}
}
);
// Submit button handler
const submitButton = document.getElementById('kt_docs_formvalidation_tagify_submit');
submitButton.addEventListener('click', function (e) {
// Prevent default button action
e.preventDefault();
// Validate form before submit
if (validator) {
validator.validate().then(function (status) {
console.log('validated!');
if (status == 'Valid') {
// Show loading indication
submitButton.setAttribute('data-kt-indicator', 'on');
// Disable button to avoid multiple click
submitButton.disabled = true;
// Simulate form submission. For more info check the plugin's official documentation: https://sweetalert2.github.io/
setTimeout(function () {
// Remove loading indication
submitButton.removeAttribute('data-kt-indicator');
// Enable button
submitButton.disabled = false;
// Show popup confirmation
Swal.fire({
text: "Form has been successfully submitted!",
icon: "success",
buttonsStyling: false,
confirmButtonText: "Ok, got it!",
customClass: {
confirmButton: "btn btn-primary"
}
});
//form.submit(); // Submit form
}, 2000);
}
});
}
});
}
return {
// Public Functions
init: function () {
exampleDateRangePicker();
exampleFlatpickr();
exampleImageInput();
examplePassword();
exampleSelect2();
exampleTagify();
}
};
}();
// On document ready
KTUtil.onDOMContentLoaded(function () {
KTFormValidationDemoAdvanced.init();
});
assets/js/custom/documentation/forms/formvalidation/basic.js
+536
View File
@@ -0,0 +1,536 @@
"use strict";
// Class definition
var KTFormValidationDemoBasic = function () {
// Private functions
var exampleBasic = function () {
// Define form element
const form = document.getElementById('kt_docs_formvalidation_basic');
// Init form validation rules. For more info check the FormValidation plugin's official documentation:https://formvalidation.io/
var validator = FormValidation.formValidation(
form,
{
fields: {
'text_input': {
validators: {
notEmpty: {
message: 'Text input is required'
}
}
},
'email_input': {
validators: {
emailAddress: {
message: 'The value is not a valid email address'
},
notEmpty: {
message: 'Email address is required'
}
}
},
'current_password': {
validators: {
notEmpty: {
message: 'Current password is required'
}
}
},
'new_password': {
validators: {
notEmpty: {
message: 'The password is required'
},
callback: {
message: 'Please enter valid password',
callback: function (input) {
if (input.value.length > 0) {
return validatePassword();
}
}
}
}
},
'confirm_password': {
validators: {
notEmpty: {
message: 'The password confirmation is required'
},
identical: {
compare: function () {
return form.querySelector('[name="new_password"]').value;
},
message: 'The password and its confirm are not the same'
}
}
},
'textarea_input': {
validators: {
notEmpty: {
message: 'Textarea input is required'
}
}
},
'radio_input': {
validators: {
notEmpty: {
message: 'Radio input is required'
}
}
},
'checkbox_input': {
validators: {
notEmpty: {
message: 'Radio input is required'
}
}
},
},
plugins: {
trigger: new FormValidation.plugins.Trigger(),
bootstrap: new FormValidation.plugins.Bootstrap5({
rowSelector: '.fv-row',
eleInvalidClass: '',
eleValidClass: ''
})
}
}
);
// Submit button handler
const submitButton = document.getElementById('kt_docs_formvalidation_submit');
submitButton.addEventListener('click', function (e) {
// Prevent default button action
e.preventDefault();
// Validate form before submit
if (validator) {
validator.validate().then(function (status) {
console.log('validated!');
if (status == 'Valid') {
// Show loading indication
submitButton.setAttribute('data-kt-indicator', 'on');
// Disable button to avoid multiple click
submitButton.disabled = true;
// Simulate form submission. For more info check the plugin's official documentation: https://sweetalert2.github.io/
setTimeout(function () {
// Remove loading indication
submitButton.removeAttribute('data-kt-indicator');
// Enable button
submitButton.disabled = false;
// Show popup confirmation
Swal.fire({
text: "Form has been successfully submitted!",
icon: "success",
buttonsStyling: false,
confirmButtonText: "Ok, got it!",
customClass: {
confirmButton: "btn btn-primary"
}
});
//form.submit(); // Submit form
}, 2000);
}
});
}
});
}
var exampleText = function () {
// Define form element
const form = document.getElementById('kt_docs_formvalidation_text');
// Init form validation rules. For more info check the FormValidation plugin's official documentation:https://formvalidation.io/
var validator = FormValidation.formValidation(
form,
{
fields: {
'text_input': {
validators: {
notEmpty: {
message: 'Text input is required'
}
}
},
},
plugins: {
trigger: new FormValidation.plugins.Trigger(),
bootstrap: new FormValidation.plugins.Bootstrap5({
rowSelector: '.fv-row',
eleInvalidClass: '',
eleValidClass: ''
})
}
}
);
// Submit button handler
const submitButton = document.getElementById('kt_docs_formvalidation_text_submit');
submitButton.addEventListener('click', function (e) {
// Prevent default button action
e.preventDefault();
// Validate form before submit
if (validator) {
validator.validate().then(function (status) {
console.log('validated!');
if (status == 'Valid') {
// Show loading indication
submitButton.setAttribute('data-kt-indicator', 'on');
// Disable button to avoid multiple click
submitButton.disabled = true;
// Simulate form submission. For more info check the plugin's official documentation: https://sweetalert2.github.io/
setTimeout(function () {
// Remove loading indication
submitButton.removeAttribute('data-kt-indicator');
// Enable button
submitButton.disabled = false;
// Show popup confirmation
Swal.fire({
text: "Form has been successfully submitted!",
icon: "success",
buttonsStyling: false,
confirmButtonText: "Ok, got it!",
customClass: {
confirmButton: "btn btn-primary"
}
});
//form.submit(); // Submit form
}, 2000);
}
});
}
});
}
var exampleEmail = function () {
// Define form element
const form = document.getElementById('kt_docs_formvalidation_email');
// Init form validation rules. For more info check the FormValidation plugin's official documentation:https://formvalidation.io/
var validator = FormValidation.formValidation(
form,
{
fields: {
'email_input': {
validators: {
emailAddress: {
message: 'The value is not a valid email address'
},
notEmpty: {
message: 'Email address is required'
}
}
},
},
plugins: {
trigger: new FormValidation.plugins.Trigger(),
bootstrap: new FormValidation.plugins.Bootstrap5({
rowSelector: '.fv-row',
eleInvalidClass: '',
eleValidClass: ''
})
}
}
);
// Submit button handler
const submitButton = document.getElementById('kt_docs_formvalidation_email_submit');
submitButton.addEventListener('click', function (e) {
// Prevent default button action
e.preventDefault();
// Validate form before submit
if (validator) {
validator.validate().then(function (status) {
console.log('validated!');
if (status == 'Valid') {
// Show loading indication
submitButton.setAttribute('data-kt-indicator', 'on');
// Disable button to avoid multiple click
submitButton.disabled = true;
// Simulate form submission. For more info check the plugin's official documentation: https://sweetalert2.github.io/
setTimeout(function () {
// Remove loading indication
submitButton.removeAttribute('data-kt-indicator');
// Enable button
submitButton.disabled = false;
// Show popup confirmation
Swal.fire({
text: "Form has been successfully submitted!",
icon: "success",
buttonsStyling: false,
confirmButtonText: "Ok, got it!",
customClass: {
confirmButton: "btn btn-primary"
}
});
//form.submit(); // Submit form
}, 2000);
}
});
}
});
}
var exampleTextarea = function () {
// Define form element
const form = document.getElementById('kt_docs_formvalidation_textarea');
// Init form validation rules. For more info check the FormValidation plugin's official documentation:https://formvalidation.io/
var validator = FormValidation.formValidation(
form,
{
fields: {
'textarea_input': {
validators: {
notEmpty: {
message: 'Textarea input is required'
}
}
},
},
plugins: {
trigger: new FormValidation.plugins.Trigger(),
bootstrap: new FormValidation.plugins.Bootstrap5({
rowSelector: '.fv-row',
eleInvalidClass: '',
eleValidClass: ''
})
}
}
);
// Submit button handler
const submitButton = document.getElementById('kt_docs_formvalidation_textarea_submit');
submitButton.addEventListener('click', function (e) {
// Prevent default button action
e.preventDefault();
// Validate form before submit
if (validator) {
validator.validate().then(function (status) {
console.log('validated!');
if (status == 'Valid') {
// Show loading indication
submitButton.setAttribute('data-kt-indicator', 'on');
// Disable button to avoid multiple click
submitButton.disabled = true;
// Simulate form submission. For more info check the plugin's official documentation: https://sweetalert2.github.io/
setTimeout(function () {
// Remove loading indication
submitButton.removeAttribute('data-kt-indicator');
// Enable button
submitButton.disabled = false;
// Show popup confirmation
Swal.fire({
text: "Form has been successfully submitted!",
icon: "success",
buttonsStyling: false,
confirmButtonText: "Ok, got it!",
customClass: {
confirmButton: "btn btn-primary"
}
});
//form.submit(); // Submit form
}, 2000);
}
});
}
});
}
var exampleRadio = function () {
// Define form element
const form = document.getElementById('kt_docs_formvalidation_radio');
// Init form validation rules. For more info check the FormValidation plugin's official documentation:https://formvalidation.io/
var validator = FormValidation.formValidation(
form,
{
fields: {
'radio_input': {
validators: {
notEmpty: {
message: 'Radio input is required'
}
}
},
},
plugins: {
trigger: new FormValidation.plugins.Trigger(),
bootstrap: new FormValidation.plugins.Bootstrap5({
rowSelector: '.fv-row',
eleInvalidClass: '',
eleValidClass: ''
})
}
}
);
// Submit button handler
const submitButton = document.getElementById('kt_docs_formvalidation_radio_submit');
submitButton.addEventListener('click', function (e) {
// Prevent default button action
e.preventDefault();
// Validate form before submit
if (validator) {
validator.validate().then(function (status) {
console.log('validated!');
if (status == 'Valid') {
// Show loading indication
submitButton.setAttribute('data-kt-indicator', 'on');
// Disable button to avoid multiple click
submitButton.disabled = true;
// Simulate form submission. For more info check the plugin's official documentation: https://sweetalert2.github.io/
setTimeout(function () {
// Remove loading indication
submitButton.removeAttribute('data-kt-indicator');
// Enable button
submitButton.disabled = false;
// Show popup confirmation
Swal.fire({
text: "Form has been successfully submitted!",
icon: "success",
buttonsStyling: false,
confirmButtonText: "Ok, got it!",
customClass: {
confirmButton: "btn btn-primary"
}
});
//form.submit(); // Submit form
}, 2000);
}
});
}
});
}
var exampleCheckbox = function () {
// Define form element
const form = document.getElementById('kt_docs_formvalidation_checkbox');
// Init form validation rules. For more info check the FormValidation plugin's official documentation:https://formvalidation.io/
var validator = FormValidation.formValidation(
form,
{
fields: {
'checkbox_input': {
validators: {
notEmpty: {
message: 'Checkbox input is required'
}
}
},
},
plugins: {
trigger: new FormValidation.plugins.Trigger(),
bootstrap: new FormValidation.plugins.Bootstrap5({
rowSelector: '.fv-row',
eleInvalidClass: '',
eleValidClass: ''
})
}
}
);
// Submit button handler
const submitButton = document.getElementById('kt_docs_formvalidation_checkbox_submit');
submitButton.addEventListener('click', function (e) {
// Prevent default button action
e.preventDefault();
// Validate form before submit
if (validator) {
validator.validate().then(function (status) {
console.log('validated!');
if (status == 'Valid') {
// Show loading indication
submitButton.setAttribute('data-kt-indicator', 'on');
// Disable button to avoid multiple click
submitButton.disabled = true;
// Simulate form submission. For more info check the plugin's official documentation: https://sweetalert2.github.io/
setTimeout(function () {
// Remove loading indication
submitButton.removeAttribute('data-kt-indicator');
// Enable button
submitButton.disabled = false;
// Show popup confirmation
Swal.fire({
text: "Form has been successfully submitted!",
icon: "success",
buttonsStyling: false,
confirmButtonText: "Ok, got it!",
customClass: {
confirmButton: "btn btn-primary"
}
});
//form.submit(); // Submit form
}, 2000);
}
});
}
});
}
return {
// Public Functions
init: function () {
exampleText();
exampleEmail();
exampleTextarea();
exampleRadio();
exampleCheckbox();
}
};
}();
// On document ready
KTUtil.onDOMContentLoaded(function () {
KTFormValidationDemoBasic.init();
});
assets/js/custom/documentation/forms/image-input.js
+21
View File
@@ -0,0 +1,21 @@
"use strict";
// Class definition
var KTGeneralImageInputDemos = function() {
// Private functions
var _exampleBasic = function() {
}
return {
// Public Functions
init: function() {
_exampleBasic();
}
};
}();
// On document ready
KTUtil.onDOMContentLoaded(function() {
KTGeneralImageInputDemos.init();
});
assets/js/custom/documentation/forms/inputmask.js
+74
View File
@@ -0,0 +1,74 @@
"use strict";
// Class definition
var KTFormsInputmaskDemos = function() {
// Private functions
var _examples = function() {
// Date
Inputmask({
"mask" : "99/99/9999"
}).mask("#kt_inputmask_1");
// Phone
Inputmask({
"mask" : "(999) 999-9999"
}).mask("#kt_inputmask_2");
// Placeholder
Inputmask({
"mask" : "(999) 999-9999",
"placeholder": "(999) 999-9999",
}).mask("#kt_inputmask_3");
// Repeating
Inputmask({
"mask": "9",
"repeat": 10,
"greedy": false
}).mask("#kt_inputmask_4");
// Right aligned
Inputmask("decimal", {
"rightAlignNumerics": false
}).mask("#kt_inputmask_5");
// Currency
Inputmask("€ 999.999.999,99", {
"numericInput": true
}).mask("#kt_inputmask_6");
// Ip address
Inputmask({
"mask": "999.999.999.999"
}).mask("#kt_inputmask_7");
// Email address
Inputmask({
mask: "*{1,20}[.*{1,20}][.*{1,20}][.*{1,20}]@*{1,20}[.*{2,6}][.*{1,2}]",
greedy: false,
onBeforePaste: function (pastedValue, opts) {
pastedValue = pastedValue.toLowerCase();
return pastedValue.replace("mailto:", "");
},
definitions: {
"*": {
validator: '[0-9A-Za-z!#$%&"*+/=?^_`{|}~\-]',
cardinality: 1,
casing: "lower"
}
}
}).mask("#kt_inputmask_8");
}
return {
// Public Functions
init: function(element) {
_examples();
}
};
}();
// On document ready
KTUtil.onDOMContentLoaded(function() {
KTFormsInputmaskDemos.init();
});
assets/js/custom/documentation/forms/multiselectsplitter.js
+65
View File
@@ -0,0 +1,65 @@
"use strict";
// Class definition
var KTFormsMultiselectsplitterDemos = function() {
// Private functions
var example1 = function() {
$("#kt_multiselectsplitter_example_1").multiselectsplitter();
}
var example2 = function() {
$('#kt_multiselectsplitter_example_2').multiselectsplitter({
selectSize: 7,
clearOnFirstChange: true,
groupCounter: true
});
}
var example3 = function() {
$('#kt_multiselectsplitter_example_3').multiselectsplitter({
groupCounter: true,
maximumSelected: 2
});
}
var example4 = function() {
$('#kt_multiselectsplitter_example_4').multiselectsplitter({
groupCounter: true,
maximumSelected: 3,
onlySameGroup: true
});
}
var example5 = function() {
$('#kt_multiselectsplitter_example_5').multiselectsplitter({
size: 6,
groupCounter: true,
maximumSelected: 2,
maximumAlert: function(maximumSelected) {
alert("You choose " + ( maximumSelected + 1 ) + " options. Are you crazy ?");
},
createFirstSelect: function (label, $originalSelect) {
return "<option class=\"text-success\">prefix - " + label + "</option>";
},
createSecondSelect: function (label, $firstSelect) {
return "<option class=\"text-danger\"> ??? </option>";
}
});
}
return {
// Public Functions
init: function() {
example1();
example2();
example3();
example4();
example5();
}
};
}();
// On document ready
KTUtil.onDOMContentLoaded(function() {
KTFormsMultiselectsplitterDemos.init();
});
assets/js/custom/documentation/forms/nouislider.js
+121
View File
@@ -0,0 +1,121 @@
"use strict";
// Class definition
var KTFormsNouisliderDemos = function() {
// Private functions
var _exampleBasic = function() {
var slider = document.querySelector("#kt_slider_basic");
var valueMin = document.querySelector("#kt_slider_basic_min");
var valueMax = document.querySelector("#kt_slider_basic_max");
noUiSlider.create(slider, {
start: [20, 80],
connect: true,
range: {
"min": 0,
"max": 100
}
});
slider.noUiSlider.on("update", function (values, handle) {
if (handle) {
valueMax.innerHTML = values[handle];
} else {
valueMin.innerHTML = values[handle];
}
});
}
var _exampleSizes = function() {
var slider1 = document.querySelector("#kt_slider_sizes_sm");
var slider2 = document.querySelector("#kt_slider_sizes_default");
var slider3 = document.querySelector("#kt_slider_sizes_lg");
noUiSlider.create(slider1, {
start: [20, 80],
connect: true,
range: {
"min": 0,
"max": 100
}
});
noUiSlider.create(slider2, {
start: [20, 80],
connect: true,
range: {
"min": 0,
"max": 100
}
});
noUiSlider.create(slider3, {
start: [20, 80],
connect: true,
range: {
"min": 0,
"max": 100
}
});
}
var _exampleVertical = function() {
var slider = document.querySelector("#kt_slider_vertical");
noUiSlider.create(slider, {
start: [60, 160],
connect: true,
orientation: "vertical",
range: {
"min": 0,
"max": 200
}
});
}
var _exampleTooltip = function() {
var slider = document.querySelector("#kt_slider_tooltip");
noUiSlider.create(slider, {
start: [20, 80, 120],
tooltips: [false, wNumb({decimals: 1}), true],
range: {
"min": 0,
"max": 200
}
});
}
var _exampleSoftLimits = function() {
var slider = document.querySelector("#kt_slider_soft_limits");
noUiSlider.create(slider, {
start: 50,
range: {
min: 0,
max: 100
},
pips: {
mode: "values",
values: [20, 80],
density: 4
}
});
}
return {
// Public Functions
init: function(element) {
_exampleBasic();
_exampleSizes();
_exampleVertical();
_exampleTooltip();
_exampleSoftLimits();
}
};
}();
// On document ready
KTUtil.onDOMContentLoaded(function() {
KTFormsNouisliderDemos.init();
});
assets/js/custom/documentation/forms/password-meter.js
+43
View File
@@ -0,0 +1,43 @@
"use strict";
// Class definition
var KTGeneralPasswordMeterDemos = function() {
// Private functions
var _showScore = function() {
// Select show score button
const showScoreButton = document.getElementById('kt_password_meter_example_show_score');
// Get password meter instance
const passwordMeterElement = document.querySelector("#kt_password_meter_example");
const passwordMeter = KTPasswordMeter.getInstance(passwordMeterElement);
// Handle show score button click
showScoreButton.addEventListener('click', e => {
// Get password score
const score = passwordMeter.getScore();
// Show popup confirmation
Swal.fire({
text: "Current Password Score: " + score,
icon: "success",
buttonsStyling: false,
confirmButtonText: "Ok, got it!",
customClass: {
confirmButton: "btn btn-primary"
}
});
});
}
return {
// Public Functions
init: function() {
_showScore();
}
};
}();
// On document ready
KTUtil.onDOMContentLoaded(function() {
KTGeneralPasswordMeterDemos.init();
});
assets/js/custom/documentation/forms/recaptcha.js
+31
View File
@@ -0,0 +1,31 @@
"use strict";
// Class definition
var KTFormsGoogleRecaptchaDemos = function () {
// Private functions
var example = function (element) {
document.querySelector("#kt_form_submit_button").addEventListener("click", function (e) {
e.preventDefault();
grecaptcha.ready(function () {
if (grecaptcha.getResponse() === "") {
alert("Please validate the Google reCaptcha.");
} else {
alert("Successful validation! Now you can submit this form to your server side processing.");
}
});
});
}
return {
// Public Functions
init: function (element) {
example();
}
};
}();
// On document ready
KTUtil.onDOMContentLoaded(function () {
KTFormsGoogleRecaptchaDemos.init();
});
assets/js/custom/documentation/forms/select2.js
+74
View File
@@ -0,0 +1,74 @@
"use strict";
// Class definition
var KTFormsSelect2Demo = function () {
// Private functions
var exampleCountry = function () {
// Format options
const format = (item) => {
if (!item.id) {
return item.text;
}
var url = hostUrl + 'media/' + item.element.getAttribute('data-kt-select2-country');
var img = $("<img>", {
class: "rounded-circle me-2",
width: 26,
src: url
});
var span = $("<span>", {
text: " " + item.text
});
span.prepend(img);
return span;
}
// Init Select2 --- more info: https://select2.org/
$('#kt_docs_select2_country').select2({
templateResult: function (item) {
return format(item);
}
});
}
const exampleUsers = function () {
// Format options
const format = (item) => {
if (!item.id) {
return item.text;
}
var url = hostUrl + 'media/' + item.element.getAttribute('data-kt-select2-user');
var img = $("<img>", {
class: "rounded-circle me-2",
width: 26,
src: url
});
var span = $("<span>", {
text: " " + item.text
});
span.prepend(img);
return span;
}
// Init Select2 --- more info: https://select2.org/
$('#kt_docs_select2_users').select2({
templateResult: function (item) {
return format(item);
}
});
}
return {
// Public Functions
init: function () {
exampleCountry();
exampleUsers();
}
};
}();
// On document ready
KTUtil.onDOMContentLoaded(function () {
KTFormsSelect2Demo.init();
});
assets/js/custom/documentation/forms/tagify.js
+275
View File
@@ -0,0 +1,275 @@
"use strict";
// Class definition
var KTFormsTagifyDemos = function () {
// Private functions
var example1 = function (element) {
// The DOM elements you wish to replace with Tagify
var input1 = document.querySelector("#kt_tagify_1");
var input2 = document.querySelector("#kt_tagify_2");
// Initialize Tagify components on the above inputs
new Tagify(input1, {
placeholder: "Type something"
});
new Tagify(input2, {
placeholder: "Type something"
});
}
var example2 = function (element) {
// The DOM elements you wish to replace with Tagify
var input1 = document.querySelector("#kt_tagify_3");
var input2 = document.querySelector("#kt_tagify_4");
var input3 = document.querySelector("#kt_tagify_5");
// Initialize Tagify components on the above inputs
new Tagify(input1);
new Tagify(input2);
new Tagify(input3);
}
var example3 = function (element) {
// The DOM elements you wish to replace with Tagify
var input1 = document.querySelector("#kt_tagify_6");
var input2 = document.querySelector("#kt_tagify_7");
// Initialize Tagify components on the above inputs
new Tagify(input1, {
whitelist: ["A# .NET", "A# (Axiom)", "A-0 System", "A+", "A++", "ABAP", "ABC", "ABC ALGOL", "ABSET", "ABSYS", "ACC", "Accent", "Ace DASL", "ACL2", "Avicsoft", "ACT-III", "Action!", "ActionScript", "Ada", "Adenine", "Agda", "Agilent VEE", "Agora", "AIMMS", "Alef", "ALF", "ALGOL 58", "ALGOL 60", "ALGOL 68", "ALGOL W", "Alice", "Alma-0", "AmbientTalk", "Amiga E", "AMOS", "AMPL", "Apex (Salesforce.com)", "APL", "AppleScript", "Arc", "ARexx", "Argus", "AspectJ", "Assembly language", "ATS", "Ateji PX", "AutoHotkey", "Autocoder", "AutoIt", "AutoLISP / Visual LISP", "Averest", "AWK", "Axum", "Active Server Pages", "ASP.NET", "B", "Babbage", "Bash", "BASIC", "bc", "BCPL", "BeanShell", "Batch (Windows/Dos)", "Bertrand", "BETA", "Bigwig", "Bistro", "BitC", "BLISS", "Blockly", "BlooP", "Blue", "Boo", "Boomerang", "Bourne shell (including bash and ksh)", "BREW", "BPEL", "B", "C--", "C++ – ISO/IEC 14882", "C# – ISO/IEC 23270", "C/AL", "Caché ObjectScript", "C Shell", "Caml", "Cayenne", "CDuce", "Cecil", "Cesil", "Céu", "Ceylon", "CFEngine", "CFML", "Cg", "Ch", "Chapel", "Charity", "Charm", "Chef", "CHILL", "CHIP-8", "chomski", "ChucK", "CICS", "Cilk", "Citrine (programming language)", "CL (IBM)", "Claire", "Clarion", "Clean", "Clipper", "CLIPS", "CLIST", "Clojure", "CLU", "CMS-2", "COBOL – ISO/IEC 1989", "CobolScript – COBOL Scripting language", "Cobra", "CODE", "CoffeeScript", "ColdFusion", "COMAL", "Combined Programming Language (CPL)", "COMIT", "Common Intermediate Language (CIL)", "Common Lisp (also known as CL)", "COMPASS", "Component Pascal", "Constraint Handling Rules (CHR)", "COMTRAN", "Converge", "Cool", "Coq", "Coral 66", "Corn", "CorVision", "COWSEL", "CPL", "CPL", "Cryptol", "csh", "Csound", "CSP", "CUDA", "Curl", "Curry", "Cybil", "Cyclone", "Cython", "Java", "Javascript", "M2001", "M4", "M#", "Machine code", "MAD (Michigan Algorithm Decoder)", "MAD/I", "Magik", "Magma", "make", "Maple", "MAPPER now part of BIS", "MARK-IV now VISION:BUILDER", "Mary", "MASM Microsoft Assembly x86", "MATH-MATIC", "Mathematica", "MATLAB", "Maxima (see also Macsyma)", "Max (Max Msp – Graphical Programming Environment)", "Maya (MEL)", "MDL", "Mercury", "Mesa", "Metafont", "Microcode", "MicroScript", "MIIS", "Milk (programming language)", "MIMIC", "Mirah", "Miranda", "MIVA Script", "ML", "Model 204", "Modelica", "Modula", "Modula-2", "Modula-3", "Mohol", "MOO", "Mortran", "Mouse", "MPD", "Mathcad", "MSIL – deprecated name for CIL", "MSL", "MUMPS", "Mystic Programming L"],
maxTags: 10,
dropdown: {
maxItems: 20, // <- mixumum allowed rendered suggestions
classname: "tagify__inline__suggestions", // <- custom classname for this dropdown, so it could be targeted
enabled: 0, // <- show suggestions on focus
closeOnSelect: false // <- do not hide the suggestions dropdown once an item has been selected
}
});
new Tagify(input2, {
whitelist: ["A# .NET", "A# (Axiom)", "A-0 System", "A+", "A++", "ABAP", "ABC", "ABC ALGOL", "ABSET", "ABSYS", "ACC", "Accent", "Ace DASL", "ACL2", "Avicsoft", "ACT-III", "Action!", "ActionScript", "Ada", "Adenine", "Agda", "Agilent VEE", "Agora", "AIMMS", "Alef", "ALF", "ALGOL 58", "ALGOL 60", "ALGOL 68", "ALGOL W", "Alice", "Alma-0", "AmbientTalk", "Amiga E", "AMOS", "AMPL", "Apex (Salesforce.com)", "APL", "AppleScript", "Arc", "ARexx", "Argus", "AspectJ", "Assembly language", "ATS", "Ateji PX", "AutoHotkey", "Autocoder", "AutoIt", "AutoLISP / Visual LISP", "Averest", "AWK", "Axum", "Active Server Pages", "ASP.NET", "B", "Babbage", "Bash", "BASIC", "bc", "BCPL", "BeanShell", "Batch (Windows/Dos)", "Bertrand", "BETA", "Bigwig", "Bistro", "BitC", "BLISS", "Blockly", "BlooP", "Blue", "Boo", "Boomerang", "Bourne shell (including bash and ksh)", "BREW", "BPEL", "B", "C--", "C++ – ISO/IEC 14882", "C# – ISO/IEC 23270", "C/AL", "Caché ObjectScript", "C Shell", "Caml", "Cayenne", "CDuce", "Cecil", "Cesil", "Céu", "Ceylon", "CFEngine", "CFML", "Cg", "Ch", "Chapel", "Charity", "Charm", "Chef", "CHILL", "CHIP-8", "chomski", "ChucK", "CICS", "Cilk", "Citrine (programming language)", "CL (IBM)", "Claire", "Clarion", "Clean", "Clipper", "CLIPS", "CLIST", "Clojure", "CLU", "CMS-2", "COBOL – ISO/IEC 1989", "CobolScript – COBOL Scripting language", "Cobra", "CODE", "CoffeeScript", "ColdFusion", "COMAL", "Combined Programming Language (CPL)", "COMIT", "Common Intermediate Language (CIL)", "Common Lisp (also known as CL)", "COMPASS", "Component Pascal", "Constraint Handling Rules (CHR)", "COMTRAN", "Converge", "Cool", "Coq", "Coral 66", "Corn", "CorVision", "COWSEL", "CPL", "CPL", "Cryptol", "csh", "Csound", "CSP", "CUDA", "Curl", "Curry", "Cybil", "Cyclone", "Cython", "Java", "Javascript", "M2001", "M4", "M#", "Machine code", "MAD (Michigan Algorithm Decoder)", "MAD/I", "Magik", "Magma", "make", "Maple", "MAPPER now part of BIS", "MARK-IV now VISION:BUILDER", "Mary", "MASM Microsoft Assembly x86", "MATH-MATIC", "Mathematica", "MATLAB", "Maxima (see also Macsyma)", "Max (Max Msp – Graphical Programming Environment)", "Maya (MEL)", "MDL", "Mercury", "Mesa", "Metafont", "Microcode", "MicroScript", "MIIS", "Milk (programming language)", "MIMIC", "Mirah", "Miranda", "MIVA Script", "ML", "Model 204", "Modelica", "Modula", "Modula-2", "Modula-3", "Mohol", "MOO", "Mortran", "Mouse", "MPD", "Mathcad", "MSIL – deprecated name for CIL", "MSL", "MUMPS", "Mystic Programming L"],
maxTags: 10,
dropdown: {
maxItems: 20, // <- mixumum allowed rendered suggestions
classname: "", // <- custom classname for this dropdown, so it could be targeted
enabled: 0, // <- show suggestions on focus
closeOnSelect: false // <- do not hide the suggestions dropdown once an item has been selected
}
});
}
var example4 = function (element) {
// The DOM elements you wish to replace with Tagify
var input1 = document.querySelector("#kt_tagify_8");
// Initialize Tagify components on the above inputs
new Tagify(input1);
}
const exampleCountry = () => {
var tagify = new Tagify(document.querySelector('#kt_tagify_country'), {
delimiters: null,
templates: {
tag: function (tagData) {
const countryPath = hostUrl + 'media/flags/' + tagData.value.toLowerCase().replace(/\s+/g, '-') + '.svg';
try {
// _ESCAPE_START_
return `<tag title='${tagData.value}' contenteditable='false' spellcheck="false" class='tagify__tag ${tagData.class ? tagData.class : ""}' ${this.getAttributes(tagData)}>
<x title='remove tag' class='tagify__tag__removeBtn'></x>
<div class="d-flex align-items-center">
${tagData.code ?
`<img onerror="this.style.visibility = 'hidden'" class="w-25px rounded-circle me-2" src='${countryPath}' />` : ''
}
<span class='tagify__tag-text'>${tagData.value}</span>
</div>
</tag>`
// _ESCAPE_END_
}
catch (err) { }
},
dropdownItem: function (tagData) {
const countryPath = hostUrl + 'media/flags/' + tagData.value.toLowerCase().replace(/\s+/g, '-') + '.svg';
try {
// _ESCAPE_START_
return `<div class='tagify__dropdown__item ${tagData.class ? tagData.class : ""}'>
<img onerror="this.style.visibility = 'hidden'" class="w-25px rounded-circle me-2"
src='${countryPath}' />
<span>${tagData.value}</span>
</div>`
// _ESCAPE_END_
}
catch (err) { }
}
},
enforceWhitelist: true,
whitelist: [
{ value: 'Argentina', code: 'AR' },
{ value: 'Australia', code: 'AU', searchBy: 'beach, sub-tropical' },
{ value: 'Austria', code: 'AT' },
{ value: 'Brazil', code: 'BR' },
{ value: 'China', code: 'CN' },
{ value: 'Egypt', code: 'EG' },
{ value: 'Finland', code: 'FI' },
{ value: 'France', code: 'FR' },
{ value: 'Germany', code: 'DE' },
{ value: 'Hong Kong', code: 'HK' },
{ value: 'Hungary', code: 'HU' },
{ value: 'Iceland', code: 'IS' },
{ value: 'India', code: 'IN' },
{ value: 'Indonesia', code: 'ID' },
{ value: 'Italy', code: 'IT' },
{ value: 'Jamaica', code: 'JM' },
{ value: 'Japan', code: 'JP' },
{ value: 'Jersey', code: 'JE' },
{ value: 'Luxembourg', code: 'LU' },
{ value: 'Mexico', code: 'MX' },
{ value: 'Netherlands', code: 'NL' },
{ value: 'New Zealand', code: 'NZ' },
{ value: 'Norway', code: 'NO' },
{ value: 'Philippines', code: 'PH' },
{ value: 'Singapore', code: 'SG' },
{ value: 'South Korea', code: 'KR' },
{ value: 'Sweden', code: 'SE' },
{ value: 'Switzerland', code: 'CH' },
{ value: 'Thailand', code: 'TH' },
{ value: 'Ukraine', code: 'UA' },
{ value: 'United Kingdom', code: 'GB' },
{ value: 'United States', code: 'US' },
{ value: 'Vietnam', code: 'VN' }
],
dropdown: {
enabled: 1, // suggest tags after a single character input
classname: 'extra-properties' // custom class for the suggestions dropdown
} // map tags' values to this property name, so this property will be the actual value and not the printed value on the screen
})
// add the first 2 tags and makes them readonly
var tagsToAdd = tagify.settings.whitelist.slice(0, 2);
tagify.addTags(tagsToAdd);
}
const exampleUsers = () => {
var inputElm = document.querySelector('#kt_tagify_users');
const usersList = [
{ value: 1, name: 'Emma Smith', avatar: 'avatars/150-1.jpg', email: '[email protected]' },
{ value: 2, name: 'Max Smith', avatar: 'avatars/150-26.jpg', email: '[email protected]' },
{ value: 3, name: 'Sean Bean', avatar: 'avatars/150-4.jpg', email: '[email protected]' },
{ value: 4, name: 'Brian Cox', avatar: 'avatars/150-15.jpg', email: '[email protected]' },
{ value: 5, name: 'Francis Mitcham', avatar: 'avatars/150-8.jpg', email: '[email protected]' },
{ value: 6, name: 'Dan Wilson', avatar: 'avatars/150-6.jpg', email: '[email protected]' },
{ value: 7, name: 'Ana Crown', avatar: 'avatars/150-7.jpg', email: '[email protected]' },
{ value: 8, name: 'John Miller', avatar: 'avatars/150-17.jpg', email: '[email protected]' }
];
function tagTemplate(tagData) {
return `
<tag title="${(tagData.title || tagData.email)}"
contenteditable='false'
spellcheck='false'
tabIndex="-1"
class="${this.settings.classNames.tag} ${tagData.class ? tagData.class : ""}"
${this.getAttributes(tagData)}>
<x title='' class='tagify__tag__removeBtn' role='button' aria-label='remove tag'></x>
<div class="d-flex align-items-center">
<div class='tagify__tag__avatar-wrap ps-0'>
<img onerror="this.style.visibility='hidden'" class="rounded-circle w-25px me-2" src="${hostUrl}media/${tagData.avatar}">
</div>
<span class='tagify__tag-text'>${tagData.name}</span>
</div>
</tag>
`
}
function suggestionItemTemplate(tagData) {
return `
<div ${this.getAttributes(tagData)}
class='tagify__dropdown__item d-flex align-items-center ${tagData.class ? tagData.class : ""}'
tabindex="0"
role="option">
${tagData.avatar ? `
<div class='tagify__dropdown__item__avatar-wrap me-2'>
<img onerror="this.style.visibility='hidden'" class="rounded-circle w-50px me-2" src="${hostUrl}media/${tagData.avatar}">
</div>` : ''
}
<div class="d-flex flex-column">
<strong>${tagData.name}</strong>
<span>${tagData.email}</span>
</div>
</div>
`
}
// initialize Tagify on the above input node reference
var tagify = new Tagify(inputElm, {
tagTextProp: 'name', // very important since a custom template is used with this property as text. allows typing a "value" or a "name" to match input with whitelist
enforceWhitelist: true,
skipInvalid: true, // do not remporarily add invalid tags
dropdown: {
closeOnSelect: false,
enabled: 0,
classname: 'users-list',
searchKeys: ['name', 'email'] // very important to set by which keys to search for suggesttions when typing
},
templates: {
tag: tagTemplate,
dropdownItem: suggestionItemTemplate
},
whitelist: usersList
})
tagify.on('dropdown:show dropdown:updated', onDropdownShow)
tagify.on('dropdown:select', onSelectSuggestion)
var addAllSuggestionsElm;
function onDropdownShow(e) {
var dropdownContentElm = e.detail.tagify.DOM.dropdown.content;
if (tagify.suggestedListItems.length > 1) {
addAllSuggestionsElm = getAddAllSuggestionsElm();
// insert "addAllSuggestionsElm" as the first element in the suggestions list
dropdownContentElm.insertBefore(addAllSuggestionsElm, dropdownContentElm.firstChild)
}
}
function onSelectSuggestion(e) {
if (e.detail.elm == addAllSuggestionsElm)
tagify.dropdown.selectAll.call(tagify);
}
// create a "add all" custom suggestion element every time the dropdown changes
function getAddAllSuggestionsElm() {
// suggestions items should be based on "dropdownItem" template
return tagify.parseTemplate('dropdownItem', [{
class: "addAll",
name: "Add all",
email: tagify.settings.whitelist.reduce(function (remainingSuggestions, item) {
return tagify.isTagDuplicate(item.value) ? remainingSuggestions : remainingSuggestions + 1
}, 0) + " Members"
}]
)
}
}
return {
// Public Functions
init: function () {
example1();
example2();
example3();
example4();
exampleCountry();
exampleUsers();
}
};
}();
// On document ready
KTUtil.onDOMContentLoaded(function () {
KTFormsTagifyDemos.init();
});
assets/js/custom/documentation/general/blockui.js
+109
View File
@@ -0,0 +1,109 @@
"use strict";
// Class definition
var KTGeneralBlockUI = function() {
// Private functions
var example1 = function() {
var button = document.querySelector("#kt_block_ui_1_button");
var target = document.querySelector("#kt_block_ui_1_target");
var blockUI = new KTBlockUI(target);
button.addEventListener("click", function() {
if (blockUI.isBlocked()) {
blockUI.release();
button.innerText = "Block";
} else {
blockUI.block();
button.innerText = "Release";
}
});
}
var example2 = function() {
var button = document.querySelector("#kt_block_ui_2_button");
var target = document.querySelector("#kt_block_ui_2_target");
var blockUI = new KTBlockUI(target, {
message: '<div class="blockui-message"><span class="spinner-border text-primary"></span> Loading...</div>',
});
button.addEventListener("click", function() {
if (blockUI.isBlocked()) {
blockUI.release();
button.innerText = "Block";
} else {
blockUI.block();
button.innerText = "Release";
}
});
}
var example3 = function() {
var button = document.querySelector("#kt_block_ui_3_button");
var target = document.querySelector("#kt_block_ui_3_target");
var blockUI = new KTBlockUI(target, {
overlayClass: 'bg-danger bg-opacity-25',
});
button.addEventListener("click", function() {
if (blockUI.isBlocked()) {
blockUI.release();
button.innerText = "Block";
} else {
blockUI.block();
button.innerText = "Release";
}
});
}
var example4 = function() {
var button = document.querySelector("#kt_block_ui_4_button");
var target = document.querySelector("#kt_block_ui_4_target");
var blockUI = new KTBlockUI(target);
button.addEventListener("click", function(e) {
e.preventDefault();
blockUI.block();
setTimeout(function() {
blockUI.release();
}, 3000);
});
}
var example5 = function() {
var button = document.querySelector("#kt_block_ui_5_button");
var blockUI = new KTBlockUI(document.body);
button.addEventListener("click", function(e) {
e.preventDefault();
blockUI.block();
setTimeout(function() {
//blockUI.release();
}, 3000);
});
}
return {
// Public Functions
init: function() {
example1();
example2();
example3();
example4();
example5();
}
};
}();
// On document ready
KTUtil.onDOMContentLoaded(function() {
KTGeneralBlockUI.init();
});
assets/js/custom/documentation/general/cropper.js
+124
View File
@@ -0,0 +1,124 @@
'use strict';
// Class definition
var KTCropperDemo = function () {
// Private functions
var initCropperDemo = function () {
var image = document.getElementById('image');
var options = {
crop: function (event) {
document.getElementById('dataX').value = Math.round(event.detail.x);
document.getElementById('dataY').value = Math.round(event.detail.y);
document.getElementById('dataWidth').value = Math.round(event.detail.width);
document.getElementById('dataHeight').value = Math.round(event.detail.height);
document.getElementById('dataRotate').value = event.detail.rotate;
document.getElementById('dataScaleX').value = event.detail.scaleX;
document.getElementById('dataScaleY').value = event.detail.scaleY;
var lg = document.getElementById('cropper-preview-lg');
lg.innerHTML = '';
lg.appendChild(cropper.getCroppedCanvas({ width: 256, height: 160 }));
var md = document.getElementById('cropper-preview-md');
md.innerHTML = '';
md.appendChild(cropper.getCroppedCanvas({ width: 128, height: 80 }));
var sm = document.getElementById('cropper-preview-sm');
sm.innerHTML = '';
sm.appendChild(cropper.getCroppedCanvas({ width: 64, height: 40 }));
var xs = document.getElementById('cropper-preview-xs');
xs.innerHTML = '';
xs.appendChild(cropper.getCroppedCanvas({ width: 32, height: 20 }));
},
};
var cropper = new Cropper(image, options);
var buttons = document.getElementById('cropper-buttons');
var methods = buttons.querySelectorAll('[data-method]');
methods.forEach(function (button) {
button.addEventListener('click', function (e) {
var method = button.getAttribute('data-method');
var option = button.getAttribute('data-option');
var option2 = button.getAttribute('data-second-option');
try {
option = JSON.parse(option);
}
catch (e) {
}
var result;
if (!option2) {
result = cropper[method](option, option2);
}
else if (option) {
result = cropper[method](option);
}
else {
result = cropper[method]();
}
if (method === 'getCroppedCanvas') {
var modal = document.getElementById('getCroppedCanvasModal');
var modalBody = modal.querySelector('.modal-body');
modalBody.innerHTML = '';
modalBody.appendChild(result);
}
var input = document.querySelector('#putData');
try {
input.value = JSON.stringify(result);
}
catch (e) {
if (!result) {
input.value = result;
}
}
});
});
// set aspect ratio option buttons
var radioOptions = document.getElementById('setAspectRatio').querySelectorAll('[name="aspectRatio"]');
radioOptions.forEach(function (button) {
button.addEventListener('click', function (e) {
cropper.setAspectRatio(e.target.value);
});
});
// set view mode
var viewModeOptions = document.getElementById('viewMode').querySelectorAll('[name="viewMode"]');
viewModeOptions.forEach(function (button) {
button.addEventListener('click', function (e) {
cropper.destroy();
cropper = new Cropper(image, Object.assign({}, options, { viewMode: e.target.value }));
});
});
var toggleoptions = document.getElementById('toggleOptionButtons').querySelectorAll('[type="checkbox"]');
toggleoptions.forEach(function (checkbox) {
checkbox.addEventListener('click', function (e) {
var appendOption = {};
appendOption[e.target.getAttribute('name')] = e.target.checked;
options = Object.assign({}, options, appendOption);
cropper.destroy();
cropper = new Cropper(image, options);
})
});
};
return {
// public functions
init: function () {
initCropperDemo();
},
};
}();
// On document ready
KTUtil.onDOMContentLoaded(function () {
KTCropperDemo.init();
});
assets/js/custom/documentation/general/datatables/advanced.js
+160
View File
@@ -0,0 +1,160 @@
"use strict";
// Class definition
var KTDatatablesAdvanced = function () {
// Private functions
var _initExample1 = function() {
var status = {
1: {"title": "Pending", "state": "primary"},
2: {"title": "Delivered", "state": "danger"},
3: {"title": "Canceled", "state": "primary"},
4: {"title": "Success", "state": "success"},
5: {"title": "Info", "state": "info"},
6: {"title": "Danger", "state": "danger"},
7: {"title": "Warning", "state": "warning"},
};
$("#kt_datatable_example_1").DataTable({
"columnDefs": [
{
// The `data` parameter refers to the data for the cell (defined by the
// `data` option, which defaults to the column being worked with, in
// this case `data: 0`.
"render": function ( data, type, row ) {
var index = KTUtil.getRandomInt(1, 7);
return data + '<span class="ms-2 badge badge-light-' + status[index]['state'] + ' fw-bold">' + status[index]['title'] + '</span>';
},
"targets": 1
}
]
});
}
var _initExample2 = function() {
$("#kt_datatable_example_2").DataTable({
"columnDefs": [ {
"visible": false,
"targets": -1
}]
});
}
var _initExample3 = function() {
var groupColumn = 2;
var table = $('#kt_datatable_example_3').DataTable({
"columnDefs": [{
"visible": false,
"targets": groupColumn
}],
"order": [
[groupColumn, 'asc']
],
"displayLength": 25,
"drawCallback": function(settings) {
var api = this.api();
var rows = api.rows({
page: 'current'
}).nodes();
var last = null;
api.column(groupColumn, {
page: 'current'
}).data().each(function(group, i) {
if (last !== group) {
$(rows).eq(i).before(
'<tr class="group fs-5 fw-bolder"><td colspan="5">' + group + '</td></tr>'
);
last = group;
}
});
}
});
// Order by the grouping
$('#kt_datatable_example_3 tbody').on('click', 'tr.group', function() {
var currentOrder = table.order()[0];
if (currentOrder[0] === groupColumn && currentOrder[1] === 'asc') {
table.order([groupColumn, 'desc']).draw();
} else {
table.order([groupColumn, 'asc']).draw();
}
});
}
var _initExample4 = function() {
$("#kt_datatable_example_4").DataTable({
"footerCallback": function ( row, data, start, end, display ) {
var api = this.api(), data;
// Remove the formatting to get integer data for summation
var intVal = function ( i ) {
return typeof i === "string" ?
i.replace(/[\$,]/g, "")*1 :
typeof i === "number" ?
i : 0;
};
// Total over all pages
var total = api
.column( 4 )
.data()
.reduce( function (a, b) {
return intVal(a) + intVal(b);
}, 0 );
// Total over this page
var pageTotal = api
.column( 4, { page: "current"} )
.data()
.reduce( function (a, b) {
return intVal(a) + intVal(b);
}, 0 );
// Update footer
$( api.column( 4 ).footer() ).html(
"$"+pageTotal +" ( $"+ total +" total)"
);
}
});
}
var _initExample5 = function() {
$("#kt_datatable_example_5").DataTable({
"language": {
"lengthMenu": "Show _MENU_",
},
"dom":
"<'row'" +
"<'col-sm-6 d-flex align-items-center justify-conten-start'l>" +
"<'col-sm-6 d-flex align-items-center justify-content-end'f>" +
">" +
"<'table-responsive'tr>" +
"<'row'" +
"<'col-sm-12 col-md-5 d-flex align-items-center justify-content-center justify-content-md-start'i>" +
"<'col-sm-12 col-md-7 d-flex align-items-center justify-content-center justify-content-md-end'p>" +
">"
});
}
// Public methods
return {
init: function () {
_initExample1();
_initExample2();
_initExample3();
_initExample4();
_initExample5();
}
}
}();
// On document ready
KTUtil.onDOMContentLoaded(function() {
KTDatatablesAdvanced.init();
});
assets/js/custom/documentation/general/datatables/api.js
+57
View File
@@ -0,0 +1,57 @@
"use strict";
// Class definition
var KTDatatablesApi = function () {
// Private functions
var _initExample1 = function() {
var t = $("#kt_datatable_example_1").DataTable();
var counter = 1;
$("#kt_datatable_example_1_addrow").on( "click", function () {
t.row.add( [
counter +".1",
counter +".2",
counter +".3",
counter +".4",
counter +".5",
] ).draw( false );
counter++;
} );
// Automatically add a first row of data
$("#kt_datatable_example_1_addrow").click();
}
var _initExample2 = function() {
var table = $("#kt_datatable_example_2").DataTable({
columnDefs: [{
orderable: false,
targets: [1,2,3]
}]
});
$("#kt_datatable_example_2_submit").click( function() {
var data = table.$("input, select").serialize();
alert(
"The following data would have been submitted to the server: \n\n"+
data.substr( 0, 120 )+"..."
);
return false;
});
}
// Public methods
return {
init: function () {
_initExample1();
_initExample2();
}
}
}();
// On document ready
KTUtil.onDOMContentLoaded(function() {
KTDatatablesApi.init();
});
assets/js/custom/documentation/general/datatables/basic.js
+47
View File
@@ -0,0 +1,47 @@
"use strict";
// Class definition
var KTDatatablesBasic = function () {
// Private functions
var _initExample1 = function() {
$("#kt_datatable_example_1").DataTable();
}
var _initExample2 = function() {
$("#kt_datatable_example_2").DataTable({
"scrollY": "500px",
"scrollCollapse": true,
"paging": false,
"dom": "<'table-responsive'tr>"
});
}
var _initExample3 = function() {
$("#kt_datatable_example_3").DataTable({
"scrollX": true
});
}
var _initExample4 = function() {
$("#kt_datatable_example_4").DataTable({
"scrollY": 300,
"scrollX": true
});
}
// Public methods
return {
init: function () {
_initExample1();
_initExample2();
_initExample3();
_initExample4();
}
}
}();
// On document ready
KTUtil.onDOMContentLoaded(function() {
KTDatatablesBasic.init();
});
assets/js/custom/documentation/general/datatables/server-side.js
+355
View File
@@ -0,0 +1,355 @@
"use strict";
// Class definition
var KTDatatablesServerSide = function () {
// Shared variables
var table;
var dt;
var filterPayment;
// Private functions
var initDatatable = function () {
dt = $("#kt_datatable_example_1").DataTable({
searchDelay: 500,
processing: true,
serverSide: true,
order: [[5, 'desc']],
stateSave: true,
select: {
style: 'os',
selector: 'td:first-child',
className: 'row-selected'
},
ajax: {
url: "https://preview.keenthemes.com/api/datatables.php",
},
columns: [
{ data: 'RecordID' },
{ data: 'Name' },
{ data: 'Email' },
{ data: 'Company' },
{ data: 'CreditCardNumber' },
{ data: 'Datetime' },
{ data: null },
],
columnDefs: [
{
targets: 0,
orderable: false,
render: function (data) {
return `
<div class="form-check form-check-sm form-check-custom form-check-solid">
<input class="form-check-input" type="checkbox" value="${data}" />
</div>`;
}
},
{
targets: 4,
render: function (data, type, row) {
return `<img src="${hostUrl}media/svg/card-logos/${row.CreditCardType}.svg" class="w-35px me-3" alt="${row.CreditCardType}">` + data;
}
},
{
targets: -1,
data: null,
orderable: false,
className: 'text-end',
render: function (data, type, row) {
return `
<a href="#" class="btn btn-light btn-active-light-primary btn-sm" data-kt-menu-trigger="click" data-kt-menu-placement="bottom-end" data-kt-menu-flip="top-end">
Actions
<span class="svg-icon svg-icon-5 m-0">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewBox="0 0 24 24" version="1.1">
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<polygon points="0 0 24 0 24 24 0 24"></polygon>
<path d="M6.70710678,15.7071068 C6.31658249,16.0976311 5.68341751,16.0976311 5.29289322,15.7071068 C4.90236893,15.3165825 4.90236893,14.6834175 5.29289322,14.2928932 L11.2928932,8.29289322 C11.6714722,7.91431428 12.2810586,7.90106866 12.6757246,8.26284586 L18.6757246,13.7628459 C19.0828436,14.1360383 19.1103465,14.7686056 18.7371541,15.1757246 C18.3639617,15.5828436 17.7313944,15.6103465 17.3242754,15.2371541 L12.0300757,10.3841378 L6.70710678,15.7071068 Z" fill="#000000" fill-rule="nonzero" transform="translate(12.000003, 11.999999) rotate(-180.000000) translate(-12.000003, -11.999999)"></path>
</g>
</svg>
</span>
</a>
<!--begin::Menu-->
<div class="menu menu-sub menu-sub-dropdown menu-column menu-rounded menu-gray-600 menu-state-bg-light-primary fw-bold fs-7 w-125px py-4" data-kt-menu="true">
<!--begin::Menu item-->
<div class="menu-item px-3">
<a href="#" class="menu-link px-3" data-kt-docs-table-filter="edit_row">
Edit
</a>
</div>
<!--end::Menu item-->
<!--begin::Menu item-->
<div class="menu-item px-3">
<a href="#" class="menu-link px-3" data-kt-docs-table-filter="delete_row">
Delete
</a>
</div>
<!--end::Menu item-->
</div>
<!--end::Menu-->
`;
},
},
],
// Add data-filter attribute
createdRow: function (row, data, dataIndex) {
$(row).find('td:eq(4)').attr('data-filter', data.CreditCardType);
}
});
table = dt.$;
// Re-init functions on every table re-draw -- more info: https://datatables.net/reference/event/draw
dt.on('draw', function () {
initToggleToolbar();
toggleToolbars();
handleDeleteRows();
KTMenu.createInstances();
});
}
// Search Datatable --- official docs reference: https://datatables.net/reference/api/search()
var handleSearchDatatable = function () {
const filterSearch = document.querySelector('[data-kt-docs-table-filter="search"]');
filterSearch.addEventListener('keyup', function (e) {
dt.search(e.target.value).draw();
});
}
// Filter Datatable
var handleFilterDatatable = () => {
// Select filter options
filterPayment = document.querySelectorAll('[data-kt-docs-table-filter="payment_type"] [name="payment_type"]');
const filterButton = document.querySelector('[data-kt-docs-table-filter="filter"]');
// Filter datatable on submit
filterButton.addEventListener('click', function () {
// Get filter values
let paymentValue = '';
// Get payment value
filterPayment.forEach(r => {
if (r.checked) {
paymentValue = r.value;
}
// Reset payment value if "All" is selected
if (paymentValue === 'all') {
paymentValue = '';
}
});
// Filter datatable --- official docs reference: https://datatables.net/reference/api/search()
dt.search(paymentValue).draw();
});
}
// Delete customer
var handleDeleteRows = () => {
// Select all delete buttons
const deleteButtons = document.querySelectorAll('[data-kt-docs-table-filter="delete_row"]');
deleteButtons.forEach(d => {
// Delete button on click
d.addEventListener('click', function (e) {
e.preventDefault();
// Select parent row
const parent = e.target.closest('tr');
// Get customer name
const customerName = parent.querySelectorAll('td')[1].innerText;
// SweetAlert2 pop up --- official docs reference: https://sweetalert2.github.io/
Swal.fire({
text: "Are you sure you want to delete " + customerName + "?",
icon: "warning",
showCancelButton: true,
buttonsStyling: false,
confirmButtonText: "Yes, delete!",
cancelButtonText: "No, cancel",
customClass: {
confirmButton: "btn fw-bold btn-danger",
cancelButton: "btn fw-bold btn-active-light-primary"
}
}).then(function (result) {
if (result.value) {
// Simulate delete request -- for demo purpose only
Swal.fire({
text: "Deleting " + customerName,
icon: "info",
buttonsStyling: false,
showConfirmButton: false,
timer: 2000
}).then(function () {
Swal.fire({
text: "You have deleted " + customerName + "!.",
icon: "success",
buttonsStyling: false,
confirmButtonText: "Ok, got it!",
customClass: {
confirmButton: "btn fw-bold btn-primary",
}
}).then(function () {
// delete row data from server and re-draw datatable
dt.draw();
});
});
} else if (result.dismiss === 'cancel') {
Swal.fire({
text: customerName + " was not deleted.",
icon: "error",
buttonsStyling: false,
confirmButtonText: "Ok, got it!",
customClass: {
confirmButton: "btn fw-bold btn-primary",
}
});
}
});
})
});
}
// Reset Filter
var handleResetForm = () => {
// Select reset button
const resetButton = document.querySelector('[data-kt-docs-table-filter="reset"]');
// Reset datatable
resetButton.addEventListener('click', function () {
// Reset payment type
filterPayment[0].checked = true;
// Reset datatable --- official docs reference: https://datatables.net/reference/api/search()
dt.search('').draw();
});
}
// Init toggle toolbar
var initToggleToolbar = function () {
// Toggle selected action toolbar
// Select all checkboxes
const container = document.querySelector('#kt_datatable_example_1');
const checkboxes = container.querySelectorAll('[type="checkbox"]');
// Select elements
const deleteSelected = document.querySelector('[data-kt-docs-table-select="delete_selected"]');
// Toggle delete selected toolbar
checkboxes.forEach(c => {
// Checkbox on click event
c.addEventListener('click', function () {
setTimeout(function () {
toggleToolbars();
}, 50);
});
});
// Deleted selected rows
deleteSelected.addEventListener('click', function () {
// SweetAlert2 pop up --- official docs reference: https://sweetalert2.github.io/
Swal.fire({
text: "Are you sure you want to delete selected customers?",
icon: "warning",
showCancelButton: true,
buttonsStyling: false,
showLoaderOnConfirm: true,
confirmButtonText: "Yes, delete!",
cancelButtonText: "No, cancel",
customClass: {
confirmButton: "btn fw-bold btn-danger",
cancelButton: "btn fw-bold btn-active-light-primary"
},
}).then(function (result) {
if (result.value) {
// Simulate delete request -- for demo purpose only
Swal.fire({
text: "Deleting selected customers",
icon: "info",
buttonsStyling: false,
showConfirmButton: false,
timer: 2000
}).then(function () {
Swal.fire({
text: "You have deleted all selected customers!.",
icon: "success",
buttonsStyling: false,
confirmButtonText: "Ok, got it!",
customClass: {
confirmButton: "btn fw-bold btn-primary",
}
}).then(function () {
// delete row data from server and re-draw datatable
dt.draw();
});
// Remove header checked box
const headerCheckbox = container.querySelectorAll('[type="checkbox"]')[0];
headerCheckbox.checked = false;
});
} else if (result.dismiss === 'cancel') {
Swal.fire({
text: "Selected customers was not deleted.",
icon: "error",
buttonsStyling: false,
confirmButtonText: "Ok, got it!",
customClass: {
confirmButton: "btn fw-bold btn-primary",
}
});
}
});
});
}
// Toggle toolbars
var toggleToolbars = function () {
// Define variables
const container = document.querySelector('#kt_datatable_example_1');
const toolbarBase = document.querySelector('[data-kt-docs-table-toolbar="base"]');
const toolbarSelected = document.querySelector('[data-kt-docs-table-toolbar="selected"]');
const selectedCount = document.querySelector('[data-kt-docs-table-select="selected_count"]');
// Select refreshed checkbox DOM elements
const allCheckboxes = container.querySelectorAll('tbody [type="checkbox"]');
// Detect checkboxes state & count
let checkedState = false;
let count = 0;
// Count checked boxes
allCheckboxes.forEach(c => {
if (c.checked) {
checkedState = true;
count++;
}
});
// Toggle toolbars
if (checkedState) {
selectedCount.innerHTML = count;
toolbarBase.classList.add('d-none');
toolbarSelected.classList.remove('d-none');
} else {
toolbarBase.classList.remove('d-none');
toolbarSelected.classList.add('d-none');
}
}
// Public methods
return {
init: function () {
initDatatable();
handleSearchDatatable();
initToggleToolbar();
handleFilterDatatable();
handleDeleteRows();
handleResetForm();
}
}
}();
// On document ready
KTUtil.onDOMContentLoaded(function () {
KTDatatablesServerSide.init();
});
assets/js/custom/documentation/general/draggable/cards.js
+35
View File
@@ -0,0 +1,35 @@
"use strict";
// Class definition
var KTDraggableCards = function() {
// Private functions
var exampleCards = function() {
var containers = document.querySelectorAll('.draggable-zone');
if (containers.length === 0) {
return false;
}
var swappable = new Sortable.default(containers, {
draggable: '.draggable',
handle: '.draggable .draggable-handle',
mirror: {
//appendTo: selector,
appendTo: 'body',
constrainDimensions: true
}
});
}
return {
// Public Functions
init: function() {
exampleCards();
}
};
}();
// On document ready
KTUtil.onDOMContentLoaded(function() {
KTDraggableCards.init();
});
assets/js/custom/documentation/general/draggable/multiple-containers.js
+35
View File
@@ -0,0 +1,35 @@
"use strict";
// Class definition
var KTDraggableMultiple = function() {
// Private functions
var exampleMultiple = function() {
var containers = document.querySelectorAll('.draggable-zone');
if (containers.length === 0) {
return false;
}
var swappable = new Sortable.default(containers, {
draggable: '.draggable',
handle: '.draggable .draggable-handle',
mirror: {
//appendTo: selector,
appendTo: 'body',
constrainDimensions: true
}
});
}
return {
// Public Functions
init: function() {
exampleMultiple();
}
};
}();
// On document ready
KTUtil.onDOMContentLoaded(function() {
KTDraggableMultiple.init();
});
assets/js/custom/documentation/general/draggable/restricted.js
+83
View File
@@ -0,0 +1,83 @@
"use strict";
// Class definition
var KTDraggableRestricted = function () {
// Private functions
var exampleRestricted = function () {
var containers = document.querySelectorAll('.draggable-zone');
const restrcitedWrapper = document.querySelector('[data-kt-draggable-level="restricted"]');
if (containers.length === 0) {
return false;
}
var droppable = new Droppable.default(containers, {
draggable: '.draggable',
dropzone: '.draggable-zone',
handle: '.draggable .draggable-handle',
mirror: {
//appendTo: selector,
appendTo: 'body',
constrainDimensions: true
}
});
// Define draggable element variable for permissions level
let droppableOrigin;
// Handle drag start event -- more info: https://shopify.github.io/draggable/docs/class/src/Draggable/DragEvent/DragEvent.js~DragEvent.html
droppable.on('drag:start', (e) => {
droppableOrigin = e.originalSource.getAttribute('data-kt-draggable-level');
});
// Handle drag over event -- more info: https://shopify.github.io/draggable/docs/class/src/Draggable/DragEvent/DragEvent.js~DragOverEvent.html
droppable.on('drag:over', (e) => {
const isRestricted = e.overContainer.closest('[data-kt-draggable-level="restricted"]');
if (isRestricted) {
if (droppableOrigin !== 'admin') {
restrcitedWrapper.classList.add('bg-light-danger');
} else {
restrcitedWrapper.classList.remove('bg-light-danger');
}
} else {
restrcitedWrapper.classList.remove('bg-light-danger');
}
});
// Handle drag stop event -- more info: https://shopify.github.io/draggable/docs/class/src/Draggable/DragEvent/DragEvent.js~DragStopEvent.html
droppable.on('drag:stop', (e) => {
// remove all draggable occupied limit
containers.forEach(c => {
c.classList.remove('draggable-dropzone--occupied');
});
// Remove restricted alert
restrcitedWrapper.classList.remove('bg-light-danger');
});
// Handle drop event -- https://shopify.github.io/draggable/docs/class/src/Droppable/DroppableEvent/DroppableEvent.js~DroppableDroppedEvent.html
droppable.on('droppable:dropped', (e) => {
const isRestricted = e.dropzone.closest('[data-kt-draggable-level="restricted"]');
// Detect if drop container is restricted
if (isRestricted) {
// Check if dragged element has permission level
if (droppableOrigin !== 'admin') {
restrcitedWrapper.classList.add('bg-light-danger');
e.cancel();
}
}
});
}
return {
// Public Functions
init: function () {
exampleRestricted();
}
};
}();
// On document ready
KTUtil.onDOMContentLoaded(function () {
KTDraggableRestricted.init();
});
assets/js/custom/documentation/general/draggable/swappable.js
+35
View File
@@ -0,0 +1,35 @@
"use strict";
// Class definition
var KTDraggableSwappable = function() {
// Private functions
var exampleSwappable = function() {
var containers = document.querySelectorAll('.draggable-zone');
if (containers.length === 0) {
return false;
}
var swappable = new Swappable.default(containers, {
draggable: '.draggable',
handle: '.draggable .draggable-handle',
mirror: {
//appendTo: selector,
appendTo: 'body',
constrainDimensions: true
}
});
}
return {
// Public Functions
init: function() {
exampleSwappable();
}
};
}();
// On document ready
KTUtil.onDOMContentLoaded(function() {
KTDraggableSwappable.init();
});
assets/js/custom/documentation/general/drawer.js
+20
View File
@@ -0,0 +1,20 @@
"use strict";
// Class definition
var KTGeneralDrawerDemos = function() {
// Private functions
var _exampleBasic = function() {
}
return {
// Public Functions
init: function() {
_exampleBasic();
}
};
}();
// On document ready
KTUtil.onDOMContentLoaded(function() {
KTGeneralDrawerDemos.init();
});
assets/js/custom/documentation/general/fullcalendar/background-events.js
+93
View File
@@ -0,0 +1,93 @@
"use strict";
// Class definition
var KTGeneralFullCalendarEventsDemos = function() {
// Private functions
var exampleBackgroundEvents = function() {
// Define colors
var green = KTUtil.getCssVariableValue('--bs-active-success');
var red = KTUtil.getCssVariableValue('--bs-active-danger');
// Initialize Fullcalendar -- for more info please visit the official site: https://fullcalendar.io/demos
var calendarEl = document.getElementById('kt_docs_fullcalendar_background_events');
var calendar = new FullCalendar.Calendar(calendarEl, {
headerToolbar: {
left: 'prev,next today',
center: 'title',
right: 'dayGridMonth,timeGridWeek,timeGridDay,listMonth'
},
initialDate: '2020-09-12',
navLinks: true, // can click day/week names to navigate views
businessHours: true, // display business hours
editable: true,
selectable: true,
events: [{
title: 'Business Lunch',
start: '2020-09-03T13:00:00',
constraint: 'businessHours'
},
{
title: 'Meeting',
start: '2020-09-13T11:00:00',
constraint: 'availableForMeeting', // defined below
color: green
},
{
title: 'Conference',
start: '2020-09-18',
end: '2020-09-20'
},
{
title: 'Party',
start: '2020-09-29T20:00:00'
},
// areas where "Meeting" must be dropped
{
groupId: 'availableForMeeting',
start: '2020-09-11',
end: '2020-09-11',
display: 'background',
},
{
groupId: 'availableForMeeting',
start: '2020-09-13',
end: '2020-09-13',
display: 'background',
},
// red areas where no events can be dropped
{
start: '2020-09-24',
end: '2020-09-28',
overlap: false,
display: 'background',
color: red
},
{
start: '2020-09-06',
end: '2020-09-08',
overlap: false,
display: 'background',
color: red
}
]
});
calendar.render();
}
return {
// Public Functions
init: function() {
exampleBackgroundEvents();
}
};
}();
// On document ready
KTUtil.onDOMContentLoaded(function() {
KTGeneralFullCalendarEventsDemos.init();
});
assets/js/custom/documentation/general/fullcalendar/basic.js
+171
View File
@@ -0,0 +1,171 @@
"use strict";
// Class definition
var KTGeneralFullCalendarBasicDemos = function () {
// Private functions
var exampleBasic = function () {
var todayDate = moment().startOf('day');
var YM = todayDate.format('YYYY-MM');
var YESTERDAY = todayDate.clone().subtract(1, 'day').format('YYYY-MM-DD');
var TODAY = todayDate.format('YYYY-MM-DD');
var TOMORROW = todayDate.clone().add(1, 'day').format('YYYY-MM-DD');
var calendarEl = document.getElementById('kt_docs_fullcalendar_basic');
var calendar = new FullCalendar.Calendar(calendarEl, {
headerToolbar: {
left: 'prev,next today',
center: 'title',
right: 'dayGridMonth,timeGridWeek,timeGridDay,listMonth'
},
height: 800,
contentHeight: 780,
aspectRatio: 3, // see: https://fullcalendar.io/docs/aspectRatio
nowIndicator: true,
now: TODAY + 'T09:25:00', // just for demo
views: {
dayGridMonth: { buttonText: 'month' },
timeGridWeek: { buttonText: 'week' },
timeGridDay: { buttonText: 'day' }
},
initialView: 'dayGridMonth',
initialDate: TODAY,
editable: true,
dayMaxEvents: true, // allow "more" link when too many events
navLinks: true,
events: [
{
title: 'All Day Event',
start: YM + '-01',
description: 'Toto lorem ipsum dolor sit incid idunt ut',
className: "fc-event-danger fc-event-solid-warning"
},
{
title: 'Reporting',
start: YM + '-14T13:30:00',
description: 'Lorem ipsum dolor incid idunt ut labore',
end: YM + '-14',
className: "fc-event-success"
},
{
title: 'Company Trip',
start: YM + '-02',
description: 'Lorem ipsum dolor sit tempor incid',
end: YM + '-03',
className: "fc-event-primary"
},
{
title: 'ICT Expo 2017 - Product Release',
start: YM + '-03',
description: 'Lorem ipsum dolor sit tempor inci',
end: YM + '-05',
className: "fc-event-light fc-event-solid-primary"
},
{
title: 'Dinner',
start: YM + '-12',
description: 'Lorem ipsum dolor sit amet, conse ctetur',
end: YM + '-10'
},
{
id: 999,
title: 'Repeating Event',
start: YM + '-09T16:00:00',
description: 'Lorem ipsum dolor sit ncididunt ut labore',
className: "fc-event-danger"
},
{
id: 1000,
title: 'Repeating Event',
description: 'Lorem ipsum dolor sit amet, labore',
start: YM + '-16T16:00:00'
},
{
title: 'Conference',
start: YESTERDAY,
end: TOMORROW,
description: 'Lorem ipsum dolor eius mod tempor labore',
className: "fc-event-primary"
},
{
title: 'Meeting',
start: TODAY + 'T10:30:00',
end: TODAY + 'T12:30:00',
description: 'Lorem ipsum dolor eiu idunt ut labore'
},
{
title: 'Lunch',
start: TODAY + 'T12:00:00',
className: "fc-event-info",
description: 'Lorem ipsum dolor sit amet, ut labore'
},
{
title: 'Meeting',
start: TODAY + 'T14:30:00',
className: "fc-event-warning",
description: 'Lorem ipsum conse ctetur adipi scing'
},
{
title: 'Happy Hour',
start: TODAY + 'T17:30:00',
className: "fc-event-info",
description: 'Lorem ipsum dolor sit amet, conse ctetur'
},
{
title: 'Dinner',
start: TOMORROW + 'T05:00:00',
className: "fc-event-solid-danger fc-event-light",
description: 'Lorem ipsum dolor sit ctetur adipi scing'
},
{
title: 'Birthday Party',
start: TOMORROW + 'T07:00:00',
className: "fc-event-primary",
description: 'Lorem ipsum dolor sit amet, scing'
},
{
title: 'Click for Google',
url: 'http://google.com/',
start: YM + '-28',
className: "fc-event-solid-info fc-event-light",
description: 'Lorem ipsum dolor sit amet, labore'
}
],
eventContent: function (info) {
var element = $(info.el);
if (info.event.extendedProps && info.event.extendedProps.description) {
if (element.hasClass('fc-day-grid-event')) {
element.data('content', info.event.extendedProps.description);
element.data('placement', 'top');
KTApp.initPopover(element);
} else if (element.hasClass('fc-time-grid-event')) {
element.find('.fc-title').append('<div class="fc-description">' + info.event.extendedProps.description + '</div>');
} else if (element.find('.fc-list-item-title').lenght !== 0) {
element.find('.fc-list-item-title').append('<div class="fc-description">' + info.event.extendedProps.description + '</div>');
}
}
}
});
calendar.render();
}
return {
// Public Functions
init: function () {
exampleBasic();
}
};
}();
// On document ready
KTUtil.onDOMContentLoaded(function () {
KTGeneralFullCalendarBasicDemos.init();
});
assets/js/custom/documentation/general/fullcalendar/drag-n-drop.js
+52
View File
@@ -0,0 +1,52 @@
"use strict";
// Class definition
var KTGeneralFullCalendarDragDemos = function () {
// Private functions
var exampleDrag = function () {
// Initialize the external events -- for more info please visit the official site: https://fullcalendar.io/demos
var containerEl = document.getElementById('kt_docs_fullcalendar_events_list');
new FullCalendar.Draggable(containerEl, {
itemSelector: '.fc-event',
eventData: function(eventEl) {
return {
title: eventEl.innerText.trim()
}
}
});
// initialize the calendar -- for more info please visit the official site: https://fullcalendar.io/demos
var calendarEl = document.getElementById('kt_docs_fullcalendar_drag');
var calendar = new FullCalendar.Calendar(calendarEl, {
headerToolbar: {
left: 'prev,next today',
center: 'title',
right: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek'
},
editable: true,
droppable: true, // this allows things to be dropped onto the calendar
drop: function(arg) {
// is the "remove after drop" checkbox checked?
if (document.getElementById('drop-remove').checked) {
// if so, remove the element from the "Draggable Events" list
arg.draggedEl.parentNode.removeChild(arg.draggedEl);
}
}
});
calendar.render();
}
return {
// Public Functions
init: function () {
exampleDrag();
}
};
}();
// On document ready
KTUtil.onDOMContentLoaded(function () {
KTGeneralFullCalendarDragDemos.init();
});
assets/js/custom/documentation/general/fullcalendar/locales.js
+117
View File
@@ -0,0 +1,117 @@
"use strict";
// Class definition
var KTGeneralFullCalendarLocalesDemos = function () {
// Private functions
var examplelocales = function () {
// Define variables
var initialLocaleCode = 'en';
var localeSelectorEl = document.getElementById('kt_docs_fullcalendar_locale_selector');
var calendarEl = document.getElementById('kt_docs_fullcalendar_locales');
// initialize the calendar -- for more info please visit the official site: https://fullcalendar.io/demos
var calendar = new FullCalendar.Calendar(calendarEl, {
headerToolbar: {
left: 'prev,next today',
center: 'title',
right: 'dayGridMonth,timeGridWeek,timeGridDay,listMonth'
},
initialDate: '2020-09-12',
locale: initialLocaleCode,
buttonIcons: false, // show the prev/next text
weekNumbers: true,
navLinks: true, // can click day/week names to navigate views
editable: true,
dayMaxEvents: true, // allow "more" link when too many events
events: [
{
title: 'All Day Event',
start: '2020-09-01'
},
{
title: 'Long Event',
start: '2020-09-07',
end: '2020-09-10'
},
{
groupId: 999,
title: 'Repeating Event',
start: '2020-09-09T16:00:00'
},
{
groupId: 999,
title: 'Repeating Event',
start: '2020-09-16T16:00:00'
},
{
title: 'Conference',
start: '2020-09-11',
end: '2020-09-13'
},
{
title: 'Meeting',
start: '2020-09-12T10:30:00',
end: '2020-09-12T12:30:00'
},
{
title: 'Lunch',
start: '2020-09-12T12:00:00'
},
{
title: 'Meeting',
start: '2020-09-12T14:30:00'
},
{
title: 'Happy Hour',
start: '2020-09-12T17:30:00'
},
{
title: 'Dinner',
start: '2020-09-12T20:00:00'
},
{
title: 'Birthday Party',
start: '2020-09-13T07:00:00'
},
{
title: 'Click for Google',
url: 'http://google.com/',
start: '2020-09-28'
}
]
});
calendar.render();
// build the locale selector's options
calendar.getAvailableLocaleCodes().forEach(function (localeCode) {
var optionEl = document.createElement('option');
optionEl.value = localeCode;
optionEl.selected = localeCode == initialLocaleCode;
optionEl.innerText = localeCode;
localeSelectorEl.appendChild(optionEl);
});
// when the selected option changes, dynamically change the calendar option -- more info on Select2 on Change event: https://select2.org/programmatic-control/events
$(localeSelectorEl).on('change', function () {
if (this.value) {
calendar.setOption('locale', this.value);
}
});
calendar.render();
}
return {
// Public Functions
init: function () {
examplelocales();
}
};
}();
// On document ready
KTUtil.onDOMContentLoaded(function () {
KTGeneralFullCalendarLocalesDemos.init();
});
assets/js/custom/documentation/general/fullcalendar/selectable-dates.js
+164
View File
@@ -0,0 +1,164 @@
"use strict";
// Class definition
var KTGeneralFullCalendarSelectDemos = function () {
// Private functions
var exampleSelect = function () {
// Define variables
var calendarEl = document.getElementById('kt_docs_fullcalendar_selectable');
var calendar = new FullCalendar.Calendar(calendarEl, {
headerToolbar: {
left: 'prev,next today',
center: 'title',
right: 'dayGridMonth,timeGridWeek,timeGridDay'
},
initialDate: '2020-09-12',
navLinks: true, // can click day/week names to navigate views
selectable: true,
selectMirror: true,
// Create new event
select: function (arg) {
Swal.fire({
html: '<div class="mb-7">Create new event?</div><div class="fw-bolder mb-5">Event Name:</div><input type="text" class="form-control" name="event_name" />',
icon: "info",
showCancelButton: true,
buttonsStyling: false,
confirmButtonText: "Yes, create it!",
cancelButtonText: "No, return",
customClass: {
confirmButton: "btn btn-primary",
cancelButton: "btn btn-active-light"
}
}).then(function (result) {
if (result.value) {
var title = document.querySelector('input[name="event_name"]').value;
if (title) {
calendar.addEvent({
title: title,
start: arg.start,
end: arg.end,
allDay: arg.allDay
})
}
calendar.unselect()
} else if (result.dismiss === 'cancel') {
Swal.fire({
text: "Event creation was declined!.",
icon: "error",
buttonsStyling: false,
confirmButtonText: "Ok, got it!",
customClass: {
confirmButton: "btn btn-primary",
}
});
}
});
},
// Delete event
eventClick: function (arg) {
Swal.fire({
text: 'Are you sure you want to delete this event?',
icon: "warning",
showCancelButton: true,
buttonsStyling: false,
confirmButtonText: "Yes, delete it!",
cancelButtonText: "No, return",
customClass: {
confirmButton: "btn btn-primary",
cancelButton: "btn btn-active-light"
}
}).then(function (result) {
if (result.value) {
arg.event.remove()
} else if (result.dismiss === 'cancel') {
Swal.fire({
text: "Event was not deleted!.",
icon: "error",
buttonsStyling: false,
confirmButtonText: "Ok, got it!",
customClass: {
confirmButton: "btn btn-primary",
}
});
}
});
},
editable: true,
dayMaxEvents: true, // allow "more" link when too many events
events: [
{
title: 'All Day Event',
start: '2020-09-01'
},
{
title: 'Long Event',
start: '2020-09-07',
end: '2020-09-10'
},
{
groupId: 999,
title: 'Repeating Event',
start: '2020-09-09T16:00:00'
},
{
groupId: 999,
title: 'Repeating Event',
start: '2020-09-16T16:00:00'
},
{
title: 'Conference',
start: '2020-09-11',
end: '2020-09-13'
},
{
title: 'Meeting',
start: '2020-09-12T10:30:00',
end: '2020-09-12T12:30:00'
},
{
title: 'Lunch',
start: '2020-09-12T12:00:00'
},
{
title: 'Meeting',
start: '2020-09-12T14:30:00'
},
{
title: 'Happy Hour',
start: '2020-09-12T17:30:00'
},
{
title: 'Dinner',
start: '2020-09-12T20:00:00'
},
{
title: 'Birthday Party',
start: '2020-09-13T07:00:00'
},
{
title: 'Click for Google',
url: 'http://google.com/',
start: '2020-09-28'
}
]
});
calendar.render();
}
return {
// Public Functions
init: function () {
exampleSelect();
}
};
}();
// On document ready
KTUtil.onDOMContentLoaded(function () {
KTGeneralFullCalendarSelectDemos.init();
});
assets/js/custom/documentation/general/fullcalendar/timezone.js
+191
View File
@@ -0,0 +1,191 @@
"use strict";
// Class definition
var KTGeneralFullCalendarTimezoneDemos = function () {
// Private functions
var exampleTimezone = function () {
// Define variables
var initialTimeZone = 'local';
var timeZoneSelectorEl = document.getElementById('kt_docs_fullcalendar_timezone_selector');
var calendarEl = document.getElementById('kt_docs_fullcalendar_timezone');
var todayDate = moment().startOf('day');
var YM = todayDate.format('YYYY-MM');
var YESTERDAY = todayDate.clone().subtract(1, 'day').format('YYYY-MM-DD');
var TODAY = todayDate.format('YYYY-MM-DD');
var TOMORROW = todayDate.clone().add(1, 'day').format('YYYY-MM-DD');
var eventsArray = [
{
title: 'All Day Event',
start: YM + '-01',
description: 'Toto lorem ipsum dolor sit incid idunt ut',
className: "fc-event-danger fc-event-solid-warning"
},
{
title: 'Reporting',
start: YM + '-14T13:30:00',
description: 'Lorem ipsum dolor incid idunt ut labore',
end: YM + '-14',
className: "fc-event-success"
},
{
title: 'Company Trip',
start: YM + '-02',
description: 'Lorem ipsum dolor sit tempor incid',
end: YM + '-03',
className: "fc-event-primary"
},
{
title: 'ICT Expo 2017 - Product Release',
start: YM + '-03',
description: 'Lorem ipsum dolor sit tempor inci',
end: YM + '-05',
className: "fc-event-light fc-event-solid-primary"
},
{
title: 'Dinner',
start: YM + '-12',
description: 'Lorem ipsum dolor sit amet, conse ctetur',
end: YM + '-10'
},
{
id: 999,
title: 'Repeating Event',
start: YM + '-09T16:00:00',
description: 'Lorem ipsum dolor sit ncididunt ut labore',
className: "fc-event-danger"
},
{
id: 1000,
title: 'Repeating Event',
description: 'Lorem ipsum dolor sit amet, labore',
start: YM + '-16T16:00:00'
},
{
title: 'Conference',
start: YESTERDAY,
end: TOMORROW,
description: 'Lorem ipsum dolor eius mod tempor labore',
className: "fc-event-primary"
},
{
title: 'Meeting',
start: TODAY + 'T10:30:00',
end: TODAY + 'T12:30:00',
description: 'Lorem ipsum dolor eiu idunt ut labore'
},
{
title: 'Lunch',
start: TODAY + 'T12:00:00',
className: "fc-event-info",
description: 'Lorem ipsum dolor sit amet, ut labore'
},
{
title: 'Meeting',
start: TODAY + 'T14:30:00',
className: "fc-event-warning",
description: 'Lorem ipsum conse ctetur adipi scing'
},
{
title: 'Happy Hour',
start: TODAY + 'T17:30:00',
className: "fc-event-info",
description: 'Lorem ipsum dolor sit amet, conse ctetur'
},
{
title: 'Dinner',
start: TOMORROW + 'T05:00:00',
className: "fc-event-solid-danger fc-event-light",
description: 'Lorem ipsum dolor sit ctetur adipi scing'
},
{
title: 'Birthday Party',
start: TOMORROW + 'T07:00:00',
className: "fc-event-primary",
description: 'Lorem ipsum dolor sit amet, scing'
},
{
title: 'Click for Google',
url: 'http://google.com/',
start: YM + '-28',
className: "fc-event-solid-info fc-event-light",
description: 'Lorem ipsum dolor sit amet, labore'
}
];
// Initialize the external events -- for more info please visit the official site: https://fullcalendar.io/demos
var calendar = new FullCalendar.Calendar(calendarEl, {
timeZone: initialTimeZone,
headerToolbar: {
left: 'prev,next today',
center: 'title',
right: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek'
},
initialDate: TODAY,
navLinks: true, // can click day/week names to navigate views
editable: true,
selectable: true,
dayMaxEvents: true, // allow "more" link when too many events
eventTimeFormat: { hour: 'numeric', minute: '2-digit', timeZoneName: 'short' },
events: eventsArray,
});
calendar.render();
// when the timezone selector changes, dynamically change the calendar option -- more info on Select2 on Change event: https://select2.org/programmatic-control/events
$(timeZoneSelectorEl).on('change', function () {
calendar.setOption('timeZone', 'UTC');
// Remove all events
const removeEvents = calendar.getEvents();
removeEvents.forEach(event => {
event.remove();
});
// Add events with new timezone offset
const newEvents = eventsArray;
newEvents.forEach(event => {
var start;
var end;
if(this.value < 0){
start = moment(event.start).subtract(this.value.replace(/\D/g,''), 'seconds').format(getFormat(event.start));
end = event.end ? moment(event.end).subtract(this.value.replace(/\D/g,''), 'seconds').format(getFormat(event.end)) : start;
} else {
start = moment(event.start).add(this.value, 'seconds').format(getFormat(event.start));
end = event.end ? moment(event.end).add(this.value, 'seconds').format(getFormat(event.end)) : start;
}
calendar.addEvent({
title: event.title,
start: start,
end: end
});
});
calendar.render();
});
// Dynamic date format generator
const getFormat = (d) => {
if(d.includes('T')){
return 'YYYY-MM-DDTHH:mm:ss';
} else {
return 'YYYY-MM-DD';
}
}
}
return {
// Public Functions
init: function () {
exampleTimezone();
}
};
}();
// On document ready
KTUtil.onDOMContentLoaded(function () {
KTGeneralFullCalendarTimezoneDemos.init();
});
assets/js/custom/documentation/general/jkanban/basic.js
+57
View File
@@ -0,0 +1,57 @@
"use strict";
// Class definition
var KTJKanbanDemoBasic = function() {
// Private functions
var exampleBasic = function() {
var kanban = new jKanban({
element: '#kt_docs_jkanban_basic',
gutter: '0',
widthBoard: '250px',
boards: [{
'id': '_inprocess',
'title': 'In Process',
'item': [{
'title': '<span class="fw-bold">You can drag me too</span>'
},
{
'title': '<span class="fw-bold">Buy Milk</span>'
}
]
}, {
'id': '_working',
'title': 'Working',
'item': [{
'title': '<span class="fw-bold">Do Something!</span>'
},
{
'title': '<span class="fw-bold">Run?</span>'
}
]
}, {
'id': '_done',
'title': 'Done',
'item': [{
'title': '<span class="fw-bold">All right</span>'
},
{
'title': '<span class="fw-bold">Ok!</span>'
}
]
}
]
});
}
return {
// Public Functions
init: function() {
exampleBasic();
}
};
}();
// On document ready
KTUtil.onDOMContentLoaded(function() {
KTJKanbanDemoBasic.init();
});
assets/js/custom/documentation/general/jkanban/color.js
+66
View File
@@ -0,0 +1,66 @@
"use strict";
// Class definition
var KTJKanbanDemoColor = function() {
// Private functions
var exampleColor = function() {
var kanban = new jKanban({
element: '#kt_docs_jkanban_color',
gutter: '0',
widthBoard: '250px',
boards: [{
'id': '_inprocess',
'title': 'In Process',
'class': 'primary',
'item': [{
'title': '<span class="fw-bold">You can drag me too</span>',
'class': 'light-primary',
},
{
'title': '<span class="fw-bold">Buy Milk</span>',
'class': 'light-primary',
}
]
}, {
'id': '_working',
'title': 'Working',
'class': 'success',
'item': [{
'title': '<span class="fw-bold">Do Something!</span>',
'class': 'light-success',
},
{
'title': '<span class="fw-bold">Run?</span>',
'class': 'light-success',
}
]
}, {
'id': '_done',
'title': 'Done',
'class': 'danger',
'item': [{
'title': '<span class="fw-bold">All right</span>',
'class': 'light-danger',
},
{
'title': '<span class="fw-bold">Ok!</span>',
'class': 'light-danger',
}
]
}
]
});
}
return {
// Public Functions
init: function() {
exampleColor();
}
};
}();
// On document ready
KTUtil.onDOMContentLoaded(function() {
KTJKanbanDemoColor.init();
});
assets/js/custom/documentation/general/jkanban/restricted.js
+87
View File
@@ -0,0 +1,87 @@
"use strict";
// Class definition
var KTJKanbanDemoRestricted = function() {
// Private functions
var exampleRestricted = function() {
var kanban = new jKanban({
element: '#kt_docs_jkanban_restricted',
gutter: '0',
widthBoard: '250px',
click: function(el) {
alert(el.innerHTML);
},
boards: [{
'id': '_todo',
'title': 'To Do',
'class': 'light-primary',
'dragTo': ['_working'],
'item': [{
'title': 'My Task Test',
'class': 'primary'
},
{
'title': 'Buy Milk',
'class': 'primary'
}
]
},
{
'id': '_working',
'title': 'Working',
'class': 'light-warning',
'item': [{
'title': 'Do Something!',
'class': 'warning'
},
{
'title': 'Run?',
'class': 'warning'
}
]
},
{
'id': '_done',
'title': 'Done',
'class': 'light-success',
'dragTo': ['_working'],
'item': [{
'title': 'All right',
'class': 'success'
},
{
'title': 'Ok!',
'class': 'success'
}
]
},
{
'id': '_notes',
'title': 'Notes',
'class': 'light-danger',
'item': [{
'title': 'Warning Task',
'class': 'danger'
},
{
'title': 'Do not enter',
'class': 'danger'
}
]
}
]
});
}
return {
// Public Functions
init: function() {
exampleRestricted();
}
};
}();
// On document ready
KTUtil.onDOMContentLoaded(function() {
KTJKanbanDemoRestricted.init();
});
assets/js/custom/documentation/general/jkanban/rich.js
+247
View File
@@ -0,0 +1,247 @@
"use strict";
// Class definition
var KTJKanbanDemoRich = function() {
// Private functions
var exampleRich = function() {
var kanban = new jKanban({
element: '#kt_docs_jkanban_rich',
gutter: '0',
click: function(el) {
alert(el.innerHTML);
},
boards: [{
'id': '_backlog',
'title': 'Backlog',
'class': 'light-dark',
'item': [{
'title': `
<div class="d-flex align-items-center">
<div class="symbol symbol-success me-3">
<img alt="Pic" src="${hostUrl}media/avatars/150-1.jpg" />
</div>
<div class="d-flex flex-column align-items-start">
<span class="text-dark-50 fw-bold mb-1">SEO Optimization</span>
<span class="badge badge-light-success">In progress</span>
</div>
</div>
`,
},
{
'title': `
<div class="d-flex align-items-center">
<div class="symbol symbol-success me-3">
<span class="symbol-label fs-4">A.D</span>
</div>
<div class="d-flex flex-column align-items-start">
<span class="text-dark-50 fw-bold mb-1">Finance</span>
<span class="badge badge-light-danger">Pending</span>
</div>
</div>
`,
}
]
},
{
'id': '_todo',
'title': 'To Do',
'class': 'light-danger',
'item': [{
'title': `
<div class="d-flex align-items-center">
<div class="symbol symbol-success me-3">
<img alt="Pic" src="${hostUrl}media/avatars/150-2.jpg" />
</div>
<div class="d-flex flex-column align-items-start">
<span class="text-dark-50 fw-bold mb-1">Server Setup</span>
<span class="badge badge-light-info">Completed</span>
</div>
</div>
`,
},
{
'title': `
<div class="d-flex align-items-center">
<div class="symbol symbol-success me-3">
<img alt="Pic" src="${hostUrl}media/avatars/150-3.jpg" />
</div>
<div class="d-flex flex-column align-items-start">
<span class="text-dark-50 fw-bold mb-1">Report Generation</span>
<span class="badge badge-light-warning">Due</span>
</div>
</div>
`,
}
]
},
{
'id': '_working',
'title': 'Working',
'class': 'light-primary',
'item': [{
'title': `
<div class="d-flex align-items-center">
<div class="symbol symbol-success me-3">
<img alt="Pic" src="${hostUrl}media/avatars/150-1.jpg" />
</div>
<div class="d-flex flex-column align-items-start">
<span class="text-dark-50 fw-bold mb-1">Marketing</span>
<span class="badge badge-light-danger">Planning</span>
</div>
</div>
`,
},
{
'title': `
<div class="d-flex align-items-center">
<div class="symbol symbol-light-info me-3">
<span class="symbol-label fs-4">A.P</span>
</div>
<div class="d-flex flex-column align-items-start">
<span class="text-dark-50 fw-bold mb-1">Finance</span>
<span class="badge badge-light-primary">Done</span>
</div>
</div>
`,
}
]
},
{
'id': '_done',
'title': 'Done',
'class': 'light-success',
'item': [{
'title': `
<div class="d-flex align-items-center">
<div class="symbol symbol-success me-3">
<img alt="Pic" src="${hostUrl}media/avatars/150-4.jpg" />
</div>
<div class="d-flex flex-column align-items-start">
<span class="text-dark-50 fw-bold mb-1">SEO Optimization</span>
<span class="badge badge-light-success">In progress</span>
</div>
</div>
`,
},
{
'title': `
<div class="d-flex align-items-center">
<div class="symbol symbol-success me-3">
<img alt="Pic" src="${hostUrl}media/avatars/150-5.jpg" />
</div>
<div class="d-flex flex-column align-items-start">
<span class="text-dark-50 fw-bold mb-1">Product Team</span>
<span class="badge badge-light-danger">In progress</span>
</div>
</div>
`,
}
]
},
{
'id': '_deploy',
'title': 'Deploy',
'class': 'light-primary',
'item': [{
'title': `
<div class="d-flex align-items-center">
<div class="symbol symbol-light-warning me-3">
<span class="symbol-label fs-4">D.L</span>
</div>
<div class="d-flex flex-column align-items-start">
<span class="text-dark-50 fw-bold mb-1">SEO Optimization</span>
<span class="badge badge-light-success">In progress</span>
</div>
</div>
`,
},
{
'title': `
<div class="d-flex align-items-center">
<div class="symbol symbol-light-danger me-3">
<span class="symbol-label fs-4">E.K</span>
</div>
<div class="d-flex flex-column align-items-start">
<span class="text-dark-50 fw-bold mb-1">Requirement Study</span>
<span class="badge badge-light-warning">Scheduled</span>
</div>
</div>
`,
}
]
}
]
});
var toDoButton = document.getElementById('addToDo');
toDoButton.addEventListener('click', function() {
kanban.addElement(
'_todo', {
'title': `
<div class="d-flex align-items-center">
<div class="symbol symbol-light-primary me-3">
<img alt="Pic" src="${hostUrl}media/avatars/150-6.jpg" />
</div>
<div class="d-flex flex-column align-items-start">
<span class="text-dark-50 fw-bold mb-1">Requirement Study</span>
<span class="badge badge-light-success">Scheduled</span>
</div>
</div>
`
}
);
});
var addBoardDefault = document.getElementById('addDefault');
addBoardDefault.addEventListener('click', function() {
kanban.addBoards(
[{
'id': '_default',
'title': 'New Board',
'class': 'light-primary',
'item': [{
'title': `
<div class="d-flex align-items-center">
<div class="symbol symbol-success me-3">
<img alt="Pic" src="${hostUrl}media/avatars/150-7.jpg" />
</div>
<div class="d-flex flex-column align-items-start">
<span class="text-dark-50 fw-bold mb-1">Payment Modules</span>
<span class="badge badge-light-primary">In development</span>
</div>
</div>
`},{
'title': `
<div class="d-flex align-items-center">
<div class="symbol symbol-success me-3">
<img alt="Pic" src="${hostUrl}media/avatars/150-8.jpg" />
</div>
<div class="d-flex flex-column align-items-start">
<span class="text-dark-50 fw-bold mb-1">New Project</span>
<span class="badge badge-light-danger">Pending</span>
</div>
</div>
`}
]
}]
)
});
var removeBoard = document.getElementById('removeBoard');
removeBoard.addEventListener('click', function() {
kanban.removeBoard('_done');
});
}
return {
// Public Functions
init: function() {
exampleRich();
}
};
}();
// On document ready
KTUtil.onDOMContentLoaded(function() {
KTJKanbanDemoRich.init();
});
assets/js/custom/documentation/general/jstree/ajax.js
+51
View File
@@ -0,0 +1,51 @@
"use strict";
// Class definition
var KTJSTreeAjax = function() {
// Private functions
var exampleAjax = function() {
$("#kt_docs_jstree_ajax").jstree({
"core": {
"themes": {
"responsive": false
},
// so that create works
"check_callback": true,
'data': {
'url': function(node) {
return 'https://preview.keenthemes.com/api/jstree/ajax_data.php'; // Demo API endpoint -- Replace this URL with your set endpoint
},
'data': function(node) {
return {
'parent': node.id
};
}
}
},
"types": {
"default": {
"icon": "fa fa-folder text-primary"
},
"file": {
"icon": "fa fa-file text-primary"
}
},
"state": {
"key": "demo3"
},
"plugins": ["dnd", "state", "types"]
});
}
return {
// Public Functions
init: function() {
exampleAjax();
}
};
}();
// On document ready
KTUtil.onDOMContentLoaded(function() {
KTJSTreeAjax.init();
});
assets/js/custom/documentation/general/jstree/basic.js
+36
View File
@@ -0,0 +1,36 @@
"use strict";
// Class definition
var KTJSTreeBasic = function() {
// Private functions
var exampleBasic = function() {
$('#kt_docs_jstree_basic').jstree({
"core" : {
"themes" : {
"responsive": false
}
},
"types" : {
"default" : {
"icon" : "fa fa-folder"
},
"file" : {
"icon" : "fa fa-file"
}
},
"plugins": ["types"]
});
}
return {
// Public Functions
init: function() {
exampleBasic();
}
};
}();
// On document ready
KTUtil.onDOMContentLoaded(function() {
KTJSTreeBasic.init();
});
assets/js/custom/documentation/general/jstree/checkable.js
+66
View File
@@ -0,0 +1,66 @@
"use strict";
// Class definition
var KTJSTreeCheckable = function() {
// Private functions
var exampleCheckable = function() {
$('#kt_docs_jstree_checkable').jstree({
'plugins': ["wholerow", "checkbox", "types"],
'core': {
"themes" : {
"responsive": false
},
'data': [{
"text": "Same but with checkboxes",
"children": [{
"text": "initially selected",
"state": {
"selected": true
}
}, {
"text": "custom icon",
"icon": "fa fa-warning text-danger"
}, {
"text": "initially open",
"icon" : "fa fa-folder text-default",
"state": {
"opened": true
},
"children": ["Another node"]
}, {
"text": "custom icon",
"icon": "fa fa-warning text-waring"
}, {
"text": "disabled node",
"icon": "fa fa-check text-success",
"state": {
"disabled": true
}
}]
},
"And wholerow selection"
]
},
"types" : {
"default" : {
"icon" : "fa fa-folder text-warning"
},
"file" : {
"icon" : "fa fa-file text-warning"
}
},
});
}
return {
// Public Functions
init: function() {
exampleCheckable();
}
};
}();
// On document ready
KTUtil.onDOMContentLoaded(function() {
KTJSTreeCheckable.init();
});
assets/js/custom/documentation/general/jstree/contextual.js
+81
View File
@@ -0,0 +1,81 @@
"use strict";
// Class definition
var KTJSTreeContextual = function() {
// Private functions
var exampleContextual = function() {
$("#kt_docs_jstree_contextual").jstree({
"core" : {
"themes" : {
"responsive": false
},
// so that create works
"check_callback" : true,
'data': [{
"text": "Parent Node",
"children": [{
"text": "Initially selected",
"state": {
"selected": true
}
}, {
"text": "Custom Icon",
"icon": "flaticon2-hourglass-1 text-danger"
}, {
"text": "Initially open",
"icon" : "fa fa-folder text-success",
"state": {
"opened": true
},
"children": [
{"text": "Another node", "icon" : "fa fa-file text-waring"}
]
}, {
"text": "Another Custom Icon",
"icon": "flaticon2-drop text-waring"
}, {
"text": "Disabled Node",
"icon": "fa fa-check text-success",
"state": {
"disabled": true
}
}, {
"text": "Sub Nodes",
"icon": "fa fa-folder text-danger",
"children": [
{"text": "Item 1", "icon" : "fa fa-file text-waring"},
{"text": "Item 2", "icon" : "fa fa-file text-success"},
{"text": "Item 3", "icon" : "fa fa-file text-default"},
{"text": "Item 4", "icon" : "fa fa-file text-danger"},
{"text": "Item 5", "icon" : "fa fa-file text-info"}
]
}]
},
"Another Node"
]
},
"types" : {
"default" : {
"icon" : "fa fa-folder text-primary"
},
"file" : {
"icon" : "fa fa-file text-primary"
}
},
"state" : { "key" : "demo2" },
"plugins" : [ "contextmenu", "state", "types" ]
});
}
return {
// Public Functions
init: function() {
exampleContextual();
}
};
}();
// On document ready
KTUtil.onDOMContentLoaded(function() {
KTJSTreeContextual.init();
});
assets/js/custom/documentation/general/jstree/customicons.js
+48
View File
@@ -0,0 +1,48 @@
"use strict";
// Class definition
var KTJSTreeCustomIcons = function() {
// Private functions
var exampleCustomIcons = function() {
$('#kt_docs_jstree_customicons').jstree({
"core" : {
"themes" : {
"responsive": false
}
},
"types" : {
"default" : {
"icon" : "fa fa-folder text-warning"
},
"file" : {
"icon" : "fa fa-file text-warning"
}
},
"plugins": ["types"]
});
// handle link clicks in tree nodes(support target="_blank" as well)
$('#kt_docs_jstree_customicons').on('select_node.jstree', function(e,data) {
var link = $('#' + data.selected).find('a');
if (link.attr("href") != "#" && link.attr("href") != "javascript:;" && link.attr("href") != "") {
if (link.attr("target") == "_blank") {
link.attr("href").target = "_blank";
}
document.location.href = link.attr("href");
return false;
}
});
}
return {
// Public Functions
init: function() {
exampleCustomIcons();
}
};
}();
// On document ready
KTUtil.onDOMContentLoaded(function() {
KTJSTreeCustomIcons.init();
});
assets/js/custom/documentation/general/jstree/dragdrop.js
Vendored
+81
View File
@@ -0,0 +1,81 @@
"use strict";
// Class definition
var KTJSTreeDragDrop = function() {
// Private functions
var exampleDragDrop = function() {
$("#kt_docs_jstree_dragdrop").jstree({
"core" : {
"themes" : {
"responsive": false
},
// so that create works
"check_callback" : true,
'data': [{
"text": "Parent Node",
"children": [{
"text": "Initially selected",
"state": {
"selected": true
}
}, {
"text": "Custom Icon",
"icon": "flaticon2-warning text-danger"
}, {
"text": "Initially open",
"icon" : "fa fa-folder text-success",
"state": {
"opened": true
},
"children": [
{"text": "Another node", "icon" : "fa fa-file text-waring"}
]
}, {
"text": "Another Custom Icon",
"icon": "flaticon2-bell-5 text-waring"
}, {
"text": "Disabled Node",
"icon": "fa fa-check text-success",
"state": {
"disabled": true
}
}, {
"text": "Sub Nodes",
"icon": "fa fa-folder text-danger",
"children": [
{"text": "Item 1", "icon" : "fa fa-file text-waring"},
{"text": "Item 2", "icon" : "fa fa-file text-success"},
{"text": "Item 3", "icon" : "fa fa-file text-default"},
{"text": "Item 4", "icon" : "fa fa-file text-danger"},
{"text": "Item 5", "icon" : "fa fa-file text-info"}
]
}]
},
"Another Node"
]
},
"types" : {
"default" : {
"icon" : "fa fa-folder text-success"
},
"file" : {
"icon" : "fa fa-file text-success"
}
},
"state" : { "key" : "demo2" },
"plugins" : [ "dnd", "state", "types" ]
});
}
return {
// Public Functions
init: function() {
exampleDragDrop();
}
};
}();
// On document ready
KTUtil.onDOMContentLoaded(function() {
KTJSTreeDragDrop.init();
});
assets/js/custom/documentation/general/scroll.js
+21
View File
@@ -0,0 +1,21 @@
"use strict";
// Class definition
var KTGeneralScrollDemos = function() {
// Private functions
var _exampleBasic = function() {
}
return {
// Public Functions
init: function() {
_exampleBasic();
}
};
}();
// On document ready
KTUtil.onDOMContentLoaded(function() {
KTGeneralScrollDemos.init();
});
assets/js/custom/documentation/general/search/basic.js
+84
View File
@@ -0,0 +1,84 @@
"use strict";
// Class definition
var KTGeneralSearchBasicDemos = function() {
// Private variables
var element;
var suggestionsElement;
var resultsElement;
var wrapperElement;
var emptyElement;
var searchObject;
var modal;
// Private functions
var processs = function(search) {
var timeout = setTimeout(function() {
var number = KTUtil.getRandomInt(1, 6);
// Hide recently viewed
suggestionsElement.classList.add('d-none');
if (number === 3) {
// Hide results
resultsElement.classList.add('d-none');
// Show empty message
emptyElement.classList.remove('d-none');
} else {
// Show results
resultsElement.classList.remove('d-none');
// Hide empty message
emptyElement.classList.add('d-none');
}
// Complete search
search.complete();
}, 1500);
}
var clear = function(search) {
// Show recently viewed
suggestionsElement.classList.remove('d-none');
// Hide results
resultsElement.classList.add('d-none');
// Hide empty message
emptyElement.classList.add('d-none');
}
// Public methods
return {
init: function() {
// Elements
element = document.querySelector('#kt_docs_search_handler_basic');
if (!element) {
return;
}
wrapperElement = element.querySelector('[data-kt-search-element="wrapper"]');
suggestionsElement = element.querySelector('[data-kt-search-element="suggestions"]');
resultsElement = element.querySelector('[data-kt-search-element="results"]');
emptyElement = element.querySelector('[data-kt-search-element="empty"]');
// Initialize search handler
searchObject = new KTSearch(element);
// Search handler
searchObject.on('kt.search.process', processs);
// Clear handler
searchObject.on('kt.search.clear', clear);
// Handle select
KTUtil.on(element, '[data-kt-search-element="customer"]', 'click', function() {
//modal.hide();
});
}
};
}();
// On document ready
KTUtil.onDOMContentLoaded(function () {
KTGeneralSearchBasicDemos.init();
});
assets/js/custom/documentation/general/search/menu.js
+135
View File
@@ -0,0 +1,135 @@
"use strict";
// Class definition
var KTGeneralSearchMenuDemos = function() {
// Private variables
var element;
var formElement;
var mainElement;
var resultsElement;
var wrapperElement;
var emptyElement;
var preferencesElement;
var preferencesShowElement;
var preferencesDismissElement;
var advancedOptionsFormElement;
var advancedOptionsFormShowElement;
var advancedOptionsFormCancelElement;
var advancedOptionsFormSearchElement;
var searchObject;
// Private functions
var processs = function(search) {
var timeout = setTimeout(function() {
var number = KTUtil.getRandomInt(1, 3);
// Hide recently viewed
mainElement.classList.add('d-none');
if (number === 3) {
// Hide results
resultsElement.classList.add('d-none');
// Show empty message
emptyElement.classList.remove('d-none');
} else {
// Show results
resultsElement.classList.remove('d-none');
// Hide empty message
emptyElement.classList.add('d-none');
}
// Complete search
search.complete();
}, 1500);
}
var clear = function(search) {
// Show recently viewed
mainElement.classList.remove('d-none');
// Hide results
resultsElement.classList.add('d-none');
// Hide empty message
emptyElement.classList.add('d-none');
}
var handlePreferences = function() {
// Preference show handler
preferencesShowElement.addEventListener('click', function() {
wrapperElement.classList.add('d-none');
preferencesElement.classList.remove('d-none');
});
// Preference dismiss handler
preferencesDismissElement.addEventListener('click', function() {
wrapperElement.classList.remove('d-none');
preferencesElement.classList.add('d-none');
});
}
var handleAdvancedOptionsForm = function() {
// Show
advancedOptionsFormShowElement.addEventListener('click', function() {
wrapperElement.classList.add('d-none');
advancedOptionsFormElement.classList.remove('d-none');
});
// Cancel
advancedOptionsFormCancelElement.addEventListener('click', function() {
wrapperElement.classList.remove('d-none');
advancedOptionsFormElement.classList.add('d-none');
});
// Search
advancedOptionsFormSearchElement.addEventListener('click', function() {
});
}
// Public methods
return {
init: function() {
// Elements
element = document.querySelector('#kt_docs_search_handler_menu');
if (!element) {
return;
}
wrapperElement = element.querySelector('[data-kt-search-element="wrapper"]');
formElement = element.querySelector('[data-kt-search-element="form"]');
mainElement = element.querySelector('[data-kt-search-element="main"]');
resultsElement = element.querySelector('[data-kt-search-element="results"]');
emptyElement = element.querySelector('[data-kt-search-element="empty"]');
preferencesElement = element.querySelector('[data-kt-search-element="preferences"]');
preferencesShowElement = element.querySelector('[data-kt-search-element="preferences-show"]');
preferencesDismissElement = element.querySelector('[data-kt-search-element="preferences-dismiss"]');
advancedOptionsFormElement = element.querySelector('[data-kt-search-element="advanced-options-form"]');
advancedOptionsFormShowElement = element.querySelector('[data-kt-search-element="advanced-options-form-show"]');
advancedOptionsFormCancelElement = element.querySelector('[data-kt-search-element="advanced-options-form-cancel"]');
advancedOptionsFormSearchElement = element.querySelector('[data-kt-search-element="advanced-options-form-search"]');
// Initialize search handler
searchObject = new KTSearch(element);
// Search handler
searchObject.on('kt.search.process', processs);
// Clear handler
searchObject.on('kt.search.clear', clear);
// Custom handlers
handlePreferences();
handleAdvancedOptionsForm();
}
};
}();
// On document ready
KTUtil.onDOMContentLoaded(function() {
KTGeneralSearchMenuDemos.init();
});
assets/js/custom/documentation/general/search/responsive.js
+100
View File
@@ -0,0 +1,100 @@
"use strict";
// Class definition
var KTGeneralSearchResponsiveDemos = function() {
// Private variables
var element;
var recentlyViewedElement;
var resultsElement;
var wrapperElement;
var emptyElement;
var preferencesElement;
var preferencesShowElement;
var preferencesDismissElement;
var searchObject;
// Private functions
var processs = function(search) {
var timeout = setTimeout(function() {
var number = KTUtil.getRandomInt(1, 3);
// Hide recently viewed
recentlyViewedElement.classList.add('d-none');
if (number === 3) {
// Hide results
resultsElement.classList.add('d-none');
// Show empty message
emptyElement.classList.remove('d-none');
} else {
// Show results
resultsElement.classList.remove('d-none');
// Hide empty message
emptyElement.classList.add('d-none');
}
// Complete search
search.complete();
}, 1500);
}
var clear = function(search) {
// Show recently viewed
recentlyViewedElement.classList.remove('d-none');
// Hide results
resultsElement.classList.add('d-none');
// Hide empty message
emptyElement.classList.add('d-none');
}
// Public methods
return {
init: function() {
// Elements
element = document.querySelector('#kt_docs_search_handler_responsive');
if (!element) {
return;
}
wrapperElement = element.querySelector('[data-kt-search-element="wrapper"]');
recentlyViewedElement = element.querySelector('[data-kt-search-element="recently-viewed"]');
resultsElement = element.querySelector('[data-kt-search-element="results"]');
emptyElement = element.querySelector('[data-kt-search-element="empty"]');
preferencesElement = element.querySelector('[data-kt-search-element="preferences"]');
preferencesShowElement = element.querySelector('[data-kt-search-element="preferences-show"]');
preferencesDismissElement = element.querySelector('[data-kt-search-element="preferences-dismiss"]');
// Initialize search handler
searchObject = new KTSearch(element);
// Search handler
searchObject.on('kt.search.process', processs);
// Clear handler
searchObject.on('kt.search.clear', clear);
// Preference show handler
preferencesShowElement.addEventListener('click', function() {
wrapperElement.classList.add('d-none');
preferencesElement.classList.remove('d-none');
});
// Preference dismiss handler
preferencesDismissElement.addEventListener('click', function() {
wrapperElement.classList.remove('d-none');
preferencesElement.classList.add('d-none');
});
}
};
}();
// On document ready
KTUtil.onDOMContentLoaded(function() {
KTGeneralSearchResponsiveDemos.init();
});
// Webpack support
if (typeof module !== 'undefined' && typeof module.exports !== 'undefined') {
module.exports = KTGeneralSearchResponsiveDemos;
}
assets/js/custom/documentation/general/stepper.js
+68
View File
@@ -0,0 +1,68 @@
"use strict";
// Class definition
var KTGeneralStepperDemos = function() {
// Private functions
var _exampleBasic = function() {
// Stepper lement
var element = document.querySelector("#kt_stepper_example_basic");
// Initialize Stepper
var stepper = new KTStepper(element);
// Handle next step
stepper.on("kt.stepper.next", function (stepper) {
stepper.goNext(); // go next step
});
// Handle previous step
stepper.on("kt.stepper.previous", function (stepper) {
stepper.goPrevious(); // go previous step
});
}
var _exampleVertical = function() {
// Stepper lement
var element = document.querySelector("#kt_stepper_example_vertical");
// Initialize Stepper
var stepper = new KTStepper(element);
// Handle next step
stepper.on("kt.stepper.next", function (stepper) {
stepper.goNext(); // go next step
});
// Handle previous step
stepper.on("kt.stepper.previous", function (stepper) {
stepper.goPrevious(); // go previous step
});
}
var _exampleClickable = function() {
// Stepper lement
var element = document.querySelector("#kt_stepper_example_clickable");
// Initialize Stepper
var stepper = new KTStepper(element);
// Handle navigation click
stepper.on("kt.stepper.click", function (stepper) {
stepper.goTo(stepper.getClickedStepIndex()); // go to clicked step
});
}
return {
// Public Functions
init: function() {
_exampleBasic();
_exampleVertical();
_exampleClickable();
}
};
}();
// On document ready
KTUtil.onDOMContentLoaded(function() {
KTGeneralStepperDemos.init();
});
assets/js/custom/documentation/general/sweetalert.js
+138
View File
@@ -0,0 +1,138 @@
"use strict";
// Class definition
var KTGeneralSweetAlertDemos = function() {
// Private functions
const exampleBasic = function() {
const button = document.getElementById('kt_docs_sweetalert_basic');
button.addEventListener('click', e =>{
e.preventDefault();
Swal.fire({
text: "Here's a basic example of SweetAlert!",
icon: "success",
buttonsStyling: false,
confirmButtonText: "Ok, got it!",
customClass: {
confirmButton: "btn btn-primary"
}
});
});
}
const exampleHtml = function() {
const button = document.getElementById('kt_docs_sweetalert_html');
button.addEventListener('click', e =>{
e.preventDefault();
Swal.fire({
html: 'A SweetAlert content with <strong>bold text</strong>, <a href="#">links</a> or any of our available <span class="badge badge-primary">components</span>',
icon: "info",
buttonsStyling: false,
showCancelButton: true,
confirmButtonText: "Ok, got it!",
cancelButtonText: 'Nope, cancel it',
customClass: {
confirmButton: "btn btn-primary",
cancelButton: 'btn btn-danger'
}
});
});
}
const exampleStates = () => {
// Select buttons
const infoButton = document.getElementById('kt_docs_sweetalert_state_info');
const warningButton = document.getElementById('kt_docs_sweetalert_state_warning');
const errorButton = document.getElementById('kt_docs_sweetalert_state_error');
const successButton = document.getElementById('kt_docs_sweetalert_state_success');
const questionButton = document.getElementById('kt_docs_sweetalert_state_question');
// Click action handlers
infoButton.addEventListener('click', e => {
e.preventDefault();
Swal.fire({
text: "Here's an example of an info SweetAlert!",
icon: "info",
buttonsStyling: false,
confirmButtonText: "Ok, got it!",
customClass: {
confirmButton: "btn btn-info"
}
});
});
warningButton.addEventListener('click', e => {
e.preventDefault();
Swal.fire({
text: "Here's an example of a warning SweetAlert!",
icon: "warning",
buttonsStyling: false,
confirmButtonText: "Ok, got it!",
customClass: {
confirmButton: "btn btn-warning"
}
});
});
errorButton.addEventListener('click', e => {
e.preventDefault();
Swal.fire({
text: "Here's an example of an error SweetAlert!",
icon: "error",
buttonsStyling: false,
confirmButtonText: "Ok, got it!",
customClass: {
confirmButton: "btn btn-danger"
}
});
});
successButton.addEventListener('click', e => {
e.preventDefault();
Swal.fire({
text: "Here's an example of a success SweetAlert!",
icon: "success",
buttonsStyling: false,
confirmButtonText: "Ok, got it!",
customClass: {
confirmButton: "btn btn-success"
}
});
});
questionButton.addEventListener('click', e => {
e.preventDefault();
Swal.fire({
text: "Here's an example of a question SweetAlert!",
icon: "question",
buttonsStyling: false,
confirmButtonText: "Ok, got it!",
customClass: {
confirmButton: "btn btn-primary"
}
});
});
}
return {
// Public Functions
init: function() {
exampleBasic();
exampleHtml();
exampleStates();
}
};
}();
// On document ready
KTUtil.onDOMContentLoaded(function() {
KTGeneralSweetAlertDemos.init();
});
assets/js/custom/documentation/general/toastr.js
+163
View File
@@ -0,0 +1,163 @@
"use strict";
// Class definition
var KTGeneralToastr = function() {
// Private functions
var example1 = function() {
var i = -1;
var toastCount = 0;
var $toastlast;
var getMessage = function () {
var msgs = [
'New order has been placed!',
'Are you the six fingered man?',
'Inconceivable!',
'I do not think that means what you think it means.',
'Have fun storming the castle!'
];
i++;
if (i === msgs.length) {
i = 0;
}
return msgs[i];
};
var getMessageWithClearButton = function (msg) {
msg = msg ? msg : 'Clear itself?';
msg += '<br /><br /><button type="button" class="btn btn-outline-light btn-sm">Yes</button>';
return msg;
};
$('#showtoast').on('click', function () {
var shortCutFunction = $("#toastTypeGroup input:radio:checked").val();
var msg = $('#message').val();
var title = $('#title').val() || '';
var $showDuration = $('#showDuration');
var $hideDuration = $('#hideDuration');
var $timeOut = $('#timeOut');
var $extendedTimeOut = $('#extendedTimeOut');
var $showEasing = $('#showEasing');
var $hideEasing = $('#hideEasing');
var $showMethod = $('#showMethod');
var $hideMethod = $('#hideMethod');
var toastIndex = toastCount++;
var addClear = $('#addClear').prop('checked');
toastr.options = {
closeButton: $('#closeButton').prop('checked'),
debug: $('#debugInfo').prop('checked'),
newestOnTop: $('#newestOnTop').prop('checked'),
progressBar: $('#progressBar').prop('checked'),
positionClass: $('#positionGroup input:radio:checked').val() || 'toast-top-right',
preventDuplicates: $('#preventDuplicates').prop('checked'),
onclick: null
};
if ($('#addBehaviorOnToastClick').prop('checked')) {
toastr.options.onclick = function () {
alert('You can perform some custom action after a toast goes away');
};
}
if ($showDuration.val().length) {
toastr.options.showDuration = $showDuration.val();
}
if ($hideDuration.val().length) {
toastr.options.hideDuration = $hideDuration.val();
}
if ($timeOut.val().length) {
toastr.options.timeOut = addClear ? 0 : $timeOut.val();
}
if ($extendedTimeOut.val().length) {
toastr.options.extendedTimeOut = addClear ? 0 : $extendedTimeOut.val();
}
if ($showEasing.val().length) {
toastr.options.showEasing = $showEasing.val();
}
if ($hideEasing.val().length) {
toastr.options.hideEasing = $hideEasing.val();
}
if ($showMethod.val().length) {
toastr.options.showMethod = $showMethod.val();
}
if ($hideMethod.val().length) {
toastr.options.hideMethod = $hideMethod.val();
}
if (addClear) {
msg = getMessageWithClearButton(msg);
toastr.options.tapToDismiss = false;
}
if (!msg) {
msg = getMessage();
}
$('#toastrOptions').text(
'toastr.options = '
+ JSON.stringify(toastr.options, null, 2)
+ ';'
+ '\n\ntoastr.'
+ shortCutFunction
+ '("'
+ msg
+ (title ? '", "' + title : '')
+ '");'
);
var $toast = toastr[shortCutFunction](msg, title); // Wire up an event handler to a button in the toast, if it exists
$toastlast = $toast;
if(typeof $toast === 'undefined'){
return;
}
if ($toast.find('#okBtn').length) {
$toast.delegate('#okBtn', 'click', function () {
alert('you clicked me. i was toast #' + toastIndex + '. goodbye!');
$toast.remove();
});
}
if ($toast.find('#surpriseBtn').length) {
$toast.delegate('#surpriseBtn', 'click', function () {
alert('Surprise! you clicked me. i was toast #' + toastIndex + '. You could perform an action here.');
});
}
if ($toast.find('.clear').length) {
$toast.delegate('.clear', 'click', function () {
toastr.clear($toast, { force: true });
});
}
});
function getLastToast(){
return $toastlast;
}
$('#clearlasttoast').on('click', function () {
toastr.clear(getLastToast());
});
$('#cleartoasts').on('click', function () {
toastr.clear();
});
}
return {
// Public Functions
init: function() {
example1();
}
};
}();
// On document ready
KTUtil.onDOMContentLoaded(function() {
KTGeneralToastr.init();
});
assets/js/custom/documentation/general/typed.js
+24
View File
@@ -0,0 +1,24 @@
"use strict";
// Class definition
var KTGeneralTypedJsDemos = function() {
// Private functions
var exampleBasic = function() {
var typed = new Typed("#kt_typedjs_example_1", {
strings: ["First sentence.", "Second sentence.", "Third sentense", "And some longer sentence"],
typeSpeed: 30
});
}
return {
// Public Functions
init: function() {
exampleBasic();
}
};
}();
// On document ready
KTUtil.onDOMContentLoaded(function() {
KTGeneralTypedJsDemos.init();
});
assets/js/custom/documentation/general/vis-timeline/basic.js
+38
View File
@@ -0,0 +1,38 @@
"use strict";
// Class definition
var KTVisTimelineBasic = function () {
// Private functions
var exampleBasic = function () {
// DOM element where the Timeline will be attached
var container = document.getElementById("kt_docs_vistimeline_basic");
// Create a DataSet (allows two way data-binding)
var items = new vis.DataSet([
{ id: 1, content: "item 1", start: "2021-04-20" },
{ id: 2, content: "item 2", start: "2021-04-14" },
{ id: 3, content: "item 3", start: "2021-04-18" },
{ id: 4, content: "item 4", start: "2021-04-16", end: "2021-04-19" },
{ id: 5, content: "item 5", start: "2021-04-25" },
{ id: 6, content: "item 6", start: "2021-04-27", type: "point" },
]);
// Configuration for the Timeline
var options = {};
// Create a Timeline
var timeline = new vis.Timeline(container, items, options);
}
return {
// Public Functions
init: function () {
exampleBasic();
}
};
}();
// On document ready
KTUtil.onDOMContentLoaded(function () {
KTVisTimelineBasic.init();
});
assets/js/custom/documentation/general/vis-timeline/group.js
+101
View File
@@ -0,0 +1,101 @@
"use strict";
// Class definition
var KTVisTimelineGroup = function () {
// Private functions
var exampleGroup = function () {
var now = Date.now();
var options = {
stack: true,
maxHeight: 640,
horizontalScroll: false,
verticalScroll: true,
zoomKey: "ctrlKey",
start: Date.now() - 1000 * 60 * 60 * 24 * 3, // minus 3 days
end: Date.now() + 1000 * 60 * 60 * 24 * 21, // plus 1 months aprox.
orientation: {
axis: "both",
item: "top",
},
};
var groups = new vis.DataSet();
var items = new vis.DataSet();
var count = 300;
for (var i = 0; i < count; i++) {
var start = now + 1000 * 60 * 60 * 24 * (i + Math.floor(Math.random() * 7));
var end = start + 1000 * 60 * 60 * 24 * (1 + Math.floor(Math.random() * 5));
groups.add({
id: i,
content: "Task " + i,
order: i,
});
items.add({
id: i,
group: i,
start: start,
end: end,
type: "range",
content: "Item " + i,
});
}
// create a Timeline
var container = document.getElementById("kt_docs_vistimeline_group");
var timeline = new vis.Timeline(container, items, groups, options);
//timeline = new vis.Timeline(container, null, options);
timeline.setGroups(groups);
timeline.setItems(items);
function debounce(func, wait = 100) {
let timeout;
return function (...args) {
clearTimeout(timeout);
timeout = setTimeout(() => {
func.apply(this, args);
}, wait);
};
}
let groupFocus = (e) => {
let vGroups = timeline.getVisibleGroups();
let vItems = vGroups.reduce((res, groupId) => {
let group = timeline.itemSet.groups[groupId];
if (group.items) {
res = res.concat(Object.keys(group.items));
}
return res;
}, []);
timeline.focus(vItems);
};
timeline.on("scroll", debounce(groupFocus, 200));
// Enabling the next line leads to a continuous since calling focus might scroll vertically even if it shouldn't
// this.timeline.on("scrollSide", debounce(groupFocus, 200))
// Handle button click
const button = document.getElementById('kt_docs_vistimeline_group_button');
button.addEventListener('click', e => {
e.preventDefault();
var a = timeline.getVisibleGroups();
document.getElementById("visibleGroupsContainer").innerHTML = "";
document.getElementById("visibleGroupsContainer").innerHTML += a;
});
}
return {
// Public Functions
init: function () {
exampleGroup();
}
};
}();
// On document ready
KTUtil.onDOMContentLoaded(function () {
KTVisTimelineGroup.init();
});
assets/js/custom/documentation/general/vis-timeline/interaction.js
+66
View File
@@ -0,0 +1,66 @@
"use strict";
// Class definition
var KTVisTimelineInteraction = function () {
// Private functions
var exampleInteraction = function () {
// create a dataset with items
// we specify the type of the fields `start` and `end` here to be strings
// containing an ISO date. The fields will be outputted as ISO dates
// automatically getting data from the DataSet via items.get().
var items = new vis.DataSet({
type: { start: "ISODate", end: "ISODate" },
});
// add items to the DataSet
items.add([
{ id: 1, content: "item 1<br>start", start: "2021-01-23" },
{ id: 2, content: "item 2", start: "2021-01-18" },
{ id: 3, content: "item 3", start: "2021-01-21" },
{ id: 4, content: "item 4", start: "2021-01-19", end: "2021-01-24" },
{ id: 5, content: "item 5", start: "2021-01-28", type: "point" },
{ id: 6, content: "item 6", start: "2021-01-26" },
]);
var container = document.getElementById("kt_docs_vistimeline_interaction");
var options = {
start: "2021-01-10",
end: "2021-02-10",
editable: true,
showCurrentTime: true,
};
var timeline = new vis.Timeline(container, items, options);
// Handle buttons
document.getElementById("window1").onclick = function () {
timeline.setWindow("2021-01-01", "2021-04-01");
};
document.getElementById("fit").onclick = function () {
timeline.fit();
};
document.getElementById("select").onclick = function () {
timeline.setSelection([5, 6], {
focus: true,
});
};
document.getElementById("focus1").onclick = function () {
timeline.focus(2);
};
document.getElementById("moveTo").onclick = function () {
timeline.moveTo("2021-02-01");
};
}
return {
// Public Functions
init: function () {
exampleInteraction();
}
};
}();
// On document ready
KTUtil.onDOMContentLoaded(function () {
KTVisTimelineInteraction.init();
});
assets/js/custom/documentation/general/vis-timeline/style.js
+89
View File
@@ -0,0 +1,89 @@
"use strict";
// Class definition
var KTVisTimelineStyle = function () {
// Private functions
var exampleStyle = function () {
var container = document.getElementById("kt_docs_vistimeline_style");
// Generate HTML content
const getContent = (title, img) => {
const item = document.createElement('div');
const name = document.createElement('div');
const nameClasses = ['fw-bolder', 'mb-2'];
name.classList.add(...nameClasses);
name.innerHTML = title;
const image = document.createElement('img');
image.setAttribute('src', img);
const symbol = document.createElement('div');
const symbolClasses = ['symbol', 'symbol-circle', 'symbol-30'];
symbol.classList.add(...symbolClasses);
symbol.appendChild(image);
item.appendChild(name);
item.appendChild(symbol);
return item;
}
// note that months are zero-based in the JavaScript Date object
var items = new vis.DataSet([
{
start: new Date(2010, 7, 23),
content: getContent('Conversation', hostUrl + '/media/avatars/150-1.jpg')
},
{
start: new Date(2010, 7, 23, 23, 0, 0),
content: getContent('Mail from boss', hostUrl + '/media/avatars/150-2.jpg')
},
{ start: new Date(2010, 7, 24, 16, 0, 0), content: "Report" },
{
start: new Date(2010, 7, 26),
end: new Date(2010, 8, 2),
content: "Traject A",
},
{
start: new Date(2010, 7, 28),
content: getContent('Memo', hostUrl + '/media/avatars/150-3.jpg')
},
{
start: new Date(2010, 7, 29),
content: getContent('Phone call', hostUrl + '/media/avatars/150-4.jpg')
},
{
start: new Date(2010, 7, 31),
end: new Date(2010, 8, 3),
content: "Traject B",
},
{
start: new Date(2010, 8, 4, 12, 0, 0),
content: getContent('Report', hostUrl + '/media/avatars/150-5.jpg')
},
]);
var options = {
editable: true,
margin: {
item: 20,
axis: 40,
},
};
var timeline = new vis.Timeline(container, items, options);
}
return {
// Public Functions
init: function () {
exampleStyle();
}
};
}();
// On document ready
KTUtil.onDOMContentLoaded(function () {
KTVisTimelineStyle.init();
});
assets/js/custom/documentation/general/vis-timeline/template.js
+230
View File
@@ -0,0 +1,230 @@
"use strict";
// Class definition
var KTVisTimelineTemplate = function () {
// Template data --- handlebars is used as the template for this demo. For more info: https://handlebarsjs.com/
const data = `<table class="score">
<tr>
<td colspan="3" class="description">
{{ description }}
</td>
</tr>
<tr>
<td>{{ player1 }}</td>
<th>
{{ score1 }} - {{ score2 }}
</th>
<td>{{ player2 }}</td>
</tr>
<tr>
<td>
<img
src="https://flagpedia.net/data/flags/mini/{{abbr1}}.png"
width="31"
height="20"
alt="{{abbr1}}"
/>
</td>
<th></th>
<td>
<img
src="https://flagpedia.net/data/flags/mini/{{abbr2}}.png"
width="31"
height="20"
alt="{{abbr2}}"
/>
</td>
</tr>
</table>`;
// Private functions
var exampleTemplate = function () {
// create a handlebars template --- For more info: https://handlebarsjs.com/
var template = Handlebars.compile(data);
// DOM element where the Timeline will be attached
var container = document.getElementById("kt_docs_vistimeline_template");
// Create a DataSet (allows two way data-binding)
var items = new vis.DataSet([
// round of 16
{
player1: "Brazil",
abbr1: "br",
score1: "1 (3)",
player2: "Chile",
abbr2: "cl",
score2: "1 (2)",
description: "round of 16",
start: "2014-06-28T13:00:00",
},
{
player1: "Colombia",
abbr1: "co",
score1: 2,
player2: "Uruguay",
abbr2: "uy",
score2: 0,
description: "round of 16",
start: "2014-06-28T17:00:00",
},
{
player1: "Netherlands",
abbr1: "nl",
score1: 2,
player2: "Mexico",
abbr2: "mx",
score2: 1,
description: "round of 16",
start: "2014-06-29T13:00:00",
},
{
player1: "Costa Rica",
abbr1: "cr",
score1: "1 (5)",
player2: "Greece",
abbr2: "gr",
score2: "1 (3)",
description: "round of 16",
start: "2014-06-29T17:00:00",
},
{
player1: "France",
abbr1: "fr",
score1: 2,
player2: "Nigeria",
abbr2: "ng",
score2: 0,
description: "round of 16",
start: "2014-06-30T13:00:00",
},
{
player1: "Germany",
abbr1: "de",
score1: 2,
player2: "Algeria",
abbr2: "dz",
score2: 1,
description: "round of 16",
start: "2014-06-30T17:00:00",
},
{
player1: "Argentina",
abbr1: "ar",
score1: 1,
player2: "Switzerland",
abbr2: "ch",
score2: 0,
description: "round of 16",
start: "2014-07-01T13:00:00",
},
{
player1: "Belgium",
abbr1: "be",
score1: 2,
player2: "USA",
abbr2: "us",
score2: 1,
description: "round of 16",
start: "2014-07-01T17:00:00",
},
// quarter-finals
{
player1: "France",
abbr1: "fr",
score1: 0,
player2: "Germany",
abbr2: "de",
score2: 1,
description: "quarter-finals",
start: "2014-07-04T13:00:00",
},
{
player1: "Brazil",
abbr1: "br",
score1: 2,
player2: "Colombia",
abbr2: "co",
score2: 1,
description: "quarter-finals",
start: "2014-07-04T17:00:00",
},
{
player1: "Argentina",
abbr1: "ar",
score1: 1,
player2: "Belgium",
abbr2: "be",
score2: 0,
description: "quarter-finals",
start: "2014-07-05T13:00:00",
},
{
player1: "Netherlands",
abbr1: "nl",
score1: "0 (4)",
player2: "Costa Rica",
abbr2: "cr",
score2: "0 (3)",
description: "quarter-finals",
start: "2014-07-05T17:00:00",
},
// semi-finals
{
player1: "Brazil",
abbr1: "br",
score1: 1,
player2: "Germany",
abbr2: "de",
score2: 7,
description: "semi-finals",
start: "2014-07-08T17:00:00",
},
{
player1: "Netherlands",
abbr1: "nl",
score1: "0 (2)",
player2: "Argentina",
abbr2: "ar",
score2: "0 (4)",
description: "semi-finals",
start: "2014-07-09T17:00:00",
},
// final
{
player1: "Germany",
score1: 1,
abbr1: "de",
player2: "Argentina",
abbr2: "ar",
score2: 0,
description: "final",
start: "2014-07-13T16:00:00",
},
]);
// Configuration for the Timeline
var options = {
// specify a template for the items
template: template,
};
// Create a Timeline
var timeline = new vis.Timeline(container, items, options);
}
return {
// Public Functions
init: function () {
exampleTemplate();
}
};
}();
// On document ready
KTUtil.onDOMContentLoaded(function () {
KTVisTimelineTemplate.init();
});
assets/js/custom/documentation/search.js
+92
View File
@@ -0,0 +1,92 @@
"use strict";
// Class definition
var KTDocsSearch = function() {
// Private variables
var element;
var formElement;
var mainElement;
var resultsElement;
var wrapperElement;
var emptyElement;
var searchObject;
// Private functions
var processs = function(search) {
var results = 0;
// Elements
var searchable = [].slice.call(resultsElement.querySelectorAll('[data-kt-searchable="true"]'));
// Match elements
searchable.map(function (element) {
var query = searchObject.getQuery();
if (element.innerText.toLowerCase().indexOf(query.toLowerCase()) !== -1) {
element.classList.remove('d-none');
results++;
} else {
element.classList.add('d-none');
}
});
// Hide recently viewed
mainElement.classList.add('d-none');
if (results === 0) {
// Hide results
resultsElement.classList.add('d-none');
// Show empty message
emptyElement.classList.remove('d-none');
} else {
// Show results
resultsElement.classList.remove('d-none');
// Hide empty message
emptyElement.classList.add('d-none');
}
// Complete search
search.complete();
}
var clear = function(search) {
// Show recently viewed
mainElement.classList.remove('d-none');
// Hide results
resultsElement.classList.add('d-none');
// Hide empty message
emptyElement.classList.add('d-none');
}
// Public methods
return {
init: function() {
// Elements
element = document.querySelector('#kt_docs_search');
if (!element) {
return;
}
wrapperElement = element.querySelector('[data-kt-search-element="wrapper"]');
formElement = element.querySelector('[data-kt-search-element="form"]');
mainElement = element.querySelector('[data-kt-search-element="main"]');
resultsElement = element.querySelector('[data-kt-search-element="results"]');
emptyElement = element.querySelector('[data-kt-search-element="empty"]');
// Initialize search handler
searchObject = new KTSearch(element);
// Search handler
searchObject.on('kt.search.process', processs);
// Clear handler
searchObject.on('kt.search.clear', clear);
}
};
}();
// On document ready
KTUtil.onDOMContentLoaded(function() {
KTDocsSearch.init();
});