mirror of
https://git.imnavajas.es/jjimenez/safekat.git
synced 2025-07-25 22:52:08 +00:00
terminando servicios manipulados y preimpresion
This commit is contained in:
@ -1,195 +0,0 @@
|
||||
/**
|
||||
* App user list (jquery)
|
||||
*/
|
||||
|
||||
'use strict';
|
||||
|
||||
$(function () {
|
||||
var dataTablePermissions = $('.datatables-permissions'),
|
||||
dt_permission,
|
||||
userList = 'app-user-list.html';
|
||||
|
||||
// Users List datatable
|
||||
if (dataTablePermissions.length) {
|
||||
dt_permission = dataTablePermissions.DataTable({
|
||||
ajax: assetsPath + 'json/permissions-list.json', // JSON file to add data
|
||||
columns: [
|
||||
// columns according to JSON
|
||||
{ data: '' },
|
||||
{ data: 'id' },
|
||||
{ data: 'name' },
|
||||
{ data: 'assigned_to' },
|
||||
{ data: 'created_date' },
|
||||
{ data: '' }
|
||||
],
|
||||
columnDefs: [
|
||||
{
|
||||
// For Responsive
|
||||
className: 'control',
|
||||
orderable: false,
|
||||
searchable: false,
|
||||
responsivePriority: 2,
|
||||
targets: 0,
|
||||
render: function (data, type, full, meta) {
|
||||
return '';
|
||||
}
|
||||
},
|
||||
{
|
||||
targets: 1,
|
||||
searchable: false,
|
||||
visible: false
|
||||
},
|
||||
{
|
||||
// Name
|
||||
targets: 2,
|
||||
render: function (data, type, full, meta) {
|
||||
var $name = full['name'];
|
||||
return '<span class="text-nowrap">' + $name + '</span>';
|
||||
}
|
||||
},
|
||||
{
|
||||
// User Role
|
||||
targets: 3,
|
||||
orderable: false,
|
||||
render: function (data, type, full, meta) {
|
||||
var $assignedTo = full['assigned_to'],
|
||||
$output = '';
|
||||
var roleBadgeObj = {
|
||||
Admin: '<a href="' + userList + '"><span class="badge bg-label-primary m-1">Administrator</span></a>',
|
||||
Manager: '<a href="' + userList + '"><span class="badge bg-label-warning m-1">Manager</span></a>',
|
||||
Users: '<a href="' + userList + '"><span class="badge bg-label-success m-1">Users</span></a>',
|
||||
Support: '<a href="' + userList + '"><span class="badge bg-label-info m-1">Support</span></a>',
|
||||
Restricted:
|
||||
'<a href="' + userList + '"><span class="badge bg-label-danger m-1">Restricted User</span></a>'
|
||||
};
|
||||
for (var i = 0; i < $assignedTo.length; i++) {
|
||||
var val = $assignedTo[i];
|
||||
$output += roleBadgeObj[val];
|
||||
}
|
||||
return '<span class="text-nowrap">' + $output + '</span>';
|
||||
}
|
||||
},
|
||||
{
|
||||
// remove ordering from Name
|
||||
targets: 4,
|
||||
orderable: false,
|
||||
render: function (data, type, full, meta) {
|
||||
var $date = full['created_date'];
|
||||
return '<span class="text-nowrap">' + $date + '</span>';
|
||||
}
|
||||
},
|
||||
{
|
||||
// Actions
|
||||
targets: -1,
|
||||
searchable: false,
|
||||
title: 'Actions',
|
||||
orderable: false,
|
||||
render: function (data, type, full, meta) {
|
||||
return (
|
||||
'<span class="text-nowrap"><button class="btn btn-sm btn-icon me-2" data-bs-target="#editPermissionModal" data-bs-toggle="modal" data-bs-dismiss="modal"><i class="ti ti-edit"></i></button>' +
|
||||
'<button class="btn btn-sm btn-icon delete-record"><i class="ti ti-trash"></i></button></span>'
|
||||
);
|
||||
}
|
||||
}
|
||||
],
|
||||
order: [[1, 'asc']],
|
||||
dom:
|
||||
'<"row mx-1"' +
|
||||
'<"col-sm-12 col-md-3" l>' +
|
||||
'<"col-sm-12 col-md-9"<"dt-action-buttons text-xl-end text-lg-start text-md-end text-start d-flex align-items-center justify-content-md-end justify-content-center flex-wrap me-1"<"me-3"f>B>>' +
|
||||
'>t' +
|
||||
'<"row mx-2"' +
|
||||
'<"col-sm-12 col-md-6"i>' +
|
||||
'<"col-sm-12 col-md-6"p>' +
|
||||
'>',
|
||||
language: {
|
||||
sLengthMenu: 'Show _MENU_',
|
||||
search: 'Search',
|
||||
searchPlaceholder: 'Search..'
|
||||
},
|
||||
// Buttons with Dropdown
|
||||
buttons: [
|
||||
{
|
||||
text: 'Add Permission',
|
||||
className: 'add-new btn btn-primary mb-3 mb-md-0',
|
||||
attr: {
|
||||
'data-bs-toggle': 'modal',
|
||||
'data-bs-target': '#addPermissionModal'
|
||||
},
|
||||
init: function (api, node, config) {
|
||||
$(node).removeClass('btn-secondary');
|
||||
}
|
||||
}
|
||||
],
|
||||
// For responsive popup
|
||||
responsive: {
|
||||
details: {
|
||||
display: $.fn.dataTable.Responsive.display.modal({
|
||||
header: function (row) {
|
||||
var data = row.data();
|
||||
return 'Details of ' + data['name'];
|
||||
}
|
||||
}),
|
||||
type: 'column',
|
||||
renderer: function (api, rowIdx, columns) {
|
||||
var data = $.map(columns, function (col, i) {
|
||||
return col.title !== '' // ? Do not show row in modal popup if title is blank (for check box)
|
||||
? '<tr data-dt-row="' +
|
||||
col.rowIndex +
|
||||
'" data-dt-column="' +
|
||||
col.columnIndex +
|
||||
'">' +
|
||||
'<td>' +
|
||||
col.title +
|
||||
':' +
|
||||
'</td> ' +
|
||||
'<td>' +
|
||||
col.data +
|
||||
'</td>' +
|
||||
'</tr>'
|
||||
: '';
|
||||
}).join('');
|
||||
|
||||
return data ? $('<table class="table"/><tbody />').append(data) : false;
|
||||
}
|
||||
}
|
||||
},
|
||||
initComplete: function () {
|
||||
// Adding role filter once table initialized
|
||||
this.api()
|
||||
.columns(3)
|
||||
.every(function () {
|
||||
var column = this;
|
||||
var select = $(
|
||||
'<select id="UserRole" class="form-select text-capitalize"><option value=""> Select Role </option></select>'
|
||||
)
|
||||
.appendTo('.user_role')
|
||||
.on('change', function () {
|
||||
var val = $.fn.dataTable.util.escapeRegex($(this).val());
|
||||
column.search(val ? '^' + val + '$' : '', true, false).draw();
|
||||
});
|
||||
|
||||
column
|
||||
.data()
|
||||
.unique()
|
||||
.sort()
|
||||
.each(function (d, j) {
|
||||
select.append('<option value="' + d + '" class="text-capitalize">' + d + '</option>');
|
||||
});
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Delete Record
|
||||
$('.datatables-permissions tbody').on('click', '.delete-record', function () {
|
||||
dt_permission.row($(this).parents('tr')).remove().draw();
|
||||
});
|
||||
|
||||
// Filter form control to default size
|
||||
// ? setTimeout used for multilingual table initialization
|
||||
setTimeout(() => {
|
||||
$('.dataTables_filter .form-control').removeClass('form-control-sm');
|
||||
$('.dataTables_length .form-select').removeClass('form-select-sm');
|
||||
}, 300);
|
||||
});
|
||||
@ -1,258 +0,0 @@
|
||||
/**
|
||||
* App user list
|
||||
*/
|
||||
|
||||
'use strict';
|
||||
|
||||
// Datatable (jquery)
|
||||
$(function () {
|
||||
var dtUserTable = $('.datatables-users'),
|
||||
statusObj = {
|
||||
1: { title: 'Pending', class: 'bg-label-warning' },
|
||||
2: { title: 'Active', class: 'bg-label-success' },
|
||||
3: { title: 'Inactive', class: 'bg-label-secondary' }
|
||||
};
|
||||
|
||||
var userView = 'app-user-view-account.html';
|
||||
|
||||
// Users List datatable
|
||||
if (dtUserTable.length) {
|
||||
var dtUser = dtUserTable.DataTable({
|
||||
ajax: assetsPath + 'json/user-list.json', // JSON file to add data
|
||||
columns: [
|
||||
// columns according to JSON
|
||||
{ data: '' },
|
||||
{ data: 'full_name' },
|
||||
{ data: 'role' },
|
||||
{ data: 'current_plan' },
|
||||
{ data: 'billing' },
|
||||
{ data: 'status' },
|
||||
{ data: '' }
|
||||
],
|
||||
columnDefs: [
|
||||
{
|
||||
// For Responsive
|
||||
className: 'control',
|
||||
orderable: false,
|
||||
searchable: false,
|
||||
responsivePriority: 2,
|
||||
targets: 0,
|
||||
render: function (data, type, full, meta) {
|
||||
return '';
|
||||
}
|
||||
},
|
||||
{
|
||||
// User full name and email
|
||||
targets: 1,
|
||||
responsivePriority: 4,
|
||||
render: function (data, type, full, meta) {
|
||||
var $name = full['full_name'],
|
||||
$email = full['email'],
|
||||
$image = full['avatar'];
|
||||
if ($image) {
|
||||
// For Avatar image
|
||||
var $output =
|
||||
'<img src="' + assetsPath + 'img/avatars/' + $image + '" alt="Avatar" class="rounded-circle">';
|
||||
} else {
|
||||
// For Avatar badge
|
||||
var stateNum = Math.floor(Math.random() * 6);
|
||||
var states = ['success', 'danger', 'warning', 'info', 'primary', 'secondary'];
|
||||
var $state = states[stateNum],
|
||||
$name = full['full_name'],
|
||||
$initials = $name.match(/\b\w/g) || [];
|
||||
$initials = (($initials.shift() || '') + ($initials.pop() || '')).toUpperCase();
|
||||
$output = '<span class="avatar-initial rounded-circle bg-label-' + $state + '">' + $initials + '</span>';
|
||||
}
|
||||
// Creates full output for row
|
||||
var $row_output =
|
||||
'<div class="d-flex justify-content-left align-items-center">' +
|
||||
'<div class="avatar-wrapper">' +
|
||||
'<div class="avatar avatar-sm me-3">' +
|
||||
$output +
|
||||
'</div>' +
|
||||
'</div>' +
|
||||
'<div class="d-flex flex-column">' +
|
||||
'<a href="' +
|
||||
userView +
|
||||
'" class="text-body text-truncate"><span class="fw-semibold">' +
|
||||
$name +
|
||||
'</span></a>' +
|
||||
'<small class="text-muted">@' +
|
||||
$email +
|
||||
'</small>' +
|
||||
'</div>' +
|
||||
'</div>';
|
||||
return $row_output;
|
||||
}
|
||||
},
|
||||
{
|
||||
// User Role
|
||||
targets: 2,
|
||||
render: function (data, type, full, meta) {
|
||||
var $role = full['role'];
|
||||
var roleBadgeObj = {
|
||||
Subscriber:
|
||||
'<span class="badge badge-center rounded-pill bg-label-warning me-3 w-px-30 h-px-30"><i class="ti ti-user ti-sm"></i></span>',
|
||||
Author:
|
||||
'<span class="badge badge-center rounded-pill bg-label-success me-3 w-px-30 h-px-30"><i class="ti ti-settings ti-sm"></i></span>',
|
||||
Maintainer:
|
||||
'<span class="badge badge-center rounded-pill bg-label-primary me-3 w-px-30 h-px-30"><i class="ti ti-chart-pie-2 ti-sm"></i></span>',
|
||||
Editor:
|
||||
'<span class="badge badge-center rounded-pill bg-label-info me-3 w-px-30 h-px-30"><i class="ti ti-edit ti-sm"></i></span>',
|
||||
Admin:
|
||||
'<span class="badge badge-center rounded-pill bg-label-secondary me-3 w-px-30 h-px-30"><i class="ti ti-device-laptop ti-sm"></i></span>'
|
||||
};
|
||||
return "<span class='text-truncate d-flex align-items-center'>" + roleBadgeObj[$role] + $role + '</span>';
|
||||
}
|
||||
},
|
||||
{
|
||||
// Plans
|
||||
targets: 3,
|
||||
render: function (data, type, full, meta) {
|
||||
var $plan = full['current_plan'];
|
||||
|
||||
return '<span class="fw-semibold">' + $plan + '</span>';
|
||||
}
|
||||
},
|
||||
{
|
||||
// User Status
|
||||
targets: 5,
|
||||
render: function (data, type, full, meta) {
|
||||
var $status = full['status'];
|
||||
|
||||
return (
|
||||
'<span class="badge ' +
|
||||
statusObj[$status].class +
|
||||
'" text-capitalized>' +
|
||||
statusObj[$status].title +
|
||||
'</span>'
|
||||
);
|
||||
}
|
||||
},
|
||||
{
|
||||
// Actions
|
||||
targets: -1,
|
||||
title: 'Actions',
|
||||
searchable: false,
|
||||
orderable: false,
|
||||
render: function (data, type, full, meta) {
|
||||
return (
|
||||
'<div class="d-flex align-items-center">' +
|
||||
'<a href="' +
|
||||
userView +
|
||||
'" class="btn btn-sm btn-icon"><i class="ti ti-eye"></i></a>' +
|
||||
'<a href="javascript:;" class="text-body delete-record"><i class="ti ti-trash ti-sm mx-2"></i></a>' +
|
||||
'<a href="javascript:;" class="text-body dropdown-toggle hide-arrow" data-bs-toggle="dropdown"><i class="ti ti-dots-vertical ti-sm mx-1"></i></a>' +
|
||||
'<div class="dropdown-menu dropdown-menu-end m-0">' +
|
||||
'<a href="javascript:;"" class="dropdown-item">Edit</a>' +
|
||||
'<a href="javascript:;" class="dropdown-item">Suspend</a>' +
|
||||
'</div>' +
|
||||
'</div>'
|
||||
);
|
||||
}
|
||||
}
|
||||
],
|
||||
order: [[1, 'desc']],
|
||||
dom:
|
||||
'<"row mx-2"' +
|
||||
'<"col-sm-12 col-md-4 col-lg-6" l>' +
|
||||
'<"col-sm-12 col-md-8 col-lg-6"<"dt-action-buttons text-xl-end text-lg-start text-md-end text-start d-flex align-items-center justify-content-md-end justify-content-center align-items-center flex-sm-nowrap flex-wrap me-1"<"me-3"f><"user_role w-px-200 pb-3 pb-sm-0">>>' +
|
||||
'>t' +
|
||||
'<"row mx-2"' +
|
||||
'<"col-sm-12 col-md-6"i>' +
|
||||
'<"col-sm-12 col-md-6"p>' +
|
||||
'>',
|
||||
language: {
|
||||
sLengthMenu: 'Show _MENU_',
|
||||
search: 'Search',
|
||||
searchPlaceholder: 'Search..'
|
||||
},
|
||||
// For responsive popup
|
||||
responsive: {
|
||||
details: {
|
||||
display: $.fn.dataTable.Responsive.display.modal({
|
||||
header: function (row) {
|
||||
var data = row.data();
|
||||
return 'Details of ' + data['full_name'];
|
||||
}
|
||||
}),
|
||||
type: 'column',
|
||||
renderer: function (api, rowIdx, columns) {
|
||||
var data = $.map(columns, function (col, i) {
|
||||
return col.title !== '' // ? Do not show row in modal popup if title is blank (for check box)
|
||||
? '<tr data-dt-row="' +
|
||||
col.rowIndex +
|
||||
'" data-dt-column="' +
|
||||
col.columnIndex +
|
||||
'">' +
|
||||
'<td>' +
|
||||
col.title +
|
||||
':' +
|
||||
'</td> ' +
|
||||
'<td>' +
|
||||
col.data +
|
||||
'</td>' +
|
||||
'</tr>'
|
||||
: '';
|
||||
}).join('');
|
||||
|
||||
return data ? $('<table class="table"/><tbody />').append(data) : false;
|
||||
}
|
||||
}
|
||||
},
|
||||
initComplete: function () {
|
||||
// Adding role filter once table initialized
|
||||
this.api()
|
||||
.columns(2)
|
||||
.every(function () {
|
||||
var column = this;
|
||||
var select = $(
|
||||
'<select id="UserRole" class="form-select text-capitalize"><option value=""> Select Role </option></select>'
|
||||
)
|
||||
.appendTo('.user_role')
|
||||
.on('change', function () {
|
||||
var val = $.fn.dataTable.util.escapeRegex($(this).val());
|
||||
column.search(val ? '^' + val + '$' : '', true, false).draw();
|
||||
});
|
||||
|
||||
column
|
||||
.data()
|
||||
.unique()
|
||||
.sort()
|
||||
.each(function (d, j) {
|
||||
select.append('<option value="' + d + '" class="text-capitalize">' + d + '</option>');
|
||||
});
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
// Delete Record
|
||||
$('.datatables-users tbody').on('click', '.delete-record', function () {
|
||||
dtUser.row($(this).parents('tr')).remove().draw();
|
||||
});
|
||||
|
||||
// Filter form control to default size
|
||||
// ? setTimeout used for multilingual table initialization
|
||||
setTimeout(() => {
|
||||
$('.dataTables_filter .form-control').removeClass('form-control-sm');
|
||||
$('.dataTables_length .form-select').removeClass('form-select-sm');
|
||||
}, 300);
|
||||
});
|
||||
|
||||
(function () {
|
||||
// On edit role click, update text
|
||||
var roleEditList = document.querySelectorAll('.role-edit-modal'),
|
||||
roleAdd = document.querySelector('.add-new-role'),
|
||||
roleTitle = document.querySelector('.role-title');
|
||||
|
||||
roleAdd.onclick = function () {
|
||||
roleTitle.innerHTML = 'Add New Role'; // reset text
|
||||
};
|
||||
if (roleEditList) {
|
||||
roleEditList.forEach(function (roleEditEl) {
|
||||
roleEditEl.onclick = function () {
|
||||
roleTitle.innerHTML = 'Edit Role'; // reset text
|
||||
};
|
||||
});
|
||||
}
|
||||
})();
|
||||
@ -1,123 +0,0 @@
|
||||
/**
|
||||
* App Calendar Events
|
||||
*/
|
||||
|
||||
'use strict';
|
||||
|
||||
let date = new Date();
|
||||
let nextDay = new Date(new Date().getTime() + 24 * 60 * 60 * 1000);
|
||||
// prettier-ignore
|
||||
let nextMonth = date.getMonth() === 11 ? new Date(date.getFullYear() + 1, 0, 1) : new Date(date.getFullYear(), date.getMonth() + 1, 1);
|
||||
// prettier-ignore
|
||||
let prevMonth = date.getMonth() === 11 ? new Date(date.getFullYear() - 1, 0, 1) : new Date(date.getFullYear(), date.getMonth() - 1, 1);
|
||||
|
||||
let events = [
|
||||
{
|
||||
id: 1,
|
||||
url: '',
|
||||
title: 'Design Review',
|
||||
start: date,
|
||||
end: nextDay,
|
||||
allDay: false,
|
||||
extendedProps: {
|
||||
calendar: 'Business'
|
||||
}
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
url: '',
|
||||
title: 'Meeting With Client',
|
||||
start: new Date(date.getFullYear(), date.getMonth() + 1, -11),
|
||||
end: new Date(date.getFullYear(), date.getMonth() + 1, -10),
|
||||
allDay: true,
|
||||
extendedProps: {
|
||||
calendar: 'Business'
|
||||
}
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
url: '',
|
||||
title: 'Family Trip',
|
||||
allDay: true,
|
||||
start: new Date(date.getFullYear(), date.getMonth() + 1, -9),
|
||||
end: new Date(date.getFullYear(), date.getMonth() + 1, -7),
|
||||
extendedProps: {
|
||||
calendar: 'Holiday'
|
||||
}
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
url: '',
|
||||
title: "Doctor's Appointment",
|
||||
start: new Date(date.getFullYear(), date.getMonth() + 1, -11),
|
||||
end: new Date(date.getFullYear(), date.getMonth() + 1, -10),
|
||||
extendedProps: {
|
||||
calendar: 'Personal'
|
||||
}
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
url: '',
|
||||
title: 'Dart Game?',
|
||||
start: new Date(date.getFullYear(), date.getMonth() + 1, -13),
|
||||
end: new Date(date.getFullYear(), date.getMonth() + 1, -12),
|
||||
allDay: true,
|
||||
extendedProps: {
|
||||
calendar: 'ETC'
|
||||
}
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
url: '',
|
||||
title: 'Meditation',
|
||||
start: new Date(date.getFullYear(), date.getMonth() + 1, -13),
|
||||
end: new Date(date.getFullYear(), date.getMonth() + 1, -12),
|
||||
allDay: true,
|
||||
extendedProps: {
|
||||
calendar: 'Personal'
|
||||
}
|
||||
},
|
||||
{
|
||||
id: 7,
|
||||
url: '',
|
||||
title: 'Dinner',
|
||||
start: new Date(date.getFullYear(), date.getMonth() + 1, -13),
|
||||
end: new Date(date.getFullYear(), date.getMonth() + 1, -12),
|
||||
extendedProps: {
|
||||
calendar: 'Family'
|
||||
}
|
||||
},
|
||||
{
|
||||
id: 8,
|
||||
url: '',
|
||||
title: 'Product Review',
|
||||
start: new Date(date.getFullYear(), date.getMonth() + 1, -13),
|
||||
end: new Date(date.getFullYear(), date.getMonth() + 1, -12),
|
||||
allDay: true,
|
||||
extendedProps: {
|
||||
calendar: 'Business'
|
||||
}
|
||||
},
|
||||
{
|
||||
id: 9,
|
||||
url: '',
|
||||
title: 'Monthly Meeting',
|
||||
start: nextMonth,
|
||||
end: nextMonth,
|
||||
allDay: true,
|
||||
extendedProps: {
|
||||
calendar: 'Business'
|
||||
}
|
||||
},
|
||||
{
|
||||
id: 10,
|
||||
url: '',
|
||||
title: 'Monthly Checkup',
|
||||
start: prevMonth,
|
||||
end: prevMonth,
|
||||
allDay: true,
|
||||
extendedProps: {
|
||||
calendar: 'Personal'
|
||||
}
|
||||
}
|
||||
];
|
||||
@ -1,571 +0,0 @@
|
||||
/**
|
||||
* App Calendar
|
||||
*/
|
||||
|
||||
/**
|
||||
* ! If both start and end dates are same Full calendar will nullify the end date value.
|
||||
* ! Full calendar will end the event on a day before at 12:00:00AM thus, event won't extend to the end date.
|
||||
* ! We are getting events from a separate file named app-calendar-events.js. You can add or remove events from there.
|
||||
*
|
||||
**/
|
||||
|
||||
'use strict';
|
||||
|
||||
let direction = 'ltr';
|
||||
|
||||
if (isRtl) {
|
||||
direction = 'rtl';
|
||||
}
|
||||
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
(function () {
|
||||
const calendarEl = document.getElementById('calendar'),
|
||||
appCalendarSidebar = document.querySelector('.app-calendar-sidebar'),
|
||||
addEventSidebar = document.getElementById('addEventSidebar'),
|
||||
appOverlay = document.querySelector('.app-overlay'),
|
||||
calendarsColor = {
|
||||
Business: 'primary',
|
||||
Holiday: 'success',
|
||||
Personal: 'danger',
|
||||
Family: 'warning',
|
||||
ETC: 'info'
|
||||
},
|
||||
offcanvasTitle = document.querySelector('.offcanvas-title'),
|
||||
btnToggleSidebar = document.querySelector('.btn-toggle-sidebar'),
|
||||
btnSubmit = document.querySelector('button[type="submit"]'),
|
||||
btnDeleteEvent = document.querySelector('.btn-delete-event'),
|
||||
btnCancel = document.querySelector('.btn-cancel'),
|
||||
eventTitle = document.querySelector('#eventTitle'),
|
||||
eventStartDate = document.querySelector('#eventStartDate'),
|
||||
eventEndDate = document.querySelector('#eventEndDate'),
|
||||
eventUrl = document.querySelector('#eventURL'),
|
||||
eventLabel = $('#eventLabel'), // ! Using jquery vars due to select2 jQuery dependency
|
||||
eventGuests = $('#eventGuests'), // ! Using jquery vars due to select2 jQuery dependency
|
||||
eventLocation = document.querySelector('#eventLocation'),
|
||||
eventDescription = document.querySelector('#eventDescription'),
|
||||
allDaySwitch = document.querySelector('.allDay-switch'),
|
||||
selectAll = document.querySelector('.select-all'),
|
||||
filterInput = [].slice.call(document.querySelectorAll('.input-filter')),
|
||||
inlineCalendar = document.querySelector('.inline-calendar');
|
||||
|
||||
let eventToUpdate,
|
||||
currentEvents = events, // Assign app-calendar-events.js file events (assume events from API) to currentEvents (browser store/object) to manage and update calender events
|
||||
isFormValid = false,
|
||||
inlineCalInstance;
|
||||
|
||||
// Init event Offcanvas
|
||||
const bsAddEventSidebar = new bootstrap.Offcanvas(addEventSidebar);
|
||||
|
||||
//! TODO: Update Event label and guest code to JS once select removes jQuery dependency
|
||||
// Event Label (select2)
|
||||
if (eventLabel.length) {
|
||||
function renderBadges(option) {
|
||||
if (!option.id) {
|
||||
return option.text;
|
||||
}
|
||||
var $badge =
|
||||
"<span class='badge badge-dot bg-" + $(option.element).data('label') + " me-2'> " + '</span>' + option.text;
|
||||
|
||||
return $badge;
|
||||
}
|
||||
eventLabel.wrap('<div class="position-relative"></div>').select2({
|
||||
placeholder: 'Select value',
|
||||
dropdownParent: eventLabel.parent(),
|
||||
templateResult: renderBadges,
|
||||
templateSelection: renderBadges,
|
||||
minimumResultsForSearch: -1,
|
||||
escapeMarkup: function (es) {
|
||||
return es;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Event Guests (select2)
|
||||
if (eventGuests.length) {
|
||||
function renderGuestAvatar(option) {
|
||||
if (!option.id) {
|
||||
return option.text;
|
||||
}
|
||||
var $avatar =
|
||||
"<div class='d-flex flex-wrap align-items-center'>" +
|
||||
"<div class='avatar avatar-xs me-2'>" +
|
||||
"<img src='" +
|
||||
assetsPath +
|
||||
'img/avatars/' +
|
||||
$(option.element).data('avatar') +
|
||||
"' alt='avatar' class='rounded-circle' />" +
|
||||
'</div>' +
|
||||
option.text +
|
||||
'</div>';
|
||||
|
||||
return $avatar;
|
||||
}
|
||||
eventGuests.wrap('<div class="position-relative"></div>').select2({
|
||||
placeholder: 'Select value',
|
||||
dropdownParent: eventGuests.parent(),
|
||||
closeOnSelect: false,
|
||||
templateResult: renderGuestAvatar,
|
||||
templateSelection: renderGuestAvatar,
|
||||
escapeMarkup: function (es) {
|
||||
return es;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Event start (flatpicker)
|
||||
if (eventStartDate) {
|
||||
var start = eventStartDate.flatpickr({
|
||||
enableTime: true,
|
||||
altFormat: 'Y-m-dTH:i:S',
|
||||
onReady: function (selectedDates, dateStr, instance) {
|
||||
if (instance.isMobile) {
|
||||
instance.mobileInput.setAttribute('step', null);
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Event end (flatpicker)
|
||||
if (eventEndDate) {
|
||||
var end = eventEndDate.flatpickr({
|
||||
enableTime: true,
|
||||
altFormat: 'Y-m-dTH:i:S',
|
||||
onReady: function (selectedDates, dateStr, instance) {
|
||||
if (instance.isMobile) {
|
||||
instance.mobileInput.setAttribute('step', null);
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Inline sidebar calendar (flatpicker)
|
||||
if (inlineCalendar) {
|
||||
inlineCalInstance = inlineCalendar.flatpickr({
|
||||
monthSelectorType: 'static',
|
||||
inline: true
|
||||
});
|
||||
}
|
||||
|
||||
// Event click function
|
||||
function eventClick(info) {
|
||||
eventToUpdate = info.event;
|
||||
if (eventToUpdate.url) {
|
||||
info.jsEvent.preventDefault();
|
||||
window.open(eventToUpdate.url, '_blank');
|
||||
}
|
||||
bsAddEventSidebar.show();
|
||||
// For update event set offcanvas title text: Update Event
|
||||
if (offcanvasTitle) {
|
||||
offcanvasTitle.innerHTML = 'Update Event';
|
||||
}
|
||||
btnSubmit.innerHTML = 'Update';
|
||||
btnSubmit.classList.add('btn-update-event');
|
||||
btnSubmit.classList.remove('btn-add-event');
|
||||
btnDeleteEvent.classList.remove('d-none');
|
||||
|
||||
eventTitle.value = eventToUpdate.title;
|
||||
start.setDate(eventToUpdate.start, true, 'Y-m-d');
|
||||
eventToUpdate.allDay === true ? (allDaySwitch.checked = true) : (allDaySwitch.checked = false);
|
||||
eventToUpdate.end !== null
|
||||
? end.setDate(eventToUpdate.end, true, 'Y-m-d')
|
||||
: end.setDate(eventToUpdate.start, true, 'Y-m-d');
|
||||
eventLabel.val(eventToUpdate.extendedProps.calendar).trigger('change');
|
||||
eventToUpdate.extendedProps.location !== undefined
|
||||
? (eventLocation.value = eventToUpdate.extendedProps.location)
|
||||
: null;
|
||||
eventToUpdate.extendedProps.guests !== undefined
|
||||
? eventGuests.val(eventToUpdate.extendedProps.guests).trigger('change')
|
||||
: null;
|
||||
eventToUpdate.extendedProps.description !== undefined
|
||||
? (eventDescription.value = eventToUpdate.extendedProps.description)
|
||||
: null;
|
||||
|
||||
// // Call removeEvent function
|
||||
// btnDeleteEvent.addEventListener('click', e => {
|
||||
// removeEvent(parseInt(eventToUpdate.id));
|
||||
// // eventToUpdate.remove();
|
||||
// bsAddEventSidebar.hide();
|
||||
// });
|
||||
}
|
||||
|
||||
// Modify sidebar toggler
|
||||
function modifyToggler() {
|
||||
const fcSidebarToggleButton = document.querySelector('.fc-sidebarToggle-button');
|
||||
fcSidebarToggleButton.classList.remove('fc-button-primary');
|
||||
fcSidebarToggleButton.classList.add('d-lg-none', 'd-inline-block', 'ps-0');
|
||||
while (fcSidebarToggleButton.firstChild) {
|
||||
fcSidebarToggleButton.firstChild.remove();
|
||||
}
|
||||
fcSidebarToggleButton.setAttribute('data-bs-toggle', 'sidebar');
|
||||
fcSidebarToggleButton.setAttribute('data-overlay', '');
|
||||
fcSidebarToggleButton.setAttribute('data-target', '#app-calendar-sidebar');
|
||||
fcSidebarToggleButton.insertAdjacentHTML('beforeend', '<i class="ti ti-menu-2 ti-sm"></i>');
|
||||
}
|
||||
|
||||
// Filter events by calender
|
||||
function selectedCalendars() {
|
||||
let selected = [],
|
||||
filterInputChecked = [].slice.call(document.querySelectorAll('.input-filter:checked'));
|
||||
|
||||
filterInputChecked.forEach(item => {
|
||||
selected.push(item.getAttribute('data-value'));
|
||||
});
|
||||
|
||||
return selected;
|
||||
}
|
||||
|
||||
// --------------------------------------------------------------------------------------------------
|
||||
// AXIOS: fetchEvents
|
||||
// * This will be called by fullCalendar to fetch events. Also this can be used to refetch events.
|
||||
// --------------------------------------------------------------------------------------------------
|
||||
function fetchEvents(info, successCallback) {
|
||||
// Fetch Events from API endpoint reference
|
||||
/* $.ajax(
|
||||
{
|
||||
url: '../../../app-assets/data/app-calendar-events.js',
|
||||
type: 'GET',
|
||||
success: function (result) {
|
||||
// Get requested calendars as Array
|
||||
var calendars = selectedCalendars();
|
||||
|
||||
return [result.events.filter(event => calendars.includes(event.extendedProps.calendar))];
|
||||
},
|
||||
error: function (error) {
|
||||
console.log(error);
|
||||
}
|
||||
}
|
||||
); */
|
||||
|
||||
let calendars = selectedCalendars();
|
||||
// We are reading event object from app-calendar-events.js file directly by including that file above app-calendar file.
|
||||
// You should make an API call, look into above commented API call for reference
|
||||
let selectedEvents = currentEvents.filter(function (event) {
|
||||
// console.log(event.extendedProps.calendar.toLowerCase());
|
||||
return calendars.includes(event.extendedProps.calendar.toLowerCase());
|
||||
});
|
||||
// if (selectedEvents.length > 0) {
|
||||
successCallback(selectedEvents);
|
||||
// }
|
||||
}
|
||||
|
||||
// Init FullCalendar
|
||||
// ------------------------------------------------
|
||||
let calendar = new Calendar(calendarEl, {
|
||||
initialView: 'dayGridMonth',
|
||||
events: fetchEvents,
|
||||
plugins: [dayGridPlugin, interactionPlugin, listPlugin, timegridPlugin],
|
||||
editable: true,
|
||||
dragScroll: true,
|
||||
dayMaxEvents: 2,
|
||||
eventResizableFromStart: true,
|
||||
customButtons: {
|
||||
sidebarToggle: {
|
||||
text: 'Sidebar'
|
||||
}
|
||||
},
|
||||
headerToolbar: {
|
||||
start: 'sidebarToggle, prev,next, title',
|
||||
end: 'dayGridMonth,timeGridWeek,timeGridDay,listMonth'
|
||||
},
|
||||
direction: direction,
|
||||
initialDate: new Date(),
|
||||
navLinks: true, // can click day/week names to navigate views
|
||||
eventClassNames: function ({ event: calendarEvent }) {
|
||||
const colorName = calendarsColor[calendarEvent._def.extendedProps.calendar];
|
||||
// Background Color
|
||||
return ['fc-event-' + colorName];
|
||||
},
|
||||
dateClick: function (info) {
|
||||
let date = moment(info.date).format('YYYY-MM-DD');
|
||||
resetValues();
|
||||
bsAddEventSidebar.show();
|
||||
|
||||
// For new event set offcanvas title text: Add Event
|
||||
if (offcanvasTitle) {
|
||||
offcanvasTitle.innerHTML = 'Add Event';
|
||||
}
|
||||
btnSubmit.innerHTML = 'Add';
|
||||
btnSubmit.classList.remove('btn-update-event');
|
||||
btnSubmit.classList.add('btn-add-event');
|
||||
btnDeleteEvent.classList.add('d-none');
|
||||
eventStartDate.value = date;
|
||||
eventEndDate.value = date;
|
||||
},
|
||||
eventClick: function (info) {
|
||||
eventClick(info);
|
||||
},
|
||||
datesSet: function () {
|
||||
modifyToggler();
|
||||
},
|
||||
viewDidMount: function () {
|
||||
modifyToggler();
|
||||
}
|
||||
});
|
||||
|
||||
// Render calendar
|
||||
calendar.render();
|
||||
// Modify sidebar toggler
|
||||
modifyToggler();
|
||||
|
||||
const eventForm = document.getElementById('eventForm');
|
||||
const fv = FormValidation.formValidation(eventForm, {
|
||||
fields: {
|
||||
eventTitle: {
|
||||
validators: {
|
||||
notEmpty: {
|
||||
message: 'Please enter event title '
|
||||
}
|
||||
}
|
||||
},
|
||||
eventStartDate: {
|
||||
validators: {
|
||||
notEmpty: {
|
||||
message: 'Please enter start date '
|
||||
}
|
||||
}
|
||||
},
|
||||
eventEndDate: {
|
||||
validators: {
|
||||
notEmpty: {
|
||||
message: 'Please enter end date '
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
plugins: {
|
||||
trigger: new FormValidation.plugins.Trigger(),
|
||||
bootstrap5: new FormValidation.plugins.Bootstrap5({
|
||||
// Use this for enabling/changing valid/invalid class
|
||||
eleValidClass: '',
|
||||
rowSelector: function (field, ele) {
|
||||
// field is the field name & ele is the field element
|
||||
return '.mb-3';
|
||||
}
|
||||
}),
|
||||
submitButton: new FormValidation.plugins.SubmitButton(),
|
||||
// Submit the form when all fields are valid
|
||||
// defaultSubmit: new FormValidation.plugins.DefaultSubmit(),
|
||||
autoFocus: new FormValidation.plugins.AutoFocus()
|
||||
}
|
||||
})
|
||||
.on('core.form.valid', function () {
|
||||
// Jump to the next step when all fields in the current step are valid
|
||||
isFormValid = true;
|
||||
})
|
||||
.on('core.form.invalid', function () {
|
||||
// if fields are invalid
|
||||
isFormValid = false;
|
||||
});
|
||||
|
||||
// Sidebar Toggle Btn
|
||||
if (btnToggleSidebar) {
|
||||
btnToggleSidebar.addEventListener('click', e => {
|
||||
btnCancel.classList.remove('d-none');
|
||||
});
|
||||
}
|
||||
|
||||
// Add Event
|
||||
// ------------------------------------------------
|
||||
function addEvent(eventData) {
|
||||
// ? Add new event data to current events object and refetch it to display on calender
|
||||
// ? You can write below code to AJAX call success response
|
||||
|
||||
currentEvents.push(eventData);
|
||||
calendar.refetchEvents();
|
||||
|
||||
// ? To add event directly to calender (won't update currentEvents object)
|
||||
// calendar.addEvent(eventData);
|
||||
}
|
||||
|
||||
// Update Event
|
||||
// ------------------------------------------------
|
||||
function updateEvent(eventData) {
|
||||
// ? Update existing event data to current events object and refetch it to display on calender
|
||||
// ? You can write below code to AJAX call success response
|
||||
eventData.id = parseInt(eventData.id);
|
||||
currentEvents[currentEvents.findIndex(el => el.id === eventData.id)] = eventData; // Update event by id
|
||||
calendar.refetchEvents();
|
||||
|
||||
// ? To update event directly to calender (won't update currentEvents object)
|
||||
// let propsToUpdate = ['id', 'title', 'url'];
|
||||
// let extendedPropsToUpdate = ['calendar', 'guests', 'location', 'description'];
|
||||
|
||||
// updateEventInCalendar(eventData, propsToUpdate, extendedPropsToUpdate);
|
||||
}
|
||||
|
||||
// Remove Event
|
||||
// ------------------------------------------------
|
||||
|
||||
function removeEvent(eventId) {
|
||||
// ? Delete existing event data to current events object and refetch it to display on calender
|
||||
// ? You can write below code to AJAX call success response
|
||||
currentEvents = currentEvents.filter(function (event) {
|
||||
return event.id != eventId;
|
||||
});
|
||||
calendar.refetchEvents();
|
||||
|
||||
// ? To delete event directly to calender (won't update currentEvents object)
|
||||
// removeEventInCalendar(eventId);
|
||||
}
|
||||
|
||||
// (Update Event In Calendar (UI Only)
|
||||
// ------------------------------------------------
|
||||
const updateEventInCalendar = (updatedEventData, propsToUpdate, extendedPropsToUpdate) => {
|
||||
const existingEvent = calendar.getEventById(updatedEventData.id);
|
||||
|
||||
// --- Set event properties except date related ----- //
|
||||
// ? Docs: https://fullcalendar.io/docs/Event-setProp
|
||||
// dateRelatedProps => ['start', 'end', 'allDay']
|
||||
// eslint-disable-next-line no-plusplus
|
||||
for (var index = 0; index < propsToUpdate.length; index++) {
|
||||
var propName = propsToUpdate[index];
|
||||
existingEvent.setProp(propName, updatedEventData[propName]);
|
||||
}
|
||||
|
||||
// --- Set date related props ----- //
|
||||
// ? Docs: https://fullcalendar.io/docs/Event-setDates
|
||||
existingEvent.setDates(updatedEventData.start, updatedEventData.end, {
|
||||
allDay: updatedEventData.allDay
|
||||
});
|
||||
|
||||
// --- Set event's extendedProps ----- //
|
||||
// ? Docs: https://fullcalendar.io/docs/Event-setExtendedProp
|
||||
// eslint-disable-next-line no-plusplus
|
||||
for (var index = 0; index < extendedPropsToUpdate.length; index++) {
|
||||
var propName = extendedPropsToUpdate[index];
|
||||
existingEvent.setExtendedProp(propName, updatedEventData.extendedProps[propName]);
|
||||
}
|
||||
};
|
||||
|
||||
// Remove Event In Calendar (UI Only)
|
||||
// ------------------------------------------------
|
||||
function removeEventInCalendar(eventId) {
|
||||
calendar.getEventById(eventId).remove();
|
||||
}
|
||||
|
||||
// Add new event
|
||||
// ------------------------------------------------
|
||||
btnSubmit.addEventListener('click', e => {
|
||||
if (btnSubmit.classList.contains('btn-add-event')) {
|
||||
if (isFormValid) {
|
||||
let newEvent = {
|
||||
id: calendar.getEvents().length + 1,
|
||||
title: eventTitle.value,
|
||||
start: eventStartDate.value,
|
||||
end: eventEndDate.value,
|
||||
startStr: eventStartDate.value,
|
||||
endStr: eventEndDate.value,
|
||||
display: 'block',
|
||||
extendedProps: {
|
||||
location: eventLocation.value,
|
||||
guests: eventGuests.val(),
|
||||
calendar: eventLabel.val(),
|
||||
description: eventDescription.value
|
||||
}
|
||||
};
|
||||
if (eventUrl.value) {
|
||||
newEvent.url = eventUrl.value;
|
||||
}
|
||||
if (allDaySwitch.checked) {
|
||||
newEvent.allDay = true;
|
||||
}
|
||||
addEvent(newEvent);
|
||||
bsAddEventSidebar.hide();
|
||||
}
|
||||
} else {
|
||||
// Update event
|
||||
// ------------------------------------------------
|
||||
if (isFormValid) {
|
||||
let eventData = {
|
||||
id: eventToUpdate.id,
|
||||
title: eventTitle.value,
|
||||
start: eventStartDate.value,
|
||||
end: eventEndDate.value,
|
||||
url: eventUrl.value,
|
||||
extendedProps: {
|
||||
location: eventLocation.value,
|
||||
guests: eventGuests.val(),
|
||||
calendar: eventLabel.val(),
|
||||
description: eventDescription.value
|
||||
},
|
||||
display: 'block',
|
||||
allDay: allDaySwitch.checked ? true : false
|
||||
};
|
||||
|
||||
updateEvent(eventData);
|
||||
bsAddEventSidebar.hide();
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// Call removeEvent function
|
||||
btnDeleteEvent.addEventListener('click', e => {
|
||||
removeEvent(parseInt(eventToUpdate.id));
|
||||
// eventToUpdate.remove();
|
||||
bsAddEventSidebar.hide();
|
||||
});
|
||||
|
||||
// Reset event form inputs values
|
||||
// ------------------------------------------------
|
||||
function resetValues() {
|
||||
eventEndDate.value = '';
|
||||
eventUrl.value = '';
|
||||
eventStartDate.value = '';
|
||||
eventTitle.value = '';
|
||||
eventLocation.value = '';
|
||||
allDaySwitch.checked = false;
|
||||
eventGuests.val('').trigger('change');
|
||||
eventDescription.value = '';
|
||||
}
|
||||
|
||||
// When modal hides reset input values
|
||||
addEventSidebar.addEventListener('hidden.bs.offcanvas', function () {
|
||||
resetValues();
|
||||
});
|
||||
|
||||
// Hide left sidebar if the right sidebar is open
|
||||
btnToggleSidebar.addEventListener('click', e => {
|
||||
if (offcanvasTitle) {
|
||||
offcanvasTitle.innerHTML = 'Add Event';
|
||||
}
|
||||
btnSubmit.innerHTML = 'Add';
|
||||
btnSubmit.classList.remove('btn-update-event');
|
||||
btnSubmit.classList.add('btn-add-event');
|
||||
btnDeleteEvent.classList.add('d-none');
|
||||
appCalendarSidebar.classList.remove('show');
|
||||
appOverlay.classList.remove('show');
|
||||
});
|
||||
|
||||
// Calender filter functionality
|
||||
// ------------------------------------------------
|
||||
if (selectAll) {
|
||||
selectAll.addEventListener('click', e => {
|
||||
if (e.currentTarget.checked) {
|
||||
document.querySelectorAll('.input-filter').forEach(c => (c.checked = 1));
|
||||
} else {
|
||||
document.querySelectorAll('.input-filter').forEach(c => (c.checked = 0));
|
||||
}
|
||||
calendar.refetchEvents();
|
||||
});
|
||||
}
|
||||
|
||||
if (filterInput) {
|
||||
filterInput.forEach(item => {
|
||||
item.addEventListener('click', () => {
|
||||
document.querySelectorAll('.input-filter:checked').length < document.querySelectorAll('.input-filter').length
|
||||
? (selectAll.checked = false)
|
||||
: (selectAll.checked = true);
|
||||
calendar.refetchEvents();
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// Jump to date on sidebar(inline) calendar change
|
||||
inlineCalInstance.config.onChange.push(function (date) {
|
||||
calendar.changeView(calendar.view.type, moment(date[0]).format('YYYY-MM-DD'));
|
||||
modifyToggler();
|
||||
appCalendarSidebar.classList.remove('show');
|
||||
appOverlay.classList.remove('show');
|
||||
});
|
||||
})();
|
||||
});
|
||||
@ -1,208 +0,0 @@
|
||||
/**
|
||||
* App Chat
|
||||
*/
|
||||
|
||||
'use strict';
|
||||
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
(function () {
|
||||
const chatContactsBody = document.querySelector('.app-chat-contacts .sidebar-body'),
|
||||
chatContactListItems = [].slice.call(
|
||||
document.querySelectorAll('.chat-contact-list-item:not(.chat-contact-list-item-title)')
|
||||
),
|
||||
chatHistoryBody = document.querySelector('.chat-history-body'),
|
||||
chatSidebarLeftBody = document.querySelector('.app-chat-sidebar-left .sidebar-body'),
|
||||
chatSidebarRightBody = document.querySelector('.app-chat-sidebar-right .sidebar-body'),
|
||||
chatUserStatus = [].slice.call(document.querySelectorAll(".form-check-input[name='chat-user-status']")),
|
||||
chatSidebarLeftUserAbout = $('.chat-sidebar-left-user-about'),
|
||||
formSendMessage = document.querySelector('.form-send-message'),
|
||||
messageInput = document.querySelector('.message-input'),
|
||||
searchInput = document.querySelector('.chat-search-input'),
|
||||
speechToText = $('.speech-to-text'), // ! jQuery dependency for speech to text
|
||||
userStatusObj = {
|
||||
active: 'avatar-online',
|
||||
offline: 'avatar-offline',
|
||||
away: 'avatar-away',
|
||||
busy: 'avatar-busy'
|
||||
};
|
||||
|
||||
// Initialize PerfectScrollbar
|
||||
// ------------------------------
|
||||
|
||||
// Chat contacts scrollbar
|
||||
if (chatContactsBody) {
|
||||
new PerfectScrollbar(chatContactsBody, {
|
||||
wheelPropagation: false,
|
||||
suppressScrollX: true
|
||||
});
|
||||
}
|
||||
|
||||
// Chat history scrollbar
|
||||
if (chatHistoryBody) {
|
||||
new PerfectScrollbar(chatHistoryBody, {
|
||||
wheelPropagation: false,
|
||||
suppressScrollX: true
|
||||
});
|
||||
}
|
||||
|
||||
// Sidebar left scrollbar
|
||||
if (chatSidebarLeftBody) {
|
||||
new PerfectScrollbar(chatSidebarLeftBody, {
|
||||
wheelPropagation: false,
|
||||
suppressScrollX: true
|
||||
});
|
||||
}
|
||||
|
||||
// Sidebar right scrollbar
|
||||
if (chatSidebarRightBody) {
|
||||
new PerfectScrollbar(chatSidebarRightBody, {
|
||||
wheelPropagation: false,
|
||||
suppressScrollX: true
|
||||
});
|
||||
}
|
||||
|
||||
// Scroll to bottom function
|
||||
function scrollToBottom() {
|
||||
chatHistoryBody.scrollTo(0, chatHistoryBody.scrollHeight);
|
||||
}
|
||||
scrollToBottom();
|
||||
|
||||
// User About Maxlength Init
|
||||
if (chatSidebarLeftUserAbout.length) {
|
||||
chatSidebarLeftUserAbout.maxlength({
|
||||
alwaysShow: true,
|
||||
warningClass: 'label label-success bg-success text-white',
|
||||
limitReachedClass: 'label label-danger',
|
||||
separator: '/',
|
||||
validate: true,
|
||||
threshold: 120
|
||||
});
|
||||
}
|
||||
|
||||
// Update user status
|
||||
chatUserStatus.forEach(el => {
|
||||
el.addEventListener('click', e => {
|
||||
let chatLeftSidebarUserAvatar = document.querySelector('.chat-sidebar-left-user .avatar'),
|
||||
value = e.currentTarget.value;
|
||||
//Update status in left sidebar user avatar
|
||||
chatLeftSidebarUserAvatar.removeAttribute('class');
|
||||
Helpers._addClass('avatar avatar-xl ' + userStatusObj[value] + '', chatLeftSidebarUserAvatar);
|
||||
//Update status in contacts sidebar user avatar
|
||||
let chatContactsUserAvatar = document.querySelector('.app-chat-contacts .avatar');
|
||||
chatContactsUserAvatar.removeAttribute('class');
|
||||
Helpers._addClass('flex-shrink-0 avatar ' + userStatusObj[value] + ' me-3', chatContactsUserAvatar);
|
||||
});
|
||||
});
|
||||
|
||||
// Select chat or contact
|
||||
chatContactListItems.forEach(chatContactListItem => {
|
||||
// Bind click event to each chat contact list item
|
||||
chatContactListItem.addEventListener('click', e => {
|
||||
// Remove active class from chat contact list item
|
||||
chatContactListItems.forEach(chatContactListItem => {
|
||||
chatContactListItem.classList.remove('active');
|
||||
});
|
||||
// Add active class to current chat contact list item
|
||||
e.currentTarget.classList.add('active');
|
||||
});
|
||||
});
|
||||
|
||||
// Filter Chats
|
||||
if (searchInput) {
|
||||
searchInput.addEventListener('keyup', e => {
|
||||
let searchValue = e.currentTarget.value.toLowerCase(),
|
||||
searchChatListItemsCount = 0,
|
||||
searchContactListItemsCount = 0,
|
||||
chatListItem0 = document.querySelector('.chat-list-item-0'),
|
||||
contactListItem0 = document.querySelector('.contact-list-item-0'),
|
||||
searchChatListItems = [].slice.call(
|
||||
document.querySelectorAll('#chat-list li:not(.chat-contact-list-item-title)')
|
||||
),
|
||||
searchContactListItems = [].slice.call(
|
||||
document.querySelectorAll('#contact-list li:not(.chat-contact-list-item-title)')
|
||||
);
|
||||
|
||||
// Search in chats
|
||||
searchChatContacts(searchChatListItems, searchChatListItemsCount, searchValue, chatListItem0);
|
||||
// Search in contacts
|
||||
searchChatContacts(searchContactListItems, searchContactListItemsCount, searchValue, contactListItem0);
|
||||
});
|
||||
}
|
||||
|
||||
// Search chat and contacts function
|
||||
function searchChatContacts(searchListItems, searchListItemsCount, searchValue, listItem0) {
|
||||
searchListItems.forEach(searchListItem => {
|
||||
let searchListItemText = searchListItem.textContent.toLowerCase();
|
||||
if (searchValue) {
|
||||
if (-1 < searchListItemText.indexOf(searchValue)) {
|
||||
searchListItem.classList.add('d-flex');
|
||||
searchListItem.classList.remove('d-none');
|
||||
searchListItemsCount++;
|
||||
} else {
|
||||
searchListItem.classList.add('d-none');
|
||||
}
|
||||
} else {
|
||||
searchListItem.classList.add('d-flex');
|
||||
searchListItem.classList.remove('d-none');
|
||||
searchListItemsCount++;
|
||||
}
|
||||
});
|
||||
// Display no search fount if searchListItemsCount == 0
|
||||
if (searchListItemsCount == 0) {
|
||||
listItem0.classList.remove('d-none');
|
||||
} else {
|
||||
listItem0.classList.add('d-none');
|
||||
}
|
||||
}
|
||||
|
||||
// Send Message
|
||||
formSendMessage.addEventListener('submit', e => {
|
||||
e.preventDefault();
|
||||
if (messageInput.value) {
|
||||
// Create a div and add a class
|
||||
let renderMsg = document.createElement('div');
|
||||
renderMsg.className = 'chat-message-text mt-2';
|
||||
renderMsg.innerHTML = '<p class="mb-0">' + messageInput.value + '</p>';
|
||||
document.querySelector('li:last-child .chat-message-wrapper').appendChild(renderMsg);
|
||||
messageInput.value = '';
|
||||
scrollToBottom();
|
||||
}
|
||||
});
|
||||
|
||||
// on click of chatHistoryHeaderMenu, Remove data-overlay attribute from chatSidebarLeftClose to resolve overlay overlapping issue for two sidebar
|
||||
let chatHistoryHeaderMenu = document.querySelector(".chat-history-header [data-target='#app-chat-contacts']"),
|
||||
chatSidebarLeftClose = document.querySelector('.app-chat-sidebar-left .close-sidebar');
|
||||
chatHistoryHeaderMenu.addEventListener('click', e => {
|
||||
chatSidebarLeftClose.removeAttribute('data-overlay');
|
||||
});
|
||||
// }
|
||||
|
||||
// Speech To Text
|
||||
if (speechToText.length) {
|
||||
var SpeechRecognition = SpeechRecognition || webkitSpeechRecognition;
|
||||
if (SpeechRecognition !== undefined && SpeechRecognition !== null) {
|
||||
var recognition = new SpeechRecognition(),
|
||||
listening = false;
|
||||
speechToText.on('click', function () {
|
||||
const $this = $(this);
|
||||
recognition.onspeechstart = function () {
|
||||
listening = true;
|
||||
};
|
||||
if (listening === false) {
|
||||
recognition.start();
|
||||
}
|
||||
recognition.onerror = function (event) {
|
||||
listening = false;
|
||||
};
|
||||
recognition.onresult = function (event) {
|
||||
$this.closest('.form-send-message').find('.message-input').val(event.results[0][0].transcript);
|
||||
};
|
||||
recognition.onspeechend = function (event) {
|
||||
listening = false;
|
||||
recognition.stop();
|
||||
};
|
||||
});
|
||||
}
|
||||
}
|
||||
})();
|
||||
});
|
||||
@ -1,380 +0,0 @@
|
||||
/**
|
||||
* App Email
|
||||
*/
|
||||
|
||||
'use strict';
|
||||
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
(function () {
|
||||
const emailList = document.querySelector('.email-list'),
|
||||
emailListItems = [].slice.call(document.querySelectorAll('.email-list-item')),
|
||||
emailListItemInputs = [].slice.call(document.querySelectorAll('.email-list-item-input')),
|
||||
emailView = document.querySelector('.app-email-view-content'),
|
||||
emailFilters = document.querySelector('.email-filters'),
|
||||
emailFilterByFolders = [].slice.call(document.querySelectorAll('.email-filter-folders li')),
|
||||
emailEditor = document.querySelector('.email-editor'),
|
||||
appEmailSidebar = document.querySelector('.app-email-sidebar'),
|
||||
appOverlay = document.querySelector('.app-overlay'),
|
||||
emailReplyEditor = document.querySelector('.email-reply-editor'),
|
||||
bookmarkEmail = [].slice.call(document.querySelectorAll('.email-list-item-bookmark')),
|
||||
selectAllEmails = document.getElementById('email-select-all'),
|
||||
emailSearch = document.querySelector('.email-search-input'),
|
||||
toggleCC = document.querySelector('.email-compose-toggle-cc'),
|
||||
toggleBCC = document.querySelector('.email-compose-toggle-bcc'),
|
||||
emailCompose = document.querySelector('.app-email-compose'),
|
||||
emailListDelete = document.querySelector('.email-list-delete'),
|
||||
emailListRead = document.querySelector('.email-list-read'),
|
||||
refreshEmails = document.querySelector('.email-refresh'),
|
||||
emailViewContainer = document.getElementById('app-email-view'),
|
||||
emailFilterFolderLists = [].slice.call(document.querySelectorAll('.email-filter-folders li')),
|
||||
emailListItemActions = [].slice.call(document.querySelectorAll('.email-list-item-actions li'));
|
||||
|
||||
// Initialize PerfectScrollbar
|
||||
// ------------------------------
|
||||
// Email list scrollbar
|
||||
if (emailList) {
|
||||
let emailListInstance = new PerfectScrollbar(emailList, {
|
||||
wheelPropagation: false,
|
||||
suppressScrollX: true
|
||||
});
|
||||
}
|
||||
|
||||
// Sidebar tags scrollbar
|
||||
if (emailFilters) {
|
||||
new PerfectScrollbar(emailFilters, {
|
||||
wheelPropagation: false,
|
||||
suppressScrollX: true
|
||||
});
|
||||
}
|
||||
|
||||
// Email view scrollbar
|
||||
if (emailView) {
|
||||
new PerfectScrollbar(emailView, {
|
||||
wheelPropagation: false,
|
||||
suppressScrollX: true
|
||||
});
|
||||
}
|
||||
|
||||
// Initialize Quill Editor
|
||||
// ------------------------------
|
||||
if (emailEditor) {
|
||||
new Quill('.email-editor', {
|
||||
modules: {
|
||||
toolbar: '.email-editor-toolbar'
|
||||
},
|
||||
placeholder: 'Write your message... ',
|
||||
theme: 'snow'
|
||||
});
|
||||
}
|
||||
|
||||
if (emailReplyEditor) {
|
||||
new Quill('.email-reply-editor', {
|
||||
modules: {
|
||||
toolbar: '.email-reply-toolbar'
|
||||
},
|
||||
placeholder: 'Write your message... ',
|
||||
theme: 'snow'
|
||||
});
|
||||
}
|
||||
|
||||
// Bookmark email
|
||||
if (bookmarkEmail) {
|
||||
bookmarkEmail.forEach(emailItem => {
|
||||
emailItem.addEventListener('click', e => {
|
||||
let emailItem = e.currentTarget.parentNode.parentNode;
|
||||
let starredAttr = emailItem.getAttribute('data-starred');
|
||||
e.stopPropagation();
|
||||
if (!starredAttr) {
|
||||
emailItem.setAttribute('data-starred', 'true');
|
||||
} else {
|
||||
emailItem.removeAttribute('data-starred');
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// Select all
|
||||
if (selectAllEmails) {
|
||||
selectAllEmails.addEventListener('click', e => {
|
||||
if (e.currentTarget.checked) {
|
||||
emailListItemInputs.forEach(c => (c.checked = 1));
|
||||
} else {
|
||||
emailListItemInputs.forEach(c => (c.checked = 0));
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Select single email
|
||||
if (emailListItemInputs) {
|
||||
emailListItemInputs.forEach(emailListItemInput => {
|
||||
emailListItemInput.addEventListener('click', e => {
|
||||
e.stopPropagation();
|
||||
// Check input count to reset the indeterminate state
|
||||
let emailListItemInputCount = 0;
|
||||
emailListItemInputs.forEach(emailListItemInput => {
|
||||
if (emailListItemInput.checked) {
|
||||
emailListItemInputCount++;
|
||||
}
|
||||
});
|
||||
|
||||
if (emailListItemInputCount < emailListItemInputs.length) {
|
||||
if (emailListItemInputCount == 0) {
|
||||
selectAllEmails.indeterminate = false;
|
||||
} else {
|
||||
selectAllEmails.indeterminate = true;
|
||||
}
|
||||
} else {
|
||||
if (emailListItemInputCount == emailListItemInputs.length) {
|
||||
selectAllEmails.indeterminate = false;
|
||||
selectAllEmails.checked = true;
|
||||
} else {
|
||||
selectAllEmails.indeterminate = false;
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// Search email based on searched text
|
||||
if (emailSearch) {
|
||||
emailSearch.addEventListener('keyup', e => {
|
||||
let searchValue = e.currentTarget.value.toLowerCase(),
|
||||
searchEmailListItems = {},
|
||||
selectedFolderFilter = document.querySelector('.email-filter-folders .active').getAttribute('data-target');
|
||||
|
||||
// Filter emails based on selected folders
|
||||
if (selectedFolderFilter != 'inbox') {
|
||||
searchEmailListItems = [].slice.call(
|
||||
document.querySelectorAll('.email-list-item[data-' + selectedFolderFilter + '="true"]')
|
||||
);
|
||||
} else {
|
||||
searchEmailListItems = [].slice.call(document.querySelectorAll('.email-list-item'));
|
||||
}
|
||||
|
||||
// console.log(searchValue);
|
||||
searchEmailListItems.forEach(searchEmailListItem => {
|
||||
let searchEmailListItemText = searchEmailListItem.textContent.toLowerCase();
|
||||
if (searchValue) {
|
||||
if (-1 < searchEmailListItemText.indexOf(searchValue)) {
|
||||
searchEmailListItem.classList.add('d-block');
|
||||
} else {
|
||||
searchEmailListItem.classList.add('d-none');
|
||||
}
|
||||
} else {
|
||||
searchEmailListItem.classList.remove('d-none');
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// Filter based on folder type (Inbox, Sent, Draft etc...)
|
||||
emailFilterByFolders.forEach(emailFilterByFolder => {
|
||||
emailFilterByFolder.addEventListener('click', e => {
|
||||
let currentTarget = e.currentTarget,
|
||||
currentTargetData = currentTarget.getAttribute('data-target');
|
||||
|
||||
appEmailSidebar.classList.remove('show');
|
||||
appOverlay.classList.remove('show');
|
||||
|
||||
// Remove active class from each folder filters
|
||||
Helpers._removeClass('active', emailFilterByFolders);
|
||||
// Add active class to selected folder filters
|
||||
currentTarget.classList.add('active');
|
||||
emailListItems.forEach(emailListItem => {
|
||||
// If folder filter is Inbox
|
||||
if (currentTargetData == 'inbox') {
|
||||
emailListItem.classList.add('d-block');
|
||||
emailListItem.classList.remove('d-none');
|
||||
} else if (emailListItem.hasAttribute('data-' + currentTargetData)) {
|
||||
emailListItem.classList.add('d-block');
|
||||
emailListItem.classList.remove('d-none');
|
||||
} else {
|
||||
emailListItem.classList.add('d-none');
|
||||
emailListItem.classList.remove('d-block');
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
// Toggle CC/BCC input
|
||||
if (toggleBCC) {
|
||||
toggleBCC.addEventListener('click', e => {
|
||||
Helpers._toggleClass(document.querySelector('.email-compose-bcc'), 'd-block', 'd-none');
|
||||
});
|
||||
}
|
||||
|
||||
if (toggleCC) {
|
||||
toggleCC.addEventListener('click', e => {
|
||||
Helpers._toggleClass(document.querySelector('.email-compose-cc'), 'd-block', 'd-none');
|
||||
});
|
||||
}
|
||||
|
||||
// Empty compose email message inputs when modal is hidden
|
||||
emailCompose.addEventListener('hidden.bs.modal', event => {
|
||||
document.querySelector('.email-editor .ql-editor').innerHTML = '';
|
||||
$('#emailContacts').val('');
|
||||
initSelect2();
|
||||
});
|
||||
|
||||
// Delete multiple email
|
||||
if (emailListDelete) {
|
||||
emailListDelete.addEventListener('click', e => {
|
||||
emailListItemInputs.forEach(emailListItemInput => {
|
||||
if (emailListItemInput.checked) {
|
||||
emailListItemInput.parentNode.closest('li.email-list-item').remove();
|
||||
}
|
||||
});
|
||||
selectAllEmails.indeterminate = false;
|
||||
selectAllEmails.checked = false;
|
||||
});
|
||||
}
|
||||
|
||||
// Mark as read
|
||||
if (emailListRead) {
|
||||
emailListRead.addEventListener('click', e => {
|
||||
emailListItemInputs.forEach(emailListItemInput => {
|
||||
if (emailListItemInput.checked) {
|
||||
emailListItemInput.checked = false;
|
||||
emailListItemInput.parentNode.closest('li.email-list-item').classList.add('email-marked-read');
|
||||
let emailItemEnvelop = emailListItemInput.parentNode
|
||||
.closest('li.email-list-item')
|
||||
.querySelector('.email-list-item-actions li');
|
||||
|
||||
if (Helpers._hasClass('email-read', emailItemEnvelop)) {
|
||||
emailItemEnvelop.classList.remove('email-read');
|
||||
emailItemEnvelop.classList.add('email-unread');
|
||||
emailItemEnvelop.querySelector('i').classList.remove('ti-mail-opened');
|
||||
emailItemEnvelop.querySelector('i').classList.add('ti-mail');
|
||||
}
|
||||
}
|
||||
});
|
||||
selectAllEmails.indeterminate = false;
|
||||
selectAllEmails.checked = false;
|
||||
});
|
||||
}
|
||||
|
||||
// Refresh Mails
|
||||
|
||||
if (refreshEmails && emailList) {
|
||||
let emailListJq = $('.email-list'),
|
||||
emailListInstance = new PerfectScrollbar(emailList, {
|
||||
wheelPropagation: false,
|
||||
suppressScrollX: true
|
||||
});
|
||||
// ? Using jquery vars due to BlockUI jQuery dependency
|
||||
refreshEmails.addEventListener('click', e => {
|
||||
emailListJq.block({
|
||||
message: '<div class="spinner-border text-primary" role="status"></div>',
|
||||
timeout: 1000,
|
||||
css: {
|
||||
backgroundColor: 'transparent',
|
||||
border: '0'
|
||||
},
|
||||
overlayCSS: {
|
||||
backgroundColor: '#000',
|
||||
opacity: 0.1
|
||||
},
|
||||
onBlock: function () {
|
||||
emailListInstance.settings.suppressScrollY = true;
|
||||
},
|
||||
onUnblock: function () {
|
||||
emailListInstance.settings.suppressScrollY = false;
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// Earlier msgs
|
||||
// ? Using jquery vars due to jQuery animation (slideToggle) dependency
|
||||
let earlierMsg = $('.email-earlier-msgs');
|
||||
if (earlierMsg.length) {
|
||||
earlierMsg.on('click', function () {
|
||||
let $this = $(this);
|
||||
$this.parents().find('.email-card-last').addClass('hide-pseudo');
|
||||
$this.next('.email-card-prev').slideToggle();
|
||||
$this.remove();
|
||||
});
|
||||
}
|
||||
|
||||
// Email contacts (select2)
|
||||
// ? Using jquery vars due to select2 jQuery dependency
|
||||
let emailContacts = $('#emailContacts');
|
||||
function initSelect2() {
|
||||
if (emailContacts.length) {
|
||||
function renderContactsAvatar(option) {
|
||||
if (!option.id) {
|
||||
return option.text;
|
||||
}
|
||||
let $avatar =
|
||||
"<div class='d-flex flex-wrap align-items-center'>" +
|
||||
"<div class='avatar avatar-xs me-2'>" +
|
||||
"<img src='" +
|
||||
assetsPath +
|
||||
'img/avatars/' +
|
||||
$(option.element).data('avatar') +
|
||||
"' alt='avatar' class='rounded-circle' />" +
|
||||
'</div>' +
|
||||
option.text +
|
||||
'</div>';
|
||||
|
||||
return $avatar;
|
||||
}
|
||||
emailContacts.wrap('<div class="position-relative"></div>').select2({
|
||||
placeholder: 'Select value',
|
||||
dropdownParent: emailContacts.parent(),
|
||||
closeOnSelect: false,
|
||||
templateResult: renderContactsAvatar,
|
||||
templateSelection: renderContactsAvatar,
|
||||
escapeMarkup: function (es) {
|
||||
return es;
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
initSelect2();
|
||||
|
||||
// Scroll to bottom on reply click
|
||||
// ? Using jquery vars due to jQuery animation dependency
|
||||
let emailViewContent = $('.app-email-view-content');
|
||||
emailViewContent.find('.scroll-to-reply').on('click', function () {
|
||||
if (emailViewContent[0].scrollTop === 0) {
|
||||
emailViewContent.animate(
|
||||
{
|
||||
scrollTop: emailViewContent[0].scrollHeight
|
||||
},
|
||||
1500
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
// Close view on email filter folder list click
|
||||
if (emailFilterFolderLists) {
|
||||
emailFilterFolderLists.forEach(emailFilterFolderList => {
|
||||
emailFilterFolderList.addEventListener('click', e => {
|
||||
emailViewContainer.classList.remove('show');
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// Email List Items Actions
|
||||
if (emailListItemActions) {
|
||||
emailListItemActions.forEach(emailListItemAction => {
|
||||
emailListItemAction.addEventListener('click', e => {
|
||||
e.stopPropagation();
|
||||
let currentTarget = e.currentTarget;
|
||||
if (Helpers._hasClass('email-delete', currentTarget)) {
|
||||
currentTarget.parentNode.closest('li.email-list-item').remove();
|
||||
} else if (Helpers._hasClass('email-read', currentTarget)) {
|
||||
currentTarget.parentNode.closest('li.email-list-item').classList.add('email-marked-read');
|
||||
Helpers._toggleClass(currentTarget, 'email-read', 'email-unread');
|
||||
Helpers._toggleClass(currentTarget.querySelector('i'), 'ti-mail-opened', 'ti-mail');
|
||||
} else if (Helpers._hasClass('email-unread', currentTarget)) {
|
||||
currentTarget.parentNode.closest('li.email-list-item').classList.remove('email-marked-read');
|
||||
Helpers._toggleClass(currentTarget, 'email-read', 'email-unread');
|
||||
Helpers._toggleClass(currentTarget.querySelector('i'), 'ti-mail-opened', 'ti-mail');
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
})();
|
||||
});
|
||||
@ -1,127 +0,0 @@
|
||||
/**
|
||||
* App Invoice - Add
|
||||
*/
|
||||
|
||||
'use strict';
|
||||
|
||||
(function () {
|
||||
const invoiceItemPriceList = document.querySelectorAll('.invoice-item-price'),
|
||||
invoiceItemQtyList = document.querySelectorAll('.invoice-item-qty'),
|
||||
invoiceDateList = document.querySelectorAll('.date-picker');
|
||||
|
||||
// Price
|
||||
if (invoiceItemPriceList) {
|
||||
invoiceItemPriceList.forEach(function (invoiceItemPrice) {
|
||||
new Cleave(invoiceItemPrice, {
|
||||
delimiter: '',
|
||||
numeral: true
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// Qty
|
||||
if (invoiceItemQtyList) {
|
||||
invoiceItemQtyList.forEach(function (invoiceItemQty) {
|
||||
new Cleave(invoiceItemQty, {
|
||||
delimiter: '',
|
||||
numeral: true
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// Datepicker
|
||||
if (invoiceDateList) {
|
||||
invoiceDateList.forEach(function (invoiceDateEl) {
|
||||
invoiceDateEl.flatpickr({
|
||||
monthSelectorType: 'static'
|
||||
});
|
||||
});
|
||||
}
|
||||
})();
|
||||
|
||||
// repeater (jquery)
|
||||
$(function () {
|
||||
var applyChangesBtn = $('.btn-apply-changes'),
|
||||
discount,
|
||||
tax1,
|
||||
tax2,
|
||||
discountInput,
|
||||
tax1Input,
|
||||
tax2Input,
|
||||
sourceItem = $('.source-item'),
|
||||
adminDetails = {
|
||||
'App Design': 'Designed UI kit & app pages.',
|
||||
'App Customization': 'Customization & Bug Fixes.',
|
||||
'ABC Template': 'Bootstrap 4 admin template.',
|
||||
'App Development': 'Native App Development.'
|
||||
};
|
||||
|
||||
// Prevent dropdown from closing on tax change
|
||||
$(document).on('click', '.tax-select', function (e) {
|
||||
e.stopPropagation();
|
||||
});
|
||||
|
||||
// On tax change update it's value value
|
||||
function updateValue(listener, el) {
|
||||
listener.closest('.repeater-wrapper').find(el).text(listener.val());
|
||||
}
|
||||
|
||||
// Apply item changes btn
|
||||
if (applyChangesBtn.length) {
|
||||
$(document).on('click', '.btn-apply-changes', function (e) {
|
||||
var $this = $(this);
|
||||
tax1Input = $this.closest('.dropdown-menu').find('#taxInput1');
|
||||
tax2Input = $this.closest('.dropdown-menu').find('#taxInput2');
|
||||
discountInput = $this.closest('.dropdown-menu').find('#discountInput');
|
||||
tax1 = $this.closest('.repeater-wrapper').find('.tax-1');
|
||||
tax2 = $this.closest('.repeater-wrapper').find('.tax-2');
|
||||
discount = $('.discount');
|
||||
|
||||
if (tax1Input.val() !== null) {
|
||||
updateValue(tax1Input, tax1);
|
||||
}
|
||||
|
||||
if (tax2Input.val() !== null) {
|
||||
updateValue(tax2Input, tax2);
|
||||
}
|
||||
|
||||
if (discountInput.val().length) {
|
||||
$this
|
||||
.closest('.repeater-wrapper')
|
||||
.find(discount)
|
||||
.text(discountInput.val() + '%');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Repeater init
|
||||
if (sourceItem.length) {
|
||||
sourceItem.on('submit', function (e) {
|
||||
e.preventDefault();
|
||||
});
|
||||
sourceItem.repeater({
|
||||
show: function () {
|
||||
$(this).slideDown();
|
||||
// Initialize tooltip on load of each item
|
||||
const tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
|
||||
tooltipTriggerList.map(function (tooltipTriggerEl) {
|
||||
return new bootstrap.Tooltip(tooltipTriggerEl);
|
||||
});
|
||||
},
|
||||
hide: function (e) {
|
||||
$(this).slideUp();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Item details select onchange
|
||||
$(document).on('change', '.item-details', function () {
|
||||
var $this = $(this),
|
||||
value = adminDetails[$this.val()];
|
||||
if ($this.next('textarea').length) {
|
||||
$this.next('textarea').val(value);
|
||||
} else {
|
||||
$this.after('<textarea class="form-control" rows="2">' + value + '</textarea>');
|
||||
}
|
||||
});
|
||||
});
|
||||
@ -1,134 +0,0 @@
|
||||
/**
|
||||
* App Invoice - Edit
|
||||
*/
|
||||
|
||||
'use strict';
|
||||
|
||||
(function () {
|
||||
const invoiceItemPriceList = document.querySelectorAll('.invoice-item-price'),
|
||||
invoiceItemQtyList = document.querySelectorAll('.invoice-item-qty'),
|
||||
date = new Date(),
|
||||
invoiceDate = document.querySelector('.invoice-date'),
|
||||
dueDate = document.querySelector('.due-date');
|
||||
|
||||
// Price
|
||||
if (invoiceItemPriceList) {
|
||||
invoiceItemPriceList.forEach(function (invoiceItemPrice) {
|
||||
new Cleave(invoiceItemPrice, {
|
||||
delimiter: '',
|
||||
numeral: true
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// Qty
|
||||
if (invoiceItemQtyList) {
|
||||
invoiceItemQtyList.forEach(function (invoiceItemQty) {
|
||||
new Cleave(invoiceItemQty, {
|
||||
delimiter: '',
|
||||
numeral: true
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// Datepicker
|
||||
if (invoiceDate) {
|
||||
invoiceDate.flatpickr({
|
||||
monthSelectorType: 'static',
|
||||
defaultDate: date
|
||||
});
|
||||
}
|
||||
if (dueDate) {
|
||||
dueDate.flatpickr({
|
||||
monthSelectorType: 'static',
|
||||
defaultDate: new Date(date.getFullYear(), date.getMonth(), date.getDate() + 5)
|
||||
});
|
||||
}
|
||||
})();
|
||||
|
||||
// repeater (jquery)
|
||||
$(function () {
|
||||
var applyChangesBtn = $('.btn-apply-changes'),
|
||||
discount,
|
||||
tax1,
|
||||
tax2,
|
||||
discountInput,
|
||||
taxInput1,
|
||||
taxInput2,
|
||||
sourceItem = $('.source-item'),
|
||||
adminDetails = {
|
||||
'App Design': 'Designed UI kit & app pages.',
|
||||
'App Customization': 'Customization & Bug Fixes.',
|
||||
'ABC Template': 'Bootstrap 4 admin template.',
|
||||
'App Development': 'Native App Development.'
|
||||
};
|
||||
|
||||
// Prevent dropdown from closing on tax change
|
||||
$(document).on('click', '.tax-select', function (e) {
|
||||
e.stopPropagation();
|
||||
});
|
||||
|
||||
// On tax change update it's value value
|
||||
function updateValue(listener, el) {
|
||||
listener.closest('.repeater-wrapper').find(el).text(listener.val());
|
||||
}
|
||||
|
||||
// Apply item changes btn
|
||||
if (applyChangesBtn.length) {
|
||||
$(document).on('click', '.btn-apply-changes', function (e) {
|
||||
var $this = $(this);
|
||||
taxInput1 = $this.closest('.dropdown-menu').find('#taxInput1');
|
||||
taxInput2 = $this.closest('.dropdown-menu').find('#taxInput2');
|
||||
discountInput = $this.closest('.dropdown-menu').find('#discountInput');
|
||||
tax1 = $this.closest('.repeater-wrapper').find('.tax-1');
|
||||
tax2 = $this.closest('.repeater-wrapper').find('.tax-2');
|
||||
discount = $('.discount');
|
||||
|
||||
if (taxInput1.val() !== null) {
|
||||
updateValue(taxInput1, tax1);
|
||||
}
|
||||
|
||||
if (taxInput2.val() !== null) {
|
||||
updateValue(taxInput2, tax2);
|
||||
}
|
||||
|
||||
if (discountInput.val().length) {
|
||||
$this
|
||||
.closest('.repeater-wrapper')
|
||||
.find(discount)
|
||||
.text(discountInput.val() + '%');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Repeater init
|
||||
if (sourceItem.length) {
|
||||
sourceItem.on('submit', function (e) {
|
||||
e.preventDefault();
|
||||
});
|
||||
sourceItem.repeater({
|
||||
show: function () {
|
||||
$(this).slideDown();
|
||||
// Initialize tooltip on load of each item
|
||||
const tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
|
||||
tooltipTriggerList.map(function (tooltipTriggerEl) {
|
||||
return new bootstrap.Tooltip(tooltipTriggerEl);
|
||||
});
|
||||
},
|
||||
hide: function (e) {
|
||||
$(this).slideUp();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Item details select onchange
|
||||
$(document).on('change', '.item-details', function () {
|
||||
var $this = $(this),
|
||||
value = adminDetails[$this.val()];
|
||||
if ($this.next('textarea').length) {
|
||||
$this.next('textarea').val(value);
|
||||
} else {
|
||||
$this.after('<textarea class="form-control" rows="2">' + value + '</textarea>');
|
||||
}
|
||||
});
|
||||
});
|
||||
@ -1,297 +0,0 @@
|
||||
/**
|
||||
* App Invoice List (jquery)
|
||||
*/
|
||||
|
||||
'use strict';
|
||||
|
||||
$(function () {
|
||||
// Variable declaration for table
|
||||
var dt_invoice_table = $('.invoice-list-table');
|
||||
|
||||
// Invoice datatable
|
||||
if (dt_invoice_table.length) {
|
||||
var dt_invoice = dt_invoice_table.DataTable({
|
||||
ajax: assetsPath + 'json/invoice-list.json', // JSON file to add data
|
||||
columns: [
|
||||
// columns according to JSON
|
||||
{ data: '' },
|
||||
{ data: 'invoice_id' },
|
||||
{ data: 'invoice_status' },
|
||||
{ data: 'issued_date' },
|
||||
{ data: 'client_name' },
|
||||
{ data: 'total' },
|
||||
{ data: 'balance' },
|
||||
{ data: 'invoice_status' },
|
||||
{ data: 'action' }
|
||||
],
|
||||
columnDefs: [
|
||||
{
|
||||
// For Responsive
|
||||
className: 'control',
|
||||
responsivePriority: 2,
|
||||
searchable: false,
|
||||
targets: 0,
|
||||
render: function (data, type, full, meta) {
|
||||
return '';
|
||||
}
|
||||
},
|
||||
{
|
||||
// Invoice ID
|
||||
targets: 1,
|
||||
render: function (data, type, full, meta) {
|
||||
var $invoice_id = full['invoice_id'];
|
||||
// Creates full output for row
|
||||
var $row_output = '<a href="app-invoice-preview.html">#' + $invoice_id + '</a>';
|
||||
return $row_output;
|
||||
}
|
||||
},
|
||||
{
|
||||
// Invoice status
|
||||
targets: 2,
|
||||
render: function (data, type, full, meta) {
|
||||
var $invoice_status = full['invoice_status'],
|
||||
$due_date = full['due_date'],
|
||||
$balance = full['balance'];
|
||||
var roleBadgeObj = {
|
||||
Sent: '<span class="badge badge-center rounded-pill bg-label-secondary w-px-30 h-px-30"><i class="ti ti-circle-check ti-sm"></i></span>',
|
||||
Draft:
|
||||
'<span class="badge badge-center rounded-pill bg-label-primary w-px-30 h-px-30"><i class="ti ti-device-floppy ti-sm"></i></span>',
|
||||
'Past Due':
|
||||
'<span class="badge badge-center rounded-pill bg-label-danger w-px-30 h-px-30"><i class="ti ti-info-circle ti-sm"></i></span>',
|
||||
'Partial Payment':
|
||||
'<span class="badge badge-center rounded-pill bg-label-success w-px-30 h-px-30"><i class="ti ti-circle-half-2 ti-sm"></i></span>',
|
||||
Paid: '<span class="badge badge-center rounded-pill bg-label-warning w-px-30 h-px-30"><i class="ti ti-chart-pie ti-sm"></i></span>',
|
||||
Downloaded:
|
||||
'<span class="badge badge-center rounded-pill bg-label-info w-px-30 h-px-30"><i class="ti ti-arrow-down-circle ti-sm"></i></span>'
|
||||
};
|
||||
return (
|
||||
"<span data-bs-toggle='tooltip' data-bs-html='true' title='<span>" +
|
||||
$invoice_status +
|
||||
'<br> <strong>Balance:</strong> ' +
|
||||
$balance +
|
||||
'<br> <strong>Due Date:</strong> ' +
|
||||
$due_date +
|
||||
"</span>'>" +
|
||||
roleBadgeObj[$invoice_status] +
|
||||
'</span>'
|
||||
);
|
||||
}
|
||||
},
|
||||
{
|
||||
// Client name and Service
|
||||
targets: 3,
|
||||
responsivePriority: 4,
|
||||
render: function (data, type, full, meta) {
|
||||
var $name = full['client_name'],
|
||||
$service = full['service'],
|
||||
$image = full['avatar_image'],
|
||||
$rand_num = Math.floor(Math.random() * 11) + 1,
|
||||
$user_img = $rand_num + '.png';
|
||||
if ($image === true) {
|
||||
// For Avatar image
|
||||
var $output =
|
||||
'<img src="' + assetsPath + 'img/avatars/' + $user_img + '" alt="Avatar" class="rounded-circle">';
|
||||
} else {
|
||||
// For Avatar badge
|
||||
var stateNum = Math.floor(Math.random() * 6),
|
||||
states = ['success', 'danger', 'warning', 'info', 'primary', 'secondary'],
|
||||
$state = states[stateNum],
|
||||
$name = full['client_name'],
|
||||
$initials = $name.match(/\b\w/g) || [];
|
||||
$initials = (($initials.shift() || '') + ($initials.pop() || '')).toUpperCase();
|
||||
$output = '<span class="avatar-initial rounded-circle bg-label-' + $state + '">' + $initials + '</span>';
|
||||
}
|
||||
// Creates full output for row
|
||||
var $row_output =
|
||||
'<div class="d-flex justify-content-start align-items-center">' +
|
||||
'<div class="avatar-wrapper">' +
|
||||
'<div class="avatar avatar-sm me-2">' +
|
||||
$output +
|
||||
'</div>' +
|
||||
'</div>' +
|
||||
'<div class="d-flex flex-column">' +
|
||||
'<a href="pages-profile-user.html" class="text-body text-truncate"><span class="fw-semibold">' +
|
||||
$name +
|
||||
'</span></a>' +
|
||||
'<small class="text-truncate text-muted">' +
|
||||
$service +
|
||||
'</small>' +
|
||||
'</div>' +
|
||||
'</div>';
|
||||
return $row_output;
|
||||
}
|
||||
},
|
||||
{
|
||||
// Total Invoice Amount
|
||||
targets: 4,
|
||||
render: function (data, type, full, meta) {
|
||||
var $total = full['total'];
|
||||
return '<span class="d-none">' + $total + '</span>$' + $total;
|
||||
}
|
||||
},
|
||||
{
|
||||
// Due Date
|
||||
targets: 5,
|
||||
render: function (data, type, full, meta) {
|
||||
var $due_date = new Date(full['due_date']);
|
||||
// Creates full output for row
|
||||
var $row_output =
|
||||
'<span class="d-none">' +
|
||||
moment($due_date).format('YYYYMMDD') +
|
||||
'</span>' +
|
||||
moment($due_date).format('DD MMM YYYY');
|
||||
$due_date;
|
||||
return $row_output;
|
||||
}
|
||||
},
|
||||
{
|
||||
// Client Balance/Status
|
||||
targets: 6,
|
||||
orderable: false,
|
||||
render: function (data, type, full, meta) {
|
||||
var $balance = full['balance'];
|
||||
if ($balance === 0) {
|
||||
var $badge_class = 'bg-label-success';
|
||||
return '<span class="badge ' + $badge_class + '" text-capitalized> Paid </span>';
|
||||
} else {
|
||||
return '<span class="d-none">' + $balance + '</span>' + $balance;
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
targets: 7,
|
||||
visible: false
|
||||
},
|
||||
{
|
||||
// Actions
|
||||
targets: -1,
|
||||
title: 'Actions',
|
||||
searchable: false,
|
||||
orderable: false,
|
||||
render: function (data, type, full, meta) {
|
||||
return (
|
||||
'<div class="d-flex align-items-center">' +
|
||||
'<a href="javascript:;" data-bs-toggle="tooltip" class="text-body" data-bs-placement="top" title="Send Mail"><i class="ti ti-mail mx-2 ti-sm"></i></a>' +
|
||||
'<a href="app-invoice-preview.html" data-bs-toggle="tooltip" class="text-body" data-bs-placement="top" title="Preview Invoice"><i class="ti ti-eye mx-2 ti-sm"></i></a>' +
|
||||
'<div class="dropdown">' +
|
||||
'<a href="javascript:;" class="btn dropdown-toggle hide-arrow text-body p-0" data-bs-toggle="dropdown"><i class="ti ti-dots-vertical ti-sm"></i></a>' +
|
||||
'<div class="dropdown-menu dropdown-menu-end">' +
|
||||
'<a href="javascript:;" class="dropdown-item">Download</a>' +
|
||||
'<a href="app-invoice-edit.html" class="dropdown-item">Edit</a>' +
|
||||
'<a href="javascript:;" class="dropdown-item">Duplicate</a>' +
|
||||
'<div class="dropdown-divider"></div>' +
|
||||
'<a href="javascript:;" class="dropdown-item delete-record text-danger">Delete</a>' +
|
||||
'</div>' +
|
||||
'</div>' +
|
||||
'</div>'
|
||||
);
|
||||
}
|
||||
}
|
||||
],
|
||||
order: [[1, 'desc']],
|
||||
dom:
|
||||
'<"row ms-2 me-3"' +
|
||||
'<"col-12 col-md-6 d-flex align-items-center justify-content-center justify-content-md-start gap-2"l<"dt-action-buttons text-xl-end text-lg-start text-md-end text-start mt-md-0 mt-3"B>>' +
|
||||
'<"col-12 col-md-6 d-flex align-items-center justify-content-end flex-column flex-md-row pe-3 gap-md-2"f<"invoice_status mb-3 mb-md-0">>' +
|
||||
'>t' +
|
||||
'<"row mx-2"' +
|
||||
'<"col-sm-12 col-md-6"i>' +
|
||||
'<"col-sm-12 col-md-6"p>' +
|
||||
'>',
|
||||
language: {
|
||||
sLengthMenu: 'Show _MENU_',
|
||||
search: '',
|
||||
searchPlaceholder: 'Search Invoice'
|
||||
},
|
||||
// Buttons with Dropdown
|
||||
buttons: [
|
||||
{
|
||||
text: '<i class="ti ti-plus me-md-1"></i><span class="d-md-inline-block d-none">Create Invoice</span>',
|
||||
className: 'btn btn-primary',
|
||||
action: function (e, dt, button, config) {
|
||||
window.location = 'app-invoice-add.html';
|
||||
}
|
||||
}
|
||||
],
|
||||
// For responsive popup
|
||||
responsive: {
|
||||
details: {
|
||||
display: $.fn.dataTable.Responsive.display.modal({
|
||||
header: function (row) {
|
||||
var data = row.data();
|
||||
return 'Details of ' + data['full_name'];
|
||||
}
|
||||
}),
|
||||
type: 'column',
|
||||
renderer: function (api, rowIdx, columns) {
|
||||
var data = $.map(columns, function (col, i) {
|
||||
return col.title !== '' // ? Do not show row in modal popup if title is blank (for check box)
|
||||
? '<tr data-dt-row="' +
|
||||
col.rowIndex +
|
||||
'" data-dt-column="' +
|
||||
col.columnIndex +
|
||||
'">' +
|
||||
'<td>' +
|
||||
col.title +
|
||||
':' +
|
||||
'</td> ' +
|
||||
'<td>' +
|
||||
col.data +
|
||||
'</td>' +
|
||||
'</tr>'
|
||||
: '';
|
||||
}).join('');
|
||||
|
||||
return data ? $('<table class="table"/><tbody />').append(data) : false;
|
||||
}
|
||||
}
|
||||
},
|
||||
initComplete: function () {
|
||||
// Adding role filter once table initialized
|
||||
this.api()
|
||||
.columns(7)
|
||||
.every(function () {
|
||||
var column = this;
|
||||
var select = $(
|
||||
'<select id="UserRole" class="form-select"><option value=""> Select Status </option></select>'
|
||||
)
|
||||
.appendTo('.invoice_status')
|
||||
.on('change', function () {
|
||||
var val = $.fn.dataTable.util.escapeRegex($(this).val());
|
||||
column.search(val ? '^' + val + '$' : '', true, false).draw();
|
||||
});
|
||||
|
||||
column
|
||||
.data()
|
||||
.unique()
|
||||
.sort()
|
||||
.each(function (d, j) {
|
||||
select.append('<option value="' + d + '" class="text-capitalize">' + d + '</option>');
|
||||
});
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// On each datatable draw, initialize tooltip
|
||||
dt_invoice_table.on('draw.dt', function () {
|
||||
var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
|
||||
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
|
||||
return new bootstrap.Tooltip(tooltipTriggerEl, {
|
||||
boundary: document.body
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
// Delete Record
|
||||
$('.invoice-list-table tbody').on('click', '.delete-record', function () {
|
||||
dt_invoice.row($(this).parents('tr')).remove().draw();
|
||||
});
|
||||
|
||||
// Filter form control to default size
|
||||
// ? setTimeout used for multilingual table initialization
|
||||
setTimeout(() => {
|
||||
$('.dataTables_filter .form-control').removeClass('form-control-sm');
|
||||
$('.dataTables_length .form-select').removeClass('form-select-sm');
|
||||
}, 300);
|
||||
});
|
||||
@ -1,9 +0,0 @@
|
||||
/**
|
||||
* Invoice Print
|
||||
*/
|
||||
|
||||
'use strict';
|
||||
|
||||
(function () {
|
||||
window.print();
|
||||
})();
|
||||
@ -1,471 +0,0 @@
|
||||
/**
|
||||
* App Kanban
|
||||
*/
|
||||
|
||||
'use strict';
|
||||
|
||||
(async function () {
|
||||
let boards;
|
||||
const kanbanSidebar = document.querySelector('.kanban-update-item-sidebar'),
|
||||
kanbanWrapper = document.querySelector('.kanban-wrapper'),
|
||||
commentEditor = document.querySelector('.comment-editor'),
|
||||
kanbanAddNewBoard = document.querySelector('.kanban-add-new-board'),
|
||||
kanbanAddNewInput = [].slice.call(document.querySelectorAll('.kanban-add-board-input')),
|
||||
kanbanAddBoardBtn = document.querySelector('.kanban-add-board-btn'),
|
||||
datePicker = document.querySelector('#due-date'),
|
||||
select2 = $('.select2'), // ! Using jquery vars due to select2 jQuery dependency
|
||||
assetsPath = document.querySelector('html').getAttribute('data-assets-path');
|
||||
|
||||
// Init kanban Offcanvas
|
||||
const kanbanOffcanvas = new bootstrap.Offcanvas(kanbanSidebar);
|
||||
|
||||
// Get kanban data
|
||||
const kanbanResponse = await fetch(assetsPath + 'json/kanban.json');
|
||||
if (!kanbanResponse.ok) {
|
||||
console.error('error', kanbanResponse);
|
||||
}
|
||||
boards = await kanbanResponse.json();
|
||||
|
||||
// datepicker init
|
||||
if (datePicker) {
|
||||
datePicker.flatpickr({
|
||||
monthSelectorType: 'static',
|
||||
altInput: true,
|
||||
altFormat: 'j F, Y',
|
||||
dateFormat: 'Y-m-d'
|
||||
});
|
||||
}
|
||||
|
||||
//! TODO: Update Event label and guest code to JS once select removes jQuery dependency
|
||||
// select2
|
||||
if (select2.length) {
|
||||
function renderLabels(option) {
|
||||
if (!option.id) {
|
||||
return option.text;
|
||||
}
|
||||
var $badge = "<div class='badge " + $(option.element).data('color') + " rounded-pill'> " + option.text + '</div>';
|
||||
return $badge;
|
||||
}
|
||||
|
||||
select2.each(function () {
|
||||
var $this = $(this);
|
||||
$this.wrap("<div class='position-relative'></div>").select2({
|
||||
placeholder: 'Select Label',
|
||||
dropdownParent: $this.parent(),
|
||||
templateResult: renderLabels,
|
||||
templateSelection: renderLabels,
|
||||
escapeMarkup: function (es) {
|
||||
return es;
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// Comment editor
|
||||
if (commentEditor) {
|
||||
new Quill(commentEditor, {
|
||||
modules: {
|
||||
toolbar: '.comment-toolbar'
|
||||
},
|
||||
placeholder: 'Write a Comment... ',
|
||||
theme: 'snow'
|
||||
});
|
||||
}
|
||||
|
||||
// Render board dropdown
|
||||
function renderBoardDropdown() {
|
||||
return (
|
||||
"<div class='dropdown'>" +
|
||||
"<i class='dropdown-toggle ti ti-dots-vertical cursor-pointer' id='board-dropdown' data-bs-toggle='dropdown' aria-haspopup='true' aria-expanded='false'></i>" +
|
||||
"<div class='dropdown-menu dropdown-menu-end' aria-labelledby='board-dropdown'>" +
|
||||
"<a class='dropdown-item delete-board' href='javascript:void(0)'> <i class='ti ti-trash ti-xs' me-1></i> <span class='align-middle'>Delete</span></a>" +
|
||||
"<a class='dropdown-item' href='javascript:void(0)'><i class='ti ti-edit ti-xs' me-1></i> <span class='align-middle'>Rename</span></a>" +
|
||||
"<a class='dropdown-item' href='javascript:void(0)'><i class='ti ti-archive ti-xs' me-1></i> <span class='align-middle'>Archive</span></a>" +
|
||||
'</div>' +
|
||||
'</div>'
|
||||
);
|
||||
}
|
||||
// Render item dropdown
|
||||
function renderDropdown() {
|
||||
return (
|
||||
"<div class='dropdown kanban-tasks-item-dropdown'>" +
|
||||
"<i class='dropdown-toggle ti ti-dots-vertical' id='kanban-tasks-item-dropdown' data-bs-toggle='dropdown' aria-haspopup='true' aria-expanded='false'></i>" +
|
||||
"<div class='dropdown-menu dropdown-menu-end' aria-labelledby='kanban-tasks-item-dropdown'>" +
|
||||
"<a class='dropdown-item' href='javascript:void(0)'>Copy task link</a>" +
|
||||
"<a class='dropdown-item' href='javascript:void(0)'>Duplicate task</a>" +
|
||||
"<a class='dropdown-item delete-task' href='javascript:void(0)'>Delete</a>" +
|
||||
'</div>' +
|
||||
'</div>'
|
||||
);
|
||||
}
|
||||
// Render header
|
||||
function renderHeader(color, text) {
|
||||
return (
|
||||
"<div class='d-flex justify-content-between flex-wrap align-items-center mb-2 pb-1'>" +
|
||||
"<div class='item-badges'> " +
|
||||
"<div class='badge rounded-pill bg-label-" +
|
||||
color +
|
||||
"'> " +
|
||||
text +
|
||||
'</div>' +
|
||||
'</div>' +
|
||||
renderDropdown() +
|
||||
'</div>'
|
||||
);
|
||||
}
|
||||
|
||||
// Render avatar
|
||||
function renderAvatar(images, pullUp, size, margin, members) {
|
||||
var $transition = pullUp ? ' pull-up' : '',
|
||||
$size = size ? 'avatar-' + size + '' : '',
|
||||
member = members == undefined ? ' ' : members.split(',');
|
||||
|
||||
return images == undefined
|
||||
? ' '
|
||||
: images
|
||||
.split(',')
|
||||
.map(function (img, index, arr) {
|
||||
var $margin = margin && index !== arr.length - 1 ? ' me-' + margin + '' : '';
|
||||
|
||||
return (
|
||||
"<div class='avatar " +
|
||||
$size +
|
||||
$margin +
|
||||
"'" +
|
||||
"data-bs-toggle='tooltip' data-bs-placement='top'" +
|
||||
"title='" +
|
||||
member[index] +
|
||||
"'" +
|
||||
'>' +
|
||||
"<img src='" +
|
||||
assetsPath +
|
||||
'img/avatars/' +
|
||||
img +
|
||||
"' alt='Avatar' class='rounded-circle " +
|
||||
$transition +
|
||||
"'>" +
|
||||
'</div>'
|
||||
);
|
||||
})
|
||||
.join(' ');
|
||||
}
|
||||
|
||||
// Render footer
|
||||
function renderFooter(attachments, comments, assigned, members) {
|
||||
return (
|
||||
"<div class='d-flex justify-content-between align-items-center flex-wrap mt-2 pt-1'>" +
|
||||
"<div class='d-flex'> <span class='d-flex align-items-center me-2'><i class='ti ti-paperclip ti-xs me-1'></i>" +
|
||||
"<span class='attachments'>" +
|
||||
attachments +
|
||||
'</span>' +
|
||||
"</span> <span class='d-flex align-items-center ms-1'><i class='ti ti-message-dots ti-xs me-1'></i>" +
|
||||
'<span> ' +
|
||||
comments +
|
||||
' </span>' +
|
||||
'</span></div>' +
|
||||
"<div class='avatar-group d-flex align-items-center assigned-avatar'>" +
|
||||
renderAvatar(assigned, true, 'xs', null, members) +
|
||||
'</div>' +
|
||||
'</div>'
|
||||
);
|
||||
}
|
||||
// Init kanban
|
||||
const kanban = new jKanban({
|
||||
element: '.kanban-wrapper',
|
||||
gutter: '15px',
|
||||
widthBoard: '250px',
|
||||
dragItems: true,
|
||||
boards: boards,
|
||||
dragBoards: true,
|
||||
addItemButton: true,
|
||||
buttonContent: '+ Add Item',
|
||||
itemAddOptions: {
|
||||
enabled: true, // add a button to board for easy item creation
|
||||
content: '+ Add New Item', // text or html content of the board button
|
||||
class: 'kanban-title-button btn', // default class of the button
|
||||
footer: false // position the button on footer
|
||||
},
|
||||
click: function (el) {
|
||||
let element = el;
|
||||
let title = element.getAttribute('data-eid')
|
||||
? element.querySelector('.kanban-text').textContent
|
||||
: element.textContent,
|
||||
date = element.getAttribute('data-due-date'),
|
||||
dateObj = new Date(),
|
||||
year = dateObj.getFullYear(),
|
||||
dateToUse = date
|
||||
? date + ', ' + year
|
||||
: dateObj.getDate() + ' ' + dateObj.toLocaleString('en', { month: 'long' }) + ', ' + year,
|
||||
label = element.getAttribute('data-badge-text'),
|
||||
avatars = element.getAttribute('data-assigned');
|
||||
|
||||
// Show kanban offcanvas
|
||||
kanbanOffcanvas.show();
|
||||
|
||||
// To get data on sidebar
|
||||
kanbanSidebar.querySelector('#title').value = title;
|
||||
kanbanSidebar.querySelector('#due-date').nextSibling.value = dateToUse;
|
||||
|
||||
// ! Using jQuery method to get sidebar due to select2 dependency
|
||||
$('.kanban-update-item-sidebar').find(select2).val(label).trigger('change');
|
||||
|
||||
// Remove & Update assigned
|
||||
kanbanSidebar.querySelector('.assigned').innerHTML = '';
|
||||
kanbanSidebar
|
||||
.querySelector('.assigned')
|
||||
.insertAdjacentHTML(
|
||||
'afterbegin',
|
||||
renderAvatar(avatars, false, 'xs', '1', el.getAttribute('data-members')) +
|
||||
"<div class='avatar avatar-xs ms-1'>" +
|
||||
"<span class='avatar-initial rounded-circle bg-label-secondary'><i class='ti ti-plus ti-xs text-heading'></i></span>" +
|
||||
'</div>'
|
||||
);
|
||||
},
|
||||
|
||||
buttonClick: function (el, boardId) {
|
||||
const addNew = document.createElement('form');
|
||||
addNew.setAttribute('class', 'new-item-form');
|
||||
addNew.innerHTML =
|
||||
'<div class="mb-3">' +
|
||||
'<textarea class="form-control add-new-item" rows="2" placeholder="Add Content" autofocus required></textarea>' +
|
||||
'</div>' +
|
||||
'<div class="mb-3">' +
|
||||
'<button type="submit" class="btn btn-primary btn-sm me-2">Add</button>' +
|
||||
'<button type="button" class="btn btn-label-secondary btn-sm cancel-add-item">Cancel</button>' +
|
||||
'</div>';
|
||||
kanban.addForm(boardId, addNew);
|
||||
|
||||
addNew.addEventListener('submit', function (e) {
|
||||
e.preventDefault();
|
||||
const currentBoard = [].slice.call(
|
||||
document.querySelectorAll('.kanban-board[data-id=' + boardId + '] .kanban-item')
|
||||
);
|
||||
kanban.addElement(boardId, {
|
||||
title: "<span class='kanban-text'>" + e.target[0].value + '</span>',
|
||||
id: boardId + '-' + currentBoard.length + 1
|
||||
});
|
||||
|
||||
// add dropdown in new boards
|
||||
const kanbanText = [].slice.call(
|
||||
document.querySelectorAll('.kanban-board[data-id=' + boardId + '] .kanban-text')
|
||||
);
|
||||
kanbanText.forEach(function (e) {
|
||||
e.insertAdjacentHTML('beforebegin', renderDropdown());
|
||||
});
|
||||
|
||||
// prevent sidebar to open onclick dropdown buttons of new tasks
|
||||
const newTaskDropdown = [].slice.call(document.querySelectorAll('.kanban-item .kanban-tasks-item-dropdown'));
|
||||
if (newTaskDropdown) {
|
||||
newTaskDropdown.forEach(function (e) {
|
||||
e.addEventListener('click', function (el) {
|
||||
el.stopPropagation();
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// delete tasks for new boards
|
||||
const deleteTask = [].slice.call(
|
||||
document.querySelectorAll('.kanban-board[data-id=' + boardId + '] .delete-task')
|
||||
);
|
||||
deleteTask.forEach(function (e) {
|
||||
e.addEventListener('click', function () {
|
||||
const id = this.closest('.kanban-item').getAttribute('data-eid');
|
||||
kanban.removeElement(id);
|
||||
});
|
||||
});
|
||||
addNew.remove();
|
||||
});
|
||||
|
||||
// Remove form on clicking cancel button
|
||||
addNew.querySelector('.cancel-add-item').addEventListener('click', function (e) {
|
||||
addNew.remove();
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
// Kanban Wrapper scrollbar
|
||||
if (kanbanWrapper) {
|
||||
new PerfectScrollbar(kanbanWrapper);
|
||||
}
|
||||
|
||||
const kanbanContainer = document.querySelector('.kanban-container'),
|
||||
kanbanTitleBoard = [].slice.call(document.querySelectorAll('.kanban-title-board')),
|
||||
kanbanItem = [].slice.call(document.querySelectorAll('.kanban-item'));
|
||||
|
||||
// Render custom items
|
||||
if (kanbanItem) {
|
||||
kanbanItem.forEach(function (el) {
|
||||
const element = "<span class='kanban-text'>" + el.textContent + '</span>';
|
||||
let img = '';
|
||||
if (el.getAttribute('data-image') !== null) {
|
||||
img =
|
||||
"<img class='img-fluid rounded mb-2' src='" +
|
||||
assetsPath +
|
||||
'img/elements/' +
|
||||
el.getAttribute('data-image') +
|
||||
"'>";
|
||||
}
|
||||
el.textContent = '';
|
||||
if (el.getAttribute('data-badge') !== undefined && el.getAttribute('data-badge-text') !== undefined) {
|
||||
el.insertAdjacentHTML(
|
||||
'afterbegin',
|
||||
renderHeader(el.getAttribute('data-badge'), el.getAttribute('data-badge-text')) + img + element
|
||||
);
|
||||
}
|
||||
if (
|
||||
el.getAttribute('data-comments') !== undefined ||
|
||||
el.getAttribute('data-due-date') !== undefined ||
|
||||
el.getAttribute('data-assigned') !== undefined
|
||||
) {
|
||||
el.insertAdjacentHTML(
|
||||
'beforeend',
|
||||
renderFooter(
|
||||
el.getAttribute('data-attachments'),
|
||||
el.getAttribute('data-comments'),
|
||||
el.getAttribute('data-assigned'),
|
||||
el.getAttribute('data-members')
|
||||
)
|
||||
);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// To initialize tooltips for rendered items
|
||||
const tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
|
||||
tooltipTriggerList.map(function (tooltipTriggerEl) {
|
||||
return new bootstrap.Tooltip(tooltipTriggerEl);
|
||||
});
|
||||
|
||||
// prevent sidebar to open onclick dropdown buttons of tasks
|
||||
const tasksItemDropdown = [].slice.call(document.querySelectorAll('.kanban-tasks-item-dropdown'));
|
||||
if (tasksItemDropdown) {
|
||||
tasksItemDropdown.forEach(function (e) {
|
||||
e.addEventListener('click', function (el) {
|
||||
el.stopPropagation();
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// Toggle add new input and actions add-new-btn
|
||||
if (kanbanAddBoardBtn) {
|
||||
kanbanAddBoardBtn.addEventListener('click', () => {
|
||||
kanbanAddNewInput.forEach(el => {
|
||||
el.value = '';
|
||||
el.classList.toggle('d-none');
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// Render add new inline with boards
|
||||
if (kanbanContainer) {
|
||||
kanbanContainer.appendChild(kanbanAddNewBoard);
|
||||
}
|
||||
|
||||
// Makes kanban title editable for rendered boards
|
||||
if (kanbanTitleBoard) {
|
||||
kanbanTitleBoard.forEach(function (elem) {
|
||||
elem.addEventListener('mouseenter', function () {
|
||||
this.contentEditable = 'true';
|
||||
});
|
||||
|
||||
// Appends delete icon with title
|
||||
elem.insertAdjacentHTML('afterend', renderBoardDropdown());
|
||||
});
|
||||
}
|
||||
|
||||
// To delete Board for rendered boards
|
||||
const deleteBoards = [].slice.call(document.querySelectorAll('.delete-board'));
|
||||
if (deleteBoards) {
|
||||
deleteBoards.forEach(function (elem) {
|
||||
elem.addEventListener('click', function () {
|
||||
const id = this.closest('.kanban-board').getAttribute('data-id');
|
||||
kanban.removeBoard(id);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// Delete task for rendered boards
|
||||
const deleteTask = [].slice.call(document.querySelectorAll('.delete-task'));
|
||||
if (deleteTask) {
|
||||
deleteTask.forEach(function (e) {
|
||||
e.addEventListener('click', function () {
|
||||
const id = this.closest('.kanban-item').getAttribute('data-eid');
|
||||
kanban.removeElement(id);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// Cancel btn add new input
|
||||
const cancelAddNew = document.querySelector('.kanban-add-board-cancel-btn');
|
||||
if (cancelAddNew) {
|
||||
cancelAddNew.addEventListener('click', function () {
|
||||
kanbanAddNewInput.forEach(el => {
|
||||
el.classList.toggle('d-none');
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// Add new board
|
||||
if (kanbanAddNewBoard) {
|
||||
kanbanAddNewBoard.addEventListener('submit', function (e) {
|
||||
e.preventDefault();
|
||||
const thisEle = this,
|
||||
value = thisEle.querySelector('.form-control').value,
|
||||
id = value.replace(/\s+/g, '-').toLowerCase();
|
||||
kanban.addBoards([
|
||||
{
|
||||
id: id,
|
||||
title: value
|
||||
}
|
||||
]);
|
||||
|
||||
// Adds delete board option to new board, delete new boards & updates data-order
|
||||
const kanbanBoardLastChild = document.querySelectorAll('.kanban-board:last-child')[0];
|
||||
if (kanbanBoardLastChild) {
|
||||
const header = kanbanBoardLastChild.querySelector('.kanban-title-board');
|
||||
header.insertAdjacentHTML('afterend', renderBoardDropdown());
|
||||
|
||||
// To make newly added boards title editable
|
||||
kanbanBoardLastChild.querySelector('.kanban-title-board').addEventListener('mouseenter', function () {
|
||||
this.contentEditable = 'true';
|
||||
});
|
||||
}
|
||||
|
||||
// Add delete event to delete newly added boards
|
||||
const deleteNewBoards = kanbanBoardLastChild.querySelector('.delete-board');
|
||||
if (deleteNewBoards) {
|
||||
deleteNewBoards.addEventListener('click', function () {
|
||||
const id = this.closest('.kanban-board').getAttribute('data-id');
|
||||
kanban.removeBoard(id);
|
||||
});
|
||||
}
|
||||
|
||||
// Remove current append new add new form
|
||||
if (kanbanAddNewInput) {
|
||||
kanbanAddNewInput.forEach(el => {
|
||||
el.classList.add('d-none');
|
||||
});
|
||||
}
|
||||
|
||||
// To place inline add new btn after clicking add btn
|
||||
if (kanbanContainer) {
|
||||
kanbanContainer.appendChild(kanbanAddNewBoard);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Clear comment editor on close
|
||||
kanbanSidebar.addEventListener('hidden.bs.offcanvas', function () {
|
||||
kanbanSidebar.querySelector('.ql-editor').firstElementChild.innerHTML = '';
|
||||
});
|
||||
|
||||
// Re-init tooltip when offcanvas opens(Bootstrap bug)
|
||||
if (kanbanSidebar) {
|
||||
kanbanSidebar.addEventListener('shown.bs.offcanvas', function () {
|
||||
const tooltipTriggerList = [].slice.call(kanbanSidebar.querySelectorAll('[data-bs-toggle="tooltip"]'));
|
||||
tooltipTriggerList.map(function (tooltipTriggerEl) {
|
||||
return new bootstrap.Tooltip(tooltipTriggerEl);
|
||||
});
|
||||
});
|
||||
}
|
||||
})();
|
||||
@ -1,516 +0,0 @@
|
||||
/**
|
||||
* Page User List
|
||||
*/
|
||||
|
||||
'use strict';
|
||||
|
||||
// Datatable (jquery)
|
||||
$(function () {
|
||||
let borderColor, bodyBg, headingColor;
|
||||
|
||||
if (isDarkStyle) {
|
||||
borderColor = config.colors_dark.borderColor;
|
||||
bodyBg = config.colors_dark.bodyBg;
|
||||
headingColor = config.colors_dark.headingColor;
|
||||
} else {
|
||||
borderColor = config.colors.borderColor;
|
||||
bodyBg = config.colors.bodyBg;
|
||||
headingColor = config.colors.headingColor;
|
||||
}
|
||||
|
||||
// Variable declaration for table
|
||||
var dt_user_table = $('.datatables-users'),
|
||||
select2 = $('.select2'),
|
||||
userView = 'app-user-view-account.html',
|
||||
statusObj = {
|
||||
1: { title: 'Pending', class: 'bg-label-warning' },
|
||||
2: { title: 'Active', class: 'bg-label-success' },
|
||||
3: { title: 'Inactive', class: 'bg-label-secondary' }
|
||||
};
|
||||
|
||||
if (select2.length) {
|
||||
var $this = select2;
|
||||
$this.wrap('<div class="position-relative"></div>').select2({
|
||||
placeholder: 'Select Country',
|
||||
dropdownParent: $this.parent()
|
||||
});
|
||||
}
|
||||
|
||||
// Users datatable
|
||||
if (dt_user_table.length) {
|
||||
var dt_user = dt_user_table.DataTable({
|
||||
ajax: assetsPath + 'json/user-list.json', // JSON file to add data
|
||||
columns: [
|
||||
// columns according to JSON
|
||||
{ data: '' },
|
||||
{ data: 'full_name' },
|
||||
{ data: 'role' },
|
||||
{ data: 'current_plan' },
|
||||
{ data: 'billing' },
|
||||
{ data: 'status' },
|
||||
{ data: 'action' }
|
||||
],
|
||||
columnDefs: [
|
||||
{
|
||||
// For Responsive
|
||||
className: 'control',
|
||||
searchable: false,
|
||||
orderable: false,
|
||||
responsivePriority: 2,
|
||||
targets: 0,
|
||||
render: function (data, type, full, meta) {
|
||||
return '';
|
||||
}
|
||||
},
|
||||
{
|
||||
// User full name and email
|
||||
targets: 1,
|
||||
responsivePriority: 4,
|
||||
render: function (data, type, full, meta) {
|
||||
var $name = full['full_name'],
|
||||
$email = full['email'],
|
||||
$image = full['avatar'];
|
||||
if ($image) {
|
||||
// For Avatar image
|
||||
var $output =
|
||||
'<img src="' + assetsPath + 'img/avatars/' + $image + '" alt="Avatar" class="rounded-circle">';
|
||||
} else {
|
||||
// For Avatar badge
|
||||
var stateNum = Math.floor(Math.random() * 6);
|
||||
var states = ['success', 'danger', 'warning', 'info', 'primary', 'secondary'];
|
||||
var $state = states[stateNum],
|
||||
$name = full['full_name'],
|
||||
$initials = $name.match(/\b\w/g) || [];
|
||||
$initials = (($initials.shift() || '') + ($initials.pop() || '')).toUpperCase();
|
||||
$output = '<span class="avatar-initial rounded-circle bg-label-' + $state + '">' + $initials + '</span>';
|
||||
}
|
||||
// Creates full output for row
|
||||
var $row_output =
|
||||
'<div class="d-flex justify-content-start align-items-center user-name">' +
|
||||
'<div class="avatar-wrapper">' +
|
||||
'<div class="avatar avatar-sm me-3">' +
|
||||
$output +
|
||||
'</div>' +
|
||||
'</div>' +
|
||||
'<div class="d-flex flex-column">' +
|
||||
'<a href="' +
|
||||
userView +
|
||||
'" class="text-body text-truncate"><span class="fw-semibold">' +
|
||||
$name +
|
||||
'</span></a>' +
|
||||
'<small class="text-muted">' +
|
||||
$email +
|
||||
'</small>' +
|
||||
'</div>' +
|
||||
'</div>';
|
||||
return $row_output;
|
||||
}
|
||||
},
|
||||
{
|
||||
// User Role
|
||||
targets: 2,
|
||||
render: function (data, type, full, meta) {
|
||||
var $role = full['role'];
|
||||
var roleBadgeObj = {
|
||||
Subscriber:
|
||||
'<span class="badge badge-center rounded-pill bg-label-warning w-px-30 h-px-30 me-2"><i class="ti ti-user ti-sm"></i></span>',
|
||||
Author:
|
||||
'<span class="badge badge-center rounded-pill bg-label-success w-px-30 h-px-30 me-2"><i class="ti ti-circle-check ti-sm"></i></span>',
|
||||
Maintainer:
|
||||
'<span class="badge badge-center rounded-pill bg-label-primary w-px-30 h-px-30 me-2"><i class="ti ti-chart-pie-2 ti-sm"></i></span>',
|
||||
Editor:
|
||||
'<span class="badge badge-center rounded-pill bg-label-info w-px-30 h-px-30 me-2"><i class="ti ti-edit ti-sm"></i></span>',
|
||||
Admin:
|
||||
'<span class="badge badge-center rounded-pill bg-label-secondary w-px-30 h-px-30 me-2"><i class="ti ti-device-laptop ti-sm"></i></span>'
|
||||
};
|
||||
return "<span class='text-truncate d-flex align-items-center'>" + roleBadgeObj[$role] + $role + '</span>';
|
||||
}
|
||||
},
|
||||
{
|
||||
// Plans
|
||||
targets: 3,
|
||||
render: function (data, type, full, meta) {
|
||||
var $plan = full['current_plan'];
|
||||
|
||||
return '<span class="fw-semibold">' + $plan + '</span>';
|
||||
}
|
||||
},
|
||||
{
|
||||
// User Status
|
||||
targets: 5,
|
||||
render: function (data, type, full, meta) {
|
||||
var $status = full['status'];
|
||||
|
||||
return (
|
||||
'<span class="badge ' +
|
||||
statusObj[$status].class +
|
||||
'" text-capitalized>' +
|
||||
statusObj[$status].title +
|
||||
'</span>'
|
||||
);
|
||||
}
|
||||
},
|
||||
{
|
||||
// Actions
|
||||
targets: -1,
|
||||
title: 'Actions',
|
||||
searchable: false,
|
||||
orderable: false,
|
||||
render: function (data, type, full, meta) {
|
||||
return (
|
||||
'<div class="d-flex align-items-center">' +
|
||||
'<a href="javascript:;" class="text-body"><i class="ti ti-edit ti-sm me-2"></i></a>' +
|
||||
'<a href="javascript:;" class="text-body delete-record"><i class="ti ti-trash ti-sm mx-2"></i></a>' +
|
||||
'<a href="javascript:;" class="text-body dropdown-toggle hide-arrow" data-bs-toggle="dropdown"><i class="ti ti-dots-vertical ti-sm mx-1"></i></a>' +
|
||||
'<div class="dropdown-menu dropdown-menu-end m-0">' +
|
||||
'<a href="' +
|
||||
userView +
|
||||
'" class="dropdown-item">View</a>' +
|
||||
'<a href="javascript:;" class="dropdown-item">Suspend</a>' +
|
||||
'</div>' +
|
||||
'</div>'
|
||||
);
|
||||
}
|
||||
}
|
||||
],
|
||||
order: [[1, 'desc']],
|
||||
dom:
|
||||
'<"row me-2"' +
|
||||
'<"col-md-2"<"me-3"l>>' +
|
||||
'<"col-md-10"<"dt-action-buttons text-xl-end text-lg-start text-md-end text-start d-flex align-items-center justify-content-end flex-md-row flex-column mb-3 mb-md-0"fB>>' +
|
||||
'>t' +
|
||||
'<"row mx-2"' +
|
||||
'<"col-sm-12 col-md-6"i>' +
|
||||
'<"col-sm-12 col-md-6"p>' +
|
||||
'>',
|
||||
language: {
|
||||
sLengthMenu: '_MENU_',
|
||||
search: '',
|
||||
searchPlaceholder: 'Search..'
|
||||
},
|
||||
// Buttons with Dropdown
|
||||
buttons: [
|
||||
{
|
||||
extend: 'collection',
|
||||
className: 'btn btn-label-secondary dropdown-toggle mx-3',
|
||||
text: '<i class="ti ti-screen-share me-1 ti-xs"></i>Export',
|
||||
buttons: [
|
||||
{
|
||||
extend: 'print',
|
||||
text: '<i class="ti ti-printer me-2" ></i>Print',
|
||||
className: 'dropdown-item',
|
||||
exportOptions: {
|
||||
columns: [1, 2, 3, 4, 5],
|
||||
// prevent avatar to be print
|
||||
format: {
|
||||
body: function (inner, coldex, rowdex) {
|
||||
if (inner.length <= 0) return inner;
|
||||
var el = $.parseHTML(inner);
|
||||
var result = '';
|
||||
$.each(el, function (index, item) {
|
||||
if (item.classList !== undefined && item.classList.contains('user-name')) {
|
||||
result = result + item.lastChild.firstChild.textContent;
|
||||
} else if (item.innerText === undefined) {
|
||||
result = result + item.textContent;
|
||||
} else result = result + item.innerText;
|
||||
});
|
||||
return result;
|
||||
}
|
||||
}
|
||||
},
|
||||
customize: function (win) {
|
||||
//customize print view for dark
|
||||
$(win.document.body)
|
||||
.css('color', headingColor)
|
||||
.css('border-color', borderColor)
|
||||
.css('background-color', bodyBg);
|
||||
$(win.document.body)
|
||||
.find('table')
|
||||
.addClass('compact')
|
||||
.css('color', 'inherit')
|
||||
.css('border-color', 'inherit')
|
||||
.css('background-color', 'inherit');
|
||||
}
|
||||
},
|
||||
{
|
||||
extend: 'csv',
|
||||
text: '<i class="ti ti-file-text me-2" ></i>Csv',
|
||||
className: 'dropdown-item',
|
||||
exportOptions: {
|
||||
columns: [1, 2, 3, 4, 5],
|
||||
// prevent avatar to be display
|
||||
format: {
|
||||
body: function (inner, coldex, rowdex) {
|
||||
if (inner.length <= 0) return inner;
|
||||
var el = $.parseHTML(inner);
|
||||
var result = '';
|
||||
$.each(el, function (index, item) {
|
||||
if (item.classList !== undefined && item.classList.contains('user-name')) {
|
||||
result = result + item.lastChild.firstChild.textContent;
|
||||
} else if (item.innerText === undefined) {
|
||||
result = result + item.textContent;
|
||||
} else result = result + item.innerText;
|
||||
});
|
||||
return result;
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
extend: 'excel',
|
||||
text: '<i class="ti ti-file-spreadsheet me-2"></i>Excel',
|
||||
className: 'dropdown-item',
|
||||
exportOptions: {
|
||||
columns: [1, 2, 3, 4, 5],
|
||||
// prevent avatar to be display
|
||||
format: {
|
||||
body: function (inner, coldex, rowdex) {
|
||||
if (inner.length <= 0) return inner;
|
||||
var el = $.parseHTML(inner);
|
||||
var result = '';
|
||||
$.each(el, function (index, item) {
|
||||
if (item.classList !== undefined && item.classList.contains('user-name')) {
|
||||
result = result + item.lastChild.firstChild.textContent;
|
||||
} else if (item.innerText === undefined) {
|
||||
result = result + item.textContent;
|
||||
} else result = result + item.innerText;
|
||||
});
|
||||
return result;
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
extend: 'pdf',
|
||||
text: '<i class="ti ti-file-code-2 me-2"></i>Pdf',
|
||||
className: 'dropdown-item',
|
||||
exportOptions: {
|
||||
columns: [1, 2, 3, 4, 5],
|
||||
// prevent avatar to be display
|
||||
format: {
|
||||
body: function (inner, coldex, rowdex) {
|
||||
if (inner.length <= 0) return inner;
|
||||
var el = $.parseHTML(inner);
|
||||
var result = '';
|
||||
$.each(el, function (index, item) {
|
||||
if (item.classList !== undefined && item.classList.contains('user-name')) {
|
||||
result = result + item.lastChild.firstChild.textContent;
|
||||
} else if (item.innerText === undefined) {
|
||||
result = result + item.textContent;
|
||||
} else result = result + item.innerText;
|
||||
});
|
||||
return result;
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
extend: 'copy',
|
||||
text: '<i class="ti ti-copy me-2" ></i>Copy',
|
||||
className: 'dropdown-item',
|
||||
exportOptions: {
|
||||
columns: [1, 2, 3, 4, 5],
|
||||
// prevent avatar to be display
|
||||
format: {
|
||||
body: function (inner, coldex, rowdex) {
|
||||
if (inner.length <= 0) return inner;
|
||||
var el = $.parseHTML(inner);
|
||||
var result = '';
|
||||
$.each(el, function (index, item) {
|
||||
if (item.classList !== undefined && item.classList.contains('user-name')) {
|
||||
result = result + item.lastChild.firstChild.textContent;
|
||||
} else if (item.innerText === undefined) {
|
||||
result = result + item.textContent;
|
||||
} else result = result + item.innerText;
|
||||
});
|
||||
return result;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
text: '<i class="ti ti-plus me-0 me-sm-1 ti-xs"></i><span class="d-none d-sm-inline-block">Add New User</span>',
|
||||
className: 'add-new btn btn-primary',
|
||||
attr: {
|
||||
'data-bs-toggle': 'offcanvas',
|
||||
'data-bs-target': '#offcanvasAddUser'
|
||||
}
|
||||
}
|
||||
],
|
||||
// For responsive popup
|
||||
responsive: {
|
||||
details: {
|
||||
display: $.fn.dataTable.Responsive.display.modal({
|
||||
header: function (row) {
|
||||
var data = row.data();
|
||||
return 'Details of ' + data['full_name'];
|
||||
}
|
||||
}),
|
||||
type: 'column',
|
||||
renderer: function (api, rowIdx, columns) {
|
||||
var data = $.map(columns, function (col, i) {
|
||||
return col.title !== '' // ? Do not show row in modal popup if title is blank (for check box)
|
||||
? '<tr data-dt-row="' +
|
||||
col.rowIndex +
|
||||
'" data-dt-column="' +
|
||||
col.columnIndex +
|
||||
'">' +
|
||||
'<td>' +
|
||||
col.title +
|
||||
':' +
|
||||
'</td> ' +
|
||||
'<td>' +
|
||||
col.data +
|
||||
'</td>' +
|
||||
'</tr>'
|
||||
: '';
|
||||
}).join('');
|
||||
|
||||
return data ? $('<table class="table"/><tbody />').append(data) : false;
|
||||
}
|
||||
}
|
||||
},
|
||||
initComplete: function () {
|
||||
// Adding role filter once table initialized
|
||||
this.api()
|
||||
.columns(2)
|
||||
.every(function () {
|
||||
var column = this;
|
||||
var select = $(
|
||||
'<select id="UserRole" class="form-select text-capitalize"><option value=""> Select Role </option></select>'
|
||||
)
|
||||
.appendTo('.user_role')
|
||||
.on('change', function () {
|
||||
var val = $.fn.dataTable.util.escapeRegex($(this).val());
|
||||
column.search(val ? '^' + val + '$' : '', true, false).draw();
|
||||
});
|
||||
|
||||
column
|
||||
.data()
|
||||
.unique()
|
||||
.sort()
|
||||
.each(function (d, j) {
|
||||
select.append('<option value="' + d + '">' + d + '</option>');
|
||||
});
|
||||
});
|
||||
// Adding plan filter once table initialized
|
||||
this.api()
|
||||
.columns(3)
|
||||
.every(function () {
|
||||
var column = this;
|
||||
var select = $(
|
||||
'<select id="UserPlan" class="form-select text-capitalize"><option value=""> Select Plan </option></select>'
|
||||
)
|
||||
.appendTo('.user_plan')
|
||||
.on('change', function () {
|
||||
var val = $.fn.dataTable.util.escapeRegex($(this).val());
|
||||
column.search(val ? '^' + val + '$' : '', true, false).draw();
|
||||
});
|
||||
|
||||
column
|
||||
.data()
|
||||
.unique()
|
||||
.sort()
|
||||
.each(function (d, j) {
|
||||
select.append('<option value="' + d + '">' + d + '</option>');
|
||||
});
|
||||
});
|
||||
// Adding status filter once table initialized
|
||||
this.api()
|
||||
.columns(5)
|
||||
.every(function () {
|
||||
var column = this;
|
||||
var select = $(
|
||||
'<select id="FilterTransaction" class="form-select text-capitalize"><option value=""> Select Status </option></select>'
|
||||
)
|
||||
.appendTo('.user_status')
|
||||
.on('change', function () {
|
||||
var val = $.fn.dataTable.util.escapeRegex($(this).val());
|
||||
column.search(val ? '^' + val + '$' : '', true, false).draw();
|
||||
});
|
||||
|
||||
column
|
||||
.data()
|
||||
.unique()
|
||||
.sort()
|
||||
.each(function (d, j) {
|
||||
select.append(
|
||||
'<option value="' +
|
||||
statusObj[d].title +
|
||||
'" class="text-capitalize">' +
|
||||
statusObj[d].title +
|
||||
'</option>'
|
||||
);
|
||||
});
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Delete Record
|
||||
$('.datatables-users tbody').on('click', '.delete-record', function () {
|
||||
dt_user.row($(this).parents('tr')).remove().draw();
|
||||
});
|
||||
|
||||
// Filter form control to default size
|
||||
// ? setTimeout used for multilingual table initialization
|
||||
setTimeout(() => {
|
||||
$('.dataTables_filter .form-control').removeClass('form-control-sm');
|
||||
$('.dataTables_length .form-select').removeClass('form-select-sm');
|
||||
}, 300);
|
||||
});
|
||||
|
||||
// Validation & Phone mask
|
||||
(function () {
|
||||
const phoneMaskList = document.querySelectorAll('.phone-mask'),
|
||||
addNewUserForm = document.getElementById('addNewUserForm');
|
||||
|
||||
// Phone Number
|
||||
if (phoneMaskList) {
|
||||
phoneMaskList.forEach(function (phoneMask) {
|
||||
new Cleave(phoneMask, {
|
||||
phone: true,
|
||||
phoneRegionCode: 'US'
|
||||
});
|
||||
});
|
||||
}
|
||||
// Add New User Form Validation
|
||||
const fv = FormValidation.formValidation(addNewUserForm, {
|
||||
fields: {
|
||||
userFullname: {
|
||||
validators: {
|
||||
notEmpty: {
|
||||
message: 'Please enter fullname '
|
||||
}
|
||||
}
|
||||
},
|
||||
userEmail: {
|
||||
validators: {
|
||||
notEmpty: {
|
||||
message: 'Please enter your email'
|
||||
},
|
||||
emailAddress: {
|
||||
message: 'The value is not a valid email address'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
plugins: {
|
||||
trigger: new FormValidation.plugins.Trigger(),
|
||||
bootstrap5: new FormValidation.plugins.Bootstrap5({
|
||||
// Use this for enabling/changing valid/invalid class
|
||||
eleValidClass: '',
|
||||
rowSelector: function (field, ele) {
|
||||
// field is the field name & ele is the field element
|
||||
return '.mb-3';
|
||||
}
|
||||
}),
|
||||
submitButton: new FormValidation.plugins.SubmitButton(),
|
||||
// Submit the form when all fields are valid
|
||||
// defaultSubmit: new FormValidation.plugins.DefaultSubmit(),
|
||||
autoFocus: new FormValidation.plugins.AutoFocus()
|
||||
}
|
||||
});
|
||||
})();
|
||||
@ -1,378 +0,0 @@
|
||||
/**
|
||||
* App User View - Account (jquery)
|
||||
*/
|
||||
|
||||
$(function () {
|
||||
'use strict';
|
||||
|
||||
// Variable declaration for table
|
||||
var dt_project_table = $('.datatable-project'),
|
||||
dt_invoice_table = $('.datatable-invoice');
|
||||
|
||||
// Project datatable
|
||||
// --------------------------------------------------------------------
|
||||
if (dt_project_table.length) {
|
||||
var dt_project = dt_project_table.DataTable({
|
||||
ajax: assetsPath + 'json/projects-list.json', // JSON file to add data
|
||||
columns: [
|
||||
// columns according to JSON
|
||||
{ data: '' },
|
||||
{ data: 'project_name' },
|
||||
{ data: 'total_task' },
|
||||
{ data: 'progress' },
|
||||
{ data: 'hours' }
|
||||
],
|
||||
columnDefs: [
|
||||
{
|
||||
// For Responsive
|
||||
className: 'control',
|
||||
searchable: false,
|
||||
responsivePriority: 2,
|
||||
targets: 0,
|
||||
render: function (data, type, full, meta) {
|
||||
return '';
|
||||
}
|
||||
},
|
||||
{
|
||||
// User full name and email
|
||||
targets: 1,
|
||||
responsivePriority: 1,
|
||||
render: function (data, type, full, meta) {
|
||||
var $name = full['project_name'],
|
||||
$framework = full['framework'],
|
||||
$image = full['project_image'];
|
||||
if ($image) {
|
||||
// For Avatar image
|
||||
var $output =
|
||||
'<img src="' +
|
||||
assetsPath +
|
||||
'img/icons/brands/' +
|
||||
$image +
|
||||
'" alt="Project Image" class="rounded-circle">';
|
||||
} else {
|
||||
// For Avatar badge
|
||||
var stateNum = Math.floor(Math.random() * 6) + 1;
|
||||
var states = ['success', 'danger', 'warning', 'info', 'dark', 'primary', 'secondary'];
|
||||
var $state = states[stateNum],
|
||||
$name = full['full_name'],
|
||||
$initials = $name.match(/\b\w/g) || [];
|
||||
$initials = (($initials.shift() || '') + ($initials.pop() || '')).toUpperCase();
|
||||
$output = '<span class="avatar-initial rounded-circle bg-label-' + $state + '">' + $initials + '</span>';
|
||||
}
|
||||
// Creates full output for row
|
||||
var $row_output =
|
||||
'<div class="d-flex justify-content-left align-items-center">' +
|
||||
'<div class="avatar-wrapper">' +
|
||||
'<div class="avatar avatar-sm me-3">' +
|
||||
$output +
|
||||
'</div>' +
|
||||
'</div>' +
|
||||
'<div class="d-flex flex-column">' +
|
||||
'<span class="text-truncate fw-semibold">' +
|
||||
$name +
|
||||
'</span>' +
|
||||
'<small class="text-muted">' +
|
||||
$framework +
|
||||
'</small>' +
|
||||
'</div>' +
|
||||
'</div>';
|
||||
return $row_output;
|
||||
}
|
||||
},
|
||||
{
|
||||
targets: 2,
|
||||
orderable: false
|
||||
},
|
||||
{
|
||||
// Label
|
||||
targets: -2,
|
||||
responsivePriority: 3,
|
||||
render: function (data, type, full, meta) {
|
||||
var $progress = full['progress'] + '%',
|
||||
$color;
|
||||
switch (true) {
|
||||
case full['progress'] < 25:
|
||||
$color = 'bg-danger';
|
||||
break;
|
||||
case full['progress'] < 50:
|
||||
$color = 'bg-warning';
|
||||
break;
|
||||
case full['progress'] < 75:
|
||||
$color = 'bg-info';
|
||||
break;
|
||||
case full['progress'] <= 100:
|
||||
$color = 'bg-success';
|
||||
break;
|
||||
}
|
||||
return (
|
||||
'<div class="d-flex flex-column"><small class="mb-1">' +
|
||||
$progress +
|
||||
'</small>' +
|
||||
'<div class="progress w-100 me-3" style="height: 6px;">' +
|
||||
'<div class="progress-bar ' +
|
||||
$color +
|
||||
'" style="width: ' +
|
||||
$progress +
|
||||
'" aria-valuenow="' +
|
||||
$progress +
|
||||
'" aria-valuemin="0" aria-valuemax="100"></div>' +
|
||||
'</div>' +
|
||||
'</div>'
|
||||
);
|
||||
}
|
||||
},
|
||||
{
|
||||
targets: -1,
|
||||
orderable: false
|
||||
}
|
||||
],
|
||||
order: [[1, 'desc']],
|
||||
dom:
|
||||
'<"d-flex justify-content-between align-items-center flex-column flex-sm-row mx-4 row"' +
|
||||
'<"col-sm-4 col-12 d-flex align-items-center justify-content-sm-start justify-content-center"l>' +
|
||||
'<"col-sm-8 col-12 d-flex align-items-center justify-content-sm-end justify-content-center"f>' +
|
||||
'>t' +
|
||||
'<"d-flex justify-content-between mx-4 row"' +
|
||||
'<"col-sm-12 col-md-6"i>' +
|
||||
'<"col-sm-12 col-md-6"p>' +
|
||||
'>',
|
||||
displayLength: 7,
|
||||
lengthMenu: [7, 10, 25, 50, 75, 100],
|
||||
language: {
|
||||
sLengthMenu: 'Show _MENU_',
|
||||
// search: '',
|
||||
searchPlaceholder: 'Search Project'
|
||||
},
|
||||
// For responsive popup
|
||||
responsive: {
|
||||
details: {
|
||||
display: $.fn.dataTable.Responsive.display.modal({
|
||||
header: function (row) {
|
||||
var data = row.data();
|
||||
return 'Details of ' + data['full_name'];
|
||||
}
|
||||
}),
|
||||
type: 'column',
|
||||
renderer: function (api, rowIdx, columns) {
|
||||
var data = $.map(columns, function (col, i) {
|
||||
return col.title !== '' // ? Do not show row in modal popup if title is blank (for check box)
|
||||
? '<tr data-dt-row="' +
|
||||
col.rowIndex +
|
||||
'" data-dt-column="' +
|
||||
col.columnIndex +
|
||||
'">' +
|
||||
'<td>' +
|
||||
col.title +
|
||||
':' +
|
||||
'</td> ' +
|
||||
'<td>' +
|
||||
col.data +
|
||||
'</td>' +
|
||||
'</tr>'
|
||||
: '';
|
||||
}).join('');
|
||||
|
||||
return data ? $('<table class="table"/><tbody />').append(data) : false;
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Invoice datatable
|
||||
// --------------------------------------------------------------------
|
||||
if (dt_invoice_table.length) {
|
||||
var dt_invoice = dt_invoice_table.DataTable({
|
||||
ajax: assetsPath + 'json/invoice-list.json', // JSON file to add data
|
||||
columns: [
|
||||
// columns according to JSON
|
||||
{ data: '' },
|
||||
{ data: 'invoice_id' },
|
||||
{ data: 'invoice_status' },
|
||||
{ data: 'total' },
|
||||
{ data: 'issued_date' },
|
||||
{ data: 'action' }
|
||||
],
|
||||
columnDefs: [
|
||||
{
|
||||
// For Responsive
|
||||
className: 'control',
|
||||
responsivePriority: 2,
|
||||
targets: 0,
|
||||
render: function (data, type, full, meta) {
|
||||
return '';
|
||||
}
|
||||
},
|
||||
{
|
||||
// Invoice ID
|
||||
targets: 1,
|
||||
render: function (data, type, full, meta) {
|
||||
var $invoice_id = full['invoice_id'];
|
||||
// Creates full output for row
|
||||
var $row_output = '<a href="app-invoice-preview.html"><span>#' + $invoice_id + '</span></a>';
|
||||
return $row_output;
|
||||
}
|
||||
},
|
||||
{
|
||||
// Invoice status
|
||||
targets: 2,
|
||||
render: function (data, type, full, meta) {
|
||||
var $invoice_status = full['invoice_status'],
|
||||
$due_date = full['due_date'],
|
||||
$balance = full['balance'];
|
||||
var roleBadgeObj = {
|
||||
Sent: '<span class="badge badge-center rounded-pill bg-label-secondary w-px-30 h-px-30"><i class="ti ti-circle-check ti-sm"></i></span>',
|
||||
Draft:
|
||||
'<span class="badge badge-center rounded-pill bg-label-primary w-px-30 h-px-30"><i class="ti ti-device-floppy ti-sm"></i></span>',
|
||||
'Past Due':
|
||||
'<span class="badge badge-center rounded-pill bg-label-danger w-px-30 h-px-30"><i class="ti ti-info-circle ti-sm"></i></span>',
|
||||
'Partial Payment':
|
||||
'<span class="badge badge-center rounded-pill bg-label-success w-px-30 h-px-30"><i class="ti ti-circle-half-2 ti-sm"></i></span>',
|
||||
Paid: '<span class="badge badge-center rounded-pill bg-label-warning w-px-30 h-px-30"><i class="ti ti-chart-pie ti-sm"></i></span>',
|
||||
Downloaded:
|
||||
'<span class="badge badge-center rounded-pill bg-label-info w-px-30 h-px-30"><i class="ti ti-arrow-down-circle ti-sm"></i></span>'
|
||||
};
|
||||
return (
|
||||
"<span data-bs-toggle='tooltip' data-bs-html='true' title='<span>" +
|
||||
$invoice_status +
|
||||
'<br> <strong>Balance:</strong> ' +
|
||||
$balance +
|
||||
'<br> <strong>Due Date:</strong> ' +
|
||||
$due_date +
|
||||
"</span>'>" +
|
||||
roleBadgeObj[$invoice_status] +
|
||||
'</span>'
|
||||
);
|
||||
}
|
||||
},
|
||||
{
|
||||
// Total Invoice Amount
|
||||
targets: 3,
|
||||
render: function (data, type, full, meta) {
|
||||
var $total = full['total'];
|
||||
return '$' + $total;
|
||||
}
|
||||
},
|
||||
{
|
||||
// Actions
|
||||
targets: -1,
|
||||
title: 'Actions',
|
||||
orderable: false,
|
||||
render: function (data, type, full, meta) {
|
||||
return (
|
||||
'<div class="d-flex align-items-center">' +
|
||||
'<a href="javascript:;" class="text-body" data-bs-toggle="tooltip" title="Send Mail"><i class="ti ti-mail me-2 ti-sm"></i></a>' +
|
||||
'<a href="app-invoice-preview.html" class="text-body" data-bs-toggle="tooltip" title="Preview"><i class="ti ti-eye mx-2 ti-sm"></i></a>' +
|
||||
'<a href="javascript:;" class="text-body" data-bs-toggle="tooltip" title="Download"><i class="ti ti-dots-vertical mx-1 ti-sm"></i></a>' +
|
||||
'</div>'
|
||||
);
|
||||
}
|
||||
}
|
||||
],
|
||||
order: [[1, 'desc']],
|
||||
dom:
|
||||
'<"row mx-4"' +
|
||||
'<"col-sm-6 col-12 d-flex align-items-center justify-content-center justify-content-sm-start mb-3 mb-md-0"l>' +
|
||||
'<"col-sm-6 col-12 d-flex align-items-center justify-content-center justify-content-sm-end"B>' +
|
||||
'>t' +
|
||||
'<"row mx-4"' +
|
||||
'<"col-md-12 col-lg-6 text-center text-lg-start pb-md-2 pb-lg-0"i>' +
|
||||
'<"col-md-12 col-lg-6 d-flex justify-content-center justify-content-lg-end"p>' +
|
||||
'>',
|
||||
language: {
|
||||
sLengthMenu: 'Show _MENU_',
|
||||
search: '',
|
||||
searchPlaceholder: 'Search Invoice'
|
||||
},
|
||||
// Buttons with Dropdown
|
||||
buttons: [
|
||||
{
|
||||
extend: 'collection',
|
||||
className: 'btn btn-label-secondary dropdown-toggle float-sm-end mb-3 mb-sm-0',
|
||||
text: '<i class="ti ti-screen-share ti-xs me-2"></i>Export',
|
||||
buttons: [
|
||||
{
|
||||
extend: 'print',
|
||||
text: '<i class="ti ti-printer me-2" ></i>Print',
|
||||
className: 'dropdown-item',
|
||||
exportOptions: { columns: [1, 2, 3, 4] }
|
||||
},
|
||||
{
|
||||
extend: 'csv',
|
||||
text: '<i class="ti ti-file-text me-2" ></i>Csv',
|
||||
className: 'dropdown-item',
|
||||
exportOptions: { columns: [1, 2, 3, 4] }
|
||||
},
|
||||
{
|
||||
extend: 'excel',
|
||||
text: '<i class="ti ti-file-spreadsheet me-2"></i>Excel',
|
||||
className: 'dropdown-item',
|
||||
exportOptions: { columns: [1, 2, 3, 4] }
|
||||
},
|
||||
{
|
||||
extend: 'pdf',
|
||||
text: '<i class="ti ti-file-description me-2"></i>Pdf',
|
||||
className: 'dropdown-item',
|
||||
exportOptions: { columns: [1, 2, 3, 4] }
|
||||
},
|
||||
{
|
||||
extend: 'copy',
|
||||
text: '<i class="ti ti-copy me-2" ></i>Copy',
|
||||
className: 'dropdown-item',
|
||||
exportOptions: { columns: [1, 2, 3, 4] }
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
// For responsive popup
|
||||
responsive: {
|
||||
details: {
|
||||
display: $.fn.dataTable.Responsive.display.modal({
|
||||
header: function (row) {
|
||||
var data = row.data();
|
||||
return 'Details of ' + data['full_name'];
|
||||
}
|
||||
}),
|
||||
type: 'column',
|
||||
renderer: function (api, rowIdx, columns) {
|
||||
var data = $.map(columns, function (col, i) {
|
||||
return col.title !== '' // ? Do not show row in modal popup if title is blank (for check box)
|
||||
? '<tr data-dt-row="' +
|
||||
col.rowIndex +
|
||||
'" data-dt-column="' +
|
||||
col.columnIndex +
|
||||
'">' +
|
||||
'<td>' +
|
||||
col.title +
|
||||
':' +
|
||||
'</td> ' +
|
||||
'<td>' +
|
||||
col.data +
|
||||
'</td>' +
|
||||
'</tr>'
|
||||
: '';
|
||||
}).join('');
|
||||
|
||||
return data ? $('<table class="table"/><tbody />').append(data) : false;
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
// On each datatable draw, initialize tooltip
|
||||
dt_invoice_table.on('draw.dt', function () {
|
||||
var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
|
||||
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
|
||||
return new bootstrap.Tooltip(tooltipTriggerEl, {
|
||||
boundary: document.body
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
// Filter form control to default size
|
||||
// ? setTimeout used for multilingual table initialization
|
||||
setTimeout(() => {
|
||||
$('.dataTables_filter .form-control').removeClass('form-control-sm');
|
||||
$('.dataTables_length .form-select').removeClass('form-select-sm');
|
||||
}, 300);
|
||||
});
|
||||
@ -1,57 +0,0 @@
|
||||
/**
|
||||
* App User View - Billing
|
||||
*/
|
||||
|
||||
'use strict';
|
||||
|
||||
(function () {
|
||||
// Cancel Subscription alert
|
||||
const cancelSubscription = document.querySelector('.cancel-subscription');
|
||||
|
||||
// Alert With Functional Confirm Button
|
||||
if (cancelSubscription) {
|
||||
cancelSubscription.onclick = function () {
|
||||
Swal.fire({
|
||||
text: 'Are you sure you would like to cancel your subscription?',
|
||||
icon: 'warning',
|
||||
showCancelButton: true,
|
||||
confirmButtonText: 'Yes',
|
||||
customClass: {
|
||||
confirmButton: 'btn btn-primary me-2',
|
||||
cancelButton: 'btn btn-label-secondary'
|
||||
},
|
||||
buttonsStyling: false
|
||||
}).then(function (result) {
|
||||
if (result.value) {
|
||||
Swal.fire({
|
||||
icon: 'success',
|
||||
title: 'Unsubscribed!',
|
||||
text: 'Your subscription cancelled successfully.',
|
||||
customClass: {
|
||||
confirmButton: 'btn btn-success'
|
||||
}
|
||||
});
|
||||
} else if (result.dismiss === Swal.DismissReason.cancel) {
|
||||
Swal.fire({
|
||||
title: 'Cancelled',
|
||||
text: 'Unsubscription Cancelled!!',
|
||||
icon: 'error',
|
||||
customClass: {
|
||||
confirmButton: 'btn btn-success'
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
};
|
||||
}
|
||||
|
||||
// On edit address click, update text of add address modal
|
||||
const addressEdit = document.querySelector('.edit-address'),
|
||||
addressTitle = document.querySelector('.address-title'),
|
||||
addressSubTitle = document.querySelector('.address-subtitle');
|
||||
|
||||
addressEdit.onclick = function () {
|
||||
addressTitle.innerHTML = 'Edit Address'; // reset text
|
||||
addressSubTitle.innerHTML = 'Edit your current address';
|
||||
};
|
||||
})();
|
||||
@ -1,63 +0,0 @@
|
||||
/**
|
||||
* App User View - Security
|
||||
*/
|
||||
|
||||
'use strict';
|
||||
|
||||
(function () {
|
||||
const formChangePass = document.querySelector('#formChangePassword');
|
||||
|
||||
// Form validation for Change password
|
||||
if (formChangePass) {
|
||||
const fv = FormValidation.formValidation(formChangePass, {
|
||||
fields: {
|
||||
newPassword: {
|
||||
validators: {
|
||||
notEmpty: {
|
||||
message: 'Please enter new password'
|
||||
},
|
||||
stringLength: {
|
||||
min: 8,
|
||||
message: 'Password must be more than 8 characters'
|
||||
}
|
||||
}
|
||||
},
|
||||
confirmPassword: {
|
||||
validators: {
|
||||
notEmpty: {
|
||||
message: 'Please confirm new password'
|
||||
},
|
||||
identical: {
|
||||
compare: function () {
|
||||
return formChangePass.querySelector('[name="newPassword"]').value;
|
||||
},
|
||||
message: 'The password and its confirm are not the same'
|
||||
},
|
||||
stringLength: {
|
||||
min: 8,
|
||||
message: 'Password must be more than 8 characters'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
plugins: {
|
||||
trigger: new FormValidation.plugins.Trigger(),
|
||||
bootstrap5: new FormValidation.plugins.Bootstrap5({
|
||||
eleValidClass: '',
|
||||
rowSelector: '.form-password-toggle'
|
||||
}),
|
||||
submitButton: new FormValidation.plugins.SubmitButton(),
|
||||
// Submit the form when all fields are valid
|
||||
// defaultSubmit: new FormValidation.plugins.DefaultSubmit(),
|
||||
autoFocus: new FormValidation.plugins.AutoFocus()
|
||||
},
|
||||
init: instance => {
|
||||
instance.on('plugins.message.placed', function (e) {
|
||||
if (e.element.parentElement.classList.contains('input-group')) {
|
||||
e.element.parentElement.insertAdjacentElement('afterend', e.messageElement);
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
})();
|
||||
@ -1,89 +0,0 @@
|
||||
/**
|
||||
* App User View - Suspend User Script
|
||||
*/
|
||||
'use strict';
|
||||
|
||||
(function () {
|
||||
const suspendUser = document.querySelector('.suspend-user');
|
||||
|
||||
// Suspend User javascript
|
||||
if (suspendUser) {
|
||||
suspendUser.onclick = function () {
|
||||
Swal.fire({
|
||||
title: 'Are you sure?',
|
||||
text: "You won't be able to revert user!",
|
||||
icon: 'warning',
|
||||
showCancelButton: true,
|
||||
confirmButtonText: 'Yes, Suspend user!',
|
||||
customClass: {
|
||||
confirmButton: 'btn btn-primary me-2',
|
||||
cancelButton: 'btn btn-label-secondary'
|
||||
},
|
||||
buttonsStyling: false
|
||||
}).then(function (result) {
|
||||
if (result.value) {
|
||||
Swal.fire({
|
||||
icon: 'success',
|
||||
title: 'Suspended!',
|
||||
text: 'User has been suspended.',
|
||||
customClass: {
|
||||
confirmButton: 'btn btn-success'
|
||||
}
|
||||
});
|
||||
} else if (result.dismiss === Swal.DismissReason.cancel) {
|
||||
Swal.fire({
|
||||
title: 'Cancelled',
|
||||
text: 'Cancelled Suspension :)',
|
||||
icon: 'error',
|
||||
customClass: {
|
||||
confirmButton: 'btn btn-success'
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
};
|
||||
}
|
||||
|
||||
//? Billing page have multiple buttons
|
||||
// Cancel Subscription alert
|
||||
const cancelSubscription = document.querySelectorAll('.cancel-subscription');
|
||||
|
||||
// Alert With Functional Confirm Button
|
||||
if (cancelSubscription) {
|
||||
cancelSubscription.forEach(btnCancle => {
|
||||
btnCancle.onclick = function () {
|
||||
Swal.fire({
|
||||
text: 'Are you sure you would like to cancel your subscription?',
|
||||
icon: 'warning',
|
||||
showCancelButton: true,
|
||||
confirmButtonText: 'Yes',
|
||||
customClass: {
|
||||
confirmButton: 'btn btn-primary me-2',
|
||||
cancelButton: 'btn btn-label-secondary'
|
||||
},
|
||||
buttonsStyling: false
|
||||
}).then(function (result) {
|
||||
if (result.value) {
|
||||
Swal.fire({
|
||||
icon: 'success',
|
||||
title: 'Unsubscribed!',
|
||||
text: 'Your subscription cancelled successfully.',
|
||||
customClass: {
|
||||
confirmButton: 'btn btn-success'
|
||||
}
|
||||
});
|
||||
} else if (result.dismiss === Swal.DismissReason.cancel) {
|
||||
Swal.fire({
|
||||
title: 'Cancelled',
|
||||
text: 'Unsubscription Cancelled!!',
|
||||
icon: 'error',
|
||||
customClass: {
|
||||
confirmButton: 'btn btn-success'
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
};
|
||||
});
|
||||
}
|
||||
})();
|
||||
@ -1,114 +0,0 @@
|
||||
/**
|
||||
* Cards Actions
|
||||
*/
|
||||
|
||||
'use strict';
|
||||
|
||||
(function () {
|
||||
const collapseElementList = [].slice.call(document.querySelectorAll('.card-collapsible'));
|
||||
const expandElementList = [].slice.call(document.querySelectorAll('.card-expand'));
|
||||
const closeElementList = [].slice.call(document.querySelectorAll('.card-close'));
|
||||
|
||||
let cardDnD = document.getElementById('sortable-4');
|
||||
|
||||
// Collapsible card
|
||||
// --------------------------------------------------------------------
|
||||
if (collapseElementList) {
|
||||
collapseElementList.map(function (collapseElement) {
|
||||
collapseElement.addEventListener('click', event => {
|
||||
event.preventDefault();
|
||||
// Collapse the element
|
||||
new bootstrap.Collapse(collapseElement.closest('.card').querySelector('.collapse'));
|
||||
// Toggle collapsed class in `.card-header` element
|
||||
collapseElement.closest('.card-header').classList.toggle('collapsed');
|
||||
// Toggle class ti-chevron-down & ti-chevron-right
|
||||
Helpers._toggleClass(collapseElement.firstElementChild, 'ti-chevron-down', 'ti-chevron-right');
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// Card Toggle fullscreen
|
||||
// --------------------------------------------------------------------
|
||||
if (expandElementList) {
|
||||
expandElementList.map(function (expandElement) {
|
||||
expandElement.addEventListener('click', event => {
|
||||
event.preventDefault();
|
||||
// Toggle class ti-arrows-maximize & ti-arrows-minimize
|
||||
Helpers._toggleClass(expandElement.firstElementChild, 'ti-arrows-maximize', 'ti-arrows-minimize');
|
||||
|
||||
expandElement.closest('.card').classList.toggle('card-fullscreen');
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// Toggle fullscreen on esc key
|
||||
document.addEventListener('keyup', event => {
|
||||
event.preventDefault();
|
||||
//Esc button
|
||||
if (event.key === 'Escape') {
|
||||
const cardFullscreen = document.querySelector('.card-fullscreen');
|
||||
// Toggle class ti-arrows-maximize & ti-arrows-minimize
|
||||
|
||||
if (cardFullscreen) {
|
||||
Helpers._toggleClass(cardFullscreen.querySelector('.card-expand').firstChild, 'ti-arrows-maximize', 'ti-arrows-minimize');
|
||||
cardFullscreen.classList.toggle('card-fullscreen');
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// Card close
|
||||
// --------------------------------------------------------------------
|
||||
if (closeElementList) {
|
||||
closeElementList.map(function (closeElement) {
|
||||
closeElement.addEventListener('click', event => {
|
||||
event.preventDefault();
|
||||
closeElement.closest('.card').classList.add('d-none');
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// Sortable.js (Drag & Drop cards)
|
||||
// --------------------------------------------------------------------
|
||||
if (typeof cardDnD !== undefined && cardDnD !== null) {
|
||||
Sortable.create(cardDnD, {
|
||||
animation: 500,
|
||||
handle: '.card'
|
||||
});
|
||||
}
|
||||
})();
|
||||
|
||||
// Card reload (jquery)
|
||||
// --------------------------------------------------------------------
|
||||
$(function () {
|
||||
const cardReload = $('.card-reload');
|
||||
if (cardReload.length) {
|
||||
cardReload.on('click', function (e) {
|
||||
e.preventDefault();
|
||||
var $this = $(this);
|
||||
$this.closest('.card').block({
|
||||
message:
|
||||
'<div class="sk-fold sk-primary"><div class="sk-fold-cube"></div><div class="sk-fold-cube"></div><div class="sk-fold-cube"></div><div class="sk-fold-cube"></div></div><h5>LOADING...</h5>',
|
||||
|
||||
css: {
|
||||
backgroundColor: 'transparent',
|
||||
border: '0'
|
||||
},
|
||||
overlayCSS: {
|
||||
backgroundColor: $('html').hasClass('dark-style') ? '#000' : '#fff',
|
||||
opacity: 0.55
|
||||
}
|
||||
});
|
||||
setTimeout(function () {
|
||||
$this.closest('.card').unblock();
|
||||
if ($this.closest('.card').find('.card-alert').length) {
|
||||
$this
|
||||
.closest('.card')
|
||||
.find('.card-alert')
|
||||
.html(
|
||||
'<div class="alert alert-danger alert-dismissible fade show" role="alert"><button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button><strong>Holy grail!</strong> Your success/error message here.</div>'
|
||||
);
|
||||
}
|
||||
}, 2500);
|
||||
});
|
||||
}
|
||||
});
|
||||
@ -1,166 +0,0 @@
|
||||
/**
|
||||
* Advanced Cards
|
||||
*/
|
||||
|
||||
'use strict';
|
||||
|
||||
(function () {
|
||||
let cardColor, headingColor, legendColor, labelColor;
|
||||
if (isDarkStyle) {
|
||||
cardColor = config.colors_dark.cardColor;
|
||||
labelColor = config.colors_dark.textMuted;
|
||||
legendColor = config.colors_dark.bodyColor;
|
||||
headingColor = config.colors_dark.headingColor;
|
||||
} else {
|
||||
cardColor = config.colors.cardColor;
|
||||
labelColor = config.colors.textMuted;
|
||||
legendColor = config.colors.bodyColor;
|
||||
headingColor = config.colors.headingColor;
|
||||
}
|
||||
|
||||
// Radial bar chart functions
|
||||
function radialBarChart(color, value) {
|
||||
const radialBarChartOpt = {
|
||||
chart: {
|
||||
height: 53,
|
||||
width: 43,
|
||||
type: 'radialBar'
|
||||
},
|
||||
plotOptions: {
|
||||
radialBar: {
|
||||
hollow: {
|
||||
size: '33%'
|
||||
},
|
||||
dataLabels: {
|
||||
show: false
|
||||
},
|
||||
track: {
|
||||
background: config.colors_label.secondary
|
||||
}
|
||||
}
|
||||
},
|
||||
stroke: {
|
||||
lineCap: 'round'
|
||||
},
|
||||
colors: [color],
|
||||
grid: {
|
||||
padding: {
|
||||
top: -15,
|
||||
bottom: -15,
|
||||
left: -5,
|
||||
right: -15
|
||||
}
|
||||
},
|
||||
series: [value],
|
||||
labels: ['Progress']
|
||||
};
|
||||
return radialBarChartOpt;
|
||||
}
|
||||
|
||||
// Progress Chart
|
||||
// --------------------------------------------------------------------
|
||||
// All progress chart
|
||||
const chartProgressList = document.querySelectorAll('.chart-progress');
|
||||
if (chartProgressList) {
|
||||
chartProgressList.forEach(function (chartProgressEl) {
|
||||
const color = config.colors[chartProgressEl.dataset.color],
|
||||
series = chartProgressEl.dataset.series;
|
||||
const optionsBundle = radialBarChart(color, series);
|
||||
const chart = new ApexCharts(chartProgressEl, optionsBundle);
|
||||
chart.render();
|
||||
});
|
||||
}
|
||||
|
||||
// Earning Reports Bar Chart
|
||||
// --------------------------------------------------------------------
|
||||
const reportBarChartEl = document.querySelector('#reportBarChart'),
|
||||
reportBarChartConfig = {
|
||||
chart: {
|
||||
height: 200,
|
||||
type: 'bar',
|
||||
toolbar: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
plotOptions: {
|
||||
bar: {
|
||||
barHeight: '60%',
|
||||
columnWidth: '60%',
|
||||
startingShape: 'rounded',
|
||||
endingShape: 'rounded',
|
||||
borderRadius: 4,
|
||||
distributed: true
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
show: false,
|
||||
padding: {
|
||||
top: -20,
|
||||
bottom: 0,
|
||||
left: -10,
|
||||
right: -10
|
||||
}
|
||||
},
|
||||
colors: [
|
||||
config.colors_label.primary,
|
||||
config.colors_label.primary,
|
||||
config.colors_label.primary,
|
||||
config.colors_label.primary,
|
||||
config.colors.primary,
|
||||
config.colors_label.primary,
|
||||
config.colors_label.primary
|
||||
],
|
||||
dataLabels: {
|
||||
enabled: false
|
||||
},
|
||||
series: [
|
||||
{
|
||||
data: [40, 95, 60, 45, 90, 50, 75]
|
||||
}
|
||||
],
|
||||
legend: {
|
||||
show: false
|
||||
},
|
||||
xaxis: {
|
||||
categories: ['Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su'],
|
||||
axisBorder: {
|
||||
show: false
|
||||
},
|
||||
axisTicks: {
|
||||
show: false
|
||||
},
|
||||
labels: {
|
||||
style: {
|
||||
colors: labelColor,
|
||||
fontSize: '13px'
|
||||
}
|
||||
}
|
||||
},
|
||||
yaxis: {
|
||||
labels: {
|
||||
show: false
|
||||
}
|
||||
}
|
||||
};
|
||||
if (typeof reportBarChartEl !== undefined && reportBarChartEl !== null) {
|
||||
const barChart = new ApexCharts(reportBarChartEl, reportBarChartConfig);
|
||||
barChart.render();
|
||||
}
|
||||
|
||||
// swiper loop and autoplay
|
||||
// --------------------------------------------------------------------
|
||||
const swiperWithPagination = document.querySelector('#swiper-with-pagination-cards');
|
||||
if (swiperWithPagination) {
|
||||
new Swiper(swiperWithPagination, {
|
||||
loop: true,
|
||||
autoplay: {
|
||||
delay: 2500,
|
||||
disableOnInteraction: false
|
||||
},
|
||||
pagination: {
|
||||
clickable: true,
|
||||
el: '.swiper-pagination'
|
||||
}
|
||||
});
|
||||
}
|
||||
})();
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
@ -1,113 +0,0 @@
|
||||
/**
|
||||
* Config
|
||||
* -------------------------------------------------------------------------------------
|
||||
* ! IMPORTANT: Make sure you clear the browser local storage In order to see the config changes in the template.
|
||||
* ! To clear local storage: (https://www.leadshook.com/help/how-to-clear-local-storage-in-google-chrome-browser/).
|
||||
*/
|
||||
|
||||
'use strict';
|
||||
|
||||
// JS global variables
|
||||
let config = {
|
||||
colors: {
|
||||
primary: '#7367f0',
|
||||
secondary: '#a8aaae',
|
||||
success: '#28c76f',
|
||||
info: '#00cfe8',
|
||||
warning: '#ff9f43',
|
||||
danger: '#ea5455',
|
||||
dark: '#4b4b4b',
|
||||
black: '#000',
|
||||
white: '#fff',
|
||||
cardColor: '#fff',
|
||||
bodyBg: '#f8f7fa',
|
||||
bodyColor: '#6f6b7d',
|
||||
headingColor: '#5d596c',
|
||||
textMuted: '#a5a3ae',
|
||||
borderColor: '#dbdade'
|
||||
},
|
||||
colors_label: {
|
||||
primary: '#7367f029',
|
||||
secondary: '#a8aaae29',
|
||||
success: '#28c76f29',
|
||||
info: '#00cfe829',
|
||||
warning: '#ff9f4329',
|
||||
danger: '#ea545529',
|
||||
dark: '#4b4b4b29'
|
||||
},
|
||||
colors_dark: {
|
||||
cardColor: '#2f3349',
|
||||
bodyBg: '#25293c',
|
||||
bodyColor: '#b6bee3',
|
||||
headingColor: '#cfd3ec',
|
||||
textMuted: '#7983bb',
|
||||
borderColor: '#434968'
|
||||
},
|
||||
enableMenuLocalStorage: true // Enable menu state with local storage support
|
||||
};
|
||||
|
||||
let assetsPath = document.documentElement.getAttribute('data-assets-path'),
|
||||
templateName = document.documentElement.getAttribute('data-template'),
|
||||
rtlSupport = true; // set true for rtl support (rtl + ltr), false for ltr only.
|
||||
|
||||
/**
|
||||
* TemplateCustomizer
|
||||
* ! You must use(include) template-customizer.js to use TemplateCustomizer settings
|
||||
* -----------------------------------------------------------------------------------------------
|
||||
*/
|
||||
|
||||
// To use more themes, just push it to THEMES object.
|
||||
|
||||
/* TemplateCustomizer.THEMES.push({
|
||||
name: 'theme-raspberry',
|
||||
title: 'Raspberry'
|
||||
}); */
|
||||
|
||||
// To add more languages, just push it to LANGUAGES object.
|
||||
/*
|
||||
TemplateCustomizer.LANGUAGES.fr = { ... };
|
||||
*/
|
||||
|
||||
/**
|
||||
* TemplateCustomizer settings
|
||||
* -------------------------------------------------------------------------------------
|
||||
* cssPath: Core CSS file path
|
||||
* themesPath: Theme CSS file path
|
||||
* displayCustomizer: true(Show customizer), false(Hide customizer)
|
||||
* lang: To set default language, Add more langues and set default. Fallback language is 'en'
|
||||
* controls: [ 'rtl','style','layoutType','showDropdownOnHover','layoutNavbarFixed','layoutFooterFixed','themes'] | Show/Hide customizer controls
|
||||
* defaultTheme: 0(Default), 1(Semi Dark), 2(Bordered)
|
||||
* defaultStyle: 'light', 'dark' (Mode)
|
||||
* defaultTextDir: 'ltr', 'rtl' (rtlSupport must be true for rtl mode)
|
||||
* defaultLayoutType: 'static', 'fixed'
|
||||
* defaultMenuCollapsed: true, false
|
||||
* defaultNavbarFixed: true, false
|
||||
* defaultFooterFixed: true, false
|
||||
* defaultShowDropdownOnHover : true, false (for horizontal layout only)
|
||||
*/
|
||||
|
||||
if (typeof TemplateCustomizer !== 'undefined') {
|
||||
window.templateCustomizer = new TemplateCustomizer({
|
||||
cssPath: assetsPath + 'vendor/css' + (rtlSupport ? '/rtl' : '') + '/',
|
||||
themesPath: assetsPath + 'vendor/css' + (rtlSupport ? '/rtl' : '') + '/',
|
||||
displayCustomizer: true,
|
||||
// lang: 'fr',
|
||||
// defaultTheme: 2,
|
||||
// defaultStyle: 'light',
|
||||
// defaultTextDir: 'ltr',
|
||||
// defaultLayoutType: 'fixed',
|
||||
// defaultMenuCollapsed: true,
|
||||
// defaultNavbarFixed: true,
|
||||
// defaultFooterFixed: false
|
||||
defaultShowDropdownOnHover: true
|
||||
// controls: [
|
||||
// 'rtl',
|
||||
// 'style',
|
||||
// 'layoutType',
|
||||
// 'showDropdownOnHover',
|
||||
// 'layoutNavbarFixed',
|
||||
// 'layoutFooterFixed',
|
||||
// 'themes'
|
||||
// ],
|
||||
});
|
||||
}
|
||||
@ -1,662 +0,0 @@
|
||||
/**
|
||||
* Dashboard Analytics
|
||||
*/
|
||||
|
||||
'use strict';
|
||||
|
||||
(function () {
|
||||
let cardColor, headingColor, labelColor, shadeColor, grayColor;
|
||||
if (isDarkStyle) {
|
||||
cardColor = config.colors_dark.cardColor;
|
||||
labelColor = config.colors_dark.textMuted;
|
||||
headingColor = config.colors_dark.headingColor;
|
||||
shadeColor = 'dark';
|
||||
grayColor = '#5E6692'; // gray color is for stacked bar chart
|
||||
} else {
|
||||
cardColor = config.colors.cardColor;
|
||||
labelColor = config.colors.textMuted;
|
||||
headingColor = config.colors.headingColor;
|
||||
shadeColor = '';
|
||||
grayColor = '#817D8D';
|
||||
}
|
||||
|
||||
// swiper loop and autoplay
|
||||
// --------------------------------------------------------------------
|
||||
const swiperWithPagination = document.querySelector('#swiper-with-pagination-cards');
|
||||
if (swiperWithPagination) {
|
||||
new Swiper(swiperWithPagination, {
|
||||
loop: true,
|
||||
autoplay: {
|
||||
delay: 2500,
|
||||
disableOnInteraction: false
|
||||
},
|
||||
pagination: {
|
||||
clickable: true,
|
||||
el: '.swiper-pagination'
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Revenue Generated Area Chart
|
||||
// --------------------------------------------------------------------
|
||||
const revenueGeneratedEl = document.querySelector('#revenueGenerated'),
|
||||
revenueGeneratedConfig = {
|
||||
chart: {
|
||||
height: 130,
|
||||
type: 'area',
|
||||
parentHeightOffset: 0,
|
||||
toolbar: {
|
||||
show: false
|
||||
},
|
||||
sparkline: {
|
||||
enabled: true
|
||||
}
|
||||
},
|
||||
markers: {
|
||||
colors: 'transparent',
|
||||
strokeColors: 'transparent'
|
||||
},
|
||||
grid: {
|
||||
show: false
|
||||
},
|
||||
colors: [config.colors.success],
|
||||
fill: {
|
||||
type: 'gradient',
|
||||
gradient: {
|
||||
shade: shadeColor,
|
||||
shadeIntensity: 0.8,
|
||||
opacityFrom: 0.6,
|
||||
opacityTo: 0.1
|
||||
}
|
||||
},
|
||||
dataLabels: {
|
||||
enabled: false
|
||||
},
|
||||
stroke: {
|
||||
width: 2,
|
||||
curve: 'smooth'
|
||||
},
|
||||
series: [
|
||||
{
|
||||
data: [300, 350, 330, 380, 340, 400, 380]
|
||||
}
|
||||
],
|
||||
xaxis: {
|
||||
show: true,
|
||||
lines: {
|
||||
show: false
|
||||
},
|
||||
labels: {
|
||||
show: false
|
||||
},
|
||||
stroke: {
|
||||
width: 0
|
||||
},
|
||||
axisBorder: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
yaxis: {
|
||||
stroke: {
|
||||
width: 0
|
||||
},
|
||||
show: false
|
||||
},
|
||||
tooltip: {
|
||||
enabled: false
|
||||
}
|
||||
};
|
||||
if (typeof revenueGeneratedEl !== undefined && revenueGeneratedEl !== null) {
|
||||
const revenueGenerated = new ApexCharts(revenueGeneratedEl, revenueGeneratedConfig);
|
||||
revenueGenerated.render();
|
||||
}
|
||||
|
||||
// Earning Reports Bar Chart
|
||||
// --------------------------------------------------------------------
|
||||
const weeklyEarningReportsEl = document.querySelector('#weeklyEarningReports'),
|
||||
weeklyEarningReportsConfig = {
|
||||
chart: {
|
||||
height: 202,
|
||||
parentHeightOffset: 0,
|
||||
type: 'bar',
|
||||
toolbar: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
plotOptions: {
|
||||
bar: {
|
||||
barHeight: '60%',
|
||||
columnWidth: '38%',
|
||||
startingShape: 'rounded',
|
||||
endingShape: 'rounded',
|
||||
borderRadius: 4,
|
||||
distributed: true
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
show: false,
|
||||
padding: {
|
||||
top: -30,
|
||||
bottom: 0,
|
||||
left: -10,
|
||||
right: -10
|
||||
}
|
||||
},
|
||||
colors: [
|
||||
config.colors_label.primary,
|
||||
config.colors_label.primary,
|
||||
config.colors_label.primary,
|
||||
config.colors_label.primary,
|
||||
config.colors.primary,
|
||||
config.colors_label.primary,
|
||||
config.colors_label.primary
|
||||
],
|
||||
dataLabels: {
|
||||
enabled: false
|
||||
},
|
||||
series: [
|
||||
{
|
||||
data: [40, 65, 50, 45, 90, 55, 70]
|
||||
}
|
||||
],
|
||||
legend: {
|
||||
show: false
|
||||
},
|
||||
xaxis: {
|
||||
categories: ['Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su'],
|
||||
axisBorder: {
|
||||
show: false
|
||||
},
|
||||
axisTicks: {
|
||||
show: false
|
||||
},
|
||||
labels: {
|
||||
style: {
|
||||
colors: labelColor,
|
||||
fontSize: '13px',
|
||||
fontFamily: 'Public Sans'
|
||||
}
|
||||
}
|
||||
},
|
||||
yaxis: {
|
||||
labels: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
tooltip: {
|
||||
enabled: false
|
||||
},
|
||||
responsive: [
|
||||
{
|
||||
breakpoint: 1025,
|
||||
options: {
|
||||
chart: {
|
||||
height: 199
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
};
|
||||
if (typeof weeklyEarningReportsEl !== undefined && weeklyEarningReportsEl !== null) {
|
||||
const weeklyEarningReports = new ApexCharts(weeklyEarningReportsEl, weeklyEarningReportsConfig);
|
||||
weeklyEarningReports.render();
|
||||
}
|
||||
|
||||
// Support Tracker - Radial Bar Chart
|
||||
// --------------------------------------------------------------------
|
||||
const supportTrackerEl = document.querySelector('#supportTracker'),
|
||||
supportTrackerOptions = {
|
||||
series: [85],
|
||||
labels: ['Completed Task'],
|
||||
chart: {
|
||||
height: 360,
|
||||
type: 'radialBar'
|
||||
},
|
||||
plotOptions: {
|
||||
radialBar: {
|
||||
offsetY: 10,
|
||||
startAngle: -140,
|
||||
endAngle: 130,
|
||||
hollow: {
|
||||
size: '65%'
|
||||
},
|
||||
track: {
|
||||
background: cardColor,
|
||||
strokeWidth: '100%'
|
||||
},
|
||||
dataLabels: {
|
||||
name: {
|
||||
offsetY: -20,
|
||||
color: labelColor,
|
||||
fontSize: '13px',
|
||||
fontWeight: '400',
|
||||
fontFamily: 'Public Sans'
|
||||
},
|
||||
value: {
|
||||
offsetY: 10,
|
||||
color: headingColor,
|
||||
fontSize: '38px',
|
||||
fontWeight: '600',
|
||||
fontFamily: 'Public Sans'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
colors: [config.colors.primary],
|
||||
fill: {
|
||||
type: 'gradient',
|
||||
gradient: {
|
||||
shade: 'dark',
|
||||
shadeIntensity: 0.5,
|
||||
gradientToColors: [config.colors.primary],
|
||||
inverseColors: true,
|
||||
opacityFrom: 1,
|
||||
opacityTo: 0.6,
|
||||
stops: [30, 70, 100]
|
||||
}
|
||||
},
|
||||
stroke: {
|
||||
dashArray: 10
|
||||
},
|
||||
grid: {
|
||||
padding: {
|
||||
top: -20,
|
||||
bottom: 5
|
||||
}
|
||||
},
|
||||
states: {
|
||||
hover: {
|
||||
filter: {
|
||||
type: 'none'
|
||||
}
|
||||
},
|
||||
active: {
|
||||
filter: {
|
||||
type: 'none'
|
||||
}
|
||||
}
|
||||
},
|
||||
responsive: [
|
||||
{
|
||||
breakpoint: 1025,
|
||||
options: {
|
||||
chart: {
|
||||
height: 330
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
breakpoint: 769,
|
||||
options: {
|
||||
chart: {
|
||||
height: 280
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
};
|
||||
if (typeof supportTrackerEl !== undefined && supportTrackerEl !== null) {
|
||||
const supportTracker = new ApexCharts(supportTrackerEl, supportTrackerOptions);
|
||||
supportTracker.render();
|
||||
}
|
||||
|
||||
// Total Earning Chart - Bar Chart
|
||||
// --------------------------------------------------------------------
|
||||
const totalEarningChartEl = document.querySelector('#totalEarningChart'),
|
||||
totalEarningChartOptions = {
|
||||
series: [
|
||||
{
|
||||
name: 'Earning',
|
||||
data: [15, 10, 20, 8, 12, 18, 12, 5]
|
||||
},
|
||||
{
|
||||
name: 'Expense',
|
||||
data: [-7, -10, -7, -12, -6, -9, -5, -8]
|
||||
}
|
||||
],
|
||||
chart: {
|
||||
height: 230,
|
||||
parentHeightOffset: 0,
|
||||
stacked: true,
|
||||
type: 'bar',
|
||||
toolbar: { show: false }
|
||||
},
|
||||
tooltip: {
|
||||
enabled: false
|
||||
},
|
||||
legend: {
|
||||
show: false
|
||||
},
|
||||
plotOptions: {
|
||||
bar: {
|
||||
horizontal: false,
|
||||
columnWidth: '18%',
|
||||
borderRadius: 5,
|
||||
startingShape: 'rounded',
|
||||
endingShape: 'rounded'
|
||||
}
|
||||
},
|
||||
colors: [config.colors.primary, grayColor],
|
||||
dataLabels: {
|
||||
enabled: false
|
||||
},
|
||||
grid: {
|
||||
show: false,
|
||||
padding: {
|
||||
top: -40,
|
||||
bottom: -20,
|
||||
left: -10,
|
||||
right: -2
|
||||
}
|
||||
},
|
||||
xaxis: {
|
||||
labels: {
|
||||
show: false
|
||||
},
|
||||
axisTicks: {
|
||||
show: false
|
||||
},
|
||||
axisBorder: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
yaxis: {
|
||||
labels: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
responsive: [
|
||||
{
|
||||
breakpoint: 1468,
|
||||
options: {
|
||||
plotOptions: {
|
||||
bar: {
|
||||
columnWidth: '22%'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
breakpoint: 1197,
|
||||
options: {
|
||||
chart: {
|
||||
height: 228
|
||||
},
|
||||
plotOptions: {
|
||||
bar: {
|
||||
borderRadius: 8,
|
||||
columnWidth: '26%'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
breakpoint: 783,
|
||||
options: {
|
||||
chart: {
|
||||
height: 232
|
||||
},
|
||||
plotOptions: {
|
||||
bar: {
|
||||
borderRadius: 6,
|
||||
columnWidth: '28%'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
breakpoint: 589,
|
||||
options: {
|
||||
plotOptions: {
|
||||
bar: {
|
||||
columnWidth: '16%'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
breakpoint: 520,
|
||||
options: {
|
||||
plotOptions: {
|
||||
bar: {
|
||||
borderRadius: 6,
|
||||
columnWidth: '18%'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
breakpoint: 426,
|
||||
options: {
|
||||
plotOptions: {
|
||||
bar: {
|
||||
borderRadius: 5,
|
||||
columnWidth: '20%'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
breakpoint: 381,
|
||||
options: {
|
||||
plotOptions: {
|
||||
bar: {
|
||||
columnWidth: '24%'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
states: {
|
||||
hover: {
|
||||
filter: {
|
||||
type: 'none'
|
||||
}
|
||||
},
|
||||
active: {
|
||||
filter: {
|
||||
type: 'none'
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
if (typeof totalEarningChartEl !== undefined && totalEarningChartEl !== null) {
|
||||
const totalEarningChart = new ApexCharts(totalEarningChartEl, totalEarningChartOptions);
|
||||
totalEarningChart.render();
|
||||
}
|
||||
|
||||
// For Datatable
|
||||
// --------------------------------------------------------------------
|
||||
var dt_projects_table = $('.datatables-projects');
|
||||
|
||||
if (dt_projects_table.length) {
|
||||
var dt_project = dt_projects_table.DataTable({
|
||||
ajax: assetsPath + 'json/user-profile.json',
|
||||
columns: [
|
||||
{ data: '' },
|
||||
{ data: 'id' },
|
||||
{ data: 'project_name' },
|
||||
{ data: 'project_leader' },
|
||||
{ data: '' },
|
||||
{ data: 'status' },
|
||||
{ data: '' }
|
||||
],
|
||||
columnDefs: [
|
||||
{
|
||||
// For Responsive
|
||||
className: 'control',
|
||||
searchable: false,
|
||||
orderable: false,
|
||||
responsivePriority: 2,
|
||||
targets: 0,
|
||||
render: function (data, type, full, meta) {
|
||||
return '';
|
||||
}
|
||||
},
|
||||
{
|
||||
// For Checkboxes
|
||||
targets: 1,
|
||||
orderable: false,
|
||||
searchable: false,
|
||||
responsivePriority: 3,
|
||||
checkboxes: true,
|
||||
render: function () {
|
||||
return '<input type="checkbox" class="dt-checkboxes form-check-input">';
|
||||
},
|
||||
checkboxes: {
|
||||
selectAllRender: '<input type="checkbox" class="form-check-input">'
|
||||
}
|
||||
},
|
||||
{
|
||||
// Avatar image/badge, Name and post
|
||||
targets: 2,
|
||||
responsivePriority: 4,
|
||||
render: function (data, type, full, meta) {
|
||||
var $user_img = full['project_img'],
|
||||
$name = full['project_name'],
|
||||
$date = full['date'];
|
||||
if ($user_img) {
|
||||
// For Avatar image
|
||||
var $output =
|
||||
'<img src="' + assetsPath + 'img/icons/brands/' + $user_img + '" alt="Avatar" class="rounded-circle">';
|
||||
} else {
|
||||
// For Avatar badge
|
||||
var stateNum = Math.floor(Math.random() * 6);
|
||||
var states = ['success', 'danger', 'warning', 'info', 'primary', 'secondary'];
|
||||
var $state = states[stateNum],
|
||||
$name = full['project_name'],
|
||||
$initials = $name.match(/\b\w/g) || [];
|
||||
$initials = (($initials.shift() || '') + ($initials.pop() || '')).toUpperCase();
|
||||
$output = '<span class="avatar-initial rounded-circle bg-label-' + $state + '">' + $initials + '</span>';
|
||||
}
|
||||
// Creates full output for row
|
||||
var $row_output =
|
||||
'<div class="d-flex justify-content-left align-items-center">' +
|
||||
'<div class="avatar-wrapper">' +
|
||||
'<div class="avatar me-2">' +
|
||||
$output +
|
||||
'</div>' +
|
||||
'</div>' +
|
||||
'<div class="d-flex flex-column">' +
|
||||
'<span class="text-truncate fw-semibold">' +
|
||||
$name +
|
||||
'</span>' +
|
||||
'<small class="text-truncate text-muted">' +
|
||||
$date +
|
||||
'</small>' +
|
||||
'</div>' +
|
||||
'</div>';
|
||||
return $row_output;
|
||||
}
|
||||
},
|
||||
{
|
||||
// Teams
|
||||
targets: 4,
|
||||
orderable: false,
|
||||
searchable: false,
|
||||
render: function (data, type, full, meta) {
|
||||
var $team = full['team'],
|
||||
$output;
|
||||
$output = '<div class="d-flex align-items-center avatar-group">';
|
||||
for (var i = 0; i < $team.length; i++) {
|
||||
$output +=
|
||||
'<div class="avatar avatar-sm">' +
|
||||
'<img src="' +
|
||||
assetsPath +
|
||||
'img/avatars/' +
|
||||
$team[i] +
|
||||
'" alt="Avatar" class="rounded-circle pull-up">' +
|
||||
'</div>';
|
||||
}
|
||||
$output += '</div>';
|
||||
return $output;
|
||||
}
|
||||
},
|
||||
{
|
||||
// Label
|
||||
targets: -2,
|
||||
render: function (data, type, full, meta) {
|
||||
var $status_number = full['status'];
|
||||
return (
|
||||
'<div class="d-flex align-items-center">' +
|
||||
'<div class="progress w-100 me-3" style="height: 6px;">' +
|
||||
'<div class="progress-bar" style="width: ' +
|
||||
$status_number +
|
||||
'" aria-valuenow="' +
|
||||
$status_number +
|
||||
'" aria-valuemin="0" aria-valuemax="100"></div>' +
|
||||
'</div>' +
|
||||
'<span>' +
|
||||
$status_number +
|
||||
'</span></div>'
|
||||
);
|
||||
}
|
||||
},
|
||||
{
|
||||
// Actions
|
||||
targets: -1,
|
||||
searchable: false,
|
||||
title: 'Actions',
|
||||
orderable: false,
|
||||
render: function (data, type, full, meta) {
|
||||
return (
|
||||
'<div class="d-inline-block">' +
|
||||
'<a href="javascript:;" class="btn btn-sm btn-icon dropdown-toggle hide-arrow" data-bs-toggle="dropdown"><i class="ti ti-dots-vertical"></i></a>' +
|
||||
'<div class="dropdown-menu dropdown-menu-end m-0">' +
|
||||
'<a href="javascript:;" class="dropdown-item">Details</a>' +
|
||||
'<a href="javascript:;" class="dropdown-item">Archive</a>' +
|
||||
'<div class="dropdown-divider"></div>' +
|
||||
'<a href="javascript:;" class="dropdown-item text-danger delete-record">Delete</a>' +
|
||||
'</div>' +
|
||||
'</div>'
|
||||
);
|
||||
}
|
||||
}
|
||||
],
|
||||
order: [[2, 'desc']],
|
||||
dom: '<"card-header pb-0 pt-sm-0"<"head-label text-center"><"d-flex justify-content-center justify-content-md-end"f>>t<"row mx-2"<"col-sm-12 col-md-6"i><"col-sm-12 col-md-6"p>>',
|
||||
displayLength: 5,
|
||||
lengthMenu: [5, 10, 25, 50, 75, 100],
|
||||
responsive: {
|
||||
details: {
|
||||
display: $.fn.dataTable.Responsive.display.modal({
|
||||
header: function (row) {
|
||||
var data = row.data();
|
||||
return 'Details of "' + data['project_name'] + '" Project';
|
||||
}
|
||||
}),
|
||||
type: 'column',
|
||||
renderer: function (api, rowIdx, columns) {
|
||||
var data = $.map(columns, function (col, i) {
|
||||
return col.title !== '' // ? Do not show row in modal popup if title is blank (for check box)
|
||||
? '<tr data-dt-row="' +
|
||||
col.rowIndex +
|
||||
'" data-dt-column="' +
|
||||
col.columnIndex +
|
||||
'">' +
|
||||
'<td>' +
|
||||
col.title +
|
||||
':' +
|
||||
'</td> ' +
|
||||
'<td>' +
|
||||
col.data +
|
||||
'</td>' +
|
||||
'</tr>'
|
||||
: '';
|
||||
}).join('');
|
||||
|
||||
return data ? $('<table class="table"/><tbody />').append(data) : false;
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
$('div.head-label').html('<h5 class="card-title mb-0">Projects</h5>');
|
||||
}
|
||||
|
||||
// Filter form control to default size
|
||||
// ? setTimeout used for multilingual table initialization
|
||||
setTimeout(() => {
|
||||
$('.dataTables_filter .form-control').removeClass('form-control-sm');
|
||||
$('.dataTables_length .form-select').removeClass('form-select-sm');
|
||||
}, 300);
|
||||
})();
|
||||
@ -1,859 +0,0 @@
|
||||
/**
|
||||
* Dashboard CRM
|
||||
*/
|
||||
|
||||
'use strict';
|
||||
(function () {
|
||||
let cardColor, labelColor, shadeColor, legendColor, borderColor;
|
||||
if (isDarkStyle) {
|
||||
cardColor = config.colors_dark.cardColor;
|
||||
labelColor = config.colors_dark.textMuted;
|
||||
legendColor = config.colors_dark.bodyColor;
|
||||
borderColor = config.colors_dark.borderColor;
|
||||
shadeColor = 'dark';
|
||||
} else {
|
||||
cardColor = config.colors.cardColor;
|
||||
labelColor = config.colors.textMuted;
|
||||
legendColor = config.colors.bodyColor;
|
||||
borderColor = config.colors.borderColor;
|
||||
shadeColor = '';
|
||||
}
|
||||
|
||||
// Sales last year Area Chart
|
||||
// --------------------------------------------------------------------
|
||||
const salesLastYearEl = document.querySelector('#salesLastYear'),
|
||||
salesLastYearConfig = {
|
||||
chart: {
|
||||
height: 78,
|
||||
type: 'area',
|
||||
parentHeightOffset: 0,
|
||||
toolbar: {
|
||||
show: false
|
||||
},
|
||||
sparkline: {
|
||||
enabled: true
|
||||
}
|
||||
},
|
||||
markers: {
|
||||
colors: 'transparent',
|
||||
strokeColors: 'transparent'
|
||||
},
|
||||
grid: {
|
||||
show: false
|
||||
},
|
||||
colors: [config.colors.success],
|
||||
fill: {
|
||||
type: 'gradient',
|
||||
gradient: {
|
||||
shade: shadeColor,
|
||||
shadeIntensity: 0.8,
|
||||
opacityFrom: 0.6,
|
||||
opacityTo: 0.25
|
||||
}
|
||||
},
|
||||
dataLabels: {
|
||||
enabled: false
|
||||
},
|
||||
stroke: {
|
||||
width: 2,
|
||||
curve: 'smooth'
|
||||
},
|
||||
series: [
|
||||
{
|
||||
data: [200, 55, 400, 250]
|
||||
}
|
||||
],
|
||||
xaxis: {
|
||||
show: true,
|
||||
lines: {
|
||||
show: false
|
||||
},
|
||||
labels: {
|
||||
show: false
|
||||
},
|
||||
stroke: {
|
||||
width: 0
|
||||
},
|
||||
axisBorder: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
yaxis: {
|
||||
stroke: {
|
||||
width: 0
|
||||
},
|
||||
show: false
|
||||
},
|
||||
tooltip: {
|
||||
enabled: false
|
||||
}
|
||||
};
|
||||
if (typeof salesLastYearEl !== undefined && salesLastYearEl !== null) {
|
||||
const salesLastYear = new ApexCharts(salesLastYearEl, salesLastYearConfig);
|
||||
salesLastYear.render();
|
||||
}
|
||||
|
||||
// Sessions Last Month - Staked Bar Chart
|
||||
// --------------------------------------------------------------------
|
||||
const sessionsLastMonthEl = document.querySelector('#sessionsLastMonth'),
|
||||
sessionsLastMonthConfig = {
|
||||
chart: {
|
||||
type: 'bar',
|
||||
height: 78,
|
||||
parentHeightOffset: 0,
|
||||
stacked: true,
|
||||
toolbar: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: 'PRODUCT A',
|
||||
data: [4, 3, 6, 4, 3]
|
||||
},
|
||||
{
|
||||
name: 'PRODUCT B',
|
||||
data: [-3, -4, -3, -2, -3]
|
||||
}
|
||||
],
|
||||
plotOptions: {
|
||||
bar: {
|
||||
horizontal: false,
|
||||
columnWidth: '30%',
|
||||
barHeight: '100%',
|
||||
borderRadius: 5,
|
||||
startingShape: 'rounded',
|
||||
endingShape: 'rounded'
|
||||
}
|
||||
},
|
||||
dataLabels: {
|
||||
enabled: false
|
||||
},
|
||||
tooltip: {
|
||||
enabled: false
|
||||
},
|
||||
stroke: {
|
||||
curve: 'smooth',
|
||||
width: 1,
|
||||
lineCap: 'round',
|
||||
colors: [cardColor]
|
||||
},
|
||||
legend: {
|
||||
show: false
|
||||
},
|
||||
colors: [config.colors.primary, config.colors.success],
|
||||
grid: {
|
||||
show: false,
|
||||
padding: {
|
||||
top: -41,
|
||||
right: -10,
|
||||
left: -8,
|
||||
bottom: -22
|
||||
}
|
||||
},
|
||||
xaxis: {
|
||||
categories: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
|
||||
labels: {
|
||||
show: false
|
||||
},
|
||||
axisBorder: {
|
||||
show: false
|
||||
},
|
||||
axisTicks: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
yaxis: {
|
||||
show: false
|
||||
},
|
||||
responsive: [
|
||||
{
|
||||
breakpoint: 1441,
|
||||
options: {
|
||||
plotOptions: {
|
||||
bar: {
|
||||
columnWidth: '40%'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
breakpoint: 1300,
|
||||
options: {
|
||||
plotOptions: {
|
||||
bar: {
|
||||
columnWidth: '50%'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
breakpoint: 1200,
|
||||
options: {
|
||||
plotOptions: {
|
||||
bar: {
|
||||
borderRadius: 6,
|
||||
columnWidth: '20%'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
breakpoint: 1025,
|
||||
options: {
|
||||
plotOptions: {
|
||||
bar: {
|
||||
borderRadius: 6,
|
||||
columnWidth: '20%'
|
||||
}
|
||||
},
|
||||
chart: {
|
||||
height: 80
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
breakpoint: 900,
|
||||
options: {
|
||||
plotOptions: {
|
||||
bar: {
|
||||
borderRadius: 6
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
breakpoint: 782,
|
||||
options: {
|
||||
plotOptions: {
|
||||
bar: {
|
||||
columnWidth: '30%'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
breakpoint: 426,
|
||||
options: {
|
||||
plotOptions: {
|
||||
bar: {
|
||||
borderRadius: 5,
|
||||
columnWidth: '35%'
|
||||
}
|
||||
},
|
||||
chart: {
|
||||
height: 78
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
breakpoint: 376,
|
||||
options: {
|
||||
plotOptions: {
|
||||
bar: {
|
||||
borderRadius: 6
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
states: {
|
||||
hover: {
|
||||
filter: {
|
||||
type: 'none'
|
||||
}
|
||||
},
|
||||
active: {
|
||||
filter: {
|
||||
type: 'none'
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
if (typeof sessionsLastMonthEl !== undefined && sessionsLastMonthEl !== null) {
|
||||
const sessionsLastMonth = new ApexCharts(sessionsLastMonthEl, sessionsLastMonthConfig);
|
||||
sessionsLastMonth.render();
|
||||
}
|
||||
|
||||
// Revenue Growth Chart
|
||||
// --------------------------------------------------------------------
|
||||
const revenueGrowthEl = document.querySelector('#revenueGrowth'),
|
||||
revenueGrowthConfig = {
|
||||
chart: {
|
||||
height: 170,
|
||||
type: 'bar',
|
||||
parentHeightOffset: 0,
|
||||
toolbar: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
plotOptions: {
|
||||
bar: {
|
||||
barHeight: '80%',
|
||||
columnWidth: '30%',
|
||||
startingShape: 'rounded',
|
||||
endingShape: 'rounded',
|
||||
borderRadius: 6,
|
||||
distributed: true
|
||||
}
|
||||
},
|
||||
tooltip: {
|
||||
enabled: false
|
||||
},
|
||||
grid: {
|
||||
show: false,
|
||||
padding: {
|
||||
top: -20,
|
||||
bottom: -12,
|
||||
left: -10,
|
||||
right: 0
|
||||
}
|
||||
},
|
||||
colors: [
|
||||
config.colors_label.success,
|
||||
config.colors_label.success,
|
||||
config.colors_label.success,
|
||||
config.colors_label.success,
|
||||
config.colors.success,
|
||||
config.colors_label.success,
|
||||
config.colors_label.success
|
||||
],
|
||||
dataLabels: {
|
||||
enabled: false
|
||||
},
|
||||
series: [
|
||||
{
|
||||
data: [25, 40, 55, 70, 85, 70, 55]
|
||||
}
|
||||
],
|
||||
legend: {
|
||||
show: false
|
||||
},
|
||||
xaxis: {
|
||||
categories: ['M', 'T', 'W', 'T', 'F', 'S', 'S'],
|
||||
axisBorder: {
|
||||
show: false
|
||||
},
|
||||
axisTicks: {
|
||||
show: false
|
||||
},
|
||||
labels: {
|
||||
style: {
|
||||
colors: labelColor,
|
||||
fontSize: '13px',
|
||||
fontFamily: 'Public Sans'
|
||||
}
|
||||
}
|
||||
},
|
||||
yaxis: {
|
||||
labels: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
states: {
|
||||
hover: {
|
||||
filter: {
|
||||
type: 'none'
|
||||
}
|
||||
}
|
||||
},
|
||||
responsive: [
|
||||
{
|
||||
breakpoint: 1471,
|
||||
options: {
|
||||
plotOptions: {
|
||||
bar: {
|
||||
columnWidth: '50%'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
breakpoint: 1350,
|
||||
options: {
|
||||
plotOptions: {
|
||||
bar: {
|
||||
columnWidth: '57%'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
breakpoint: 1032,
|
||||
options: {
|
||||
plotOptions: {
|
||||
bar: {
|
||||
columnWidth: '60%'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
breakpoint: 992,
|
||||
options: {
|
||||
plotOptions: {
|
||||
bar: {
|
||||
columnWidth: '40%',
|
||||
borderRadius: 8
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
breakpoint: 855,
|
||||
options: {
|
||||
plotOptions: {
|
||||
bar: {
|
||||
columnWidth: '50%',
|
||||
borderRadius: 6
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
breakpoint: 440,
|
||||
options: {
|
||||
plotOptions: {
|
||||
bar: {
|
||||
columnWidth: '40%'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
breakpoint: 381,
|
||||
options: {
|
||||
plotOptions: {
|
||||
bar: {
|
||||
columnWidth: '45%'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
};
|
||||
if (typeof revenueGrowthEl !== undefined && revenueGrowthEl !== null) {
|
||||
const revenueGrowth = new ApexCharts(revenueGrowthEl, revenueGrowthConfig);
|
||||
revenueGrowth.render();
|
||||
}
|
||||
|
||||
// Earning Reports Tabs Function
|
||||
function EarningReportsBarChart(arrayData, highlightData) {
|
||||
const basicColor = config.colors_label.primary,
|
||||
highlightColor = config.colors.primary;
|
||||
var colorArr = [];
|
||||
|
||||
for (let i = 0; i < arrayData.length; i++) {
|
||||
if (i === highlightData) {
|
||||
colorArr.push(highlightColor);
|
||||
} else {
|
||||
colorArr.push(basicColor);
|
||||
}
|
||||
}
|
||||
|
||||
const earningReportBarChartOpt = {
|
||||
chart: {
|
||||
height: 258,
|
||||
parentHeightOffset: 0,
|
||||
type: 'bar',
|
||||
toolbar: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
plotOptions: {
|
||||
bar: {
|
||||
columnWidth: '32%',
|
||||
startingShape: 'rounded',
|
||||
borderRadius: 7,
|
||||
distributed: true,
|
||||
dataLabels: {
|
||||
position: 'top'
|
||||
}
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
show: false,
|
||||
padding: {
|
||||
top: 0,
|
||||
bottom: 0,
|
||||
left: -10,
|
||||
right: -10
|
||||
}
|
||||
},
|
||||
colors: colorArr,
|
||||
dataLabels: {
|
||||
enabled: true,
|
||||
formatter: function (val) {
|
||||
return val + 'k';
|
||||
},
|
||||
offsetY: -25,
|
||||
style: {
|
||||
fontSize: '15px',
|
||||
colors: [legendColor],
|
||||
fontWeight: '600',
|
||||
fontFamily: 'Public Sans'
|
||||
}
|
||||
},
|
||||
series: [
|
||||
{
|
||||
data: arrayData
|
||||
}
|
||||
],
|
||||
legend: {
|
||||
show: false
|
||||
},
|
||||
tooltip: {
|
||||
enabled: false
|
||||
},
|
||||
xaxis: {
|
||||
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep'],
|
||||
axisBorder: {
|
||||
show: true,
|
||||
color: borderColor
|
||||
},
|
||||
axisTicks: {
|
||||
show: false
|
||||
},
|
||||
labels: {
|
||||
style: {
|
||||
colors: labelColor,
|
||||
fontSize: '13px',
|
||||
fontFamily: 'Public Sans'
|
||||
}
|
||||
}
|
||||
},
|
||||
yaxis: {
|
||||
labels: {
|
||||
offsetX: -15,
|
||||
formatter: function (val) {
|
||||
return '$' + parseInt(val / 1) + 'k';
|
||||
},
|
||||
style: {
|
||||
fontSize: '13px',
|
||||
colors: labelColor,
|
||||
fontFamily: 'Public Sans'
|
||||
},
|
||||
min: 0,
|
||||
max: 60000,
|
||||
tickAmount: 6
|
||||
}
|
||||
},
|
||||
responsive: [
|
||||
{
|
||||
breakpoint: 1441,
|
||||
options: {
|
||||
plotOptions: {
|
||||
bar: {
|
||||
columnWidth: '41%'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
breakpoint: 590,
|
||||
options: {
|
||||
plotOptions: {
|
||||
bar: {
|
||||
columnWidth: '61%',
|
||||
borderRadius: 5
|
||||
}
|
||||
},
|
||||
yaxis: {
|
||||
labels: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
padding: {
|
||||
right: 0,
|
||||
left: -20
|
||||
}
|
||||
},
|
||||
dataLabels: {
|
||||
style: {
|
||||
fontSize: '12px',
|
||||
fontWeight: '400'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
};
|
||||
return earningReportBarChartOpt;
|
||||
}
|
||||
var chartJson = 'earning-reports-charts.json';
|
||||
// Earning Chart JSON data
|
||||
var earningReportsChart = $.ajax({
|
||||
url: assetsPath + 'json/' + chartJson, //? Use your own search api instead
|
||||
dataType: 'json',
|
||||
async: false
|
||||
}).responseJSON;
|
||||
|
||||
// Earning Reports Tabs Orders
|
||||
// --------------------------------------------------------------------
|
||||
const earningReportsTabsOrdersEl = document.querySelector('#earningReportsTabsOrders'),
|
||||
earningReportsTabsOrdersConfig = EarningReportsBarChart(
|
||||
earningReportsChart['data'][0]['chart_data'],
|
||||
earningReportsChart['data'][0]['active_option']
|
||||
);
|
||||
if (typeof earningReportsTabsOrdersEl !== undefined && earningReportsTabsOrdersEl !== null) {
|
||||
const earningReportsTabsOrders = new ApexCharts(earningReportsTabsOrdersEl, earningReportsTabsOrdersConfig);
|
||||
earningReportsTabsOrders.render();
|
||||
}
|
||||
// Earning Reports Tabs Sales
|
||||
// --------------------------------------------------------------------
|
||||
const earningReportsTabsSalesEl = document.querySelector('#earningReportsTabsSales'),
|
||||
earningReportsTabsSalesConfig = EarningReportsBarChart(
|
||||
earningReportsChart['data'][1]['chart_data'],
|
||||
earningReportsChart['data'][1]['active_option']
|
||||
);
|
||||
if (typeof earningReportsTabsSalesEl !== undefined && earningReportsTabsSalesEl !== null) {
|
||||
const earningReportsTabsSales = new ApexCharts(earningReportsTabsSalesEl, earningReportsTabsSalesConfig);
|
||||
earningReportsTabsSales.render();
|
||||
}
|
||||
// Earning Reports Tabs Profit
|
||||
// --------------------------------------------------------------------
|
||||
const earningReportsTabsProfitEl = document.querySelector('#earningReportsTabsProfit'),
|
||||
earningReportsTabsProfitConfig = EarningReportsBarChart(
|
||||
earningReportsChart['data'][2]['chart_data'],
|
||||
earningReportsChart['data'][2]['active_option']
|
||||
);
|
||||
if (typeof earningReportsTabsProfitEl !== undefined && earningReportsTabsProfitEl !== null) {
|
||||
const earningReportsTabsProfit = new ApexCharts(earningReportsTabsProfitEl, earningReportsTabsProfitConfig);
|
||||
earningReportsTabsProfit.render();
|
||||
}
|
||||
// Earning Reports Tabs Income
|
||||
// --------------------------------------------------------------------
|
||||
const earningReportsTabsIncomeEl = document.querySelector('#earningReportsTabsIncome'),
|
||||
earningReportsTabsIncomeConfig = EarningReportsBarChart(
|
||||
earningReportsChart['data'][3]['chart_data'],
|
||||
earningReportsChart['data'][3]['active_option']
|
||||
);
|
||||
if (typeof earningReportsTabsIncomeEl !== undefined && earningReportsTabsIncomeEl !== null) {
|
||||
const earningReportsTabsIncome = new ApexCharts(earningReportsTabsIncomeEl, earningReportsTabsIncomeConfig);
|
||||
earningReportsTabsIncome.render();
|
||||
}
|
||||
|
||||
// Sales Last 6 Months - Radar Chart
|
||||
// --------------------------------------------------------------------
|
||||
const salesLastMonthEl = document.querySelector('#salesLastMonth'),
|
||||
salesLastMonthConfig = {
|
||||
series: [
|
||||
{
|
||||
name: 'Sales',
|
||||
data: [32, 27, 27, 30, 25, 25]
|
||||
},
|
||||
{
|
||||
name: 'Visits',
|
||||
data: [25, 35, 20, 20, 20, 20]
|
||||
}
|
||||
],
|
||||
chart: {
|
||||
height: 340,
|
||||
type: 'radar',
|
||||
toolbar: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
plotOptions: {
|
||||
radar: {
|
||||
polygons: {
|
||||
strokeColors: borderColor,
|
||||
connectorColors: borderColor
|
||||
}
|
||||
}
|
||||
},
|
||||
stroke: {
|
||||
show: false,
|
||||
width: 0
|
||||
},
|
||||
legend: {
|
||||
show: true,
|
||||
fontSize: '13px',
|
||||
position: 'bottom',
|
||||
labels: {
|
||||
colors: legendColor,
|
||||
useSeriesColors: false
|
||||
},
|
||||
markers: {
|
||||
height: 10,
|
||||
width: 10,
|
||||
offsetX: -3
|
||||
},
|
||||
itemMargin: {
|
||||
horizontal: 10
|
||||
},
|
||||
onItemHover: {
|
||||
highlightDataSeries: false
|
||||
}
|
||||
},
|
||||
colors: [config.colors.primary, config.colors.info],
|
||||
fill: {
|
||||
opacity: [1, 0.85]
|
||||
},
|
||||
markers: {
|
||||
size: 0
|
||||
},
|
||||
grid: {
|
||||
show: false,
|
||||
padding: {
|
||||
top: 0,
|
||||
bottom: -5
|
||||
}
|
||||
},
|
||||
xaxis: {
|
||||
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],
|
||||
labels: {
|
||||
show: true,
|
||||
style: {
|
||||
colors: [labelColor, labelColor, labelColor, labelColor, labelColor, labelColor],
|
||||
fontSize: '13px',
|
||||
fontFamily: 'Public Sans'
|
||||
}
|
||||
}
|
||||
},
|
||||
yaxis: {
|
||||
show: false,
|
||||
min: 0,
|
||||
max: 40,
|
||||
tickAmount: 4
|
||||
},
|
||||
responsive: [
|
||||
{
|
||||
breakpoint: 769,
|
||||
options: {
|
||||
chart: {
|
||||
height: 400
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
};
|
||||
if (typeof salesLastMonthEl !== undefined && salesLastMonthEl !== null) {
|
||||
const salesLastMonth = new ApexCharts(salesLastMonthEl, salesLastMonthConfig);
|
||||
salesLastMonth.render();
|
||||
}
|
||||
|
||||
// Progress Chart
|
||||
// --------------------------------------------------------------------
|
||||
// Radial bar chart functions
|
||||
function radialBarChart(color, value) {
|
||||
const radialBarChartOpt = {
|
||||
chart: {
|
||||
height: 53,
|
||||
width: 43,
|
||||
type: 'radialBar'
|
||||
},
|
||||
plotOptions: {
|
||||
radialBar: {
|
||||
hollow: {
|
||||
size: '33%'
|
||||
},
|
||||
dataLabels: {
|
||||
show: false
|
||||
},
|
||||
track: {
|
||||
background: config.colors_label.secondary
|
||||
}
|
||||
}
|
||||
},
|
||||
stroke: {
|
||||
lineCap: 'round'
|
||||
},
|
||||
colors: [color],
|
||||
grid: {
|
||||
padding: {
|
||||
top: -15,
|
||||
bottom: -15,
|
||||
left: -5,
|
||||
right: -15
|
||||
}
|
||||
},
|
||||
series: [value],
|
||||
labels: ['Progress']
|
||||
};
|
||||
return radialBarChartOpt;
|
||||
}
|
||||
// All progress chart
|
||||
const chartProgressList = document.querySelectorAll('.chart-progress');
|
||||
if (chartProgressList) {
|
||||
chartProgressList.forEach(function (chartProgressEl) {
|
||||
const color = config.colors[chartProgressEl.dataset.color],
|
||||
series = chartProgressEl.dataset.series;
|
||||
const optionsBundle = radialBarChart(color, series);
|
||||
const chart = new ApexCharts(chartProgressEl, optionsBundle);
|
||||
chart.render();
|
||||
});
|
||||
}
|
||||
|
||||
// Project Status - Line Chart
|
||||
// --------------------------------------------------------------------
|
||||
const projectStatusEl = document.querySelector('#projectStatusChart'),
|
||||
projectStatusConfig = {
|
||||
chart: {
|
||||
height: 240,
|
||||
type: 'area',
|
||||
toolbar: false
|
||||
},
|
||||
markers: {
|
||||
strokeColor: 'transparent'
|
||||
},
|
||||
series: [
|
||||
{
|
||||
data: [2000, 2000, 4000, 4000, 3050, 3050, 2000, 2000, 3050, 3050, 4700, 4700, 2750, 2750, 5700, 5700]
|
||||
}
|
||||
],
|
||||
dataLabels: {
|
||||
enabled: false
|
||||
},
|
||||
grid: {
|
||||
show: false,
|
||||
padding: {
|
||||
left: -10,
|
||||
right: -5
|
||||
}
|
||||
},
|
||||
stroke: {
|
||||
width: 3,
|
||||
curve: 'straight'
|
||||
},
|
||||
colors: [config.colors.warning],
|
||||
fill: {
|
||||
type: 'gradient',
|
||||
gradient: {
|
||||
opacityFrom: 0.6,
|
||||
opacityTo: 0.15,
|
||||
stops: [0, 95, 100]
|
||||
}
|
||||
},
|
||||
xaxis: {
|
||||
labels: {
|
||||
show: false
|
||||
},
|
||||
axisBorder: {
|
||||
show: false
|
||||
},
|
||||
axisTicks: {
|
||||
show: false
|
||||
},
|
||||
lines: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
yaxis: {
|
||||
labels: {
|
||||
show: false
|
||||
},
|
||||
min: 1000,
|
||||
max: 6000,
|
||||
tickAmount: 5
|
||||
},
|
||||
tooltip: {
|
||||
enabled: false
|
||||
}
|
||||
};
|
||||
if (typeof projectStatusEl !== undefined && projectStatusEl !== null) {
|
||||
const projectStatus = new ApexCharts(projectStatusEl, projectStatusConfig);
|
||||
projectStatus.render();
|
||||
}
|
||||
})();
|
||||
@ -1,984 +0,0 @@
|
||||
/**
|
||||
* Dashboard eCommerce
|
||||
*/
|
||||
|
||||
'use strict';
|
||||
|
||||
(function () {
|
||||
let cardColor, labelColor, headingColor, borderColor, legendColor;
|
||||
|
||||
if (isDarkStyle) {
|
||||
cardColor = config.colors_dark.cardColor;
|
||||
labelColor = config.colors_dark.textMuted;
|
||||
legendColor = config.colors_dark.bodyColor;
|
||||
headingColor = config.colors_dark.headingColor;
|
||||
borderColor = config.colors_dark.borderColor;
|
||||
} else {
|
||||
cardColor = config.colors.cardColor;
|
||||
labelColor = config.colors.textMuted;
|
||||
legendColor = config.colors.bodyColor;
|
||||
headingColor = config.colors.headingColor;
|
||||
borderColor = config.colors.borderColor;
|
||||
}
|
||||
|
||||
// Donut Chart Colors
|
||||
const chartColors = {
|
||||
donut: {
|
||||
series1: config.colors.success,
|
||||
series2: '#28c76fb3',
|
||||
series3: '#28c76f80',
|
||||
series4: config.colors_label.success
|
||||
}
|
||||
};
|
||||
|
||||
// Expenses Radial Bar Chart
|
||||
// --------------------------------------------------------------------
|
||||
const expensesRadialChartEl = document.querySelector('#expensesChart'),
|
||||
expensesRadialChartConfig = {
|
||||
chart: {
|
||||
height: 145,
|
||||
sparkline: {
|
||||
enabled: true
|
||||
},
|
||||
parentHeightOffset: 0,
|
||||
type: 'radialBar'
|
||||
},
|
||||
colors: [config.colors.warning],
|
||||
series: [78],
|
||||
plotOptions: {
|
||||
radialBar: {
|
||||
offsetY: 0,
|
||||
startAngle: -90,
|
||||
endAngle: 90,
|
||||
hollow: {
|
||||
size: '65%'
|
||||
},
|
||||
track: {
|
||||
strokeWidth: '45%',
|
||||
background: borderColor
|
||||
},
|
||||
dataLabels: {
|
||||
name: {
|
||||
show: false
|
||||
},
|
||||
value: {
|
||||
fontSize: '22px',
|
||||
color: headingColor,
|
||||
fontWeight: 600,
|
||||
offsetY: -5
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
show: false,
|
||||
padding: {
|
||||
bottom: 5
|
||||
}
|
||||
},
|
||||
stroke: {
|
||||
lineCap: 'round'
|
||||
},
|
||||
labels: ['Progress'],
|
||||
responsive: [
|
||||
{
|
||||
breakpoint: 1442,
|
||||
options: {
|
||||
chart: {
|
||||
height: 120
|
||||
},
|
||||
plotOptions: {
|
||||
radialBar: {
|
||||
dataLabels: {
|
||||
value: {
|
||||
fontSize: '18px'
|
||||
}
|
||||
},
|
||||
hollow: {
|
||||
size: '60%'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
breakpoint: 1025,
|
||||
options: {
|
||||
chart: {
|
||||
height: 136
|
||||
},
|
||||
plotOptions: {
|
||||
radialBar: {
|
||||
hollow: {
|
||||
size: '65%'
|
||||
},
|
||||
dataLabels: {
|
||||
value: {
|
||||
fontSize: '18px'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
breakpoint: 769,
|
||||
options: {
|
||||
chart: {
|
||||
height: 120
|
||||
},
|
||||
plotOptions: {
|
||||
radialBar: {
|
||||
hollow: {
|
||||
size: '55%'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
breakpoint: 426,
|
||||
options: {
|
||||
chart: {
|
||||
height: 145
|
||||
},
|
||||
plotOptions: {
|
||||
radialBar: {
|
||||
hollow: {
|
||||
size: '65%'
|
||||
}
|
||||
}
|
||||
},
|
||||
dataLabels: {
|
||||
value: {
|
||||
offsetY: 0
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
breakpoint: 376,
|
||||
options: {
|
||||
chart: {
|
||||
height: 105
|
||||
},
|
||||
plotOptions: {
|
||||
radialBar: {
|
||||
hollow: {
|
||||
size: '60%'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
};
|
||||
if (typeof expensesRadialChartEl !== undefined && expensesRadialChartEl !== null) {
|
||||
const expensesRadialChart = new ApexCharts(expensesRadialChartEl, expensesRadialChartConfig);
|
||||
expensesRadialChart.render();
|
||||
}
|
||||
|
||||
// Profit last month Line Chart
|
||||
// --------------------------------------------------------------------
|
||||
const profitLastMonthEl = document.querySelector('#profitLastMonth'),
|
||||
profitLastMonthConfig = {
|
||||
chart: {
|
||||
height: 90,
|
||||
type: 'line',
|
||||
parentHeightOffset: 0,
|
||||
toolbar: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
borderColor: borderColor,
|
||||
strokeDashArray: 6,
|
||||
xaxis: {
|
||||
lines: {
|
||||
show: true,
|
||||
colors: '#000'
|
||||
}
|
||||
},
|
||||
yaxis: {
|
||||
lines: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
padding: {
|
||||
top: -18,
|
||||
left: -4,
|
||||
right: 7,
|
||||
bottom: -10
|
||||
}
|
||||
},
|
||||
colors: [config.colors.info],
|
||||
stroke: {
|
||||
width: 2
|
||||
},
|
||||
series: [
|
||||
{
|
||||
data: [0, 25, 10, 40, 25, 55]
|
||||
}
|
||||
],
|
||||
tooltip: {
|
||||
shared: false,
|
||||
intersect: true,
|
||||
x: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
xaxis: {
|
||||
labels: {
|
||||
show: false
|
||||
},
|
||||
axisTicks: {
|
||||
show: false
|
||||
},
|
||||
axisBorder: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
yaxis: {
|
||||
labels: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
tooltip: {
|
||||
enabled: false
|
||||
},
|
||||
markers: {
|
||||
size: 3.5,
|
||||
fillColor: config.colors.info,
|
||||
strokeColors: 'transparent',
|
||||
strokeWidth: 3.2,
|
||||
discrete: [
|
||||
{
|
||||
seriesIndex: 0,
|
||||
dataPointIndex: 5,
|
||||
fillColor: cardColor,
|
||||
strokeColor: config.colors.info,
|
||||
size: 5,
|
||||
shape: 'circle'
|
||||
}
|
||||
],
|
||||
hover: {
|
||||
size: 5.5
|
||||
}
|
||||
},
|
||||
responsive: [
|
||||
{
|
||||
breakpoint: 1442,
|
||||
options: {
|
||||
chart: {
|
||||
height: 100
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
breakpoint: 1025,
|
||||
options: {
|
||||
chart: {
|
||||
height: 86
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
breakpoint: 769,
|
||||
options: {
|
||||
chart: {
|
||||
height: 93
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
};
|
||||
if (typeof profitLastMonthEl !== undefined && profitLastMonthEl !== null) {
|
||||
const profitLastMonth = new ApexCharts(profitLastMonthEl, profitLastMonthConfig);
|
||||
profitLastMonth.render();
|
||||
}
|
||||
|
||||
// Generated Leads Chart
|
||||
// --------------------------------------------------------------------
|
||||
const generatedLeadsChartEl = document.querySelector('#generatedLeadsChart'),
|
||||
generatedLeadsChartConfig = {
|
||||
chart: {
|
||||
height: 147,
|
||||
width: 130,
|
||||
parentHeightOffset: 0,
|
||||
type: 'donut'
|
||||
},
|
||||
labels: ['Electronic', 'Sports', 'Decor', 'Fashion'],
|
||||
series: [45, 58, 30, 50],
|
||||
colors: [
|
||||
chartColors.donut.series1,
|
||||
chartColors.donut.series2,
|
||||
chartColors.donut.series3,
|
||||
chartColors.donut.series4
|
||||
],
|
||||
stroke: {
|
||||
width: 0
|
||||
},
|
||||
dataLabels: {
|
||||
enabled: false,
|
||||
formatter: function (val, opt) {
|
||||
return parseInt(val) + '%';
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
show: false
|
||||
},
|
||||
tooltip: {
|
||||
theme: false
|
||||
},
|
||||
grid: {
|
||||
padding: {
|
||||
top: 15,
|
||||
right: -20,
|
||||
left: -20
|
||||
}
|
||||
},
|
||||
states: {
|
||||
hover: {
|
||||
filter: {
|
||||
type: 'none'
|
||||
}
|
||||
}
|
||||
},
|
||||
plotOptions: {
|
||||
pie: {
|
||||
donut: {
|
||||
size: '70%',
|
||||
labels: {
|
||||
show: true,
|
||||
value: {
|
||||
fontSize: '1.375rem',
|
||||
fontFamily: 'Public Sans',
|
||||
color: headingColor,
|
||||
fontWeight: 600,
|
||||
offsetY: -15,
|
||||
formatter: function (val) {
|
||||
return parseInt(val) + '%';
|
||||
}
|
||||
},
|
||||
name: {
|
||||
offsetY: 20,
|
||||
fontFamily: 'Public Sans'
|
||||
},
|
||||
total: {
|
||||
show: true,
|
||||
showAlways: true,
|
||||
color: config.colors.success,
|
||||
fontSize: '.8125rem',
|
||||
label: 'Total',
|
||||
fontFamily: 'Public Sans',
|
||||
formatter: function (w) {
|
||||
return '184';
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
responsive: [
|
||||
{
|
||||
breakpoint: 1025,
|
||||
options: {
|
||||
chart: {
|
||||
height: 172,
|
||||
width: 160
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
breakpoint: 769,
|
||||
options: {
|
||||
chart: {
|
||||
height: 178
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
breakpoint: 426,
|
||||
options: {
|
||||
chart: {
|
||||
height: 147
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
};
|
||||
if (typeof generatedLeadsChartEl !== undefined && generatedLeadsChartEl !== null) {
|
||||
const generatedLeadsChart = new ApexCharts(generatedLeadsChartEl, generatedLeadsChartConfig);
|
||||
generatedLeadsChart.render();
|
||||
}
|
||||
|
||||
// Total Revenue Report Chart - Bar Chart
|
||||
// --------------------------------------------------------------------
|
||||
const totalRevenueChartEl = document.querySelector('#totalRevenueChart'),
|
||||
totalRevenueChartOptions = {
|
||||
series: [
|
||||
{
|
||||
name: 'Earning',
|
||||
data: [270, 210, 180, 200, 250, 280, 250, 270, 150]
|
||||
},
|
||||
{
|
||||
name: 'Expense',
|
||||
data: [-140, -160, -180, -150, -100, -60, -80, -100, -180]
|
||||
}
|
||||
],
|
||||
chart: {
|
||||
height: 365,
|
||||
parentHeightOffset: 0,
|
||||
stacked: true,
|
||||
type: 'bar',
|
||||
toolbar: { show: false }
|
||||
},
|
||||
tooltip: {
|
||||
enabled: false
|
||||
},
|
||||
plotOptions: {
|
||||
bar: {
|
||||
horizontal: false,
|
||||
columnWidth: '40%',
|
||||
borderRadius: 10,
|
||||
startingShape: 'rounded',
|
||||
endingShape: 'rounded'
|
||||
}
|
||||
},
|
||||
colors: [config.colors.primary, config.colors.warning],
|
||||
dataLabels: {
|
||||
enabled: false
|
||||
},
|
||||
stroke: {
|
||||
curve: 'smooth',
|
||||
width: 6,
|
||||
lineCap: 'round',
|
||||
colors: [cardColor]
|
||||
},
|
||||
legend: {
|
||||
show: true,
|
||||
horizontalAlign: 'left',
|
||||
position: 'top',
|
||||
fontFamily: 'Public Sans',
|
||||
markers: {
|
||||
height: 12,
|
||||
width: 12,
|
||||
radius: 12,
|
||||
offsetX: -3,
|
||||
offsetY: 2
|
||||
},
|
||||
labels: {
|
||||
colors: legendColor
|
||||
},
|
||||
itemMargin: {
|
||||
horizontal: 5
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
show: false,
|
||||
padding: {
|
||||
bottom: -8,
|
||||
top: 20
|
||||
}
|
||||
},
|
||||
xaxis: {
|
||||
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep'],
|
||||
labels: {
|
||||
style: {
|
||||
fontSize: '13px',
|
||||
colors: labelColor,
|
||||
fontFamily: 'Public Sans'
|
||||
}
|
||||
},
|
||||
axisTicks: {
|
||||
show: false
|
||||
},
|
||||
axisBorder: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
yaxis: {
|
||||
labels: {
|
||||
offsetX: -16,
|
||||
style: {
|
||||
fontSize: '13px',
|
||||
colors: labelColor,
|
||||
fontFamily: 'Public Sans'
|
||||
}
|
||||
},
|
||||
min: -200,
|
||||
max: 300,
|
||||
tickAmount: 5
|
||||
},
|
||||
responsive: [
|
||||
{
|
||||
breakpoint: 1700,
|
||||
options: {
|
||||
plotOptions: {
|
||||
bar: {
|
||||
columnWidth: '43%'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
breakpoint: 1441,
|
||||
options: {
|
||||
plotOptions: {
|
||||
bar: {
|
||||
columnWidth: '52%'
|
||||
}
|
||||
},
|
||||
chart: {
|
||||
height: 375
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
breakpoint: 1300,
|
||||
options: {
|
||||
plotOptions: {
|
||||
bar: {
|
||||
columnWidth: '62%'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
breakpoint: 1025,
|
||||
options: {
|
||||
plotOptions: {
|
||||
bar: {
|
||||
columnWidth: '70%'
|
||||
}
|
||||
},
|
||||
chart: {
|
||||
height: 390
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
breakpoint: 991,
|
||||
options: {
|
||||
plotOptions: {
|
||||
bar: {
|
||||
columnWidth: '38%'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
breakpoint: 850,
|
||||
options: {
|
||||
plotOptions: {
|
||||
bar: {
|
||||
columnWidth: '48%'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
breakpoint: 449,
|
||||
options: {
|
||||
plotOptions: {
|
||||
bar: {
|
||||
columnWidth: '70%'
|
||||
}
|
||||
},
|
||||
chart: {
|
||||
height: 360
|
||||
},
|
||||
xaxis: {
|
||||
labels: {
|
||||
offsetY: -5
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
breakpoint: 394,
|
||||
options: {
|
||||
plotOptions: {
|
||||
bar: {
|
||||
columnWidth: '88%'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
states: {
|
||||
hover: {
|
||||
filter: {
|
||||
type: 'none'
|
||||
}
|
||||
},
|
||||
active: {
|
||||
filter: {
|
||||
type: 'none'
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
if (typeof totalRevenueChartEl !== undefined && totalRevenueChartEl !== null) {
|
||||
const totalRevenueChart = new ApexCharts(totalRevenueChartEl, totalRevenueChartOptions);
|
||||
totalRevenueChart.render();
|
||||
}
|
||||
|
||||
// Total Revenue Report Budget Line Chart
|
||||
const budgetChartEl = document.querySelector('#budgetChart'),
|
||||
budgetChartOptions = {
|
||||
chart: {
|
||||
height: 100,
|
||||
toolbar: { show: false },
|
||||
zoom: { enabled: false },
|
||||
type: 'line'
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: 'Last Month',
|
||||
data: [20, 10, 30, 16, 24, 5, 40, 23, 28, 5, 30]
|
||||
},
|
||||
{
|
||||
name: 'This Month',
|
||||
data: [50, 40, 60, 46, 54, 35, 70, 53, 58, 35, 60]
|
||||
}
|
||||
],
|
||||
stroke: {
|
||||
curve: 'smooth',
|
||||
dashArray: [5, 0],
|
||||
width: [1, 2]
|
||||
},
|
||||
legend: {
|
||||
show: false
|
||||
},
|
||||
colors: [borderColor, config.colors.primary],
|
||||
grid: {
|
||||
show: false,
|
||||
borderColor: borderColor,
|
||||
padding: {
|
||||
top: -30,
|
||||
bottom: -15,
|
||||
left: 25
|
||||
}
|
||||
},
|
||||
markers: {
|
||||
size: 0
|
||||
},
|
||||
xaxis: {
|
||||
labels: {
|
||||
show: false
|
||||
},
|
||||
axisTicks: {
|
||||
show: false
|
||||
},
|
||||
axisBorder: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
yaxis: {
|
||||
show: false
|
||||
},
|
||||
tooltip: {
|
||||
enabled: false
|
||||
}
|
||||
};
|
||||
if (typeof budgetChartEl !== undefined && budgetChartEl !== null) {
|
||||
const budgetChart = new ApexCharts(budgetChartEl, budgetChartOptions);
|
||||
budgetChart.render();
|
||||
}
|
||||
|
||||
// Earning Reports Bar Chart
|
||||
// --------------------------------------------------------------------
|
||||
const reportBarChartEl = document.querySelector('#reportBarChart'),
|
||||
reportBarChartConfig = {
|
||||
chart: {
|
||||
height: 230,
|
||||
type: 'bar',
|
||||
toolbar: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
plotOptions: {
|
||||
bar: {
|
||||
barHeight: '60%',
|
||||
columnWidth: '60%',
|
||||
startingShape: 'rounded',
|
||||
endingShape: 'rounded',
|
||||
borderRadius: 4,
|
||||
distributed: true
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
show: false,
|
||||
padding: {
|
||||
top: -20,
|
||||
bottom: 0,
|
||||
left: -10,
|
||||
right: -10
|
||||
}
|
||||
},
|
||||
colors: [
|
||||
config.colors_label.primary,
|
||||
config.colors_label.primary,
|
||||
config.colors_label.primary,
|
||||
config.colors_label.primary,
|
||||
config.colors.primary,
|
||||
config.colors_label.primary,
|
||||
config.colors_label.primary
|
||||
],
|
||||
dataLabels: {
|
||||
enabled: false
|
||||
},
|
||||
series: [
|
||||
{
|
||||
data: [40, 95, 60, 45, 90, 50, 75]
|
||||
}
|
||||
],
|
||||
legend: {
|
||||
show: false
|
||||
},
|
||||
xaxis: {
|
||||
categories: ['Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su'],
|
||||
axisBorder: {
|
||||
show: false
|
||||
},
|
||||
axisTicks: {
|
||||
show: false
|
||||
},
|
||||
labels: {
|
||||
style: {
|
||||
colors: labelColor,
|
||||
fontSize: '13px'
|
||||
}
|
||||
}
|
||||
},
|
||||
yaxis: {
|
||||
labels: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
responsive: [
|
||||
{
|
||||
breakpoint: 1025,
|
||||
options: {
|
||||
chart: {
|
||||
height: 190
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
breakpoint: 769,
|
||||
options: {
|
||||
chart: {
|
||||
height: 250
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
};
|
||||
if (typeof reportBarChartEl !== undefined && reportBarChartEl !== null) {
|
||||
const barChart = new ApexCharts(reportBarChartEl, reportBarChartConfig);
|
||||
barChart.render();
|
||||
}
|
||||
|
||||
// Variable declaration for table
|
||||
var dt_invoice_table = $('.datatable-invoice');
|
||||
// Invoice datatable
|
||||
// --------------------------------------------------------------------
|
||||
if (dt_invoice_table.length) {
|
||||
var dt_invoice = dt_invoice_table.DataTable({
|
||||
ajax: assetsPath + 'json/invoice-list.json', // JSON file to add data
|
||||
columns: [
|
||||
// columns according to JSON
|
||||
{ data: '' },
|
||||
{ data: 'invoice_id' },
|
||||
{ data: 'invoice_status' },
|
||||
{ data: 'total' },
|
||||
{ data: 'issued_date' },
|
||||
{ data: 'invoice_status' },
|
||||
{ data: 'action' }
|
||||
],
|
||||
columnDefs: [
|
||||
{
|
||||
// For Responsive
|
||||
className: 'control',
|
||||
responsivePriority: 2,
|
||||
targets: 0,
|
||||
render: function (data, type, full, meta) {
|
||||
return '';
|
||||
}
|
||||
},
|
||||
{
|
||||
// Invoice ID
|
||||
targets: 1,
|
||||
render: function (data, type, full, meta) {
|
||||
var $invoice_id = full['invoice_id'];
|
||||
// Creates full output for row
|
||||
var $row_output = '<a href="app-invoice-preview.html"><span>#' + $invoice_id + '</span></a>';
|
||||
return $row_output;
|
||||
}
|
||||
},
|
||||
{
|
||||
// Invoice status
|
||||
targets: 2,
|
||||
render: function (data, type, full, meta) {
|
||||
var $invoice_status = full['invoice_status'],
|
||||
$due_date = full['due_date'],
|
||||
$balance = full['balance'];
|
||||
var roleBadgeObj = {
|
||||
Sent: '<span class="badge badge-center rounded-pill bg-label-secondary w-px-30 h-px-30"><i class="ti ti-circle-check ti-sm"></i></span>',
|
||||
Draft:
|
||||
'<span class="badge badge-center rounded-pill bg-label-primary w-px-30 h-px-30"><i class="ti ti-device-floppy ti-sm"></i></span>',
|
||||
'Past Due':
|
||||
'<span class="badge badge-center rounded-pill bg-label-danger w-px-30 h-px-30"><i class="ti ti-info-circle ti-sm"></i></span>',
|
||||
'Partial Payment':
|
||||
'<span class="badge badge-center rounded-pill bg-label-success w-px-30 h-px-30"><i class="ti ti-circle-half-2 ti-sm"></i></span>',
|
||||
Paid: '<span class="badge badge-center rounded-pill bg-label-warning w-px-30 h-px-30"><i class="ti ti-chart-pie ti-sm"></i></span>',
|
||||
Downloaded:
|
||||
'<span class="badge badge-center rounded-pill bg-label-info w-px-30 h-px-30"><i class="ti ti-arrow-down-circle ti-sm"></i></span>'
|
||||
};
|
||||
return (
|
||||
"<span data-bs-toggle='tooltip' data-bs-html='true' title='<span>" +
|
||||
$invoice_status +
|
||||
'<br> <strong>Balance:</strong> ' +
|
||||
$balance +
|
||||
'<br> <strong>Due Date:</strong> ' +
|
||||
$due_date +
|
||||
"</span>'>" +
|
||||
roleBadgeObj[$invoice_status] +
|
||||
'</span>'
|
||||
);
|
||||
}
|
||||
},
|
||||
{
|
||||
// Total Invoice Amount
|
||||
targets: 3,
|
||||
render: function (data, type, full, meta) {
|
||||
var $total = full['total'];
|
||||
return '$' + $total;
|
||||
}
|
||||
},
|
||||
{
|
||||
// Actions
|
||||
targets: -1,
|
||||
title: 'Actions',
|
||||
orderable: false,
|
||||
render: function (data, type, full, meta) {
|
||||
return (
|
||||
'<div class="d-flex align-items-center">' +
|
||||
'<a href="javascript:;" class="text-body" data-bs-toggle="tooltip" title="Send Mail"><i class="ti ti-mail me-2 ti-sm"></i></a>' +
|
||||
'<a href="app-invoice-preview.html" class="text-body" data-bs-toggle="tooltip" title="Preview"><i class="ti ti-eye mx-2 ti-sm"></i></a>' +
|
||||
'<a href="javascript:;" class="text-body" data-bs-toggle="tooltip" title="Download"><i class="ti ti-dots-vertical mx-1 ti-sm"></i></a>' +
|
||||
'</div>'
|
||||
);
|
||||
}
|
||||
},
|
||||
{
|
||||
// Invoice Status
|
||||
targets: -2,
|
||||
visible: false
|
||||
}
|
||||
],
|
||||
order: [[1, 'desc']],
|
||||
dom:
|
||||
'<"row ms-2 me-3"' +
|
||||
'<"col-12 col-md-6 d-flex align-items-center justify-content-center justify-content-md-start gap-2"l<"dt-action-buttons text-xl-end text-lg-start text-md-end text-start mt-md-0 mt-3"B>>' +
|
||||
'<"col-12 col-md-6 d-flex align-items-center justify-content-end flex-column flex-md-row pe-3 gap-md-2"f<"invoice_status mb-3 mb-md-0">>' +
|
||||
'>t' +
|
||||
'<"row mx-2"' +
|
||||
'<"col-sm-12 col-md-6"i>' +
|
||||
'<"col-sm-12 col-md-6"p>' +
|
||||
'>',
|
||||
displayLength: 7,
|
||||
lengthMenu: [7, 10, 25, 50, 75, 100],
|
||||
language: {
|
||||
sLengthMenu: '_MENU_',
|
||||
search: '',
|
||||
searchPlaceholder: 'Search Invoice'
|
||||
},
|
||||
// Buttons
|
||||
buttons: [
|
||||
{
|
||||
text: '<i class="ti ti-plus me-md-2"></i><span class="d-md-inline-block d-none">Create Invoice</span>',
|
||||
className: 'btn btn-primary',
|
||||
action: function (e, dt, button, config) {
|
||||
window.location = 'app-invoice-add.html';
|
||||
}
|
||||
}
|
||||
],
|
||||
// For responsive popup
|
||||
responsive: {
|
||||
details: {
|
||||
display: $.fn.dataTable.Responsive.display.modal({
|
||||
header: function (row) {
|
||||
var data = row.data();
|
||||
return 'Details of ' + data['full_name'];
|
||||
}
|
||||
}),
|
||||
type: 'column',
|
||||
renderer: function (api, rowIdx, columns) {
|
||||
var data = $.map(columns, function (col, i) {
|
||||
return col.title !== '' // ? Do not show row in modal popup if title is blank (for check box)
|
||||
? '<tr data-dt-row="' +
|
||||
col.rowIndex +
|
||||
'" data-dt-column="' +
|
||||
col.columnIndex +
|
||||
'">' +
|
||||
'<td>' +
|
||||
col.title +
|
||||
':' +
|
||||
'</td> ' +
|
||||
'<td>' +
|
||||
col.data +
|
||||
'</td>' +
|
||||
'</tr>'
|
||||
: '';
|
||||
}).join('');
|
||||
|
||||
return data ? $('<table class="table"/><tbody />').append(data) : false;
|
||||
}
|
||||
}
|
||||
},
|
||||
initComplete: function () {
|
||||
// Adding role filter once table initialized
|
||||
this.api()
|
||||
.columns(5)
|
||||
.every(function () {
|
||||
var column = this;
|
||||
var select = $(
|
||||
'<select id="UserRole" class="form-select"><option value=""> Select Status </option></select>'
|
||||
)
|
||||
.appendTo('.invoice_status')
|
||||
.on('change', function () {
|
||||
var val = $.fn.dataTable.util.escapeRegex($(this).val());
|
||||
column.search(val ? '^' + val + '$' : '', true, false).draw();
|
||||
});
|
||||
|
||||
column
|
||||
.data()
|
||||
.unique()
|
||||
.sort()
|
||||
.each(function (d, j) {
|
||||
select.append('<option value="' + d + '" class="text-capitalize">' + d + '</option>');
|
||||
});
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
// On each datatable draw, initialize tooltip
|
||||
dt_invoice_table.on('draw.dt', function () {
|
||||
var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
|
||||
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
|
||||
return new bootstrap.Tooltip(tooltipTriggerEl, {
|
||||
boundary: document.body
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
// Filter form control to default size
|
||||
// ? setTimeout used for multilingual table initialization
|
||||
setTimeout(() => {
|
||||
$('.dataTables_filter .form-control').removeClass('form-control-sm');
|
||||
$('.dataTables_length .form-select').removeClass('form-select-sm');
|
||||
}, 300);
|
||||
})();
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large
Load Diff
@ -1,272 +0,0 @@
|
||||
/*! Bootstrap integration for DataTables' Editor
|
||||
* © SpryMedia Ltd - datatables.net/license
|
||||
*/
|
||||
|
||||
(function( factory ){
|
||||
if ( typeof define === 'function' && define.amd ) {
|
||||
// AMD
|
||||
define( ['jquery', 'datatables.net-bs', 'datatables.net-editor'], function ( $ ) {
|
||||
return factory( $, window, document );
|
||||
} );
|
||||
}
|
||||
else if ( typeof exports === 'object' ) {
|
||||
// CommonJS
|
||||
var jq = require('jquery');
|
||||
var cjsRequires = function (root, $) {
|
||||
if ( ! $.fn.dataTable ) {
|
||||
require('datatables.net-bs')(root, $);
|
||||
}
|
||||
|
||||
if ( ! $.fn.dataTable.Editor ) {
|
||||
require('datatables.net-editor')(root, $);
|
||||
}
|
||||
};
|
||||
|
||||
if (typeof window === 'undefined') {
|
||||
module.exports = function (root, $) {
|
||||
if ( ! root ) {
|
||||
// CommonJS environments without a window global must pass a
|
||||
// root. This will give an error otherwise
|
||||
root = window;
|
||||
}
|
||||
|
||||
if ( ! $ ) {
|
||||
$ = jq( root );
|
||||
}
|
||||
|
||||
cjsRequires( root, $ );
|
||||
return factory( $, root, root.document );
|
||||
};
|
||||
}
|
||||
else {
|
||||
cjsRequires( window, jq );
|
||||
module.exports = factory( jq, window, window.document );
|
||||
}
|
||||
}
|
||||
else {
|
||||
// Browser
|
||||
factory( jQuery, window, document );
|
||||
}
|
||||
}(function( $, window, document, undefined ) {
|
||||
'use strict';
|
||||
var DataTable = $.fn.dataTable;
|
||||
|
||||
|
||||
var Editor = DataTable.Editor;
|
||||
|
||||
/*
|
||||
* Set the default display controller to be our bootstrap control
|
||||
*/
|
||||
DataTable.Editor.defaults.display = "bootstrap";
|
||||
|
||||
|
||||
/*
|
||||
* Change the default classes from Editor to be classes for Bootstrap
|
||||
*/
|
||||
$.extend( true, $.fn.dataTable.Editor.classes, {
|
||||
"header": {
|
||||
"wrapper": "DTE_Header modal-header",
|
||||
title: {
|
||||
tag: 'h4',
|
||||
class: 'modal-title'
|
||||
}
|
||||
},
|
||||
"body": {
|
||||
"wrapper": "DTE_Body modal-body"
|
||||
},
|
||||
"footer": {
|
||||
"wrapper": "DTE_Footer modal-footer"
|
||||
},
|
||||
"form": {
|
||||
"tag": "form-horizontal",
|
||||
"button": "btn btn-default",
|
||||
"buttonInternal": "btn btn-default"
|
||||
},
|
||||
"field": {
|
||||
"wrapper": "DTE_Field",
|
||||
"label": "col-lg-4 control-label",
|
||||
"input": "col-lg-8 controls",
|
||||
"error": "error has-error",
|
||||
"msg-labelInfo": "help-block",
|
||||
"msg-info": "help-block",
|
||||
"msg-message": "help-block",
|
||||
"msg-error": "help-block",
|
||||
"multiValue": "well well-sm multi-value",
|
||||
"multiInfo": "small",
|
||||
"multiRestore": "well well-sm multi-restore"
|
||||
}
|
||||
} );
|
||||
|
||||
$.extend( true, DataTable.ext.buttons, {
|
||||
create: {
|
||||
formButtons: {
|
||||
className: 'btn-primary'
|
||||
}
|
||||
},
|
||||
edit: {
|
||||
formButtons: {
|
||||
className: 'btn-primary'
|
||||
}
|
||||
},
|
||||
remove: {
|
||||
formButtons: {
|
||||
className: 'btn-danger'
|
||||
}
|
||||
}
|
||||
} );
|
||||
|
||||
DataTable.Editor.fieldTypes.datatable.tableClass = 'table';
|
||||
|
||||
let shown = false;
|
||||
let fullyShown = false;
|
||||
|
||||
const dom = {
|
||||
// Note that `modal-dialog-scrollable` is BS4.3+ only. It has no effect on 4.0-4.2
|
||||
content: $(
|
||||
'<div class="modal fade DTED">'+
|
||||
'<div class="modal-dialog">'+
|
||||
'<div class="modal-content"></div>'+
|
||||
'</div>'+
|
||||
'</div>'
|
||||
),
|
||||
close: $('<button class="close">×</div>')
|
||||
};
|
||||
|
||||
/*
|
||||
* Bootstrap display controller - this is effectively a proxy to the Bootstrap
|
||||
* modal control.
|
||||
*/
|
||||
DataTable.Editor.display.bootstrap = $.extend( true, {}, DataTable.Editor.models.displayController, {
|
||||
init: function ( dte ) {
|
||||
// Add `form-control` to required elements
|
||||
dte.on( 'displayOrder.dtebs open.dtebs', function ( e, display, action, form ) {
|
||||
$.each( dte.s.fields, function ( key, field ) {
|
||||
$('input:not([type=checkbox]):not([type=radio]), select, textarea', field.node() )
|
||||
.addClass( 'form-control' );
|
||||
} );
|
||||
} );
|
||||
|
||||
return DataTable.Editor.display.bootstrap;
|
||||
},
|
||||
|
||||
open: function ( dte, append, callback ) {
|
||||
$(append).addClass('modal-content');
|
||||
|
||||
// Special class for DataTable buttons in the form
|
||||
$(append).find('div.DTE_Field_Type_datatable div.dt-buttons')
|
||||
.removeClass('btn-group')
|
||||
.addClass('btn-group-vertical');
|
||||
|
||||
var content = dom.content.find('div.modal-dialog');
|
||||
content.children().detach();
|
||||
content.append( append );
|
||||
|
||||
// Setup events on each show
|
||||
dom.close
|
||||
.attr('title', dte.i18n.close)
|
||||
.off('click.dte-bs3')
|
||||
.on('click.dte-bs3', function () {
|
||||
dte.close('icon');
|
||||
})
|
||||
.prependTo($('div.modal-header', dom.content));
|
||||
|
||||
// This is a bit horrible, but if you mousedown and then drag out of the modal container, we don't
|
||||
// want to trigger a background action.
|
||||
var allowBackgroundClick = false;
|
||||
$(document)
|
||||
.off('mousedown.dte-bs3')
|
||||
.on('mousedown.dte-bs3', 'div.modal', function (e) {
|
||||
if ( ! shown ) {
|
||||
return;
|
||||
}
|
||||
|
||||
allowBackgroundClick = $(e.target).hasClass('modal') && shown
|
||||
? true
|
||||
: false;
|
||||
} );
|
||||
|
||||
$(document)
|
||||
.off('click.dte-bs3')
|
||||
.on('click.dte-bs3', 'div.modal', function (e) {
|
||||
if ( $(e.target).hasClass('modal') && allowBackgroundClick ) {
|
||||
dte.background();
|
||||
}
|
||||
|
||||
if ( ! $(e.target).hasClass('modal') ) {
|
||||
return;
|
||||
}
|
||||
|
||||
// If scrollbar shown
|
||||
if ($('div.modal-dialog').height() > $(e.target).height()) {
|
||||
// And if clicking inside it - do nothing
|
||||
if (e.pageX >= document.body.offsetWidth - DataTable.__browser.barWidth) {
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
// All checks pass - do background action
|
||||
dte.background();
|
||||
} );
|
||||
|
||||
if ( shown ) {
|
||||
if ( callback ) {
|
||||
callback();
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
shown = true;
|
||||
fullyShown = false;
|
||||
|
||||
$(dom.content)
|
||||
.one('shown.bs.modal', function () {
|
||||
// Can only give elements focus when shown
|
||||
if ( dte.s.setFocus ) {
|
||||
dte.s.setFocus.focus();
|
||||
}
|
||||
|
||||
if ( callback ) {
|
||||
callback();
|
||||
}
|
||||
})
|
||||
.one('hidden', function () {
|
||||
shown = false;
|
||||
})
|
||||
.appendTo( 'body' )
|
||||
.modal( {
|
||||
backdrop: "static",
|
||||
keyboard: false
|
||||
} );
|
||||
|
||||
dom.close.prependTo($('div.modal-header', dom.content));
|
||||
},
|
||||
|
||||
close: function ( dte, callback ) {
|
||||
if ( ! shown ) {
|
||||
if ( callback ) {
|
||||
callback();
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
$(dom.content)
|
||||
.one( 'hidden.bs.modal', function () {
|
||||
$(this).detach();
|
||||
} )
|
||||
.modal('hide');
|
||||
|
||||
shown = false;
|
||||
|
||||
if ( callback ) {
|
||||
callback();
|
||||
}
|
||||
},
|
||||
|
||||
node: function ( dte ) {
|
||||
return dom.content[0];
|
||||
}
|
||||
} );
|
||||
|
||||
|
||||
return Editor;
|
||||
}));
|
||||
@ -1,4 +0,0 @@
|
||||
/*! Bootstrap integration for DataTables' Editor
|
||||
* © SpryMedia Ltd - datatables.net/license
|
||||
*/
|
||||
!function(o){var d,n;"function"==typeof define&&define.amd?define(["jquery","datatables.net-bs","datatables.net-editor"],function(e){return o(e,window,document)}):"object"==typeof exports?(d=require("jquery"),n=function(e,t){t.fn.dataTable||require("datatables.net-bs")(e,t),t.fn.dataTable.Editor||require("datatables.net-editor")(e,t)},"undefined"==typeof window?module.exports=function(e,t){return e=e||window,t=t||d(e),n(e,t),o(t,0,e.document)}:(n(window,d),module.exports=o(d,window,window.document))):o(jQuery,window,document)}(function(a,e,l,t){"use strict";var s=a.fn.dataTable,o=s.Editor;s.Editor.defaults.display="bootstrap",a.extend(!0,a.fn.dataTable.Editor.classes,{header:{wrapper:"DTE_Header modal-header",title:{tag:"h4",class:"modal-title"}},body:{wrapper:"DTE_Body modal-body"},footer:{wrapper:"DTE_Footer modal-footer"},form:{tag:"form-horizontal",button:"btn btn-default",buttonInternal:"btn btn-default"},field:{wrapper:"DTE_Field",label:"col-lg-4 control-label",input:"col-lg-8 controls",error:"error has-error","msg-labelInfo":"help-block","msg-info":"help-block","msg-message":"help-block","msg-error":"help-block",multiValue:"well well-sm multi-value",multiInfo:"small",multiRestore:"well well-sm multi-restore"}}),a.extend(!0,s.ext.buttons,{create:{formButtons:{className:"btn-primary"}},edit:{formButtons:{className:"btn-primary"}},remove:{formButtons:{className:"btn-danger"}}});let r=!(s.Editor.fieldTypes.datatable.tableClass="table");const i={content:a('<div class="modal fade DTED"><div class="modal-dialog"><div class="modal-content"></div></div></div>'),close:a('<button class="close">×</div>')};return s.Editor.display.bootstrap=a.extend(!0,{},s.Editor.models.displayController,{init:function(n){return n.on("displayOrder.dtebs open.dtebs",function(e,t,o,d){a.each(n.s.fields,function(e,t){a("input:not([type=checkbox]):not([type=radio]), select, textarea",t.node()).addClass("form-control")})}),s.Editor.display.bootstrap},open:function(t,e,o){a(e).addClass("modal-content"),a(e).find("div.DTE_Field_Type_datatable div.dt-buttons").removeClass("btn-group").addClass("btn-group-vertical");var d=i.content.find("div.modal-dialog"),n=(d.children().detach(),d.append(e),i.close.attr("title",t.i18n.close).off("click.dte-bs3").on("click.dte-bs3",function(){t.close("icon")}).prependTo(a("div.modal-header",i.content)),!1);a(l).off("mousedown.dte-bs3").on("mousedown.dte-bs3","div.modal",function(e){r&&(n=!(!a(e.target).hasClass("modal")||!r))}),a(l).off("click.dte-bs3").on("click.dte-bs3","div.modal",function(e){a(e.target).hasClass("modal")&&n&&t.background(),!a(e.target).hasClass("modal")||a("div.modal-dialog").height()>a(e.target).height()&&e.pageX>=l.body.offsetWidth-s.__browser.barWidth||t.background()}),r?o&&o():(r=!0,a(i.content).one("shown.bs.modal",function(){t.s.setFocus&&t.s.setFocus.focus(),o&&o()}).one("hidden",function(){r=!1}).appendTo("body").modal({backdrop:"static",keyboard:!1}),i.close.prependTo(a("div.modal-header",i.content)))},close:function(e,t){r&&(a(i.content).one("hidden.bs.modal",function(){a(this).detach()}).modal("hide"),r=!1),t&&t()},node:function(e){return i.content[0]}}),o});
|
||||
@ -1,4 +0,0 @@
|
||||
/*! Bootstrap integration for DataTables' Editor
|
||||
* © SpryMedia Ltd - datatables.net/license
|
||||
*/
|
||||
import jQuery from"jquery";import DataTable from"datatables.net-bs";import Editor from"datatables.net-editor";let $=jQuery;var Editor=DataTable.Editor;DataTable.Editor.defaults.display="bootstrap",$.extend(!0,$.fn.dataTable.Editor.classes,{header:{wrapper:"DTE_Header modal-header",title:{tag:"h4",class:"modal-title"}},body:{wrapper:"DTE_Body modal-body"},footer:{wrapper:"DTE_Footer modal-footer"},form:{tag:"form-horizontal",button:"btn btn-default",buttonInternal:"btn btn-default"},field:{wrapper:"DTE_Field",label:"col-lg-4 control-label",input:"col-lg-8 controls",error:"error has-error","msg-labelInfo":"help-block","msg-info":"help-block","msg-message":"help-block","msg-error":"help-block",multiValue:"well well-sm multi-value",multiInfo:"small",multiRestore:"well well-sm multi-restore"}}),$.extend(!0,DataTable.ext.buttons,{create:{formButtons:{className:"btn-primary"}},edit:{formButtons:{className:"btn-primary"}},remove:{formButtons:{className:"btn-danger"}}});let shown=!(DataTable.Editor.fieldTypes.datatable.tableClass="table"),fullyShown=!1;const dom={content:$('<div class="modal fade DTED"><div class="modal-dialog"><div class="modal-content"></div></div></div>'),close:$('<button class="close">×</div>')};DataTable.Editor.display.bootstrap=$.extend(!0,{},DataTable.Editor.models.displayController,{init:function(d){return d.on("displayOrder.dtebs open.dtebs",function(o,t,e,a){$.each(d.s.fields,function(o,t){$("input:not([type=checkbox]):not([type=radio]), select, textarea",t.node()).addClass("form-control")})}),DataTable.Editor.display.bootstrap},open:function(t,o,e){$(o).addClass("modal-content"),$(o).find("div.DTE_Field_Type_datatable div.dt-buttons").removeClass("btn-group").addClass("btn-group-vertical");var a=dom.content.find("div.modal-dialog"),d=(a.children().detach(),a.append(o),dom.close.attr("title",t.i18n.close).off("click.dte-bs3").on("click.dte-bs3",function(){t.close("icon")}).prependTo($("div.modal-header",dom.content)),!1);$(document).off("mousedown.dte-bs3").on("mousedown.dte-bs3","div.modal",function(o){shown&&(d=!(!$(o.target).hasClass("modal")||!shown))}),$(document).off("click.dte-bs3").on("click.dte-bs3","div.modal",function(o){$(o.target).hasClass("modal")&&d&&t.background(),!$(o.target).hasClass("modal")||$("div.modal-dialog").height()>$(o.target).height()&&o.pageX>=document.body.offsetWidth-DataTable.__browser.barWidth||t.background()}),shown?e&&e():(shown=!0,fullyShown=!1,$(dom.content).one("shown.bs.modal",function(){t.s.setFocus&&t.s.setFocus.focus(),e&&e()}).one("hidden",function(){shown=!1}).appendTo("body").modal({backdrop:"static",keyboard:!1}),dom.close.prependTo($("div.modal-header",dom.content)))},close:function(o,t){shown&&($(dom.content).one("hidden.bs.modal",function(){$(this).detach()}).modal("hide"),shown=!1),t&&t()},node:function(o){return dom.content[0]}});export default Editor;
|
||||
@ -1,228 +0,0 @@
|
||||
/*! Bootstrap integration for DataTables' Editor
|
||||
* © SpryMedia Ltd - datatables.net/license
|
||||
*/
|
||||
|
||||
import jQuery from 'jquery';
|
||||
import DataTable from 'datatables.net-bs';
|
||||
import Editor from 'datatables.net-editor';
|
||||
|
||||
// Allow reassignment of the $ variable
|
||||
let $ = jQuery;
|
||||
|
||||
var Editor = DataTable.Editor;
|
||||
|
||||
/*
|
||||
* Set the default display controller to be our bootstrap control
|
||||
*/
|
||||
DataTable.Editor.defaults.display = "bootstrap";
|
||||
|
||||
|
||||
/*
|
||||
* Change the default classes from Editor to be classes for Bootstrap
|
||||
*/
|
||||
$.extend( true, $.fn.dataTable.Editor.classes, {
|
||||
"header": {
|
||||
"wrapper": "DTE_Header modal-header",
|
||||
title: {
|
||||
tag: 'h4',
|
||||
class: 'modal-title'
|
||||
}
|
||||
},
|
||||
"body": {
|
||||
"wrapper": "DTE_Body modal-body"
|
||||
},
|
||||
"footer": {
|
||||
"wrapper": "DTE_Footer modal-footer"
|
||||
},
|
||||
"form": {
|
||||
"tag": "form-horizontal",
|
||||
"button": "btn btn-default",
|
||||
"buttonInternal": "btn btn-default"
|
||||
},
|
||||
"field": {
|
||||
"wrapper": "DTE_Field",
|
||||
"label": "col-lg-4 control-label",
|
||||
"input": "col-lg-8 controls",
|
||||
"error": "error has-error",
|
||||
"msg-labelInfo": "help-block",
|
||||
"msg-info": "help-block",
|
||||
"msg-message": "help-block",
|
||||
"msg-error": "help-block",
|
||||
"multiValue": "well well-sm multi-value",
|
||||
"multiInfo": "small",
|
||||
"multiRestore": "well well-sm multi-restore"
|
||||
}
|
||||
} );
|
||||
|
||||
$.extend( true, DataTable.ext.buttons, {
|
||||
create: {
|
||||
formButtons: {
|
||||
className: 'btn-primary'
|
||||
}
|
||||
},
|
||||
edit: {
|
||||
formButtons: {
|
||||
className: 'btn-primary'
|
||||
}
|
||||
},
|
||||
remove: {
|
||||
formButtons: {
|
||||
className: 'btn-danger'
|
||||
}
|
||||
}
|
||||
} );
|
||||
|
||||
DataTable.Editor.fieldTypes.datatable.tableClass = 'table';
|
||||
|
||||
let shown = false;
|
||||
let fullyShown = false;
|
||||
|
||||
const dom = {
|
||||
// Note that `modal-dialog-scrollable` is BS4.3+ only. It has no effect on 4.0-4.2
|
||||
content: $(
|
||||
'<div class="modal fade DTED">'+
|
||||
'<div class="modal-dialog">'+
|
||||
'<div class="modal-content"></div>'+
|
||||
'</div>'+
|
||||
'</div>'
|
||||
),
|
||||
close: $('<button class="close">×</div>')
|
||||
};
|
||||
|
||||
/*
|
||||
* Bootstrap display controller - this is effectively a proxy to the Bootstrap
|
||||
* modal control.
|
||||
*/
|
||||
DataTable.Editor.display.bootstrap = $.extend( true, {}, DataTable.Editor.models.displayController, {
|
||||
init: function ( dte ) {
|
||||
// Add `form-control` to required elements
|
||||
dte.on( 'displayOrder.dtebs open.dtebs', function ( e, display, action, form ) {
|
||||
$.each( dte.s.fields, function ( key, field ) {
|
||||
$('input:not([type=checkbox]):not([type=radio]), select, textarea', field.node() )
|
||||
.addClass( 'form-control' );
|
||||
} );
|
||||
} );
|
||||
|
||||
return DataTable.Editor.display.bootstrap;
|
||||
},
|
||||
|
||||
open: function ( dte, append, callback ) {
|
||||
$(append).addClass('modal-content');
|
||||
|
||||
// Special class for DataTable buttons in the form
|
||||
$(append).find('div.DTE_Field_Type_datatable div.dt-buttons')
|
||||
.removeClass('btn-group')
|
||||
.addClass('btn-group-vertical');
|
||||
|
||||
var content = dom.content.find('div.modal-dialog');
|
||||
content.children().detach();
|
||||
content.append( append );
|
||||
|
||||
// Setup events on each show
|
||||
dom.close
|
||||
.attr('title', dte.i18n.close)
|
||||
.off('click.dte-bs3')
|
||||
.on('click.dte-bs3', function () {
|
||||
dte.close('icon');
|
||||
})
|
||||
.prependTo($('div.modal-header', dom.content));
|
||||
|
||||
// This is a bit horrible, but if you mousedown and then drag out of the modal container, we don't
|
||||
// want to trigger a background action.
|
||||
var allowBackgroundClick = false;
|
||||
$(document)
|
||||
.off('mousedown.dte-bs3')
|
||||
.on('mousedown.dte-bs3', 'div.modal', function (e) {
|
||||
if ( ! shown ) {
|
||||
return;
|
||||
}
|
||||
|
||||
allowBackgroundClick = $(e.target).hasClass('modal') && shown
|
||||
? true
|
||||
: false;
|
||||
} );
|
||||
|
||||
$(document)
|
||||
.off('click.dte-bs3')
|
||||
.on('click.dte-bs3', 'div.modal', function (e) {
|
||||
if ( $(e.target).hasClass('modal') && allowBackgroundClick ) {
|
||||
dte.background();
|
||||
}
|
||||
|
||||
if ( ! $(e.target).hasClass('modal') ) {
|
||||
return;
|
||||
}
|
||||
|
||||
// If scrollbar shown
|
||||
if ($('div.modal-dialog').height() > $(e.target).height()) {
|
||||
// And if clicking inside it - do nothing
|
||||
if (e.pageX >= document.body.offsetWidth - DataTable.__browser.barWidth) {
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
// All checks pass - do background action
|
||||
dte.background();
|
||||
} );
|
||||
|
||||
if ( shown ) {
|
||||
if ( callback ) {
|
||||
callback();
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
shown = true;
|
||||
fullyShown = false;
|
||||
|
||||
$(dom.content)
|
||||
.one('shown.bs.modal', function () {
|
||||
// Can only give elements focus when shown
|
||||
if ( dte.s.setFocus ) {
|
||||
dte.s.setFocus.focus();
|
||||
}
|
||||
|
||||
if ( callback ) {
|
||||
callback();
|
||||
}
|
||||
})
|
||||
.one('hidden', function () {
|
||||
shown = false;
|
||||
})
|
||||
.appendTo( 'body' )
|
||||
.modal( {
|
||||
backdrop: "static",
|
||||
keyboard: false
|
||||
} );
|
||||
|
||||
dom.close.prependTo($('div.modal-header', dom.content));
|
||||
},
|
||||
|
||||
close: function ( dte, callback ) {
|
||||
if ( ! shown ) {
|
||||
if ( callback ) {
|
||||
callback();
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
$(dom.content)
|
||||
.one( 'hidden.bs.modal', function () {
|
||||
$(this).detach();
|
||||
} )
|
||||
.modal('hide');
|
||||
|
||||
shown = false;
|
||||
|
||||
if ( callback ) {
|
||||
callback();
|
||||
}
|
||||
},
|
||||
|
||||
node: function ( dte ) {
|
||||
return dom.content[0];
|
||||
}
|
||||
} );
|
||||
|
||||
|
||||
export default Editor;
|
||||
@ -1,264 +0,0 @@
|
||||
/*! Bootstrap integration for DataTables' Editor
|
||||
* © SpryMedia Ltd - datatables.net/license
|
||||
*/
|
||||
|
||||
(function( factory ){
|
||||
if ( typeof define === 'function' && define.amd ) {
|
||||
// AMD
|
||||
define( ['jquery', 'datatables.net-bs4', 'datatables.net-editor'], function ( $ ) {
|
||||
return factory( $, window, document );
|
||||
} );
|
||||
}
|
||||
else if ( typeof exports === 'object' ) {
|
||||
// CommonJS
|
||||
var jq = require('jquery');
|
||||
var cjsRequires = function (root, $) {
|
||||
if ( ! $.fn.dataTable ) {
|
||||
require('datatables.net-bs4')(root, $);
|
||||
}
|
||||
|
||||
if ( ! $.fn.dataTable.Editor ) {
|
||||
require('datatables.net-editor')(root, $);
|
||||
}
|
||||
};
|
||||
|
||||
if (typeof window === 'undefined') {
|
||||
module.exports = function (root, $) {
|
||||
if ( ! root ) {
|
||||
// CommonJS environments without a window global must pass a
|
||||
// root. This will give an error otherwise
|
||||
root = window;
|
||||
}
|
||||
|
||||
if ( ! $ ) {
|
||||
$ = jq( root );
|
||||
}
|
||||
|
||||
cjsRequires( root, $ );
|
||||
return factory( $, root, root.document );
|
||||
};
|
||||
}
|
||||
else {
|
||||
cjsRequires( window, jq );
|
||||
module.exports = factory( jq, window, window.document );
|
||||
}
|
||||
}
|
||||
else {
|
||||
// Browser
|
||||
factory( jQuery, window, document );
|
||||
}
|
||||
}(function( $, window, document, undefined ) {
|
||||
'use strict';
|
||||
var DataTable = $.fn.dataTable;
|
||||
|
||||
|
||||
var Editor = DataTable.Editor;
|
||||
|
||||
/*
|
||||
* Set the default display controller to be our bootstrap control
|
||||
*/
|
||||
DataTable.Editor.defaults.display = "bootstrap";
|
||||
|
||||
|
||||
/*
|
||||
* Change the default classes from Editor to be classes for Bootstrap
|
||||
*/
|
||||
$.extend( true, $.fn.dataTable.Editor.classes, {
|
||||
"header": {
|
||||
"wrapper": "DTE_Header modal-header",
|
||||
title: {
|
||||
tag: 'h5',
|
||||
class: 'modal-title'
|
||||
}
|
||||
},
|
||||
"body": {
|
||||
"wrapper": "DTE_Body modal-body"
|
||||
},
|
||||
"footer": {
|
||||
"wrapper": "DTE_Footer modal-footer"
|
||||
},
|
||||
"form": {
|
||||
"tag": "form-horizontal",
|
||||
"button": "btn",
|
||||
"buttonInternal": "btn btn-outline-secondary"
|
||||
},
|
||||
"field": {
|
||||
"wrapper": "DTE_Field form-group row",
|
||||
"label": "col-lg-4 col-form-label",
|
||||
"input": "col-lg-8",
|
||||
"error": "error is-invalid",
|
||||
"msg-labelInfo": "form-text text-secondary small",
|
||||
"msg-info": "form-text text-secondary small",
|
||||
"msg-message": "form-text text-secondary small",
|
||||
"msg-error": "form-text text-danger small",
|
||||
"multiValue": "card multi-value",
|
||||
"multiInfo": "small",
|
||||
"multiRestore": "multi-restore"
|
||||
}
|
||||
} );
|
||||
|
||||
$.extend( true, DataTable.ext.buttons, {
|
||||
create: {
|
||||
formButtons: {
|
||||
className: 'btn-primary'
|
||||
}
|
||||
},
|
||||
edit: {
|
||||
formButtons: {
|
||||
className: 'btn-primary'
|
||||
}
|
||||
},
|
||||
remove: {
|
||||
formButtons: {
|
||||
className: 'btn-danger'
|
||||
}
|
||||
}
|
||||
} );
|
||||
|
||||
DataTable.Editor.fieldTypes.datatable.tableClass = 'table';
|
||||
|
||||
/*
|
||||
* Bootstrap display controller - this is effectively a proxy to the Bootstrap
|
||||
* modal control.
|
||||
*/
|
||||
|
||||
let shown = false;
|
||||
let fullyShown = false;
|
||||
|
||||
const dom = {
|
||||
// Note that `modal-dialog-scrollable` is BS4.3+ only. It has no effect on 4.0-4.2
|
||||
content: $(
|
||||
'<div class="modal fade DTED">'+
|
||||
'<div class="modal-dialog modal-lg modal-dialog-scrollable"></div>'+
|
||||
'</div>'
|
||||
),
|
||||
close: $('<button class="close">×</div>')
|
||||
};
|
||||
|
||||
DataTable.Editor.display.bootstrap = $.extend( true, {}, DataTable.Editor.models.displayController, {
|
||||
init: function ( dte ) {
|
||||
// Add `form-control` to required elements
|
||||
dte.on( 'displayOrder.dtebs open.dtebs', function ( e, display, action, form ) {
|
||||
$.each( dte.s.fields, function ( key, field ) {
|
||||
$('input:not([type=checkbox]):not([type=radio]), select, textarea', field.node() )
|
||||
.addClass( 'form-control' );
|
||||
} );
|
||||
} );
|
||||
|
||||
return DataTable.Editor.display.bootstrap;
|
||||
},
|
||||
|
||||
open: function ( dte, append, callback ) {
|
||||
$(append).addClass('modal-content');
|
||||
|
||||
// Special class for DataTable buttons in the form
|
||||
$(append).find('div.DTE_Field_Type_datatable div.dt-buttons')
|
||||
.removeClass('btn-group')
|
||||
.addClass('btn-group-vertical');
|
||||
|
||||
// Setup events on each show
|
||||
dom.close
|
||||
.attr('title', dte.i18n.close)
|
||||
.off('click.dte-bs4')
|
||||
.on('click.dte-bs4', function () {
|
||||
dte.close('icon');
|
||||
})
|
||||
.appendTo($('div.modal-header', append));
|
||||
|
||||
// This is a bit horrible, but if you mousedown and then drag out of the modal container, we don't
|
||||
// want to trigger a background action.
|
||||
let allowBackgroundClick = false;
|
||||
$(document)
|
||||
.off('mousedown.dte-bs4')
|
||||
.on('mousedown.dte-bs4', 'div.modal', function (e) {
|
||||
allowBackgroundClick = $(e.target).hasClass('modal') && shown
|
||||
? true
|
||||
: false;
|
||||
} );
|
||||
|
||||
$(document)
|
||||
.off('click.dte-bs4')
|
||||
.on('click.dte-bs4', 'div.modal', function (e) {
|
||||
if ( $(e.target).hasClass('modal') && allowBackgroundClick ) {
|
||||
dte.background();
|
||||
}
|
||||
} );
|
||||
|
||||
var content = dom.content.find('div.modal-dialog');
|
||||
content.children().detach();
|
||||
content.append( append );
|
||||
|
||||
if ( shown ) {
|
||||
if ( callback ) {
|
||||
callback();
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
shown = true;
|
||||
fullyShown = false;
|
||||
|
||||
$(dom.content)
|
||||
.one('shown.bs.modal', function () {
|
||||
// Can only give elements focus when shown
|
||||
if ( dte.s.setFocus ) {
|
||||
dte.s.setFocus.focus();
|
||||
}
|
||||
|
||||
fullyShown = true;
|
||||
|
||||
if ( callback ) {
|
||||
callback();
|
||||
}
|
||||
})
|
||||
.one('hidden', function () {
|
||||
shown = false;
|
||||
})
|
||||
.appendTo( 'body' )
|
||||
.modal( {
|
||||
backdrop: "static",
|
||||
keyboard: false
|
||||
} );
|
||||
},
|
||||
|
||||
close: function ( dte, callback ) {
|
||||
if ( ! shown ) {
|
||||
if ( callback ) {
|
||||
callback();
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
// Check if actually displayed or not before hiding. BS4 doesn't like `hide`
|
||||
// before it has been fully displayed
|
||||
if ( ! fullyShown ) {
|
||||
$(dom.content)
|
||||
.one('shown.bs.modal', function () {
|
||||
DataTable.Editor.display.bootstrap.close( dte, callback );
|
||||
} );
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
$(dom.content)
|
||||
.one( 'hidden.bs.modal', function () {
|
||||
$(this).detach();
|
||||
} )
|
||||
.modal('hide');
|
||||
|
||||
shown = false;
|
||||
fullyShown = false;
|
||||
|
||||
if ( callback ) {
|
||||
callback();
|
||||
}
|
||||
},
|
||||
|
||||
node: function ( dte ) {
|
||||
return dom.content[0];
|
||||
}
|
||||
} );
|
||||
|
||||
|
||||
return Editor;
|
||||
}));
|
||||
@ -1,4 +0,0 @@
|
||||
/*! Bootstrap integration for DataTables' Editor
|
||||
* © SpryMedia Ltd - datatables.net/license
|
||||
*/
|
||||
!function(o){var n,a;"function"==typeof define&&define.amd?define(["jquery","datatables.net-bs4","datatables.net-editor"],function(t){return o(t,window,document)}):"object"==typeof exports?(n=require("jquery"),a=function(t,e){e.fn.dataTable||require("datatables.net-bs4")(t,e),e.fn.dataTable.Editor||require("datatables.net-editor")(t,e)},"undefined"==typeof window?module.exports=function(t,e){return t=t||window,e=e||n(t),a(t,e),o(e,0,t.document)}:(a(window,n),module.exports=o(n,window,window.document))):o(jQuery,window,document)}(function(d,t,l,e){"use strict";var o=d.fn.dataTable,n=o.Editor;o.Editor.defaults.display="bootstrap",d.extend(!0,d.fn.dataTable.Editor.classes,{header:{wrapper:"DTE_Header modal-header",title:{tag:"h5",class:"modal-title"}},body:{wrapper:"DTE_Body modal-body"},footer:{wrapper:"DTE_Footer modal-footer"},form:{tag:"form-horizontal",button:"btn",buttonInternal:"btn btn-outline-secondary"},field:{wrapper:"DTE_Field form-group row",label:"col-lg-4 col-form-label",input:"col-lg-8",error:"error is-invalid","msg-labelInfo":"form-text text-secondary small","msg-info":"form-text text-secondary small","msg-message":"form-text text-secondary small","msg-error":"form-text text-danger small",multiValue:"card multi-value",multiInfo:"small",multiRestore:"multi-restore"}}),d.extend(!0,o.ext.buttons,{create:{formButtons:{className:"btn-primary"}},edit:{formButtons:{className:"btn-primary"}},remove:{formButtons:{className:"btn-danger"}}});let s=!(o.Editor.fieldTypes.datatable.tableClass="table"),r=!1;const i={content:d('<div class="modal fade DTED"><div class="modal-dialog modal-lg modal-dialog-scrollable"></div></div>'),close:d('<button class="close">×</div>')};return o.Editor.display.bootstrap=d.extend(!0,{},o.Editor.models.displayController,{init:function(a){return a.on("displayOrder.dtebs open.dtebs",function(t,e,o,n){d.each(a.s.fields,function(t,e){d("input:not([type=checkbox]):not([type=radio]), select, textarea",e.node()).addClass("form-control")})}),o.Editor.display.bootstrap},open:function(e,t,o){d(t).addClass("modal-content"),d(t).find("div.DTE_Field_Type_datatable div.dt-buttons").removeClass("btn-group").addClass("btn-group-vertical"),i.close.attr("title",e.i18n.close).off("click.dte-bs4").on("click.dte-bs4",function(){e.close("icon")}).appendTo(d("div.modal-header",t));let n=!1;d(l).off("mousedown.dte-bs4").on("mousedown.dte-bs4","div.modal",function(t){n=!(!d(t.target).hasClass("modal")||!s)}),d(l).off("click.dte-bs4").on("click.dte-bs4","div.modal",function(t){d(t.target).hasClass("modal")&&n&&e.background()});var a=i.content.find("div.modal-dialog");a.children().detach(),a.append(t),s?o&&o():(s=!0,r=!1,d(i.content).one("shown.bs.modal",function(){e.s.setFocus&&e.s.setFocus.focus(),r=!0,o&&o()}).one("hidden",function(){s=!1}).appendTo("body").modal({backdrop:"static",keyboard:!1}))},close:function(t,e){s?r?(d(i.content).one("hidden.bs.modal",function(){d(this).detach()}).modal("hide"),s=!1,r=!1,e&&e()):d(i.content).one("shown.bs.modal",function(){o.Editor.display.bootstrap.close(t,e)}):e&&e()},node:function(t){return i.content[0]}}),n});
|
||||
@ -1,4 +0,0 @@
|
||||
/*! Bootstrap integration for DataTables' Editor
|
||||
* © SpryMedia Ltd - datatables.net/license
|
||||
*/
|
||||
import jQuery from"jquery";import DataTable from"datatables.net-bs4";import Editor from"datatables.net-editor";let $=jQuery;var Editor=DataTable.Editor;DataTable.Editor.defaults.display="bootstrap",$.extend(!0,$.fn.dataTable.Editor.classes,{header:{wrapper:"DTE_Header modal-header",title:{tag:"h5",class:"modal-title"}},body:{wrapper:"DTE_Body modal-body"},footer:{wrapper:"DTE_Footer modal-footer"},form:{tag:"form-horizontal",button:"btn",buttonInternal:"btn btn-outline-secondary"},field:{wrapper:"DTE_Field form-group row",label:"col-lg-4 col-form-label",input:"col-lg-8",error:"error is-invalid","msg-labelInfo":"form-text text-secondary small","msg-info":"form-text text-secondary small","msg-message":"form-text text-secondary small","msg-error":"form-text text-danger small",multiValue:"card multi-value",multiInfo:"small",multiRestore:"multi-restore"}}),$.extend(!0,DataTable.ext.buttons,{create:{formButtons:{className:"btn-primary"}},edit:{formButtons:{className:"btn-primary"}},remove:{formButtons:{className:"btn-danger"}}});let shown=!(DataTable.Editor.fieldTypes.datatable.tableClass="table"),fullyShown=!1;const dom={content:$('<div class="modal fade DTED"><div class="modal-dialog modal-lg modal-dialog-scrollable"></div></div>'),close:$('<button class="close">×</div>')};DataTable.Editor.display.bootstrap=$.extend(!0,{},DataTable.Editor.models.displayController,{init:function(l){return l.on("displayOrder.dtebs open.dtebs",function(o,t,e,a){$.each(l.s.fields,function(o,t){$("input:not([type=checkbox]):not([type=radio]), select, textarea",t.node()).addClass("form-control")})}),DataTable.Editor.display.bootstrap},open:function(t,o,e){$(o).addClass("modal-content"),$(o).find("div.DTE_Field_Type_datatable div.dt-buttons").removeClass("btn-group").addClass("btn-group-vertical"),dom.close.attr("title",t.i18n.close).off("click.dte-bs4").on("click.dte-bs4",function(){t.close("icon")}).appendTo($("div.modal-header",o));let a=!1;$(document).off("mousedown.dte-bs4").on("mousedown.dte-bs4","div.modal",function(o){a=!(!$(o.target).hasClass("modal")||!shown)}),$(document).off("click.dte-bs4").on("click.dte-bs4","div.modal",function(o){$(o.target).hasClass("modal")&&a&&t.background()});var l=dom.content.find("div.modal-dialog");l.children().detach(),l.append(o),shown?e&&e():(shown=!0,fullyShown=!1,$(dom.content).one("shown.bs.modal",function(){t.s.setFocus&&t.s.setFocus.focus(),fullyShown=!0,e&&e()}).one("hidden",function(){shown=!1}).appendTo("body").modal({backdrop:"static",keyboard:!1}))},close:function(o,t){shown?fullyShown?($(dom.content).one("hidden.bs.modal",function(){$(this).detach()}).modal("hide"),shown=!1,fullyShown=!1,t&&t()):$(dom.content).one("shown.bs.modal",function(){DataTable.Editor.display.bootstrap.close(o,t)}):t&&t()},node:function(o){return dom.content[0]}});export default Editor;
|
||||
@ -1,220 +0,0 @@
|
||||
/*! Bootstrap integration for DataTables' Editor
|
||||
* © SpryMedia Ltd - datatables.net/license
|
||||
*/
|
||||
|
||||
import jQuery from 'jquery';
|
||||
import DataTable from 'datatables.net-bs4';
|
||||
import Editor from 'datatables.net-editor';
|
||||
|
||||
// Allow reassignment of the $ variable
|
||||
let $ = jQuery;
|
||||
|
||||
var Editor = DataTable.Editor;
|
||||
|
||||
/*
|
||||
* Set the default display controller to be our bootstrap control
|
||||
*/
|
||||
DataTable.Editor.defaults.display = "bootstrap";
|
||||
|
||||
|
||||
/*
|
||||
* Change the default classes from Editor to be classes for Bootstrap
|
||||
*/
|
||||
$.extend( true, $.fn.dataTable.Editor.classes, {
|
||||
"header": {
|
||||
"wrapper": "DTE_Header modal-header",
|
||||
title: {
|
||||
tag: 'h5',
|
||||
class: 'modal-title'
|
||||
}
|
||||
},
|
||||
"body": {
|
||||
"wrapper": "DTE_Body modal-body"
|
||||
},
|
||||
"footer": {
|
||||
"wrapper": "DTE_Footer modal-footer"
|
||||
},
|
||||
"form": {
|
||||
"tag": "form-horizontal",
|
||||
"button": "btn",
|
||||
"buttonInternal": "btn btn-outline-secondary"
|
||||
},
|
||||
"field": {
|
||||
"wrapper": "DTE_Field form-group row",
|
||||
"label": "col-lg-4 col-form-label",
|
||||
"input": "col-lg-8",
|
||||
"error": "error is-invalid",
|
||||
"msg-labelInfo": "form-text text-secondary small",
|
||||
"msg-info": "form-text text-secondary small",
|
||||
"msg-message": "form-text text-secondary small",
|
||||
"msg-error": "form-text text-danger small",
|
||||
"multiValue": "card multi-value",
|
||||
"multiInfo": "small",
|
||||
"multiRestore": "multi-restore"
|
||||
}
|
||||
} );
|
||||
|
||||
$.extend( true, DataTable.ext.buttons, {
|
||||
create: {
|
||||
formButtons: {
|
||||
className: 'btn-primary'
|
||||
}
|
||||
},
|
||||
edit: {
|
||||
formButtons: {
|
||||
className: 'btn-primary'
|
||||
}
|
||||
},
|
||||
remove: {
|
||||
formButtons: {
|
||||
className: 'btn-danger'
|
||||
}
|
||||
}
|
||||
} );
|
||||
|
||||
DataTable.Editor.fieldTypes.datatable.tableClass = 'table';
|
||||
|
||||
/*
|
||||
* Bootstrap display controller - this is effectively a proxy to the Bootstrap
|
||||
* modal control.
|
||||
*/
|
||||
|
||||
let shown = false;
|
||||
let fullyShown = false;
|
||||
|
||||
const dom = {
|
||||
// Note that `modal-dialog-scrollable` is BS4.3+ only. It has no effect on 4.0-4.2
|
||||
content: $(
|
||||
'<div class="modal fade DTED">'+
|
||||
'<div class="modal-dialog modal-lg modal-dialog-scrollable"></div>'+
|
||||
'</div>'
|
||||
),
|
||||
close: $('<button class="close">×</div>')
|
||||
};
|
||||
|
||||
DataTable.Editor.display.bootstrap = $.extend( true, {}, DataTable.Editor.models.displayController, {
|
||||
init: function ( dte ) {
|
||||
// Add `form-control` to required elements
|
||||
dte.on( 'displayOrder.dtebs open.dtebs', function ( e, display, action, form ) {
|
||||
$.each( dte.s.fields, function ( key, field ) {
|
||||
$('input:not([type=checkbox]):not([type=radio]), select, textarea', field.node() )
|
||||
.addClass( 'form-control' );
|
||||
} );
|
||||
} );
|
||||
|
||||
return DataTable.Editor.display.bootstrap;
|
||||
},
|
||||
|
||||
open: function ( dte, append, callback ) {
|
||||
$(append).addClass('modal-content');
|
||||
|
||||
// Special class for DataTable buttons in the form
|
||||
$(append).find('div.DTE_Field_Type_datatable div.dt-buttons')
|
||||
.removeClass('btn-group')
|
||||
.addClass('btn-group-vertical');
|
||||
|
||||
// Setup events on each show
|
||||
dom.close
|
||||
.attr('title', dte.i18n.close)
|
||||
.off('click.dte-bs4')
|
||||
.on('click.dte-bs4', function () {
|
||||
dte.close('icon');
|
||||
})
|
||||
.appendTo($('div.modal-header', append));
|
||||
|
||||
// This is a bit horrible, but if you mousedown and then drag out of the modal container, we don't
|
||||
// want to trigger a background action.
|
||||
let allowBackgroundClick = false;
|
||||
$(document)
|
||||
.off('mousedown.dte-bs4')
|
||||
.on('mousedown.dte-bs4', 'div.modal', function (e) {
|
||||
allowBackgroundClick = $(e.target).hasClass('modal') && shown
|
||||
? true
|
||||
: false;
|
||||
} );
|
||||
|
||||
$(document)
|
||||
.off('click.dte-bs4')
|
||||
.on('click.dte-bs4', 'div.modal', function (e) {
|
||||
if ( $(e.target).hasClass('modal') && allowBackgroundClick ) {
|
||||
dte.background();
|
||||
}
|
||||
} );
|
||||
|
||||
var content = dom.content.find('div.modal-dialog');
|
||||
content.children().detach();
|
||||
content.append( append );
|
||||
|
||||
if ( shown ) {
|
||||
if ( callback ) {
|
||||
callback();
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
shown = true;
|
||||
fullyShown = false;
|
||||
|
||||
$(dom.content)
|
||||
.one('shown.bs.modal', function () {
|
||||
// Can only give elements focus when shown
|
||||
if ( dte.s.setFocus ) {
|
||||
dte.s.setFocus.focus();
|
||||
}
|
||||
|
||||
fullyShown = true;
|
||||
|
||||
if ( callback ) {
|
||||
callback();
|
||||
}
|
||||
})
|
||||
.one('hidden', function () {
|
||||
shown = false;
|
||||
})
|
||||
.appendTo( 'body' )
|
||||
.modal( {
|
||||
backdrop: "static",
|
||||
keyboard: false
|
||||
} );
|
||||
},
|
||||
|
||||
close: function ( dte, callback ) {
|
||||
if ( ! shown ) {
|
||||
if ( callback ) {
|
||||
callback();
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
// Check if actually displayed or not before hiding. BS4 doesn't like `hide`
|
||||
// before it has been fully displayed
|
||||
if ( ! fullyShown ) {
|
||||
$(dom.content)
|
||||
.one('shown.bs.modal', function () {
|
||||
DataTable.Editor.display.bootstrap.close( dte, callback );
|
||||
} );
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
$(dom.content)
|
||||
.one( 'hidden.bs.modal', function () {
|
||||
$(this).detach();
|
||||
} )
|
||||
.modal('hide');
|
||||
|
||||
shown = false;
|
||||
fullyShown = false;
|
||||
|
||||
if ( callback ) {
|
||||
callback();
|
||||
}
|
||||
},
|
||||
|
||||
node: function ( dte ) {
|
||||
return dom.content[0];
|
||||
}
|
||||
} );
|
||||
|
||||
|
||||
export default Editor;
|
||||
@ -1,315 +0,0 @@
|
||||
/*! Bootstrap integration for DataTables' Editor
|
||||
* © SpryMedia Ltd - datatables.net/license
|
||||
*/
|
||||
|
||||
(function( factory ){
|
||||
if ( typeof define === 'function' && define.amd ) {
|
||||
// AMD
|
||||
define( ['jquery', 'datatables.net-bs5', 'datatables.net-editor'], function ( $ ) {
|
||||
return factory( $, window, document );
|
||||
} );
|
||||
}
|
||||
else if ( typeof exports === 'object' ) {
|
||||
// CommonJS
|
||||
var jq = require('jquery');
|
||||
var cjsRequires = function (root, $) {
|
||||
if ( ! $.fn.dataTable ) {
|
||||
require('datatables.net-bs5')(root, $);
|
||||
}
|
||||
|
||||
if ( ! $.fn.dataTable.Editor ) {
|
||||
require('datatables.net-editor')(root, $);
|
||||
}
|
||||
};
|
||||
|
||||
if (typeof window === 'undefined') {
|
||||
module.exports = function (root, $) {
|
||||
if ( ! root ) {
|
||||
// CommonJS environments without a window global must pass a
|
||||
// root. This will give an error otherwise
|
||||
root = window;
|
||||
}
|
||||
|
||||
if ( ! $ ) {
|
||||
$ = jq( root );
|
||||
}
|
||||
|
||||
cjsRequires( root, $ );
|
||||
return factory( $, root, root.document );
|
||||
};
|
||||
}
|
||||
else {
|
||||
cjsRequires( window, jq );
|
||||
module.exports = factory( jq, window, window.document );
|
||||
}
|
||||
}
|
||||
else {
|
||||
// Browser
|
||||
factory( jQuery, window, document );
|
||||
}
|
||||
}(function( $, window, document, undefined ) {
|
||||
'use strict';
|
||||
var DataTable = $.fn.dataTable;
|
||||
|
||||
|
||||
var Editor = DataTable.Editor;
|
||||
|
||||
/*
|
||||
* Set the default display controller to be our bootstrap control
|
||||
*/
|
||||
DataTable.Editor.defaults.display = "bootstrap";
|
||||
|
||||
|
||||
/*
|
||||
* Change the default classes from Editor to be classes for Bootstrap
|
||||
*/
|
||||
$.extend( true, $.fn.dataTable.Editor.classes, {
|
||||
"header": {
|
||||
"wrapper": "DTE_Header",
|
||||
title: {
|
||||
tag: 'h5',
|
||||
class: 'modal-title'
|
||||
}
|
||||
},
|
||||
"body": {
|
||||
"wrapper": "DTE_Body"
|
||||
},
|
||||
"footer": {
|
||||
"wrapper": "DTE_Footer"
|
||||
},
|
||||
"form": {
|
||||
"tag": "form-horizontal",
|
||||
"button": "btn",
|
||||
"buttonInternal": "btn btn-outline-secondary"
|
||||
},
|
||||
"field": {
|
||||
"wrapper": "DTE_Field form-group row",
|
||||
"label": "col-lg-4 col-form-label",
|
||||
"input": "col-lg-8",
|
||||
"error": "error is-invalid",
|
||||
"msg-labelInfo": "form-text text-secondary small",
|
||||
"msg-info": "form-text text-secondary small",
|
||||
"msg-message": "form-text text-secondary small",
|
||||
"msg-error": "form-text text-danger small",
|
||||
"multiValue": "card multi-value",
|
||||
"multiInfo": "small",
|
||||
"multiRestore": "multi-restore"
|
||||
}
|
||||
} );
|
||||
|
||||
$.extend( true, DataTable.ext.buttons, {
|
||||
create: {
|
||||
formButtons: {
|
||||
className: 'btn-primary'
|
||||
}
|
||||
},
|
||||
edit: {
|
||||
formButtons: {
|
||||
className: 'btn-primary'
|
||||
}
|
||||
},
|
||||
remove: {
|
||||
formButtons: {
|
||||
className: 'btn-danger'
|
||||
}
|
||||
}
|
||||
} );
|
||||
|
||||
DataTable.Editor.fieldTypes.datatable.tableClass = 'table';
|
||||
|
||||
/*
|
||||
* Bootstrap display controller - this is effectively a proxy to the Bootstrap
|
||||
* modal control.
|
||||
*/
|
||||
let shown = false;
|
||||
let fullyShown = false;
|
||||
|
||||
const dom = {
|
||||
content: $(
|
||||
'<div class="modal fade DTED">'+
|
||||
'<div class="modal-dialog"></div>'+
|
||||
'</div>'
|
||||
),
|
||||
close: $('<button class="btn-close"></div>')
|
||||
};
|
||||
let modal;
|
||||
let _bs = window.bootstrap;
|
||||
|
||||
DataTable.Editor.bootstrap = function (bs) {
|
||||
_bs = bs;
|
||||
}
|
||||
|
||||
DataTable.Editor.display.bootstrap = $.extend( true, {}, DataTable.Editor.models.displayController, {
|
||||
/*
|
||||
* API methods
|
||||
*/
|
||||
init: function ( dte ) {
|
||||
// Add `form-control` to required elements
|
||||
dte.on( 'displayOrder.dtebs open.dtebs', function ( e, display, action, form ) {
|
||||
$.each( dte.s.fields, function ( key, field ) {
|
||||
$('input:not([type=checkbox]):not([type=radio]), select, textarea', field.node() )
|
||||
.addClass( 'form-control' );
|
||||
|
||||
$('input[type=checkbox], input[type=radio]', field.node() )
|
||||
.addClass( 'form-check-input' );
|
||||
|
||||
$('select', field.node() )
|
||||
.addClass( 'form-select' );
|
||||
} );
|
||||
} );
|
||||
|
||||
return DataTable.Editor.display.bootstrap;
|
||||
},
|
||||
|
||||
open: function ( dte, append, callback ) {
|
||||
if (! modal) {
|
||||
modal = new _bs.Modal(dom.content[0], {
|
||||
backdrop: "static",
|
||||
keyboard: false
|
||||
});
|
||||
}
|
||||
|
||||
$(append).addClass('modal-content');
|
||||
$('.DTE_Header', append).addClass('modal-header');
|
||||
$('.DTE_Body', append).addClass('modal-body');
|
||||
$('.DTE_Footer', append).addClass('modal-footer');
|
||||
|
||||
// Special class for DataTable buttons in the form
|
||||
$(append).find('div.DTE_Field_Type_datatable div.dt-buttons')
|
||||
.removeClass('btn-group')
|
||||
.addClass('btn-group-vertical');
|
||||
|
||||
// Setup events on each show
|
||||
dom.close
|
||||
.attr('title', dte.i18n.close)
|
||||
.off('click.dte-bs5')
|
||||
.on('click.dte-bs5', function () {
|
||||
dte.close('icon');
|
||||
})
|
||||
.appendTo($('div.modal-header', append));
|
||||
|
||||
// This is a bit horrible, but if you mousedown and then drag out of the modal container, we don't
|
||||
// want to trigger a background action.
|
||||
let allowBackgroundClick = false;
|
||||
$(document)
|
||||
.off('mousedown.dte-bs5')
|
||||
.on('mousedown.dte-bs5', 'div.modal', function (e) {
|
||||
allowBackgroundClick = $(e.target).hasClass('modal') && shown
|
||||
? true
|
||||
: false;
|
||||
} );
|
||||
|
||||
$(document)
|
||||
.off('click.dte-bs5')
|
||||
.on('click.dte-bs5', 'div.modal', function (e) {
|
||||
if ( $(e.target).hasClass('modal') && allowBackgroundClick ) {
|
||||
dte.background();
|
||||
}
|
||||
} );
|
||||
|
||||
var content = dom.content.find('div.modal-dialog');
|
||||
content.addClass(DataTable.Editor.display.bootstrap.classes.modal);
|
||||
content.children().detach();
|
||||
content.append( append );
|
||||
|
||||
// Floating label support - rearrange the DOM for the inputs
|
||||
if (dte.c.bootstrap && dte.c.bootstrap.floatingLabels) {
|
||||
var floating_label_types = ['readonly', 'text', 'textarea', 'select', 'datetime']
|
||||
var fields = dte.order();
|
||||
|
||||
fields
|
||||
.filter(function (f) {
|
||||
var type = dte.field(f).s.opts.type;
|
||||
|
||||
return floating_label_types.includes(type);
|
||||
})
|
||||
.forEach(function(f) {
|
||||
var node = $(dte.field(f).node());
|
||||
var wrapper = node.find('.DTE_Field_InputControl');
|
||||
var control = wrapper.children(':first-child');
|
||||
var label = node.find('label');
|
||||
|
||||
wrapper.parent().removeClass('col-lg-8').addClass('col-lg-12');
|
||||
wrapper.addClass('form-floating');
|
||||
control.addClass('form-control').attr("placeholder", f);
|
||||
label.appendTo(wrapper);
|
||||
});
|
||||
}
|
||||
|
||||
if ( shown ) {
|
||||
if ( callback ) {
|
||||
callback();
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
shown = true;
|
||||
fullyShown = false;
|
||||
|
||||
$(dom.content)
|
||||
.one('shown.bs.modal', function () {
|
||||
// Can only give elements focus when shown
|
||||
if ( dte.s.setFocus ) {
|
||||
dte.s.setFocus.focus();
|
||||
}
|
||||
|
||||
fullyShown = true;
|
||||
|
||||
if ( callback ) {
|
||||
callback();
|
||||
}
|
||||
})
|
||||
.one('hidden', function () {
|
||||
shown = false;
|
||||
})
|
||||
.appendTo( 'body' );
|
||||
|
||||
modal.show();
|
||||
},
|
||||
|
||||
close: function ( dte, callback ) {
|
||||
if ( ! shown ) {
|
||||
if ( callback ) {
|
||||
callback();
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
// Check if actually displayed or not before hiding. BS4 doesn't like `hide`
|
||||
// before it has been fully displayed
|
||||
if ( ! fullyShown ) {
|
||||
$(dom.content)
|
||||
.one('shown.bs.modal', function () {
|
||||
DataTable.Editor.display.bootstrap.close( dte, callback );
|
||||
} );
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
$(dom.content)
|
||||
.one( 'hidden.bs.modal', function () {
|
||||
$(this).detach();
|
||||
} );
|
||||
|
||||
modal.hide();
|
||||
|
||||
shown = false;
|
||||
fullyShown = false;
|
||||
|
||||
if ( callback ) {
|
||||
callback();
|
||||
}
|
||||
},
|
||||
|
||||
node: function ( dte ) {
|
||||
return dom.content[0];
|
||||
},
|
||||
|
||||
classes: {
|
||||
modal: 'modal-dialog-scrollable modal-dialog-centered'
|
||||
}
|
||||
} );
|
||||
|
||||
|
||||
return Editor;
|
||||
}));
|
||||
@ -1,4 +0,0 @@
|
||||
/*! Bootstrap integration for DataTables' Editor
|
||||
* © SpryMedia Ltd - datatables.net/license
|
||||
*/
|
||||
!function(o){var a,d;"function"==typeof define&&define.amd?define(["jquery","datatables.net-bs5","datatables.net-editor"],function(t){return o(t,window,document)}):"object"==typeof exports?(a=require("jquery"),d=function(t,e){e.fn.dataTable||require("datatables.net-bs5")(t,e),e.fn.dataTable.Editor||require("datatables.net-editor")(t,e)},"undefined"==typeof window?module.exports=function(t,e){return t=t||window,e=e||a(t),d(t,e),o(e,t,t.document)}:(d(window,a),module.exports=o(a,window,window.document))):o(jQuery,window,document)}(function(l,t,s,e){"use strict";var r=l.fn.dataTable,o=r.Editor;r.Editor.defaults.display="bootstrap",l.extend(!0,l.fn.dataTable.Editor.classes,{header:{wrapper:"DTE_Header",title:{tag:"h5",class:"modal-title"}},body:{wrapper:"DTE_Body"},footer:{wrapper:"DTE_Footer"},form:{tag:"form-horizontal",button:"btn",buttonInternal:"btn btn-outline-secondary"},field:{wrapper:"DTE_Field form-group row",label:"col-lg-4 col-form-label",input:"col-lg-8",error:"error is-invalid","msg-labelInfo":"form-text text-secondary small","msg-info":"form-text text-secondary small","msg-message":"form-text text-secondary small","msg-error":"form-text text-danger small",multiValue:"card multi-value",multiInfo:"small",multiRestore:"multi-restore"}}),l.extend(!0,r.ext.buttons,{create:{formButtons:{className:"btn-primary"}},edit:{formButtons:{className:"btn-primary"}},remove:{formButtons:{className:"btn-danger"}}});let i=!(r.Editor.fieldTypes.datatable.tableClass="table"),c=!1;const f={content:l('<div class="modal fade DTED"><div class="modal-dialog"></div></div>'),close:l('<button class="btn-close"></div>')};let u,m=t.bootstrap;return r.Editor.bootstrap=function(t){m=t},r.Editor.display.bootstrap=l.extend(!0,{},r.Editor.models.displayController,{init:function(d){return d.on("displayOrder.dtebs open.dtebs",function(t,e,o,a){l.each(d.s.fields,function(t,e){l("input:not([type=checkbox]):not([type=radio]), select, textarea",e.node()).addClass("form-control"),l("input[type=checkbox], input[type=radio]",e.node()).addClass("form-check-input"),l("select",e.node()).addClass("form-select")})}),r.Editor.display.bootstrap},open:function(d,t,e){u=u||new m.Modal(f.content[0],{backdrop:"static",keyboard:!1}),l(t).addClass("modal-content"),l(".DTE_Header",t).addClass("modal-header"),l(".DTE_Body",t).addClass("modal-body"),l(".DTE_Footer",t).addClass("modal-footer"),l(t).find("div.DTE_Field_Type_datatable div.dt-buttons").removeClass("btn-group").addClass("btn-group-vertical"),f.close.attr("title",d.i18n.close).off("click.dte-bs5").on("click.dte-bs5",function(){d.close("icon")}).appendTo(l("div.modal-header",t));let o=!1;l(s).off("mousedown.dte-bs5").on("mousedown.dte-bs5","div.modal",function(t){o=!(!l(t.target).hasClass("modal")||!i)}),l(s).off("click.dte-bs5").on("click.dte-bs5","div.modal",function(t){l(t.target).hasClass("modal")&&o&&d.background()});var a,n=f.content.find("div.modal-dialog");n.addClass(r.Editor.display.bootstrap.classes.modal),n.children().detach(),n.append(t),d.c.bootstrap&&d.c.bootstrap.floatingLabels&&(a=["readonly","text","textarea","select","datetime"],d.order().filter(function(t){t=d.field(t).s.opts.type;return a.includes(t)}).forEach(function(t){var e=l(d.field(t).node()),o=e.find(".DTE_Field_InputControl"),a=o.children(":first-child"),e=e.find("label");o.parent().removeClass("col-lg-8").addClass("col-lg-12"),o.addClass("form-floating"),a.addClass("form-control").attr("placeholder",t),e.appendTo(o)})),i?e&&e():(i=!0,c=!1,l(f.content).one("shown.bs.modal",function(){d.s.setFocus&&d.s.setFocus.focus(),c=!0,e&&e()}).one("hidden",function(){i=!1}).appendTo("body"),u.show())},close:function(t,e){i?c?(l(f.content).one("hidden.bs.modal",function(){l(this).detach()}),u.hide(),i=!1,c=!1,e&&e()):l(f.content).one("shown.bs.modal",function(){r.Editor.display.bootstrap.close(t,e)}):e&&e()},node:function(t){return f.content[0]},classes:{modal:"modal-dialog-scrollable modal-dialog-centered"}}),o});
|
||||
@ -1,4 +0,0 @@
|
||||
/*! Bootstrap integration for DataTables' Editor
|
||||
* © SpryMedia Ltd - datatables.net/license
|
||||
*/
|
||||
import jQuery from"jquery";import DataTable from"datatables.net-bs5";import Editor from"datatables.net-editor";let $=jQuery;var Editor=DataTable.Editor;DataTable.Editor.defaults.display="bootstrap",$.extend(!0,$.fn.dataTable.Editor.classes,{header:{wrapper:"DTE_Header",title:{tag:"h5",class:"modal-title"}},body:{wrapper:"DTE_Body"},footer:{wrapper:"DTE_Footer"},form:{tag:"form-horizontal",button:"btn",buttonInternal:"btn btn-outline-secondary"},field:{wrapper:"DTE_Field form-group row",label:"col-lg-4 col-form-label",input:"col-lg-8",error:"error is-invalid","msg-labelInfo":"form-text text-secondary small","msg-info":"form-text text-secondary small","msg-message":"form-text text-secondary small","msg-error":"form-text text-danger small",multiValue:"card multi-value",multiInfo:"small",multiRestore:"multi-restore"}}),$.extend(!0,DataTable.ext.buttons,{create:{formButtons:{className:"btn-primary"}},edit:{formButtons:{className:"btn-primary"}},remove:{formButtons:{className:"btn-danger"}}});let shown=!(DataTable.Editor.fieldTypes.datatable.tableClass="table"),fullyShown=!1;const dom={content:$('<div class="modal fade DTED"><div class="modal-dialog"></div></div>'),close:$('<button class="btn-close"></div>')};let modal,_bs=window.bootstrap;DataTable.Editor.bootstrap=function(o){_bs=o},DataTable.Editor.display.bootstrap=$.extend(!0,{},DataTable.Editor.models.displayController,{init:function(l){return l.on("displayOrder.dtebs open.dtebs",function(o,t,e,a){$.each(l.s.fields,function(o,t){$("input:not([type=checkbox]):not([type=radio]), select, textarea",t.node()).addClass("form-control"),$("input[type=checkbox], input[type=radio]",t.node()).addClass("form-check-input"),$("select",t.node()).addClass("form-select")})}),DataTable.Editor.display.bootstrap},open:function(l,o,t){modal=modal||new _bs.Modal(dom.content[0],{backdrop:"static",keyboard:!1}),$(o).addClass("modal-content"),$(".DTE_Header",o).addClass("modal-header"),$(".DTE_Body",o).addClass("modal-body"),$(".DTE_Footer",o).addClass("modal-footer"),$(o).find("div.DTE_Field_Type_datatable div.dt-buttons").removeClass("btn-group").addClass("btn-group-vertical"),dom.close.attr("title",l.i18n.close).off("click.dte-bs5").on("click.dte-bs5",function(){l.close("icon")}).appendTo($("div.modal-header",o));let e=!1;$(document).off("mousedown.dte-bs5").on("mousedown.dte-bs5","div.modal",function(o){e=!(!$(o.target).hasClass("modal")||!shown)}),$(document).off("click.dte-bs5").on("click.dte-bs5","div.modal",function(o){$(o.target).hasClass("modal")&&e&&l.background()});var a,d=dom.content.find("div.modal-dialog");d.addClass(DataTable.Editor.display.bootstrap.classes.modal),d.children().detach(),d.append(o),l.c.bootstrap&&l.c.bootstrap.floatingLabels&&(a=["readonly","text","textarea","select","datetime"],l.order().filter(function(o){o=l.field(o).s.opts.type;return a.includes(o)}).forEach(function(o){var t=$(l.field(o).node()),e=t.find(".DTE_Field_InputControl"),a=e.children(":first-child"),t=t.find("label");e.parent().removeClass("col-lg-8").addClass("col-lg-12"),e.addClass("form-floating"),a.addClass("form-control").attr("placeholder",o),t.appendTo(e)})),shown?t&&t():(shown=!0,fullyShown=!1,$(dom.content).one("shown.bs.modal",function(){l.s.setFocus&&l.s.setFocus.focus(),fullyShown=!0,t&&t()}).one("hidden",function(){shown=!1}).appendTo("body"),modal.show())},close:function(o,t){shown?fullyShown?($(dom.content).one("hidden.bs.modal",function(){$(this).detach()}),modal.hide(),shown=!1,fullyShown=!1,t&&t()):$(dom.content).one("shown.bs.modal",function(){DataTable.Editor.display.bootstrap.close(o,t)}):t&&t()},node:function(o){return dom.content[0]},classes:{modal:"modal-dialog-scrollable modal-dialog-centered"}});export default Editor;
|
||||
@ -1,271 +0,0 @@
|
||||
/*! Bootstrap integration for DataTables' Editor
|
||||
* © SpryMedia Ltd - datatables.net/license
|
||||
*/
|
||||
|
||||
import jQuery from 'jquery';
|
||||
import DataTable from 'datatables.net-bs5';
|
||||
import Editor from 'datatables.net-editor';
|
||||
|
||||
// Allow reassignment of the $ variable
|
||||
let $ = jQuery;
|
||||
|
||||
var Editor = DataTable.Editor;
|
||||
|
||||
/*
|
||||
* Set the default display controller to be our bootstrap control
|
||||
*/
|
||||
DataTable.Editor.defaults.display = "bootstrap";
|
||||
|
||||
|
||||
/*
|
||||
* Change the default classes from Editor to be classes for Bootstrap
|
||||
*/
|
||||
$.extend( true, $.fn.dataTable.Editor.classes, {
|
||||
"header": {
|
||||
"wrapper": "DTE_Header",
|
||||
title: {
|
||||
tag: 'h5',
|
||||
class: 'modal-title'
|
||||
}
|
||||
},
|
||||
"body": {
|
||||
"wrapper": "DTE_Body"
|
||||
},
|
||||
"footer": {
|
||||
"wrapper": "DTE_Footer"
|
||||
},
|
||||
"form": {
|
||||
"tag": "form-horizontal",
|
||||
"button": "btn",
|
||||
"buttonInternal": "btn btn-outline-secondary"
|
||||
},
|
||||
"field": {
|
||||
"wrapper": "DTE_Field form-group row",
|
||||
"label": "col-lg-4 col-form-label",
|
||||
"input": "col-lg-8",
|
||||
"error": "error is-invalid",
|
||||
"msg-labelInfo": "form-text text-secondary small",
|
||||
"msg-info": "form-text text-secondary small",
|
||||
"msg-message": "form-text text-secondary small",
|
||||
"msg-error": "form-text text-danger small",
|
||||
"multiValue": "card multi-value",
|
||||
"multiInfo": "small",
|
||||
"multiRestore": "multi-restore"
|
||||
}
|
||||
} );
|
||||
|
||||
$.extend( true, DataTable.ext.buttons, {
|
||||
create: {
|
||||
formButtons: {
|
||||
className: 'btn-primary'
|
||||
}
|
||||
},
|
||||
edit: {
|
||||
formButtons: {
|
||||
className: 'btn-primary'
|
||||
}
|
||||
},
|
||||
remove: {
|
||||
formButtons: {
|
||||
className: 'btn-danger'
|
||||
}
|
||||
}
|
||||
} );
|
||||
|
||||
DataTable.Editor.fieldTypes.datatable.tableClass = 'table';
|
||||
|
||||
/*
|
||||
* Bootstrap display controller - this is effectively a proxy to the Bootstrap
|
||||
* modal control.
|
||||
*/
|
||||
let shown = false;
|
||||
let fullyShown = false;
|
||||
|
||||
const dom = {
|
||||
content: $(
|
||||
'<div class="modal fade DTED">'+
|
||||
'<div class="modal-dialog"></div>'+
|
||||
'</div>'
|
||||
),
|
||||
close: $('<button class="btn-close"></div>')
|
||||
};
|
||||
let modal;
|
||||
let _bs = window.bootstrap;
|
||||
|
||||
DataTable.Editor.bootstrap = function (bs) {
|
||||
_bs = bs;
|
||||
}
|
||||
|
||||
DataTable.Editor.display.bootstrap = $.extend( true, {}, DataTable.Editor.models.displayController, {
|
||||
/*
|
||||
* API methods
|
||||
*/
|
||||
init: function ( dte ) {
|
||||
// Add `form-control` to required elements
|
||||
dte.on( 'displayOrder.dtebs open.dtebs', function ( e, display, action, form ) {
|
||||
$.each( dte.s.fields, function ( key, field ) {
|
||||
$('input:not([type=checkbox]):not([type=radio]), select, textarea', field.node() )
|
||||
.addClass( 'form-control' );
|
||||
|
||||
$('input[type=checkbox], input[type=radio]', field.node() )
|
||||
.addClass( 'form-check-input' );
|
||||
|
||||
$('select', field.node() )
|
||||
.addClass( 'form-select' );
|
||||
} );
|
||||
} );
|
||||
|
||||
return DataTable.Editor.display.bootstrap;
|
||||
},
|
||||
|
||||
open: function ( dte, append, callback ) {
|
||||
if (! modal) {
|
||||
modal = new _bs.Modal(dom.content[0], {
|
||||
backdrop: "static",
|
||||
keyboard: false
|
||||
});
|
||||
}
|
||||
|
||||
$(append).addClass('modal-content');
|
||||
$('.DTE_Header', append).addClass('modal-header');
|
||||
$('.DTE_Body', append).addClass('modal-body');
|
||||
$('.DTE_Footer', append).addClass('modal-footer');
|
||||
|
||||
// Special class for DataTable buttons in the form
|
||||
$(append).find('div.DTE_Field_Type_datatable div.dt-buttons')
|
||||
.removeClass('btn-group')
|
||||
.addClass('btn-group-vertical');
|
||||
|
||||
// Setup events on each show
|
||||
dom.close
|
||||
.attr('title', dte.i18n.close)
|
||||
.off('click.dte-bs5')
|
||||
.on('click.dte-bs5', function () {
|
||||
dte.close('icon');
|
||||
})
|
||||
.appendTo($('div.modal-header', append));
|
||||
|
||||
// This is a bit horrible, but if you mousedown and then drag out of the modal container, we don't
|
||||
// want to trigger a background action.
|
||||
let allowBackgroundClick = false;
|
||||
$(document)
|
||||
.off('mousedown.dte-bs5')
|
||||
.on('mousedown.dte-bs5', 'div.modal', function (e) {
|
||||
allowBackgroundClick = $(e.target).hasClass('modal') && shown
|
||||
? true
|
||||
: false;
|
||||
} );
|
||||
|
||||
$(document)
|
||||
.off('click.dte-bs5')
|
||||
.on('click.dte-bs5', 'div.modal', function (e) {
|
||||
if ( $(e.target).hasClass('modal') && allowBackgroundClick ) {
|
||||
dte.background();
|
||||
}
|
||||
} );
|
||||
|
||||
var content = dom.content.find('div.modal-dialog');
|
||||
content.addClass(DataTable.Editor.display.bootstrap.classes.modal);
|
||||
content.children().detach();
|
||||
content.append( append );
|
||||
|
||||
// Floating label support - rearrange the DOM for the inputs
|
||||
if (dte.c.bootstrap && dte.c.bootstrap.floatingLabels) {
|
||||
var floating_label_types = ['readonly', 'text', 'textarea', 'select', 'datetime']
|
||||
var fields = dte.order();
|
||||
|
||||
fields
|
||||
.filter(function (f) {
|
||||
var type = dte.field(f).s.opts.type;
|
||||
|
||||
return floating_label_types.includes(type);
|
||||
})
|
||||
.forEach(function(f) {
|
||||
var node = $(dte.field(f).node());
|
||||
var wrapper = node.find('.DTE_Field_InputControl');
|
||||
var control = wrapper.children(':first-child');
|
||||
var label = node.find('label');
|
||||
|
||||
wrapper.parent().removeClass('col-lg-8').addClass('col-lg-12');
|
||||
wrapper.addClass('form-floating');
|
||||
control.addClass('form-control').attr("placeholder", f);
|
||||
label.appendTo(wrapper);
|
||||
});
|
||||
}
|
||||
|
||||
if ( shown ) {
|
||||
if ( callback ) {
|
||||
callback();
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
shown = true;
|
||||
fullyShown = false;
|
||||
|
||||
$(dom.content)
|
||||
.one('shown.bs.modal', function () {
|
||||
// Can only give elements focus when shown
|
||||
if ( dte.s.setFocus ) {
|
||||
dte.s.setFocus.focus();
|
||||
}
|
||||
|
||||
fullyShown = true;
|
||||
|
||||
if ( callback ) {
|
||||
callback();
|
||||
}
|
||||
})
|
||||
.one('hidden', function () {
|
||||
shown = false;
|
||||
})
|
||||
.appendTo( 'body' );
|
||||
|
||||
modal.show();
|
||||
},
|
||||
|
||||
close: function ( dte, callback ) {
|
||||
if ( ! shown ) {
|
||||
if ( callback ) {
|
||||
callback();
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
// Check if actually displayed or not before hiding. BS4 doesn't like `hide`
|
||||
// before it has been fully displayed
|
||||
if ( ! fullyShown ) {
|
||||
$(dom.content)
|
||||
.one('shown.bs.modal', function () {
|
||||
DataTable.Editor.display.bootstrap.close( dte, callback );
|
||||
} );
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
$(dom.content)
|
||||
.one( 'hidden.bs.modal', function () {
|
||||
$(this).detach();
|
||||
} );
|
||||
|
||||
modal.hide();
|
||||
|
||||
shown = false;
|
||||
fullyShown = false;
|
||||
|
||||
if ( callback ) {
|
||||
callback();
|
||||
}
|
||||
},
|
||||
|
||||
node: function ( dte ) {
|
||||
return dom.content[0];
|
||||
},
|
||||
|
||||
classes: {
|
||||
modal: 'modal-dialog-scrollable modal-dialog-centered'
|
||||
}
|
||||
} );
|
||||
|
||||
|
||||
export default Editor;
|
||||
@ -1,216 +0,0 @@
|
||||
/*! Bulma integration for DataTables' Editor
|
||||
* © SpryMedia Ltd - datatables.net/license
|
||||
*/
|
||||
|
||||
(function( factory ){
|
||||
if ( typeof define === 'function' && define.amd ) {
|
||||
// AMD
|
||||
define( ['jquery', 'datatables.net-bm', 'datatables.net-editor'], function ( $ ) {
|
||||
return factory( $, window, document );
|
||||
} );
|
||||
}
|
||||
else if ( typeof exports === 'object' ) {
|
||||
// CommonJS
|
||||
var jq = require('jquery');
|
||||
var cjsRequires = function (root, $) {
|
||||
if ( ! $.fn.dataTable ) {
|
||||
require('datatables.net-bm')(root, $);
|
||||
}
|
||||
|
||||
if ( ! $.fn.dataTable.Editor ) {
|
||||
require('datatables.net-editor')(root, $);
|
||||
}
|
||||
};
|
||||
|
||||
if (typeof window === 'undefined') {
|
||||
module.exports = function (root, $) {
|
||||
if ( ! root ) {
|
||||
// CommonJS environments without a window global must pass a
|
||||
// root. This will give an error otherwise
|
||||
root = window;
|
||||
}
|
||||
|
||||
if ( ! $ ) {
|
||||
$ = jq( root );
|
||||
}
|
||||
|
||||
cjsRequires( root, $ );
|
||||
return factory( $, root, root.document );
|
||||
};
|
||||
}
|
||||
else {
|
||||
cjsRequires( window, jq );
|
||||
module.exports = factory( jq, window, window.document );
|
||||
}
|
||||
}
|
||||
else {
|
||||
// Browser
|
||||
factory( jQuery, window, document );
|
||||
}
|
||||
}(function( $, window, document, undefined ) {
|
||||
'use strict';
|
||||
var DataTable = $.fn.dataTable;
|
||||
|
||||
|
||||
var Editor = DataTable.Editor;
|
||||
|
||||
/*
|
||||
* Set the default display controller to be our bulma control
|
||||
*/
|
||||
DataTable.Editor.defaults.display = "bulma";
|
||||
|
||||
|
||||
/*
|
||||
* Change the default classes from Editor to be classes for Bulma
|
||||
*/
|
||||
$.extend( true, $.fn.dataTable.Editor.classes, {
|
||||
"header": {
|
||||
"wrapper": "DTE_Header modal-header",
|
||||
title: {
|
||||
tag: 'h5',
|
||||
class: 'modal-title'
|
||||
}
|
||||
},
|
||||
"body": {
|
||||
"wrapper": "DTE_Body modal-body"
|
||||
},
|
||||
"footer": {
|
||||
"wrapper": "DTE_Footer modal-footer"
|
||||
},
|
||||
"form": {
|
||||
"tag": "form-horizontal",
|
||||
"button": "button",
|
||||
"buttonInternal": "button",
|
||||
"error": "DTE_Form_Error help is-danger"
|
||||
},
|
||||
"field": {
|
||||
"wrapper": "DTE_Field field",
|
||||
"label": "label",
|
||||
"error": "DTE_Field_Error help is-danger",
|
||||
"multiValue": "card multi-value",
|
||||
"multiInfo": "small",
|
||||
"multiRestore": "card multi-restore"
|
||||
},
|
||||
} );
|
||||
|
||||
$.extend( true, DataTable.ext.buttons, {
|
||||
create: {
|
||||
formButtons: {
|
||||
className: 'button is-primary'
|
||||
}
|
||||
},
|
||||
edit: {
|
||||
formButtons: {
|
||||
className: 'button is-primary'
|
||||
}
|
||||
},
|
||||
remove: {
|
||||
formButtons: {
|
||||
className: 'button is-danger'
|
||||
}
|
||||
}
|
||||
} );
|
||||
|
||||
DataTable.Editor.fieldTypes.datatable.tableClass = 'table';
|
||||
|
||||
/*
|
||||
* Bulma display controller - this is effectively a proxy to the Bulma
|
||||
* modal control.
|
||||
*/
|
||||
let shown = false;
|
||||
let fullyShown = false;
|
||||
|
||||
const dom = {
|
||||
content: $(
|
||||
'<div class="modal DTED">'+
|
||||
'<div class="modal-background"></div>'+
|
||||
'<div class="modal-content"></div>'+
|
||||
'<button class="modal-close is-large" aria-label="close"></button>'+
|
||||
'</div>'
|
||||
)
|
||||
};
|
||||
|
||||
DataTable.Editor.display.bulma = $.extend( true, {}, DataTable.Editor.models.displayController, {
|
||||
/*
|
||||
* API methods
|
||||
*/
|
||||
init: function ( dte ) {
|
||||
// Add `form-control` to required elements
|
||||
dte.on( 'displayOrder.dtebm open.dtebm', function ( e, display, action, form ) {
|
||||
$.each( dte.s.fields, function ( key, field ) {
|
||||
$('input:not([type=checkbox]):not([type=radio]), select, textarea', field.node() )
|
||||
.addClass( 'input' );
|
||||
|
||||
$('input[type=checkbox], input[type=radio]', field.node() )
|
||||
.removeClass('input');
|
||||
|
||||
$('select', field.node() )
|
||||
.addClass( 'select' )
|
||||
.parent().addClass('select');
|
||||
|
||||
$('select[multiple]', field.node() )
|
||||
.parent().addClass('is-multiple');
|
||||
} );
|
||||
} );
|
||||
|
||||
return DataTable.Editor.display.bulma;
|
||||
},
|
||||
|
||||
open: function ( dte, append, callback ) {
|
||||
$(append).removeClass('is-hidden').addClass('is-active');
|
||||
$(append).find('.modal-title').addClass('title');
|
||||
dom.content.find('.modal-content').append(append);
|
||||
dom.content.addClass('is-active is-clipped');
|
||||
|
||||
dom.content.appendTo("body");
|
||||
// Setup events on each show
|
||||
$('.modal-close')
|
||||
.attr('title', dte.i18n.close)
|
||||
.one('click', function () {
|
||||
dte.close('icon');
|
||||
})
|
||||
.appendTo($('div.modal-header', append));
|
||||
|
||||
// This is a bit horrible, but if you mousedown and then drag out of the modal container, we don't
|
||||
// want to trigger a background action.
|
||||
let allowBackgroundClick = false;
|
||||
$(document)
|
||||
.off('mousedown.dte-bs5')
|
||||
.on('mousedown.dte-bs5', 'div.modal-background', function (e) {
|
||||
allowBackgroundClick = $(e.target).hasClass('modal-background');
|
||||
} );
|
||||
|
||||
$(document)
|
||||
.off('click.dte-bs5')
|
||||
.on('click.dte-bs5', 'div.modal-background', function (e) {
|
||||
if ( $(e.target).hasClass('modal-background') && allowBackgroundClick ) {
|
||||
dte.background();
|
||||
}
|
||||
} );
|
||||
|
||||
if ( callback ) {
|
||||
callback();
|
||||
}
|
||||
return;
|
||||
},
|
||||
|
||||
close: function ( dte, callback ) {
|
||||
dom.content
|
||||
.find('.is-active')
|
||||
.removeClass('is-active')
|
||||
.addClass('is-hidden');
|
||||
|
||||
dom.content.removeClass('is-active is-clipped');
|
||||
if ( callback ) {
|
||||
callback();
|
||||
}
|
||||
},
|
||||
|
||||
node: function ( dte ) {
|
||||
return dom.content[0];
|
||||
}
|
||||
} );
|
||||
|
||||
|
||||
return Editor;
|
||||
}));
|
||||
@ -1,4 +0,0 @@
|
||||
/*! Bulma integration for DataTables' Editor
|
||||
* © SpryMedia Ltd - datatables.net/license
|
||||
*/
|
||||
!function(o){var a,d;"function"==typeof define&&define.amd?define(["jquery","datatables.net-bm","datatables.net-editor"],function(e){return o(e,window,document)}):"object"==typeof exports?(a=require("jquery"),d=function(e,t){t.fn.dataTable||require("datatables.net-bm")(e,t),t.fn.dataTable.Editor||require("datatables.net-editor")(e,t)},"undefined"==typeof window?module.exports=function(e,t){return e=e||window,t=t||a(e),d(e,t),o(t,0,e.document)}:(d(window,a),module.exports=o(a,window,window.document))):o(jQuery,window,document)}(function(n,e,d,t){"use strict";var o=n.fn.dataTable,a=o.Editor;o.Editor.defaults.display="bulma",n.extend(!0,n.fn.dataTable.Editor.classes,{header:{wrapper:"DTE_Header modal-header",title:{tag:"h5",class:"modal-title"}},body:{wrapper:"DTE_Body modal-body"},footer:{wrapper:"DTE_Footer modal-footer"},form:{tag:"form-horizontal",button:"button",buttonInternal:"button",error:"DTE_Form_Error help is-danger"},field:{wrapper:"DTE_Field field",label:"label",error:"DTE_Field_Error help is-danger",multiValue:"card multi-value",multiInfo:"small",multiRestore:"card multi-restore"}}),n.extend(!0,o.ext.buttons,{create:{formButtons:{className:"button is-primary"}},edit:{formButtons:{className:"button is-primary"}},remove:{formButtons:{className:"button is-danger"}}}),o.Editor.fieldTypes.datatable.tableClass="table";const i={content:n('<div class="modal DTED"><div class="modal-background"></div><div class="modal-content"></div><button class="modal-close is-large" aria-label="close"></button></div>')};return o.Editor.display.bulma=n.extend(!0,{},o.Editor.models.displayController,{init:function(d){return d.on("displayOrder.dtebm open.dtebm",function(e,t,o,a){n.each(d.s.fields,function(e,t){n("input:not([type=checkbox]):not([type=radio]), select, textarea",t.node()).addClass("input"),n("input[type=checkbox], input[type=radio]",t.node()).removeClass("input"),n("select",t.node()).addClass("select").parent().addClass("select"),n("select[multiple]",t.node()).parent().addClass("is-multiple")})}),o.Editor.display.bulma},open:function(t,e,o){n(e).removeClass("is-hidden").addClass("is-active"),n(e).find(".modal-title").addClass("title"),i.content.find(".modal-content").append(e),i.content.addClass("is-active is-clipped"),i.content.appendTo("body"),n(".modal-close").attr("title",t.i18n.close).one("click",function(){t.close("icon")}).appendTo(n("div.modal-header",e));let a=!1;n(d).off("mousedown.dte-bs5").on("mousedown.dte-bs5","div.modal-background",function(e){a=n(e.target).hasClass("modal-background")}),n(d).off("click.dte-bs5").on("click.dte-bs5","div.modal-background",function(e){n(e.target).hasClass("modal-background")&&a&&t.background()}),o&&o()},close:function(e,t){i.content.find(".is-active").removeClass("is-active").addClass("is-hidden"),i.content.removeClass("is-active is-clipped"),t&&t()},node:function(e){return i.content[0]}}),a});
|
||||
@ -1,4 +0,0 @@
|
||||
/*! Bulma integration for DataTables' Editor
|
||||
* © SpryMedia Ltd - datatables.net/license
|
||||
*/
|
||||
import jQuery from"jquery";import DataTable from"datatables.net-bm";import Editor from"datatables.net-editor";let $=jQuery;var Editor=DataTable.Editor;DataTable.Editor.defaults.display="bulma",$.extend(!0,$.fn.dataTable.Editor.classes,{header:{wrapper:"DTE_Header modal-header",title:{tag:"h5",class:"modal-title"}},body:{wrapper:"DTE_Body modal-body"},footer:{wrapper:"DTE_Footer modal-footer"},form:{tag:"form-horizontal",button:"button",buttonInternal:"button",error:"DTE_Form_Error help is-danger"},field:{wrapper:"DTE_Field field",label:"label",error:"DTE_Field_Error help is-danger",multiValue:"card multi-value",multiInfo:"small",multiRestore:"card multi-restore"}}),$.extend(!0,DataTable.ext.buttons,{create:{formButtons:{className:"button is-primary"}},edit:{formButtons:{className:"button is-primary"}},remove:{formButtons:{className:"button is-danger"}}});let shown=!(DataTable.Editor.fieldTypes.datatable.tableClass="table"),fullyShown=!1;const dom={content:$('<div class="modal DTED"><div class="modal-background"></div><div class="modal-content"></div><button class="modal-close is-large" aria-label="close"></button></div>')};DataTable.Editor.display.bulma=$.extend(!0,{},DataTable.Editor.models.displayController,{init:function(d){return d.on("displayOrder.dtebm open.dtebm",function(e,t,a,o){$.each(d.s.fields,function(e,t){$("input:not([type=checkbox]):not([type=radio]), select, textarea",t.node()).addClass("input"),$("input[type=checkbox], input[type=radio]",t.node()).removeClass("input"),$("select",t.node()).addClass("select").parent().addClass("select"),$("select[multiple]",t.node()).parent().addClass("is-multiple")})}),DataTable.Editor.display.bulma},open:function(t,e,a){$(e).removeClass("is-hidden").addClass("is-active"),$(e).find(".modal-title").addClass("title"),dom.content.find(".modal-content").append(e),dom.content.addClass("is-active is-clipped"),dom.content.appendTo("body"),$(".modal-close").attr("title",t.i18n.close).one("click",function(){t.close("icon")}).appendTo($("div.modal-header",e));let o=!1;$(document).off("mousedown.dte-bs5").on("mousedown.dte-bs5","div.modal-background",function(e){o=$(e.target).hasClass("modal-background")}),$(document).off("click.dte-bs5").on("click.dte-bs5","div.modal-background",function(e){$(e.target).hasClass("modal-background")&&o&&t.background()}),a&&a()},close:function(e,t){dom.content.find(".is-active").removeClass("is-active").addClass("is-hidden"),dom.content.removeClass("is-active is-clipped"),t&&t()},node:function(e){return dom.content[0]}});export default Editor;
|
||||
@ -1,172 +0,0 @@
|
||||
/*! Bulma integration for DataTables' Editor
|
||||
* © SpryMedia Ltd - datatables.net/license
|
||||
*/
|
||||
|
||||
import jQuery from 'jquery';
|
||||
import DataTable from 'datatables.net-bm';
|
||||
import Editor from 'datatables.net-editor';
|
||||
|
||||
// Allow reassignment of the $ variable
|
||||
let $ = jQuery;
|
||||
|
||||
var Editor = DataTable.Editor;
|
||||
|
||||
/*
|
||||
* Set the default display controller to be our bulma control
|
||||
*/
|
||||
DataTable.Editor.defaults.display = "bulma";
|
||||
|
||||
|
||||
/*
|
||||
* Change the default classes from Editor to be classes for Bulma
|
||||
*/
|
||||
$.extend( true, $.fn.dataTable.Editor.classes, {
|
||||
"header": {
|
||||
"wrapper": "DTE_Header modal-header",
|
||||
title: {
|
||||
tag: 'h5',
|
||||
class: 'modal-title'
|
||||
}
|
||||
},
|
||||
"body": {
|
||||
"wrapper": "DTE_Body modal-body"
|
||||
},
|
||||
"footer": {
|
||||
"wrapper": "DTE_Footer modal-footer"
|
||||
},
|
||||
"form": {
|
||||
"tag": "form-horizontal",
|
||||
"button": "button",
|
||||
"buttonInternal": "button",
|
||||
"error": "DTE_Form_Error help is-danger"
|
||||
},
|
||||
"field": {
|
||||
"wrapper": "DTE_Field field",
|
||||
"label": "label",
|
||||
"error": "DTE_Field_Error help is-danger",
|
||||
"multiValue": "card multi-value",
|
||||
"multiInfo": "small",
|
||||
"multiRestore": "card multi-restore"
|
||||
},
|
||||
} );
|
||||
|
||||
$.extend( true, DataTable.ext.buttons, {
|
||||
create: {
|
||||
formButtons: {
|
||||
className: 'button is-primary'
|
||||
}
|
||||
},
|
||||
edit: {
|
||||
formButtons: {
|
||||
className: 'button is-primary'
|
||||
}
|
||||
},
|
||||
remove: {
|
||||
formButtons: {
|
||||
className: 'button is-danger'
|
||||
}
|
||||
}
|
||||
} );
|
||||
|
||||
DataTable.Editor.fieldTypes.datatable.tableClass = 'table';
|
||||
|
||||
/*
|
||||
* Bulma display controller - this is effectively a proxy to the Bulma
|
||||
* modal control.
|
||||
*/
|
||||
let shown = false;
|
||||
let fullyShown = false;
|
||||
|
||||
const dom = {
|
||||
content: $(
|
||||
'<div class="modal DTED">'+
|
||||
'<div class="modal-background"></div>'+
|
||||
'<div class="modal-content"></div>'+
|
||||
'<button class="modal-close is-large" aria-label="close"></button>'+
|
||||
'</div>'
|
||||
)
|
||||
};
|
||||
|
||||
DataTable.Editor.display.bulma = $.extend( true, {}, DataTable.Editor.models.displayController, {
|
||||
/*
|
||||
* API methods
|
||||
*/
|
||||
init: function ( dte ) {
|
||||
// Add `form-control` to required elements
|
||||
dte.on( 'displayOrder.dtebm open.dtebm', function ( e, display, action, form ) {
|
||||
$.each( dte.s.fields, function ( key, field ) {
|
||||
$('input:not([type=checkbox]):not([type=radio]), select, textarea', field.node() )
|
||||
.addClass( 'input' );
|
||||
|
||||
$('input[type=checkbox], input[type=radio]', field.node() )
|
||||
.removeClass('input');
|
||||
|
||||
$('select', field.node() )
|
||||
.addClass( 'select' )
|
||||
.parent().addClass('select');
|
||||
|
||||
$('select[multiple]', field.node() )
|
||||
.parent().addClass('is-multiple');
|
||||
} );
|
||||
} );
|
||||
|
||||
return DataTable.Editor.display.bulma;
|
||||
},
|
||||
|
||||
open: function ( dte, append, callback ) {
|
||||
$(append).removeClass('is-hidden').addClass('is-active');
|
||||
$(append).find('.modal-title').addClass('title');
|
||||
dom.content.find('.modal-content').append(append);
|
||||
dom.content.addClass('is-active is-clipped');
|
||||
|
||||
dom.content.appendTo("body");
|
||||
// Setup events on each show
|
||||
$('.modal-close')
|
||||
.attr('title', dte.i18n.close)
|
||||
.one('click', function () {
|
||||
dte.close('icon');
|
||||
})
|
||||
.appendTo($('div.modal-header', append));
|
||||
|
||||
// This is a bit horrible, but if you mousedown and then drag out of the modal container, we don't
|
||||
// want to trigger a background action.
|
||||
let allowBackgroundClick = false;
|
||||
$(document)
|
||||
.off('mousedown.dte-bs5')
|
||||
.on('mousedown.dte-bs5', 'div.modal-background', function (e) {
|
||||
allowBackgroundClick = $(e.target).hasClass('modal-background');
|
||||
} );
|
||||
|
||||
$(document)
|
||||
.off('click.dte-bs5')
|
||||
.on('click.dte-bs5', 'div.modal-background', function (e) {
|
||||
if ( $(e.target).hasClass('modal-background') && allowBackgroundClick ) {
|
||||
dte.background();
|
||||
}
|
||||
} );
|
||||
|
||||
if ( callback ) {
|
||||
callback();
|
||||
}
|
||||
return;
|
||||
},
|
||||
|
||||
close: function ( dte, callback ) {
|
||||
dom.content
|
||||
.find('.is-active')
|
||||
.removeClass('is-active')
|
||||
.addClass('is-hidden');
|
||||
|
||||
dom.content.removeClass('is-active is-clipped');
|
||||
if ( callback ) {
|
||||
callback();
|
||||
}
|
||||
},
|
||||
|
||||
node: function ( dte ) {
|
||||
return dom.content[0];
|
||||
}
|
||||
} );
|
||||
|
||||
|
||||
export default Editor;
|
||||
@ -1,59 +0,0 @@
|
||||
/*! DataTables styling integration for DataTables' Editor
|
||||
* ©SpryMedia Ltd - datatables.net/license
|
||||
*/
|
||||
|
||||
(function( factory ){
|
||||
if ( typeof define === 'function' && define.amd ) {
|
||||
// AMD
|
||||
define( ['jquery', 'datatables.net-dt', 'datatables.net-editor'], function ( $ ) {
|
||||
return factory( $, window, document );
|
||||
} );
|
||||
}
|
||||
else if ( typeof exports === 'object' ) {
|
||||
// CommonJS
|
||||
var jq = require('jquery');
|
||||
var cjsRequires = function (root, $) {
|
||||
if ( ! $.fn.dataTable ) {
|
||||
require('datatables.net-dt')(root, $);
|
||||
}
|
||||
|
||||
if ( ! $.fn.dataTable.Editor ) {
|
||||
require('datatables.net-editor')(root, $);
|
||||
}
|
||||
};
|
||||
|
||||
if (typeof window === 'undefined') {
|
||||
module.exports = function (root, $) {
|
||||
if ( ! root ) {
|
||||
// CommonJS environments without a window global must pass a
|
||||
// root. This will give an error otherwise
|
||||
root = window;
|
||||
}
|
||||
|
||||
if ( ! $ ) {
|
||||
$ = jq( root );
|
||||
}
|
||||
|
||||
cjsRequires( root, $ );
|
||||
return factory( $, root, root.document );
|
||||
};
|
||||
}
|
||||
else {
|
||||
cjsRequires( window, jq );
|
||||
module.exports = factory( jq, window, window.document );
|
||||
}
|
||||
}
|
||||
else {
|
||||
// Browser
|
||||
factory( jQuery, window, document );
|
||||
}
|
||||
}(function( $, window, document, undefined ) {
|
||||
'use strict';
|
||||
var DataTable = $.fn.dataTable;
|
||||
|
||||
|
||||
var Editor = DataTable.Editor;
|
||||
|
||||
|
||||
return Editor;
|
||||
}));
|
||||
@ -1,4 +0,0 @@
|
||||
/*! DataTables styling integration for DataTables' Editor
|
||||
* ©SpryMedia Ltd - datatables.net/license
|
||||
*/
|
||||
!function(n){var d,o;"function"==typeof define&&define.amd?define(["jquery","datatables.net-dt","datatables.net-editor"],function(e){return n(e,window,document)}):"object"==typeof exports?(d=require("jquery"),o=function(e,t){t.fn.dataTable||require("datatables.net-dt")(e,t),t.fn.dataTable.Editor||require("datatables.net-editor")(e,t)},"undefined"==typeof window?module.exports=function(e,t){return e=e||window,t=t||d(e),o(e,t),n(t,0,e.document)}:(o(window,d),module.exports=n(d,window,window.document))):n(jQuery,window,document)}(function(e,t,n,d){"use strict";return e.fn.dataTable.Editor});
|
||||
@ -1,4 +0,0 @@
|
||||
/*! DataTables styling integration for DataTables' Editor
|
||||
* ©SpryMedia Ltd - datatables.net/license
|
||||
*/
|
||||
import jQuery from"jquery";import DataTable from"datatables.net-dt";import Editor from"datatables.net-editor";let $=jQuery;var Editor;export default Editor=DataTable.Editor;
|
||||
@ -1,15 +0,0 @@
|
||||
/*! DataTables styling integration for DataTables' Editor
|
||||
* ©SpryMedia Ltd - datatables.net/license
|
||||
*/
|
||||
|
||||
import jQuery from 'jquery';
|
||||
import DataTable from 'datatables.net-dt';
|
||||
import Editor from 'datatables.net-editor';
|
||||
|
||||
// Allow reassignment of the $ variable
|
||||
let $ = jQuery;
|
||||
|
||||
var Editor = DataTable.Editor;
|
||||
|
||||
|
||||
export default Editor;
|
||||
@ -1,171 +0,0 @@
|
||||
/*! Foundation integration for DataTables' Editor
|
||||
* © SpryMedia Ltd - datatables.net/license
|
||||
*/
|
||||
|
||||
(function( factory ){
|
||||
if ( typeof define === 'function' && define.amd ) {
|
||||
// AMD
|
||||
define( ['jquery', 'datatables.net-zf', 'datatables.net-editor'], function ( $ ) {
|
||||
return factory( $, window, document );
|
||||
} );
|
||||
}
|
||||
else if ( typeof exports === 'object' ) {
|
||||
// CommonJS
|
||||
var jq = require('jquery');
|
||||
var cjsRequires = function (root, $) {
|
||||
if ( ! $.fn.dataTable ) {
|
||||
require('datatables.net-zf')(root, $);
|
||||
}
|
||||
|
||||
if ( ! $.fn.dataTable.Editor ) {
|
||||
require('datatables.net-editor')(root, $);
|
||||
}
|
||||
};
|
||||
|
||||
if (typeof window === 'undefined') {
|
||||
module.exports = function (root, $) {
|
||||
if ( ! root ) {
|
||||
// CommonJS environments without a window global must pass a
|
||||
// root. This will give an error otherwise
|
||||
root = window;
|
||||
}
|
||||
|
||||
if ( ! $ ) {
|
||||
$ = jq( root );
|
||||
}
|
||||
|
||||
cjsRequires( root, $ );
|
||||
return factory( $, root, root.document );
|
||||
};
|
||||
}
|
||||
else {
|
||||
cjsRequires( window, jq );
|
||||
module.exports = factory( jq, window, window.document );
|
||||
}
|
||||
}
|
||||
else {
|
||||
// Browser
|
||||
factory( jQuery, window, document );
|
||||
}
|
||||
}(function( $, window, document, undefined ) {
|
||||
'use strict';
|
||||
var DataTable = $.fn.dataTable;
|
||||
|
||||
|
||||
var Editor = DataTable.Editor;
|
||||
|
||||
/*
|
||||
* Set the default display controller to be our foundation control
|
||||
*/
|
||||
DataTable.Editor.defaults.display = "foundation";
|
||||
|
||||
|
||||
/*
|
||||
* Change the default classes from Editor to be classes for Foundation
|
||||
*/
|
||||
$.extend( true, $.fn.dataTable.Editor.classes, {
|
||||
field: {
|
||||
wrapper: "DTE_Field row",
|
||||
label: "small-4 columns inline",
|
||||
input: "small-8 columns",
|
||||
error: "error",
|
||||
multiValue: "panel radius multi-value",
|
||||
multiInfo: "small",
|
||||
multiRestore: "panel radius multi-restore",
|
||||
"msg-labelInfo": "label secondary",
|
||||
"msg-info": "label secondary",
|
||||
"msg-message": "label secondary",
|
||||
"msg-error": "label alert"
|
||||
},
|
||||
form: {
|
||||
button: "button small",
|
||||
buttonInternal: "button small"
|
||||
}
|
||||
} );
|
||||
|
||||
|
||||
/*
|
||||
* Foundation display controller - this is effectively a proxy to the Foundation
|
||||
* modal control.
|
||||
*/
|
||||
var shown = false;
|
||||
var reveal;
|
||||
|
||||
const dom = {
|
||||
content: $(
|
||||
'<div class="reveal reveal-modal DTED" data-reveal></div>'
|
||||
),
|
||||
close: $('<button class="close close-button">×</div>')
|
||||
};
|
||||
|
||||
DataTable.Editor.display.foundation = $.extend( true, {}, DataTable.Editor.models.displayController, {
|
||||
init: function ( dte ) {
|
||||
if (! reveal) {
|
||||
reveal = new window.Foundation.Reveal( dom.content, {
|
||||
closeOnClick: false
|
||||
} );
|
||||
}
|
||||
|
||||
return DataTable.Editor.display.foundation;
|
||||
},
|
||||
|
||||
open: function ( dte, append, callback ) {
|
||||
var content = dom.content;
|
||||
content.children().detach();
|
||||
content.append( append );
|
||||
content.prepend( dom.close );
|
||||
|
||||
dom.close
|
||||
.attr('title', dte.i18n.close)
|
||||
.off('click.dte-zf')
|
||||
.on('click.dte-zf', function () {
|
||||
dte.close('icon');
|
||||
});
|
||||
|
||||
$(document)
|
||||
.off('click.dte-zf')
|
||||
.on('click.dte-zf', 'div.reveal-modal-bg, div.reveal-overlay', function (e) {
|
||||
if ( $(e.target).closest(dom.content).length ) {
|
||||
return;
|
||||
}
|
||||
dte.background();
|
||||
} );
|
||||
|
||||
if ( shown ) {
|
||||
if ( callback ) {
|
||||
callback();
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
shown = true;
|
||||
|
||||
$(dom.content)
|
||||
.one('open.zf.reveal', function () {
|
||||
if ( callback ) {
|
||||
callback();
|
||||
}
|
||||
});
|
||||
|
||||
reveal.open();
|
||||
},
|
||||
|
||||
close: function ( dte, callback ) {
|
||||
if (shown) {
|
||||
reveal.close();
|
||||
shown = false;
|
||||
}
|
||||
|
||||
if ( callback ) {
|
||||
callback();
|
||||
}
|
||||
},
|
||||
|
||||
node: function ( dte ) {
|
||||
return dom.content[0];
|
||||
}
|
||||
} );
|
||||
|
||||
|
||||
return Editor;
|
||||
}));
|
||||
@ -1,4 +0,0 @@
|
||||
/*! Foundation integration for DataTables' Editor
|
||||
* © SpryMedia Ltd - datatables.net/license
|
||||
*/
|
||||
!function(t){var o,l;"function"==typeof define&&define.amd?define(["jquery","datatables.net-zf","datatables.net-editor"],function(e){return t(e,window,document)}):"object"==typeof exports?(o=require("jquery"),l=function(e,n){n.fn.dataTable||require("datatables.net-zf")(e,n),n.fn.dataTable.Editor||require("datatables.net-editor")(e,n)},"undefined"==typeof window?module.exports=function(e,n){return e=e||window,n=n||o(e),l(e,n),t(n,e,e.document)}:(l(window,o),module.exports=t(o,window,window.document))):t(jQuery,window,document)}(function(l,n,a,e){"use strict";var i,t=l.fn.dataTable,o=t.Editor,d=(t.Editor.defaults.display="foundation",l.extend(!0,l.fn.dataTable.Editor.classes,{field:{wrapper:"DTE_Field row",label:"small-4 columns inline",input:"small-8 columns",error:"error",multiValue:"panel radius multi-value",multiInfo:"small",multiRestore:"panel radius multi-restore","msg-labelInfo":"label secondary","msg-info":"label secondary","msg-message":"label secondary","msg-error":"label alert"},form:{button:"button small",buttonInternal:"button small"}}),!1);const r={content:l('<div class="reveal reveal-modal DTED" data-reveal></div>'),close:l('<button class="close close-button">×</div>')};return t.Editor.display.foundation=l.extend(!0,{},t.Editor.models.displayController,{init:function(e){return i=i||new n.Foundation.Reveal(r.content,{closeOnClick:!1}),t.Editor.display.foundation},open:function(n,e,t){var o=r.content;o.children().detach(),o.append(e),o.prepend(r.close),r.close.attr("title",n.i18n.close).off("click.dte-zf").on("click.dte-zf",function(){n.close("icon")}),l(a).off("click.dte-zf").on("click.dte-zf","div.reveal-modal-bg, div.reveal-overlay",function(e){l(e.target).closest(r.content).length||n.background()}),d?t&&t():(d=!0,l(r.content).one("open.zf.reveal",function(){t&&t()}),i.open())},close:function(e,n){d&&(i.close(),d=!1),n&&n()},node:function(e){return r.content[0]}}),o});
|
||||
@ -1,4 +0,0 @@
|
||||
/*! Foundation integration for DataTables' Editor
|
||||
* © SpryMedia Ltd - datatables.net/license
|
||||
*/
|
||||
import jQuery from"jquery";import DataTable from"datatables.net-zf";import Editor from"datatables.net-editor";let $=jQuery;var reveal,Editor=DataTable.Editor,shown=(DataTable.Editor.defaults.display="foundation",$.extend(!0,$.fn.dataTable.Editor.classes,{field:{wrapper:"DTE_Field row",label:"small-4 columns inline",input:"small-8 columns",error:"error",multiValue:"panel radius multi-value",multiInfo:"small",multiRestore:"panel radius multi-restore","msg-labelInfo":"label secondary","msg-info":"label secondary","msg-message":"label secondary","msg-error":"label alert"},form:{button:"button small",buttonInternal:"button small"}}),!1);const dom={content:$('<div class="reveal reveal-modal DTED" data-reveal></div>'),close:$('<button class="close close-button">×</div>')};DataTable.Editor.display.foundation=$.extend(!0,{},DataTable.Editor.models.displayController,{init:function(e){return reveal=reveal||new window.Foundation.Reveal(dom.content,{closeOnClick:!1}),DataTable.Editor.display.foundation},open:function(o,e,t){var l=dom.content;l.children().detach(),l.append(e),l.prepend(dom.close),dom.close.attr("title",o.i18n.close).off("click.dte-zf").on("click.dte-zf",function(){o.close("icon")}),$(document).off("click.dte-zf").on("click.dte-zf","div.reveal-modal-bg, div.reveal-overlay",function(e){$(e.target).closest(dom.content).length||o.background()}),shown?t&&t():(shown=!0,$(dom.content).one("open.zf.reveal",function(){t&&t()}),reveal.open())},close:function(e,o){shown&&(reveal.close(),shown=!1),o&&o()},node:function(e){return dom.content[0]}});export default Editor;
|
||||
@ -1,127 +0,0 @@
|
||||
/*! Foundation integration for DataTables' Editor
|
||||
* © SpryMedia Ltd - datatables.net/license
|
||||
*/
|
||||
|
||||
import jQuery from 'jquery';
|
||||
import DataTable from 'datatables.net-zf';
|
||||
import Editor from 'datatables.net-editor';
|
||||
|
||||
// Allow reassignment of the $ variable
|
||||
let $ = jQuery;
|
||||
|
||||
var Editor = DataTable.Editor;
|
||||
|
||||
/*
|
||||
* Set the default display controller to be our foundation control
|
||||
*/
|
||||
DataTable.Editor.defaults.display = "foundation";
|
||||
|
||||
|
||||
/*
|
||||
* Change the default classes from Editor to be classes for Foundation
|
||||
*/
|
||||
$.extend( true, $.fn.dataTable.Editor.classes, {
|
||||
field: {
|
||||
wrapper: "DTE_Field row",
|
||||
label: "small-4 columns inline",
|
||||
input: "small-8 columns",
|
||||
error: "error",
|
||||
multiValue: "panel radius multi-value",
|
||||
multiInfo: "small",
|
||||
multiRestore: "panel radius multi-restore",
|
||||
"msg-labelInfo": "label secondary",
|
||||
"msg-info": "label secondary",
|
||||
"msg-message": "label secondary",
|
||||
"msg-error": "label alert"
|
||||
},
|
||||
form: {
|
||||
button: "button small",
|
||||
buttonInternal: "button small"
|
||||
}
|
||||
} );
|
||||
|
||||
|
||||
/*
|
||||
* Foundation display controller - this is effectively a proxy to the Foundation
|
||||
* modal control.
|
||||
*/
|
||||
var shown = false;
|
||||
var reveal;
|
||||
|
||||
const dom = {
|
||||
content: $(
|
||||
'<div class="reveal reveal-modal DTED" data-reveal></div>'
|
||||
),
|
||||
close: $('<button class="close close-button">×</div>')
|
||||
};
|
||||
|
||||
DataTable.Editor.display.foundation = $.extend( true, {}, DataTable.Editor.models.displayController, {
|
||||
init: function ( dte ) {
|
||||
if (! reveal) {
|
||||
reveal = new window.Foundation.Reveal( dom.content, {
|
||||
closeOnClick: false
|
||||
} );
|
||||
}
|
||||
|
||||
return DataTable.Editor.display.foundation;
|
||||
},
|
||||
|
||||
open: function ( dte, append, callback ) {
|
||||
var content = dom.content;
|
||||
content.children().detach();
|
||||
content.append( append );
|
||||
content.prepend( dom.close );
|
||||
|
||||
dom.close
|
||||
.attr('title', dte.i18n.close)
|
||||
.off('click.dte-zf')
|
||||
.on('click.dte-zf', function () {
|
||||
dte.close('icon');
|
||||
});
|
||||
|
||||
$(document)
|
||||
.off('click.dte-zf')
|
||||
.on('click.dte-zf', 'div.reveal-modal-bg, div.reveal-overlay', function (e) {
|
||||
if ( $(e.target).closest(dom.content).length ) {
|
||||
return;
|
||||
}
|
||||
dte.background();
|
||||
} );
|
||||
|
||||
if ( shown ) {
|
||||
if ( callback ) {
|
||||
callback();
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
shown = true;
|
||||
|
||||
$(dom.content)
|
||||
.one('open.zf.reveal', function () {
|
||||
if ( callback ) {
|
||||
callback();
|
||||
}
|
||||
});
|
||||
|
||||
reveal.open();
|
||||
},
|
||||
|
||||
close: function ( dte, callback ) {
|
||||
if (shown) {
|
||||
reveal.close();
|
||||
shown = false;
|
||||
}
|
||||
|
||||
if ( callback ) {
|
||||
callback();
|
||||
}
|
||||
},
|
||||
|
||||
node: function ( dte ) {
|
||||
return dom.content[0];
|
||||
}
|
||||
} );
|
||||
|
||||
|
||||
export default Editor;
|
||||
@ -1,186 +0,0 @@
|
||||
/*! jQuery UI integration for DataTables' Editor
|
||||
* © SpryMedia Ltd - datatables.net/license
|
||||
*/
|
||||
|
||||
(function( factory ){
|
||||
if ( typeof define === 'function' && define.amd ) {
|
||||
// AMD
|
||||
define( ['jquery', 'datatables.net-jqui', 'datatables.net-editor'], function ( $ ) {
|
||||
return factory( $, window, document );
|
||||
} );
|
||||
}
|
||||
else if ( typeof exports === 'object' ) {
|
||||
// CommonJS
|
||||
var jq = require('jquery');
|
||||
var cjsRequires = function (root, $) {
|
||||
if ( ! $.fn.dataTable ) {
|
||||
require('datatables.net-jqui')(root, $);
|
||||
}
|
||||
|
||||
if ( ! $.fn.dataTable.Editor ) {
|
||||
require('datatables.net-editor')(root, $);
|
||||
}
|
||||
};
|
||||
|
||||
if (typeof window === 'undefined') {
|
||||
module.exports = function (root, $) {
|
||||
if ( ! root ) {
|
||||
// CommonJS environments without a window global must pass a
|
||||
// root. This will give an error otherwise
|
||||
root = window;
|
||||
}
|
||||
|
||||
if ( ! $ ) {
|
||||
$ = jq( root );
|
||||
}
|
||||
|
||||
cjsRequires( root, $ );
|
||||
return factory( $, root, root.document );
|
||||
};
|
||||
}
|
||||
else {
|
||||
cjsRequires( window, jq );
|
||||
module.exports = factory( jq, window, window.document );
|
||||
}
|
||||
}
|
||||
else {
|
||||
// Browser
|
||||
factory( jQuery, window, document );
|
||||
}
|
||||
}(function( $, window, document, undefined ) {
|
||||
'use strict';
|
||||
var DataTable = $.fn.dataTable;
|
||||
|
||||
|
||||
|
||||
var Editor = DataTable.Editor;
|
||||
var doingClose = false;
|
||||
|
||||
/*
|
||||
* Set the default display controller to be our foundation control
|
||||
*/
|
||||
Editor.defaults.display = "jqueryui";
|
||||
|
||||
/*
|
||||
* Change the default classes from Editor to be classes for Bootstrap
|
||||
*/
|
||||
var buttonClass = "btn ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only";
|
||||
$.extend( true, $.fn.dataTable.Editor.classes, {
|
||||
form: {
|
||||
button: buttonClass,
|
||||
buttonInternal: buttonClass
|
||||
}
|
||||
} );
|
||||
|
||||
var dialouge;
|
||||
var shown = false;
|
||||
|
||||
/*
|
||||
* jQuery UI display controller - this is effectively a proxy to the jQuery UI
|
||||
* modal control.
|
||||
*/
|
||||
Editor.display.jqueryui = $.extend( true, {}, Editor.models.displayController, {
|
||||
init: function ( dte ) {
|
||||
if (! dialouge) {
|
||||
dialouge = $('<div class="DTED"></div>')
|
||||
.css('display', 'none')
|
||||
.appendTo('body')
|
||||
.dialog( $.extend( true, Editor.display.jqueryui.modalOptions, {
|
||||
autoOpen: false,
|
||||
buttons: { "A": function () {} }, // fake button so the button container is created
|
||||
closeOnEscape: false // allow editor's escape function to run
|
||||
} ) );
|
||||
}
|
||||
|
||||
return Editor.display.jqueryui;
|
||||
},
|
||||
|
||||
open: function ( dte, append, callback ) {
|
||||
dialouge
|
||||
.children()
|
||||
.detach();
|
||||
|
||||
dialouge
|
||||
.append( append )
|
||||
.dialog( 'open' );
|
||||
|
||||
$(dte.dom.formError).appendTo(
|
||||
dialouge.parent().find('div.ui-dialog-buttonpane')
|
||||
);
|
||||
|
||||
dialouge.parent().find('.ui-dialog-title').html( dte.dom.header.innerHTML );
|
||||
dialouge.parent().addClass('DTED');
|
||||
|
||||
// Modify the Editor buttons to be jQuery UI suitable
|
||||
var buttons = $(dte.dom.buttons)
|
||||
.children()
|
||||
.addClass( 'ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only' )
|
||||
.each( function () {
|
||||
$(this).wrapInner( '<span class="ui-button-text"></span>' );
|
||||
} );
|
||||
|
||||
// Move the buttons into the jQuery UI button set
|
||||
dialouge.parent().find('div.ui-dialog-buttonset')
|
||||
.children()
|
||||
.detach();
|
||||
|
||||
dialouge.parent().find('div.ui-dialog-buttonset')
|
||||
.append( buttons.parent() );
|
||||
|
||||
dialouge
|
||||
.parent()
|
||||
.find('button.ui-dialog-titlebar-close')
|
||||
.off('click.dte-ju')
|
||||
.on('click.dte-ju', function () {
|
||||
dte.close('icon');
|
||||
});
|
||||
|
||||
// Need to know when the dialogue is closed using its own trigger
|
||||
// so we can reset the form
|
||||
$(dialouge)
|
||||
.off( 'dialogclose.dte-ju' )
|
||||
.on( 'dialogclose.dte-ju', function (e) {
|
||||
if ( ! doingClose ) {
|
||||
dte.close();
|
||||
}
|
||||
} );
|
||||
|
||||
shown = true;
|
||||
|
||||
if ( callback ) {
|
||||
callback();
|
||||
}
|
||||
},
|
||||
|
||||
close: function ( dte, callback ) {
|
||||
if ( dialouge ) {
|
||||
// Don't want to trigger a close() call from dialogclose!
|
||||
doingClose = true;
|
||||
dialouge.dialog( 'close' );
|
||||
doingClose = false;
|
||||
}
|
||||
|
||||
shown = false;
|
||||
|
||||
if ( callback ) {
|
||||
callback();
|
||||
}
|
||||
},
|
||||
|
||||
node: function ( dte ) {
|
||||
return dialouge[0];
|
||||
},
|
||||
|
||||
// jQuery UI dialogues perform their own focus capture
|
||||
captureFocus: false
|
||||
} );
|
||||
|
||||
|
||||
Editor.display.jqueryui.modalOptions = {
|
||||
width: 600,
|
||||
modal: true
|
||||
};
|
||||
|
||||
|
||||
return Editor;
|
||||
}));
|
||||
@ -1,4 +0,0 @@
|
||||
/*! jQuery UI integration for DataTables' Editor
|
||||
* © SpryMedia Ltd - datatables.net/license
|
||||
*/
|
||||
!function(n){var o,i;"function"==typeof define&&define.amd?define(["jquery","datatables.net-jqui","datatables.net-editor"],function(t){return n(t,window,document)}):"object"==typeof exports?(o=require("jquery"),i=function(t,e){e.fn.dataTable||require("datatables.net-jqui")(t,e),e.fn.dataTable.Editor||require("datatables.net-editor")(t,e)},"undefined"==typeof window?module.exports=function(t,e){return t=t||window,e=e||o(t),i(t,e),n(e,0,t.document)}:(i(window,o),module.exports=n(o,window,window.document))):n(jQuery,window,document)}(function(o,t,e,n){"use strict";var i,d=o.fn.dataTable.Editor,a=!1,u=(d.defaults.display="jqueryui","btn ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only");o.extend(!0,o.fn.dataTable.Editor.classes,{form:{button:u,buttonInternal:u}});return d.display.jqueryui=o.extend(!0,{},d.models.displayController,{init:function(t){return i=i||o('<div class="DTED"></div>').css("display","none").appendTo("body").dialog(o.extend(!0,d.display.jqueryui.modalOptions,{autoOpen:!1,buttons:{A:function(){}},closeOnEscape:!1})),d.display.jqueryui},open:function(e,t,n){i.children().detach(),i.append(t).dialog("open"),o(e.dom.formError).appendTo(i.parent().find("div.ui-dialog-buttonpane")),i.parent().find(".ui-dialog-title").html(e.dom.header.innerHTML),i.parent().addClass("DTED");t=o(e.dom.buttons).children().addClass("ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only").each(function(){o(this).wrapInner('<span class="ui-button-text"></span>')});i.parent().find("div.ui-dialog-buttonset").children().detach(),i.parent().find("div.ui-dialog-buttonset").append(t.parent()),i.parent().find("button.ui-dialog-titlebar-close").off("click.dte-ju").on("click.dte-ju",function(){e.close("icon")}),o(i).off("dialogclose.dte-ju").on("dialogclose.dte-ju",function(t){a||e.close()}),n&&n()},close:function(t,e){i&&(a=!0,i.dialog("close"),a=!1),e&&e()},node:function(t){return i[0]},captureFocus:!1}),d.display.jqueryui.modalOptions={width:600,modal:!0},d});
|
||||
@ -1,4 +0,0 @@
|
||||
/*! jQuery UI integration for DataTables' Editor
|
||||
* © SpryMedia Ltd - datatables.net/license
|
||||
*/
|
||||
import jQuery from"jquery";import DataTable from"datatables.net-jqui";import Editor from"datatables.net-editor";let $=jQuery;var dialouge,Editor=DataTable.Editor,doingClose=!1,buttonClass=(Editor.defaults.display="jqueryui","btn ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only"),shown=($.extend(!0,$.fn.dataTable.Editor.classes,{form:{button:buttonClass,buttonInternal:buttonClass}}),!1);Editor.display.jqueryui=$.extend(!0,{},Editor.models.displayController,{init:function(o){return dialouge=dialouge||$('<div class="DTED"></div>').css("display","none").appendTo("body").dialog($.extend(!0,Editor.display.jqueryui.modalOptions,{autoOpen:!1,buttons:{A:function(){}},closeOnEscape:!1})),Editor.display.jqueryui},open:function(t,o,i){dialouge.children().detach(),dialouge.append(o).dialog("open"),$(t.dom.formError).appendTo(dialouge.parent().find("div.ui-dialog-buttonpane")),dialouge.parent().find(".ui-dialog-title").html(t.dom.header.innerHTML),dialouge.parent().addClass("DTED");o=$(t.dom.buttons).children().addClass("ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only").each(function(){$(this).wrapInner('<span class="ui-button-text"></span>')});dialouge.parent().find("div.ui-dialog-buttonset").children().detach(),dialouge.parent().find("div.ui-dialog-buttonset").append(o.parent()),dialouge.parent().find("button.ui-dialog-titlebar-close").off("click.dte-ju").on("click.dte-ju",function(){t.close("icon")}),$(dialouge).off("dialogclose.dte-ju").on("dialogclose.dte-ju",function(o){doingClose||t.close()}),shown=!0,i&&i()},close:function(o,t){dialouge&&(doingClose=!0,dialouge.dialog("close"),doingClose=!1),shown=!1,t&&t()},node:function(o){return dialouge[0]},captureFocus:!1}),Editor.display.jqueryui.modalOptions={width:600,modal:!0};export default Editor;
|
||||
@ -1,142 +0,0 @@
|
||||
/*! jQuery UI integration for DataTables' Editor
|
||||
* © SpryMedia Ltd - datatables.net/license
|
||||
*/
|
||||
|
||||
import jQuery from 'jquery';
|
||||
import DataTable from 'datatables.net-jqui';
|
||||
import Editor from 'datatables.net-editor';
|
||||
|
||||
// Allow reassignment of the $ variable
|
||||
let $ = jQuery;
|
||||
|
||||
|
||||
var Editor = DataTable.Editor;
|
||||
var doingClose = false;
|
||||
|
||||
/*
|
||||
* Set the default display controller to be our foundation control
|
||||
*/
|
||||
Editor.defaults.display = "jqueryui";
|
||||
|
||||
/*
|
||||
* Change the default classes from Editor to be classes for Bootstrap
|
||||
*/
|
||||
var buttonClass = "btn ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only";
|
||||
$.extend( true, $.fn.dataTable.Editor.classes, {
|
||||
form: {
|
||||
button: buttonClass,
|
||||
buttonInternal: buttonClass
|
||||
}
|
||||
} );
|
||||
|
||||
var dialouge;
|
||||
var shown = false;
|
||||
|
||||
/*
|
||||
* jQuery UI display controller - this is effectively a proxy to the jQuery UI
|
||||
* modal control.
|
||||
*/
|
||||
Editor.display.jqueryui = $.extend( true, {}, Editor.models.displayController, {
|
||||
init: function ( dte ) {
|
||||
if (! dialouge) {
|
||||
dialouge = $('<div class="DTED"></div>')
|
||||
.css('display', 'none')
|
||||
.appendTo('body')
|
||||
.dialog( $.extend( true, Editor.display.jqueryui.modalOptions, {
|
||||
autoOpen: false,
|
||||
buttons: { "A": function () {} }, // fake button so the button container is created
|
||||
closeOnEscape: false // allow editor's escape function to run
|
||||
} ) );
|
||||
}
|
||||
|
||||
return Editor.display.jqueryui;
|
||||
},
|
||||
|
||||
open: function ( dte, append, callback ) {
|
||||
dialouge
|
||||
.children()
|
||||
.detach();
|
||||
|
||||
dialouge
|
||||
.append( append )
|
||||
.dialog( 'open' );
|
||||
|
||||
$(dte.dom.formError).appendTo(
|
||||
dialouge.parent().find('div.ui-dialog-buttonpane')
|
||||
);
|
||||
|
||||
dialouge.parent().find('.ui-dialog-title').html( dte.dom.header.innerHTML );
|
||||
dialouge.parent().addClass('DTED');
|
||||
|
||||
// Modify the Editor buttons to be jQuery UI suitable
|
||||
var buttons = $(dte.dom.buttons)
|
||||
.children()
|
||||
.addClass( 'ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only' )
|
||||
.each( function () {
|
||||
$(this).wrapInner( '<span class="ui-button-text"></span>' );
|
||||
} );
|
||||
|
||||
// Move the buttons into the jQuery UI button set
|
||||
dialouge.parent().find('div.ui-dialog-buttonset')
|
||||
.children()
|
||||
.detach();
|
||||
|
||||
dialouge.parent().find('div.ui-dialog-buttonset')
|
||||
.append( buttons.parent() );
|
||||
|
||||
dialouge
|
||||
.parent()
|
||||
.find('button.ui-dialog-titlebar-close')
|
||||
.off('click.dte-ju')
|
||||
.on('click.dte-ju', function () {
|
||||
dte.close('icon');
|
||||
});
|
||||
|
||||
// Need to know when the dialogue is closed using its own trigger
|
||||
// so we can reset the form
|
||||
$(dialouge)
|
||||
.off( 'dialogclose.dte-ju' )
|
||||
.on( 'dialogclose.dte-ju', function (e) {
|
||||
if ( ! doingClose ) {
|
||||
dte.close();
|
||||
}
|
||||
} );
|
||||
|
||||
shown = true;
|
||||
|
||||
if ( callback ) {
|
||||
callback();
|
||||
}
|
||||
},
|
||||
|
||||
close: function ( dte, callback ) {
|
||||
if ( dialouge ) {
|
||||
// Don't want to trigger a close() call from dialogclose!
|
||||
doingClose = true;
|
||||
dialouge.dialog( 'close' );
|
||||
doingClose = false;
|
||||
}
|
||||
|
||||
shown = false;
|
||||
|
||||
if ( callback ) {
|
||||
callback();
|
||||
}
|
||||
},
|
||||
|
||||
node: function ( dte ) {
|
||||
return dialouge[0];
|
||||
},
|
||||
|
||||
// jQuery UI dialogues perform their own focus capture
|
||||
captureFocus: false
|
||||
} );
|
||||
|
||||
|
||||
Editor.display.jqueryui.modalOptions = {
|
||||
width: 600,
|
||||
modal: true
|
||||
};
|
||||
|
||||
|
||||
export default Editor;
|
||||
@ -1,256 +0,0 @@
|
||||
/*! Semantic UI integration for DataTables' Editor
|
||||
* © SpryMedia Ltd - datatables.net/license
|
||||
*/
|
||||
|
||||
(function( factory ){
|
||||
if ( typeof define === 'function' && define.amd ) {
|
||||
// AMD
|
||||
define( ['jquery', 'datatables.net-se', 'datatables.net-editor'], function ( $ ) {
|
||||
return factory( $, window, document );
|
||||
} );
|
||||
}
|
||||
else if ( typeof exports === 'object' ) {
|
||||
// CommonJS
|
||||
var jq = require('jquery');
|
||||
var cjsRequires = function (root, $) {
|
||||
if ( ! $.fn.dataTable ) {
|
||||
require('datatables.net-se')(root, $);
|
||||
}
|
||||
|
||||
if ( ! $.fn.dataTable.Editor ) {
|
||||
require('datatables.net-editor')(root, $);
|
||||
}
|
||||
};
|
||||
|
||||
if (typeof window === 'undefined') {
|
||||
module.exports = function (root, $) {
|
||||
if ( ! root ) {
|
||||
// CommonJS environments without a window global must pass a
|
||||
// root. This will give an error otherwise
|
||||
root = window;
|
||||
}
|
||||
|
||||
if ( ! $ ) {
|
||||
$ = jq( root );
|
||||
}
|
||||
|
||||
cjsRequires( root, $ );
|
||||
return factory( $, root, root.document );
|
||||
};
|
||||
}
|
||||
else {
|
||||
cjsRequires( window, jq );
|
||||
module.exports = factory( jq, window, window.document );
|
||||
}
|
||||
}
|
||||
else {
|
||||
// Browser
|
||||
factory( jQuery, window, document );
|
||||
}
|
||||
}(function( $, window, document, undefined ) {
|
||||
'use strict';
|
||||
var DataTable = $.fn.dataTable;
|
||||
|
||||
|
||||
|
||||
var Editor = DataTable.Editor;
|
||||
|
||||
/*
|
||||
* Set the default display controller to be Semantic UI modal
|
||||
*/
|
||||
DataTable.Editor.defaults.display = "semanticui";
|
||||
|
||||
/*
|
||||
* Change the default classes from Editor to be classes for Bootstrap
|
||||
*/
|
||||
$.extend( true, $.fn.dataTable.Editor.classes, {
|
||||
"header": {
|
||||
"wrapper": "DTE_Header header"
|
||||
},
|
||||
"body": {
|
||||
"wrapper": "DTE_Body content"
|
||||
},
|
||||
"footer": {
|
||||
"wrapper": "DTE_Footer actions"
|
||||
},
|
||||
"form": {
|
||||
"tag": "ui form",
|
||||
"button": "ui button",
|
||||
"buttonInternal": "ui button",
|
||||
"content": 'DTE_Form_Content'
|
||||
},
|
||||
"field": {
|
||||
"wrapper": "DTE_Field inline fields",
|
||||
"label": "right aligned five wide field",
|
||||
"input": "eight wide field DTE_Field_Input",
|
||||
|
||||
"error": "error has-error",
|
||||
"msg-labelInfo": "ui small",
|
||||
"msg-info": "ui small",
|
||||
"msg-message": "ui message small",
|
||||
"msg-error": "ui error message small",
|
||||
"multiValue": "ui message multi-value",
|
||||
"multiInfo": "small",
|
||||
"multiRestore": "ui message multi-restore"
|
||||
},
|
||||
inline: {
|
||||
wrapper: "DTE DTE_Inline ui form"
|
||||
},
|
||||
bubble: {
|
||||
table: "DTE_Bubble_Table ui form",
|
||||
bg: "ui dimmer modals page transition visible active"
|
||||
}
|
||||
} );
|
||||
|
||||
|
||||
$.extend( true, DataTable.ext.buttons, {
|
||||
create: {
|
||||
formButtons: {
|
||||
className: 'primary'
|
||||
}
|
||||
},
|
||||
edit: {
|
||||
formButtons: {
|
||||
className: 'primary'
|
||||
}
|
||||
},
|
||||
remove: {
|
||||
formButtons: {
|
||||
className: 'negative'
|
||||
}
|
||||
}
|
||||
} );
|
||||
|
||||
DataTable.Editor.fieldTypes.datatable.tableClass = 'ui table';
|
||||
|
||||
/*
|
||||
* Bootstrap display controller - this is effectively a proxy to the Bootstrap
|
||||
* modal control.
|
||||
*/
|
||||
|
||||
// Single shared model for all Editor instances
|
||||
const dom = {
|
||||
modal: $('<div class="ui modal DTED"></div>'),
|
||||
close: $('<i class="close icon"/>')
|
||||
}
|
||||
let shown = false;
|
||||
let lastAppend;
|
||||
|
||||
DataTable.Editor.display.semanticui = $.extend( true, {}, DataTable.Editor.models.displayController, {
|
||||
/*
|
||||
* API methods
|
||||
*/
|
||||
init: function ( dte ) {
|
||||
// Make select lists semantic ui dropdowns if possible
|
||||
if ($.fn.dropdown) {
|
||||
dte.on( 'displayOrder.dtesu open.dtesu', function ( e, display, action, form ) {
|
||||
$.each( dte.s.fields, function ( key, field ) {
|
||||
$('select', field.node())
|
||||
.addClass('fluid')
|
||||
.dropdown();
|
||||
} );
|
||||
} );
|
||||
}
|
||||
|
||||
return DataTable.Editor.display.semanticui;
|
||||
},
|
||||
|
||||
open: function ( dte, append, callback ) {
|
||||
var modal = dom.modal;
|
||||
var appendChildren = $(append).children();
|
||||
|
||||
// Because we can't use a single element, we need to insert the existing
|
||||
// children back into their previous host so that can be reused later
|
||||
if (lastAppend) {
|
||||
modal.children().appendTo(lastAppend);
|
||||
}
|
||||
|
||||
lastAppend = append;
|
||||
|
||||
// Clean up any existing elements and then insert the elements to
|
||||
// display. In Semantic UI we need to have the header, content and
|
||||
// actions at the top level of the modal rather than as children of a
|
||||
// wrapper.
|
||||
modal
|
||||
.children()
|
||||
.detach();
|
||||
|
||||
modal
|
||||
.append( appendChildren )
|
||||
.prepend( modal.children('.header') ) // order is important
|
||||
.addClass( append.className )
|
||||
.prepend( dom.close );
|
||||
|
||||
dom.close
|
||||
.attr('title', dte.i18n.close)
|
||||
.off( 'click.dte-se' )
|
||||
.on( 'click.dte-se', function (e) {
|
||||
dte.close('icon');
|
||||
return false;
|
||||
} );
|
||||
|
||||
$(document)
|
||||
.off('click.dte-se')
|
||||
.on('click.dte-se', 'div.ui.dimmer.modals', function (e) {
|
||||
if ( $(e.target).hasClass('dimmer') ) {
|
||||
dte.background();
|
||||
}
|
||||
} );
|
||||
|
||||
if ( shown ) {
|
||||
if ( callback ) {
|
||||
callback();
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
shown = true;
|
||||
|
||||
$(modal)
|
||||
.modal( 'setting', {
|
||||
autofocus: false,
|
||||
closable: false,
|
||||
onVisible: function () {
|
||||
// Can only give elements focus when shown
|
||||
if ( dte.s.setFocus ) {
|
||||
dte.s.setFocus.focus();
|
||||
}
|
||||
|
||||
if ( callback ) {
|
||||
callback();
|
||||
}
|
||||
},
|
||||
onHidden: function () {
|
||||
$(append).append( appendChildren );
|
||||
shown = false;
|
||||
}
|
||||
} )
|
||||
.modal( 'show' );
|
||||
},
|
||||
|
||||
close: function ( dte, callback ) {
|
||||
if ( ! shown ) {
|
||||
if ( callback ) {
|
||||
callback();
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
dom.modal.modal('hide');
|
||||
|
||||
lastAppend = null;
|
||||
shown = false;
|
||||
|
||||
if ( callback ) {
|
||||
callback();
|
||||
}
|
||||
},
|
||||
|
||||
node: function ( dte ) {
|
||||
return dom.modal[0];
|
||||
}
|
||||
} );
|
||||
|
||||
|
||||
return Editor;
|
||||
}));
|
||||
@ -1,4 +0,0 @@
|
||||
/*! Semantic UI integration for DataTables' Editor
|
||||
* © SpryMedia Ltd - datatables.net/license
|
||||
*/
|
||||
!function(n){var o,i;"function"==typeof define&&define.amd?define(["jquery","datatables.net-se","datatables.net-editor"],function(e){return n(e,window,document)}):"object"==typeof exports?(o=require("jquery"),i=function(e,t){t.fn.dataTable||require("datatables.net-se")(e,t),t.fn.dataTable.Editor||require("datatables.net-editor")(e,t)},"undefined"==typeof window?module.exports=function(e,t){return e=e||window,t=t||o(e),i(e,t),n(t,0,e.document)}:(i(window,o),module.exports=n(o,window,window.document))):n(jQuery,window,document)}(function(a,e,d,t){"use strict";var n=a.fn.dataTable,o=n.Editor;n.Editor.defaults.display="semanticui",a.extend(!0,a.fn.dataTable.Editor.classes,{header:{wrapper:"DTE_Header header"},body:{wrapper:"DTE_Body content"},footer:{wrapper:"DTE_Footer actions"},form:{tag:"ui form",button:"ui button",buttonInternal:"ui button",content:"DTE_Form_Content"},field:{wrapper:"DTE_Field inline fields",label:"right aligned five wide field",input:"eight wide field DTE_Field_Input",error:"error has-error","msg-labelInfo":"ui small","msg-info":"ui small","msg-message":"ui message small","msg-error":"ui error message small",multiValue:"ui message multi-value",multiInfo:"small",multiRestore:"ui message multi-restore"},inline:{wrapper:"DTE DTE_Inline ui form"},bubble:{table:"DTE_Bubble_Table ui form",bg:"ui dimmer modals page transition visible active"}}),a.extend(!0,n.ext.buttons,{create:{formButtons:{className:"primary"}},edit:{formButtons:{className:"primary"}},remove:{formButtons:{className:"negative"}}}),n.Editor.fieldTypes.datatable.tableClass="ui table";const r={modal:a('<div class="ui modal DTED"></div>'),close:a('<i class="close icon"/>')};let s=!1,l;return n.Editor.display.semanticui=a.extend(!0,{},n.Editor.models.displayController,{init:function(i){return a.fn.dropdown&&i.on("displayOrder.dtesu open.dtesu",function(e,t,n,o){a.each(i.s.fields,function(e,t){a("select",t.node()).addClass("fluid").dropdown()})}),n.Editor.display.semanticui},open:function(t,e,n){var o=r.modal,i=a(e).children();l&&o.children().appendTo(l),l=e,o.children().detach(),o.append(i).prepend(o.children(".header")).addClass(e.className).prepend(r.close),r.close.attr("title",t.i18n.close).off("click.dte-se").on("click.dte-se",function(e){return t.close("icon"),!1}),a(d).off("click.dte-se").on("click.dte-se","div.ui.dimmer.modals",function(e){a(e.target).hasClass("dimmer")&&t.background()}),s?n&&n():(s=!0,a(o).modal("setting",{autofocus:!1,closable:!1,onVisible:function(){t.s.setFocus&&t.s.setFocus.focus(),n&&n()},onHidden:function(){a(e).append(i),s=!1}}).modal("show"))},close:function(e,t){s&&(r.modal.modal("hide"),l=null,s=!1),t&&t()},node:function(e){return r.modal[0]}}),o});
|
||||
@ -1,4 +0,0 @@
|
||||
/*! Semantic UI integration for DataTables' Editor
|
||||
* © SpryMedia Ltd - datatables.net/license
|
||||
*/
|
||||
import jQuery from"jquery";import DataTable from"datatables.net-se";import Editor from"datatables.net-editor";let $=jQuery;var Editor=DataTable.Editor;DataTable.Editor.defaults.display="semanticui",$.extend(!0,$.fn.dataTable.Editor.classes,{header:{wrapper:"DTE_Header header"},body:{wrapper:"DTE_Body content"},footer:{wrapper:"DTE_Footer actions"},form:{tag:"ui form",button:"ui button",buttonInternal:"ui button",content:"DTE_Form_Content"},field:{wrapper:"DTE_Field inline fields",label:"right aligned five wide field",input:"eight wide field DTE_Field_Input",error:"error has-error","msg-labelInfo":"ui small","msg-info":"ui small","msg-message":"ui message small","msg-error":"ui error message small",multiValue:"ui message multi-value",multiInfo:"small",multiRestore:"ui message multi-restore"},inline:{wrapper:"DTE DTE_Inline ui form"},bubble:{table:"DTE_Bubble_Table ui form",bg:"ui dimmer modals page transition visible active"}}),$.extend(!0,DataTable.ext.buttons,{create:{formButtons:{className:"primary"}},edit:{formButtons:{className:"primary"}},remove:{formButtons:{className:"negative"}}}),DataTable.Editor.fieldTypes.datatable.tableClass="ui table";const dom={modal:$('<div class="ui modal DTED"></div>'),close:$('<i class="close icon"/>')};let shown=!1,lastAppend;DataTable.Editor.display.semanticui=$.extend(!0,{},DataTable.Editor.models.displayController,{init:function(l){return $.fn.dropdown&&l.on("displayOrder.dtesu open.dtesu",function(e,t,a,o){$.each(l.s.fields,function(e,t){$("select",t.node()).addClass("fluid").dropdown()})}),DataTable.Editor.display.semanticui},open:function(t,e,a){var o=dom.modal,l=$(e).children();lastAppend&&o.children().appendTo(lastAppend),lastAppend=e,o.children().detach(),o.append(l).prepend(o.children(".header")).addClass(e.className).prepend(dom.close),dom.close.attr("title",t.i18n.close).off("click.dte-se").on("click.dte-se",function(e){return t.close("icon"),!1}),$(document).off("click.dte-se").on("click.dte-se","div.ui.dimmer.modals",function(e){$(e.target).hasClass("dimmer")&&t.background()}),shown?a&&a():(shown=!0,$(o).modal("setting",{autofocus:!1,closable:!1,onVisible:function(){t.s.setFocus&&t.s.setFocus.focus(),a&&a()},onHidden:function(){$(e).append(l),shown=!1}}).modal("show"))},close:function(e,t){shown&&(dom.modal.modal("hide"),lastAppend=null,shown=!1),t&&t()},node:function(e){return dom.modal[0]}});export default Editor;
|
||||
@ -1,212 +0,0 @@
|
||||
/*! Semantic UI integration for DataTables' Editor
|
||||
* © SpryMedia Ltd - datatables.net/license
|
||||
*/
|
||||
|
||||
import jQuery from 'jquery';
|
||||
import DataTable from 'datatables.net-se';
|
||||
import Editor from 'datatables.net-editor';
|
||||
|
||||
// Allow reassignment of the $ variable
|
||||
let $ = jQuery;
|
||||
|
||||
|
||||
var Editor = DataTable.Editor;
|
||||
|
||||
/*
|
||||
* Set the default display controller to be Semantic UI modal
|
||||
*/
|
||||
DataTable.Editor.defaults.display = "semanticui";
|
||||
|
||||
/*
|
||||
* Change the default classes from Editor to be classes for Bootstrap
|
||||
*/
|
||||
$.extend( true, $.fn.dataTable.Editor.classes, {
|
||||
"header": {
|
||||
"wrapper": "DTE_Header header"
|
||||
},
|
||||
"body": {
|
||||
"wrapper": "DTE_Body content"
|
||||
},
|
||||
"footer": {
|
||||
"wrapper": "DTE_Footer actions"
|
||||
},
|
||||
"form": {
|
||||
"tag": "ui form",
|
||||
"button": "ui button",
|
||||
"buttonInternal": "ui button",
|
||||
"content": 'DTE_Form_Content'
|
||||
},
|
||||
"field": {
|
||||
"wrapper": "DTE_Field inline fields",
|
||||
"label": "right aligned five wide field",
|
||||
"input": "eight wide field DTE_Field_Input",
|
||||
|
||||
"error": "error has-error",
|
||||
"msg-labelInfo": "ui small",
|
||||
"msg-info": "ui small",
|
||||
"msg-message": "ui message small",
|
||||
"msg-error": "ui error message small",
|
||||
"multiValue": "ui message multi-value",
|
||||
"multiInfo": "small",
|
||||
"multiRestore": "ui message multi-restore"
|
||||
},
|
||||
inline: {
|
||||
wrapper: "DTE DTE_Inline ui form"
|
||||
},
|
||||
bubble: {
|
||||
table: "DTE_Bubble_Table ui form",
|
||||
bg: "ui dimmer modals page transition visible active"
|
||||
}
|
||||
} );
|
||||
|
||||
|
||||
$.extend( true, DataTable.ext.buttons, {
|
||||
create: {
|
||||
formButtons: {
|
||||
className: 'primary'
|
||||
}
|
||||
},
|
||||
edit: {
|
||||
formButtons: {
|
||||
className: 'primary'
|
||||
}
|
||||
},
|
||||
remove: {
|
||||
formButtons: {
|
||||
className: 'negative'
|
||||
}
|
||||
}
|
||||
} );
|
||||
|
||||
DataTable.Editor.fieldTypes.datatable.tableClass = 'ui table';
|
||||
|
||||
/*
|
||||
* Bootstrap display controller - this is effectively a proxy to the Bootstrap
|
||||
* modal control.
|
||||
*/
|
||||
|
||||
// Single shared model for all Editor instances
|
||||
const dom = {
|
||||
modal: $('<div class="ui modal DTED"></div>'),
|
||||
close: $('<i class="close icon"/>')
|
||||
}
|
||||
let shown = false;
|
||||
let lastAppend;
|
||||
|
||||
DataTable.Editor.display.semanticui = $.extend( true, {}, DataTable.Editor.models.displayController, {
|
||||
/*
|
||||
* API methods
|
||||
*/
|
||||
init: function ( dte ) {
|
||||
// Make select lists semantic ui dropdowns if possible
|
||||
if ($.fn.dropdown) {
|
||||
dte.on( 'displayOrder.dtesu open.dtesu', function ( e, display, action, form ) {
|
||||
$.each( dte.s.fields, function ( key, field ) {
|
||||
$('select', field.node())
|
||||
.addClass('fluid')
|
||||
.dropdown();
|
||||
} );
|
||||
} );
|
||||
}
|
||||
|
||||
return DataTable.Editor.display.semanticui;
|
||||
},
|
||||
|
||||
open: function ( dte, append, callback ) {
|
||||
var modal = dom.modal;
|
||||
var appendChildren = $(append).children();
|
||||
|
||||
// Because we can't use a single element, we need to insert the existing
|
||||
// children back into their previous host so that can be reused later
|
||||
if (lastAppend) {
|
||||
modal.children().appendTo(lastAppend);
|
||||
}
|
||||
|
||||
lastAppend = append;
|
||||
|
||||
// Clean up any existing elements and then insert the elements to
|
||||
// display. In Semantic UI we need to have the header, content and
|
||||
// actions at the top level of the modal rather than as children of a
|
||||
// wrapper.
|
||||
modal
|
||||
.children()
|
||||
.detach();
|
||||
|
||||
modal
|
||||
.append( appendChildren )
|
||||
.prepend( modal.children('.header') ) // order is important
|
||||
.addClass( append.className )
|
||||
.prepend( dom.close );
|
||||
|
||||
dom.close
|
||||
.attr('title', dte.i18n.close)
|
||||
.off( 'click.dte-se' )
|
||||
.on( 'click.dte-se', function (e) {
|
||||
dte.close('icon');
|
||||
return false;
|
||||
} );
|
||||
|
||||
$(document)
|
||||
.off('click.dte-se')
|
||||
.on('click.dte-se', 'div.ui.dimmer.modals', function (e) {
|
||||
if ( $(e.target).hasClass('dimmer') ) {
|
||||
dte.background();
|
||||
}
|
||||
} );
|
||||
|
||||
if ( shown ) {
|
||||
if ( callback ) {
|
||||
callback();
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
shown = true;
|
||||
|
||||
$(modal)
|
||||
.modal( 'setting', {
|
||||
autofocus: false,
|
||||
closable: false,
|
||||
onVisible: function () {
|
||||
// Can only give elements focus when shown
|
||||
if ( dte.s.setFocus ) {
|
||||
dte.s.setFocus.focus();
|
||||
}
|
||||
|
||||
if ( callback ) {
|
||||
callback();
|
||||
}
|
||||
},
|
||||
onHidden: function () {
|
||||
$(append).append( appendChildren );
|
||||
shown = false;
|
||||
}
|
||||
} )
|
||||
.modal( 'show' );
|
||||
},
|
||||
|
||||
close: function ( dte, callback ) {
|
||||
if ( ! shown ) {
|
||||
if ( callback ) {
|
||||
callback();
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
dom.modal.modal('hide');
|
||||
|
||||
lastAppend = null;
|
||||
shown = false;
|
||||
|
||||
if ( callback ) {
|
||||
callback();
|
||||
}
|
||||
},
|
||||
|
||||
node: function ( dte ) {
|
||||
return dom.modal[0];
|
||||
}
|
||||
} );
|
||||
|
||||
|
||||
export default Editor;
|
||||
@ -1,504 +0,0 @@
|
||||
/**
|
||||
* Block UI (jquery)
|
||||
*/
|
||||
|
||||
'use strict';
|
||||
|
||||
$(function () {
|
||||
var section = $('#section-block'),
|
||||
sectionBlock = $('.btn-section-block'),
|
||||
sectionBlockOverlay = $('.btn-section-block-overlay'),
|
||||
sectionBlockSpinner = $('.btn-section-block-spinner'),
|
||||
sectionBlockCustom = $('.btn-section-block-custom'),
|
||||
sectionBlockMultiple = $('.btn-section-block-multiple'),
|
||||
cardSection = $('#card-block'),
|
||||
cardBlock = $('.btn-card-block'),
|
||||
cardBlockOverlay = $('.btn-card-block-overlay'),
|
||||
cardBlockSpinner = $('.btn-card-block-spinner'),
|
||||
cardBlockCustom = $('.btn-card-block-custom'),
|
||||
cardBlockMultiple = $('.btn-card-block-multiple'),
|
||||
pageBlock = $('.btn-page-block'),
|
||||
pageBlockOverlay = $('.btn-page-block-overlay'),
|
||||
pageBlockSpinner = $('.btn-page-block-spinner'),
|
||||
pageBlockCustom = $('.btn-page-block-custom'),
|
||||
pageBlockMultiple = $('.btn-page-block-multiple'),
|
||||
formSection = $('.form-block'),
|
||||
formBlock = $('.btn-form-block'),
|
||||
formBlockOverlay = $('.btn-form-block-overlay'),
|
||||
formBlockSpinner = $('.btn-form-block-spinner'),
|
||||
formBlockCustom = $('.btn-form-block-custom'),
|
||||
formBlockMultiple = $('.btn-form-block-multiple');
|
||||
|
||||
// Block UI
|
||||
// --------------------------------------------------------------------
|
||||
|
||||
// Default
|
||||
if (sectionBlock.length && section.length) {
|
||||
sectionBlock.on('click', function () {
|
||||
$('#section-block').block({
|
||||
message: '<div class="spinner-border text-white" role="status"></div>',
|
||||
timeout: 1000,
|
||||
css: {
|
||||
backgroundColor: 'transparent',
|
||||
border: '0'
|
||||
},
|
||||
overlayCSS: {
|
||||
opacity: 0.5
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
// Overlay Color
|
||||
if (sectionBlockOverlay.length && section.length) {
|
||||
sectionBlockOverlay.on('click', function () {
|
||||
$('#section-block').block({
|
||||
message: '<div class="spinner-border text-primary" role="status"></div>',
|
||||
timeout: 1000,
|
||||
css: {
|
||||
backgroundColor: 'transparent',
|
||||
border: '0'
|
||||
},
|
||||
overlayCSS: {
|
||||
backgroundColor: '#fff',
|
||||
opacity: 0.8
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
// Custom Spinner
|
||||
if (sectionBlockSpinner.length && section.length) {
|
||||
sectionBlockSpinner.on('click', function () {
|
||||
$('#section-block').block({
|
||||
message:
|
||||
'<div class="sk-wave mx-auto"><div class="sk-rect sk-wave-rect"></div> <div class="sk-rect sk-wave-rect"></div> <div class="sk-rect sk-wave-rect"></div> <div class="sk-rect sk-wave-rect"></div> <div class="sk-rect sk-wave-rect"></div></div>',
|
||||
timeout: 1000,
|
||||
css: {
|
||||
backgroundColor: 'transparent',
|
||||
border: '0'
|
||||
},
|
||||
overlayCSS: {
|
||||
opacity: 0.5
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
// Custom Message
|
||||
if (sectionBlockCustom.length && section.length) {
|
||||
sectionBlockCustom.on('click', function () {
|
||||
$('#section-block').block({
|
||||
message:
|
||||
'<div class="d-flex justify-content-center"><p class="mb-0">Please wait...</p> <div class="sk-wave m-0"><div class="sk-rect sk-wave-rect"></div> <div class="sk-rect sk-wave-rect"></div> <div class="sk-rect sk-wave-rect"></div> <div class="sk-rect sk-wave-rect"></div> <div class="sk-rect sk-wave-rect"></div></div> </div>',
|
||||
timeout: 1000,
|
||||
css: {
|
||||
backgroundColor: 'transparent',
|
||||
color: '#fff',
|
||||
border: '0'
|
||||
},
|
||||
overlayCSS: {
|
||||
opacity: 0.5
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
// Multiple Message
|
||||
if (sectionBlockMultiple.length && section.length) {
|
||||
sectionBlockMultiple.on('click', function () {
|
||||
$('#section-block').block({
|
||||
message:
|
||||
'<div class="d-flex justify-content-center"><p class="mb-0">Please wait...</p> <div class="sk-wave m-0"><div class="sk-rect sk-wave-rect"></div> <div class="sk-rect sk-wave-rect"></div> <div class="sk-rect sk-wave-rect"></div> <div class="sk-rect sk-wave-rect"></div> <div class="sk-rect sk-wave-rect"></div></div> </div>',
|
||||
css: {
|
||||
backgroundColor: 'transparent',
|
||||
color: '#fff',
|
||||
border: '0'
|
||||
},
|
||||
overlayCSS: {
|
||||
opacity: 0.5
|
||||
},
|
||||
timeout: 1000,
|
||||
onUnblock: function () {
|
||||
$('#section-block').block({
|
||||
message: '<p class="mb-0">Almost Done...</p>',
|
||||
timeout: 1000,
|
||||
css: {
|
||||
backgroundColor: 'transparent',
|
||||
color: '#fff',
|
||||
border: '0'
|
||||
},
|
||||
overlayCSS: {
|
||||
opacity: 0.25
|
||||
},
|
||||
onUnblock: function () {
|
||||
$('#section-block').block({
|
||||
message: '<div class="p-3 bg-success">Success</div>',
|
||||
timeout: 500,
|
||||
css: {
|
||||
backgroundColor: 'transparent',
|
||||
color: '#fff',
|
||||
border: '0'
|
||||
},
|
||||
overlayCSS: {
|
||||
opacity: 0.25
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// Card Blocking
|
||||
// --------------------------------------------------------------------
|
||||
|
||||
// Default
|
||||
if (cardBlock.length && cardSection.length) {
|
||||
cardBlock.on('click', function () {
|
||||
$('#card-block').block({
|
||||
message: '<div class="spinner-border text-white" role="status"></div>',
|
||||
timeout: 1000,
|
||||
css: {
|
||||
backgroundColor: 'transparent',
|
||||
border: '0'
|
||||
},
|
||||
overlayCSS: {
|
||||
opacity: 0.5
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
// Overlay Color
|
||||
if (cardBlockOverlay.length && cardSection.length) {
|
||||
cardBlockOverlay.on('click', function () {
|
||||
$('#card-block').block({
|
||||
message: '<div class="spinner-border text-primary" role="status"></div>',
|
||||
timeout: 1000,
|
||||
css: {
|
||||
backgroundColor: 'transparent',
|
||||
border: '0'
|
||||
},
|
||||
overlayCSS: {
|
||||
backgroundColor: '#fff',
|
||||
opacity: 0.8
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
// Custom Spinner
|
||||
if (cardBlockSpinner.length && cardSection.length) {
|
||||
cardBlockSpinner.on('click', function () {
|
||||
$('#card-block').block({
|
||||
message:
|
||||
'<div class="sk-wave mx-auto"><div class="sk-rect sk-wave-rect"></div> <div class="sk-rect sk-wave-rect"></div> <div class="sk-rect sk-wave-rect"></div> <div class="sk-rect sk-wave-rect"></div> <div class="sk-rect sk-wave-rect"></div></div>',
|
||||
timeout: 1000,
|
||||
css: {
|
||||
backgroundColor: 'transparent',
|
||||
color: '#fff',
|
||||
border: '0'
|
||||
},
|
||||
overlayCSS: {
|
||||
opacity: 0.5
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
// Custom Message
|
||||
if (cardBlockCustom.length && cardSection.length) {
|
||||
cardBlockCustom.on('click', function () {
|
||||
$('#card-block').block({
|
||||
message:
|
||||
'<div class="d-flex justify-content-center"><p class="mb-0">Please wait...</p> <div class="sk-wave m-0"><div class="sk-rect sk-wave-rect"></div> <div class="sk-rect sk-wave-rect"></div> <div class="sk-rect sk-wave-rect"></div> <div class="sk-rect sk-wave-rect"></div> <div class="sk-rect sk-wave-rect"></div></div> </div>',
|
||||
timeout: 1000,
|
||||
css: {
|
||||
backgroundColor: 'transparent',
|
||||
color: '#fff',
|
||||
border: '0'
|
||||
},
|
||||
overlayCSS: {
|
||||
opacity: 0.5
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
// Multiple Message
|
||||
if (cardBlockMultiple.length && cardSection.length) {
|
||||
cardBlockMultiple.on('click', function () {
|
||||
$('#card-block').block({
|
||||
message:
|
||||
'<div class="d-flex justify-content-center"><p class="mb-0">Please wait...</p> <div class="sk-wave m-0"><div class="sk-rect sk-wave-rect"></div> <div class="sk-rect sk-wave-rect"></div> <div class="sk-rect sk-wave-rect"></div> <div class="sk-rect sk-wave-rect"></div> <div class="sk-rect sk-wave-rect"></div></div> </div>',
|
||||
css: {
|
||||
backgroundColor: 'transparent',
|
||||
color: '#fff',
|
||||
border: '0'
|
||||
},
|
||||
overlayCSS: {
|
||||
opacity: 0.5
|
||||
},
|
||||
timeout: 1000,
|
||||
onUnblock: function () {
|
||||
$('#card-block').block({
|
||||
message: '<p class="mb-0">Almost Done...</p>',
|
||||
timeout: 1000,
|
||||
css: {
|
||||
backgroundColor: 'transparent',
|
||||
color: '#fff',
|
||||
border: '0'
|
||||
},
|
||||
overlayCSS: {
|
||||
opacity: 0.25
|
||||
},
|
||||
onUnblock: function () {
|
||||
$('#card-block').block({
|
||||
message: '<div class="p-3 bg-success">Success</div>',
|
||||
timeout: 500,
|
||||
css: {
|
||||
backgroundColor: 'transparent',
|
||||
color: '#fff',
|
||||
border: '0'
|
||||
},
|
||||
overlayCSS: {
|
||||
opacity: 0.25
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// Page Blocking
|
||||
// --------------------------------------------------------------------
|
||||
|
||||
// Default
|
||||
if (pageBlock.length) {
|
||||
pageBlock.on('click', function () {
|
||||
$.blockUI({
|
||||
message: '<div class="spinner-border text-white" role="status"></div>',
|
||||
timeout: 1000,
|
||||
css: {
|
||||
backgroundColor: 'transparent',
|
||||
border: '0'
|
||||
},
|
||||
overlayCSS: {
|
||||
opacity: 0.5
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
// Overlay Color
|
||||
if (pageBlockOverlay.length) {
|
||||
pageBlockOverlay.on('click', function () {
|
||||
$.blockUI({
|
||||
message: '<div class="spinner-border text-primary" role="status"></div>',
|
||||
timeout: 1000,
|
||||
css: {
|
||||
backgroundColor: 'transparent',
|
||||
border: '0'
|
||||
},
|
||||
overlayCSS: {
|
||||
backgroundColor: '#fff',
|
||||
opacity: 0.8
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
// Custom Spinner
|
||||
if (pageBlockSpinner.length) {
|
||||
pageBlockSpinner.on('click', function () {
|
||||
$.blockUI({
|
||||
message:
|
||||
'<div class="sk-wave mx-auto"><div class="sk-rect sk-wave-rect"></div> <div class="sk-rect sk-wave-rect"></div> <div class="sk-rect sk-wave-rect"></div> <div class="sk-rect sk-wave-rect"></div> <div class="sk-rect sk-wave-rect"></div></div>',
|
||||
timeout: 1000,
|
||||
css: {
|
||||
backgroundColor: 'transparent',
|
||||
border: '0'
|
||||
},
|
||||
overlayCSS: {
|
||||
opacity: 0.5
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
// Custom Message
|
||||
if (pageBlockCustom.length) {
|
||||
pageBlockCustom.on('click', function () {
|
||||
$.blockUI({
|
||||
message:
|
||||
'<div class="d-flex justify-content-center"><p class="mb-0">Please wait...</p> <div class="sk-wave m-0"><div class="sk-rect sk-wave-rect"></div> <div class="sk-rect sk-wave-rect"></div> <div class="sk-rect sk-wave-rect"></div> <div class="sk-rect sk-wave-rect"></div> <div class="sk-rect sk-wave-rect"></div></div> </div>',
|
||||
timeout: 1000,
|
||||
css: {
|
||||
backgroundColor: 'transparent',
|
||||
color: '#fff',
|
||||
border: '0'
|
||||
},
|
||||
overlayCSS: {
|
||||
opacity: 0.5
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
// Multiple Message
|
||||
if (pageBlockMultiple.length) {
|
||||
pageBlockMultiple.on('click', function () {
|
||||
$.blockUI({
|
||||
message:
|
||||
'<div class="d-flex justify-content-center"><p class="mb-0">Please wait...</p> <div class="sk-wave m-0"><div class="sk-rect sk-wave-rect"></div> <div class="sk-rect sk-wave-rect"></div> <div class="sk-rect sk-wave-rect"></div> <div class="sk-rect sk-wave-rect"></div> <div class="sk-rect sk-wave-rect"></div></div> </div>',
|
||||
css: {
|
||||
backgroundColor: 'transparent',
|
||||
color: '#fff',
|
||||
border: '0'
|
||||
},
|
||||
overlayCSS: {
|
||||
opacity: 0.5
|
||||
},
|
||||
timeout: 1000,
|
||||
onUnblock: function () {
|
||||
$.blockUI({
|
||||
message: '<p class="mb-0">Almost Done...</p>',
|
||||
timeout: 1000,
|
||||
css: {
|
||||
backgroundColor: 'transparent',
|
||||
color: '#fff',
|
||||
border: '0'
|
||||
},
|
||||
overlayCSS: {
|
||||
opacity: 0.5
|
||||
},
|
||||
onUnblock: function () {
|
||||
$.blockUI({
|
||||
message: '<div class="p-3 bg-success">Success</div>',
|
||||
timeout: 500,
|
||||
css: {
|
||||
backgroundColor: 'transparent',
|
||||
color: '#fff',
|
||||
border: '0'
|
||||
},
|
||||
overlayCSS: {
|
||||
opacity: 0.5
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// Form Blocking
|
||||
// --------------------------------------------------------------------
|
||||
|
||||
// Default
|
||||
if (formBlock.length && formSection.length) {
|
||||
formBlock.on('click', function () {
|
||||
formSection.block({
|
||||
message: '<div class="spinner-border text-white" role="status"></div>',
|
||||
timeout: 1000,
|
||||
css: {
|
||||
backgroundColor: 'transparent',
|
||||
color: '#fff',
|
||||
border: '0'
|
||||
},
|
||||
overlayCSS: {
|
||||
opacity: 0.5
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
// Overlay Color
|
||||
if (formBlockOverlay.length && formSection.length) {
|
||||
formBlockOverlay.on('click', function () {
|
||||
formSection.block({
|
||||
message: '<div class="spinner-border text-primary" role="status"></div>',
|
||||
timeout: 1000,
|
||||
css: {
|
||||
backgroundColor: 'transparent',
|
||||
border: '0'
|
||||
},
|
||||
overlayCSS: {
|
||||
backgroundColor: '#fff',
|
||||
opacity: 0.8
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
// Custom Spinner
|
||||
if (formBlockSpinner.length && formSection.length) {
|
||||
formBlockSpinner.on('click', function () {
|
||||
formSection.block({
|
||||
message:
|
||||
'<div class="sk-wave mx-auto"><div class="sk-rect sk-wave-rect"></div> <div class="sk-rect sk-wave-rect"></div> <div class="sk-rect sk-wave-rect"></div> <div class="sk-rect sk-wave-rect"></div> <div class="sk-rect sk-wave-rect"></div></div>',
|
||||
timeout: 1000,
|
||||
css: {
|
||||
backgroundColor: 'transparent',
|
||||
color: '#fff',
|
||||
border: '0'
|
||||
},
|
||||
overlayCSS: {
|
||||
opacity: 0.5
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
// Custom Message
|
||||
if (formBlockCustom.length && formSection.length) {
|
||||
formBlockCustom.on('click', function () {
|
||||
formSection.block({
|
||||
message:
|
||||
'<div class="d-flex justify-content-center"><p class="mb-0">Please wait...</p> <div class="sk-wave m-0"><div class="sk-rect sk-wave-rect"></div> <div class="sk-rect sk-wave-rect"></div> <div class="sk-rect sk-wave-rect"></div> <div class="sk-rect sk-wave-rect"></div> <div class="sk-rect sk-wave-rect"></div></div> </div>',
|
||||
timeout: 1000,
|
||||
css: {
|
||||
backgroundColor: 'transparent',
|
||||
color: '#fff',
|
||||
border: '0'
|
||||
},
|
||||
overlayCSS: {
|
||||
opacity: 0.5
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
// Multiple Message
|
||||
if (formBlockMultiple.length && formSection.length) {
|
||||
formBlockMultiple.on('click', function () {
|
||||
formSection.block({
|
||||
message:
|
||||
'<div class="d-flex justify-content-center"><p class="mb-0">Please wait...</p> <div class="sk-wave m-0"><div class="sk-rect sk-wave-rect"></div> <div class="sk-rect sk-wave-rect"></div> <div class="sk-rect sk-wave-rect"></div> <div class="sk-rect sk-wave-rect"></div> <div class="sk-rect sk-wave-rect"></div></div> </div>',
|
||||
css: {
|
||||
backgroundColor: 'transparent',
|
||||
color: '#fff',
|
||||
border: '0'
|
||||
},
|
||||
overlayCSS: {
|
||||
opacity: 0.5
|
||||
},
|
||||
timeout: 1000,
|
||||
onUnblock: function () {
|
||||
formSection.block({
|
||||
message: '<p class="mb-0">Almost Done...</p>',
|
||||
timeout: 1000,
|
||||
css: {
|
||||
backgroundColor: 'transparent',
|
||||
border: '0'
|
||||
},
|
||||
overlayCSS: {
|
||||
opacity: 0.25
|
||||
},
|
||||
onUnblock: function () {
|
||||
formSection.block({
|
||||
message: '<div class="p-3 bg-success">Success</div>',
|
||||
timeout: 500,
|
||||
css: {
|
||||
backgroundColor: 'transparent',
|
||||
border: '0'
|
||||
},
|
||||
overlayCSS: {
|
||||
opacity: 0.25
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
});
|
||||
@ -1,92 +0,0 @@
|
||||
/**
|
||||
* Drag & Drop
|
||||
*/
|
||||
'use strict';
|
||||
|
||||
(function () {
|
||||
const cardEl = document.getElementById('sortable-cards'),
|
||||
pendingTasks = document.getElementById('pending-tasks'),
|
||||
completedTasks = document.getElementById('completed-tasks'),
|
||||
cloneSource1 = document.getElementById('clone-source-1'),
|
||||
cloneSource2 = document.getElementById('clone-source-2'),
|
||||
handleList1 = document.getElementById('handle-list-1'),
|
||||
handleList2 = document.getElementById('handle-list-2'),
|
||||
imageList1 = document.getElementById('image-list-1'),
|
||||
imageList2 = document.getElementById('image-list-2');
|
||||
|
||||
// Cards
|
||||
// --------------------------------------------------------------------
|
||||
if (cardEl) {
|
||||
Sortable.create(cardEl);
|
||||
}
|
||||
|
||||
// Images
|
||||
// --------------------------------------------------------------------
|
||||
if (imageList1) {
|
||||
Sortable.create(imageList1, {
|
||||
animation: 150,
|
||||
group: 'imgList'
|
||||
});
|
||||
}
|
||||
if (imageList2) {
|
||||
Sortable.create(imageList2, {
|
||||
animation: 150,
|
||||
group: 'imgList'
|
||||
});
|
||||
}
|
||||
|
||||
// Cloning
|
||||
// --------------------------------------------------------------------
|
||||
if (cloneSource1) {
|
||||
Sortable.create(cloneSource1, {
|
||||
animation: 150,
|
||||
group: {
|
||||
name: 'cloneList',
|
||||
pull: 'clone',
|
||||
revertClone: true
|
||||
}
|
||||
});
|
||||
}
|
||||
if (cloneSource2) {
|
||||
Sortable.create(cloneSource2, {
|
||||
animation: 150,
|
||||
group: {
|
||||
name: 'cloneList',
|
||||
pull: 'clone',
|
||||
revertClone: true
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Multiple
|
||||
// --------------------------------------------------------------------
|
||||
if (pendingTasks) {
|
||||
Sortable.create(pendingTasks, {
|
||||
animation: 150,
|
||||
group: 'taskList'
|
||||
});
|
||||
}
|
||||
if (completedTasks) {
|
||||
Sortable.create(completedTasks, {
|
||||
animation: 150,
|
||||
group: 'taskList'
|
||||
});
|
||||
}
|
||||
|
||||
// Handles
|
||||
// --------------------------------------------------------------------
|
||||
if (handleList1) {
|
||||
Sortable.create(handleList1, {
|
||||
animation: 150,
|
||||
group: 'handleList',
|
||||
handle: '.drag-handle'
|
||||
});
|
||||
}
|
||||
if (handleList2) {
|
||||
Sortable.create(handleList2, {
|
||||
animation: 150,
|
||||
group: 'handleList',
|
||||
handle: '.drag-handle'
|
||||
});
|
||||
}
|
||||
})();
|
||||
@ -1,10 +0,0 @@
|
||||
/**
|
||||
* Media Player
|
||||
*/
|
||||
|
||||
'use strict';
|
||||
|
||||
(function () {
|
||||
const videoPlayer = new Plyr('#plyr-video-player');
|
||||
const audioPlayer = new Plyr('#plyr-audio-player');
|
||||
})();
|
||||
@ -1,23 +0,0 @@
|
||||
/**
|
||||
* Clipboard
|
||||
*/
|
||||
|
||||
'use strict';
|
||||
|
||||
(function () {
|
||||
const clipboardList = [].slice.call(document.querySelectorAll('.clipboard-btn'));
|
||||
if (ClipboardJS) {
|
||||
clipboardList.map(function (clipboardEl) {
|
||||
const clipboard = new ClipboardJS(clipboardEl);
|
||||
clipboard.on('success', function (e) {
|
||||
if (e.action == 'copy') {
|
||||
toastr['success']('', 'Copied to Clipboard!!');
|
||||
}
|
||||
});
|
||||
});
|
||||
} else {
|
||||
clipboardList.map(function (clipboardEl) {
|
||||
clipboardEl.setAttribute('disabled', true);
|
||||
});
|
||||
}
|
||||
})();
|
||||
@ -1,212 +0,0 @@
|
||||
/**
|
||||
* Ideal Timer (jquery)
|
||||
*/
|
||||
|
||||
'use strict';
|
||||
|
||||
$(function () {
|
||||
var timerDoc = $('#document-Status'),
|
||||
btnPause = $('#document-Pause'),
|
||||
btnResume = $('#document-Resume'),
|
||||
btnElapsed = $('#document-Elapsed'),
|
||||
btnDestroy = $('#document-Destroy'),
|
||||
btnInit = $('#document-Init');
|
||||
|
||||
// Document 5 Sec Timeout
|
||||
// --------------------------------------------------------------------
|
||||
if (timerDoc.length) {
|
||||
var docTimeout = 5000;
|
||||
// idle/active events
|
||||
$(document).on('idle.idleTimer', function (event, elem, obj) {
|
||||
timerDoc
|
||||
.val(function (i, value) {
|
||||
return value + 'Idle @ ' + moment().format() + ' \n';
|
||||
})
|
||||
.removeClass('alert-success')
|
||||
.addClass('alert-warning');
|
||||
});
|
||||
$(document).on('active.idleTimer', function (event, elem, obj, e) {
|
||||
timerDoc
|
||||
.val(function (i, value) {
|
||||
return value + 'Active [' + e.type + '] [' + e.target.nodeName + '] @ ' + moment().format() + ' \n';
|
||||
})
|
||||
.addClass('alert-success')
|
||||
.removeClass('alert-warning');
|
||||
});
|
||||
|
||||
// button events
|
||||
btnPause.on('click', function () {
|
||||
// Pause
|
||||
$(document).idleTimer('pause');
|
||||
timerDoc.val(function (i, value) {
|
||||
return value + 'Paused @ ' + moment().format() + ' \n';
|
||||
});
|
||||
$(this).blur();
|
||||
return false;
|
||||
});
|
||||
btnResume.on('click', function () {
|
||||
// Resume
|
||||
$(document).idleTimer('resume');
|
||||
timerDoc.val(function (i, value) {
|
||||
return value + 'Resumed @ ' + moment().format() + ' \n';
|
||||
});
|
||||
$(this).blur();
|
||||
return false;
|
||||
});
|
||||
btnElapsed.on('click', function () {
|
||||
// Elapsed
|
||||
timerDoc.val(function (i, value) {
|
||||
return value + 'Elapsed (since becoming active): ' + $(document).idleTimer('getElapsedTime') + ' \n';
|
||||
});
|
||||
$(this).blur();
|
||||
return false;
|
||||
});
|
||||
btnDestroy.on('click', function () {
|
||||
// Destroy
|
||||
$(document).idleTimer('destroy');
|
||||
timerDoc
|
||||
.val(function (i, value) {
|
||||
return value + 'Destroyed: @ ' + moment().format() + ' \n';
|
||||
})
|
||||
.removeClass('alert-success')
|
||||
.removeClass('alert-warning');
|
||||
$(this).blur();
|
||||
return false;
|
||||
});
|
||||
btnInit.on('click', function () {
|
||||
// Initialize
|
||||
// show init with object
|
||||
$(document).idleTimer({
|
||||
timeout: docTimeout
|
||||
});
|
||||
timerDoc.val(function (i, value) {
|
||||
return value + 'Init: @ ' + moment().format() + ' \n';
|
||||
});
|
||||
|
||||
// Apply classes for default state
|
||||
if ($(document).idleTimer('isIdle')) {
|
||||
timerDoc.removeClass('alert-success').addClass('alert-warning');
|
||||
} else {
|
||||
timerDoc.addClass('alert-success').removeClass('alert-warning');
|
||||
}
|
||||
$(this).blur();
|
||||
return false;
|
||||
});
|
||||
|
||||
// Clear old statuses
|
||||
timerDoc.val('');
|
||||
|
||||
// Start timeout, passing no options
|
||||
$(document).idleTimer(docTimeout);
|
||||
|
||||
// style based on state
|
||||
if ($(document).idleTimer('isIdle')) {
|
||||
timerDoc
|
||||
.val(function (i, value) {
|
||||
return value + 'Initial Idle State @ ' + moment().format() + ' \n';
|
||||
})
|
||||
.removeClass('alert-success')
|
||||
.addClass('alert-warning');
|
||||
} else {
|
||||
timerDoc
|
||||
.val(function (i, value) {
|
||||
return value + 'Initial Active State @ ' + moment().format() + ' \n';
|
||||
})
|
||||
.addClass('alert-success')
|
||||
.removeClass('alert-warning');
|
||||
}
|
||||
}
|
||||
|
||||
// Element 3 Sec Timeout
|
||||
// --------------------------------------------------------------------
|
||||
var elementTimer = $('#element-Status'),
|
||||
btnReset = $('#element-Reset'),
|
||||
btnRemaining = $('#element-Remaining'),
|
||||
btnLastActive = $('#element-LastActive'),
|
||||
btnState = $('#element-State');
|
||||
if (elementTimer.length) {
|
||||
var elTimeout = 3000;
|
||||
// idle/active events
|
||||
elementTimer.on('idle.idleTimer', function (event, elem, obj) {
|
||||
event.stopPropagation();
|
||||
|
||||
elementTimer
|
||||
.val(function (i, value) {
|
||||
return value + 'Idle @ ' + moment().format() + ' \n';
|
||||
})
|
||||
.removeClass('alert-success')
|
||||
.addClass('alert-warning');
|
||||
});
|
||||
elementTimer.on('active.idleTimer', function (event) {
|
||||
event.stopPropagation();
|
||||
|
||||
elementTimer
|
||||
.val(function (i, value) {
|
||||
return value + 'Active @ ' + moment().format() + ' \n';
|
||||
})
|
||||
.addClass('alert-success')
|
||||
.removeClass('alert-warning');
|
||||
});
|
||||
|
||||
// button events
|
||||
btnReset.on('click', function () {
|
||||
// Reset
|
||||
elementTimer.idleTimer('reset').val(function (i, value) {
|
||||
return value + 'Reset @ ' + moment().format() + ' \n';
|
||||
});
|
||||
|
||||
// classes for default state
|
||||
if ($('#element-Status').idleTimer('isIdle')) {
|
||||
elementTimer.removeClass('alert-success').addClass('alert-warning');
|
||||
} else {
|
||||
elementTimer.addClass('alert-success').removeClass('alert-warning');
|
||||
}
|
||||
$(this).blur();
|
||||
return false;
|
||||
});
|
||||
btnRemaining.on('click', function () {
|
||||
// Remaining
|
||||
elementTimer.val(function (i, value) {
|
||||
return value + 'Remaining: ' + elementTimer.idleTimer('getRemainingTime') + ' \n';
|
||||
});
|
||||
$(this).blur();
|
||||
return false;
|
||||
});
|
||||
btnLastActive.on('click', function () {
|
||||
// Last Active
|
||||
elementTimer.val(function (i, value) {
|
||||
return value + 'LastActive: ' + elementTimer.idleTimer('getLastActiveTime') + ' \n';
|
||||
});
|
||||
$(this).blur();
|
||||
return false;
|
||||
});
|
||||
btnState.on('click', function () {
|
||||
// State
|
||||
elementTimer.val(function (i, value) {
|
||||
return value + 'State: ' + ($('#element-Status').idleTimer('isIdle') ? 'idle' : 'active') + ' \n';
|
||||
});
|
||||
$(this).blur();
|
||||
return false;
|
||||
});
|
||||
|
||||
// Clear value if cached & start time
|
||||
elementTimer.val('').idleTimer(elTimeout);
|
||||
|
||||
// show initial state
|
||||
if (elementTimer.idleTimer('isIdle')) {
|
||||
elementTimer
|
||||
.val(function (i, value) {
|
||||
return value + 'Initial Idle @ ' + moment().format() + ' \n';
|
||||
})
|
||||
.removeClass('alert-success')
|
||||
.addClass('alert-warning');
|
||||
} else {
|
||||
elementTimer
|
||||
.val(function (i, value) {
|
||||
return value + 'Initial Active @ ' + moment().format() + ' \n';
|
||||
})
|
||||
.addClass('alert-success')
|
||||
.removeClass('alert-warning');
|
||||
}
|
||||
}
|
||||
});
|
||||
@ -1,37 +0,0 @@
|
||||
/**
|
||||
* NumeralJS
|
||||
*/
|
||||
|
||||
'use strict';
|
||||
|
||||
(function () {
|
||||
const dNum = document.querySelector('.dNum'),
|
||||
fNum = document.querySelector('.fNum'),
|
||||
fCurrency = document.querySelector('.fCurrency'),
|
||||
fBytes = document.querySelector('.fBytes'),
|
||||
fPercent = document.querySelector('.fPercent'),
|
||||
fTime = document.querySelector('.fTime'),
|
||||
fExponential = document.querySelector('.fExponential');
|
||||
|
||||
if (dNum) {
|
||||
dNum.innerHTML = numeral(974).value();
|
||||
}
|
||||
if (fNum) {
|
||||
fNum.innerHTML = numeral(1230974).format('0.0a');
|
||||
}
|
||||
if (fCurrency) {
|
||||
fCurrency.innerHTML = numeral(1000.234).format('$0,0.000');
|
||||
}
|
||||
if (fBytes) {
|
||||
fBytes.innerHTML = numeral(3467479682787).format('0.000ib');
|
||||
}
|
||||
if (fPercent) {
|
||||
fPercent.innerHTML = numeral(0.974878234).format('0.000%');
|
||||
}
|
||||
if (fTime) {
|
||||
fTime.innerHTML = numeral(63846).format('00:00:00');
|
||||
}
|
||||
if (fExponential) {
|
||||
fExponential.innerHTML = numeral(1123456789).format('0,0e+0');
|
||||
}
|
||||
})();
|
||||
@ -1,37 +0,0 @@
|
||||
/**
|
||||
* Perfect Scrollbar
|
||||
*/
|
||||
'use strict';
|
||||
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
(function () {
|
||||
const verticalExample = document.getElementById('vertical-example'),
|
||||
horizontalExample = document.getElementById('horizontal-example'),
|
||||
horizVertExample = document.getElementById('both-scrollbars-example');
|
||||
|
||||
// Vertical Example
|
||||
// --------------------------------------------------------------------
|
||||
if (verticalExample) {
|
||||
new PerfectScrollbar(verticalExample, {
|
||||
wheelPropagation: false
|
||||
});
|
||||
}
|
||||
|
||||
// Horizontal Example
|
||||
// --------------------------------------------------------------------
|
||||
if (horizontalExample) {
|
||||
new PerfectScrollbar(horizontalExample, {
|
||||
wheelPropagation: false,
|
||||
suppressScrollY: true
|
||||
});
|
||||
}
|
||||
|
||||
// Both vertical and Horizontal Example
|
||||
// --------------------------------------------------------------------
|
||||
if (horizVertExample) {
|
||||
new PerfectScrollbar(horizVertExample, {
|
||||
wheelPropagation: false
|
||||
});
|
||||
}
|
||||
})();
|
||||
});
|
||||
@ -1,170 +0,0 @@
|
||||
/**
|
||||
* Star Ratings (jquery)
|
||||
*/
|
||||
|
||||
'use strict';
|
||||
$(function () {
|
||||
var basicRatings = $('.basic-ratings'),
|
||||
customSvg = $('.custom-svg-ratings'),
|
||||
multiColor = $('.multi-color-ratings'),
|
||||
halfStar = $('.half-star-ratings'),
|
||||
fullStar = $('.full-star-ratings'),
|
||||
readOnlyRatings = $('.read-only-ratings'),
|
||||
onSetEvents = $('.onset-event-ratings'),
|
||||
onChangeEvents = $('.onChange-event-ratings'),
|
||||
ratingMethods = $('.methods-ratings'),
|
||||
initializeRatings = $('.btn-initialize'),
|
||||
destroyRatings = $('.btn-destroy'),
|
||||
getRatings = $('.btn-get-rating'),
|
||||
setRatings = $('.btn-set-rating');
|
||||
|
||||
// Basic Ratings
|
||||
// --------------------------------------------------------------------
|
||||
if (basicRatings) {
|
||||
basicRatings.rateYo({
|
||||
rating: 3.6,
|
||||
rtl: isRtl,
|
||||
spacing: '8px'
|
||||
});
|
||||
}
|
||||
|
||||
// Custom SVG Ratings
|
||||
// --------------------------------------------------------------------
|
||||
if (customSvg) {
|
||||
customSvg.rateYo({
|
||||
rating: 3.2,
|
||||
starSvg:
|
||||
"<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'>" +
|
||||
"<path d='M12 6.76l1.379 4.246h4.465l-3.612 2.625 1.379" +
|
||||
' 4.246-3.611-2.625-3.612 2.625' +
|
||||
' 1.379-4.246-3.612-2.625h4.465l1.38-4.246zm0-6.472l-2.833' +
|
||||
' 8.718h-9.167l7.416 5.389-2.833 8.718 7.417-5.388' +
|
||||
' 7.416 5.388-2.833-8.718' +
|
||||
" 7.417-5.389h-9.167l-2.833-8.718z'-></path>",
|
||||
rtl: isRtl,
|
||||
spacing: '8px'
|
||||
});
|
||||
}
|
||||
|
||||
// Multi Color Ratings
|
||||
// --------------------------------------------------------------------
|
||||
if (multiColor) {
|
||||
multiColor.rateYo({
|
||||
rtl: isRtl,
|
||||
spacing: '8px',
|
||||
multiColor: {
|
||||
startColor: '#fffca0',
|
||||
endColor: '#ffd950'
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Half Star Ratings
|
||||
// --------------------------------------------------------------------
|
||||
if (halfStar) {
|
||||
halfStar.rateYo({
|
||||
rtl: isRtl,
|
||||
spacing: '8px',
|
||||
|
||||
rating: 2
|
||||
});
|
||||
}
|
||||
|
||||
// Full Star Ratings
|
||||
// --------------------------------------------------------------------
|
||||
if (fullStar) {
|
||||
fullStar.rateYo({
|
||||
rtl: isRtl,
|
||||
spacing: '8px',
|
||||
|
||||
rating: 2
|
||||
});
|
||||
}
|
||||
|
||||
// Read Only Ratings
|
||||
// --------------------------------------------------------------------
|
||||
if (readOnlyRatings) {
|
||||
readOnlyRatings.rateYo({
|
||||
rating: 2,
|
||||
rtl: isRtl,
|
||||
spacing: '8px'
|
||||
});
|
||||
}
|
||||
|
||||
// Ratings Events
|
||||
// --------------------------------------------------------------------
|
||||
|
||||
// onSet Event
|
||||
if (onSetEvents) {
|
||||
onSetEvents
|
||||
.rateYo({
|
||||
rtl: isRtl,
|
||||
spacing: '8px'
|
||||
})
|
||||
.on('rateyo.set', function (e, data) {
|
||||
alert('The rating is set to ' + data.rating + '!');
|
||||
});
|
||||
}
|
||||
|
||||
// onChange Event
|
||||
if (onChangeEvents) {
|
||||
onChangeEvents
|
||||
.rateYo({
|
||||
rtl: isRtl,
|
||||
spacing: '8px'
|
||||
})
|
||||
.on('rateyo.change', function (e, data) {
|
||||
var rating = data.rating;
|
||||
$(this).parent().find('.counter').text(rating);
|
||||
});
|
||||
}
|
||||
|
||||
// Ratings Methods
|
||||
// --------------------------------------------------------------------
|
||||
if (ratingMethods) {
|
||||
var $instance = ratingMethods.rateYo({
|
||||
rtl: isRtl,
|
||||
spacing: '8px'
|
||||
});
|
||||
|
||||
if (initializeRatings) {
|
||||
initializeRatings.on('click', function () {
|
||||
$instance.rateYo({
|
||||
rtl: isRtl,
|
||||
spacing: '8px'
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
if (destroyRatings) {
|
||||
destroyRatings.on('click', function () {
|
||||
if ($instance.hasClass('jq-ry-container')) {
|
||||
$instance.rateYo('destroy');
|
||||
} else {
|
||||
window.alert('Please Initialize Ratings First');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
if (getRatings) {
|
||||
getRatings.on('click', function () {
|
||||
if ($instance.hasClass('jq-ry-container')) {
|
||||
var rating = $instance.rateYo('rating');
|
||||
window.alert('Current Ratings are ' + rating);
|
||||
} else {
|
||||
window.alert('Please Initialize Ratings First');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
if (setRatings) {
|
||||
setRatings.on('click', function () {
|
||||
if ($instance.hasClass('jq-ry-container')) {
|
||||
$instance.rateYo('rating', 1);
|
||||
} else {
|
||||
window.alert('Please Initialize Ratings First');
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
@ -1,558 +0,0 @@
|
||||
/**
|
||||
* Sweet Alerts
|
||||
*/
|
||||
|
||||
'use strict';
|
||||
|
||||
(function () {
|
||||
const basicAlert = document.querySelector('#basic-alert'),
|
||||
withTitle = document.querySelector('#with-title'),
|
||||
footerAlert = document.querySelector('#footer-alert'),
|
||||
htmlAlert = document.querySelector('#html-alert'),
|
||||
positionTopStart = document.querySelector('#position-top-start'),
|
||||
positionTopEnd = document.querySelector('#position-top-end'),
|
||||
positionBottomStart = document.querySelector('#position-bottom-start'),
|
||||
positionBottomEnd = document.querySelector('#position-bottom-end'),
|
||||
bounceInAnimation = document.querySelector('#bounce-in-animation'),
|
||||
fadeInAnimation = document.querySelector('#fade-in-animation'),
|
||||
flipXAnimation = document.querySelector('#flip-x-animation'),
|
||||
tadaAnimation = document.querySelector('#tada-animation'),
|
||||
shakeAnimation = document.querySelector('#shake-animation'),
|
||||
iconSuccess = document.querySelector('#type-success'),
|
||||
iconInfo = document.querySelector('#type-info'),
|
||||
iconWarning = document.querySelector('#type-warning'),
|
||||
iconError = document.querySelector('#type-error'),
|
||||
iconQuestion = document.querySelector('#type-question'),
|
||||
customImage = document.querySelector('#custom-image'),
|
||||
autoClose = document.querySelector('#auto-close'),
|
||||
outsideClick = document.querySelector('#outside-click'),
|
||||
progressSteps = document.querySelector('#progress-steps'),
|
||||
ajaxRequest = document.querySelector('#ajax-request'),
|
||||
confirmText = document.querySelector('#confirm-text'),
|
||||
confirmColor = document.querySelector('#confirm-color');
|
||||
|
||||
// Basic Alerts
|
||||
// --------------------------------------------------------------------
|
||||
|
||||
// Default Alert
|
||||
if (basicAlert) {
|
||||
basicAlert.onclick = function () {
|
||||
Swal.fire({
|
||||
title: 'Any fool can use a computer',
|
||||
customClass: {
|
||||
confirmButton: 'btn btn-primary'
|
||||
},
|
||||
buttonsStyling: false
|
||||
});
|
||||
};
|
||||
}
|
||||
|
||||
// Alert With Title
|
||||
if (withTitle) {
|
||||
withTitle.onclick = function () {
|
||||
Swal.fire({
|
||||
title: 'The Internet?,',
|
||||
text: 'That thing is still around?',
|
||||
customClass: {
|
||||
confirmButton: 'btn btn-primary'
|
||||
},
|
||||
buttonsStyling: false
|
||||
});
|
||||
};
|
||||
}
|
||||
|
||||
// Alert With Footer
|
||||
if (footerAlert) {
|
||||
footerAlert.onclick = function () {
|
||||
Swal.fire({
|
||||
icon: 'error',
|
||||
title: 'Oops...',
|
||||
text: 'Something went wrong!',
|
||||
footer: '<a href>Why do I have this issue?</a>',
|
||||
customClass: {
|
||||
confirmButton: 'btn btn-primary'
|
||||
},
|
||||
buttonsStyling: false
|
||||
});
|
||||
};
|
||||
}
|
||||
|
||||
// Html Alert
|
||||
if (htmlAlert) {
|
||||
htmlAlert.onclick = function () {
|
||||
Swal.fire({
|
||||
title: '<strong>HTML <u>example</u></strong>',
|
||||
icon: 'info',
|
||||
html:
|
||||
'You can use <b>bold text</b>, ' +
|
||||
'<a href="https://pixinvent.com/" target="_blank">links</a> ' +
|
||||
'and other HTML tags',
|
||||
showCloseButton: true,
|
||||
showCancelButton: true,
|
||||
focusConfirm: false,
|
||||
confirmButtonText: '<i class="ti ti-thumb-up"></i> Great!',
|
||||
confirmButtonAriaLabel: 'Thumbs up, great!',
|
||||
cancelButtonText: '<i class="ti ti-thumb-down"></i>',
|
||||
cancelButtonAriaLabel: 'Thumbs down',
|
||||
customClass: {
|
||||
confirmButton: 'btn btn-primary me-3',
|
||||
cancelButton: 'btn btn-label-secondary'
|
||||
},
|
||||
buttonsStyling: false
|
||||
});
|
||||
};
|
||||
}
|
||||
|
||||
// Alerts Positions
|
||||
// --------------------------------------------------------------------
|
||||
|
||||
// Top Start Alert
|
||||
if (positionTopStart) {
|
||||
positionTopStart.onclick = function () {
|
||||
Swal.fire({
|
||||
position: 'top-start',
|
||||
icon: 'success',
|
||||
title: 'Your work has been saved',
|
||||
showConfirmButton: false,
|
||||
timer: 1500,
|
||||
customClass: {
|
||||
confirmButton: 'btn btn-primary'
|
||||
},
|
||||
buttonsStyling: false
|
||||
});
|
||||
};
|
||||
}
|
||||
|
||||
// Top End Alert
|
||||
if (positionTopEnd) {
|
||||
positionTopEnd.onclick = function () {
|
||||
Swal.fire({
|
||||
position: 'top-end',
|
||||
icon: 'success',
|
||||
title: 'Your work has been saved',
|
||||
showConfirmButton: false,
|
||||
timer: 1500,
|
||||
customClass: {
|
||||
confirmButton: 'btn btn-primary'
|
||||
},
|
||||
buttonsStyling: false
|
||||
});
|
||||
};
|
||||
}
|
||||
|
||||
// Bottom Start Alert
|
||||
if (positionBottomStart) {
|
||||
positionBottomStart.onclick = function () {
|
||||
Swal.fire({
|
||||
position: 'bottom-start',
|
||||
icon: 'success',
|
||||
title: 'Your work has been saved',
|
||||
showConfirmButton: false,
|
||||
timer: 1500,
|
||||
customClass: {
|
||||
confirmButton: 'btn btn-primary'
|
||||
},
|
||||
buttonsStyling: false
|
||||
});
|
||||
};
|
||||
}
|
||||
|
||||
// Bottom End Alert
|
||||
if (positionBottomEnd) {
|
||||
positionBottomEnd.onclick = function () {
|
||||
Swal.fire({
|
||||
position: 'bottom-end',
|
||||
icon: 'success',
|
||||
title: 'Your work has been saved',
|
||||
showConfirmButton: false,
|
||||
timer: 1500,
|
||||
customClass: {
|
||||
confirmButton: 'btn btn-primary'
|
||||
},
|
||||
buttonsStyling: false
|
||||
});
|
||||
};
|
||||
}
|
||||
|
||||
// Alerts With Animations
|
||||
// --------------------------------------------------------------------
|
||||
|
||||
// Bounce In Animation
|
||||
if (bounceInAnimation) {
|
||||
bounceInAnimation.onclick = function () {
|
||||
Swal.fire({
|
||||
title: 'Bounce In Animation',
|
||||
showClass: {
|
||||
popup: 'animate__animated animate__bounceIn'
|
||||
},
|
||||
customClass: {
|
||||
confirmButton: 'btn btn-primary'
|
||||
},
|
||||
buttonsStyling: false
|
||||
});
|
||||
};
|
||||
}
|
||||
|
||||
// Fade In Animation
|
||||
if (fadeInAnimation) {
|
||||
fadeInAnimation.onclick = function () {
|
||||
Swal.fire({
|
||||
title: 'Fade In Animation',
|
||||
showClass: {
|
||||
popup: 'animate__animated animate__fadeIn'
|
||||
},
|
||||
customClass: {
|
||||
confirmButton: 'btn btn-primary'
|
||||
},
|
||||
buttonsStyling: false
|
||||
});
|
||||
};
|
||||
}
|
||||
|
||||
// Flip X Animation
|
||||
if (flipXAnimation) {
|
||||
flipXAnimation.onclick = function () {
|
||||
Swal.fire({
|
||||
title: 'Flip In Animation',
|
||||
showClass: {
|
||||
popup: 'animate__animated animate__flipInX'
|
||||
},
|
||||
customClass: {
|
||||
confirmButton: 'btn btn-primary'
|
||||
},
|
||||
buttonsStyling: false
|
||||
});
|
||||
};
|
||||
}
|
||||
|
||||
// Tada Animation
|
||||
if (tadaAnimation) {
|
||||
tadaAnimation.onclick = function () {
|
||||
Swal.fire({
|
||||
title: 'Tada Animation',
|
||||
showClass: {
|
||||
popup: 'animate__animated animate__tada'
|
||||
},
|
||||
customClass: {
|
||||
confirmButton: 'btn btn-primary'
|
||||
},
|
||||
buttonsStyling: false
|
||||
});
|
||||
};
|
||||
}
|
||||
|
||||
// Shake Animation
|
||||
if (shakeAnimation) {
|
||||
shakeAnimation.onclick = function () {
|
||||
Swal.fire({
|
||||
title: 'Shake Animation',
|
||||
showClass: {
|
||||
popup: 'animate__animated animate__shakeX'
|
||||
},
|
||||
customClass: {
|
||||
confirmButton: 'btn btn-primary'
|
||||
},
|
||||
buttonsStyling: false
|
||||
});
|
||||
};
|
||||
}
|
||||
|
||||
// Alert Types
|
||||
// --------------------------------------------------------------------
|
||||
|
||||
// Success Alert
|
||||
if (iconSuccess) {
|
||||
iconSuccess.onclick = function () {
|
||||
Swal.fire({
|
||||
title: 'Good job!',
|
||||
text: 'You clicked the button!',
|
||||
icon: 'success',
|
||||
customClass: {
|
||||
confirmButton: 'btn btn-primary'
|
||||
},
|
||||
buttonsStyling: false
|
||||
});
|
||||
};
|
||||
}
|
||||
|
||||
// Info Alert
|
||||
if (iconInfo) {
|
||||
iconInfo.onclick = function () {
|
||||
Swal.fire({
|
||||
title: 'Info!',
|
||||
text: 'You clicked the button!',
|
||||
icon: 'info',
|
||||
customClass: {
|
||||
confirmButton: 'btn btn-primary'
|
||||
},
|
||||
buttonsStyling: false
|
||||
});
|
||||
};
|
||||
}
|
||||
|
||||
// Warning Alert
|
||||
if (iconWarning) {
|
||||
iconWarning.onclick = function () {
|
||||
Swal.fire({
|
||||
title: 'Warning!',
|
||||
text: ' You clicked the button!',
|
||||
icon: 'warning',
|
||||
customClass: {
|
||||
confirmButton: 'btn btn-primary'
|
||||
},
|
||||
buttonsStyling: false
|
||||
});
|
||||
};
|
||||
}
|
||||
|
||||
// Error Alert
|
||||
if (iconError) {
|
||||
iconError.onclick = function () {
|
||||
Swal.fire({
|
||||
title: 'Error!',
|
||||
text: ' You clicked the button!',
|
||||
icon: 'error',
|
||||
customClass: {
|
||||
confirmButton: 'btn btn-primary'
|
||||
},
|
||||
buttonsStyling: false
|
||||
});
|
||||
};
|
||||
}
|
||||
|
||||
// Question Alert
|
||||
if (iconQuestion) {
|
||||
iconQuestion.onclick = function () {
|
||||
Swal.fire({
|
||||
title: 'Question!',
|
||||
text: ' You clicked the button!',
|
||||
icon: 'question',
|
||||
customClass: {
|
||||
confirmButton: 'btn btn-primary'
|
||||
},
|
||||
buttonsStyling: false
|
||||
});
|
||||
};
|
||||
}
|
||||
|
||||
// Advanced Options
|
||||
// --------------------------------------------------------------------
|
||||
|
||||
//Alert With Custom Icon
|
||||
if (customImage) {
|
||||
customImage.onclick = function () {
|
||||
Swal.fire({
|
||||
title: 'Sweet!',
|
||||
text: 'Modal with a custom image.',
|
||||
imageUrl: assetsPath + 'img/backgrounds/5.jpg',
|
||||
imageWidth: 400,
|
||||
imageAlt: 'Custom image',
|
||||
customClass: {
|
||||
confirmButton: 'btn btn-primary'
|
||||
},
|
||||
buttonsStyling: false
|
||||
});
|
||||
};
|
||||
}
|
||||
|
||||
// Auto Closing Alert
|
||||
if (autoClose) {
|
||||
autoClose.onclick = function () {
|
||||
var timerInterval;
|
||||
Swal.fire({
|
||||
title: 'Auto close alert!',
|
||||
html: 'I will close in <strong></strong> seconds.',
|
||||
timer: 2000,
|
||||
customClass: {
|
||||
confirmButton: 'btn btn-primary'
|
||||
},
|
||||
buttonsStyling: false,
|
||||
willOpen: function () {
|
||||
Swal.showLoading();
|
||||
timerInterval = setInterval(function () {
|
||||
Swal.getHtmlContainer().querySelector('strong').textContent = Swal.getTimerLeft();
|
||||
}, 100);
|
||||
},
|
||||
willClose: function () {
|
||||
clearInterval(timerInterval);
|
||||
}
|
||||
}).then(function (result) {
|
||||
if (
|
||||
// Read more about handling dismissals
|
||||
result.dismiss === Swal.DismissReason.timer
|
||||
) {
|
||||
console.log('I was closed by the timer');
|
||||
}
|
||||
});
|
||||
};
|
||||
}
|
||||
|
||||
// Close Alert On Backdrop Click
|
||||
if (outsideClick) {
|
||||
outsideClick.onclick = function () {
|
||||
Swal.fire({
|
||||
title: 'Click outside to close!',
|
||||
text: 'This is a cool message!',
|
||||
backdrop: true,
|
||||
allowOutsideClick: true,
|
||||
customClass: {
|
||||
confirmButton: 'btn btn-primary'
|
||||
},
|
||||
buttonsStyling: false
|
||||
});
|
||||
};
|
||||
}
|
||||
|
||||
// Alert With Steps
|
||||
if (progressSteps) {
|
||||
progressSteps.onclick = function () {
|
||||
const steps = ['1', '2', '3'];
|
||||
const swalQueueStep = Swal.mixin({
|
||||
confirmButtonText: 'Forward',
|
||||
cancelButtonText: 'Back',
|
||||
progressSteps: steps,
|
||||
input: 'text',
|
||||
inputAttributes: {
|
||||
required: true
|
||||
},
|
||||
validationMessage: 'This field is required'
|
||||
});
|
||||
|
||||
async function backAndForward() {
|
||||
const values = [];
|
||||
let currentStep;
|
||||
|
||||
for (currentStep = 0; currentStep < steps.length; ) {
|
||||
const result = await new swalQueueStep({
|
||||
title: 'Question ' + steps[currentStep],
|
||||
showCancelButton: currentStep > 0,
|
||||
currentProgressStep: currentStep
|
||||
});
|
||||
|
||||
if (result.value) {
|
||||
values[currentStep] = result.value;
|
||||
currentStep++;
|
||||
} else if (result.dismiss === 'cancel') {
|
||||
currentStep--;
|
||||
}
|
||||
}
|
||||
|
||||
Swal.fire(JSON.stringify(values));
|
||||
}
|
||||
|
||||
backAndForward();
|
||||
};
|
||||
}
|
||||
|
||||
// Alert With Ajax Request
|
||||
if (ajaxRequest) {
|
||||
ajaxRequest.onclick = function () {
|
||||
Swal.fire({
|
||||
title: 'Submit your Github username',
|
||||
input: 'text',
|
||||
inputAttributes: {
|
||||
autocapitalize: 'off'
|
||||
},
|
||||
showCancelButton: true,
|
||||
confirmButtonText: 'Look up',
|
||||
showLoaderOnConfirm: true,
|
||||
customClass: {
|
||||
confirmButton: 'btn btn-primary me-3',
|
||||
cancelButton: 'btn btn-label-danger'
|
||||
},
|
||||
preConfirm: login => {
|
||||
return fetch('//api.github.com/users/' + login)
|
||||
.then(response => {
|
||||
if (!response.ok) {
|
||||
throw new Error(response.statusText);
|
||||
}
|
||||
return response.json();
|
||||
})
|
||||
.catch(error => {
|
||||
Swal.showValidationMessage('Request failed:' + error);
|
||||
});
|
||||
},
|
||||
backdrop: true,
|
||||
allowOutsideClick: () => !Swal.isLoading()
|
||||
}).then(result => {
|
||||
if (result.isConfirmed) {
|
||||
Swal.fire({
|
||||
title: result.value.login + "'s avatar",
|
||||
imageUrl: result.value.avatar_url,
|
||||
customClass: {
|
||||
confirmButtonText: 'Close me!',
|
||||
confirmButton: 'btn btn-primary'
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
};
|
||||
}
|
||||
|
||||
// Alert With Functional Confirm Button
|
||||
if (confirmText) {
|
||||
confirmText.onclick = function () {
|
||||
Swal.fire({
|
||||
title: 'Are you sure?',
|
||||
text: "You won't be able to revert this!",
|
||||
icon: 'warning',
|
||||
showCancelButton: true,
|
||||
confirmButtonText: 'Yes, delete it!',
|
||||
customClass: {
|
||||
confirmButton: 'btn btn-primary me-3',
|
||||
cancelButton: 'btn btn-label-secondary'
|
||||
},
|
||||
buttonsStyling: false
|
||||
}).then(function (result) {
|
||||
if (result.value) {
|
||||
Swal.fire({
|
||||
icon: 'success',
|
||||
title: 'Deleted!',
|
||||
text: 'Your file has been deleted.',
|
||||
customClass: {
|
||||
confirmButton: 'btn btn-success'
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
};
|
||||
}
|
||||
|
||||
// Alert With Functional Confirm Cancel Button
|
||||
if (confirmColor) {
|
||||
confirmColor.onclick = function () {
|
||||
Swal.fire({
|
||||
title: 'Are you sure?',
|
||||
text: "You won't be able to revert this!",
|
||||
icon: 'warning',
|
||||
showCancelButton: true,
|
||||
confirmButtonText: 'Yes, delete it!',
|
||||
customClass: {
|
||||
confirmButton: 'btn btn-primary me-3',
|
||||
cancelButton: 'btn btn-label-secondary'
|
||||
},
|
||||
buttonsStyling: false
|
||||
}).then(function (result) {
|
||||
if (result.value) {
|
||||
Swal.fire({
|
||||
icon: 'success',
|
||||
title: 'Deleted!',
|
||||
text: 'Your file has been deleted.',
|
||||
customClass: {
|
||||
confirmButton: 'btn btn-success'
|
||||
}
|
||||
});
|
||||
} else if (result.dismiss === Swal.DismissReason.cancel) {
|
||||
Swal.fire({
|
||||
title: 'Cancelled',
|
||||
text: 'Your imaginary file is safe :)',
|
||||
icon: 'error',
|
||||
customClass: {
|
||||
confirmButton: 'btn btn-success'
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
};
|
||||
}
|
||||
})();
|
||||
@ -1,16 +0,0 @@
|
||||
/**
|
||||
* Timeline
|
||||
*/
|
||||
|
||||
'use strict';
|
||||
|
||||
(function () {
|
||||
// Init Animation on scroll
|
||||
AOS.init({
|
||||
disable: function () {
|
||||
const maxWidth = 1024;
|
||||
return window.innerWidth < maxWidth;
|
||||
},
|
||||
once: true
|
||||
});
|
||||
})();
|
||||
@ -1,194 +0,0 @@
|
||||
/**
|
||||
* Tour
|
||||
*/
|
||||
|
||||
'use strict';
|
||||
|
||||
(function () {
|
||||
const startBtn = document.querySelector('#shepherd-example');
|
||||
|
||||
function setupTour(tour) {
|
||||
const backBtnClass = 'btn btn-sm btn-label-secondary md-btn-flat',
|
||||
nextBtnClass = 'btn btn-sm btn-primary btn-next';
|
||||
tour.addStep({
|
||||
title: 'Navbar',
|
||||
text: 'This is your navbar',
|
||||
attachTo: { element: '.navbar', on: 'bottom' },
|
||||
buttons: [
|
||||
{
|
||||
action: tour.cancel,
|
||||
classes: backBtnClass,
|
||||
text: 'Skip'
|
||||
},
|
||||
{
|
||||
text: 'Next',
|
||||
classes: nextBtnClass,
|
||||
action: tour.next
|
||||
}
|
||||
]
|
||||
});
|
||||
tour.addStep({
|
||||
title: 'Card',
|
||||
text: 'This is a card',
|
||||
attachTo: { element: '.tour-card', on: 'top' },
|
||||
buttons: [
|
||||
{
|
||||
text: 'Skip',
|
||||
classes: backBtnClass,
|
||||
action: tour.cancel
|
||||
},
|
||||
{
|
||||
text: 'Back',
|
||||
classes: backBtnClass,
|
||||
action: tour.back
|
||||
},
|
||||
{
|
||||
text: 'Next',
|
||||
classes: nextBtnClass,
|
||||
action: tour.next
|
||||
}
|
||||
]
|
||||
});
|
||||
tour.addStep({
|
||||
title: 'Footer',
|
||||
text: 'This is the Footer',
|
||||
attachTo: { element: '.footer', on: 'top' },
|
||||
buttons: [
|
||||
{
|
||||
text: 'Skip',
|
||||
classes: backBtnClass,
|
||||
action: tour.cancel
|
||||
},
|
||||
{
|
||||
text: 'Back',
|
||||
classes: backBtnClass,
|
||||
action: tour.back
|
||||
},
|
||||
{
|
||||
text: 'Next',
|
||||
classes: nextBtnClass,
|
||||
action: tour.next
|
||||
}
|
||||
]
|
||||
});
|
||||
tour.addStep({
|
||||
title: 'Upgrade',
|
||||
text: 'Click here to upgrade plan',
|
||||
attachTo: { element: '.footer-link', on: 'top' },
|
||||
buttons: [
|
||||
{
|
||||
text: 'Back',
|
||||
classes: backBtnClass,
|
||||
action: tour.back
|
||||
},
|
||||
{
|
||||
text: 'Finish',
|
||||
classes: nextBtnClass,
|
||||
action: tour.cancel
|
||||
}
|
||||
]
|
||||
});
|
||||
|
||||
return tour;
|
||||
}
|
||||
|
||||
if (startBtn) {
|
||||
// On start tour button click
|
||||
startBtn.onclick = function () {
|
||||
const tourVar = new Shepherd.Tour({
|
||||
defaultStepOptions: {
|
||||
scrollTo: false,
|
||||
cancelIcon: {
|
||||
enabled: true
|
||||
}
|
||||
},
|
||||
useModalOverlay: true
|
||||
});
|
||||
|
||||
setupTour(tourVar).start();
|
||||
};
|
||||
}
|
||||
|
||||
// ! Documentation Tour only
|
||||
const startBtnDocs = document.querySelector('#shepherd-docs-example');
|
||||
|
||||
function setupTourDocs(tour) {
|
||||
const backBtnClass = 'btn btn-sm btn-label-secondary md-btn-flat',
|
||||
nextBtnClass = 'btn btn-sm btn-primary btn-next';
|
||||
tour.addStep({
|
||||
title: 'Navbar',
|
||||
text: 'This is your navbar',
|
||||
attachTo: { element: '.navbar', on: 'bottom' },
|
||||
buttons: [
|
||||
{
|
||||
action: tour.cancel,
|
||||
classes: backBtnClass,
|
||||
text: 'Skip'
|
||||
},
|
||||
{
|
||||
text: 'Next',
|
||||
classes: nextBtnClass,
|
||||
action: tour.next
|
||||
}
|
||||
]
|
||||
});
|
||||
tour.addStep({
|
||||
title: 'Footer',
|
||||
text: 'This is the Footer',
|
||||
attachTo: { element: '.footer', on: 'top' },
|
||||
buttons: [
|
||||
{
|
||||
text: 'Skip',
|
||||
classes: backBtnClass,
|
||||
action: tour.cancel
|
||||
},
|
||||
{
|
||||
text: 'Back',
|
||||
classes: backBtnClass,
|
||||
action: tour.back
|
||||
},
|
||||
{
|
||||
text: 'Next',
|
||||
classes: nextBtnClass,
|
||||
action: tour.next
|
||||
}
|
||||
]
|
||||
});
|
||||
tour.addStep({
|
||||
title: 'Social Link',
|
||||
text: 'Click here share on social media',
|
||||
attachTo: { element: '.footer-link', on: 'top' },
|
||||
buttons: [
|
||||
{
|
||||
text: 'Back',
|
||||
classes: backBtnClass,
|
||||
action: tour.back
|
||||
},
|
||||
{
|
||||
text: 'Finish',
|
||||
classes: nextBtnClass,
|
||||
action: tour.cancel
|
||||
}
|
||||
]
|
||||
});
|
||||
|
||||
return tour;
|
||||
}
|
||||
|
||||
if (startBtnDocs) {
|
||||
// On start tour button click
|
||||
startBtnDocs.onclick = function () {
|
||||
const tourDocsVar = new Shepherd.Tour({
|
||||
defaultStepOptions: {
|
||||
scrollTo: false,
|
||||
cancelIcon: {
|
||||
enabled: true
|
||||
}
|
||||
},
|
||||
useModalOverlay: true
|
||||
});
|
||||
|
||||
setupTourDocs(tourDocsVar).start();
|
||||
};
|
||||
}
|
||||
})();
|
||||
@ -1,440 +0,0 @@
|
||||
/**
|
||||
* Treeview (jquery)
|
||||
*/
|
||||
|
||||
'use strict';
|
||||
|
||||
$(function () {
|
||||
var theme = $('html').hasClass('light-style') ? 'default' : 'default-dark',
|
||||
basicTree = $('#jstree-basic'),
|
||||
customIconsTree = $('#jstree-custom-icons'),
|
||||
contextMenu = $('#jstree-context-menu'),
|
||||
dragDrop = $('#jstree-drag-drop'),
|
||||
checkboxTree = $('#jstree-checkbox'),
|
||||
ajaxTree = $('#jstree-ajax');
|
||||
|
||||
// Basic
|
||||
// --------------------------------------------------------------------
|
||||
if (basicTree.length) {
|
||||
basicTree.jstree({
|
||||
core: {
|
||||
themes: {
|
||||
name: theme
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Custom Icons
|
||||
// --------------------------------------------------------------------
|
||||
if (customIconsTree.length) {
|
||||
customIconsTree.jstree({
|
||||
core: {
|
||||
themes: {
|
||||
name: theme
|
||||
},
|
||||
data: [
|
||||
{
|
||||
text: 'css',
|
||||
children: [
|
||||
{
|
||||
text: 'app.css',
|
||||
type: 'css'
|
||||
},
|
||||
{
|
||||
text: 'style.css',
|
||||
type: 'css'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
text: 'img',
|
||||
state: {
|
||||
opened: true
|
||||
},
|
||||
children: [
|
||||
{
|
||||
text: 'bg.jpg',
|
||||
type: 'img'
|
||||
},
|
||||
{
|
||||
text: 'logo.png',
|
||||
type: 'img'
|
||||
},
|
||||
{
|
||||
text: 'avatar.png',
|
||||
type: 'img'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
text: 'js',
|
||||
state: {
|
||||
opened: true
|
||||
},
|
||||
children: [
|
||||
{
|
||||
text: 'jquery.js',
|
||||
type: 'js'
|
||||
},
|
||||
{
|
||||
text: 'app.js',
|
||||
type: 'js'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
text: 'index.html',
|
||||
type: 'html'
|
||||
},
|
||||
{
|
||||
text: 'page-one.html',
|
||||
type: 'html'
|
||||
},
|
||||
{
|
||||
text: 'page-two.html',
|
||||
type: 'html'
|
||||
}
|
||||
]
|
||||
},
|
||||
plugins: ['types'],
|
||||
types: {
|
||||
default: {
|
||||
icon: 'ti ti-folder'
|
||||
},
|
||||
html: {
|
||||
icon: 'ti ti-brand-html5 text-danger'
|
||||
},
|
||||
css: {
|
||||
icon: 'ti ti-brand-css3 text-info'
|
||||
},
|
||||
img: {
|
||||
icon: 'ti ti-photo text-success'
|
||||
},
|
||||
js: {
|
||||
icon: 'ti ti-brand-javascript text-warning'
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Context Menu
|
||||
// --------------------------------------------------------------------
|
||||
if (contextMenu.length) {
|
||||
contextMenu.jstree({
|
||||
core: {
|
||||
themes: {
|
||||
name: theme
|
||||
},
|
||||
check_callback: true,
|
||||
data: [
|
||||
{
|
||||
text: 'css',
|
||||
children: [
|
||||
{
|
||||
text: 'app.css',
|
||||
type: 'css'
|
||||
},
|
||||
{
|
||||
text: 'style.css',
|
||||
type: 'css'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
text: 'img',
|
||||
state: {
|
||||
opened: true
|
||||
},
|
||||
children: [
|
||||
{
|
||||
text: 'bg.jpg',
|
||||
type: 'img'
|
||||
},
|
||||
{
|
||||
text: 'logo.png',
|
||||
type: 'img'
|
||||
},
|
||||
{
|
||||
text: 'avatar.png',
|
||||
type: 'img'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
text: 'js',
|
||||
state: {
|
||||
opened: true
|
||||
},
|
||||
children: [
|
||||
{
|
||||
text: 'jquery.js',
|
||||
type: 'js'
|
||||
},
|
||||
{
|
||||
text: 'app.js',
|
||||
type: 'js'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
text: 'index.html',
|
||||
type: 'html'
|
||||
},
|
||||
{
|
||||
text: 'page-one.html',
|
||||
type: 'html'
|
||||
},
|
||||
{
|
||||
text: 'page-two.html',
|
||||
type: 'html'
|
||||
}
|
||||
]
|
||||
},
|
||||
plugins: ['types', 'contextmenu'],
|
||||
types: {
|
||||
default: {
|
||||
icon: 'ti ti-folder'
|
||||
},
|
||||
html: {
|
||||
icon: 'ti ti-brand-html5 text-danger'
|
||||
},
|
||||
css: {
|
||||
icon: 'ti ti-brand-css3 text-info'
|
||||
},
|
||||
img: {
|
||||
icon: 'ti ti-photo text-success'
|
||||
},
|
||||
js: {
|
||||
icon: 'ti ti-brand-javascript text-warning'
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Drag Drop
|
||||
// --------------------------------------------------------------------
|
||||
if (dragDrop.length) {
|
||||
dragDrop.jstree({
|
||||
core: {
|
||||
themes: {
|
||||
name: theme
|
||||
},
|
||||
check_callback: true,
|
||||
data: [
|
||||
{
|
||||
text: 'css',
|
||||
children: [
|
||||
{
|
||||
text: 'app.css',
|
||||
type: 'css'
|
||||
},
|
||||
{
|
||||
text: 'style.css',
|
||||
type: 'css'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
text: 'img',
|
||||
state: {
|
||||
opened: true
|
||||
},
|
||||
children: [
|
||||
{
|
||||
text: 'bg.jpg',
|
||||
type: 'img'
|
||||
},
|
||||
{
|
||||
text: 'logo.png',
|
||||
type: 'img'
|
||||
},
|
||||
{
|
||||
text: 'avatar.png',
|
||||
type: 'img'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
text: 'js',
|
||||
state: {
|
||||
opened: true
|
||||
},
|
||||
children: [
|
||||
{
|
||||
text: 'jquery.js',
|
||||
type: 'js'
|
||||
},
|
||||
{
|
||||
text: 'app.js',
|
||||
type: 'js'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
text: 'index.html',
|
||||
type: 'html'
|
||||
},
|
||||
{
|
||||
text: 'page-one.html',
|
||||
type: 'html'
|
||||
},
|
||||
{
|
||||
text: 'page-two.html',
|
||||
type: 'html'
|
||||
}
|
||||
]
|
||||
},
|
||||
plugins: ['types', 'dnd'],
|
||||
types: {
|
||||
default: {
|
||||
icon: 'ti ti-folder'
|
||||
},
|
||||
html: {
|
||||
icon: 'ti ti-brand-html5 text-danger'
|
||||
},
|
||||
css: {
|
||||
icon: 'ti ti-brand-css3 text-info'
|
||||
},
|
||||
img: {
|
||||
icon: 'ti ti-photo text-success'
|
||||
},
|
||||
js: {
|
||||
icon: 'ti ti-brand-javascript text-warning'
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Checkbox
|
||||
// --------------------------------------------------------------------
|
||||
if (checkboxTree.length) {
|
||||
checkboxTree.jstree({
|
||||
core: {
|
||||
themes: {
|
||||
name: theme
|
||||
},
|
||||
data: [
|
||||
{
|
||||
text: 'css',
|
||||
children: [
|
||||
{
|
||||
text: 'app.css',
|
||||
type: 'css'
|
||||
},
|
||||
{
|
||||
text: 'style.css',
|
||||
type: 'css'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
text: 'img',
|
||||
state: {
|
||||
opened: true
|
||||
},
|
||||
children: [
|
||||
{
|
||||
text: 'bg.jpg',
|
||||
type: 'img'
|
||||
},
|
||||
{
|
||||
text: 'logo.png',
|
||||
type: 'img'
|
||||
},
|
||||
{
|
||||
text: 'avatar.png',
|
||||
type: 'img'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
text: 'js',
|
||||
state: {
|
||||
opened: true
|
||||
},
|
||||
children: [
|
||||
{
|
||||
text: 'jquery.js',
|
||||
type: 'js'
|
||||
},
|
||||
{
|
||||
text: 'app.js',
|
||||
type: 'js'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
text: 'index.html',
|
||||
type: 'html'
|
||||
},
|
||||
{
|
||||
text: 'page-one.html',
|
||||
type: 'html'
|
||||
},
|
||||
{
|
||||
text: 'page-two.html',
|
||||
type: 'html'
|
||||
}
|
||||
]
|
||||
},
|
||||
plugins: ['types', 'checkbox', 'wholerow'],
|
||||
types: {
|
||||
default: {
|
||||
icon: 'ti ti-folder'
|
||||
},
|
||||
html: {
|
||||
icon: 'ti ti-brand-html5 text-danger'
|
||||
},
|
||||
css: {
|
||||
icon: 'ti ti-brand-css3 text-info'
|
||||
},
|
||||
img: {
|
||||
icon: 'ti ti-photo text-success'
|
||||
},
|
||||
js: {
|
||||
icon: 'ti ti-brand-javascript text-warning'
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Ajax Example
|
||||
// --------------------------------------------------------------------
|
||||
if (ajaxTree.length) {
|
||||
ajaxTree.jstree({
|
||||
core: {
|
||||
themes: {
|
||||
name: theme
|
||||
},
|
||||
data: {
|
||||
url: assetsPath + 'json/jstree-data.json',
|
||||
dataType: 'json',
|
||||
data: function (node) {
|
||||
return {
|
||||
id: node.id
|
||||
};
|
||||
}
|
||||
}
|
||||
},
|
||||
plugins: ['types', 'state'],
|
||||
types: {
|
||||
default: {
|
||||
icon: 'ti ti-folder'
|
||||
},
|
||||
html: {
|
||||
icon: 'ti ti-brand-html5 text-danger'
|
||||
},
|
||||
css: {
|
||||
icon: 'ti ti-brand-css3 text-info'
|
||||
},
|
||||
img: {
|
||||
icon: 'ti ti-photo text-success'
|
||||
},
|
||||
js: {
|
||||
icon: 'ti ti-brand-javascript text-warning'
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
@ -1,11 +0,0 @@
|
||||
/**
|
||||
* Form Basic Inputs
|
||||
*/
|
||||
|
||||
'use strict';
|
||||
|
||||
(function () {
|
||||
// Indeterminate checkbox
|
||||
const checkbox = document.getElementById('defaultCheck2');
|
||||
checkbox.indeterminate = true;
|
||||
})();
|
||||
@ -1,115 +0,0 @@
|
||||
/**
|
||||
* Form Layout Vertical
|
||||
*/
|
||||
'use strict';
|
||||
|
||||
(function () {
|
||||
const phoneMaskList = document.querySelectorAll('.phone-mask'),
|
||||
creditCardMask = document.querySelector('.credit-card-mask'),
|
||||
expiryDateMask = document.querySelector('.expiry-date-mask'),
|
||||
cvvMask = document.querySelector('.cvv-code-mask'),
|
||||
datepickerList = document.querySelectorAll('.dob-picker'),
|
||||
formCheckInputPayment = document.querySelectorAll('.form-check-input-payment');
|
||||
|
||||
// Phone Number
|
||||
if (phoneMaskList) {
|
||||
phoneMaskList.forEach(function (phoneMask) {
|
||||
new Cleave(phoneMask, {
|
||||
phone: true,
|
||||
phoneRegionCode: 'US'
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// Credit Card
|
||||
if (creditCardMask) {
|
||||
new Cleave(creditCardMask, {
|
||||
creditCard: true,
|
||||
onCreditCardTypeChanged: function (type) {
|
||||
if (type != '' && type != 'unknown') {
|
||||
document.querySelector('.card-type').innerHTML =
|
||||
'<img src="' + assetsPath + 'img/icons/payments/' + type + '-cc.png" height="28"/>';
|
||||
} else {
|
||||
document.querySelector('.card-type').innerHTML = '';
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Expiry Date Mask
|
||||
if (expiryDateMask) {
|
||||
new Cleave(expiryDateMask, {
|
||||
date: true,
|
||||
delimiter: '/',
|
||||
datePattern: ['m', 'y']
|
||||
});
|
||||
}
|
||||
|
||||
// CVV
|
||||
if (cvvMask) {
|
||||
new Cleave(cvvMask, {
|
||||
numeral: true,
|
||||
numeralPositiveOnly: true
|
||||
});
|
||||
}
|
||||
|
||||
// Flat Picker Birth Date
|
||||
if (datepickerList) {
|
||||
datepickerList.forEach(function (datepicker) {
|
||||
datepicker.flatpickr({
|
||||
monthSelectorType: 'static'
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// Toggle CC Payment Method based on selected option
|
||||
if (formCheckInputPayment) {
|
||||
formCheckInputPayment.forEach(function (paymentInput) {
|
||||
paymentInput.addEventListener('change', function (e) {
|
||||
const paymentInputValue = e.target.value;
|
||||
if (paymentInputValue === 'credit-card') {
|
||||
document.querySelector('#form-credit-card').classList.remove('d-none');
|
||||
} else {
|
||||
document.querySelector('#form-credit-card').classList.add('d-none');
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
})();
|
||||
|
||||
// select2 (jquery)
|
||||
$(function () {
|
||||
// Form sticky actions
|
||||
var topSpacing;
|
||||
const stickyEl = $('.sticky-element');
|
||||
|
||||
// Init custom option check
|
||||
window.Helpers.initCustomOptionCheck();
|
||||
|
||||
// Set topSpacing if the navbar is fixed
|
||||
if (Helpers.isNavbarFixed()) {
|
||||
topSpacing = $('.layout-navbar').height() + 7;
|
||||
} else {
|
||||
topSpacing = 0;
|
||||
}
|
||||
|
||||
// sticky element init (Sticky Layout)
|
||||
if (stickyEl.length) {
|
||||
stickyEl.sticky({
|
||||
topSpacing: topSpacing,
|
||||
zIndex: 9
|
||||
});
|
||||
}
|
||||
|
||||
// Select2 Country
|
||||
var select2 = $('.select2');
|
||||
if (select2.length) {
|
||||
select2.each(function () {
|
||||
var $this = $(this);
|
||||
$this.wrap('<div class="position-relative"></div>').select2({
|
||||
placeholder: 'Select value',
|
||||
dropdownParent: $this.parent()
|
||||
});
|
||||
});
|
||||
}
|
||||
});
|
||||
@ -1,343 +0,0 @@
|
||||
'use strict';
|
||||
|
||||
(function () {
|
||||
// Init custom option check
|
||||
window.Helpers.initCustomOptionCheck();
|
||||
|
||||
// Bootstrap validation example
|
||||
//------------------------------------------------------------------------------------------
|
||||
// const flatPickrEL = $('.flatpickr-validation');
|
||||
const flatPickrList = [].slice.call(document.querySelectorAll('.flatpickr-validation'));
|
||||
// Flat pickr
|
||||
if (flatPickrList) {
|
||||
flatPickrList.forEach(flatPickr => {
|
||||
flatPickr.flatpickr({
|
||||
allowInput: true,
|
||||
monthSelectorType: 'static'
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// Fetch all the forms we want to apply custom Bootstrap validation styles to
|
||||
const bsValidationForms = document.querySelectorAll('.needs-validation');
|
||||
|
||||
// Loop over them and prevent submission
|
||||
Array.prototype.slice.call(bsValidationForms).forEach(function (form) {
|
||||
form.addEventListener(
|
||||
'submit',
|
||||
function (event) {
|
||||
if (!form.checkValidity()) {
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
} else {
|
||||
// Submit your form
|
||||
alert('Submitted!!!');
|
||||
}
|
||||
|
||||
form.classList.add('was-validated');
|
||||
},
|
||||
false
|
||||
);
|
||||
});
|
||||
})();
|
||||
/**
|
||||
* Form Validation (https://formvalidation.io/guide/examples)
|
||||
* ? Primary form validation plugin for this template
|
||||
* ? In this example we've try to covered as many form inputs as we can.
|
||||
* ? Though If we've miss any 3rd party libraries, then refer: https://formvalidation.io/guide/examples/integrating-with-3rd-party-libraries
|
||||
*/
|
||||
//------------------------------------------------------------------------------------------
|
||||
document.addEventListener('DOMContentLoaded', function (e) {
|
||||
(function () {
|
||||
const formValidationExamples = document.getElementById('formValidationExamples'),
|
||||
formValidationSelect2Ele = jQuery(formValidationExamples.querySelector('[name="formValidationSelect2"]')),
|
||||
formValidationTechEle = jQuery(formValidationExamples.querySelector('[name="formValidationTech"]')),
|
||||
formValidationLangEle = formValidationExamples.querySelector('[name="formValidationLang"]'),
|
||||
formValidationHobbiesEle = jQuery(formValidationExamples.querySelector('.selectpicker')),
|
||||
tech = [
|
||||
'ReactJS',
|
||||
'Angular',
|
||||
'VueJS',
|
||||
'Html',
|
||||
'Css',
|
||||
'Sass',
|
||||
'Pug',
|
||||
'Gulp',
|
||||
'Php',
|
||||
'Laravel',
|
||||
'Python',
|
||||
'Bootstrap',
|
||||
'Material Design',
|
||||
'NodeJS'
|
||||
];
|
||||
|
||||
const fv = FormValidation.formValidation(formValidationExamples, {
|
||||
fields: {
|
||||
formValidationName: {
|
||||
validators: {
|
||||
notEmpty: {
|
||||
message: 'Please enter your name'
|
||||
},
|
||||
stringLength: {
|
||||
min: 6,
|
||||
max: 30,
|
||||
message: 'The name must be more than 6 and less than 30 characters long'
|
||||
},
|
||||
regexp: {
|
||||
regexp: /^[a-zA-Z0-9 ]+$/,
|
||||
message: 'The name can only consist of alphabetical, number and space'
|
||||
}
|
||||
}
|
||||
},
|
||||
formValidationEmail: {
|
||||
validators: {
|
||||
notEmpty: {
|
||||
message: 'Please enter your email'
|
||||
},
|
||||
emailAddress: {
|
||||
message: 'The value is not a valid email address'
|
||||
}
|
||||
}
|
||||
},
|
||||
formValidationPass: {
|
||||
validators: {
|
||||
notEmpty: {
|
||||
message: 'Please enter your password'
|
||||
}
|
||||
}
|
||||
},
|
||||
formValidationConfirmPass: {
|
||||
validators: {
|
||||
notEmpty: {
|
||||
message: 'Please confirm password'
|
||||
},
|
||||
identical: {
|
||||
compare: function () {
|
||||
return formValidationExamples.querySelector('[name="formValidationPass"]').value;
|
||||
},
|
||||
message: 'The password and its confirm are not the same'
|
||||
}
|
||||
}
|
||||
},
|
||||
formValidationFile: {
|
||||
validators: {
|
||||
notEmpty: {
|
||||
message: 'Please select the file'
|
||||
}
|
||||
}
|
||||
},
|
||||
formValidationDob: {
|
||||
validators: {
|
||||
notEmpty: {
|
||||
message: 'Please select your DOB'
|
||||
},
|
||||
date: {
|
||||
format: 'YYYY/MM/DD',
|
||||
message: 'The value is not a valid date'
|
||||
}
|
||||
}
|
||||
},
|
||||
formValidationSelect2: {
|
||||
validators: {
|
||||
notEmpty: {
|
||||
message: 'Please select your country'
|
||||
}
|
||||
}
|
||||
},
|
||||
formValidationLang: {
|
||||
validators: {
|
||||
notEmpty: {
|
||||
message: 'Please add your language'
|
||||
}
|
||||
}
|
||||
},
|
||||
formValidationTech: {
|
||||
validators: {
|
||||
notEmpty: {
|
||||
message: 'Please select technology'
|
||||
}
|
||||
}
|
||||
},
|
||||
formValidationHobbies: {
|
||||
validators: {
|
||||
notEmpty: {
|
||||
message: 'Please select your hobbies'
|
||||
}
|
||||
}
|
||||
},
|
||||
formValidationBio: {
|
||||
validators: {
|
||||
notEmpty: {
|
||||
message: 'Please enter your bio'
|
||||
},
|
||||
stringLength: {
|
||||
min: 100,
|
||||
max: 500,
|
||||
message: 'The bio must be more than 100 and less than 500 characters long'
|
||||
}
|
||||
}
|
||||
},
|
||||
formValidationGender: {
|
||||
validators: {
|
||||
notEmpty: {
|
||||
message: 'Please select your gender'
|
||||
}
|
||||
}
|
||||
},
|
||||
formValidationPlan: {
|
||||
validators: {
|
||||
notEmpty: {
|
||||
message: 'Please select your preferred plan'
|
||||
}
|
||||
}
|
||||
},
|
||||
formValidationSwitch: {
|
||||
validators: {
|
||||
notEmpty: {
|
||||
message: 'Please select your preference'
|
||||
}
|
||||
}
|
||||
},
|
||||
formValidationCheckbox: {
|
||||
validators: {
|
||||
notEmpty: {
|
||||
message: 'Please confirm our T&C'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
plugins: {
|
||||
trigger: new FormValidation.plugins.Trigger(),
|
||||
bootstrap5: new FormValidation.plugins.Bootstrap5({
|
||||
// Use this for enabling/changing valid/invalid class
|
||||
// eleInvalidClass: '',
|
||||
eleValidClass: '',
|
||||
rowSelector: function (field, ele) {
|
||||
// field is the field name & ele is the field element
|
||||
switch (field) {
|
||||
case 'formValidationName':
|
||||
case 'formValidationEmail':
|
||||
case 'formValidationPass':
|
||||
case 'formValidationConfirmPass':
|
||||
case 'formValidationFile':
|
||||
case 'formValidationDob':
|
||||
case 'formValidationSelect2':
|
||||
case 'formValidationLang':
|
||||
case 'formValidationTech':
|
||||
case 'formValidationHobbies':
|
||||
case 'formValidationBio':
|
||||
case 'formValidationGender':
|
||||
return '.col-md-6';
|
||||
case 'formValidationPlan':
|
||||
return '.col-xl-3';
|
||||
case 'formValidationSwitch':
|
||||
case 'formValidationCheckbox':
|
||||
return '.col-12';
|
||||
default:
|
||||
return '.row';
|
||||
}
|
||||
}
|
||||
}),
|
||||
submitButton: new FormValidation.plugins.SubmitButton(),
|
||||
// Submit the form when all fields are valid
|
||||
defaultSubmit: new FormValidation.plugins.DefaultSubmit(),
|
||||
autoFocus: new FormValidation.plugins.AutoFocus()
|
||||
},
|
||||
init: instance => {
|
||||
instance.on('plugins.message.placed', function (e) {
|
||||
//* Move the error message out of the `input-group` element
|
||||
if (e.element.parentElement.classList.contains('input-group')) {
|
||||
// `e.field`: The field name
|
||||
// `e.messageElement`: The message element
|
||||
// `e.element`: The field element
|
||||
e.element.parentElement.insertAdjacentElement('afterend', e.messageElement);
|
||||
}
|
||||
//* Move the error message out of the `row` element for custom-options
|
||||
if (e.element.parentElement.parentElement.classList.contains('custom-option')) {
|
||||
e.element.closest('.row').insertAdjacentElement('afterend', e.messageElement);
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
//? Revalidation third-party libs inputs on change trigger
|
||||
|
||||
// Flatpickr
|
||||
flatpickr(formValidationExamples.querySelector('[name="formValidationDob"]'), {
|
||||
enableTime: false,
|
||||
// See https://flatpickr.js.org/formatting/
|
||||
dateFormat: 'Y/m/d',
|
||||
// After selecting a date, we need to revalidate the field
|
||||
onChange: function () {
|
||||
fv.revalidateField('formValidationDob');
|
||||
}
|
||||
});
|
||||
|
||||
// Select2 (Country)
|
||||
if (formValidationSelect2Ele.length) {
|
||||
formValidationSelect2Ele.wrap('<div class="position-relative"></div>');
|
||||
formValidationSelect2Ele
|
||||
.select2({
|
||||
placeholder: 'Select country',
|
||||
dropdownParent: formValidationSelect2Ele.parent()
|
||||
})
|
||||
.on('change.select2', function () {
|
||||
// Revalidate the color field when an option is chosen
|
||||
fv.revalidateField('formValidationSelect2');
|
||||
});
|
||||
}
|
||||
|
||||
// Typeahead
|
||||
|
||||
// String Matcher function for typeahead
|
||||
const substringMatcher = function (strs) {
|
||||
return function findMatches(q, cb) {
|
||||
var matches, substrRegex;
|
||||
matches = [];
|
||||
substrRegex = new RegExp(q, 'i');
|
||||
$.each(strs, function (i, str) {
|
||||
if (substrRegex.test(str)) {
|
||||
matches.push(str);
|
||||
}
|
||||
});
|
||||
|
||||
cb(matches);
|
||||
};
|
||||
};
|
||||
|
||||
// Check if rtl
|
||||
if (isRtl) {
|
||||
const typeaheadList = [].slice.call(document.querySelectorAll('.typeahead'));
|
||||
|
||||
// Flat pickr
|
||||
if (typeaheadList) {
|
||||
typeaheadList.forEach(typeahead => {
|
||||
typeahead.setAttribute('dir', 'rtl');
|
||||
});
|
||||
}
|
||||
}
|
||||
formValidationTechEle.typeahead(
|
||||
{
|
||||
hint: !isRtl,
|
||||
highlight: true,
|
||||
minLength: 1
|
||||
},
|
||||
{
|
||||
name: 'tech',
|
||||
source: substringMatcher(tech)
|
||||
}
|
||||
);
|
||||
|
||||
// Tagify
|
||||
let formValidationLangTagify = new Tagify(formValidationLangEle);
|
||||
formValidationLangEle.addEventListener('change', onChange);
|
||||
function onChange() {
|
||||
fv.revalidateField('formValidationLang');
|
||||
}
|
||||
|
||||
//Bootstrap select
|
||||
formValidationHobbiesEle.on('changed.bs.select', function (e, clickedIndex, isSelected, previousValue) {
|
||||
fv.revalidateField('formValidationHobbies');
|
||||
});
|
||||
})();
|
||||
});
|
||||
@ -1,164 +0,0 @@
|
||||
/**
|
||||
* Form Wizard
|
||||
*/
|
||||
|
||||
'use strict';
|
||||
|
||||
$(function () {
|
||||
const select2 = $('.select2'),
|
||||
selectPicker = $('.selectpicker');
|
||||
|
||||
// Bootstrap select
|
||||
if (selectPicker.length) {
|
||||
selectPicker.selectpicker();
|
||||
}
|
||||
|
||||
// select2
|
||||
if (select2.length) {
|
||||
select2.each(function () {
|
||||
var $this = $(this);
|
||||
$this.wrap('<div class="position-relative"></div>');
|
||||
$this.select2({
|
||||
placeholder: 'Select value',
|
||||
dropdownParent: $this.parent()
|
||||
});
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
(function () {
|
||||
// Icons Wizard
|
||||
// --------------------------------------------------------------------
|
||||
const wizardIcons = document.querySelector('.wizard-icons-example');
|
||||
|
||||
if (typeof wizardIcons !== undefined && wizardIcons !== null) {
|
||||
const wizardIconsBtnNextList = [].slice.call(wizardIcons.querySelectorAll('.btn-next')),
|
||||
wizardIconsBtnPrevList = [].slice.call(wizardIcons.querySelectorAll('.btn-prev')),
|
||||
wizardIconsBtnSubmit = wizardIcons.querySelector('.btn-submit');
|
||||
|
||||
const iconsStepper = new Stepper(wizardIcons, {
|
||||
linear: false
|
||||
});
|
||||
if (wizardIconsBtnNextList) {
|
||||
wizardIconsBtnNextList.forEach(wizardIconsBtnNext => {
|
||||
wizardIconsBtnNext.addEventListener('click', event => {
|
||||
iconsStepper.next();
|
||||
});
|
||||
});
|
||||
}
|
||||
if (wizardIconsBtnPrevList) {
|
||||
wizardIconsBtnPrevList.forEach(wizardIconsBtnPrev => {
|
||||
wizardIconsBtnPrev.addEventListener('click', event => {
|
||||
iconsStepper.previous();
|
||||
});
|
||||
});
|
||||
}
|
||||
if (wizardIconsBtnSubmit) {
|
||||
wizardIconsBtnSubmit.addEventListener('click', event => {
|
||||
alert('Submitted..!!');
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// Vertical Icons Wizard
|
||||
// --------------------------------------------------------------------
|
||||
const wizardIconsVertical = document.querySelector('.wizard-vertical-icons-example');
|
||||
|
||||
if (typeof wizardIconsVertical !== undefined && wizardIconsVertical !== null) {
|
||||
const wizardIconsVerticalBtnNextList = [].slice.call(wizardIconsVertical.querySelectorAll('.btn-next')),
|
||||
wizardIconsVerticalBtnPrevList = [].slice.call(wizardIconsVertical.querySelectorAll('.btn-prev')),
|
||||
wizardIconsVerticalBtnSubmit = wizardIconsVertical.querySelector('.btn-submit');
|
||||
|
||||
const verticalIconsStepper = new Stepper(wizardIconsVertical, {
|
||||
linear: false
|
||||
});
|
||||
|
||||
if (wizardIconsVerticalBtnNextList) {
|
||||
wizardIconsVerticalBtnNextList.forEach(wizardIconsVerticalBtnNext => {
|
||||
wizardIconsVerticalBtnNext.addEventListener('click', event => {
|
||||
verticalIconsStepper.next();
|
||||
});
|
||||
});
|
||||
}
|
||||
if (wizardIconsVerticalBtnPrevList) {
|
||||
wizardIconsVerticalBtnPrevList.forEach(wizardIconsVerticalBtnPrev => {
|
||||
wizardIconsVerticalBtnPrev.addEventListener('click', event => {
|
||||
verticalIconsStepper.previous();
|
||||
});
|
||||
});
|
||||
}
|
||||
if (wizardIconsVerticalBtnSubmit) {
|
||||
wizardIconsVerticalBtnSubmit.addEventListener('click', event => {
|
||||
alert('Submitted..!!');
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// Icons Modern Wizard
|
||||
// --------------------------------------------------------------------
|
||||
const wizardIconsModern = document.querySelector('.wizard-modern-icons-example');
|
||||
|
||||
if (typeof wizardIconsModern !== undefined && wizardIconsModern !== null) {
|
||||
const wizardIconsModernBtnNextList = [].slice.call(wizardIconsModern.querySelectorAll('.btn-next')),
|
||||
wizardIconsModernBtnPrevList = [].slice.call(wizardIconsModern.querySelectorAll('.btn-prev')),
|
||||
wizardIconsModernBtnSubmit = wizardIconsModern.querySelector('.btn-submit');
|
||||
|
||||
const modernIconsStepper = new Stepper(wizardIconsModern, {
|
||||
linear: false
|
||||
});
|
||||
|
||||
if (wizardIconsModernBtnNextList) {
|
||||
wizardIconsModernBtnNextList.forEach(wizardIconsModernBtnNext => {
|
||||
wizardIconsModernBtnNext.addEventListener('click', event => {
|
||||
modernIconsStepper.next();
|
||||
});
|
||||
});
|
||||
}
|
||||
if (wizardIconsModernBtnPrevList) {
|
||||
wizardIconsModernBtnPrevList.forEach(wizardIconsModernBtnPrev => {
|
||||
wizardIconsModernBtnPrev.addEventListener('click', event => {
|
||||
modernIconsStepper.previous();
|
||||
});
|
||||
});
|
||||
}
|
||||
if (wizardIconsModernBtnSubmit) {
|
||||
wizardIconsModernBtnSubmit.addEventListener('click', event => {
|
||||
alert('Submitted..!!');
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// Icons Modern Wizard
|
||||
// --------------------------------------------------------------------
|
||||
const wizardIconsModernVertical = document.querySelector('.wizard-modern-vertical-icons-example');
|
||||
|
||||
if (typeof wizardIconsModernVertical !== undefined && wizardIconsModernVertical !== null) {
|
||||
const wizardIconsModernVerticalBtnNextList = [].slice.call(wizardIconsModernVertical.querySelectorAll('.btn-next')),
|
||||
wizardIconsModernVerticalBtnPrevList = [].slice.call(wizardIconsModernVertical.querySelectorAll('.btn-prev')),
|
||||
wizardIconsModernVerticalBtnSubmit = wizardIconsModernVertical.querySelector('.btn-submit');
|
||||
|
||||
const verticalModernIconsStepper = new Stepper(wizardIconsModernVertical, {
|
||||
linear: false
|
||||
});
|
||||
|
||||
if (wizardIconsModernVerticalBtnNextList) {
|
||||
wizardIconsModernVerticalBtnNextList.forEach(wizardIconsModernVerticalBtnNext => {
|
||||
wizardIconsModernVerticalBtnNext.addEventListener('click', event => {
|
||||
verticalModernIconsStepper.next();
|
||||
});
|
||||
});
|
||||
}
|
||||
if (wizardIconsModernVerticalBtnPrevList) {
|
||||
wizardIconsModernVerticalBtnPrevList.forEach(wizardIconsModernVerticalBtnPrev => {
|
||||
wizardIconsModernVerticalBtnPrev.addEventListener('click', event => {
|
||||
verticalModernIconsStepper.previous();
|
||||
});
|
||||
});
|
||||
}
|
||||
if (wizardIconsModernVerticalBtnSubmit) {
|
||||
wizardIconsModernVerticalBtnSubmit.addEventListener('click', event => {
|
||||
alert('Submitted..!!');
|
||||
});
|
||||
}
|
||||
}
|
||||
})();
|
||||
@ -1,155 +0,0 @@
|
||||
/**
|
||||
* Form Wizard
|
||||
*/
|
||||
|
||||
'use strict';
|
||||
|
||||
$(function () {
|
||||
const select2 = $('.select2'),
|
||||
selectPicker = $('.selectpicker');
|
||||
|
||||
// Bootstrap select
|
||||
if (selectPicker.length) {
|
||||
selectPicker.selectpicker();
|
||||
}
|
||||
|
||||
// select2
|
||||
if (select2.length) {
|
||||
select2.each(function () {
|
||||
var $this = $(this);
|
||||
$this.wrap('<div class="position-relative"></div>');
|
||||
$this.select2({
|
||||
placeholder: 'Select value',
|
||||
dropdownParent: $this.parent()
|
||||
});
|
||||
});
|
||||
}
|
||||
});
|
||||
(function () {
|
||||
// Numbered Wizard
|
||||
// --------------------------------------------------------------------
|
||||
const wizardNumbered = document.querySelector('.wizard-numbered'),
|
||||
wizardNumberedBtnNextList = [].slice.call(wizardNumbered.querySelectorAll('.btn-next')),
|
||||
wizardNumberedBtnPrevList = [].slice.call(wizardNumbered.querySelectorAll('.btn-prev')),
|
||||
wizardNumberedBtnSubmit = wizardNumbered.querySelector('.btn-submit');
|
||||
|
||||
if (typeof wizardNumbered !== undefined && wizardNumbered !== null) {
|
||||
const numberedStepper = new Stepper(wizardNumbered, {
|
||||
linear: false
|
||||
});
|
||||
if (wizardNumberedBtnNextList) {
|
||||
wizardNumberedBtnNextList.forEach(wizardNumberedBtnNext => {
|
||||
wizardNumberedBtnNext.addEventListener('click', event => {
|
||||
numberedStepper.next();
|
||||
});
|
||||
});
|
||||
}
|
||||
if (wizardNumberedBtnPrevList) {
|
||||
wizardNumberedBtnPrevList.forEach(wizardNumberedBtnPrev => {
|
||||
wizardNumberedBtnPrev.addEventListener('click', event => {
|
||||
numberedStepper.previous();
|
||||
});
|
||||
});
|
||||
}
|
||||
if (wizardNumberedBtnSubmit) {
|
||||
wizardNumberedBtnSubmit.addEventListener('click', event => {
|
||||
alert('Submitted..!!');
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// Vertical Wizard
|
||||
// --------------------------------------------------------------------
|
||||
const wizardVertical = document.querySelector('.wizard-vertical'),
|
||||
wizardVerticalBtnNextList = [].slice.call(wizardVertical.querySelectorAll('.btn-next')),
|
||||
wizardVerticalBtnPrevList = [].slice.call(wizardVertical.querySelectorAll('.btn-prev')),
|
||||
wizardVerticalBtnSubmit = wizardVertical.querySelector('.btn-submit');
|
||||
|
||||
if (typeof wizardVertical !== undefined && wizardVertical !== null) {
|
||||
const verticalStepper = new Stepper(wizardVertical, {
|
||||
linear: false
|
||||
});
|
||||
if (wizardVerticalBtnNextList) {
|
||||
wizardVerticalBtnNextList.forEach(wizardVerticalBtnNext => {
|
||||
wizardVerticalBtnNext.addEventListener('click', event => {
|
||||
verticalStepper.next();
|
||||
});
|
||||
});
|
||||
}
|
||||
if (wizardVerticalBtnPrevList) {
|
||||
wizardVerticalBtnPrevList.forEach(wizardVerticalBtnPrev => {
|
||||
wizardVerticalBtnPrev.addEventListener('click', event => {
|
||||
verticalStepper.previous();
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
if (wizardVerticalBtnSubmit) {
|
||||
wizardVerticalBtnSubmit.addEventListener('click', event => {
|
||||
alert('Submitted..!!');
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// Modern Wizard
|
||||
// --------------------------------------------------------------------
|
||||
const wizardModern = document.querySelector('.wizard-modern-example'),
|
||||
wizardModernBtnNextList = [].slice.call(wizardModern.querySelectorAll('.btn-next')),
|
||||
wizardModernBtnPrevList = [].slice.call(wizardModern.querySelectorAll('.btn-prev')),
|
||||
wizardModernBtnSubmit = wizardModern.querySelector('.btn-submit');
|
||||
if (typeof wizardModern !== undefined && wizardModern !== null) {
|
||||
const modernStepper = new Stepper(wizardModern, {
|
||||
linear: false
|
||||
});
|
||||
if (wizardModernBtnNextList) {
|
||||
wizardModernBtnNextList.forEach(wizardModernBtnNext => {
|
||||
wizardModernBtnNext.addEventListener('click', event => {
|
||||
modernStepper.next();
|
||||
});
|
||||
});
|
||||
}
|
||||
if (wizardModernBtnPrevList) {
|
||||
wizardModernBtnPrevList.forEach(wizardModernBtnPrev => {
|
||||
wizardModernBtnPrev.addEventListener('click', event => {
|
||||
modernStepper.previous();
|
||||
});
|
||||
});
|
||||
}
|
||||
if (wizardModernBtnSubmit) {
|
||||
wizardModernBtnSubmit.addEventListener('click', event => {
|
||||
alert('Submitted..!!');
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// Modern Vertical Wizard
|
||||
// --------------------------------------------------------------------
|
||||
const wizardModernVertical = document.querySelector('.wizard-modern-vertical'),
|
||||
wizardModernVerticalBtnNextList = [].slice.call(wizardModernVertical.querySelectorAll('.btn-next')),
|
||||
wizardModernVerticalBtnPrevList = [].slice.call(wizardModernVertical.querySelectorAll('.btn-prev')),
|
||||
wizardModernVerticalBtnSubmit = wizardModernVertical.querySelector('.btn-submit');
|
||||
if (typeof wizardModernVertical !== undefined && wizardModernVertical !== null) {
|
||||
const modernVerticalStepper = new Stepper(wizardModernVertical, {
|
||||
linear: false
|
||||
});
|
||||
if (wizardModernVerticalBtnNextList) {
|
||||
wizardModernVerticalBtnNextList.forEach(wizardModernVerticalBtnNext => {
|
||||
wizardModernVerticalBtnNext.addEventListener('click', event => {
|
||||
modernVerticalStepper.next();
|
||||
});
|
||||
});
|
||||
}
|
||||
if (wizardModernVerticalBtnPrevList) {
|
||||
wizardModernVerticalBtnPrevList.forEach(wizardModernVerticalBtnPrev => {
|
||||
wizardModernVerticalBtnPrev.addEventListener('click', event => {
|
||||
modernVerticalStepper.previous();
|
||||
});
|
||||
});
|
||||
}
|
||||
if (wizardModernVerticalBtnSubmit) {
|
||||
wizardModernVerticalBtnSubmit.addEventListener('click', event => {
|
||||
alert('Submitted..!!');
|
||||
});
|
||||
}
|
||||
}
|
||||
})();
|
||||
@ -1,282 +0,0 @@
|
||||
/**
|
||||
* Form Wizard
|
||||
*/
|
||||
|
||||
'use strict';
|
||||
|
||||
(function () {
|
||||
const select2 = $('.select2'),
|
||||
selectPicker = $('.selectpicker');
|
||||
|
||||
// Wizard Validation
|
||||
// --------------------------------------------------------------------
|
||||
const wizardValidation = document.querySelector('#wizard-validation');
|
||||
if (typeof wizardValidation !== undefined && wizardValidation !== null) {
|
||||
// Wizard form
|
||||
const wizardValidationForm = wizardValidation.querySelector('#wizard-validation-form');
|
||||
// Wizard steps
|
||||
const wizardValidationFormStep1 = wizardValidationForm.querySelector('#account-details-validation');
|
||||
const wizardValidationFormStep2 = wizardValidationForm.querySelector('#personal-info-validation');
|
||||
const wizardValidationFormStep3 = wizardValidationForm.querySelector('#social-links-validation');
|
||||
// Wizard next prev button
|
||||
const wizardValidationNext = [].slice.call(wizardValidationForm.querySelectorAll('.btn-next'));
|
||||
const wizardValidationPrev = [].slice.call(wizardValidationForm.querySelectorAll('.btn-prev'));
|
||||
|
||||
const validationStepper = new Stepper(wizardValidation, {
|
||||
linear: true
|
||||
});
|
||||
|
||||
// Account details
|
||||
const FormValidation1 = FormValidation.formValidation(wizardValidationFormStep1, {
|
||||
fields: {
|
||||
formValidationUsername: {
|
||||
validators: {
|
||||
notEmpty: {
|
||||
message: 'The name is required'
|
||||
},
|
||||
stringLength: {
|
||||
min: 6,
|
||||
max: 30,
|
||||
message: 'The name must be more than 6 and less than 30 characters long'
|
||||
},
|
||||
regexp: {
|
||||
regexp: /^[a-zA-Z0-9 ]+$/,
|
||||
message: 'The name can only consist of alphabetical, number and space'
|
||||
}
|
||||
}
|
||||
},
|
||||
formValidationEmail: {
|
||||
validators: {
|
||||
notEmpty: {
|
||||
message: 'The Email is required'
|
||||
},
|
||||
emailAddress: {
|
||||
message: 'The value is not a valid email address'
|
||||
}
|
||||
}
|
||||
},
|
||||
formValidationPass: {
|
||||
validators: {
|
||||
notEmpty: {
|
||||
message: 'The password is required'
|
||||
}
|
||||
}
|
||||
},
|
||||
formValidationConfirmPass: {
|
||||
validators: {
|
||||
notEmpty: {
|
||||
message: 'The Confirm Password is required'
|
||||
},
|
||||
identical: {
|
||||
compare: function () {
|
||||
return wizardValidationFormStep1.querySelector('[name="formValidationPass"]').value;
|
||||
},
|
||||
message: 'The password and its confirm are not the same'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
plugins: {
|
||||
trigger: new FormValidation.plugins.Trigger(),
|
||||
bootstrap5: new FormValidation.plugins.Bootstrap5({
|
||||
// Use this for enabling/changing valid/invalid class
|
||||
// eleInvalidClass: '',
|
||||
eleValidClass: '',
|
||||
rowSelector: '.col-sm-6'
|
||||
}),
|
||||
autoFocus: new FormValidation.plugins.AutoFocus(),
|
||||
submitButton: new FormValidation.plugins.SubmitButton()
|
||||
},
|
||||
init: instance => {
|
||||
instance.on('plugins.message.placed', function (e) {
|
||||
//* Move the error message out of the `input-group` element
|
||||
if (e.element.parentElement.classList.contains('input-group')) {
|
||||
e.element.parentElement.insertAdjacentElement('afterend', e.messageElement);
|
||||
}
|
||||
});
|
||||
}
|
||||
}).on('core.form.valid', function () {
|
||||
// Jump to the next step when all fields in the current step are valid
|
||||
validationStepper.next();
|
||||
});
|
||||
|
||||
// Personal info
|
||||
const FormValidation2 = FormValidation.formValidation(wizardValidationFormStep2, {
|
||||
fields: {
|
||||
formValidationFirstName: {
|
||||
validators: {
|
||||
notEmpty: {
|
||||
message: 'The first name is required'
|
||||
}
|
||||
}
|
||||
},
|
||||
formValidationLastName: {
|
||||
validators: {
|
||||
notEmpty: {
|
||||
message: 'The last name is required'
|
||||
}
|
||||
}
|
||||
},
|
||||
formValidationCountry: {
|
||||
validators: {
|
||||
notEmpty: {
|
||||
message: 'The Country is required'
|
||||
}
|
||||
}
|
||||
},
|
||||
formValidationLanguage: {
|
||||
validators: {
|
||||
notEmpty: {
|
||||
message: 'The Languages is required'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
plugins: {
|
||||
trigger: new FormValidation.plugins.Trigger(),
|
||||
bootstrap5: new FormValidation.plugins.Bootstrap5({
|
||||
// Use this for enabling/changing valid/invalid class
|
||||
// eleInvalidClass: '',
|
||||
eleValidClass: '',
|
||||
rowSelector: '.col-sm-6'
|
||||
}),
|
||||
autoFocus: new FormValidation.plugins.AutoFocus(),
|
||||
submitButton: new FormValidation.plugins.SubmitButton()
|
||||
}
|
||||
}).on('core.form.valid', function () {
|
||||
// Jump to the next step when all fields in the current step are valid
|
||||
validationStepper.next();
|
||||
});
|
||||
|
||||
// Bootstrap Select (i.e Language select)
|
||||
if (selectPicker.length) {
|
||||
selectPicker.each(function () {
|
||||
var $this = $(this);
|
||||
$this.selectpicker().on('change', function () {
|
||||
FormValidation2.revalidateField('formValidationLanguage');
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// select2
|
||||
if (select2.length) {
|
||||
select2.each(function () {
|
||||
var $this = $(this);
|
||||
$this.wrap('<div class="position-relative"></div>');
|
||||
$this
|
||||
.select2({
|
||||
placeholder: 'Select an country',
|
||||
dropdownParent: $this.parent()
|
||||
})
|
||||
.on('change.select2', function () {
|
||||
// Revalidate the color field when an option is chosen
|
||||
FormValidation2.revalidateField('formValidationCountry');
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// Social links
|
||||
const FormValidation3 = FormValidation.formValidation(wizardValidationFormStep3, {
|
||||
fields: {
|
||||
formValidationTwitter: {
|
||||
validators: {
|
||||
notEmpty: {
|
||||
message: 'The Twitter URL is required'
|
||||
},
|
||||
uri: {
|
||||
message: 'The URL is not proper'
|
||||
}
|
||||
}
|
||||
},
|
||||
formValidationFacebook: {
|
||||
validators: {
|
||||
notEmpty: {
|
||||
message: 'The Facebook URL is required'
|
||||
},
|
||||
uri: {
|
||||
message: 'The URL is not proper'
|
||||
}
|
||||
}
|
||||
},
|
||||
formValidationGoogle: {
|
||||
validators: {
|
||||
notEmpty: {
|
||||
message: 'The Google URL is required'
|
||||
},
|
||||
uri: {
|
||||
message: 'The URL is not proper'
|
||||
}
|
||||
}
|
||||
},
|
||||
formValidationLinkedIn: {
|
||||
validators: {
|
||||
notEmpty: {
|
||||
message: 'The LinkedIn URL is required'
|
||||
},
|
||||
uri: {
|
||||
message: 'The URL is not proper'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
plugins: {
|
||||
trigger: new FormValidation.plugins.Trigger(),
|
||||
bootstrap5: new FormValidation.plugins.Bootstrap5({
|
||||
// Use this for enabling/changing valid/invalid class
|
||||
// eleInvalidClass: '',
|
||||
eleValidClass: '',
|
||||
rowSelector: '.col-sm-6'
|
||||
}),
|
||||
autoFocus: new FormValidation.plugins.AutoFocus(),
|
||||
submitButton: new FormValidation.plugins.SubmitButton()
|
||||
}
|
||||
}).on('core.form.valid', function () {
|
||||
// You can submit the form
|
||||
// wizardValidationForm.submit()
|
||||
// or send the form data to server via an Ajax request
|
||||
// To make the demo simple, I just placed an alert
|
||||
alert('Submitted..!!');
|
||||
});
|
||||
|
||||
wizardValidationNext.forEach(item => {
|
||||
item.addEventListener('click', event => {
|
||||
// When click the Next button, we will validate the current step
|
||||
switch (validationStepper._currentIndex) {
|
||||
case 0:
|
||||
FormValidation1.validate();
|
||||
break;
|
||||
|
||||
case 1:
|
||||
FormValidation2.validate();
|
||||
break;
|
||||
|
||||
case 2:
|
||||
FormValidation3.validate();
|
||||
break;
|
||||
|
||||
default:
|
||||
break;
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
wizardValidationPrev.forEach(item => {
|
||||
item.addEventListener('click', event => {
|
||||
switch (validationStepper._currentIndex) {
|
||||
case 2:
|
||||
validationStepper.previous();
|
||||
break;
|
||||
|
||||
case 1:
|
||||
validationStepper.previous();
|
||||
break;
|
||||
|
||||
case 0:
|
||||
|
||||
default:
|
||||
break;
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
})();
|
||||
@ -1,93 +0,0 @@
|
||||
/**
|
||||
* Form Editors
|
||||
*/
|
||||
|
||||
'use strict';
|
||||
|
||||
(function () {
|
||||
// Snow Theme
|
||||
// --------------------------------------------------------------------
|
||||
const snowEditor = new Quill('#snow-editor', {
|
||||
bounds: '#snow-editor',
|
||||
modules: {
|
||||
formula: true,
|
||||
toolbar: '#snow-toolbar'
|
||||
},
|
||||
theme: 'snow'
|
||||
});
|
||||
|
||||
// Bubble Theme
|
||||
// --------------------------------------------------------------------
|
||||
const bubbleEditor = new Quill('#bubble-editor', {
|
||||
modules: {
|
||||
toolbar: '#bubble-toolbar'
|
||||
},
|
||||
theme: 'bubble'
|
||||
});
|
||||
|
||||
// Full Toolbar
|
||||
// --------------------------------------------------------------------
|
||||
const fullToolbar = [
|
||||
[
|
||||
{
|
||||
font: []
|
||||
},
|
||||
{
|
||||
size: []
|
||||
}
|
||||
],
|
||||
['bold', 'italic', 'underline', 'strike'],
|
||||
[
|
||||
{
|
||||
color: []
|
||||
},
|
||||
{
|
||||
background: []
|
||||
}
|
||||
],
|
||||
[
|
||||
{
|
||||
script: 'super'
|
||||
},
|
||||
{
|
||||
script: 'sub'
|
||||
}
|
||||
],
|
||||
[
|
||||
{
|
||||
header: '1'
|
||||
},
|
||||
{
|
||||
header: '2'
|
||||
},
|
||||
'blockquote',
|
||||
'code-block'
|
||||
],
|
||||
[
|
||||
{
|
||||
list: 'ordered'
|
||||
},
|
||||
{
|
||||
list: 'bullet'
|
||||
},
|
||||
{
|
||||
indent: '-1'
|
||||
},
|
||||
{
|
||||
indent: '+1'
|
||||
}
|
||||
],
|
||||
[{ direction: 'rtl' }],
|
||||
['link', 'image', 'video', 'formula'],
|
||||
['clean']
|
||||
];
|
||||
const fullEditor = new Quill('#full-editor', {
|
||||
bounds: '#full-editor',
|
||||
placeholder: 'Type Something...',
|
||||
modules: {
|
||||
formula: true,
|
||||
toolbar: fullToolbar
|
||||
},
|
||||
theme: 'snow'
|
||||
});
|
||||
})();
|
||||
@ -1,164 +0,0 @@
|
||||
/**
|
||||
* Form Extras
|
||||
*/
|
||||
|
||||
'use strict';
|
||||
|
||||
(function () {
|
||||
const textarea = document.querySelector('#autosize-demo'),
|
||||
creditCard = document.querySelector('.credit-card-mask'),
|
||||
phoneMask = document.querySelector('.phone-number-mask'),
|
||||
dateMask = document.querySelector('.date-mask'),
|
||||
timeMask = document.querySelector('.time-mask'),
|
||||
numeralMask = document.querySelector('.numeral-mask'),
|
||||
blockMask = document.querySelector('.block-mask'),
|
||||
delimiterMask = document.querySelector('.delimiter-mask'),
|
||||
customDelimiter = document.querySelector('.custom-delimiter-mask'),
|
||||
prefixMask = document.querySelector('.prefix-mask');
|
||||
|
||||
// Autosize
|
||||
// --------------------------------------------------------------------
|
||||
if (textarea) {
|
||||
autosize(textarea);
|
||||
}
|
||||
|
||||
// Cleave JS Input Mask
|
||||
// --------------------------------------------------------------------
|
||||
|
||||
// Credit Card
|
||||
if (creditCard) {
|
||||
new Cleave(creditCard, {
|
||||
creditCard: true,
|
||||
onCreditCardTypeChanged: function (type) {
|
||||
if (type != '' && type != 'unknown') {
|
||||
document.querySelector('.card-type').innerHTML =
|
||||
'<img src="' + assetsPath + 'img/icons/payments/' + type + '-cc.png" height="28"/>';
|
||||
} else {
|
||||
document.querySelector('.card-type').innerHTML = '';
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Phone Number
|
||||
if (phoneMask) {
|
||||
new Cleave(phoneMask, {
|
||||
phone: true,
|
||||
phoneRegionCode: 'US'
|
||||
});
|
||||
}
|
||||
|
||||
// Date
|
||||
if (dateMask) {
|
||||
new Cleave(dateMask, {
|
||||
date: true,
|
||||
delimiter: '-',
|
||||
datePattern: ['Y', 'm', 'd']
|
||||
});
|
||||
}
|
||||
|
||||
// Time
|
||||
if (timeMask) {
|
||||
new Cleave(timeMask, {
|
||||
time: true,
|
||||
timePattern: ['h', 'm', 's']
|
||||
});
|
||||
}
|
||||
|
||||
//Numeral
|
||||
if (numeralMask) {
|
||||
new Cleave(numeralMask, {
|
||||
numeral: true,
|
||||
numeralThousandsGroupStyle: 'thousand'
|
||||
});
|
||||
}
|
||||
|
||||
//Block
|
||||
if (blockMask) {
|
||||
new Cleave(blockMask, {
|
||||
blocks: [4, 3, 3],
|
||||
uppercase: true
|
||||
});
|
||||
}
|
||||
|
||||
// Delimiter
|
||||
if (delimiterMask) {
|
||||
new Cleave(delimiterMask, {
|
||||
delimiter: '·',
|
||||
blocks: [3, 3, 3],
|
||||
uppercase: true
|
||||
});
|
||||
}
|
||||
|
||||
// Custom Delimiter
|
||||
if (customDelimiter) {
|
||||
new Cleave(customDelimiter, {
|
||||
delimiters: ['.', '.', '-'],
|
||||
blocks: [3, 3, 3, 2],
|
||||
uppercase: true
|
||||
});
|
||||
}
|
||||
|
||||
// Prefix
|
||||
if (prefixMask) {
|
||||
new Cleave(prefixMask, {
|
||||
prefix: '+63',
|
||||
blocks: [3, 3, 3, 4],
|
||||
uppercase: true
|
||||
});
|
||||
}
|
||||
})();
|
||||
|
||||
// bootstrap-maxlength & repeater (jquery)
|
||||
$(function () {
|
||||
var maxlengthInput = $('.bootstrap-maxlength-example'),
|
||||
formRepeater = $('.form-repeater');
|
||||
|
||||
// Bootstrap Max Length
|
||||
// --------------------------------------------------------------------
|
||||
if (maxlengthInput.length) {
|
||||
maxlengthInput.each(function () {
|
||||
$(this).maxlength({
|
||||
warningClass: 'label label-success bg-success text-white',
|
||||
limitReachedClass: 'label label-danger',
|
||||
separator: ' out of ',
|
||||
preText: 'You typed ',
|
||||
postText: ' chars available.',
|
||||
validate: true,
|
||||
threshold: +this.getAttribute('maxlength')
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// Form Repeater
|
||||
// ! Using jQuery each loop to add dynamic id and class for inputs. You may need to improve it based on form fields.
|
||||
// -----------------------------------------------------------------------------------------------------------------
|
||||
|
||||
if (formRepeater.length) {
|
||||
var row = 2;
|
||||
var col = 1;
|
||||
formRepeater.on('submit', function (e) {
|
||||
e.preventDefault();
|
||||
});
|
||||
formRepeater.repeater({
|
||||
show: function () {
|
||||
var fromControl = $(this).find('.form-control, .form-select');
|
||||
var formLabel = $(this).find('.form-label');
|
||||
|
||||
fromControl.each(function (i) {
|
||||
var id = 'form-repeater-' + row + '-' + col;
|
||||
$(fromControl[i]).attr('id', id);
|
||||
$(formLabel[i]).attr('for', id);
|
||||
col++;
|
||||
});
|
||||
|
||||
row++;
|
||||
|
||||
$(this).slideDown();
|
||||
},
|
||||
hide: function (e) {
|
||||
confirm('Are you sure you want to delete this element?') && $(this).slideUp(e);
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
@ -1,53 +0,0 @@
|
||||
/**
|
||||
* File Upload
|
||||
*/
|
||||
|
||||
'use strict';
|
||||
|
||||
(function () {
|
||||
// previewTemplate: Updated Dropzone default previewTemplate
|
||||
// ! Don't change it unless you really know what you are doing
|
||||
const previewTemplate = `<div class="dz-preview dz-file-preview">
|
||||
<div class="dz-details">
|
||||
<div class="dz-thumbnail">
|
||||
<img data-dz-thumbnail>
|
||||
<span class="dz-nopreview">No preview</span>
|
||||
<div class="dz-success-mark"></div>
|
||||
<div class="dz-error-mark"></div>
|
||||
<div class="dz-error-message"><span data-dz-errormessage></span></div>
|
||||
<div class="progress">
|
||||
<div class="progress-bar progress-bar-primary" role="progressbar" aria-valuemin="0" aria-valuemax="100" data-dz-uploadprogress></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="dz-filename" data-dz-name></div>
|
||||
<div class="dz-size" data-dz-size></div>
|
||||
</div>
|
||||
</div>`;
|
||||
|
||||
// ? Start your code from here
|
||||
|
||||
// Basic Dropzone
|
||||
// --------------------------------------------------------------------
|
||||
const dropzoneBasic = document.querySelector('#dropzone-basic');
|
||||
if (dropzoneBasic) {
|
||||
const myDropzone = new Dropzone(dropzoneBasic, {
|
||||
previewTemplate: previewTemplate,
|
||||
parallelUploads: 1,
|
||||
maxFilesize: 5,
|
||||
addRemoveLinks: true,
|
||||
maxFiles: 1
|
||||
});
|
||||
}
|
||||
|
||||
// Multiple Dropzone
|
||||
// --------------------------------------------------------------------
|
||||
const dropzoneMulti = document.querySelector('#dropzone-multi');
|
||||
if (dropzoneMulti) {
|
||||
const myDropzoneMulti = new Dropzone(dropzoneMulti, {
|
||||
previewTemplate: previewTemplate,
|
||||
parallelUploads: 1,
|
||||
maxFilesize: 5,
|
||||
addRemoveLinks: true
|
||||
});
|
||||
}
|
||||
})();
|
||||
@ -1,419 +0,0 @@
|
||||
/**
|
||||
* Form Picker
|
||||
*/
|
||||
|
||||
'use strict';
|
||||
|
||||
(function () {
|
||||
// Flat Picker
|
||||
// --------------------------------------------------------------------
|
||||
const flatpickrDate = document.querySelector('#flatpickr-date'),
|
||||
flatpickrTime = document.querySelector('#flatpickr-time'),
|
||||
flatpickrDateTime = document.querySelector('#flatpickr-datetime'),
|
||||
flatpickrMulti = document.querySelector('#flatpickr-multi'),
|
||||
flatpickrRange = document.querySelector('#flatpickr-range'),
|
||||
flatpickrInline = document.querySelector('#flatpickr-inline'),
|
||||
flatpickrFriendly = document.querySelector('#flatpickr-human-friendly'),
|
||||
flatpickrDisabledRange = document.querySelector('#flatpickr-disabled-range');
|
||||
|
||||
// Date
|
||||
if (flatpickrDate) {
|
||||
flatpickrDate.flatpickr({
|
||||
monthSelectorType: 'static'
|
||||
});
|
||||
}
|
||||
|
||||
// Time
|
||||
if (flatpickrTime) {
|
||||
flatpickrTime.flatpickr({
|
||||
enableTime: true,
|
||||
noCalendar: true
|
||||
});
|
||||
}
|
||||
|
||||
// Datetime
|
||||
if (flatpickrDateTime) {
|
||||
flatpickrDateTime.flatpickr({
|
||||
enableTime: true,
|
||||
dateFormat: 'Y-m-d H:i'
|
||||
});
|
||||
}
|
||||
|
||||
// Multi Date Select
|
||||
if (flatpickrMulti) {
|
||||
flatpickrMulti.flatpickr({
|
||||
weekNumbers: true,
|
||||
enableTime: true,
|
||||
mode: 'multiple',
|
||||
minDate: 'today'
|
||||
});
|
||||
}
|
||||
|
||||
// Range
|
||||
if (typeof flatpickrRange != undefined) {
|
||||
flatpickrRange.flatpickr({
|
||||
mode: 'range'
|
||||
});
|
||||
}
|
||||
|
||||
// Inline
|
||||
if (flatpickrInline) {
|
||||
flatpickrInline.flatpickr({
|
||||
inline: true,
|
||||
allowInput: false,
|
||||
monthSelectorType: 'static'
|
||||
});
|
||||
}
|
||||
|
||||
// Human Friendly
|
||||
if (flatpickrFriendly) {
|
||||
flatpickrFriendly.flatpickr({
|
||||
altInput: true,
|
||||
altFormat: 'F j, Y',
|
||||
dateFormat: 'Y-m-d'
|
||||
});
|
||||
}
|
||||
|
||||
// Disabled Date Range
|
||||
if (flatpickrDisabledRange) {
|
||||
const fromDate = new Date(Date.now() - 3600 * 1000 * 48);
|
||||
const toDate = new Date(Date.now() + 3600 * 1000 * 48);
|
||||
|
||||
flatpickrDisabledRange.flatpickr({
|
||||
dateFormat: 'Y-m-d',
|
||||
disable: [
|
||||
{
|
||||
from: fromDate.toISOString().split('T')[0],
|
||||
to: toDate.toISOString().split('T')[0]
|
||||
}
|
||||
]
|
||||
});
|
||||
}
|
||||
})();
|
||||
|
||||
// * Pickers with jQuery dependency (jquery)
|
||||
$(function () {
|
||||
// Bootstrap Datepicker
|
||||
// --------------------------------------------------------------------
|
||||
var bsDatepickerBasic = $('#bs-datepicker-basic'),
|
||||
bsDatepickerFormat = $('#bs-datepicker-format'),
|
||||
bsDatepickerRange = $('#bs-datepicker-daterange'),
|
||||
bsDatepickerDisabledDays = $('#bs-datepicker-disabled-days'),
|
||||
bsDatepickerMultidate = $('#bs-datepicker-multidate'),
|
||||
bsDatepickerOptions = $('#bs-datepicker-options'),
|
||||
bsDatepickerAutoclose = $('#bs-datepicker-autoclose'),
|
||||
bsDatepickerInlinedate = $('#bs-datepicker-inline');
|
||||
|
||||
// Basic
|
||||
if (bsDatepickerBasic.length) {
|
||||
bsDatepickerBasic.datepicker({
|
||||
todayHighlight: true,
|
||||
orientation: isRtl ? 'auto right' : 'auto left'
|
||||
});
|
||||
}
|
||||
|
||||
// Format
|
||||
if (bsDatepickerFormat.length) {
|
||||
bsDatepickerFormat.datepicker({
|
||||
todayHighlight: true,
|
||||
format: 'dd/mm/yyyy',
|
||||
orientation: isRtl ? 'auto right' : 'auto left'
|
||||
});
|
||||
}
|
||||
|
||||
// Range
|
||||
if (bsDatepickerRange.length) {
|
||||
bsDatepickerRange.datepicker({
|
||||
todayHighlight: true,
|
||||
orientation: isRtl ? 'auto right' : 'auto left'
|
||||
});
|
||||
}
|
||||
|
||||
// Disabled Days
|
||||
if (bsDatepickerDisabledDays.length) {
|
||||
bsDatepickerDisabledDays.datepicker({
|
||||
todayHighlight: true,
|
||||
daysOfWeekDisabled: [0, 6],
|
||||
orientation: isRtl ? 'auto right' : 'auto left'
|
||||
});
|
||||
}
|
||||
|
||||
// Multiple
|
||||
if (bsDatepickerMultidate.length) {
|
||||
bsDatepickerMultidate.datepicker({
|
||||
multidate: true,
|
||||
todayHighlight: true,
|
||||
orientation: isRtl ? 'auto right' : 'auto left'
|
||||
});
|
||||
}
|
||||
|
||||
// Options
|
||||
if (bsDatepickerOptions.length) {
|
||||
bsDatepickerOptions.datepicker({
|
||||
calendarWeeks: true,
|
||||
clearBtn: true,
|
||||
todayHighlight: true,
|
||||
orientation: isRtl ? 'auto left' : 'auto right'
|
||||
});
|
||||
}
|
||||
|
||||
// Auto close
|
||||
if (bsDatepickerAutoclose.length) {
|
||||
bsDatepickerAutoclose.datepicker({
|
||||
todayHighlight: true,
|
||||
autoclose: true,
|
||||
orientation: isRtl ? 'auto right' : 'auto left'
|
||||
});
|
||||
}
|
||||
|
||||
// Inline picker
|
||||
if (bsDatepickerInlinedate.length) {
|
||||
bsDatepickerInlinedate.datepicker({
|
||||
todayHighlight: true
|
||||
});
|
||||
}
|
||||
|
||||
// Bootstrap Daterange Picker
|
||||
// --------------------------------------------------------------------
|
||||
var bsRangePickerBasic = $('#bs-rangepicker-basic'),
|
||||
bsRangePickerSingle = $('#bs-rangepicker-single'),
|
||||
bsRangePickerTime = $('#bs-rangepicker-time'),
|
||||
bsRangePickerRange = $('#bs-rangepicker-range'),
|
||||
bsRangePickerWeekNum = $('#bs-rangepicker-week-num'),
|
||||
bsRangePickerDropdown = $('#bs-rangepicker-dropdown'),
|
||||
bsRangePickerCancelBtn = document.getElementsByClassName('cancelBtn');
|
||||
|
||||
// Basic
|
||||
if (bsRangePickerBasic.length) {
|
||||
bsRangePickerBasic.daterangepicker({
|
||||
opens: isRtl ? 'left' : 'right'
|
||||
});
|
||||
}
|
||||
|
||||
// Single
|
||||
if (bsRangePickerSingle.length) {
|
||||
bsRangePickerSingle.daterangepicker({
|
||||
singleDatePicker: true,
|
||||
opens: isRtl ? 'left' : 'right'
|
||||
});
|
||||
}
|
||||
|
||||
// Time & Date
|
||||
if (bsRangePickerTime.length) {
|
||||
bsRangePickerTime.daterangepicker({
|
||||
timePicker: true,
|
||||
timePickerIncrement: 30,
|
||||
locale: {
|
||||
format: 'MM/DD/YYYY h:mm A'
|
||||
},
|
||||
opens: isRtl ? 'left' : 'right'
|
||||
});
|
||||
}
|
||||
|
||||
if (bsRangePickerRange.length) {
|
||||
bsRangePickerRange.daterangepicker({
|
||||
ranges: {
|
||||
Today: [moment(), moment()],
|
||||
Yesterday: [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
|
||||
'Last 7 Days': [moment().subtract(6, 'days'), moment()],
|
||||
'Last 30 Days': [moment().subtract(29, 'days'), moment()],
|
||||
'This Month': [moment().startOf('month'), moment().endOf('month')],
|
||||
'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
|
||||
},
|
||||
opens: isRtl ? 'left' : 'right'
|
||||
});
|
||||
}
|
||||
|
||||
// Week Numbers
|
||||
if (bsRangePickerWeekNum.length) {
|
||||
bsRangePickerWeekNum.daterangepicker({
|
||||
showWeekNumbers: true,
|
||||
opens: isRtl ? 'left' : 'right'
|
||||
});
|
||||
}
|
||||
// Dropdown
|
||||
if (bsRangePickerDropdown.length) {
|
||||
bsRangePickerDropdown.daterangepicker({
|
||||
showDropdowns: true,
|
||||
opens: isRtl ? 'left' : 'right'
|
||||
});
|
||||
}
|
||||
|
||||
// Adding btn-secondary class in cancel btn
|
||||
for (var i = 0; i < bsRangePickerCancelBtn.length; i++) {
|
||||
bsRangePickerCancelBtn[i].classList.remove('btn-default');
|
||||
bsRangePickerCancelBtn[i].classList.add('btn-secondary');
|
||||
}
|
||||
|
||||
// jQuery Timepicker
|
||||
// --------------------------------------------------------------------
|
||||
var basicTimepicker = $('#timepicker-basic'),
|
||||
minMaxTimepicker = $('#timepicker-min-max'),
|
||||
disabledTimepicker = $('#timepicker-disabled-times'),
|
||||
formatTimepicker = $('#timepicker-format'),
|
||||
stepTimepicker = $('#timepicker-step'),
|
||||
altHourTimepicker = $('#timepicker-24hours');
|
||||
|
||||
// Basic
|
||||
if (basicTimepicker.length) {
|
||||
basicTimepicker.timepicker({
|
||||
orientation: isRtl ? 'r' : 'l'
|
||||
});
|
||||
}
|
||||
|
||||
// Min & Max
|
||||
if (minMaxTimepicker.length) {
|
||||
minMaxTimepicker.timepicker({
|
||||
minTime: '2:00pm',
|
||||
maxTime: '7:00pm',
|
||||
showDuration: true,
|
||||
orientation: isRtl ? 'r' : 'l'
|
||||
});
|
||||
}
|
||||
|
||||
// Disabled Picker
|
||||
if (disabledTimepicker.length) {
|
||||
disabledTimepicker.timepicker({
|
||||
disableTimeRanges: [
|
||||
['12am', '3am'],
|
||||
['4am', '4:30am']
|
||||
],
|
||||
orientation: isRtl ? 'r' : 'l'
|
||||
});
|
||||
}
|
||||
|
||||
// Format Picker
|
||||
if (formatTimepicker.length) {
|
||||
formatTimepicker.timepicker({
|
||||
timeFormat: 'H:i:s',
|
||||
orientation: isRtl ? 'r' : 'l'
|
||||
});
|
||||
}
|
||||
|
||||
// Steps Picker
|
||||
if (stepTimepicker.length) {
|
||||
stepTimepicker.timepicker({
|
||||
step: 15,
|
||||
orientation: isRtl ? 'r' : 'l'
|
||||
});
|
||||
}
|
||||
|
||||
// 24 Hours Format
|
||||
if (altHourTimepicker.length) {
|
||||
altHourTimepicker.timepicker({
|
||||
show: '24:00',
|
||||
timeFormat: 'H:i:s',
|
||||
orientation: isRtl ? 'r' : 'l'
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
// color picker (pickr)
|
||||
// --------------------------------------------------------------------
|
||||
(function () {
|
||||
const classicPicker = document.querySelector('#color-picker-classic'),
|
||||
monolithPicker = document.querySelector('#color-picker-monolith'),
|
||||
nanoPicker = document.querySelector('#color-picker-nano');
|
||||
|
||||
// classic
|
||||
if (classicPicker) {
|
||||
pickr.create({
|
||||
el: classicPicker,
|
||||
theme: 'classic',
|
||||
default: 'rgba(102, 108, 232, 1)',
|
||||
swatches: [
|
||||
'rgba(102, 108, 232, 1)',
|
||||
'rgba(40, 208, 148, 1)',
|
||||
'rgba(255, 73, 97, 1)',
|
||||
'rgba(255, 145, 73, 1)',
|
||||
'rgba(30, 159, 242, 1)'
|
||||
],
|
||||
components: {
|
||||
// Main components
|
||||
preview: true,
|
||||
opacity: true,
|
||||
hue: true,
|
||||
|
||||
// Input / output Options
|
||||
interaction: {
|
||||
hex: true,
|
||||
rgba: true,
|
||||
hsla: true,
|
||||
hsva: true,
|
||||
cmyk: true,
|
||||
input: true,
|
||||
clear: true,
|
||||
save: true
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// monolith
|
||||
if (monolithPicker) {
|
||||
pickr.create({
|
||||
el: monolithPicker,
|
||||
theme: 'monolith',
|
||||
default: 'rgba(40, 208, 148, 1)',
|
||||
swatches: [
|
||||
'rgba(102, 108, 232, 1)',
|
||||
'rgba(40, 208, 148, 1)',
|
||||
'rgba(255, 73, 97, 1)',
|
||||
'rgba(255, 145, 73, 1)',
|
||||
'rgba(30, 159, 242, 1)'
|
||||
],
|
||||
components: {
|
||||
// Main components
|
||||
preview: true,
|
||||
opacity: true,
|
||||
hue: true,
|
||||
|
||||
// Input / output Options
|
||||
interaction: {
|
||||
hex: true,
|
||||
rgba: true,
|
||||
hsla: true,
|
||||
hsva: true,
|
||||
cmyk: true,
|
||||
input: true,
|
||||
clear: true,
|
||||
save: true
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// nano
|
||||
if (nanoPicker) {
|
||||
pickr.create({
|
||||
el: nanoPicker,
|
||||
theme: 'nano',
|
||||
default: 'rgba(255, 73, 97, 1)',
|
||||
swatches: [
|
||||
'rgba(102, 108, 232, 1)',
|
||||
'rgba(40, 208, 148, 1)',
|
||||
'rgba(255, 73, 97, 1)',
|
||||
'rgba(255, 145, 73, 1)',
|
||||
'rgba(30, 159, 242, 1)'
|
||||
],
|
||||
components: {
|
||||
// Main components
|
||||
preview: true,
|
||||
opacity: true,
|
||||
hue: true,
|
||||
|
||||
// Input / output Options
|
||||
interaction: {
|
||||
hex: true,
|
||||
rgba: true,
|
||||
hsla: true,
|
||||
hsva: true,
|
||||
cmyk: true,
|
||||
input: true,
|
||||
clear: true,
|
||||
save: true
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
})();
|
||||
@ -1,51 +0,0 @@
|
||||
/**
|
||||
* Selects & Tags
|
||||
*/
|
||||
|
||||
'use strict';
|
||||
|
||||
$(function () {
|
||||
const selectPicker = $('.selectpicker'),
|
||||
select2 = $('.select2'),
|
||||
select2Icons = $('.select2-icons');
|
||||
|
||||
// Bootstrap Select
|
||||
// --------------------------------------------------------------------
|
||||
if (selectPicker.length) {
|
||||
selectPicker.selectpicker();
|
||||
}
|
||||
|
||||
// Select2
|
||||
// --------------------------------------------------------------------
|
||||
|
||||
// Default
|
||||
if (select2.length) {
|
||||
select2.each(function () {
|
||||
var $this = $(this);
|
||||
$this.wrap('<div class="position-relative"></div>').select2({
|
||||
placeholder: 'Select value',
|
||||
dropdownParent: $this.parent()
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// Select2 Icons
|
||||
if (select2Icons.length) {
|
||||
// custom template to render icons
|
||||
function renderIcons(option) {
|
||||
if (!option.id) {
|
||||
return option.text;
|
||||
}
|
||||
var $icon = "<i class='" + $(option.element).data('icon') + " me-2'></i>" + option.text;
|
||||
|
||||
return $icon;
|
||||
}
|
||||
select2Icons.wrap('<div class="position-relative"></div>').select2({
|
||||
templateResult: renderIcons,
|
||||
templateSelection: renderIcons,
|
||||
escapeMarkup: function (es) {
|
||||
return es;
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
@ -1,328 +0,0 @@
|
||||
/**
|
||||
* Sliders
|
||||
*/
|
||||
'use strict';
|
||||
|
||||
(function () {
|
||||
const sliderBasic = document.getElementById('slider-basic'),
|
||||
sliderHandles = document.getElementById('slider-handles'),
|
||||
sliderSteps = document.getElementById('slider-steps'),
|
||||
sliderTap = document.getElementById('slider-tap'),
|
||||
sliderDrag = document.getElementById('slider-drag'),
|
||||
sliderFixedDrag = document.getElementById('slider-fixed-drag'),
|
||||
sliderCombined = document.getElementById('slider-combined-options'),
|
||||
sliderHover = document.getElementById('slider-hover'),
|
||||
sliderPips = document.getElementById('slider-pips');
|
||||
|
||||
// Basic
|
||||
// --------------------------------------------------------------------
|
||||
|
||||
if (sliderBasic) {
|
||||
noUiSlider.create(sliderBasic, {
|
||||
start: [50],
|
||||
connect: [true, false],
|
||||
direction: isRtl ? 'rtl' : 'ltr',
|
||||
range: {
|
||||
min: 0,
|
||||
max: 100
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Handles
|
||||
// --------------------------------------------------------------------
|
||||
if (sliderHandles) {
|
||||
noUiSlider.create(sliderHandles, {
|
||||
start: [0, 50],
|
||||
direction: isRtl ? 'rtl' : 'ltr',
|
||||
step: 5,
|
||||
connect: true,
|
||||
range: {
|
||||
min: 0,
|
||||
max: 100
|
||||
},
|
||||
pips: {
|
||||
mode: 'range',
|
||||
density: 5,
|
||||
stepped: true
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Steps
|
||||
// --------------------------------------------------------------------
|
||||
if (sliderSteps) {
|
||||
noUiSlider.create(sliderSteps, {
|
||||
start: [0, 30],
|
||||
snap: true,
|
||||
connect: true,
|
||||
direction: isRtl ? 'rtl' : 'ltr',
|
||||
range: {
|
||||
min: 0,
|
||||
'10%': 10,
|
||||
'20%': 20,
|
||||
'30%': 30,
|
||||
'40%': 40,
|
||||
'50%': 50,
|
||||
max: 100
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Tap
|
||||
// --------------------------------------------------------------------
|
||||
if (sliderTap) {
|
||||
noUiSlider.create(sliderTap, {
|
||||
start: [10, 30],
|
||||
behaviour: 'tap',
|
||||
direction: isRtl ? 'rtl' : 'ltr',
|
||||
connect: true,
|
||||
range: {
|
||||
min: 10,
|
||||
max: 100
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Drag
|
||||
// --------------------------------------------------------------------
|
||||
if (sliderDrag) {
|
||||
noUiSlider.create(sliderDrag, {
|
||||
start: [40, 60],
|
||||
limit: 20,
|
||||
behaviour: 'drag',
|
||||
direction: isRtl ? 'rtl' : 'ltr',
|
||||
connect: true,
|
||||
range: {
|
||||
min: 20,
|
||||
max: 80
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Fixed Drag
|
||||
// --------------------------------------------------------------------
|
||||
if (sliderFixedDrag) {
|
||||
noUiSlider.create(sliderFixedDrag, {
|
||||
start: [40, 60],
|
||||
behaviour: 'drag-fixed',
|
||||
direction: isRtl ? 'rtl' : 'ltr',
|
||||
connect: true,
|
||||
range: {
|
||||
min: 20,
|
||||
max: 80
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Combined Options
|
||||
// --------------------------------------------------------------------
|
||||
if (sliderCombined) {
|
||||
noUiSlider.create(sliderCombined, {
|
||||
start: [40, 60],
|
||||
behaviour: 'drag-tap',
|
||||
direction: isRtl ? 'rtl' : 'ltr',
|
||||
connect: true,
|
||||
range: {
|
||||
min: 20,
|
||||
max: 80
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Hover
|
||||
// --------------------------------------------------------------------
|
||||
if (sliderHover) {
|
||||
noUiSlider.create(sliderHover, {
|
||||
start: 20,
|
||||
behaviour: 'hover-snap-tap',
|
||||
direction: isRtl ? 'rtl' : 'ltr',
|
||||
range: {
|
||||
min: 0,
|
||||
max: 100
|
||||
}
|
||||
});
|
||||
|
||||
sliderHover.noUiSlider.on('hover', function (value) {
|
||||
document.getElementById('slider-val').innerHTML = value;
|
||||
});
|
||||
}
|
||||
|
||||
// Scale and Pips
|
||||
// --------------------------------------------------------------------
|
||||
if (sliderPips) {
|
||||
noUiSlider.create(sliderPips, {
|
||||
start: [10],
|
||||
behaviour: 'tap-drag',
|
||||
step: 10,
|
||||
tooltips: true,
|
||||
range: {
|
||||
min: 0,
|
||||
max: 100
|
||||
},
|
||||
pips: {
|
||||
mode: 'steps',
|
||||
stepped: true,
|
||||
density: 5
|
||||
},
|
||||
direction: isRtl ? 'rtl' : 'ltr'
|
||||
});
|
||||
}
|
||||
|
||||
// colors
|
||||
// --------------------------------------------------------------------
|
||||
const sliderPrimary = document.getElementById('slider-primary'),
|
||||
sliderSuccess = document.getElementById('slider-success'),
|
||||
sliderDanger = document.getElementById('slider-danger'),
|
||||
sliderInfo = document.getElementById('slider-info'),
|
||||
sliderWarning = document.getElementById('slider-warning'),
|
||||
colorOptions = {
|
||||
start: [30, 50],
|
||||
connect: true,
|
||||
behaviour: 'tap-drag',
|
||||
step: 10,
|
||||
tooltips: true,
|
||||
range: {
|
||||
min: 0,
|
||||
max: 100
|
||||
},
|
||||
pips: {
|
||||
mode: 'steps',
|
||||
stepped: true,
|
||||
density: 5
|
||||
},
|
||||
direction: isRtl ? 'rtl' : 'ltr'
|
||||
};
|
||||
|
||||
if (sliderPrimary) {
|
||||
noUiSlider.create(sliderPrimary, colorOptions);
|
||||
}
|
||||
if (sliderSuccess) {
|
||||
noUiSlider.create(sliderSuccess, colorOptions);
|
||||
}
|
||||
if (sliderDanger) {
|
||||
noUiSlider.create(sliderDanger, colorOptions);
|
||||
}
|
||||
if (sliderInfo) {
|
||||
noUiSlider.create(sliderInfo, colorOptions);
|
||||
}
|
||||
if (sliderWarning) {
|
||||
noUiSlider.create(sliderWarning, colorOptions);
|
||||
}
|
||||
|
||||
// Dynamic Slider
|
||||
// --------------------------------------------------------------------
|
||||
const dynamicSlider = document.getElementById('slider-dynamic'),
|
||||
sliderSelect = document.getElementById('slider-select'),
|
||||
sliderInput = document.getElementById('slider-input');
|
||||
|
||||
if (dynamicSlider) {
|
||||
noUiSlider.create(dynamicSlider, {
|
||||
start: [10, 30],
|
||||
connect: true,
|
||||
direction: isRtl ? 'rtl' : 'ltr',
|
||||
range: {
|
||||
min: -20,
|
||||
max: 40
|
||||
}
|
||||
});
|
||||
|
||||
dynamicSlider.noUiSlider.on('update', function (values, handle) {
|
||||
const value = values[handle];
|
||||
|
||||
if (handle) {
|
||||
sliderInput.value = value;
|
||||
} else {
|
||||
sliderSelect.value = Math.round(value);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
if (sliderSelect) {
|
||||
for (let i = -20; i <= 40; i++) {
|
||||
let option = document.createElement('option');
|
||||
option.text = i;
|
||||
option.value = i;
|
||||
|
||||
sliderSelect.appendChild(option);
|
||||
}
|
||||
sliderSelect.addEventListener('change', function () {
|
||||
dynamicSlider.noUiSlider.set([this.value, null]);
|
||||
});
|
||||
}
|
||||
|
||||
if (sliderInput) {
|
||||
sliderInput.addEventListener('change', function () {
|
||||
dynamicSlider.noUiSlider.set([null, this.value]);
|
||||
});
|
||||
}
|
||||
|
||||
// Vertical
|
||||
// --------------------------------------------------------------------
|
||||
const defaultVertical = document.getElementById('slider-vertical'),
|
||||
connectVertical = document.getElementById('slider-connect-upper'),
|
||||
tooltipVertical = document.getElementById('slider-vertical-tooltip'),
|
||||
limitVertical = document.getElementById('slider-vertical-limit');
|
||||
|
||||
// Default
|
||||
if (defaultVertical) {
|
||||
defaultVertical.style.height = '200px';
|
||||
noUiSlider.create(defaultVertical, {
|
||||
start: [40, 60],
|
||||
orientation: 'vertical',
|
||||
behaviour: 'drag',
|
||||
connect: true,
|
||||
range: {
|
||||
min: 0,
|
||||
max: 100
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Connect Upper
|
||||
if (connectVertical) {
|
||||
connectVertical.style.height = '200px';
|
||||
noUiSlider.create(connectVertical, {
|
||||
start: 40,
|
||||
orientation: 'vertical',
|
||||
behaviour: 'drag',
|
||||
connect: 'upper',
|
||||
range: {
|
||||
min: 0,
|
||||
max: 100
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Vertical Tooltip
|
||||
if (tooltipVertical) {
|
||||
tooltipVertical.style.height = '200px';
|
||||
noUiSlider.create(tooltipVertical, {
|
||||
start: 10,
|
||||
orientation: 'vertical',
|
||||
behaviour: 'drag',
|
||||
tooltips: true,
|
||||
range: {
|
||||
min: 0,
|
||||
max: 100
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Limit
|
||||
if (limitVertical) {
|
||||
limitVertical.style.height = '200px';
|
||||
noUiSlider.create(limitVertical, {
|
||||
start: [0, 40],
|
||||
orientation: 'vertical',
|
||||
behaviour: 'drag',
|
||||
limit: 60,
|
||||
tooltips: true,
|
||||
connect: true,
|
||||
range: {
|
||||
min: 0,
|
||||
max: 100
|
||||
}
|
||||
});
|
||||
}
|
||||
})();
|
||||
@ -1,301 +0,0 @@
|
||||
/**
|
||||
* Tagify
|
||||
*/
|
||||
|
||||
'use strict';
|
||||
|
||||
(function () {
|
||||
// Basic
|
||||
//------------------------------------------------------
|
||||
const tagifyBasicEl = document.querySelector('#TagifyBasic');
|
||||
const TagifyBasic = new Tagify(tagifyBasicEl);
|
||||
|
||||
// Read only
|
||||
//------------------------------------------------------
|
||||
const tagifyReadonlyEl = document.querySelector('#TagifyReadonly');
|
||||
const TagifyReadonly = new Tagify(tagifyReadonlyEl);
|
||||
|
||||
// Custom list & inline suggestion
|
||||
//------------------------------------------------------
|
||||
const TagifyCustomInlineSuggestionEl = document.querySelector('#TagifyCustomInlineSuggestion');
|
||||
const TagifyCustomListSuggestionEl = document.querySelector('#TagifyCustomListSuggestion');
|
||||
|
||||
const whitelist = [
|
||||
'A# .NET',
|
||||
'A# (Axiom)',
|
||||
'A-0 System',
|
||||
'A+',
|
||||
'A++',
|
||||
'ABAP',
|
||||
'ABC',
|
||||
'ABC ALGOL',
|
||||
'ABSET',
|
||||
'ABSYS',
|
||||
'ACC',
|
||||
'Accent',
|
||||
'Ace DASL',
|
||||
'ACL2',
|
||||
'Avicsoft',
|
||||
'ACT-III',
|
||||
'Action!',
|
||||
'ActionScript',
|
||||
'Ada',
|
||||
'Adenine',
|
||||
'Agda',
|
||||
'Agilent VEE',
|
||||
'Agora',
|
||||
'AIMMS',
|
||||
'Alef',
|
||||
'ALF',
|
||||
'ALGOL 58',
|
||||
'ALGOL 60',
|
||||
'ALGOL 68',
|
||||
'ALGOL W',
|
||||
'Alice',
|
||||
'Alma-0',
|
||||
'AmbientTalk',
|
||||
'Amiga E',
|
||||
'AMOS',
|
||||
'AMPL',
|
||||
'Apex (Salesforce.com)',
|
||||
'APL',
|
||||
'AppleScript',
|
||||
'Arc',
|
||||
'ARexx',
|
||||
'Argus',
|
||||
'AspectJ',
|
||||
'Assembly language',
|
||||
'ATS',
|
||||
'Ateji PX',
|
||||
'AutoHotkey',
|
||||
'Autocoder',
|
||||
'AutoIt',
|
||||
'AutoLISP / Visual LISP',
|
||||
'Averest',
|
||||
'AWK',
|
||||
'Axum',
|
||||
'Active Server Pages',
|
||||
'ASP.NET'
|
||||
];
|
||||
// Inline
|
||||
let TagifyCustomInlineSuggestion = new Tagify(TagifyCustomInlineSuggestionEl, {
|
||||
whitelist: whitelist,
|
||||
maxTags: 10,
|
||||
dropdown: {
|
||||
maxItems: 20,
|
||||
classname: 'tags-inline',
|
||||
enabled: 0,
|
||||
closeOnSelect: false
|
||||
}
|
||||
});
|
||||
// List
|
||||
let TagifyCustomListSuggestion = new Tagify(TagifyCustomListSuggestionEl, {
|
||||
whitelist: whitelist,
|
||||
maxTags: 10,
|
||||
dropdown: {
|
||||
maxItems: 20,
|
||||
classname: '',
|
||||
enabled: 0,
|
||||
closeOnSelect: false
|
||||
}
|
||||
});
|
||||
|
||||
// Users List suggestion
|
||||
//------------------------------------------------------
|
||||
const TagifyUserListEl = document.querySelector('#TagifyUserList');
|
||||
|
||||
const usersList = [
|
||||
{
|
||||
value: 1,
|
||||
name: 'Justinian Hattersley',
|
||||
avatar: 'https://i.pravatar.cc/80?img=1',
|
||||
email: 'jhattersley0@ucsd.edu'
|
||||
},
|
||||
{
|
||||
value: 2,
|
||||
name: 'Antons Esson',
|
||||
avatar: 'https://i.pravatar.cc/80?img=2',
|
||||
email: 'aesson1@ning.com'
|
||||
},
|
||||
{
|
||||
value: 3,
|
||||
name: 'Ardeen Batisse',
|
||||
avatar: 'https://i.pravatar.cc/80?img=3',
|
||||
email: 'abatisse2@nih.gov'
|
||||
},
|
||||
{
|
||||
value: 4,
|
||||
name: 'Graeme Yellowley',
|
||||
avatar: 'https://i.pravatar.cc/80?img=4',
|
||||
email: 'gyellowley3@behance.net'
|
||||
},
|
||||
{
|
||||
value: 5,
|
||||
name: 'Dido Wilford',
|
||||
avatar: 'https://i.pravatar.cc/80?img=5',
|
||||
email: 'dwilford4@jugem.jp'
|
||||
},
|
||||
{
|
||||
value: 6,
|
||||
name: 'Celesta Orwin',
|
||||
avatar: 'https://i.pravatar.cc/80?img=6',
|
||||
email: 'corwin5@meetup.com'
|
||||
},
|
||||
{
|
||||
value: 7,
|
||||
name: 'Sally Main',
|
||||
avatar: 'https://i.pravatar.cc/80?img=7',
|
||||
email: 'smain6@techcrunch.com'
|
||||
},
|
||||
{
|
||||
value: 8,
|
||||
name: 'Grethel Haysman',
|
||||
avatar: 'https://i.pravatar.cc/80?img=8',
|
||||
email: 'ghaysman7@mashable.com'
|
||||
},
|
||||
{
|
||||
value: 9,
|
||||
name: 'Marvin Mandrake',
|
||||
avatar: 'https://i.pravatar.cc/80?img=9',
|
||||
email: 'mmandrake8@sourceforge.net'
|
||||
},
|
||||
{
|
||||
value: 10,
|
||||
name: 'Corrie Tidey',
|
||||
avatar: 'https://i.pravatar.cc/80?img=10',
|
||||
email: 'ctidey9@youtube.com'
|
||||
}
|
||||
];
|
||||
|
||||
function tagTemplate(tagData) {
|
||||
return `
|
||||
<tag title="${tagData.title || tagData.email}"
|
||||
contenteditable='false'
|
||||
spellcheck='false'
|
||||
tabIndex="-1"
|
||||
class="${this.settings.classNames.tag} ${tagData.class ? tagData.class : ''}"
|
||||
${this.getAttributes(tagData)}
|
||||
>
|
||||
<x title='' class='tagify__tag__removeBtn' role='button' aria-label='remove tag'></x>
|
||||
<div>
|
||||
<div class='tagify__tag__avatar-wrap'>
|
||||
<img onerror="this.style.visibility='hidden'" src="${tagData.avatar}">
|
||||
</div>
|
||||
<span class='tagify__tag-text'>${tagData.name}</span>
|
||||
</div>
|
||||
</tag>
|
||||
`;
|
||||
}
|
||||
|
||||
function suggestionItemTemplate(tagData) {
|
||||
return `
|
||||
<div ${this.getAttributes(tagData)}
|
||||
class='tagify__dropdown__item align-items-center ${tagData.class ? tagData.class : ''}'
|
||||
tabindex="0"
|
||||
role="option"
|
||||
>
|
||||
${
|
||||
tagData.avatar
|
||||
? `<div class='tagify__dropdown__item__avatar-wrap'>
|
||||
<img onerror="this.style.visibility='hidden'" src="${tagData.avatar}">
|
||||
</div>`
|
||||
: ''
|
||||
}
|
||||
<strong>${tagData.name}</strong>
|
||||
<span>${tagData.email}</span>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
// initialize Tagify on the above input node reference
|
||||
let TagifyUserList = new Tagify(TagifyUserListEl, {
|
||||
tagTextProp: 'name', // very important since a custom template is used with this property as text. allows typing a "value" or a "name" to match input with whitelist
|
||||
enforceWhitelist: true,
|
||||
skipInvalid: true, // do not remporarily add invalid tags
|
||||
dropdown: {
|
||||
closeOnSelect: false,
|
||||
enabled: 0,
|
||||
classname: 'users-list',
|
||||
searchKeys: ['name', 'email'] // very important to set by which keys to search for suggesttions when typing
|
||||
},
|
||||
templates: {
|
||||
tag: tagTemplate,
|
||||
dropdownItem: suggestionItemTemplate
|
||||
},
|
||||
whitelist: usersList
|
||||
});
|
||||
|
||||
TagifyUserList.on('dropdown:show dropdown:updated', onDropdownShow);
|
||||
TagifyUserList.on('dropdown:select', onSelectSuggestion);
|
||||
|
||||
let addAllSuggestionsEl;
|
||||
|
||||
function onDropdownShow(e) {
|
||||
let dropdownContentEl = e.detail.tagify.DOM.dropdown.content;
|
||||
|
||||
if (TagifyUserList.suggestedListItems.length > 1) {
|
||||
addAllSuggestionsEl = getAddAllSuggestionsEl();
|
||||
|
||||
// insert "addAllSuggestionsEl" as the first element in the suggestions list
|
||||
dropdownContentEl.insertBefore(addAllSuggestionsEl, dropdownContentEl.firstChild);
|
||||
}
|
||||
}
|
||||
|
||||
function onSelectSuggestion(e) {
|
||||
if (e.detail.elm == addAllSuggestionsEl) TagifyUserList.dropdown.selectAll.call(TagifyUserList);
|
||||
}
|
||||
|
||||
// create an "add all" custom suggestion element every time the dropdown changes
|
||||
function getAddAllSuggestionsEl() {
|
||||
// suggestions items should be based on "dropdownItem" template
|
||||
return TagifyUserList.parseTemplate('dropdownItem', [
|
||||
{
|
||||
class: 'addAll',
|
||||
name: 'Add all',
|
||||
email:
|
||||
TagifyUserList.settings.whitelist.reduce(function (remainingSuggestions, item) {
|
||||
return TagifyUserList.isTagDuplicate(item.value) ? remainingSuggestions : remainingSuggestions + 1;
|
||||
}, 0) + ' Members'
|
||||
}
|
||||
]);
|
||||
}
|
||||
|
||||
// Email List suggestion
|
||||
//------------------------------------------------------
|
||||
// generate random whitelist items (for the demo)
|
||||
let randomStringsArr = Array.apply(null, Array(100)).map(function () {
|
||||
return (
|
||||
Array.apply(null, Array(~~(Math.random() * 10 + 3)))
|
||||
.map(function () {
|
||||
return String.fromCharCode(Math.random() * (123 - 97) + 97);
|
||||
})
|
||||
.join('') + '@gmail.com'
|
||||
);
|
||||
});
|
||||
|
||||
const TagifyEmailListEl = document.querySelector('#TagifyEmailList'),
|
||||
TagifyEmailList = new Tagify(TagifyEmailListEl, {
|
||||
// email address validation (https://stackoverflow.com/a/46181/104380)
|
||||
pattern:
|
||||
/^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/,
|
||||
whitelist: randomStringsArr,
|
||||
callbacks: {
|
||||
invalid: onInvalidTag
|
||||
},
|
||||
dropdown: {
|
||||
position: 'text',
|
||||
enabled: 1 // show suggestions dropdown after 1 typed character
|
||||
}
|
||||
}),
|
||||
button = TagifyEmailListEl.nextElementSibling; // "add new tag" action-button
|
||||
|
||||
button.addEventListener('click', onAddButtonClick);
|
||||
|
||||
function onAddButtonClick() {
|
||||
TagifyEmailList.addEmptyTag();
|
||||
}
|
||||
|
||||
function onInvalidTag(e) {
|
||||
console.log('invalid', e.detail);
|
||||
}
|
||||
})();
|
||||
@ -1,283 +0,0 @@
|
||||
/**
|
||||
* Typeahead (jquery)
|
||||
*/
|
||||
|
||||
'use strict';
|
||||
|
||||
$(function () {
|
||||
// String Matcher function
|
||||
var substringMatcher = function (strs) {
|
||||
return function findMatches(q, cb) {
|
||||
var matches, substrRegex;
|
||||
matches = [];
|
||||
substrRegex = new RegExp(q, 'i');
|
||||
$.each(strs, function (i, str) {
|
||||
if (substrRegex.test(str)) {
|
||||
matches.push(str);
|
||||
}
|
||||
});
|
||||
|
||||
cb(matches);
|
||||
};
|
||||
};
|
||||
var states = [
|
||||
'Alabama',
|
||||
'Alaska',
|
||||
'Arizona',
|
||||
'Arkansas',
|
||||
'California',
|
||||
'Colorado',
|
||||
'Connecticut',
|
||||
'Delaware',
|
||||
'Florida',
|
||||
'Georgia',
|
||||
'Hawaii',
|
||||
'Idaho',
|
||||
'Illinois',
|
||||
'Indiana',
|
||||
'Iowa',
|
||||
'Kansas',
|
||||
'Kentucky',
|
||||
'Louisiana',
|
||||
'Maine',
|
||||
'Maryland',
|
||||
'Massachusetts',
|
||||
'Michigan',
|
||||
'Minnesota',
|
||||
'Mississippi',
|
||||
'Missouri',
|
||||
'Montana',
|
||||
'Nebraska',
|
||||
'Nevada',
|
||||
'New Hampshire',
|
||||
'New Jersey',
|
||||
'New Mexico',
|
||||
'New York',
|
||||
'North Carolina',
|
||||
'North Dakota',
|
||||
'Ohio',
|
||||
'Oklahoma',
|
||||
'Oregon',
|
||||
'Pennsylvania',
|
||||
'Rhode Island',
|
||||
'South Carolina',
|
||||
'South Dakota',
|
||||
'Tennessee',
|
||||
'Texas',
|
||||
'Utah',
|
||||
'Vermont',
|
||||
'Virginia',
|
||||
'Washington',
|
||||
'West Virginia',
|
||||
'Wisconsin',
|
||||
'Wyoming'
|
||||
];
|
||||
|
||||
if (isRtl) {
|
||||
$('.typeahead').attr('dir', 'rtl');
|
||||
}
|
||||
|
||||
// Basic
|
||||
// --------------------------------------------------------------------
|
||||
$('.typeahead').typeahead(
|
||||
{
|
||||
hint: !isRtl,
|
||||
highlight: true,
|
||||
minLength: 1
|
||||
},
|
||||
{
|
||||
name: 'states',
|
||||
source: substringMatcher(states)
|
||||
}
|
||||
);
|
||||
|
||||
var bloodhoundBasicExample = new Bloodhound({
|
||||
datumTokenizer: Bloodhound.tokenizers.whitespace,
|
||||
queryTokenizer: Bloodhound.tokenizers.whitespace,
|
||||
local: states
|
||||
});
|
||||
|
||||
// Bloodhound Example
|
||||
// --------------------------------------------------------------------
|
||||
$('.typeahead-bloodhound').typeahead(
|
||||
{
|
||||
hint: !isRtl,
|
||||
highlight: true,
|
||||
minLength: 1
|
||||
},
|
||||
{
|
||||
name: 'states',
|
||||
source: bloodhoundBasicExample
|
||||
}
|
||||
);
|
||||
|
||||
var prefetchExample = new Bloodhound({
|
||||
datumTokenizer: Bloodhound.tokenizers.whitespace,
|
||||
queryTokenizer: Bloodhound.tokenizers.whitespace,
|
||||
prefetch: assetsPath + 'json/typeahead.json'
|
||||
});
|
||||
|
||||
// Prefetch Example
|
||||
// --------------------------------------------------------------------
|
||||
$('.typeahead-prefetch').typeahead(
|
||||
{
|
||||
hint: !isRtl,
|
||||
highlight: true,
|
||||
minLength: 1
|
||||
},
|
||||
{
|
||||
name: 'states',
|
||||
source: prefetchExample
|
||||
}
|
||||
);
|
||||
|
||||
// Render default Suggestions
|
||||
function renderDefaults(q, sync) {
|
||||
if (q === '') {
|
||||
sync(prefetchExample.get('Alaska', 'New York', 'Washington'));
|
||||
} else {
|
||||
prefetchExample.search(q, sync);
|
||||
}
|
||||
}
|
||||
// Default Suggestions
|
||||
// --------------------------------------------------------------------
|
||||
$('.typeahead-default-suggestions').typeahead(
|
||||
{
|
||||
hint: !isRtl,
|
||||
highlight: true,
|
||||
minLength: 0
|
||||
},
|
||||
{
|
||||
name: 'states',
|
||||
source: renderDefaults
|
||||
}
|
||||
);
|
||||
|
||||
var customTemplate = new Bloodhound({
|
||||
datumTokenizer: Bloodhound.tokenizers.obj.whitespace('value'),
|
||||
queryTokenizer: Bloodhound.tokenizers.whitespace,
|
||||
prefetch: assetsPath + 'json/typeahead-data-2.json'
|
||||
});
|
||||
|
||||
// Custom Template
|
||||
// --------------------------------------------------------------------
|
||||
$('.typeahead-custom-template').typeahead(null, {
|
||||
name: 'best-movies',
|
||||
display: 'value',
|
||||
source: customTemplate,
|
||||
highlight: true,
|
||||
hint: !isRtl,
|
||||
templates: {
|
||||
empty: [
|
||||
'<div class="empty-message p-2">',
|
||||
'unable to find any Best Picture winners that match the current query',
|
||||
'</div>'
|
||||
].join('\n'),
|
||||
suggestion: function (data) {
|
||||
return '<div><strong>' + data.value + '</strong> – ' + data.year + '</div>';
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
var nbaTeams = [
|
||||
{ team: 'Boston Celtics' },
|
||||
{ team: 'Dallas Mavericks' },
|
||||
{ team: 'Brooklyn Nets' },
|
||||
{ team: 'Houston Rockets' },
|
||||
{ team: 'New York Knicks' },
|
||||
{ team: 'Memphis Grizzlies' },
|
||||
{ team: 'Philadelphia 76ers' },
|
||||
{ team: 'New Orleans Hornets' },
|
||||
{ team: 'Toronto Raptors' },
|
||||
{ team: 'San Antonio Spurs' },
|
||||
{ team: 'Chicago Bulls' },
|
||||
{ team: 'Denver Nuggets' },
|
||||
{ team: 'Cleveland Cavaliers' },
|
||||
{ team: 'Minnesota Timberwolves' },
|
||||
{ team: 'Detroit Pistons' },
|
||||
{ team: 'Portland Trail Blazers' },
|
||||
{ team: 'Indiana Pacers' },
|
||||
{ team: 'Oklahoma City Thunder' },
|
||||
{ team: 'Milwaukee Bucks' },
|
||||
{ team: 'Utah Jazz' },
|
||||
{ team: 'Atlanta Hawks' },
|
||||
{ team: 'Golden State Warriors' },
|
||||
{ team: 'Charlotte Bobcats' },
|
||||
{ team: 'Los Angeles Clippers' },
|
||||
{ team: 'Miami Heat' },
|
||||
{ team: 'Los Angeles Lakers' },
|
||||
{ team: 'Orlando Magic' },
|
||||
{ team: 'Phoenix Suns' },
|
||||
{ team: 'Washington Wizards' },
|
||||
{ team: 'Sacramento Kings' }
|
||||
];
|
||||
var nhlTeams = [
|
||||
{ team: 'New Jersey Devils' },
|
||||
{ team: 'New York Islanders' },
|
||||
{ team: 'New York Rangers' },
|
||||
{ team: 'Philadelphia Flyers' },
|
||||
{ team: 'Pittsburgh Penguins' },
|
||||
{ team: 'Chicago Blackhawks' },
|
||||
{ team: 'Columbus Blue Jackets' },
|
||||
{ team: 'Detroit Red Wings' },
|
||||
{ team: 'Nashville Predators' },
|
||||
{ team: 'St. Louis Blues' },
|
||||
{ team: 'Boston Bruins' },
|
||||
{ team: 'Buffalo Sabres' },
|
||||
{ team: 'Montreal Canadiens' },
|
||||
{ team: 'Ottawa Senators' },
|
||||
{ team: 'Toronto Maple Leafs' },
|
||||
{ team: 'Calgary Flames' },
|
||||
{ team: 'Colorado Avalanche' },
|
||||
{ team: 'Edmonton Oilers' },
|
||||
{ team: 'Minnesota Wild' },
|
||||
{ team: 'Vancouver Canucks' },
|
||||
{ team: 'Carolina Hurricanes' },
|
||||
{ team: 'Florida Panthers' },
|
||||
{ team: 'Tampa Bay Lightning' },
|
||||
{ team: 'Washington Capitals' },
|
||||
{ team: 'Winnipeg Jets' },
|
||||
{ team: 'Anaheim Ducks' },
|
||||
{ team: 'Dallas Stars' },
|
||||
{ team: 'Los Angeles Kings' },
|
||||
{ team: 'Phoenix Coyotes' },
|
||||
{ team: 'San Jose Sharks' }
|
||||
];
|
||||
|
||||
var nbaExample = new Bloodhound({
|
||||
datumTokenizer: Bloodhound.tokenizers.obj.whitespace('team'),
|
||||
queryTokenizer: Bloodhound.tokenizers.whitespace,
|
||||
local: nbaTeams
|
||||
});
|
||||
var nhlExample = new Bloodhound({
|
||||
datumTokenizer: Bloodhound.tokenizers.obj.whitespace('team'),
|
||||
queryTokenizer: Bloodhound.tokenizers.whitespace,
|
||||
local: nhlTeams
|
||||
});
|
||||
|
||||
// Multiple
|
||||
// --------------------------------------------------------------------
|
||||
$('.typeahead-multi-datasets').typeahead(
|
||||
{
|
||||
hint: !isRtl,
|
||||
highlight: true,
|
||||
minLength: 0
|
||||
},
|
||||
{
|
||||
name: 'nba-teams',
|
||||
source: nbaExample,
|
||||
display: 'team',
|
||||
templates: {
|
||||
header: '<h4 class="league-name border-bottom mb-0 mx-3 mt-3 pb-2">NBA Teams</h4>'
|
||||
}
|
||||
},
|
||||
{
|
||||
name: 'nhl-teams',
|
||||
source: nhlExample,
|
||||
display: 'team',
|
||||
templates: {
|
||||
header: '<h4 class="league-name border-bottom mb-0 mx-3 mt-3 pb-2">NHL Teams</h4>'
|
||||
}
|
||||
}
|
||||
);
|
||||
});
|
||||
@ -1,585 +0,0 @@
|
||||
/**
|
||||
* Main
|
||||
*/
|
||||
|
||||
'use strict';
|
||||
|
||||
let isRtl = window.Helpers.isRtl(),
|
||||
isDarkStyle = window.Helpers.isDarkStyle(),
|
||||
menu,
|
||||
animate,
|
||||
isHorizontalLayout = false;
|
||||
|
||||
if (document.getElementById('layout-menu')) {
|
||||
isHorizontalLayout = document.getElementById('layout-menu').classList.contains('menu-horizontal');
|
||||
}
|
||||
|
||||
(function () {
|
||||
if (typeof Waves !== 'undefined') {
|
||||
Waves.init();
|
||||
Waves.attach(".btn[class*='btn-']:not([class*='btn-outline-']):not([class*='btn-label-'])", ['waves-light']);
|
||||
Waves.attach("[class*='btn-outline-']");
|
||||
Waves.attach("[class*='btn-label-']");
|
||||
Waves.attach('.pagination .page-item .page-link');
|
||||
}
|
||||
|
||||
// Initialize menu
|
||||
//-----------------
|
||||
|
||||
let layoutMenuEl = document.querySelectorAll('#layout-menu');
|
||||
layoutMenuEl.forEach(function (element) {
|
||||
menu = new Menu(element, {
|
||||
orientation: isHorizontalLayout ? 'horizontal' : 'vertical',
|
||||
closeChildren: isHorizontalLayout ? true : false,
|
||||
// ? This option only works with Horizontal menu
|
||||
showDropdownOnHover: localStorage.getItem('templateCustomizer-' + templateName + '--ShowDropdownOnHover') // If value(showDropdownOnHover) is set in local storage
|
||||
? localStorage.getItem('templateCustomizer-' + templateName + '--ShowDropdownOnHover') === 'true' // Use the local storage value
|
||||
: window.templateCustomizer !== undefined // If value is set in config.js
|
||||
? window.templateCustomizer.settings.defaultShowDropdownOnHover // Use the config.js value
|
||||
: true // Use this if you are not using the config.js and want to set value directly from here
|
||||
});
|
||||
// Change parameter to true if you want scroll animation
|
||||
window.Helpers.scrollToActive((animate = false));
|
||||
window.Helpers.mainMenu = menu;
|
||||
});
|
||||
|
||||
// Initialize menu togglers and bind click on each
|
||||
let menuToggler = document.querySelectorAll('.layout-menu-toggle');
|
||||
menuToggler.forEach(item => {
|
||||
item.addEventListener('click', event => {
|
||||
event.preventDefault();
|
||||
window.Helpers.toggleCollapsed();
|
||||
// Enable menu state with local storage support if enableMenuLocalStorage = true from config.js
|
||||
if (config.enableMenuLocalStorage && !window.Helpers.isSmallScreen()) {
|
||||
try {
|
||||
localStorage.setItem(
|
||||
'templateCustomizer-' + templateName + '--LayoutCollapsed',
|
||||
String(window.Helpers.isCollapsed())
|
||||
);
|
||||
} catch (e) {}
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// Menu swipe gesture
|
||||
|
||||
// Detect swipe gesture on the target element and call swipe In
|
||||
window.Helpers.swipeIn('.drag-target', function (e) {
|
||||
window.Helpers.setCollapsed(false);
|
||||
});
|
||||
|
||||
// Detect swipe gesture on the target element and call swipe Out
|
||||
window.Helpers.swipeOut('#layout-menu', function (e) {
|
||||
if (window.Helpers.isSmallScreen()) window.Helpers.setCollapsed(true);
|
||||
});
|
||||
|
||||
// Display in main menu when menu scrolls
|
||||
let menuInnerContainer = document.getElementsByClassName('menu-inner'),
|
||||
menuInnerShadow = document.getElementsByClassName('menu-inner-shadow')[0];
|
||||
if (menuInnerContainer.length > 0 && menuInnerShadow) {
|
||||
menuInnerContainer[0].addEventListener('ps-scroll-y', function () {
|
||||
if (this.querySelector('.ps__thumb-y').offsetTop) {
|
||||
menuInnerShadow.style.display = 'block';
|
||||
} else {
|
||||
menuInnerShadow.style.display = 'none';
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Style Switcher (Light/Dark Mode)
|
||||
//---------------------------------
|
||||
|
||||
/*let styleSwitcherToggleEl = document.querySelector('.style-switcher-toggle');
|
||||
if (window.templateCustomizer) {
|
||||
// setStyle light/dark on click of styleSwitcherToggleEl
|
||||
if (styleSwitcherToggleEl) {
|
||||
styleSwitcherToggleEl.addEventListener('click', function () {
|
||||
if (window.Helpers.isLightStyle()) {
|
||||
window.templateCustomizer.setStyle('dark');
|
||||
} else {
|
||||
window.templateCustomizer.setStyle('light');
|
||||
}
|
||||
});
|
||||
}
|
||||
// Update style switcher icon and tooltip based on current style
|
||||
if (window.Helpers.isLightStyle()) {
|
||||
if (styleSwitcherToggleEl) {
|
||||
styleSwitcherToggleEl.querySelector('i').classList.add('ti-moon-stars');
|
||||
new bootstrap.Tooltip(styleSwitcherToggleEl, {
|
||||
title: 'Dark mode',
|
||||
fallbackPlacements: ['bottom']
|
||||
});
|
||||
}
|
||||
switchImage('light');
|
||||
} else {
|
||||
if (styleSwitcherToggleEl) {
|
||||
styleSwitcherToggleEl.querySelector('i').classList.add('ti-sun');
|
||||
new bootstrap.Tooltip(styleSwitcherToggleEl, {
|
||||
title: 'Light mode',
|
||||
fallbackPlacements: ['bottom']
|
||||
});
|
||||
}
|
||||
switchImage('dark');
|
||||
}
|
||||
} else {
|
||||
// Removed style switcher element if not using template customizer
|
||||
styleSwitcherToggleEl.parentElement.remove();
|
||||
}*/
|
||||
|
||||
// Update light/dark image based on current style
|
||||
function switchImage(style) {
|
||||
const switchImagesList = [].slice.call(document.querySelectorAll('[data-app-' + style + '-img]'));
|
||||
switchImagesList.map(function (imageEl) {
|
||||
const setImage = imageEl.getAttribute('data-app-' + style + '-img');
|
||||
imageEl.src = assetsPath + 'img/' + setImage; // Using window.assetsPath to get the exact relative path
|
||||
});
|
||||
}
|
||||
|
||||
// Internationalization (Language Dropdown)
|
||||
// ---------------------------------------
|
||||
|
||||
if (typeof i18next !== 'undefined' && typeof i18NextHttpBackend !== 'undefined') {
|
||||
i18next
|
||||
.use(i18NextHttpBackend)
|
||||
.init({
|
||||
lng: 'en',
|
||||
debug: false,
|
||||
fallbackLng: 'en',
|
||||
backend: {
|
||||
loadPath: assetsPath + 'json/locales/{{lng}}.json'
|
||||
},
|
||||
returnObjects: true
|
||||
})
|
||||
.then(function (t) {
|
||||
localize();
|
||||
});
|
||||
}
|
||||
|
||||
let languageDropdown = document.getElementsByClassName('dropdown-language');
|
||||
|
||||
if (languageDropdown.length) {
|
||||
let dropdownItems = languageDropdown[0].querySelectorAll('.dropdown-item');
|
||||
|
||||
for (let i = 0; i < dropdownItems.length; i++) {
|
||||
dropdownItems[i].addEventListener('click', function () {
|
||||
let currentLanguage = this.getAttribute('data-language'),
|
||||
selectedLangFlag = this.querySelector('.fi').getAttribute('class');
|
||||
|
||||
for (let sibling of this.parentNode.children) {
|
||||
sibling.classList.remove('selected');
|
||||
}
|
||||
this.classList.add('selected');
|
||||
|
||||
languageDropdown[0].querySelector('.dropdown-toggle .fi').className = selectedLangFlag;
|
||||
|
||||
i18next.changeLanguage(currentLanguage, (err, t) => {
|
||||
if (err) return console.log('something went wrong loading', err);
|
||||
localize();
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
function localize() {
|
||||
let i18nList = document.querySelectorAll('[data-i18n]');
|
||||
// Set the current language in dd
|
||||
let currentLanguageEle = document.querySelector('.dropdown-item[data-language="' + i18next.language + '"]');
|
||||
|
||||
if (currentLanguageEle) {
|
||||
currentLanguageEle.click();
|
||||
}
|
||||
|
||||
i18nList.forEach(function (item) {
|
||||
item.innerHTML = i18next.t(item.dataset.i18n);
|
||||
});
|
||||
}
|
||||
|
||||
// Notification
|
||||
// ------------
|
||||
const notificationMarkAsReadAll = document.querySelector('.dropdown-notifications-all');
|
||||
const notificationMarkAsReadList = document.querySelectorAll('.dropdown-notifications-read');
|
||||
|
||||
// Notification: Mark as all as read
|
||||
if (notificationMarkAsReadAll) {
|
||||
notificationMarkAsReadAll.addEventListener('click', event => {
|
||||
notificationMarkAsReadList.forEach(item => {
|
||||
item.closest('.dropdown-notifications-item').classList.add('marked-as-read');
|
||||
});
|
||||
});
|
||||
}
|
||||
// Notification: Mark as read/unread onclick of dot
|
||||
if (notificationMarkAsReadList) {
|
||||
notificationMarkAsReadList.forEach(item => {
|
||||
item.addEventListener('click', event => {
|
||||
item.closest('.dropdown-notifications-item').classList.toggle('marked-as-read');
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// Notification: Mark as read/unread onclick of dot
|
||||
const notificationArchiveMessageList = document.querySelectorAll('.dropdown-notifications-archive');
|
||||
notificationArchiveMessageList.forEach(item => {
|
||||
item.addEventListener('click', event => {
|
||||
item.closest('.dropdown-notifications-item').remove();
|
||||
});
|
||||
});
|
||||
|
||||
// Init helpers & misc
|
||||
// --------------------
|
||||
|
||||
// Init BS Tooltip
|
||||
const tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
|
||||
tooltipTriggerList.map(function (tooltipTriggerEl) {
|
||||
return new bootstrap.Tooltip(tooltipTriggerEl);
|
||||
});
|
||||
|
||||
// Accordion active class
|
||||
const accordionActiveFunction = function (e) {
|
||||
if (e.type == 'show.bs.collapse' || e.type == 'show.bs.collapse') {
|
||||
e.target.closest('.accordion-item').classList.add('active');
|
||||
} else {
|
||||
e.target.closest('.accordion-item').classList.remove('active');
|
||||
}
|
||||
};
|
||||
|
||||
const accordionTriggerList = [].slice.call(document.querySelectorAll('.accordion'));
|
||||
const accordionList = accordionTriggerList.map(function (accordionTriggerEl) {
|
||||
accordionTriggerEl.addEventListener('show.bs.collapse', accordionActiveFunction);
|
||||
accordionTriggerEl.addEventListener('hide.bs.collapse', accordionActiveFunction);
|
||||
});
|
||||
|
||||
// If layout is RTL add .dropdown-menu-end class to .dropdown-menu
|
||||
if (isRtl) {
|
||||
Helpers._addClass('dropdown-menu-end', document.querySelectorAll('#layout-navbar .dropdown-menu'));
|
||||
}
|
||||
|
||||
// Auto update layout based on screen size
|
||||
window.Helpers.setAutoUpdate(true);
|
||||
|
||||
// Toggle Password Visibility
|
||||
window.Helpers.initPasswordToggle();
|
||||
|
||||
// Speech To Text
|
||||
window.Helpers.initSpeechToText();
|
||||
|
||||
// Init PerfectScrollbar in Navbar Dropdown (i.e notification)
|
||||
window.Helpers.initNavbarDropdownScrollbar();
|
||||
|
||||
// On window resize listener
|
||||
// -------------------------
|
||||
window.addEventListener(
|
||||
'resize',
|
||||
function (event) {
|
||||
// Hide open search input and set value blank
|
||||
if (window.innerWidth >= window.Helpers.LAYOUT_BREAKPOINT) {
|
||||
if (document.querySelector('.search-input-wrapper')) {
|
||||
document.querySelector('.search-input-wrapper').classList.add('d-none');
|
||||
document.querySelector('.search-input').value = '';
|
||||
}
|
||||
}
|
||||
// Horizontal Layout : Update menu based on window size
|
||||
let horizontalMenuTemplate = document.querySelector("[data-template^='horizontal-menu']");
|
||||
if (horizontalMenuTemplate) {
|
||||
setTimeout(function () {
|
||||
if (window.innerWidth < window.Helpers.LAYOUT_BREAKPOINT) {
|
||||
if (document.getElementById('layout-menu')) {
|
||||
if (document.getElementById('layout-menu').classList.contains('menu-horizontal')) {
|
||||
menu.switchMenu('vertical');
|
||||
}
|
||||
}
|
||||
} else {
|
||||
if (document.getElementById('layout-menu')) {
|
||||
if (document.getElementById('layout-menu').classList.contains('menu-vertical')) {
|
||||
menu.switchMenu('horizontal');
|
||||
}
|
||||
}
|
||||
}
|
||||
}, 100);
|
||||
}
|
||||
},
|
||||
true
|
||||
);
|
||||
|
||||
// Manage menu expanded/collapsed with templateCustomizer & local storage
|
||||
//------------------------------------------------------------------
|
||||
|
||||
// If current layout is horizontal OR current window screen is small (overlay menu) than return from here
|
||||
if (isHorizontalLayout || window.Helpers.isSmallScreen()) {
|
||||
return;
|
||||
}
|
||||
|
||||
// If current layout is vertical and current window screen is > small
|
||||
|
||||
// Auto update menu collapsed/expanded based on the themeConfig
|
||||
if (typeof TemplateCustomizer !== 'undefined') {
|
||||
if (window.templateCustomizer.settings.defaultMenuCollapsed) {
|
||||
window.Helpers.setCollapsed(true, false);
|
||||
}
|
||||
}
|
||||
|
||||
// Manage menu expanded/collapsed state with local storage support If enableMenuLocalStorage = true in config.js
|
||||
if (typeof config !== 'undefined') {
|
||||
if (config.enableMenuLocalStorage) {
|
||||
try {
|
||||
if (
|
||||
localStorage.getItem('templateCustomizer-' + templateName + '--LayoutCollapsed') !== null &&
|
||||
localStorage.getItem('templateCustomizer-' + templateName + '--LayoutCollapsed') !== 'false'
|
||||
)
|
||||
window.Helpers.setCollapsed(
|
||||
localStorage.getItem('templateCustomizer-' + templateName + '--LayoutCollapsed') === 'true',
|
||||
false
|
||||
);
|
||||
} catch (e) {}
|
||||
}
|
||||
}
|
||||
})();
|
||||
|
||||
// ! Removed following code if you do't wish to use jQuery. Remember that navbar search functionality will stop working on removal.
|
||||
if (typeof $ !== 'undefined') {
|
||||
$(function () {
|
||||
// ! TODO: Required to load after DOM is ready, did this now with jQuery ready.
|
||||
window.Helpers.initSidebarToggle();
|
||||
// Toggle Universal Sidebar
|
||||
|
||||
// Navbar Search with autosuggest (typeahead)
|
||||
// ? You can remove the following JS if you don't want to use search functionality.
|
||||
//----------------------------------------------------------------------------------
|
||||
|
||||
var searchToggler = $('.search-toggler'),
|
||||
searchInputWrapper = $('.search-input-wrapper'),
|
||||
searchInput = $('.search-input'),
|
||||
contentBackdrop = $('.content-backdrop');
|
||||
|
||||
// Open search input on click of search icon
|
||||
if (searchToggler.length) {
|
||||
searchToggler.on('click', function () {
|
||||
if (searchInputWrapper.length) {
|
||||
searchInputWrapper.toggleClass('d-none');
|
||||
searchInput.focus();
|
||||
}
|
||||
});
|
||||
}
|
||||
// Open search on 'CTRL+/'
|
||||
$(document).on('keydown', function (event) {
|
||||
let ctrlKey = event.ctrlKey,
|
||||
slashKey = event.which === 191;
|
||||
|
||||
if (ctrlKey && slashKey) {
|
||||
if (searchInputWrapper.length) {
|
||||
searchInputWrapper.toggleClass('d-none');
|
||||
searchInput.focus();
|
||||
}
|
||||
}
|
||||
});
|
||||
// Todo: Add container-xxl to twitter-typeahead
|
||||
searchInput.on('focus', function () {
|
||||
if (searchInputWrapper.hasClass('container-xxl')) {
|
||||
searchInputWrapper.find('.twitter-typeahead').addClass('container-xxl');
|
||||
}
|
||||
});
|
||||
|
||||
if (searchInput.length) {
|
||||
// Filter config
|
||||
var filterConfig = function (data) {
|
||||
return function findMatches(q, cb) {
|
||||
let matches;
|
||||
matches = [];
|
||||
data.filter(function (i) {
|
||||
if (i.name.toLowerCase().startsWith(q.toLowerCase())) {
|
||||
matches.push(i);
|
||||
} else if (
|
||||
!i.name.toLowerCase().startsWith(q.toLowerCase()) &&
|
||||
i.name.toLowerCase().includes(q.toLowerCase())
|
||||
) {
|
||||
matches.push(i);
|
||||
matches.sort(function (a, b) {
|
||||
return b.name < a.name ? 1 : -1;
|
||||
});
|
||||
} else {
|
||||
return [];
|
||||
}
|
||||
});
|
||||
cb(matches);
|
||||
};
|
||||
};
|
||||
|
||||
// Search JSON
|
||||
var searchJson = 'search-vertical.json'; // For vertical layout
|
||||
if ($('#layout-menu').hasClass('menu-horizontal')) {
|
||||
var searchJson = 'search-horizontal.json'; // For vertical layout
|
||||
}
|
||||
// Search API AJAX call
|
||||
var searchData = $.ajax({
|
||||
url: assetsPath + 'json/' + searchJson, //? Use your own search api instead
|
||||
dataType: 'json',
|
||||
async: false
|
||||
}).responseJSON;
|
||||
// Init typeahead on searchInput
|
||||
searchInput.each(function () {
|
||||
var $this = $(this);
|
||||
searchInput
|
||||
.typeahead(
|
||||
{
|
||||
hint: false,
|
||||
classNames: {
|
||||
menu: 'tt-menu navbar-search-suggestion',
|
||||
cursor: 'active',
|
||||
suggestion: 'suggestion d-flex justify-content-between px-3 py-2 w-100'
|
||||
}
|
||||
},
|
||||
// ? Add/Update blocks as per need
|
||||
// Pages
|
||||
{
|
||||
name: 'pages',
|
||||
display: 'name',
|
||||
limit: 5,
|
||||
source: filterConfig(searchData.pages),
|
||||
templates: {
|
||||
header: '<h6 class="suggestions-header text-primary mb-0 mx-3 mt-3 pb-2">Pages</h6>',
|
||||
suggestion: function ({ url, icon, name }) {
|
||||
return (
|
||||
'<a href="' +
|
||||
url +
|
||||
'">' +
|
||||
'<div>' +
|
||||
'<i class="ti ' +
|
||||
icon +
|
||||
' me-2"></i>' +
|
||||
'<span class="align-middle">' +
|
||||
name +
|
||||
'</span>' +
|
||||
'</div>' +
|
||||
'</a>'
|
||||
);
|
||||
},
|
||||
notFound:
|
||||
'<div class="not-found px-3 py-2">' +
|
||||
'<h6 class="suggestions-header text-primary mb-2">Pages</h6>' +
|
||||
'<p class="py-2 mb-0"><i class="ti ti-alert-circle ti-xs me-2"></i> No Results Found</p>' +
|
||||
'</div>'
|
||||
}
|
||||
},
|
||||
// Files
|
||||
{
|
||||
name: 'files',
|
||||
display: 'name',
|
||||
limit: 4,
|
||||
source: filterConfig(searchData.files),
|
||||
templates: {
|
||||
header: '<h6 class="suggestions-header text-primary mb-0 mx-3 mt-3 pb-2">Files</h6>',
|
||||
suggestion: function ({ src, name, subtitle, meta }) {
|
||||
return (
|
||||
'<a href="javascript:;">' +
|
||||
'<div class="d-flex w-50">' +
|
||||
'<img class="me-3" src="' +
|
||||
assetsPath +
|
||||
src +
|
||||
'" alt="' +
|
||||
name +
|
||||
'" height="32">' +
|
||||
'<div class="w-75">' +
|
||||
'<h6 class="mb-0">' +
|
||||
name +
|
||||
'</h6>' +
|
||||
'<small class="text-muted">' +
|
||||
subtitle +
|
||||
'</small>' +
|
||||
'</div>' +
|
||||
'</div>' +
|
||||
'<small class="text-muted">' +
|
||||
meta +
|
||||
'</small>' +
|
||||
'</a>'
|
||||
);
|
||||
},
|
||||
notFound:
|
||||
'<div class="not-found px-3 py-2">' +
|
||||
'<h6 class="suggestions-header text-primary mb-2">Files</h6>' +
|
||||
'<p class="py-2 mb-0"><i class="ti ti-alert-circle ti-xs me-2"></i> No Results Found</p>' +
|
||||
'</div>'
|
||||
}
|
||||
},
|
||||
// Members
|
||||
{
|
||||
name: 'members',
|
||||
display: 'name',
|
||||
limit: 4,
|
||||
source: filterConfig(searchData.members),
|
||||
templates: {
|
||||
header: '<h6 class="suggestions-header text-primary mb-0 mx-3 mt-3 pb-2">Members</h6>',
|
||||
suggestion: function ({ name, src, subtitle }) {
|
||||
return (
|
||||
'<a href="app-user-view-account.html">' +
|
||||
'<div class="d-flex align-items-center">' +
|
||||
'<img class="rounded-circle me-3" src="' +
|
||||
assetsPath +
|
||||
src +
|
||||
'" alt="' +
|
||||
name +
|
||||
'" height="32">' +
|
||||
'<div class="user-info">' +
|
||||
'<h6 class="mb-0">' +
|
||||
name +
|
||||
'</h6>' +
|
||||
'<small class="text-muted">' +
|
||||
subtitle +
|
||||
'</small>' +
|
||||
'</div>' +
|
||||
'</div>' +
|
||||
'</a>'
|
||||
);
|
||||
},
|
||||
notFound:
|
||||
'<div class="not-found px-3 py-2">' +
|
||||
'<h6 class="suggestions-header text-primary mb-2">Members</h6>' +
|
||||
'<p class="py-2 mb-0"><i class="ti ti-alert-circle ti-xs me-2"></i> No Results Found</p>' +
|
||||
'</div>'
|
||||
}
|
||||
}
|
||||
)
|
||||
//On typeahead result render.
|
||||
.bind('typeahead:render', function () {
|
||||
// Show content backdrop,
|
||||
contentBackdrop.addClass('show').removeClass('fade');
|
||||
})
|
||||
// On typeahead select
|
||||
.bind('typeahead:select', function (ev, suggestion) {
|
||||
// Open selected page
|
||||
if (suggestion.url) {
|
||||
window.location = suggestion.url;
|
||||
}
|
||||
})
|
||||
// On typeahead close
|
||||
.bind('typeahead:close', function () {
|
||||
// Clear search
|
||||
searchInput.val('');
|
||||
$this.typeahead('val', '');
|
||||
// Hide search input wrapper
|
||||
searchInputWrapper.addClass('d-none');
|
||||
// Fade content backdrop
|
||||
contentBackdrop.addClass('fade').removeClass('show');
|
||||
});
|
||||
|
||||
// On searchInput keyup, Fade content backdrop if search input is blank
|
||||
searchInput.on('keyup', function () {
|
||||
if (searchInput.val() == '') {
|
||||
contentBackdrop.addClass('fade').removeClass('show');
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// Init PerfectScrollbar in search result
|
||||
var psSearch;
|
||||
$('.navbar-search-suggestion').each(function () {
|
||||
psSearch = new PerfectScrollbar($(this)[0], {
|
||||
wheelPropagation: false,
|
||||
suppressScrollX: true
|
||||
});
|
||||
});
|
||||
|
||||
searchInput.on('keyup', function () {
|
||||
psSearch.update();
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
@ -1,73 +0,0 @@
|
||||
/**
|
||||
* Add New Address
|
||||
*/
|
||||
|
||||
'use strict';
|
||||
|
||||
// Select2 (jquery)
|
||||
$(function () {
|
||||
const select2 = $('.select2');
|
||||
|
||||
// Select2 Country
|
||||
if (select2.length) {
|
||||
select2.each(function () {
|
||||
var $this = $(this);
|
||||
$this.wrap('<div class="position-relative"></div>').select2({
|
||||
placeholder: 'Select value',
|
||||
dropdownParent: $this.parent()
|
||||
});
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
// Add New Address form validation
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
(function () {
|
||||
// initCustomOptionCheck on modal show to update the custom select
|
||||
let addNewAddress = document.getElementById('addNewAddress');
|
||||
addNewAddress.addEventListener('show.bs.modal', function (event) {
|
||||
// Init custom option check
|
||||
window.Helpers.initCustomOptionCheck();
|
||||
});
|
||||
|
||||
FormValidation.formValidation(document.getElementById('addNewAddressForm'), {
|
||||
fields: {
|
||||
modalAddressFirstName: {
|
||||
validators: {
|
||||
notEmpty: {
|
||||
message: 'Please enter your first name'
|
||||
},
|
||||
regexp: {
|
||||
regexp: /^[a-zA-Zs]+$/,
|
||||
message: 'The first name can only consist of alphabetical'
|
||||
}
|
||||
}
|
||||
},
|
||||
modalAddressLastName: {
|
||||
validators: {
|
||||
notEmpty: {
|
||||
message: 'Please enter your last name'
|
||||
},
|
||||
regexp: {
|
||||
regexp: /^[a-zA-Zs]+$/,
|
||||
message: 'The last name can only consist of alphabetical'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
plugins: {
|
||||
trigger: new FormValidation.plugins.Trigger(),
|
||||
bootstrap5: new FormValidation.plugins.Bootstrap5({
|
||||
// Use this for enabling/changing valid/invalid class
|
||||
// eleInvalidClass: '',
|
||||
eleValidClass: '',
|
||||
rowSelector: '.col-12'
|
||||
}),
|
||||
submitButton: new FormValidation.plugins.SubmitButton(),
|
||||
// Submit the form when all fields are valid
|
||||
// defaultSubmit: new FormValidation.plugins.DefaultSubmit(),
|
||||
autoFocus: new FormValidation.plugins.AutoFocus()
|
||||
}
|
||||
});
|
||||
})();
|
||||
});
|
||||
@ -1,107 +0,0 @@
|
||||
/**
|
||||
* Add new credit card
|
||||
*/
|
||||
|
||||
'use strict';
|
||||
|
||||
document.addEventListener('DOMContentLoaded', function (e) {
|
||||
(function () {
|
||||
// Variables
|
||||
const creditCardMask = document.querySelector('.credit-card-mask'),
|
||||
expiryDateMask = document.querySelector('.expiry-date-mask'),
|
||||
cvvMask = document.querySelector('.cvv-code-mask'),
|
||||
btnReset = document.querySelector('.btn-reset');
|
||||
let cleave;
|
||||
|
||||
// Credit Card
|
||||
function initCleave() {
|
||||
if (creditCardMask) {
|
||||
cleave = new Cleave(creditCardMask, {
|
||||
creditCard: true,
|
||||
onCreditCardTypeChanged: function (type) {
|
||||
if (type != '' && type != 'unknown') {
|
||||
document.querySelector('.card-type').innerHTML =
|
||||
'<img src="' +
|
||||
assetsPath +
|
||||
'img/icons/payments/' +
|
||||
type +
|
||||
'-cc.png" class="cc-icon-image" height="28"/>';
|
||||
} else {
|
||||
document.querySelector('.card-type').innerHTML = '';
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// Init cleave on show modal (To fix the cc image issue)
|
||||
let addNewCCModal = document.getElementById('addNewCCModal');
|
||||
addNewCCModal.addEventListener('show.bs.modal', function (event) {
|
||||
initCleave();
|
||||
});
|
||||
|
||||
// Expiry Date Mask
|
||||
if (expiryDateMask) {
|
||||
new Cleave(expiryDateMask, {
|
||||
date: true,
|
||||
delimiter: '/',
|
||||
datePattern: ['m', 'y']
|
||||
});
|
||||
}
|
||||
|
||||
// CVV
|
||||
if (cvvMask) {
|
||||
new Cleave(cvvMask, {
|
||||
numeral: true,
|
||||
numeralPositiveOnly: true
|
||||
});
|
||||
}
|
||||
|
||||
// Credit card form validation
|
||||
FormValidation.formValidation(document.getElementById('addNewCCForm'), {
|
||||
fields: {
|
||||
modalAddCard: {
|
||||
validators: {
|
||||
notEmpty: {
|
||||
message: 'Please enter your credit card number'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
plugins: {
|
||||
trigger: new FormValidation.plugins.Trigger(),
|
||||
bootstrap5: new FormValidation.plugins.Bootstrap5({
|
||||
// Use this for enabling/changing valid/invalid class
|
||||
// eleInvalidClass: '',
|
||||
eleValidClass: '',
|
||||
rowSelector: '.col-12'
|
||||
}),
|
||||
submitButton: new FormValidation.plugins.SubmitButton(),
|
||||
// Submit the form when all fields are valid
|
||||
// defaultSubmit: new FormValidation.plugins.DefaultSubmit(),
|
||||
autoFocus: new FormValidation.plugins.AutoFocus()
|
||||
},
|
||||
init: instance => {
|
||||
instance.on('plugins.message.placed', function (e) {
|
||||
//* Move the error message out of the `input-group` element
|
||||
if (e.element.parentElement.classList.contains('input-group')) {
|
||||
e.element.parentElement.insertAdjacentElement('afterend', e.messageElement);
|
||||
}
|
||||
});
|
||||
}
|
||||
}).on('plugins.message.displayed', function (e) {
|
||||
if (e.element.parentElement.classList.contains('input-group')) {
|
||||
//* Move the error message out of the `input-group` element
|
||||
e.element.parentElement.insertAdjacentElement('afterend', e.messageElement.parentElement);
|
||||
}
|
||||
});
|
||||
|
||||
// reset card image on click of cancel
|
||||
btnReset.addEventListener('click', function (e) {
|
||||
// blank '.card-type' innerHTML to remove image
|
||||
document.querySelector('.card-type').innerHTML = '';
|
||||
// destroy cleave and init again on modal open
|
||||
cleave.destroy();
|
||||
});
|
||||
})();
|
||||
});
|
||||
@ -1,35 +0,0 @@
|
||||
/**
|
||||
* Add Permission Modal JS
|
||||
*/
|
||||
|
||||
'use strict';
|
||||
|
||||
// Add permission form validation
|
||||
document.addEventListener('DOMContentLoaded', function (e) {
|
||||
(function () {
|
||||
FormValidation.formValidation(document.getElementById('addPermissionForm'), {
|
||||
fields: {
|
||||
modalPermissionName: {
|
||||
validators: {
|
||||
notEmpty: {
|
||||
message: 'Please enter permission name'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
plugins: {
|
||||
trigger: new FormValidation.plugins.Trigger(),
|
||||
bootstrap5: new FormValidation.plugins.Bootstrap5({
|
||||
// Use this for enabling/changing valid/invalid class
|
||||
// eleInvalidClass: '',
|
||||
eleValidClass: '',
|
||||
rowSelector: '.col-12'
|
||||
}),
|
||||
submitButton: new FormValidation.plugins.SubmitButton(),
|
||||
// Submit the form when all fields are valid
|
||||
// defaultSubmit: new FormValidation.plugins.DefaultSubmit(),
|
||||
autoFocus: new FormValidation.plugins.AutoFocus()
|
||||
}
|
||||
});
|
||||
})();
|
||||
});
|
||||
@ -1,44 +0,0 @@
|
||||
/**
|
||||
* Add new role Modal JS
|
||||
*/
|
||||
|
||||
'use strict';
|
||||
|
||||
document.addEventListener('DOMContentLoaded', function (e) {
|
||||
(function () {
|
||||
// add role form validation
|
||||
FormValidation.formValidation(document.getElementById('addRoleForm'), {
|
||||
fields: {
|
||||
modalRoleName: {
|
||||
validators: {
|
||||
notEmpty: {
|
||||
message: 'Please enter role name'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
plugins: {
|
||||
trigger: new FormValidation.plugins.Trigger(),
|
||||
bootstrap5: new FormValidation.plugins.Bootstrap5({
|
||||
// Use this for enabling/changing valid/invalid class
|
||||
// eleInvalidClass: '',
|
||||
eleValidClass: '',
|
||||
rowSelector: '.col-12'
|
||||
}),
|
||||
submitButton: new FormValidation.plugins.SubmitButton(),
|
||||
// Submit the form when all fields are valid
|
||||
// defaultSubmit: new FormValidation.plugins.DefaultSubmit(),
|
||||
autoFocus: new FormValidation.plugins.AutoFocus()
|
||||
}
|
||||
});
|
||||
|
||||
// Select All checkbox click
|
||||
const selectAll = document.querySelector('#selectAll'),
|
||||
checkboxList = document.querySelectorAll('[type="checkbox"]');
|
||||
selectAll.addEventListener('change', t => {
|
||||
checkboxList.forEach(e => {
|
||||
e.checked = t.target.checked;
|
||||
});
|
||||
});
|
||||
})();
|
||||
});
|
||||
@ -1,86 +0,0 @@
|
||||
/**
|
||||
* Modal Example Create App
|
||||
*/
|
||||
|
||||
'use strict';
|
||||
|
||||
$(function () {
|
||||
// Modal id
|
||||
const appModal = document.getElementById('createApp');
|
||||
|
||||
// Credit Card
|
||||
const creditCardMask1 = document.querySelector('.app-credit-card-mask'),
|
||||
expiryDateMask1 = document.querySelector('.app-expiry-date-mask'),
|
||||
cvvMask1 = document.querySelector('.app-cvv-code-mask');
|
||||
let cleave;
|
||||
|
||||
// Cleave JS card Mask
|
||||
function initCleave() {
|
||||
if (creditCardMask1) {
|
||||
cleave = new Cleave(creditCardMask1, {
|
||||
creditCard: true,
|
||||
onCreditCardTypeChanged: function (type) {
|
||||
if (type != '' && type != 'unknown') {
|
||||
document.querySelector('.app-card-type').innerHTML =
|
||||
'<img src="' + assetsPath + 'img/icons/payments/' + type + '-cc.png" class="cc-icon-image" height="28"/>';
|
||||
} else {
|
||||
document.querySelector('.app-card-type').innerHTML = '';
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// Expiry Date Mask
|
||||
if (expiryDateMask1) {
|
||||
new Cleave(expiryDateMask1, {
|
||||
date: true,
|
||||
delimiter: '/',
|
||||
datePattern: ['m', 'y']
|
||||
});
|
||||
}
|
||||
|
||||
// CVV
|
||||
if (cvvMask1) {
|
||||
new Cleave(cvvMask1, {
|
||||
numeral: true,
|
||||
numeralPositiveOnly: true
|
||||
});
|
||||
}
|
||||
appModal.addEventListener('show.bs.modal', function (event) {
|
||||
const wizardCreateApp = document.querySelector('#wizard-create-app');
|
||||
if (typeof wizardCreateApp !== undefined && wizardCreateApp !== null) {
|
||||
// Wizard next prev button
|
||||
const wizardCreateAppNextList = [].slice.call(wizardCreateApp.querySelectorAll('.btn-next'));
|
||||
const wizardCreateAppPrevList = [].slice.call(wizardCreateApp.querySelectorAll('.btn-prev'));
|
||||
const wizardCreateAppBtnSubmit = wizardCreateApp.querySelector('.btn-submit');
|
||||
|
||||
const createAppStepper = new Stepper(wizardCreateApp, {
|
||||
linear: false
|
||||
});
|
||||
|
||||
if (wizardCreateAppNextList) {
|
||||
wizardCreateAppNextList.forEach(wizardCreateAppNext => {
|
||||
wizardCreateAppNext.addEventListener('click', event => {
|
||||
createAppStepper.next();
|
||||
initCleave();
|
||||
});
|
||||
});
|
||||
}
|
||||
if (wizardCreateAppPrevList) {
|
||||
wizardCreateAppPrevList.forEach(wizardCreateAppPrev => {
|
||||
wizardCreateAppPrev.addEventListener('click', event => {
|
||||
createAppStepper.previous();
|
||||
initCleave();
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
if (wizardCreateAppBtnSubmit) {
|
||||
wizardCreateAppBtnSubmit.addEventListener('click', event => {
|
||||
alert('Submitted..!!');
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
@ -1,79 +0,0 @@
|
||||
/**
|
||||
* Edit credit card
|
||||
*/
|
||||
|
||||
'use strict';
|
||||
|
||||
document.addEventListener('DOMContentLoaded', function (e) {
|
||||
(function () {
|
||||
const editCreditCardMaskEdit = document.querySelector('.credit-card-mask-edit'),
|
||||
editExpiryDateMaskEdit = document.querySelector('.expiry-date-mask-edit'),
|
||||
editCVVMaskEdit = document.querySelector('.cvv-code-mask-edit');
|
||||
|
||||
// Credit Card
|
||||
if (editCreditCardMaskEdit) {
|
||||
new Cleave(editCreditCardMaskEdit, {
|
||||
creditCard: true,
|
||||
onCreditCardTypeChanged: function (type) {
|
||||
if (type != '' && type != 'unknown') {
|
||||
document.querySelector('.card-type-edit').innerHTML =
|
||||
'<img src="' + assetsPath + 'img/icons/payments/' + type + '-cc.png" height="28"/>';
|
||||
} else {
|
||||
document.querySelector('.card-type-edit').innerHTML = '';
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Expiry Date MaskEdit
|
||||
if (editExpiryDateMaskEdit) {
|
||||
new Cleave(editExpiryDateMaskEdit, {
|
||||
date: true,
|
||||
delimiter: '/',
|
||||
datePattern: ['m', 'y']
|
||||
});
|
||||
}
|
||||
|
||||
// CVV MaskEdit
|
||||
if (editCVVMaskEdit) {
|
||||
new Cleave(editCVVMaskEdit, {
|
||||
numeral: true,
|
||||
numeralPositiveOnly: true
|
||||
});
|
||||
}
|
||||
|
||||
// Credit card form validation
|
||||
FormValidation.formValidation(document.getElementById('editCCForm'), {
|
||||
fields: {
|
||||
modalEditCard: {
|
||||
validators: {
|
||||
notEmpty: {
|
||||
message: 'Please enter your credit card number'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
plugins: {
|
||||
trigger: new FormValidation.plugins.Trigger(),
|
||||
bootstrap5: new FormValidation.plugins.Bootstrap5({
|
||||
// Use this for enabling/changing valid/invalid class
|
||||
// eleInvalidClass: '',
|
||||
eleValidClass: '',
|
||||
rowSelector: '.col-12'
|
||||
}),
|
||||
submitButton: new FormValidation.plugins.SubmitButton(),
|
||||
// Submit the form when all fields are valid
|
||||
// defaultSubmit: new FormValidation.plugins.DefaultSubmit(),
|
||||
autoFocus: new FormValidation.plugins.AutoFocus()
|
||||
},
|
||||
init: instance => {
|
||||
instance.on('plugins.message.placed', function (e) {
|
||||
//* Move the error message out of the `input-group` element
|
||||
if (e.element.parentElement.classList.contains('input-group')) {
|
||||
e.element.parentElement.insertAdjacentElement('afterend', e.messageElement);
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
})();
|
||||
});
|
||||
@ -1,35 +0,0 @@
|
||||
/**
|
||||
* Edit Permission Modal JS
|
||||
*/
|
||||
|
||||
'use strict';
|
||||
|
||||
// Edit permission form validation
|
||||
document.addEventListener('DOMContentLoaded', function (e) {
|
||||
(function () {
|
||||
FormValidation.formValidation(document.getElementById('editPermissionForm'), {
|
||||
fields: {
|
||||
editPermissionName: {
|
||||
validators: {
|
||||
notEmpty: {
|
||||
message: 'Please enter permission name'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
plugins: {
|
||||
trigger: new FormValidation.plugins.Trigger(),
|
||||
bootstrap5: new FormValidation.plugins.Bootstrap5({
|
||||
// Use this for enabling/changing valid/invalid class
|
||||
// eleInvalidClass: '',
|
||||
eleValidClass: '',
|
||||
rowSelector: '.col-sm-9'
|
||||
}),
|
||||
submitButton: new FormValidation.plugins.SubmitButton(),
|
||||
// Submit the form when all fields are valid
|
||||
// defaultSubmit: new FormValidation.plugins.DefaultSubmit(),
|
||||
autoFocus: new FormValidation.plugins.AutoFocus()
|
||||
}
|
||||
});
|
||||
})();
|
||||
});
|
||||
@ -1,103 +0,0 @@
|
||||
/**
|
||||
* Edit User
|
||||
*/
|
||||
|
||||
'use strict';
|
||||
|
||||
// Select2 (jquery)
|
||||
$(function () {
|
||||
const select2 = $('.select2');
|
||||
|
||||
// Select2 Country
|
||||
if (select2.length) {
|
||||
select2.each(function () {
|
||||
var $this = $(this);
|
||||
$this.wrap('<div class="position-relative"></div>').select2({
|
||||
placeholder: 'Select value',
|
||||
dropdownParent: $this.parent()
|
||||
});
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
document.addEventListener('DOMContentLoaded', function (e) {
|
||||
(function () {
|
||||
// variables
|
||||
const modalEditUserTaxID = document.querySelector('.modal-edit-tax-id');
|
||||
const modalEditUserPhone = document.querySelector('.phone-number-mask');
|
||||
|
||||
// Prefix
|
||||
if (modalEditUserTaxID) {
|
||||
new Cleave(modalEditUserTaxID, {
|
||||
prefix: 'TIN',
|
||||
blocks: [3, 3, 3, 4],
|
||||
uppercase: true
|
||||
});
|
||||
}
|
||||
|
||||
// Phone Number Input Mask
|
||||
if (modalEditUserPhone) {
|
||||
new Cleave(modalEditUserPhone, {
|
||||
phone: true,
|
||||
phoneRegionCode: 'US'
|
||||
});
|
||||
}
|
||||
|
||||
// Edit user form validation
|
||||
FormValidation.formValidation(document.getElementById('editUserForm'), {
|
||||
fields: {
|
||||
modalEditUserFirstName: {
|
||||
validators: {
|
||||
notEmpty: {
|
||||
message: 'Please enter your first name'
|
||||
},
|
||||
regexp: {
|
||||
regexp: /^[a-zA-Zs]+$/,
|
||||
message: 'The first name can only consist of alphabetical'
|
||||
}
|
||||
}
|
||||
},
|
||||
modalEditUserLastName: {
|
||||
validators: {
|
||||
notEmpty: {
|
||||
message: 'Please enter your last name'
|
||||
},
|
||||
regexp: {
|
||||
regexp: /^[a-zA-Zs]+$/,
|
||||
message: 'The last name can only consist of alphabetical'
|
||||
}
|
||||
}
|
||||
},
|
||||
modalEditUserName: {
|
||||
validators: {
|
||||
notEmpty: {
|
||||
message: 'Please enter your username'
|
||||
},
|
||||
stringLength: {
|
||||
min: 6,
|
||||
max: 30,
|
||||
message: 'The name must be more than 6 and less than 30 characters long'
|
||||
},
|
||||
regexp: {
|
||||
regexp: /^[a-zA-Z0-9 ]+$/,
|
||||
message: 'The name can only consist of alphabetical, number and space'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
plugins: {
|
||||
trigger: new FormValidation.plugins.Trigger(),
|
||||
bootstrap5: new FormValidation.plugins.Bootstrap5({
|
||||
// Use this for enabling/changing valid/invalid class
|
||||
// eleInvalidClass: '',
|
||||
eleValidClass: '',
|
||||
rowSelector: '.col-12'
|
||||
}),
|
||||
submitButton: new FormValidation.plugins.SubmitButton(),
|
||||
// Submit the form when all fields are valid
|
||||
// defaultSubmit: new FormValidation.plugins.DefaultSubmit(),
|
||||
autoFocus: new FormValidation.plugins.AutoFocus()
|
||||
}
|
||||
});
|
||||
})();
|
||||
});
|
||||
@ -1,53 +0,0 @@
|
||||
/**
|
||||
* Enable OTP
|
||||
*/
|
||||
|
||||
'use strict';
|
||||
|
||||
document.addEventListener('DOMContentLoaded', function (e) {
|
||||
(function () {
|
||||
const phoneMask = document.querySelector('.phone-number-otp-mask');
|
||||
|
||||
// Phone Number Input Mask
|
||||
if (phoneMask) {
|
||||
new Cleave(phoneMask, {
|
||||
phone: true,
|
||||
phoneRegionCode: 'US'
|
||||
});
|
||||
}
|
||||
|
||||
// Enable OTP form validation
|
||||
FormValidation.formValidation(document.getElementById('enableOTPForm'), {
|
||||
fields: {
|
||||
modalEnableOTPPhone: {
|
||||
validators: {
|
||||
notEmpty: {
|
||||
message: 'Please enter your mobile number'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
plugins: {
|
||||
trigger: new FormValidation.plugins.Trigger(),
|
||||
bootstrap5: new FormValidation.plugins.Bootstrap5({
|
||||
// Use this for enabling/changing valid/invalid class
|
||||
// eleInvalidClass: '',
|
||||
eleValidClass: '',
|
||||
rowSelector: '.col-12'
|
||||
}),
|
||||
submitButton: new FormValidation.plugins.SubmitButton(),
|
||||
// Submit the form when all fields are valid
|
||||
// defaultSubmit: new FormValidation.plugins.DefaultSubmit(),
|
||||
autoFocus: new FormValidation.plugins.AutoFocus()
|
||||
},
|
||||
init: instance => {
|
||||
instance.on('plugins.message.placed', function (e) {
|
||||
//* Move the error message out of the `input-group` element
|
||||
if (e.element.parentElement.classList.contains('input-group')) {
|
||||
e.element.parentElement.insertAdjacentElement('afterend', e.messageElement);
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
})();
|
||||
});
|
||||
@ -1,41 +0,0 @@
|
||||
/**
|
||||
* Share Project
|
||||
*/
|
||||
|
||||
'use strict';
|
||||
$(function () {
|
||||
const select2ShareProject = $('.share-project-select');
|
||||
|
||||
var shareProject = document.getElementById('shareProject');
|
||||
shareProject.addEventListener('show.bs.modal', function (event) {
|
||||
if (select2ShareProject.length) {
|
||||
function renderAvatar(option) {
|
||||
if (!option.id) {
|
||||
return option.text;
|
||||
}
|
||||
var optionEle =
|
||||
'<div class="d-flex align-items-center">' +
|
||||
'<div class="avatar avatar-xs me-2 d-flex">' +
|
||||
'<img src="' +
|
||||
assetsPath +
|
||||
$(option.element).data('image') +
|
||||
'" class="rounded-circle">' +
|
||||
'</div>' +
|
||||
'<div class="name">' +
|
||||
$(option.element).data('name') +
|
||||
'</div>' +
|
||||
'</div>';
|
||||
return optionEle;
|
||||
}
|
||||
select2ShareProject.wrap('<div class="position-relative"></div>').select2({
|
||||
dropdownParent: shareProject,
|
||||
templateResult: renderAvatar,
|
||||
templateSelection: renderAvatar,
|
||||
placeholder: 'Add Project Members',
|
||||
escapeMarkup: function (es) {
|
||||
return es;
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user