ionic-conference-calendar-header
Version:
A simple conference calendar header component for ionic
343 lines • 15.3 kB
JavaScript
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
return c > 3 && r && Object.defineProperty(target, key, r), r;
};
var __metadata = (this && this.__metadata) || function (k, v) {
if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
};
import * as moment from 'moment';
import { Component, ViewChildren, QueryList, ElementRef, ViewChild, Input, Output, EventEmitter } from '@angular/core';
import { PickerController } from 'ionic-angular';
var monthNames = ['January', 'February', 'March', 'April', 'May', 'June', 'July',
'August', 'September', 'October', 'November', 'December'];
var monthShortNames = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul',
'Aug', 'Sept', 'Oct', 'Nov', 'Dec'];
var IonicConferenceCalendarHeader = (function () {
function IonicConferenceCalendarHeader(pickerController) {
this.pickerController = pickerController;
this.margin = 0.5;
this.selectionWidth = 64;
this.years = [];
this.change = new EventEmitter();
this.dates = [];
this.viewType = 'days';
}
IonicConferenceCalendarHeader.prototype.ngOnChanges = function (changes) {
var activeDateChanged = false;
var datesChanged = false;
if (!this.pickerMonthColumn) {
this.pickerMonthColumn = {
name: 'Month',
align: 'center',
options: []
};
this.pickerYearColumn = {
name: 'Year',
align: 'center',
options: []
};
}
if (changes.dates) {
this.expandEvents();
if (!changes.date) {
this.setActiveYear(this.years[0].year, false);
}
}
if (changes.date) {
var dt = moment(this.date);
this.setActiveDay(dt.utc().date(), dt.utc().month(), dt.utc().year(), false);
}
};
IonicConferenceCalendarHeader.prototype.getSliderWidth = function () {
var selectionWrapperWidth = this.selectionWrapper.nativeElement.offsetWidth;
var possibleSelections = 0;
if (this.viewType === 'days') {
possibleSelections = this.getDaysInMonth().length;
}
else {
possibleSelections = this.getMonthsInYear().length;
}
return Math.max((selectionWrapperWidth + this.selectionWidth + (this.selectionWidth * this.margin)) * possibleSelections);
};
IonicConferenceCalendarHeader.prototype.expandEvents = function () {
var _this = this;
this.years = [];
this.dates.forEach(function (dt) {
var date = moment(dt);
var nDay = date.utc().date();
var nYear = date.utc().year();
var nMonth = date.utc().month();
var monthName = monthNames[nMonth];
var year = _this.years.filter(function (yr) {
return yr.year === nYear;
})[0];
if (!year) {
year = {
year: nYear,
dates: [],
months: []
};
_this.years.push(year);
}
year.dates.push(date.toDate());
var month = year.months.filter(function (m) {
return m.month === nMonth;
})[0];
if (!month) {
month = {
month: nMonth,
monthName: monthName,
dates: [],
days: []
};
year.months.push(month);
}
month.dates.push(date.toDate());
if (month.days.indexOf(nDay) == -1) {
month.days.push(nDay);
}
month.days = month.days.sort(function (a, b) {
if (a > b) {
return 1;
}
else if (b > a) {
return -1;
}
return 0;
});
year.months = year.months.sort(function (a, b) {
if (a.month > b.month) {
return 1;
}
else if (b.month > a.month) {
return -1;
}
return 0;
});
});
this.years = this.years.sort(function (a, b) {
if (a.year > b.year) {
return 1;
}
else if (b.year > a.year) {
return -1;
}
return 0;
});
this.years.forEach(function (yr) {
_this.pickerYearColumn.options.push({
value: yr.year,
text: yr.year.toString()
});
});
};
IonicConferenceCalendarHeader.prototype.getMonthsInYear = function (y) {
if (y === void 0) { y = this.activeYear; }
return this.getYear(y).months.map(function (m) { return m.month; });
};
IonicConferenceCalendarHeader.prototype.getDaysInMonth = function (m, y) {
if (m === void 0) { m = this.activeMonth; }
if (y === void 0) { y = this.activeYear; }
return this.getMonth(m, y).days;
};
IonicConferenceCalendarHeader.prototype.getYear = function (y) {
if (y === void 0) { y = this.activeYear; }
return this.years.filter(function (yr) {
return yr.year === y;
})[0];
};
IonicConferenceCalendarHeader.prototype.getMonth = function (m, y) {
if (m === void 0) { m = this.activeMonth; }
if (y === void 0) { y = this.activeYear; }
var year = this.getYear(y);
return year.months.filter(function (mn) {
return mn.month === m;
})[0];
};
IonicConferenceCalendarHeader.prototype.setActiveMonth = function (m, y, emitEvent) {
if (y === void 0) { y = this.activeYear; }
if (emitEvent === void 0) { emitEvent = true; }
this.activeYear = y;
this.activeMonth = m;
this.setActiveDay(this.getMonth(m, y).days[0], m, y, emitEvent);
};
IonicConferenceCalendarHeader.prototype.setActiveYear = function (y, emitEvent) {
if (emitEvent === void 0) { emitEvent = true; }
this.activeYear = y;
var year = this.getYear(y);
this.setActiveMonth(this.getYear(y).months[0].month, y, emitEvent);
};
IonicConferenceCalendarHeader.prototype.setActiveDay = function (d, m, y, emitEvent) {
if (m === void 0) { m = this.activeMonth; }
if (y === void 0) { y = this.activeYear; }
if (emitEvent === void 0) { emitEvent = true; }
this.activeYear = y;
this.activeMonth = m;
this.activeDay = d;
this.updateSelectionScrollPosition();
if (emitEvent) {
var ds = this.getDateString();
console.log(ds);
this.change.emit(ds);
}
};
IonicConferenceCalendarHeader.prototype.getSelectionIndex = function () {
if (this.viewType === 'days') {
return this.getDaysInMonth().indexOf(this.activeDay);
}
else {
return this.getMonthsInYear().indexOf(this.activeMonth);
}
};
IonicConferenceCalendarHeader.prototype.updateSelectionScrollPosition = function () {
if (this.selections) {
var idx = this.getSelectionIndex();
var day = this.selections.toArray()[idx];
var offset = day.nativeElement.offsetLeft - this.selectionWrapper.nativeElement.offsetWidth / 2 + this.selectionWidth / 2;
this.scrollTo(offset);
}
};
IonicConferenceCalendarHeader.prototype.getMonthName = function (m) {
if (m === void 0) { m = this.activeMonth; }
return monthNames[m];
};
IonicConferenceCalendarHeader.prototype.getMonthShortName = function (m) {
if (m === void 0) { m = this.activeMonth; }
return monthShortNames[m];
};
IonicConferenceCalendarHeader.prototype.openDatePicker = function () {
var _this = this;
this.updatePickerMonthOptions(this.years[0].year);
if (this.viewType === 'days') {
if (this.years.length < 2 && this.pickerMonthColumn.options.length < 2) {
return;
}
}
else {
if (this.years.length < 2) {
return;
}
}
var columns = [];
if (this.years.length > 1) {
columns.push(this.pickerYearColumn);
}
if (this.viewType === 'days') {
columns.push(this.pickerMonthColumn);
}
var picker = this.pickerController.create({
columns: columns,
buttons: [
{
text: 'Cancel',
role: 'cancel'
},
{
text: 'Done',
handler: function (data) {
if (data.Month) {
_this.setActiveMonth(data.Month.value, data.Year ? data.Year.value : _this.years[0].year);
}
else {
_this.setActiveMonth(_this.getMonthsInYear(data.Year.value)[0], data.Year.value);
}
}
}
]
});
if (this.viewType === 'days') {
var yr_1 = this.years[0].year;
picker.ionChange.subscribe(function (change) {
if (change.Year && change.Year.value !== yr_1) {
yr_1 = change.Year.value;
_this.updatePickerMonthOptions(yr_1);
setTimeout(function () {
picker._cmp._component._cols._results.forEach(function (r) {
r.col.prevSelected = null;
});
picker.refresh();
});
}
});
}
picker.present();
setTimeout(function () {
picker._cmp._component._cols._results.forEach(function (r) {
r.lastIndex = 0;
r.col.selectedIndex = 0;
r.col.prevSelected = null;
});
picker.refresh();
});
};
IonicConferenceCalendarHeader.prototype.updatePickerMonthOptions = function (year) {
var _this = this;
this.pickerMonthColumn.options.length = 0;
this.getYear(year).months.forEach(function (mn) {
_this.pickerMonthColumn.options.push({
value: mn.month,
text: mn.monthName
});
});
};
IonicConferenceCalendarHeader.prototype.getDateString = function (date) {
if (date === void 0) { date = null; }
if (!date) {
return this.activeYear + "-" + this.padLeft(this.activeMonth + 1) + "-" + this.padLeft(this.activeDay);
}
var dt = moment(date);
var day = dt.utc().date();
var month = dt.utc().month();
var year = dt.utc().year();
return year + "-" + this.padLeft(month + 1) + "-" + this.padLeft(day);
};
IonicConferenceCalendarHeader.prototype.scrollTo = function (to) {
var ele = this.selectionWrapper.nativeElement;
ele.scrollLeft = to;
};
IonicConferenceCalendarHeader.prototype.padLeft = function (n) {
var str = n.toString();
var pad = '00';
return pad.substr(0, pad.length - str.length) + str;
};
__decorate([
Output('change'),
__metadata("design:type", Object)
], IonicConferenceCalendarHeader.prototype, "change");
__decorate([
Input('dates'),
__metadata("design:type", Array)
], IonicConferenceCalendarHeader.prototype, "dates");
__decorate([
Input('date'),
__metadata("design:type", Object)
], IonicConferenceCalendarHeader.prototype, "date");
__decorate([
Input('view'),
__metadata("design:type", String)
], IonicConferenceCalendarHeader.prototype, "viewType");
__decorate([
ViewChild('selectionWrapper'),
__metadata("design:type", ElementRef)
], IonicConferenceCalendarHeader.prototype, "selectionWrapper");
__decorate([
ViewChild('selectionSlider'),
__metadata("design:type", ElementRef)
], IonicConferenceCalendarHeader.prototype, "selectionSlider");
__decorate([
ViewChildren('selection'),
__metadata("design:type", QueryList)
], IonicConferenceCalendarHeader.prototype, "selections");
IonicConferenceCalendarHeader = __decorate([
Component({
selector: 'ionic-conference-calendar-header',
template: "\n<div class=\"header-calendar-wrapper\">\n\n <div (click)=\"openDatePicker()\">\n <div *ngIf=\"viewType === 'days';else month_datepicker_view\">\n <div class=\"datepicker-headline\">{{getMonthName()}}</div>\n <div class=\"datepicker-subline\">{{activeYear}}</div>\n </div>\n\n <ng-template #month_datepicker_view>\n <div class=\"datepicker-headline\">{{activeYear}}</div>\n </ng-template>\n </div>\n\n <div #selectionWrapper class=\"selection-wrapper\">\n\n <div #selectionSlider\n *ngIf=\"years.length\"\n [style.width]=\"getSliderWidth() + 'px'\"\n class=\"selection-slider\">\n\n <div class=\"selection-slider-padding\"></div>\n\n <div *ngIf=\"viewType === 'days';else month_selection_view\">\n <div #selection \n *ngFor=\"let d of getDaysInMonth()\"\n [ngClass]=\"{active: d == activeDay}\"\n (click)=\"setActiveDay(d)\"\n class=\"selection\">\n {{d}}\n </div>\n </div>\n\n <ng-template #month_selection_view>\n <div #selection\n *ngFor=\"let m of getMonthsInYear()\"\n [ngClass]=\"{active: m == activeMonth}\"\n (click)=\"setActiveMonth(m)\"\n class=\"selection\">\n {{getMonthShortName(m)}}\n </div>\n </ng-template>\n\n <div class=\"selection-slider-padding\"></div>\n \n </div>\n\n </div>\n\n</div>\n"
}),
__metadata("design:paramtypes", [PickerController])
], IonicConferenceCalendarHeader);
return IonicConferenceCalendarHeader;
}());
export { IonicConferenceCalendarHeader };
//# sourceMappingURL=IonicConferenceCalendarHeader.js.map