diff --git a/public/js/components/Calendar/Calendar.js b/public/js/components/Calendar/Calendar.js index da7330e83..b9107f45f 100644 --- a/public/js/components/Calendar/Calendar.js +++ b/public/js/components/Calendar/Calendar.js @@ -6,7 +6,7 @@ import CalendarWeeks from './Weeks.js'; import CalendarDay from './Day.js'; import CalendarMinimized from './Minimized.js'; import CalendarDate from '../../composables/CalendarDate.js'; - +import CalendarDates from '../../composables/CalendarDates.js'; // TODO(chris): week/month toggle @@ -90,11 +90,6 @@ export default { } }); }, - "$p.user_locale.value"(newUserLocale){ - // reset the calculation of the calendarWeek when changing user_locale - this.focusDate._clean(); - this.focusDate.setLocale(newUserLocale); - }, }, emits: [ 'select:day', @@ -206,7 +201,6 @@ export default { this.mode = allowedInitialModes[allowedInitialModes.indexOf(this.initialMode)] || allowedInitialModes.pop(); this.date.set(new Date(this.initialDate)); this.focusDate.set(this.date); - this.focusDate.setLocale(this.$p.user_locale.value); }, mounted() { if (this.$refs.container) { @@ -227,6 +221,9 @@ export default { } }, + unmounted(){ + CalendarDates.cleanup(); + }, template: /*html*/`
diff --git a/public/js/components/Calendar/Month/Page.js b/public/js/components/Calendar/Month/Page.js index 564b89f42..72136b758 100644 --- a/public/js/components/Calendar/Month/Page.js +++ b/public/js/components/Calendar/Month/Page.js @@ -38,7 +38,6 @@ export default { }, weeks() { let firstDayOfMonth = new CalendarDate(this.year, this.month, 1); - firstDayOfMonth.setLocale(this.$p.user_locale.value); let startDay = firstDayOfMonth.firstDayOfCalendarMonth; let endDay = firstDayOfMonth.lastDayOfCalendarMonth; @@ -49,7 +48,6 @@ export default { if (week.days.length == 7) { let d = new CalendarDate(week.days[5]); - d.setLocale(this.$p.user_locale.value); week.no = d.w; week.y = d.y; res.push(week); diff --git a/public/js/components/Calendar/Week/Page.js b/public/js/components/Calendar/Week/Page.js index 44d13a71d..15c17f8ea 100644 --- a/public/js/components/Calendar/Week/Page.js +++ b/public/js/components/Calendar/Week/Page.js @@ -71,7 +71,6 @@ export default { days() { let tmpDate = new CalendarDate(this.year,1,1); // NOTE(chris): somewhere in the middle of the year - tmpDate.setLocale(this.$p.user_locale.value); tmpDate.w = this.week; let startDay = tmpDate.firstDayOfWeek; let result = []; diff --git a/public/js/composables/CalendarDate.js b/public/js/composables/CalendarDate.js index a1ffeeafb..103d85aa6 100644 --- a/public/js/composables/CalendarDate.js +++ b/public/js/composables/CalendarDate.js @@ -1,8 +1,23 @@ +import {user_locale} from "../plugin/Phrasen.js"; +import CalendarDates from "./CalendarDates.js"; + class CalendarDate { constructor(y, m, d) { this.weekStart = CalendarDate.getWeekStart(); + this.watchLocale = Vue.watch( + user_locale, + (newLocale, oldLocale, onCleanup) =>{ + this.weekStart = CalendarDate.getWeekStart(); + this._clean(); + onCleanup((cleanup)=>{ + console.log(cleanup,"HERE IA M") + }); + }, + + ); this.set(y, m, d); this._clean(); + CalendarDates.subscribe(this); } get y() { return this._y } set y(v) { this._y = v; this._clean() } @@ -71,7 +86,6 @@ class CalendarDate { } get cdFirstDayOfWeek() { let FirstDayOfWeek = new CalendarDate(this.firstDayOfWeek); - FirstDayOfWeek.weekStart = this.weekStart; return FirstDayOfWeek; } get lastDayOfWeek() { @@ -91,7 +105,6 @@ class CalendarDate { } get cdLastDayOfWeek() { let LastDayOfWeek = new CalendarDate(this.lastDayOfWeek); - LastDayOfWeek.weekStart = this.weekStart; return LastDayOfWeek; } get firstDayOfCalendarMonth() { @@ -104,7 +117,6 @@ class CalendarDate { let firstDayOfMonth = new Date(this.y, this.m, 1); let offset = (firstDayOfMonth.getDay() + 7 - this.weekStart) % 7; let FirstDayOfCalendarMonth = new CalendarDate(this.y, this.m, 1 - offset); - FirstDayOfCalendarMonth.weekStart = this.weekStart; return FirstDayOfCalendarMonth; } get lastDayOfCalendarMonth() { @@ -117,14 +129,12 @@ class CalendarDate { let lastDayOfMonth = new Date(this.y, this.m+1, 0); let offset = (lastDayOfMonth.getDay() + 7 - this.weekStart) % 7; let LasyDayOfCalendarMonth = new CalendarDate(lastDayOfMonth.getFullYear(), lastDayOfMonth.getMonth(), lastDayOfMonth.getDate() + 6 - offset); - LasyDayOfCalendarMonth.weekStart = this.weekStart; return LasyDayOfCalendarMonth; } get cdLastDayOfNextCalendarMonth() { let lastDayOfMonth = new Date(this.y, this.m+1, 0); let offset = (lastDayOfMonth.getDay() + 7 - this.weekStart) % 7; let LastDayOfNextCalendarMonth = new CalendarDate(lastDayOfMonth.getFullYear(), lastDayOfMonth.getMonth() + 1, lastDayOfMonth.getDate() + 6 - offset); - LastDayOfNextCalendarMonth.weekStart = this.weekStart; return LastDayOfNextCalendarMonth; } get nextSevenDays() { @@ -139,7 +149,6 @@ class CalendarDate { // if the week starts with Monday we have to go 3 days in the past from the start of the next year to get the correct numWeek of the current year // this is because for example 30.12.2024 - 05.01.2025 is the first calendarWeek of 2025 let lastCalendarWeek = new CalendarDate(this.y + 1, 0, this.weekStart == 1 ? -3 : 0); - lastCalendarWeek.weekStart = this.weekStart; return lastCalendarWeek.w; } set(y,m,d,noClean) { @@ -197,6 +206,9 @@ class CalendarDate { isDate(obj){ return Object.prototype.toString.call(obj) === '[object Date]'; } + cleanup(){ + this.watchLocale.stop(); + } } /** * Returns the weekday number (Date.getDay()) on which the week starts depending on the locale. @@ -210,7 +222,7 @@ class CalendarDate { */ CalendarDate.getWeekStart = function(locale) { - locale = locale || navigator.language; + locale = user_locale.value || locale || navigator.language; const parts = locale.match(/^([a-z]{2,3})(?:-([a-z]{3})(?=$|-))?(?:-([a-z]{4})(?=$|-))?(?:-([a-z]{2}|\d{3})(?=$|-))?/i); const language_code = parts[1]; @@ -239,7 +251,9 @@ CalendarDate.getWeekStart = function(locale) { return 1; } else + { return 1; + } } diff --git a/public/js/composables/CalendarDates.js b/public/js/composables/CalendarDates.js new file mode 100644 index 000000000..a34198441 --- /dev/null +++ b/public/js/composables/CalendarDates.js @@ -0,0 +1,16 @@ +class CalendarDates{ + + static subscribers_array = []; + + static subscribe(subscriber){ + this.subscribers_array.push(subscriber); + } + static unsubscribe(subscriber){ + this.subscribers_array = this.subscribers_array.filter(sub => !sub.compare(subscriber)); + } + static cleanup(){ + this.subscribers_array.forEach(sub => { sub.cleanup() }); + } +} + +export default CalendarDates; \ No newline at end of file diff --git a/public/js/plugin/Phrasen.js b/public/js/plugin/Phrasen.js index ea5e8e186..f85303fbe 100644 --- a/public/js/plugin/Phrasen.js +++ b/public/js/plugin/Phrasen.js @@ -3,7 +3,7 @@ import FhcApi from './FhcApi.js'; const categories = Vue.reactive({}); const loadingModules = {}; let user_language = Vue.ref(FHC_JS_DATA_STORAGE_OBJECT.user_language); -let user_locale = Vue.computed(()=>{ +export let user_locale = Vue.computed(()=>{ if(!user_language.value) return null; return FHC_JS_DATA_STORAGE_OBJECT.server_languages.find(language => language.sprache == user_language.value).locale; });