mirror of
https://github.com/alextselegidis/easyappointments.git
synced 2024-11-10 10:02:33 +03:00
Group commonly used UI components to a single utility module
This commit is contained in:
Alex Tselegidis
parent
d30e83fb56
commit
72e84bd4f3
9 changed files with 263 additions and 375 deletions
|
|
@ -126,6 +126,7 @@
|
||||||
<script src="<?= asset_url('assets/js/utils/date.js') ?>"></script>
|
<script src="<?= asset_url('assets/js/utils/date.js') ?>"></script>
|
||||||
<script src="<?= asset_url('assets/js/utils/message.js') ?>"></script>
|
<script src="<?= asset_url('assets/js/utils/message.js') ?>"></script>
|
||||||
<script src="<?= asset_url('assets/js/utils/validation.js') ?>"></script>
|
<script src="<?= asset_url('assets/js/utils/validation.js') ?>"></script>
|
||||||
|
<script src="<?= asset_url('assets/js/utils/ui.js') ?>"></script>
|
||||||
<script src="<?= asset_url('assets/js/utils/url.js') ?>"></script>
|
<script src="<?= asset_url('assets/js/utils/url.js') ?>"></script>
|
||||||
<script src="<?= asset_url('assets/js/utils/calendar_default_view.js') ?>"></script>
|
<script src="<?= asset_url('assets/js/utils/calendar_default_view.js') ?>"></script>
|
||||||
<script src="<?= asset_url('assets/js/utils/calendar_table_view.js') ?>"></script>
|
<script src="<?= asset_url('assets/js/utils/calendar_table_view.js') ?>"></script>
|
||||||
|
|
|
||||||
|
|
@ -80,6 +80,7 @@
|
||||||
|
|
||||||
<?php section('scripts') ?>
|
<?php section('scripts') ?>
|
||||||
|
|
||||||
|
<script src="<?= asset_url('assets/js/utils/ui.js') ?>"></script>
|
||||||
<script src="<?= asset_url('assets/js/utils/url.js') ?>"></script>
|
<script src="<?= asset_url('assets/js/utils/url.js') ?>"></script>
|
||||||
<script src="<?= asset_url('assets/js/http/legal_settings_http_client.js') ?>"></script>
|
<script src="<?= asset_url('assets/js/http/legal_settings_http_client.js') ?>"></script>
|
||||||
<script src="<?= asset_url('assets/js/pages/legal_settings.js') ?>"></script>
|
<script src="<?= asset_url('assets/js/pages/legal_settings.js') ?>"></script>
|
||||||
|
|
|
||||||
|
|
@ -341,6 +341,7 @@
|
||||||
<script src="<?= asset_url('assets/js/utils/date.js') ?>"></script>
|
<script src="<?= asset_url('assets/js/utils/date.js') ?>"></script>
|
||||||
<script src="<?= asset_url('assets/js/utils/message.js') ?>"></script>
|
<script src="<?= asset_url('assets/js/utils/message.js') ?>"></script>
|
||||||
<script src="<?= asset_url('assets/js/utils/string.js') ?>"></script>
|
<script src="<?= asset_url('assets/js/utils/string.js') ?>"></script>
|
||||||
|
<script src="<?= asset_url('assets/js/utils/ui.js') ?>"></script>
|
||||||
<script src="<?= asset_url('assets/js/utils/url.js') ?>"></script>
|
<script src="<?= asset_url('assets/js/utils/url.js') ?>"></script>
|
||||||
<script src="<?= asset_url('assets/js/utils/validation.js') ?>"></script>
|
<script src="<?= asset_url('assets/js/utils/validation.js') ?>"></script>
|
||||||
<script src="<?= asset_url('assets/js/utils/working_plan.js') ?>"></script>
|
<script src="<?= asset_url('assets/js/utils/working_plan.js') ?>"></script>
|
||||||
|
|
|
||||||
|
|
@ -452,81 +452,8 @@ App.Components.AppointmentsModal = (function () {
|
||||||
|
|
||||||
const startDatetime = new Date();
|
const startDatetime = new Date();
|
||||||
const endDatetime = moment().add(duration, 'minutes').toDate();
|
const endDatetime = moment().add(duration, 'minutes').toDate();
|
||||||
let dateFormat;
|
|
||||||
|
|
||||||
switch (vars('date_format')) {
|
App.Utils.UI.initializeDatetimepicker($startDatetime, {
|
||||||
case 'DMY':
|
|
||||||
dateFormat = 'dd/mm/yy';
|
|
||||||
break;
|
|
||||||
case 'MDY':
|
|
||||||
dateFormat = 'mm/dd/yy';
|
|
||||||
break;
|
|
||||||
case 'YMD':
|
|
||||||
dateFormat = 'yy/mm/dd';
|
|
||||||
break;
|
|
||||||
default:
|
|
||||||
throw new Error('Invalid date format value.');
|
|
||||||
}
|
|
||||||
|
|
||||||
const firstWeekDay = vars('first_weekday');
|
|
||||||
|
|
||||||
const firstWeekDayNumber = App.Utils.Date.getWeekdayId(firstWeekDay);
|
|
||||||
|
|
||||||
$startDatetime.datetimepicker({
|
|
||||||
dateFormat: dateFormat,
|
|
||||||
timeFormat: vars('time_format') === 'regular' ? 'h:mm tt' : 'HH:mm',
|
|
||||||
|
|
||||||
// Translation
|
|
||||||
dayNames: [
|
|
||||||
lang('sunday'),
|
|
||||||
lang('monday'),
|
|
||||||
lang('tuesday'),
|
|
||||||
lang('wednesday'),
|
|
||||||
lang('thursday'),
|
|
||||||
lang('friday'),
|
|
||||||
lang('saturday')
|
|
||||||
],
|
|
||||||
dayNamesShort: [
|
|
||||||
lang('sunday').substr(0, 3),
|
|
||||||
lang('monday').substr(0, 3),
|
|
||||||
lang('tuesday').substr(0, 3),
|
|
||||||
lang('wednesday').substr(0, 3),
|
|
||||||
lang('thursday').substr(0, 3),
|
|
||||||
lang('friday').substr(0, 3),
|
|
||||||
lang('saturday').substr(0, 3)
|
|
||||||
],
|
|
||||||
dayNamesMin: [
|
|
||||||
lang('sunday').substr(0, 2),
|
|
||||||
lang('monday').substr(0, 2),
|
|
||||||
lang('tuesday').substr(0, 2),
|
|
||||||
lang('wednesday').substr(0, 2),
|
|
||||||
lang('thursday').substr(0, 2),
|
|
||||||
lang('friday').substr(0, 2),
|
|
||||||
lang('saturday').substr(0, 2)
|
|
||||||
],
|
|
||||||
monthNames: [
|
|
||||||
lang('january'),
|
|
||||||
lang('february'),
|
|
||||||
lang('march'),
|
|
||||||
lang('april'),
|
|
||||||
lang('may'),
|
|
||||||
lang('june'),
|
|
||||||
lang('july'),
|
|
||||||
lang('august'),
|
|
||||||
lang('september'),
|
|
||||||
lang('october'),
|
|
||||||
lang('november'),
|
|
||||||
lang('december')
|
|
||||||
],
|
|
||||||
prevText: lang('previous'),
|
|
||||||
nextText: lang('next'),
|
|
||||||
currentText: lang('now'),
|
|
||||||
closeText: lang('close'),
|
|
||||||
timeOnlyTitle: lang('select_time'),
|
|
||||||
timeText: lang('time'),
|
|
||||||
hourText: lang('hour'),
|
|
||||||
minuteText: lang('minutes'),
|
|
||||||
firstDay: firstWeekDayNumber,
|
|
||||||
onClose: () => {
|
onClose: () => {
|
||||||
const serviceId = $selectService.val();
|
const serviceId = $selectService.val();
|
||||||
|
|
||||||
|
|
@ -539,64 +466,10 @@ App.Components.AppointmentsModal = (function () {
|
||||||
$endDatetime.datetimepicker('setDate', new Date(start.getTime() + service.duration * 60000));
|
$endDatetime.datetimepicker('setDate', new Date(start.getTime() + service.duration * 60000));
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
$startDatetime.datetimepicker('setDate', startDatetime);
|
$startDatetime.datetimepicker('setDate', startDatetime);
|
||||||
|
|
||||||
$endDatetime.datetimepicker({
|
App.Utils.UI.initializeDatetimepicker($endDatetime);
|
||||||
dateFormat: dateFormat,
|
|
||||||
timeFormat: vars('time_format') === 'regular' ? 'h:mm tt' : 'HH:mm',
|
|
||||||
|
|
||||||
// Translation
|
|
||||||
dayNames: [
|
|
||||||
lang('sunday'),
|
|
||||||
lang('monday'),
|
|
||||||
lang('tuesday'),
|
|
||||||
lang('wednesday'),
|
|
||||||
lang('thursday'),
|
|
||||||
lang('friday'),
|
|
||||||
lang('saturday')
|
|
||||||
],
|
|
||||||
dayNamesShort: [
|
|
||||||
lang('sunday').substr(0, 3),
|
|
||||||
lang('monday').substr(0, 3),
|
|
||||||
lang('tuesday').substr(0, 3),
|
|
||||||
lang('wednesday').substr(0, 3),
|
|
||||||
lang('thursday').substr(0, 3),
|
|
||||||
lang('friday').substr(0, 3),
|
|
||||||
lang('saturday').substr(0, 3)
|
|
||||||
],
|
|
||||||
dayNamesMin: [
|
|
||||||
lang('sunday').substr(0, 2),
|
|
||||||
lang('monday').substr(0, 2),
|
|
||||||
lang('tuesday').substr(0, 2),
|
|
||||||
lang('wednesday').substr(0, 2),
|
|
||||||
lang('thursday').substr(0, 2),
|
|
||||||
lang('friday').substr(0, 2),
|
|
||||||
lang('saturday').substr(0, 2)
|
|
||||||
],
|
|
||||||
monthNames: [
|
|
||||||
lang('january'),
|
|
||||||
lang('february'),
|
|
||||||
lang('march'),
|
|
||||||
lang('april'),
|
|
||||||
lang('may'),
|
|
||||||
lang('june'),
|
|
||||||
lang('july'),
|
|
||||||
lang('august'),
|
|
||||||
lang('september'),
|
|
||||||
lang('october'),
|
|
||||||
lang('november'),
|
|
||||||
lang('december')
|
|
||||||
],
|
|
||||||
prevText: lang('previous'),
|
|
||||||
nextText: lang('next'),
|
|
||||||
currentText: lang('now'),
|
|
||||||
closeText: lang('close'),
|
|
||||||
timeOnlyTitle: lang('select_time'),
|
|
||||||
timeText: lang('time'),
|
|
||||||
hourText: lang('hour'),
|
|
||||||
minuteText: lang('minutes'),
|
|
||||||
firstDay: firstWeekDayNumber
|
|
||||||
});
|
|
||||||
$endDatetime.datetimepicker('setDate', endDatetime);
|
$endDatetime.datetimepicker('setDate', endDatetime);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -188,138 +188,12 @@ App.Components.UnavailabilitiesModal = (function () {
|
||||||
true
|
true
|
||||||
);
|
);
|
||||||
|
|
||||||
let dateFormat;
|
App.Utils.UI.initializeDatetimepicker($startDatetime);
|
||||||
|
|
||||||
switch (vars('date_format')) {
|
|
||||||
case 'DMY':
|
|
||||||
dateFormat = 'dd/mm/yy';
|
|
||||||
break;
|
|
||||||
case 'MDY':
|
|
||||||
dateFormat = 'mm/dd/yy';
|
|
||||||
break;
|
|
||||||
case 'YMD':
|
|
||||||
dateFormat = 'yy/mm/dd';
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
|
|
||||||
const firstWeekday = vars('first_weekday');
|
|
||||||
|
|
||||||
const firstWeekdayId = App.Utils.Date.getWeekdayId(firstWeekday);
|
|
||||||
|
|
||||||
$startDatetime.datetimepicker({
|
|
||||||
dateFormat: dateFormat,
|
|
||||||
timeFormat: vars('time_format') === 'regular' ? 'h:mm tt' : 'HH:mm',
|
|
||||||
|
|
||||||
// Translation
|
|
||||||
dayNames: [
|
|
||||||
lang('sunday'),
|
|
||||||
lang('monday'),
|
|
||||||
lang('tuesday'),
|
|
||||||
lang('wednesday'),
|
|
||||||
lang('thursday'),
|
|
||||||
lang('friday'),
|
|
||||||
lang('saturday')
|
|
||||||
],
|
|
||||||
dayNamesShort: [
|
|
||||||
lang('sunday').substr(0, 3),
|
|
||||||
lang('monday').substr(0, 3),
|
|
||||||
lang('tuesday').substr(0, 3),
|
|
||||||
lang('wednesday').substr(0, 3),
|
|
||||||
lang('thursday').substr(0, 3),
|
|
||||||
lang('friday').substr(0, 3),
|
|
||||||
lang('saturday').substr(0, 3)
|
|
||||||
],
|
|
||||||
dayNamesMin: [
|
|
||||||
lang('sunday').substr(0, 2),
|
|
||||||
lang('monday').substr(0, 2),
|
|
||||||
lang('tuesday').substr(0, 2),
|
|
||||||
lang('wednesday').substr(0, 2),
|
|
||||||
lang('thursday').substr(0, 2),
|
|
||||||
lang('friday').substr(0, 2),
|
|
||||||
lang('saturday').substr(0, 2)
|
|
||||||
],
|
|
||||||
monthNames: [
|
|
||||||
lang('january'),
|
|
||||||
lang('february'),
|
|
||||||
lang('march'),
|
|
||||||
lang('april'),
|
|
||||||
lang('may'),
|
|
||||||
lang('june'),
|
|
||||||
lang('july'),
|
|
||||||
lang('august'),
|
|
||||||
lang('september'),
|
|
||||||
lang('october'),
|
|
||||||
lang('november'),
|
|
||||||
lang('december')
|
|
||||||
],
|
|
||||||
prevText: lang('previous'),
|
|
||||||
nextText: lang('next'),
|
|
||||||
currentText: lang('now'),
|
|
||||||
closeText: lang('close'),
|
|
||||||
timeOnlyTitle: lang('select_time'),
|
|
||||||
timeText: lang('time'),
|
|
||||||
hourText: lang('hour'),
|
|
||||||
minuteText: lang('minutes'),
|
|
||||||
firstDay: firstWeekdayId
|
|
||||||
});
|
|
||||||
$startDatetime.val(start);
|
$startDatetime.val(start);
|
||||||
|
|
||||||
$endDatetime.datetimepicker({
|
App.Utils.UI.initializeDatetimepicker($endDatetime);
|
||||||
dateFormat: dateFormat,
|
|
||||||
timeFormat: vars('time_format') === 'regular' ? 'h:mm tt' : 'HH:mm',
|
|
||||||
|
|
||||||
// Translation
|
|
||||||
dayNames: [
|
|
||||||
lang('sunday'),
|
|
||||||
lang('monday'),
|
|
||||||
lang('tuesday'),
|
|
||||||
lang('wednesday'),
|
|
||||||
lang('thursday'),
|
|
||||||
lang('friday'),
|
|
||||||
lang('saturday')
|
|
||||||
],
|
|
||||||
dayNamesShort: [
|
|
||||||
lang('sunday').substr(0, 3),
|
|
||||||
lang('monday').substr(0, 3),
|
|
||||||
lang('tuesday').substr(0, 3),
|
|
||||||
lang('wednesday').substr(0, 3),
|
|
||||||
lang('thursday').substr(0, 3),
|
|
||||||
lang('friday').substr(0, 3),
|
|
||||||
lang('saturday').substr(0, 3)
|
|
||||||
],
|
|
||||||
dayNamesMin: [
|
|
||||||
lang('sunday').substr(0, 2),
|
|
||||||
lang('monday').substr(0, 2),
|
|
||||||
lang('tuesday').substr(0, 2),
|
|
||||||
lang('wednesday').substr(0, 2),
|
|
||||||
lang('thursday').substr(0, 2),
|
|
||||||
lang('friday').substr(0, 2),
|
|
||||||
lang('saturday').substr(0, 2)
|
|
||||||
],
|
|
||||||
monthNames: [
|
|
||||||
lang('january'),
|
|
||||||
lang('february'),
|
|
||||||
lang('march'),
|
|
||||||
lang('april'),
|
|
||||||
lang('may'),
|
|
||||||
lang('june'),
|
|
||||||
lang('july'),
|
|
||||||
lang('august'),
|
|
||||||
lang('september'),
|
|
||||||
lang('october'),
|
|
||||||
lang('november'),
|
|
||||||
lang('december')
|
|
||||||
],
|
|
||||||
prevText: lang('previous'),
|
|
||||||
nextText: lang('next'),
|
|
||||||
currentText: lang('now'),
|
|
||||||
closeText: lang('close'),
|
|
||||||
timeOnlyTitle: lang('select_time'),
|
|
||||||
timeText: lang('time'),
|
|
||||||
hourText: lang('hour'),
|
|
||||||
minuteText: lang('minutes'),
|
|
||||||
firstDay: firstWeekdayId
|
|
||||||
});
|
|
||||||
$endDatetime.val(end);
|
$endDatetime.val(end);
|
||||||
|
|
||||||
// Clear the unavailability notes field.
|
// Clear the unavailability notes field.
|
||||||
|
|
|
||||||
|
|
@ -386,108 +386,13 @@ App.Components.WorkingPlanExceptionsModal = (function () {
|
||||||
$('.working-plan-exceptions-add-break').prop('disabled', false);
|
$('.working-plan-exceptions-add-break').prop('disabled', false);
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
|
||||||
* Initialize a datepicker instance on the provided target selector.
|
|
||||||
*
|
|
||||||
* @param {jQuery} $target
|
|
||||||
*/
|
|
||||||
function initializeDatepicker($target) {
|
|
||||||
let dateFormat;
|
|
||||||
|
|
||||||
switch (vars('date_format')) {
|
|
||||||
case 'DMY':
|
|
||||||
dateFormat = 'dd/mm/yy';
|
|
||||||
break;
|
|
||||||
|
|
||||||
case 'MDY':
|
|
||||||
dateFormat = 'mm/dd/yy';
|
|
||||||
break;
|
|
||||||
|
|
||||||
case 'YMD':
|
|
||||||
dateFormat = 'yy/mm/dd';
|
|
||||||
break;
|
|
||||||
|
|
||||||
default:
|
|
||||||
throw new Error('Invalid date format setting provided: ' + vars('date_format'));
|
|
||||||
}
|
|
||||||
|
|
||||||
$target.datepicker({
|
|
||||||
dateFormat: dateFormat,
|
|
||||||
firstDay: App.Utils.Date.getWeekdayId(vars('first_weekday')),
|
|
||||||
minDate: 0,
|
|
||||||
defaultDate: moment().toDate(),
|
|
||||||
dayNames: [
|
|
||||||
lang('sunday'),
|
|
||||||
lang('monday'),
|
|
||||||
lang('tuesday'),
|
|
||||||
lang('wednesday'),
|
|
||||||
lang('thursday'),
|
|
||||||
lang('friday'),
|
|
||||||
lang('saturday')
|
|
||||||
],
|
|
||||||
dayNamesShort: [
|
|
||||||
lang('sunday').substr(0, 3),
|
|
||||||
lang('monday').substr(0, 3),
|
|
||||||
lang('tuesday').substr(0, 3),
|
|
||||||
lang('wednesday').substr(0, 3),
|
|
||||||
lang('thursday').substr(0, 3),
|
|
||||||
lang('friday').substr(0, 3),
|
|
||||||
lang('saturday').substr(0, 3)
|
|
||||||
],
|
|
||||||
dayNamesMin: [
|
|
||||||
lang('sunday').substr(0, 2),
|
|
||||||
lang('monday').substr(0, 2),
|
|
||||||
lang('tuesday').substr(0, 2),
|
|
||||||
lang('wednesday').substr(0, 2),
|
|
||||||
lang('thursday').substr(0, 2),
|
|
||||||
lang('friday').substr(0, 2),
|
|
||||||
lang('saturday').substr(0, 2)
|
|
||||||
],
|
|
||||||
monthNames: [
|
|
||||||
lang('january'),
|
|
||||||
lang('february'),
|
|
||||||
lang('march'),
|
|
||||||
lang('april'),
|
|
||||||
lang('may'),
|
|
||||||
lang('june'),
|
|
||||||
lang('july'),
|
|
||||||
lang('august'),
|
|
||||||
lang('september'),
|
|
||||||
lang('october'),
|
|
||||||
lang('november'),
|
|
||||||
lang('december')
|
|
||||||
],
|
|
||||||
prevText: lang('previous'),
|
|
||||||
nextText: lang('next'),
|
|
||||||
currentText: lang('now'),
|
|
||||||
closeText: lang('close')
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Initialize a timepicker on the provided target selector.
|
|
||||||
*
|
|
||||||
* @param {jQuery} $target
|
|
||||||
*/
|
|
||||||
function initializeTimepicker($target) {
|
|
||||||
$target.timepicker({
|
|
||||||
timeFormat: vars('time_format') === 'regular' ? 'h:mm tt' : 'HH:mm',
|
|
||||||
currentText: lang('now'),
|
|
||||||
closeText: lang('close'),
|
|
||||||
timeOnlyTitle: lang('select_time'),
|
|
||||||
timeText: lang('time'),
|
|
||||||
hourText: lang('hour'),
|
|
||||||
minuteText: lang('minutes')
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Initialize the module.
|
* Initialize the module.
|
||||||
*/
|
*/
|
||||||
function initialize() {
|
function initialize() {
|
||||||
initializeDatepicker($date);
|
App.Utils.UI.initializeDatepicker($date);
|
||||||
initializeTimepicker($start);
|
App.Utils.UI.initializeTimepicker($start);
|
||||||
initializeTimepicker($end);
|
App.Utils.UI.initializeTimepicker($end);
|
||||||
|
|
||||||
$modal
|
$modal
|
||||||
.on('hidden.bs.modal', onModalHidden)
|
.on('hidden.bs.modal', onModalHidden)
|
||||||
|
|
|
||||||
|
|
@ -141,9 +141,9 @@ App.Pages.LegalSettings = (function () {
|
||||||
* Initialize the module.
|
* Initialize the module.
|
||||||
*/
|
*/
|
||||||
function initialize() {
|
function initialize() {
|
||||||
$cookieNoticeContent.trumbowyg();
|
App.Utils.UI.initializeTextEditor($cookieNoticeContent);
|
||||||
$termsAndConditionsContent.trumbowyg();
|
App.Utils.UI.initializeTextEditor($termsAndConditionsContent);
|
||||||
$privacyPolicyContent.trumbowyg();
|
App.Utils.UI.initializeTextEditor($privacyPolicyContent);
|
||||||
|
|
||||||
const legalSettings = vars('legal_settings');
|
const legalSettings = vars('legal_settings');
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -471,7 +471,7 @@ App.Utils.CalendarTableView = (function () {
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
$filterProvider.select2();
|
App.Utils.UI.initializeDropdown($filterProvider);
|
||||||
|
|
||||||
const services = vars('available_services').filter((service) => {
|
const services = vars('available_services').filter((service) => {
|
||||||
const provider = providers.find((provider) => provider.services.indexOf(service.id) !== -1);
|
const provider = providers.find((provider) => provider.services.indexOf(service.id) !== -1);
|
||||||
|
|
@ -500,7 +500,7 @@ App.Utils.CalendarTableView = (function () {
|
||||||
$filterService.append(new Option(service.name, service.id));
|
$filterService.append(new Option(service.name, service.id));
|
||||||
});
|
});
|
||||||
|
|
||||||
$filterService.select2();
|
App.Utils.UI.initializeDropdown($filterService);
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|
|
||||||
233
assets/js/utils/ui.js
Normal file
233
assets/js/utils/ui.js
Normal file
|
|
@ -0,0 +1,233 @@
|
||||||
|
/* ----------------------------------------------------------------------------
|
||||||
|
* Easy!Appointments - Online Appointment Scheduler
|
||||||
|
*
|
||||||
|
* @package EasyAppointments
|
||||||
|
* @author A.Tselegidis <alextselegidis@gmail.com>
|
||||||
|
* @copyright Copyright (c) Alex Tselegidis
|
||||||
|
* @license https://opensource.org/licenses/GPL-3.0 - GPLv3
|
||||||
|
* @link https://easyappointments.org
|
||||||
|
* @since v1.5.0
|
||||||
|
* ---------------------------------------------------------------------------- */
|
||||||
|
|
||||||
|
/**
|
||||||
|
* UI utility.
|
||||||
|
*
|
||||||
|
* This module provides commonly used UI functionality.
|
||||||
|
*/
|
||||||
|
window.App.Utils.UI = (function () {
|
||||||
|
/**
|
||||||
|
* Get the jQuery UI compatible date format.
|
||||||
|
*
|
||||||
|
* @return {String}
|
||||||
|
*/
|
||||||
|
function getDateFormat() {
|
||||||
|
switch (vars('date_format')) {
|
||||||
|
case 'DMY':
|
||||||
|
return 'dd/mm/yy';
|
||||||
|
case 'MDY':
|
||||||
|
return 'mm/dd/yy';
|
||||||
|
case 'YMD':
|
||||||
|
return 'yy/mm/dd';
|
||||||
|
default:
|
||||||
|
throw new Error('Invalid date format value.');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Initialize the date time picker component.
|
||||||
|
*
|
||||||
|
* This method is based on jQuery UI.
|
||||||
|
*
|
||||||
|
* @param {jQuery} $target
|
||||||
|
* @param {Object} [params]
|
||||||
|
*/
|
||||||
|
function initializeDatetimepicker($target, params = {}) {
|
||||||
|
const dateFormat = getDateFormat();
|
||||||
|
|
||||||
|
const firstWeekDay = vars('first_weekday');
|
||||||
|
|
||||||
|
const firstWeekDayNumber = App.Utils.Date.getWeekdayId(firstWeekDay);
|
||||||
|
|
||||||
|
const options = {
|
||||||
|
dateFormat: dateFormat,
|
||||||
|
timeFormat: vars('time_format') === 'regular' ? 'h:mm tt' : 'HH:mm',
|
||||||
|
|
||||||
|
// Translation
|
||||||
|
dayNames: [
|
||||||
|
lang('sunday'),
|
||||||
|
lang('monday'),
|
||||||
|
lang('tuesday'),
|
||||||
|
lang('wednesday'),
|
||||||
|
lang('thursday'),
|
||||||
|
lang('friday'),
|
||||||
|
lang('saturday')
|
||||||
|
],
|
||||||
|
dayNamesShort: [
|
||||||
|
lang('sunday').substring(0, 3),
|
||||||
|
lang('monday').substring(0, 3),
|
||||||
|
lang('tuesday').substring(0, 3),
|
||||||
|
lang('wednesday').substring(0, 3),
|
||||||
|
lang('thursday').substring(0, 3),
|
||||||
|
lang('friday').substring(0, 3),
|
||||||
|
lang('saturday').substring(0, 3)
|
||||||
|
],
|
||||||
|
dayNamesMin: [
|
||||||
|
lang('sunday').substring(0, 2),
|
||||||
|
lang('monday').substring(0, 2),
|
||||||
|
lang('tuesday').substring(0, 2),
|
||||||
|
lang('wednesday').substring(0, 2),
|
||||||
|
lang('thursday').substring(0, 2),
|
||||||
|
lang('friday').substring(0, 2),
|
||||||
|
lang('saturday').substring(0, 2)
|
||||||
|
],
|
||||||
|
monthNames: [
|
||||||
|
lang('january'),
|
||||||
|
lang('february'),
|
||||||
|
lang('march'),
|
||||||
|
lang('april'),
|
||||||
|
lang('may'),
|
||||||
|
lang('june'),
|
||||||
|
lang('july'),
|
||||||
|
lang('august'),
|
||||||
|
lang('september'),
|
||||||
|
lang('october'),
|
||||||
|
lang('november'),
|
||||||
|
lang('december')
|
||||||
|
],
|
||||||
|
prevText: lang('previous'),
|
||||||
|
nextText: lang('next'),
|
||||||
|
currentText: lang('now'),
|
||||||
|
closeText: lang('close'),
|
||||||
|
timeOnlyTitle: lang('select_time'),
|
||||||
|
timeText: lang('time'),
|
||||||
|
hourText: lang('hour'),
|
||||||
|
minuteText: lang('minutes'),
|
||||||
|
firstDay: firstWeekDayNumber,
|
||||||
|
|
||||||
|
...params
|
||||||
|
}
|
||||||
|
|
||||||
|
$target.datetimepicker(options);
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Initialize the date picker component.
|
||||||
|
*
|
||||||
|
* This method is based on jQuery UI.
|
||||||
|
*
|
||||||
|
* @param {jQuery} $target
|
||||||
|
* @param {Object} [params]
|
||||||
|
*/
|
||||||
|
function initializeDatepicker($target, params = {}) {
|
||||||
|
const dateFormat = getDateFormat();
|
||||||
|
|
||||||
|
$target.datepicker({
|
||||||
|
dateFormat: dateFormat,
|
||||||
|
firstDay: App.Utils.Date.getWeekdayId(vars('first_weekday')),
|
||||||
|
minDate: 0,
|
||||||
|
defaultDate: moment().toDate(),
|
||||||
|
dayNames: [
|
||||||
|
lang('sunday'),
|
||||||
|
lang('monday'),
|
||||||
|
lang('tuesday'),
|
||||||
|
lang('wednesday'),
|
||||||
|
lang('thursday'),
|
||||||
|
lang('friday'),
|
||||||
|
lang('saturday')
|
||||||
|
],
|
||||||
|
dayNamesShort: [
|
||||||
|
lang('sunday').substring(0, 3),
|
||||||
|
lang('monday').substring(0, 3),
|
||||||
|
lang('tuesday').substring(0, 3),
|
||||||
|
lang('wednesday').substring(0, 3),
|
||||||
|
lang('thursday').substring(0, 3),
|
||||||
|
lang('friday').substring(0, 3),
|
||||||
|
lang('saturday').substring(0, 3)
|
||||||
|
],
|
||||||
|
dayNamesMin: [
|
||||||
|
lang('sunday').substring(0, 2),
|
||||||
|
lang('monday').substring(0, 2),
|
||||||
|
lang('tuesday').substring(0, 2),
|
||||||
|
lang('wednesday').substring(0, 2),
|
||||||
|
lang('thursday').substring(0, 2),
|
||||||
|
lang('friday').substring(0, 2),
|
||||||
|
lang('saturday').substring(0, 2)
|
||||||
|
],
|
||||||
|
monthNames: [
|
||||||
|
lang('january'),
|
||||||
|
lang('february'),
|
||||||
|
lang('march'),
|
||||||
|
lang('april'),
|
||||||
|
lang('may'),
|
||||||
|
lang('june'),
|
||||||
|
lang('july'),
|
||||||
|
lang('august'),
|
||||||
|
lang('september'),
|
||||||
|
lang('october'),
|
||||||
|
lang('november'),
|
||||||
|
lang('december')
|
||||||
|
],
|
||||||
|
prevText: lang('previous'),
|
||||||
|
nextText: lang('next'),
|
||||||
|
currentText: lang('now'),
|
||||||
|
closeText: lang('close'),
|
||||||
|
|
||||||
|
...params
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Initialize the time picker component.
|
||||||
|
*
|
||||||
|
* This method is based on jQuery UI.
|
||||||
|
*
|
||||||
|
* @param {jQuery} $target
|
||||||
|
* @param {Object} [params]
|
||||||
|
*/
|
||||||
|
function initializeTimepicker($target, params = {}) {
|
||||||
|
$target.timepicker({
|
||||||
|
timeFormat: vars('time_format') === 'regular' ? 'h:mm tt' : 'HH:mm',
|
||||||
|
currentText: lang('now'),
|
||||||
|
closeText: lang('close'),
|
||||||
|
timeOnlyTitle: lang('select_time'),
|
||||||
|
timeText: lang('time'),
|
||||||
|
hourText: lang('hour'),
|
||||||
|
minuteText: lang('minutes'),
|
||||||
|
|
||||||
|
...params
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Initialize the select dropdown component.
|
||||||
|
*
|
||||||
|
* This method is based on Select2.
|
||||||
|
*
|
||||||
|
* @param {jQuery} $target
|
||||||
|
* @param {Object} [params]
|
||||||
|
*/
|
||||||
|
function initializeDropdown($target, params = {}) {
|
||||||
|
$target.select2(params);
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Initialize the text editor component.
|
||||||
|
*
|
||||||
|
* This method is based on Trumbowyg.
|
||||||
|
*
|
||||||
|
* @param {jQuery} $target
|
||||||
|
* @param {Object} [params]
|
||||||
|
*/
|
||||||
|
function initializeTextEditor($target, params = {}) {
|
||||||
|
$target.trumbowyg(params);
|
||||||
|
}
|
||||||
|
|
||||||
|
return {
|
||||||
|
initializeDatetimepicker,
|
||||||
|
initializeDatepicker,
|
||||||
|
initializeTimepicker,
|
||||||
|
initializeDropdown,
|
||||||
|
initializeTextEditor,
|
||||||
|
};
|
||||||
|
})();
|
||||||
Loading…
Reference in a new issue