233 lines
6.6 KiB
JavaScript
233 lines
6.6 KiB
JavaScript
/* ----------------------------------------------------------------------------
|
|
* 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 Flatpickr compatible date format.
|
|
*
|
|
* @return {String}
|
|
*/
|
|
function getDateFormat() {
|
|
switch (vars('date_format')) {
|
|
case 'DMY':
|
|
return 'd/m/Y';
|
|
case 'MDY':
|
|
return 'm/d/Y';
|
|
case 'YMD':
|
|
return 'Y/m/d';
|
|
default:
|
|
throw new Error('Invalid date format value.');
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Get the Flatpickr compatible date format.
|
|
*
|
|
* @return {String}
|
|
*/
|
|
function getTimeFormat() {
|
|
switch (vars('time_format')) {
|
|
case 'regular':
|
|
return 'h:i K';
|
|
case 'military':
|
|
return 'H:i';
|
|
default:
|
|
throw new Error('Invalid date format value.');
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Get the localization object.
|
|
*
|
|
* @return Object
|
|
*/
|
|
function getFlatpickrLocale() {
|
|
const firstWeekDay = vars('first_weekday');
|
|
|
|
const firstWeekDayNumber = App.Utils.Date.getWeekdayId(firstWeekDay);
|
|
|
|
return {
|
|
weekdays: {
|
|
shorthand: [
|
|
lang('sunday_short'),
|
|
lang('monday_short'),
|
|
lang('tuesday_short'),
|
|
lang('wednesday_short'),
|
|
lang('thursday_short'),
|
|
lang('friday_short'),
|
|
lang('saturday_short')
|
|
],
|
|
longhand: [
|
|
lang('sunday'),
|
|
lang('monday'),
|
|
lang('tuesday'),
|
|
lang('wednesday'),
|
|
lang('thursday'),
|
|
lang('friday'),
|
|
lang('saturday')
|
|
],
|
|
},
|
|
months: {
|
|
shorthand: [
|
|
lang('january_short'),
|
|
lang('february_short'),
|
|
lang('march_short'),
|
|
lang('april_short'),
|
|
lang('may_short'),
|
|
lang('june_short'),
|
|
lang('july_short'),
|
|
lang('august_short'),
|
|
lang('september_short'),
|
|
lang('october_short'),
|
|
lang('november_short'),
|
|
lang('december_short'),
|
|
],
|
|
longhand: [
|
|
lang('january'),
|
|
lang('february'),
|
|
lang('march'),
|
|
lang('april'),
|
|
lang('may'),
|
|
lang('june'),
|
|
lang('july'),
|
|
lang('august'),
|
|
lang('september'),
|
|
lang('october'),
|
|
lang('november'),
|
|
lang('december')
|
|
],
|
|
},
|
|
daysInMonth: [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31],
|
|
firstDayOfWeek: firstWeekDayNumber,
|
|
ordinal: function (nth) {
|
|
const s = nth % 100;
|
|
|
|
if (s > 3 && s < 21)
|
|
return 'th';
|
|
switch (s % 10) {
|
|
case 1:
|
|
return 'st';
|
|
case 2:
|
|
return 'nd';
|
|
case 3:
|
|
return 'rd';
|
|
default:
|
|
return 'th';
|
|
}
|
|
},
|
|
rangeSeparator: ` ${lang('to')} `,
|
|
weekAbbreviation: lang('week_short'),
|
|
scrollTitle: lang('scroll_to_increment'),
|
|
toggleTitle: lang('click_to_toggle'),
|
|
amPM: [lang('am'), lang('pm')],
|
|
yearAriaLabel: lang('year'),
|
|
monthAriaLabel: lang('month'),
|
|
hourAriaLabel: lang('hour'),
|
|
minuteAriaLabel: lang('minute'),
|
|
time_24hr: false,
|
|
}
|
|
}
|
|
|
|
|
|
/**
|
|
* Initialize the date time picker component.
|
|
*
|
|
* This method is based on jQuery UI.
|
|
*
|
|
* @param {jQuery} $target
|
|
* @param {Object} [params]
|
|
*/
|
|
function initializeDatetimepicker($target, params = {}) {
|
|
$target.flatpickr({
|
|
enableTime: true,
|
|
allowInput: true,
|
|
static: true,
|
|
dateFormat: `${getDateFormat()} ${getTimeFormat()}`,
|
|
time_24hr: vars('time_format') === 'military',
|
|
locale: getFlatpickrLocale(),
|
|
...params
|
|
});
|
|
}
|
|
|
|
/**
|
|
* Initialize the date picker component.
|
|
*
|
|
* This method is based on jQuery UI.
|
|
*
|
|
* @param {jQuery} $target
|
|
* @param {Object} [params]
|
|
*/
|
|
function initializeDatepicker($target, params = {}) {
|
|
$target.flatpickr({
|
|
allowInput: true,
|
|
dateFormat: getDateFormat(),
|
|
locale: getFlatpickrLocale(),
|
|
...params
|
|
});
|
|
}
|
|
|
|
/**
|
|
* Initialize the time picker component.
|
|
*
|
|
* This method is based on jQuery UI.
|
|
*
|
|
* @param {jQuery} $target
|
|
* @param {Object} [params]
|
|
*/
|
|
function initializeTimepicker($target, params = {}) {
|
|
$target.flatpickr({
|
|
noCalendar: true,
|
|
enableTime: true,
|
|
allowInput: true,
|
|
dateFormat: getTimeFormat(),
|
|
time_24hr: vars('time_format') === 'military',
|
|
locale: getFlatpickrLocale(),
|
|
...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,
|
|
};
|
|
})();
|