diff --git a/shared/CalendarView.js b/shared/CalendarView.js index 97e1fd0..71487b8 100644 --- a/shared/CalendarView.js +++ b/shared/CalendarView.js @@ -34,9 +34,6 @@ for (let i = 0; i < 7; i++) { class CalendarView extends TemplateView { render(t, vm) { - const date = vm.date; - console.log('CalendarView vm', vm); - return t.div({ className: { CalendarView: true } }, [ t.div({ className: { CalendarView_heading: true } }, [ t.button( @@ -62,38 +59,43 @@ class CalendarView extends TemplateView { ['\u276F'] ), ]), - t.ol( - { className: { CalendarView_calendar: true } }, - [].concat( - Object.keys(DAYS_OF_WEEK).map((dayKey) => { - return t.li({ className: { CalendarView_dayName: true } }, [DAYS_OF_WEEK[dayKey]]); - }), - (() => { - let dayNodes = []; - for (let i = 0; i < numDaysInMonthForDate(date); i++) { - // We only need to calculate the day offset for the first day of the month - let dayNumber; - if (i === 0) { - const dayNumberDate = new Date(date); - dayNumberDate.setDate(i + 1); - // day number from 0 (monday) to 6 (sunday) - dayNumber = dayNumberDate.getDay(); - } + t.map( + (vm) => vm.date, + (date, t) => { + return t.ol( + { className: { CalendarView_calendar: true } }, + [].concat( + Object.keys(DAYS_OF_WEEK).map((dayKey) => { + return t.li({ className: { CalendarView_dayName: true } }, [DAYS_OF_WEEK[dayKey]]); + }), + (() => { + let dayNodes = []; + for (let i = 0; i < numDaysInMonthForDate(date); i++) { + // We only need to calculate the day offset for the first day of the month + let dayNumber; + if (i === 0) { + const dayNumberDate = new Date(date); + dayNumberDate.setDate(i + 1); + // day number from 0 (monday) to 6 (sunday) + dayNumber = dayNumberDate.getDay(); + } - dayNodes.push( - t.li( - { - className: { CalendarView_day: true }, - style: i === 0 ? `grid-column-start: ${dayNumber + 1};` : null, - }, - [String(i + 1)] - ) - ); - } + dayNodes.push( + t.li( + { + className: { CalendarView_day: true }, + style: i === 0 ? `grid-column-start: ${dayNumber + 1};` : null, + }, + [String(i + 1)] + ) + ); + } - return dayNodes; - })() - ) + return dayNodes; + })() + ) + ); + } ), ]); } diff --git a/shared/hydrogen-vm-render-script.js b/shared/hydrogen-vm-render-script.js index 3371a7d..f39f48a 100644 --- a/shared/hydrogen-vm-render-script.js +++ b/shared/hydrogen-vm-render-script.js @@ -13,6 +13,7 @@ const { TimelineView, RoomView, RoomViewModel, + ViewModel, } = require('hydrogen-view-sdk'); const ArchiveView = require('matrix-public-archive-shared/ArchiveView'); @@ -179,29 +180,39 @@ async function mountHydrogen() { kind: 'none', }; + class CalendarViewModel extends ViewModel { + constructor(options) { + super(options); + const { date } = options; + this._date = date; + } + + get date() { + return this._date; + } + + prevMonth() { + const prevMonthDate = new Date(this._date); + prevMonthDate.setMonth(this._date.getMonth() - 1); + this._date = prevMonthDate; + this.emitChange('date'); + } + + nextMonth() { + const nextMonthDate = new Date(this._date); + nextMonthDate.setMonth(this._date.getMonth() + 1); + this._date = nextMonthDate; + this.emitChange('date'); + } + } + const archiveViewModel = { roomViewModel, rightPanelModel: { activeViewModel: { type: 'custom', customView: RightPanelContentView, - - calendarViewModel: { - date: new Date(), - prevMonth: function () { - console.log('prevMonth'); - const prevMonthDate = new Date(this.date); - prevMonthDate.setMonth(this.date.getMonth() - 1); - console.log('prevMonthDate', prevMonthDate); - this.date = prevMonthDate; - }, - nextMonth: function () { - console.log('nextMonth'); - const nextMonthDate = new Date(this.date); - nextMonthDate.setMonth(this.date.getMonth() + 1); - this.date = nextMonthDate; - }, - }, + calendarViewModel: new CalendarViewModel({ date: new Date() }), }, }, };