style(js): documente et clarifie calendar.js
Parent
b174c643ee
révision
d8d871dd40
|
@ -26,6 +26,45 @@ import 'styles/calendar.scss';
|
|||
const NAME = 'calendar';
|
||||
const DATA_KEY = `app.${NAME}`;
|
||||
|
||||
const Default = {
|
||||
/**
|
||||
* URL vers la vue d'ajout d'un évènement.
|
||||
* @type {String}
|
||||
*/
|
||||
addUrl: '',
|
||||
/**
|
||||
* URL vers l'API pour récupèrer la semaine type.
|
||||
* @type {String}
|
||||
*/
|
||||
businessHoursWeekUrl: '',
|
||||
/**
|
||||
* Largeur jusqu'à laquelle considérer un mobile.
|
||||
* @type {Number}
|
||||
*/
|
||||
mobileMaxWidth: 575,
|
||||
/**
|
||||
* Nom de la vue à utiliser sur mobile.
|
||||
* @type {String}
|
||||
*/
|
||||
mobileViewName: '',
|
||||
/**
|
||||
* Récupère les infos de la vue à afficher depuis l'URL et la mets à jour
|
||||
* en cas de changements.
|
||||
* @type {Boolean}
|
||||
*/
|
||||
storeDateInfo: false,
|
||||
/**
|
||||
* Configuration supplémentaire de FullCalendar.
|
||||
* @type {(null|Object)}
|
||||
*/
|
||||
fcConfig: null,
|
||||
/**
|
||||
* Configuration supplémentaire de FullCalendar uniquement sur mobile.
|
||||
* @type {(null|Object)}
|
||||
*/
|
||||
fcMobileConfig: null,
|
||||
};
|
||||
|
||||
const DefaultType = {
|
||||
addUrl: 'string',
|
||||
businessHoursWeekUrl: 'string',
|
||||
|
@ -36,32 +75,24 @@ const DefaultType = {
|
|||
fcMobileConfig: '(null|object)',
|
||||
};
|
||||
|
||||
const Default = {
|
||||
/** URL vers la vue d'ajout d'un évènement. */
|
||||
addUrl: '',
|
||||
/** URL vers l'API pour récupèrer la semaine type. */
|
||||
businessHoursWeekUrl: '',
|
||||
/** Largeur jusqu'à laquelle considérer un mobile. */
|
||||
mobileMaxWidth: 575,
|
||||
/** Nom de la vue à utiliser sur mobile. */
|
||||
mobileViewName: '',
|
||||
/**
|
||||
* Récupère les infos de la vue à afficher depuis l'URL et la mets à jour
|
||||
* en cas de changements.
|
||||
* @type {Boolean}
|
||||
*/
|
||||
storeDateInfo: false,
|
||||
/** Configuration supplémentaire de FullCalendar. */
|
||||
fcConfig: null,
|
||||
/** Configuration supplémentaire de FullCalendar uniquement sur mobile. */
|
||||
fcMobileConfig: null,
|
||||
};
|
||||
|
||||
const CLASS_NAME_LOADING = 'loading';
|
||||
const CLASS_NAME_CLICKABLE = 'fc-clickable';
|
||||
|
||||
const WEEK_DURATION_MS = 604800000;
|
||||
|
||||
/***
|
||||
* ------------------------------------------------------------------------
|
||||
* Methods
|
||||
* ------------------------------------------------------------------------
|
||||
*/
|
||||
|
||||
/**
|
||||
* Retourne le numéro de semaine d'une date donnée.
|
||||
*/
|
||||
function getDateWeek(date, calendar) {
|
||||
return Number.parseInt(calendar.formatDate(date, { week: 'numeric' }), 10);
|
||||
}
|
||||
|
||||
/***
|
||||
* ------------------------------------------------------------------------
|
||||
* FullCalendar's Theme
|
||||
|
@ -222,13 +253,6 @@ class Calendar extends BaseComponent {
|
|||
return calendar;
|
||||
}
|
||||
|
||||
_getDateWeek(date, calendar = null) {
|
||||
return Number.parseInt(
|
||||
(calendar || this._calendar).formatDate(date, { week: 'numeric' }),
|
||||
10
|
||||
);
|
||||
}
|
||||
|
||||
async _fetchBusinessHoursWeek(day) {
|
||||
try {
|
||||
const url = new URL(this._config.businessHoursWeekUrl);
|
||||
|
@ -317,7 +341,7 @@ class Calendar extends BaseComponent {
|
|||
if (currentEnd.getTime() - currentStart.getTime() > WEEK_DURATION_MS) {
|
||||
this._currentWeek = null;
|
||||
} else {
|
||||
const currentWeek = this._getDateWeek(currentStart, calendar);
|
||||
const currentWeek = getDateWeek(currentStart, calendar);
|
||||
|
||||
if (currentWeek !== this._currentWeek) {
|
||||
this._currentWeek = currentWeek;
|
||||
|
@ -332,26 +356,23 @@ class Calendar extends BaseComponent {
|
|||
}
|
||||
}
|
||||
|
||||
_handleWindowResize({ view }) {
|
||||
_handleWindowResize({ view: { calendar, type } }) {
|
||||
const isMobile = window.innerWidth < this._config.mobileMaxWidth;
|
||||
|
||||
if (this._isMobile === isMobile) {
|
||||
return;
|
||||
}
|
||||
|
||||
const { calendar } = view;
|
||||
|
||||
if (this._config.mobileViewName) {
|
||||
// initial view is always for desktop
|
||||
if (!this._desktopViewName || isMobile) {
|
||||
this._desktopViewName = view.type;
|
||||
this._desktopViewName = type;
|
||||
}
|
||||
|
||||
const viewName = isMobile
|
||||
? this._config.mobileViewName
|
||||
: this._desktopViewName;
|
||||
|
||||
if (viewName !== view.type) {
|
||||
if (viewName !== type) {
|
||||
calendar.changeView(viewName);
|
||||
}
|
||||
}
|
||||
|
@ -359,7 +380,7 @@ class Calendar extends BaseComponent {
|
|||
if (this._config.fcMobileConfig) {
|
||||
Object.entries(this._config.fcMobileConfig).forEach(([key, value]) => {
|
||||
if (isMobile) {
|
||||
// store current value before overwriting it
|
||||
// stocke les options actuelles avant de définir les nouvelles
|
||||
this._desktopOptions[key] = calendar.getOption(key);
|
||||
calendar.setOption(key, value);
|
||||
} else if (key in this._desktopOptions) {
|
||||
|
|
Chargement…
Référencer dans un nouveau ticket