const inject = au.inject;
const swapStrategies = ['with', 'after', 'before'];
//Set up deferred swapStrategies
swapStrategies.forEach((strategy) => {
au.SwapStrategies[strategy + 'Deferred'] = function (
viewSlot: any,
previous: any,
callback: any
) {
let currentPromise = au.SwapStrategies[strategy](viewSlot, previous, callback);
viewSlot.previousPromise = currentPromise;
return Promise.resolve(false);
};
})
const interceptMethods = ['updateTarget', 'updateSource', 'callSource'];
function interceptor(method: any, update: any, intercept: any, value: any) {
if (this.target.swapOrder && this.target.swapOrder.indexOf('Deferred') === -1) {
this.target.swapOrder = this.target.swapOrder + 'Deferred';
}
Promise.resolve(this.target.viewSlot.previousPromise).then(() => {
if (typeof intercept === 'function') {
value = intercept.call(this.source.bindingContext, value) || value;
}
update(value);
});
}
@inject(au.BindingEngine)
class DeferBindingBehavior {
constructor(BindingEngine:any) {
this.bindingEngine = BindingEngine;
}
bind(binding:any, scope:any, intercept:any) {
let i = interceptMethods.length;
while (i--) {
let method = interceptMethods[i];
if (!binding[method]) {
continue;
}
binding[`intercepted-${method}`] = binding[method];
let update = binding[method].bind(binding);
binding[method] = interceptor.bind(binding, method, update, intercept);
}
}
unbind(binding:any, scope:any) {
let i = interceptMethods.length;
while (i--) {
let method = interceptMethods[i];
if (!binding[method]) {
continue;
}
binding[method] = binding[`intercepted-${method}`];
binding[`intercepted-${method}`] = null;
}
}
}
class CalendarHeader {
constructor(data: any) {
this.title = data.title;
this.type = data.type;
}
getViewStrategy() {
return new au.InlineViewStrategy(`<template>
<div click.trigger="onClick($this, $event)"
class="au-animate animate-slide-out-left animate-slide-in-right ${this.type}"><span textcontent.one-time="title"></span></div>
</template>`);
}
activate(activationData: any) {
this.onClickCallback = activationData.onClick;
}
onClick(data: any, event: any) {
if (typeof this.onClickCallback === 'function') {
this.onClickCallback(data, event);
}
}
}
class Year {
constructor() {
}
getViewStrategy() {
return new au.InlineViewStrategy(`<template>
<div
class="datepicker-year au-animate animate-slide-out-left animate-slide-in-right">
<div class="datepicker-calendar">
<template repeat.for="month of months">
<div class="datepicker-calendar-item datepicker-calendar-item--month">
<div class="datepicker-calendar-action datepicker-calendar-action--month"
textcontent.bind="month"
click.delegate="onMonthClick($this, $event, $index)"
></div>
</div>
</template>
</div>
</div>
</template>`);
}
activate(activationData: any) {
this.months = activationData.months;
this.onMonthClickCallback = activationData.onMonthClick;
}
attached() { //Fires when the model's view is attached to its parent DOM node.
//debugger;
}
detached() { //Fires when the model's view is removed from the DOM
//debugger;
}
//#endregion Durandal Page Lifecycle Events
destroy() {
//debugger;
}
onClick(data: any, event: any, index: number) {
if (typeof this.onMonthClickCallback === 'function') {
this.onMonthClickCallback(data, event, index);
}
}
}
class Month {
constructor(data) {
this.dateStart = data.dateStart;
this.dateStartReset = data.dateStartReset;
this.dateEndReset = data.dateEndReset;
}
getViewStrategy() {
return new au.InlineViewStrategy(`<template>
<div
class="au-animate animate-slide-out-left animate-slide-in-right">
<header class="datepicker-calendar">
<template repeat.for="day of $this.weekdays">
<div class="datepicker-calendar-header datepicker-calendar-header--day" textcontent.one-time="day"></div>
</template>
</header>
<div class="datepicker-calendar"
data-date-start.one-time="dateStart"
data-date-reset.one-time="dateStartReset"
data-date-end.one-time="dateEndReset">
<template repeat.for="i of 42">
<div class="datepicker-calendar-item datepicker-calendar-item--day">
<div class="datepicker-calendar-action datepicker-calendar-action--day"></div>
</div>
</template>
</div>
</div>
</template>`);
}
activate(activationData: any) {
this.weekdays = activationData.weekdayHeaders;
}
}
@inject(au.Container, au.TaskQueue)
class App {
public mL = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
public mS = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'June', 'July', 'Aug', 'Sept', 'Oct', 'Nov', 'Dec'];
public wL = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
public wS = ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'];
public weekdayHeaders: any[];
public monthCurrentLastDay: Date;
public monthBeforeLastDay: Date;
constructor(Container: any, TaskQueue:any) {
this.taskQueue = TaskQueue;
// firstDayOfWeek Sunday = 0, Monday = 1... Sat = 6
this.firstDayOfWeek = 0;
this.backwards = false;
this.wmCalendars = new Map();
this.yearView = false;
this.transition = false;
if (typeof Intl == 'object' && typeof Intl.DateTimeFormat == 'function') {
let mformatter = new Intl.DateTimeFormat(navigator.language, {
month: "short"
});
let wformatter = new Intl.DateTimeFormat(navigator.language, {
weekday: "short"
});
let months = [];
let weekDays = [];
while (months.length < 12) {
months.push(mformatter.format(new Date(0, months.length, 1)));
}
while (weekDays.length < 7) {
weekDays.push(wformatter.format(new Date(0, 0, weekDays.length)));
}
//this.wS = weekDays;
//this.mS = months;
}
let wH = [...this.wS];
wH.push(...wH.splice(0, this.firstDayOfWeek));
this.weekdayHeaders = wH;
this.calendarData = {
weekdayHeaders: this.weekdayHeaders,
months: this.mS,
onDayClick: this.onDayClick.bind(this),
onMonthClick: this.onMonthClick.bind(this)
};
this.headerData = {
onClick: this.onHeaderClick.bind(this)
};
var today = new Date();
this.setCurrentDate(today);
this.selectedMonth = 0;
}
created(parent, view) {
//debugger;
}
bind(bindingContext, overrideContext) {
//debugger;
}
get dateBefore() {
return this.monthBeforeLastDay.getDate();
}
get dateEnd() {
return this.monthCurrentLastDay.getDate();
}
// public
get dateStart() {
return this.dateBefore - this.dateStartReset;
}
get dateStartReset() {
var dateStartReset = this.monthBeforeLastDay.getDay() + 1 - this.firstDayOfWeek;
if (dateStartReset > 0) {
return dateStartReset;
} else {
return dateStartReset + 7;
}
}
get dateEndReset() {
return this.dateEnd + this.dateStartReset;
}
setCurrentDate(date?: any){
if (date) {
let year = date.getFullYear();
let month = date.getMonth();
this.monthCurrentLastDay = new Date(year, month + 1, 0);
this.monthBeforeLastDay = new Date(year, month, 0);
this.currentMonth = month;
} else {
var year = this.monthCurrentLastDay.getFullYear();
var month = this.monthCurrentLastDay.getMonth();
date = new Date(year, month);
}
let Calendar;
let options;
if (this.yearView) {
Calendar = Year;
options = { year: 'numeric'};
} else {
Calendar = Month;
options = { year: 'numeric', month: 'long' };
}
this.title = date.toLocaleDateString(navigator.language, options);
let classIn = this.calendarVM ? this.calendarVM.classIn : 'right';
let classOut = this.calendarVM ? this.calendarVM.classOut : 'left';
let cData = {
dateStart: this.dateStart,
dateStartReset: this.dateStartReset,
dateEndReset: this.dateEndReset
};
let calendar;
let year;
let title;
if (this.wmCalendars && this.wmCalendars.has(this.title)) {
var cMapData = this.wmCalendars.get(this.title);
calendar = cMapData[0];
title = cMapData[1];
} else {
calendar = new Calendar(cData);
title = new CalendarHeader({title: this.title, type: this.yearView ? '--yearly' : ''});
this.wmCalendars.set(this.title, [calendar, title]);
}
this.calendarVM = calendar;
this.titleVM = title;
}
prev(data: any, event: any) {
var year = this.monthCurrentLastDay.getFullYear();
var month = this.monthCurrentLastDay.getMonth();
var prevDate = this.yearView ? new Date(year - 1, month, 1) : new Date(year, month - 1, 1);
this.deferBackwards = true;
this.transition = false;
this.taskQueue.queueTask(() => {
this.setCurrentDate(prevDate);
});
}
next(data: any, event: any) {
var year = this.monthCurrentLastDay.getFullYear();
var month = this.monthCurrentLastDay.getMonth();
var nextDate = this.yearView ? new Date(year + 1, month, 1) : new Date(year, month + 1, 1);
this.deferBackwards = false;
this.transition = false;
this.taskQueue.queueTask(() => {
this.setCurrentDate(nextDate);
});
}
onHeaderClick(data: any, event: any) {
this.yearView = true;
this.transition = true;
this.deferBackwards = false;
this.taskQueue.queueTask(() => {
this.setCurrentDate();
});
}
onMonthClick(data: any, event: any, index: number) {
var year = this.monthCurrentLastDay.getFullYear();
var month = this.monthCurrentLastDay.getMonth();
var date = new Date(year, index, 1);
this.deferBackwards = true;
this.transition = true;
this.yearView = false;
this.taskQueue.queueTask(() => {
this.setCurrentDate(date);
});
}
onDayClick(data: any, event: any) {
}
vmChanged(){
this.backwards = this.deferBackwards;
}
}
//const app = new App();
const aurelia = new au.Aurelia();
aurelia
.use
.standardConfiguration()
.feature((config: any) => {
config.globalResources(DeferBindingBehavior);
})
.plugin((config: any, callback: any) => {
var animator = config.container.get(CssAnimator);
config.container.get(au.TemplatingEngine).configureAnimator(animator);
if (typeof callback === 'function') {
callback(animator);
}
})
.developmentLogging();
aurelia
.start()
.then((config: any) => {
var app = config.container.get(App);
aurelia.enhance(app, document.body);
}
);
!
