You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
309 lines
17 KiB
JavaScript
309 lines
17 KiB
JavaScript
import { Component, ViewChild, Input, ElementRef, Renderer, forwardRef } from '@angular/core';
|
|
import { NG_VALUE_ACCESSOR } from '@angular/forms';
|
|
export var TIME_PIRCKER_VALUE_ACCESSOT = {
|
|
provide: NG_VALUE_ACCESSOR,
|
|
useExisting: forwardRef(function () { return ClockPicker; }),
|
|
multi: true
|
|
};
|
|
var ClockPicker = (function () {
|
|
function ClockPicker(elem, renderer) {
|
|
var _this = this;
|
|
this.elem = elem;
|
|
this.renderer = renderer;
|
|
this.twelvehour = false;
|
|
this.darktheme = false;
|
|
this.placeholder = '';
|
|
this.label = '';
|
|
this.duration = 300;
|
|
this.showClock = false;
|
|
this.showHours = false;
|
|
this.dialRadius = 135;
|
|
this.outerRadius = 110;
|
|
this.innerRadius = 80;
|
|
this.tickRadius = 20;
|
|
this.diameter = this.dialRadius * 2;
|
|
this.hoursTicks = [];
|
|
this.minutesTicks = [];
|
|
this.selectedHours = { 'h': '12', 'm': '00', 'ampm': 'AM' };
|
|
this.endHours = '';
|
|
this.touchSupported = 'ontouchstart' in window;
|
|
this.mousedownEvent = 'mousedown' + (this.touchSupported ? ' touchstart' : '');
|
|
this.mousemoveEvent = 'mousemove' + (this.touchSupported ? ' touchmove' : '');
|
|
this.mouseupEvent = 'mouseup' + (this.touchSupported ? ' touchend' : '');
|
|
this.onChangeCb = function () { };
|
|
this.onTouchedCb = function () { };
|
|
renderer.listenGlobal(this.elem.nativeElement, 'click', function (event) {
|
|
if (_this.showClock && event.target && _this.elem.nativeElement !== event.target && !_this.elem.nativeElement.contains(event.target)) {
|
|
_this.showClock = false;
|
|
}
|
|
if (event.target.classList.contains('picker__holder')) {
|
|
_this.showClock = false;
|
|
}
|
|
});
|
|
}
|
|
ClockPicker.prototype.ngOnInit = function () {
|
|
this.generateTick();
|
|
};
|
|
ClockPicker.prototype.ngAfterViewInit = function () {
|
|
var _this = this;
|
|
this.renderer.listenGlobal(this.plate.nativeElement, this.mousedownEvent, function (event) {
|
|
_this.mousedown(event, false);
|
|
});
|
|
};
|
|
ClockPicker.prototype.checkDraw = function () {
|
|
var value;
|
|
var isHours = this.showHours;
|
|
if (isHours) {
|
|
value = parseInt(this.selectedHours.h);
|
|
}
|
|
else {
|
|
value = parseInt(this.selectedHours.m);
|
|
}
|
|
var unit = Math.PI / (isHours ? 6 : 30), radian = value * unit, radius = isHours && value > 0 && value < 13 ? this.innerRadius : this.outerRadius, xd = Math.sin(radian) * radius, yd = -Math.cos(radian) * radius;
|
|
this.setHand(xd, yd, false, false);
|
|
};
|
|
ClockPicker.prototype.mousedown = function (e, space) {
|
|
var _this = this;
|
|
var offset = this.plate.nativeElement.getBoundingClientRect(), isTouch = /^touch/.test(e.type), x0 = offset.left + this.dialRadius, y0 = offset.top + this.dialRadius, dx = (isTouch ? e.originalEvent.touches[0] : e).clientX - x0, dy = (isTouch ? e.originalEvent.touches[0] : e).clientY - y0, z = Math.sqrt(dx * dx + dy * dy), moved = false;
|
|
if (space && (z < this.outerRadius - this.tickRadius || z > this.outerRadius + this.tickRadius))
|
|
return;
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
if (this.showHours) {
|
|
this.setHand(dx, dy, true, false);
|
|
}
|
|
else {
|
|
this.setHand(dx, dy, false, false);
|
|
}
|
|
var mousemoveEventMethod = function (event) {
|
|
event.preventDefault();
|
|
event.stopPropagation();
|
|
var isTouch = /^touch/.test(e.type), x = event.clientX - x0, y = event.clientY - y0;
|
|
if (!moved && x === dx && y === dy)
|
|
return;
|
|
moved = true;
|
|
_this.setHand(x, y, false, true);
|
|
};
|
|
var mouseupEventMethod = function (event) {
|
|
document.removeEventListener(_this.mousemoveEvent, mousemoveEventMethod);
|
|
e.preventDefault();
|
|
var isTouch = /^touch/.test(e.type), x = event.clientX - x0, y = event.clientX - y0;
|
|
if ((space || moved) && x === dx && y === dy)
|
|
_this.setHand(x, y, false, false);
|
|
_this.showMinutesClock();
|
|
document.removeEventListener(_this.mouseupEvent, mouseupEventMethod);
|
|
};
|
|
document.addEventListener(this.mousemoveEvent, mousemoveEventMethod);
|
|
document.addEventListener(this.mouseupEvent, mouseupEventMethod);
|
|
};
|
|
ClockPicker.prototype.openBtnClicked = function () {
|
|
this.showClock = true;
|
|
this.showHours = true;
|
|
this.checkDraw();
|
|
};
|
|
ClockPicker.prototype.closeBtnClicked = function () {
|
|
var h = this.selectedHours.h;
|
|
var m = this.selectedHours.m;
|
|
var ampm = this.selectedHours.ampm;
|
|
if (this.twelvehour) {
|
|
this.endHours = h + ':' + m + ampm;
|
|
}
|
|
else {
|
|
this.endHours = h + ':' + m;
|
|
this.endHours;
|
|
}
|
|
this.onChangeCb(this.endHours);
|
|
this.onTouchedCb();
|
|
this.showClock = false;
|
|
};
|
|
ClockPicker.prototype.setHour = function (hour) {
|
|
this.selectedHours.h = hour;
|
|
};
|
|
ClockPicker.prototype.setMinute = function (min) {
|
|
this.selectedHours.m = min;
|
|
};
|
|
ClockPicker.prototype.setAmPm = function (ampm) {
|
|
this.selectedHours.ampm = ampm;
|
|
};
|
|
ClockPicker.prototype.showHoursClock = function () {
|
|
this.showHours = true;
|
|
this.checkDraw();
|
|
};
|
|
ClockPicker.prototype.showMinutesClock = function () {
|
|
this.showHours = false;
|
|
this.checkDraw();
|
|
};
|
|
ClockPicker.prototype.generateTick = function () {
|
|
if (this.twelvehour) {
|
|
for (var i = 1; i < 13; i++) {
|
|
var radian = i / 6 * Math.PI;
|
|
var radius = this.outerRadius;
|
|
var tick = {
|
|
'hour': i,
|
|
'left': this.dialRadius + Math.sin(radian) * radius - this.tickRadius,
|
|
'top': this.dialRadius - Math.cos(radian) * radius - this.tickRadius,
|
|
};
|
|
this.hoursTicks.push(tick);
|
|
}
|
|
}
|
|
else {
|
|
for (var i = 0; i < 24; i++) {
|
|
var radian = i / 6 * Math.PI;
|
|
var inner = i > 0 && i < 13;
|
|
var radius = inner ? this.innerRadius : this.outerRadius;
|
|
var h = void 0;
|
|
if (i === 0) {
|
|
h = '0' + i.toString();
|
|
}
|
|
else {
|
|
h = i;
|
|
}
|
|
var tick = {
|
|
'hour': h,
|
|
'left': this.dialRadius + Math.sin(radian) * radius - this.tickRadius,
|
|
'top': this.dialRadius - Math.cos(radian) * radius - this.tickRadius,
|
|
};
|
|
this.hoursTicks.push(tick);
|
|
}
|
|
}
|
|
for (var i = 0; i < 60; i += 5) {
|
|
var radian = i / 30 * Math.PI;
|
|
var min = i.toString();
|
|
if (i < 10) {
|
|
min = '0' + i.toString();
|
|
}
|
|
var tick = {
|
|
'min': min,
|
|
'left': this.dialRadius + Math.sin(radian) * this.outerRadius - this.tickRadius,
|
|
'top': this.dialRadius - Math.cos(radian) * this.outerRadius - this.tickRadius,
|
|
};
|
|
this.minutesTicks.push(tick);
|
|
}
|
|
};
|
|
ClockPicker.prototype.setHand = function (x, y, roundBy5, draging) {
|
|
var radian = Math.atan2(x, -y), isHours = this.showHours, unit = Math.PI / (isHours || roundBy5 ? 6 : 30), z = Math.sqrt(x * x + y * y), inner = isHours && z < (this.outerRadius + this.innerRadius) / 2, radius = inner ? this.innerRadius : this.outerRadius, value;
|
|
if (this.showHours) {
|
|
value = parseInt(this.selectedHours.h);
|
|
}
|
|
else {
|
|
value = parseInt(this.selectedHours.m);
|
|
}
|
|
if (this.twelvehour) {
|
|
radius = this.outerRadius;
|
|
}
|
|
if (radian < 0) {
|
|
radian = Math.PI * 2 + radian;
|
|
}
|
|
value = Math.round(radian / unit);
|
|
radian = value * unit;
|
|
if (this.twelvehour) {
|
|
if (isHours) {
|
|
if (value === 0) {
|
|
value = 12;
|
|
}
|
|
}
|
|
else {
|
|
if (roundBy5) {
|
|
value *= 5;
|
|
}
|
|
if (value === 60) {
|
|
value = 0;
|
|
}
|
|
}
|
|
}
|
|
else {
|
|
if (isHours) {
|
|
if (value === 12)
|
|
value = 0;
|
|
value = inner ? (value === 0 ? 12 : value) : value === 0 ? 0 : value + 12;
|
|
}
|
|
else {
|
|
if (roundBy5)
|
|
value *= 5;
|
|
if (value === 60)
|
|
value = 0;
|
|
}
|
|
}
|
|
if (isHours)
|
|
this.fg.nativeElement.setAttribute('class', 'clockpicker-canvas-fg');
|
|
else {
|
|
if (value % 5 == 0)
|
|
this.fg.nativeElement.setAttribute('class', 'clockpicker-canvas-fg');
|
|
else
|
|
this.fg.nativeElement.setAttribute('class', 'clockpicker-canvas-fg active');
|
|
}
|
|
var cx1 = Math.sin(radian) * (radius - this.tickRadius), cy1 = -Math.cos(radian) * (radius - this.tickRadius), cx2 = Math.sin(radian) * radius, cy2 = -Math.cos(radian) * radius;
|
|
this.hand.nativeElement.setAttribute('x2', cx1);
|
|
this.hand.nativeElement.setAttribute('y2', cy1);
|
|
this.bg.nativeElement.setAttribute('cx', cx2);
|
|
this.bg.nativeElement.setAttribute('cy', cy2);
|
|
this.fg.nativeElement.setAttribute('cx', cx2);
|
|
this.fg.nativeElement.setAttribute('cy', cy2);
|
|
if (this.showHours) {
|
|
if (value < 10) {
|
|
this.setHour('0' + value.toString());
|
|
}
|
|
else {
|
|
this.setHour(value.toString());
|
|
}
|
|
}
|
|
else {
|
|
if (value < 10) {
|
|
this.setMinute('0' + value.toString());
|
|
}
|
|
else {
|
|
this.setMinute(value.toString());
|
|
}
|
|
}
|
|
};
|
|
ClockPicker.prototype.offset = function (obj) {
|
|
var left = 0, top = 0;
|
|
if (obj.offsetParent) {
|
|
do {
|
|
left += obj.offsetLeft;
|
|
top += obj.offsetTop;
|
|
} while (obj = obj.offsetParent);
|
|
}
|
|
return { left: left, top: top };
|
|
};
|
|
ClockPicker.prototype.writeValue = function (value) {
|
|
this.endHours = value;
|
|
};
|
|
ClockPicker.prototype.registerOnChange = function (fn) {
|
|
this.onChangeCb = fn;
|
|
};
|
|
ClockPicker.prototype.registerOnTouched = function (fn) {
|
|
this.onTouchedCb = fn;
|
|
};
|
|
return ClockPicker;
|
|
}());
|
|
export { ClockPicker };
|
|
ClockPicker.decorators = [
|
|
{ type: Component, args: [{
|
|
selector: 'time-picker',
|
|
template: "\n <div>\n <div class=\"md-form\">\n <label class=\"active\">{{ label }}</label>\n <input [placeholder]=\"placeholder\" [value]=\"endHours\" type=\"text\" class=\"form-control timepicker\" (click)=\"openBtnClicked()\" [(ngModel)]=\"endHours\">\n </div>\n <div class=\"clockpicker picker\" [hidden]=\"!showClock\" [ngClass]=\"{'picker--opened': showClock, 'darktheme': darktheme}\">\n <div class=\"picker__holder\">\n <div class=\"picker__frame\">\n <div class=\"picker__wrap\">\n <div class=\"picker__box\">\n <div class=\"picker__date-display\">\n <div class=\"clockpicker-display\">\n <div class=\"clockpicker-display-column\">\n <span class=\"clockpicker-span-hours text-primary\" [ngClass]=\"{'text-primary': showHours}\" (click)=\"showHoursClock()\">\n {{ selectedHours.h }}</span>:<span class=\"clockpicker-span-minutes\" [ngClass]=\"{'text-primary': !showHours}\"\n (click)=\"showMinutesClock()\">{{selectedHours.m }}</span>\n </div>\n <div class=\"clockpicker-display-column clockpicker-display-am-pm\" *ngIf=\"twelvehour\">\n <div class=\"clockpicker-span-am-pm\">{{ selectedHours.ampm }}</div>\n </div>\n </div>\n </div>\n <div class=\"picker__calendar-container\">\n <!--<div class=\"clockpicker-plate\" (mousedown)=\"changeTick($event)\" #plate>-->\n <div class=\"clockpicker-plate\" #plate>\n <div class=\"clockpicker-canvas\">\n <svg class=\"clockpicker-svg\" width=\"270\" height=\"270\" #svg>\n <g transform=\"translate(135,135)\" #g>\n <line x1=\"0\" y1=\"0\" x2=\"77.94228634059948\" y2=\"-45.00000000000001\" #hand></line>\n <circle class=\"clockpicker-canvas-fg\" r=\"5\" cx=\"95.26279441628824\" cy=\"-55.000000000000014\" #fg></circle>\n <circle class=\"clockpicker-canvas-bg\" r=\"20\" cx=\"95.26279441628824\" cy=\"-55.000000000000014\" #bg></circle>\n <circle class=\"clockpicker-canvas-bearing\" cx=\"0\" cy=\"0\" r=\"2\" #bearing></circle>\n </g>\n </svg>\n </div>\n <div class=\"clockpicker-dial clockpicker-hours\" #hoursPlate [ngClass]=\"{'clockpicker-dial-out': !showHours}\" [ngStyle]=\"{'visibility': !showHours ? 'hidden' : 'visible'}\">\n <div *ngFor=\"let tick of hoursTicks\" class=\"clockpicker-tick\" style=\"font-size: 140%;\" [ngStyle]=\"{'left': tick.left+'px', 'top': tick.top+'px'}\"\n id=\"{{ tick.hour }}\">\n {{ tick.hour }}\n </div>\n </div>\n <div class=\"clockpicker-dial clockpicker-minutes\" #minutesPlate [ngClass]=\"{'clockpicker-dial-out': showHours}\" [ngStyle]=\"{'visibility': showHours ? 'hidden' : 'visible'}\">\n <div *ngFor=\"let tick of minutesTicks\" class=\"clockpicker-tick\" style=\"font-size: 120%;\" [ngStyle]=\"{'left': tick.left+'px', 'top': tick.top+'px'}\">\n {{ tick.min }}\n </div>\n </div>\n </div>\n <div class=\"clockpicker-am-pm-block\" *ngIf=\"twelvehour\">\n <button type=\"button\" class=\"btn-floating btn-flat clockpicker-button am-button\" [ngClass]=\"{'active': selectedHours.ampm=='AM'}\"\n (click)=\"setAmPm('AM')\">\n AM\n </button>\n <button type=\"button\" class=\"btn-floating btn-flat clockpicker-button pm-button\" [ngClass]=\"{'active': selectedHours.ampm=='PM'}\"\n (click)=\"setAmPm('PM')\">\n PM\n </button>\n </div>\n </div>\n <div class=\"picker__footer\">\n <button type=\"button\" class=\"btn-flat clockpicker-button\" (click)=\"closeBtnClicked()\">\n Done\n </button>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n ",
|
|
providers: [TIME_PIRCKER_VALUE_ACCESSOT]
|
|
},] },
|
|
];
|
|
ClockPicker.ctorParameters = function () { return [
|
|
{ type: ElementRef, },
|
|
{ type: Renderer, },
|
|
]; };
|
|
ClockPicker.propDecorators = {
|
|
'hoursPlate': [{ type: ViewChild, args: ['hoursPlate',] },],
|
|
'minutesPlate': [{ type: ViewChild, args: ['minutesPlate',] },],
|
|
'plate': [{ type: ViewChild, args: ['plate',] },],
|
|
'svg': [{ type: ViewChild, args: ['svg',] },],
|
|
'g': [{ type: ViewChild, args: ['g',] },],
|
|
'hand': [{ type: ViewChild, args: ['hand',] },],
|
|
'fg': [{ type: ViewChild, args: ['fg',] },],
|
|
'bg': [{ type: ViewChild, args: ['bg',] },],
|
|
'bearing': [{ type: ViewChild, args: ['bearing',] },],
|
|
'twelvehour': [{ type: Input, args: ['twelvehour',] },],
|
|
'darktheme': [{ type: Input, args: ['darktheme',] },],
|
|
'placeholder': [{ type: Input, args: ['placeholder',] },],
|
|
'label': [{ type: Input, args: ['label',] },],
|
|
'duration': [{ type: Input, args: ['duration',] },],
|
|
'showClock': [{ type: Input, args: ['showClock',] },],
|
|
};
|
|
//# sourceMappingURL=timepickerComponent.js.map
|