ng2-bootstrap
Version:
angular2 bootstrap components
323 lines (322 loc) • 14.3 kB
JavaScript
"use strict";
var core_1 = require('@angular/core');
var forms_1 = require('@angular/forms');
// todo: implement global configuration via DI
// todo: refactor directive has to many functions! (extract to stateless helper)
// todo: use moment js?
// todo: implement `time` validator
// todo: replace increment/decrement blockers with getters, or extract
// todo: unify work with selected
exports.timepickerConfig = {
hourStep: 1,
minuteStep: 1,
showMeridian: true,
meridians: void 0,
readonlyInput: false,
mousewheel: true,
arrowkeys: true,
showSpinners: true,
min: void 0,
max: void 0
};
function isDefined(value) {
return typeof value !== 'undefined';
}
function def(value, fn, defaultValue) {
return fn(value) ? value : defaultValue;
}
function addMinutes(date, minutes) {
var dt = new Date(date.getTime() + minutes * 60000);
var newDate = new Date(date);
newDate.setHours(dt.getHours(), dt.getMinutes());
return newDate;
}
var TimepickerComponent = (function () {
function TimepickerComponent(cd) {
this.meridians = ['AM', 'PM']; // ??
this.onChange = Function.prototype;
this.onTouched = Function.prototype;
// result value
this._selected = new Date();
this.cd = cd;
cd.valueAccessor = this;
}
Object.defineProperty(TimepickerComponent.prototype, "showMeridian", {
get: function () {
return this._showMeridian;
},
set: function (value) {
this._showMeridian = value;
// || !this.$error.time
// if (true) {
this.updateTemplate();
return;
// }
// Evaluate from template
/*let hours = this.getHoursFromTemplate();
let minutes = this.getMinutesFromTemplate();
if (isDefined(hours) && isDefined(minutes)) {
this.selected.setHours(hours);
this.refresh();
}*/
},
enumerable: true,
configurable: true
});
Object.defineProperty(TimepickerComponent.prototype, "selected", {
get: function () {
return this._selected;
},
set: function (v) {
if (v) {
this._selected = v;
this.updateTemplate();
this.cd.viewToModelUpdate(this.selected);
}
},
enumerable: true,
configurable: true
});
// todo: add formatter value to Date object
TimepickerComponent.prototype.ngOnInit = function () {
// todo: take in account $locale.DATETIME_FORMATS.AMPMS;
this.meridians = def(this.meridians, isDefined, exports.timepickerConfig.meridians) || ['AM',
'PM'];
this.mousewheel = def(this.mousewheel, isDefined, exports.timepickerConfig.mousewheel);
if (this.mousewheel) {
}
this.arrowkeys = def(this.arrowkeys, isDefined, exports.timepickerConfig.arrowkeys);
if (this.arrowkeys) {
}
this.readonlyInput = def(this.readonlyInput, isDefined, exports.timepickerConfig.readonlyInput);
// this.setupInputEvents();
this.hourStep = def(this.hourStep, isDefined, exports.timepickerConfig.hourStep);
this.minuteStep = def(this.minuteStep, isDefined, exports.timepickerConfig.minuteStep);
this.min = def(this.min, isDefined, exports.timepickerConfig.min);
this.max = def(this.max, isDefined, exports.timepickerConfig.max);
// 12H / 24H mode
this.showMeridian = def(this.showMeridian, isDefined, exports.timepickerConfig.showMeridian);
this.showSpinners = def(this.showSpinners, isDefined, exports.timepickerConfig.showSpinners);
};
TimepickerComponent.prototype.writeValue = function (v) {
if (v === this.selected) {
return;
}
if (v && v instanceof Date) {
this.selected = v;
return;
}
this.selected = v ? new Date(v) : void 0;
};
TimepickerComponent.prototype.registerOnChange = function (fn) {
this.onChange = fn;
};
TimepickerComponent.prototype.registerOnTouched = function (fn) {
this.onTouched = fn;
};
TimepickerComponent.prototype.setDisabledState = function (isDisabled) {
this.readonlyInput = isDisabled;
};
TimepickerComponent.prototype.updateHours = function () {
if (this.readonlyInput) {
return;
}
var hours = this.getHoursFromTemplate();
var minutes = this.getMinutesFromTemplate();
this.invalidHours = !isDefined(hours);
this.invalidMinutes = !isDefined(minutes);
if (this.invalidHours || this.invalidMinutes) {
// TODO: needed a validation functionality.
return;
}
this.selected.setHours(hours);
this.invalidHours = (this.selected < this.min || this.selected > this.max);
if (this.invalidHours) {
// todo: validation?
// invalidate(true);
return;
}
else {
this.refresh();
}
};
// tslint:disable-next-line:no-unused-variable
TimepickerComponent.prototype.hoursOnBlur = function (event) {
if (this.readonlyInput) {
return;
}
// todo: binded with validation
if (!this.invalidHours && parseInt(this.hours, 10) < 10) {
this.hours = this.pad(this.hours);
}
};
TimepickerComponent.prototype.updateMinutes = function () {
if (this.readonlyInput) {
return;
}
var minutes = this.getMinutesFromTemplate();
var hours = this.getHoursFromTemplate();
this.invalidMinutes = !isDefined(minutes);
this.invalidHours = !isDefined(hours);
if (this.invalidMinutes || this.invalidHours) {
// TODO: needed a validation functionality.
return;
}
this.selected.setMinutes(minutes);
this.invalidMinutes = (this.selected < this.min || this.selected > this.max);
if (this.invalidMinutes) {
// todo: validation
// invalidate(undefined, true);
return;
}
else {
this.refresh();
}
};
// tslint:disable-next-line:no-unused-variable
TimepickerComponent.prototype.minutesOnBlur = function (event) {
if (this.readonlyInput) {
return;
}
if (!this.invalidMinutes && parseInt(this.minutes, 10) < 10) {
this.minutes = this.pad(this.minutes);
}
};
TimepickerComponent.prototype.incrementHours = function () {
if (!this.noIncrementHours()) {
this.addMinutesToSelected(this.hourStep * 60);
}
};
TimepickerComponent.prototype.decrementHours = function () {
if (!this.noDecrementHours()) {
this.addMinutesToSelected(-this.hourStep * 60);
}
};
TimepickerComponent.prototype.incrementMinutes = function () {
if (!this.noIncrementMinutes()) {
this.addMinutesToSelected(this.minuteStep);
}
};
TimepickerComponent.prototype.decrementMinutes = function () {
if (!this.noDecrementMinutes()) {
this.addMinutesToSelected(-this.minuteStep);
}
};
TimepickerComponent.prototype.noIncrementHours = function () {
var incrementedSelected = addMinutes(this.selected, this.hourStep * 60);
return incrementedSelected > this.max ||
(incrementedSelected < this.selected && incrementedSelected < this.min);
};
TimepickerComponent.prototype.noDecrementHours = function () {
var decrementedSelected = addMinutes(this.selected, -this.hourStep * 60);
return decrementedSelected < this.min ||
(decrementedSelected > this.selected && decrementedSelected > this.max);
};
TimepickerComponent.prototype.noIncrementMinutes = function () {
var incrementedSelected = addMinutes(this.selected, this.minuteStep);
return incrementedSelected > this.max ||
(incrementedSelected < this.selected && incrementedSelected < this.min);
};
TimepickerComponent.prototype.noDecrementMinutes = function () {
var decrementedSelected = addMinutes(this.selected, -this.minuteStep);
return decrementedSelected < this.min ||
(decrementedSelected > this.selected && decrementedSelected > this.max);
};
TimepickerComponent.prototype.toggleMeridian = function () {
if (!this.noToggleMeridian()) {
var sign = this.selected.getHours() < 12 ? 1 : -1;
this.addMinutesToSelected(12 * 60 * sign);
}
};
TimepickerComponent.prototype.refresh = function () {
// this.makeValid();
this.updateTemplate();
this.cd.viewToModelUpdate(this.selected);
};
TimepickerComponent.prototype.updateTemplate = function () {
var hours = this.selected.getHours();
var minutes = this.selected.getMinutes();
if (this.showMeridian) {
// Convert 24 to 12 hour system
hours = (hours === 0 || hours === 12) ? 12 : hours % 12;
}
// this.hours = keyboardChange === 'h' ? hours : this.pad(hours);
// if (keyboardChange !== 'm') {
// this.minutes = this.pad(minutes);
// }
this.hours = this.pad(hours);
this.minutes = this.pad(minutes);
this.meridian = this.selected.getHours() < 12
? this.meridians[0]
: this.meridians[1];
};
TimepickerComponent.prototype.getHoursFromTemplate = function () {
var hours = parseInt(this.hours, 10);
var valid = this.showMeridian
? (hours > 0 && hours < 13)
: (hours >= 0 && hours < 24);
if (!valid) {
return void 0;
}
if (this.showMeridian) {
if (hours === 12) {
hours = 0;
}
if (this.meridian === this.meridians[1]) {
hours = hours + 12;
}
}
return hours;
};
TimepickerComponent.prototype.getMinutesFromTemplate = function () {
var minutes = parseInt(this.minutes, 10);
return (minutes >= 0 && minutes < 60) ? minutes : undefined;
};
TimepickerComponent.prototype.pad = function (value) {
return (isDefined(value) && value.toString().length < 2)
? '0' + value
: value.toString();
};
TimepickerComponent.prototype.addMinutesToSelected = function (minutes) {
this.selected = addMinutes(this.selected, minutes);
this.refresh();
};
TimepickerComponent.prototype.noToggleMeridian = function () {
if (this.readonlyInput) {
return true;
}
if (this.selected.getHours() < 13) {
return addMinutes(this.selected, 12 * 60) > this.max;
}
else {
return addMinutes(this.selected, -12 * 60) < this.min;
}
};
TimepickerComponent.decorators = [
{ type: core_1.Component, args: [{
/* tslint:disable */
selector: 'timepicker[ngModel]',
/* tslint:enable */
template: "\n <table>\n <tbody>\n <tr class=\"text-center\" [ngClass]=\"{hidden: !showSpinners || readonlyInput}\">\n <td><a (click)=\"incrementHours()\" [ngClass]=\"{disabled: noIncrementHours()}\" class=\"btn btn-link\"><span class=\"glyphicon glyphicon-chevron-up\"></span></a></td>\n <td> </td>\n <td><a (click)=\"incrementMinutes()\" [ngClass]=\"{disabled: noIncrementMinutes()}\" class=\"btn btn-link\"><span class=\"glyphicon glyphicon-chevron-up\"></span></a></td>\n <td [ngClass]=\"{hidden: !showMeridian}\" *ngIf=\"showMeridian\"></td>\n </tr>\n <tr>\n <td class=\"form-group\" [ngClass]=\"{'has-error': invalidHours}\">\n <input style=\"width:50px;\" type=\"text\" [(ngModel)]=\"hours\" (change)=\"updateHours()\" class=\"form-control text-center\" [readonly]=\"readonlyInput\" (blur)=\"hoursOnBlur($event)\" maxlength=\"2\">\n </td>\n <td>:</td>\n <td class=\"form-group\" [ngClass]=\"{'has-error': invalidMinutes}\">\n <input style=\"width:50px;\" type=\"text\" [(ngModel)]=\"minutes\" (change)=\"updateMinutes()\" class=\"form-control text-center\" [readonly]=\"readonlyInput\" (blur)=\"minutesOnBlur($event)\" maxlength=\"2\">\n </td>\n <td [ngClass]=\"{hidden: !showMeridian}\" *ngIf=\"showMeridian\"><button type=\"button\" [ngClass]=\"{disabled: noToggleMeridian() || readonlyInput}\" class=\"btn btn-default text-center\" (click)=\"toggleMeridian()\">{{meridian}}</button></td>\n </tr>\n <tr class=\"text-center\" [ngClass]=\"{hidden: !showSpinners || readonlyInput}\">\n <td><a (click)=\"decrementHours()\" [ngClass]=\"{disabled: noDecrementHours()}\" class=\"btn btn-link\"><span class=\"glyphicon glyphicon-chevron-down\"></span></a></td>\n <td> </td>\n <td><a (click)=\"decrementMinutes()\" [ngClass]=\"{disabled: noDecrementMinutes()}\" class=\"btn btn-link\"><span class=\"glyphicon glyphicon-chevron-down\"></span></a></td>\n <td [ngClass]=\"{hidden: !showMeridian}\" *ngIf=\"showMeridian\"></td>\n </tr>\n </tbody>\n </table>\n ",
providers: [forms_1.NgModel]
},] },
];
/** @nocollapse */
TimepickerComponent.ctorParameters = [
{ type: forms_1.NgModel, decorators: [{ type: core_1.Self },] },
];
TimepickerComponent.propDecorators = {
'hourStep': [{ type: core_1.Input },],
'minuteStep': [{ type: core_1.Input },],
'readonlyInput': [{ type: core_1.Input },],
'mousewheel': [{ type: core_1.Input },],
'arrowkeys': [{ type: core_1.Input },],
'showSpinners': [{ type: core_1.Input },],
'min': [{ type: core_1.Input },],
'max': [{ type: core_1.Input },],
'meridians': [{ type: core_1.Input },],
'showMeridian': [{ type: core_1.Input },],
};
return TimepickerComponent;
}());
exports.TimepickerComponent = TimepickerComponent;