mirror of
https://github.com/eitchtee/WYGIWYH.git
synced 2026-03-30 06:02:10 +02:00
309 lines
10 KiB
JavaScript
309 lines
10 KiB
JavaScript
import AirDatepicker from 'air-datepicker';
|
||
import {createPopper} from '@popperjs/core';
|
||
|
||
// --- Static Locale Imports ---
|
||
// We import all locales statically to ensure Vite transforms them correctly.
|
||
import localeAr from 'air-datepicker/locale/ar.js';
|
||
import localeBg from 'air-datepicker/locale/bg.js';
|
||
import localeCa from 'air-datepicker/locale/ca.js';
|
||
import localeCs from 'air-datepicker/locale/cs.js';
|
||
import localeDa from 'air-datepicker/locale/da.js';
|
||
import localeDe from 'air-datepicker/locale/de.js';
|
||
import localeEl from 'air-datepicker/locale/el.js';
|
||
import localeEn from 'air-datepicker/locale/en.js';
|
||
import localeEs from 'air-datepicker/locale/es.js';
|
||
import localeEu from 'air-datepicker/locale/eu.js';
|
||
import localeFi from 'air-datepicker/locale/fi.js';
|
||
import localeFr from 'air-datepicker/locale/fr.js';
|
||
import localeHr from 'air-datepicker/locale/hr.js';
|
||
import localeHu from 'air-datepicker/locale/hu.js';
|
||
import localeId from 'air-datepicker/locale/id.js';
|
||
import localeIt from 'air-datepicker/locale/it.js';
|
||
import localeJa from 'air-datepicker/locale/ja.js';
|
||
import localeKo from 'air-datepicker/locale/ko.js';
|
||
import localeNb from 'air-datepicker/locale/nb.js';
|
||
import localeNl from 'air-datepicker/locale/nl.js';
|
||
import localePl from 'air-datepicker/locale/pl.js';
|
||
import localePtBr from 'air-datepicker/locale/pt-BR.js';
|
||
import localePt from 'air-datepicker/locale/pt.js';
|
||
import localeRo from 'air-datepicker/locale/ro.js';
|
||
import localeRu from 'air-datepicker/locale/ru.js';
|
||
import localeSi from 'air-datepicker/locale/si.js';
|
||
import localeSk from 'air-datepicker/locale/sk.js';
|
||
import localeSl from 'air-datepicker/locale/sl.js';
|
||
import localeSv from 'air-datepicker/locale/sv.js';
|
||
import localeTh from 'air-datepicker/locale/th.js';
|
||
import localeTr from 'air-datepicker/locale/tr.js';
|
||
import localeUk from 'air-datepicker/locale/uk.js';
|
||
import localeZh from 'air-datepicker/locale/zh.js';
|
||
|
||
// Map language codes to their imported locale objects
|
||
const allLocales = {
|
||
'ar': localeAr,
|
||
'bg': localeBg,
|
||
'ca': localeCa,
|
||
'cs': localeCs,
|
||
'da': localeDa,
|
||
'de': localeDe,
|
||
'el': localeEl,
|
||
'en': localeEn,
|
||
'es': localeEs,
|
||
'eu': localeEu,
|
||
'fi': localeFi,
|
||
'fr': localeFr,
|
||
'hr': localeHr,
|
||
'hu': localeHu,
|
||
'id': localeId,
|
||
'it': localeIt,
|
||
'ja': localeJa,
|
||
'ko': localeKo,
|
||
'nb': localeNb,
|
||
'nl': localeNl,
|
||
'pl': localePl,
|
||
'pt-BR': localePtBr,
|
||
'pt': localePt,
|
||
'ro': localeRo,
|
||
'ru': localeRu,
|
||
'si': localeSi,
|
||
'sk': localeSk,
|
||
'sl': localeSl,
|
||
'sv': localeSv,
|
||
'th': localeTh,
|
||
'tr': localeTr,
|
||
'uk': localeUk,
|
||
'zh': localeZh
|
||
};
|
||
// --- End of Locale Imports ---
|
||
|
||
|
||
/**
|
||
* Selects a pre-imported language file from the locale map.
|
||
*
|
||
* @param {string} langCode - The two-letter language code (e.g., 'en', 'es').
|
||
* @returns {Promise<object>} A promise that resolves with the locale object.
|
||
*/
|
||
export const getLocale = async (langCode) => {
|
||
const locale = allLocales[langCode];
|
||
|
||
if (locale) {
|
||
return locale;
|
||
}
|
||
|
||
console.warn(`Could not find locale for '${langCode}'. Defaulting to English.`);
|
||
return allLocales['en']; // Default to English
|
||
};
|
||
|
||
function isMobileDevice() {
|
||
const mobileRegex = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i;
|
||
return mobileRegex.test(navigator.userAgent);
|
||
}
|
||
|
||
function isTouchDevice() {
|
||
return ('ontouchstart' in window) || (navigator.maxTouchPoints > 0) || (navigator.msMaxTouchPoints > 0);
|
||
}
|
||
|
||
function isMobile() {
|
||
return isMobileDevice() || isTouchDevice();
|
||
}
|
||
|
||
window.DatePicker = async function createDynamicDatePicker(element) {
|
||
let todayButton = {
|
||
content: element.dataset.nowButtonTxt,
|
||
onClick: (dp) => {
|
||
let date = new Date();
|
||
dp.selectDate(date, {updateTime: true});
|
||
dp.setViewDate(date);
|
||
}
|
||
};
|
||
let isOnMobile = isMobile();
|
||
let baseOpts = {
|
||
isMobile: isOnMobile,
|
||
dateFormat: element.dataset.dateFormat,
|
||
timeFormat: element.dataset.timeFormat,
|
||
timepicker: element.dataset.timepicker === 'true',
|
||
toggleSelected: element.dataset.toggleSelected === 'true',
|
||
autoClose: element.dataset.autoClose === 'true',
|
||
buttons: element.dataset.clearButton === 'true' ? ['clear', todayButton] : [todayButton],
|
||
locale: await getLocale(element.dataset.language),
|
||
onSelect: ({date, formattedDate, datepicker}) => {
|
||
const _event = new CustomEvent("change", {
|
||
bubbles: true,
|
||
});
|
||
datepicker.$el.dispatchEvent(_event);
|
||
}
|
||
};
|
||
const positionConfig = !isOnMobile ? {
|
||
position({$datepicker, $target, $pointer, done}) {
|
||
let popper = createPopper($target, $datepicker, {
|
||
placement: 'bottom',
|
||
modifiers: [
|
||
{
|
||
name: 'flip',
|
||
options: {
|
||
padding: {
|
||
top: 64
|
||
}
|
||
}
|
||
},
|
||
{
|
||
name: 'offset',
|
||
options: {
|
||
offset: [0, 20]
|
||
}
|
||
},
|
||
{
|
||
name: 'arrow',
|
||
options: {
|
||
element: $pointer
|
||
}
|
||
}
|
||
]
|
||
});
|
||
return function completeHide() {
|
||
popper.destroy();
|
||
done();
|
||
};
|
||
}
|
||
} : {};
|
||
let opts = {...baseOpts, ...positionConfig};
|
||
if (element.dataset.value) {
|
||
opts["selectedDates"] = [element.dataset.value];
|
||
opts["startDate"] = [element.dataset.value];
|
||
}
|
||
return new AirDatepicker(element, opts);
|
||
};
|
||
|
||
window.MonthYearPicker = async function createDynamicDatePicker(element) {
|
||
let todayButton = {
|
||
content: element.dataset.nowButtonTxt,
|
||
onClick: (dp) => {
|
||
let date = new Date();
|
||
dp.selectDate(date, {updateTime: true});
|
||
dp.setViewDate(date);
|
||
}
|
||
};
|
||
let isOnMobile = isMobile();
|
||
let baseOpts = {
|
||
isMobile: isOnMobile,
|
||
view: 'months',
|
||
minView: 'months',
|
||
dateFormat: 'MMMM yyyy',
|
||
toggleSelected: element.dataset.toggleSelected === 'true',
|
||
autoClose: element.dataset.autoClose === 'true',
|
||
buttons: element.dataset.clearButton === 'true' ? ['clear', todayButton] : [todayButton],
|
||
locale: await getLocale(element.dataset.language),
|
||
onSelect: ({date, formattedDate, datepicker}) => {
|
||
const _event = new CustomEvent("change", {
|
||
bubbles: true,
|
||
});
|
||
datepicker.$el.dispatchEvent(_event);
|
||
}
|
||
};
|
||
const positionConfig = !isOnMobile ? {
|
||
position({$datepicker, $target, $pointer, done}) {
|
||
let popper = createPopper($target, $datepicker, {
|
||
placement: 'bottom',
|
||
modifiers: [
|
||
{
|
||
name: 'flip',
|
||
options: {
|
||
padding: {
|
||
top: 64
|
||
}
|
||
}
|
||
},
|
||
{
|
||
name: 'offset',
|
||
options: {
|
||
offset: [0, 20]
|
||
}
|
||
},
|
||
{
|
||
name: 'arrow',
|
||
options: {
|
||
element: $pointer
|
||
}
|
||
}
|
||
]
|
||
});
|
||
return function completeHide() {
|
||
popper.destroy();
|
||
done();
|
||
};
|
||
}
|
||
} : {};
|
||
let opts = {...baseOpts, ...positionConfig};
|
||
if (element.dataset.value) {
|
||
opts["selectedDates"] = [new Date(element.dataset.value + "T00:00:00")];
|
||
opts["startDate"] = [new Date(element.dataset.value + "T00:00:00")];
|
||
}
|
||
return new AirDatepicker(element, opts);
|
||
};
|
||
|
||
window.YearPicker = async function createDynamicDatePicker(element) {
|
||
let todayButton = {
|
||
content: element.dataset.nowButtonTxt,
|
||
onClick: (dp) => {
|
||
let date = new Date();
|
||
dp.selectDate(date, {updateTime: true});
|
||
dp.setViewDate(date);
|
||
}
|
||
};
|
||
let isOnMobile = isMobile();
|
||
let baseOpts = {
|
||
isMobile: isOnMobile,
|
||
view: 'years',
|
||
minView: 'years',
|
||
dateFormat: 'yyyy',
|
||
toggleSelected: element.dataset.toggleSelected === 'true',
|
||
autoClose: element.dataset.autoClose === 'true',
|
||
buttons: element.dataset.clearButton === 'true' ? ['clear', todayButton] : [todayButton],
|
||
locale: await getLocale(element.dataset.language),
|
||
onSelect: ({date, formattedDate, datepicker}) => {
|
||
const _event = new CustomEvent("change", {
|
||
bubbles: true,
|
||
});
|
||
datepicker.$el.dispatchEvent(_event);
|
||
}
|
||
};
|
||
const positionConfig = !isOnMobile ? {
|
||
position({$datepicker, $target, $pointer, done}) {
|
||
let popper = createPopper($target, $datepicker, {
|
||
placement: 'bottom',
|
||
modifiers: [
|
||
{
|
||
name: 'flip',
|
||
options: {
|
||
padding: {
|
||
top: 64
|
||
}
|
||
}
|
||
},
|
||
{
|
||
name: 'offset',
|
||
options: {
|
||
offset: [0, 20]
|
||
}
|
||
},
|
||
{
|
||
name: 'arrow',
|
||
options: {
|
||
element: $pointer
|
||
}
|
||
}
|
||
]
|
||
});
|
||
return function completeHide() {
|
||
popper.destroy();
|
||
done();
|
||
};
|
||
}
|
||
} : {};
|
||
let opts = {...baseOpts, ...positionConfig};
|
||
if (element.dataset.value) {
|
||
opts["selectedDates"] = [new Date(element.dataset.value + "T00:00:00")];
|
||
opts["startDate"] = [new Date(element.dataset.value + "T00:00:00")];
|
||
}
|
||
return new AirDatepicker(element, opts);
|
||
};
|