adding files of assets
This commit is contained in:
Arjun Patel
@@ -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();
|
||||
});
|
||||
@@ -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();
|
||||
});
|
||||
@@ -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();
|
||||
});
|
||||
@@ -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();
|
||||
});
|
||||
@@ -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();
|
||||
});
|
||||
@@ -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();
|
||||
});
|
||||
@@ -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();
|
||||
});
|
||||
@@ -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();
|
||||
});
|
||||
@@ -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();
|
||||
});
|
||||
@@ -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();
|
||||
});
|
||||
@@ -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();
|
||||
});
|
||||
@@ -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();
|
||||
});
|
||||
@@ -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();
|
||||
});
|
||||
@@ -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();
|
||||
});
|
||||
@@ -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();
|
||||
});
|
||||
@@ -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();
|
||||
});
|
||||
@@ -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();
|
||||
});
|
||||
@@ -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();
|
||||
});
|
||||
@@ -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();
|
||||
});
|
||||
@@ -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();
|
||||
});
|
||||
@@ -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();
|
||||
});
|
||||
@@ -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();
|
||||
});
|
||||
@@ -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();
|
||||
});
|
||||
@@ -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();
|
||||
});
|
||||
@@ -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();
|
||||
});
|
||||
@@ -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();
|
||||
});
|
||||
@@ -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();
|
||||
});
|
||||
@@ -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();
|
||||
});
|
||||
@@ -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();
|
||||
});
|
||||
@@ -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();
|
||||
});
|
||||
@@ -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;
|
||||
}
|
||||
@@ -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();
|
||||
});
|
||||
@@ -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();
|
||||
});
|
||||
@@ -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();
|
||||
});
|
||||
@@ -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();
|
||||
});
|
||||
@@ -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();
|
||||
});
|
||||
@@ -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();
|
||||
});
|
||||
@@ -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();
|
||||
});
|
||||
@@ -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();
|
||||
});
|
||||
@@ -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();
|
||||
});
|
||||
Reference in New Issue
Block a user