innotec-materials
Version:
Innotec Materials is an UI framework who's desgined for all products of Innotec GmbH. Innotec Materials is based on Angular 2 an bootstrap.
112 lines • 6.12 kB
JavaScript
"use strict";
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);
};
Object.defineProperty(exports, "__esModule", { value: true });
var core_1 = require("@angular/core");
var signature_pad_1 = require("signature_pad");
var SignaturefieldComponent = (function () {
function SignaturefieldComponent() {
this.signdata = new core_1.EventEmitter();
this.role = 'main';
}
SignaturefieldComponent.prototype.generateSmallCanvas = function () {
var ratio = Math.max(window.devicePixelRatio || 1, 1);
this.canvassmall.nativeElement.width = this.canvassmall.nativeElement.offsetWidth * ratio;
this.canvassmall.nativeElement.height = this.canvassmall.nativeElement.offsetHeight * ratio;
this.canvassmall.nativeElement.getContext('2d').scale(ratio, ratio);
this.signaturePad = new signature_pad_1.default(this.canvassmall.nativeElement);
};
SignaturefieldComponent.prototype.generateGreatCanvas = function () {
var ratio = Math.max(window.devicePixelRatio || 1, 1);
if (!this.firstInit) {
this.firstInit = true;
this.greatWidth = this.canvasgreat.nativeElement.offsetWidth;
this.greatHeight = this.canvasgreat.nativeElement.offsetHeight;
}
this.canvasgreat.nativeElement.width = this.greatWidth * ratio;
this.canvasgreat.nativeElement.height = this.greatHeight * ratio;
this.canvasgreat.nativeElement.getContext('2d').scale(ratio, ratio);
this.signaturePadGreat = new signature_pad_1.default(this.canvasgreat.nativeElement);
};
SignaturefieldComponent.prototype.ngAfterViewInit = function () {
this.generateSmallCanvas();
};
SignaturefieldComponent.prototype.openModal = function () {
var _this = this;
this.hideclass = 'hide';
this.signModal = true;
setTimeout(function () { return _this.generateGreatCanvas(); }, 500);
};
SignaturefieldComponent.prototype.closeModal = function () {
this.hideclass = 'none';
this.signModal = false;
};
SignaturefieldComponent.prototype.reset = function () {
this.signaturePad.clear();
this.firstInit = false;
if (this.firstInit) {
this.signaturePadGreat.clear();
}
this.confirmed = false;
var signature = this.signaturePad.toDataURL();
this.signObj = { role: this.role, mimetype: signature.split(',')[0], base64: signature.split(',')[1] };
this.confirmed = false;
if (this.signModal) {
this.generateGreatCanvas();
}
this.generateSmallCanvas();
};
SignaturefieldComponent.prototype.save = function (pos) {
var signature;
if (pos === 'great') {
this.signaturePad.clear();
this.signaturePad.fromDataURL(this.signaturePadGreat.toDataURL());
this.closeModal();
}
this.signaturePad.off();
this.confirmed = true;
signature = this.signaturePad.toDataURL();
this.signObj = { role: this.role, mimetype: signature.split(',')[0], base64: signature.split(',')[1] };
this.signdata.emit(this.signObj);
};
SignaturefieldComponent.prototype.onResize = function () {
if (!this.confirmed) {
this.reset();
}
};
__decorate([
core_1.ViewChild('canvassmall'),
__metadata("design:type", core_1.ElementRef)
], SignaturefieldComponent.prototype, "canvassmall", void 0);
__decorate([
core_1.ViewChild('canvasgreat'),
__metadata("design:type", core_1.ElementRef)
], SignaturefieldComponent.prototype, "canvasgreat", void 0);
__decorate([
core_1.Output(),
__metadata("design:type", Object)
], SignaturefieldComponent.prototype, "signdata", void 0);
__decorate([
core_1.Input(),
__metadata("design:type", String)
], SignaturefieldComponent.prototype, "role", void 0);
SignaturefieldComponent = __decorate([
core_1.Component({
selector: 'signature-field',
template: "\n <div class=\"signature-content\"><div id=\"small\" [class]=\"hideclass\"><canvas #canvassmall=\"\" id=\"canvassmall\"></canvas><span class=\"pen glyphicon glyphicon-pencil\"></span><div class=\"signature_confirmed\" *ngIf=\"confirmed\">✓</div><md-button class=\"button zoom\" *ngIf=\"!confirmed\" (onPress)=\"openModal()\"><span class=\"glyphicon glyphicon-move\"></span></md-button><md-button class=\"button clear\" (onPress)=\"reset()\">✗</md-button><md-button class=\"button save\" *ngIf=\"!confirmed\" (onPress)=\"save()\">✓</md-button></div><div class=\"signModal\" *ngIf=\"signModal\"><div class=\"signModal-content\"><div id=\"great\"><canvas #canvasgreat=\"\" id=\"canvasgreat\"></canvas><div class=\"borderline\"></div><div class=\"signature_confirmed\" *ngIf=\"confirmed\">✓</div><md-button class=\"button clear great\" (onPress)=\"closeModal()\">✗</md-button><md-button class=\"button save great\" (onPress)=\"save("great")\">✓</md-button></div></div></div></div>\n ",
host: {
'(window:resize)': 'onResize()'
}
})
], SignaturefieldComponent);
return SignaturefieldComponent;
}());
exports.SignaturefieldComponent = SignaturefieldComponent;
//# sourceMappingURL=signature-field.component.js.map