ferngully-aurelia-tools
Version:
Ferngully Tools for Aurelia
180 lines • 6.92 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 { customElement, bindable, autoinject } from "aurelia-framework";
import { DateService } from "../../../services/date-service";
import { AureliaHelperService } from "../../../services/aurelia-helper-service";
import { DisposableCollection } from "../../../services/disposable-collection";
import { bindingMode } from "aurelia-binding";
import "./datepicker.css";
import "bootstrap-datepicker";
import "jquery";
let DatePicker = class DatePicker {
constructor(dateService, aureliaHelperService, disposableCollection) {
this.dateService = dateService;
this.aureliaHelperService = aureliaHelperService;
this.disposableCollection = disposableCollection;
this.format = "table";
this.startDate = false;
this.lang = "en-CA";
}
attached() {
this.picker = $(this.picker);
if (this.width) {
$(this.$inputElement).css({ width: this.width });
}
if (typeof (this.startDate) == "boolean") {
var yesNo = this.startDate;
if (yesNo) {
this.startDate = this.dateService.today;
}
}
this.picker.datepicker({
format: {
toDisplay: (date, format, language) => {
if (!date) {
return '';
}
return this.dateService.toString(this.dateService.translateUtcToLocal(date), this.rawFormat);
},
toValue: (date, format, language) => {
if (!date) {
return new Date();
}
return this.dateService.fromString(date, this.rawFormat);
}
},
startDate: this.startDate ? this.startDate : undefined,
autoclose: this.autoclose,
todayHighlight: true,
todayBtn: true,
language: this.lang
});
this.disposableCollection.push(this.aureliaHelperService.createPropertyWatch(this, "format", () => {
this.rawFormat = this.dateService.getSafeParams(this.format).format;
}));
this.rawFormat = this.dateService.getSafeParams(this.format).format;
this.disposableCollection.push(this.aureliaHelperService.createPropertyWatch(this, "target", () => {
this.picker.datepicker("setDate", this.dateService.fromString(this.target, this.rawFormat));
}));
if (this.target) {
this.picker.datepicker("setDate", this.dateService.fromString(this.target, this.rawFormat));
}
this.picker.datepicker()
.on('change.date-picker', (e) => fireEvent(e.target, "input"))
.on('show', (e) => {
if (this.onShow)
this.onShow(this);
})
.on('hide', (e) => {
if (this.onHide)
this.onHide(this);
});
this.$inputElement
.on('keydown', (e) => {
this.keydown(e);
})
.on('change', (e) => {
this.target = this.$inputElement.val().toString();
});
this.$buttonElement.on('click', (e) => {
this.buttonClick();
});
}
unattached() {
this.picker.datepicker().off('change.date-picker')
.off('show')
.off('hide');
this.$inputElement.off('keydown').off('change');
this.$buttonElement.off('click');
this.disposableCollection.dispose();
}
show() {
this.picker.datepicker('show');
this.$inputElement.focus();
}
hide() {
this.picker.datepicker('hide');
}
keydown(event) {
let retval = true;
let $target = $(event.target);
if (this.onKeydown) {
retval = this.onKeydown(event, this);
}
if (retval) {
switch (event.key) {
case "Enter":
case "Escape":
this.hide();
break;
}
}
return retval;
}
buttonClick() {
this.$inputElement.focus();
}
get $buttonElement() {
return $(this.picker).find("#buttonElement");
}
get $inputElement() {
return $(this.picker).find("#inputElement");
}
};
__decorate([
bindable({ defaultBindingMode: bindingMode.twoWay }),
__metadata("design:type", String)
], DatePicker.prototype, "target", void 0);
__decorate([
bindable({ defaultBindingMode: bindingMode.oneTime }),
__metadata("design:type", String)
], DatePicker.prototype, "format", void 0);
__decorate([
bindable({ defaultBindingMode: bindingMode.oneTime }),
__metadata("design:type", String)
], DatePicker.prototype, "width", void 0);
__decorate([
bindable({ defaultBindingMode: bindingMode.oneTime }),
__metadata("design:type", Boolean)
], DatePicker.prototype, "autoclose", void 0);
__decorate([
bindable({ defaultBindingMode: bindingMode.oneTime }),
__metadata("design:type", Object)
], DatePicker.prototype, "startDate", void 0);
__decorate([
bindable({ defaultBindingMode: bindingMode.oneWay }),
__metadata("design:type", String)
], DatePicker.prototype, "lang", void 0);
__decorate([
bindable,
__metadata("design:type", Function)
], DatePicker.prototype, "onShow", void 0);
__decorate([
bindable,
__metadata("design:type", Function)
], DatePicker.prototype, "onHide", void 0);
__decorate([
bindable,
__metadata("design:type", Function)
], DatePicker.prototype, "onKeydown", void 0);
DatePicker = __decorate([
autoinject,
customElement('date-picker'),
__metadata("design:paramtypes", [DateService,
AureliaHelperService,
DisposableCollection])
], DatePicker);
export { DatePicker };
function fireEvent(element, name) {
var event = document.createEvent("Event");
event.initEvent(name, true, true);
element.dispatchEvent(event);
}
//# sourceMappingURL=datepicker.js.map