ng2-contact-form
Version:
ng2-contact-form ================
128 lines • 12 kB
JavaScript
System.register(['angular2/core', 'angular2/common', "ng2-contact-form/src/custom.validators"], function(exports_1) {
"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);
};
var core_1, common_1, custom_validators_1;
var DEFAULT_TEMPLATE, ContactForm;
return {
setters:[
function (core_1_1) {
core_1 = core_1_1;
},
function (common_1_1) {
common_1 = common_1_1;
},
function (custom_validators_1_1) {
custom_validators_1 = custom_validators_1_1;
}],
execute: function() {
DEFAULT_TEMPLATE = "\n <style>\n .spinner {\n width: 50px;\n height: 40px;\n font-size: 10px;\n }\n\n .spinner > div {\n background-color: #333;\n height: 100%;\n width: 6px;\n display: inline-block;\n\n -webkit-animation: sk-stretchdelay 1.2s infinite ease-in-out;\n animation: sk-stretchdelay 1.2s infinite ease-in-out;\n }\n\n .spinner .rect2 {\n -webkit-animation-delay: -1.1s;\n animation-delay: -1.1s;\n }\n\n .spinner .rect3 {\n -webkit-animation-delay: -1.0s;\n animation-delay: -1.0s;\n }\n\n .spinner .rect4 {\n -webkit-animation-delay: -0.9s;\n animation-delay: -0.9s;\n }\n\n .spinner .rect5 {\n -webkit-animation-delay: -0.8s;\n animation-delay: -0.8s;\n }\n\n @-webkit-keyframes sk-stretchdelay {\n 0%, 40%, 100% { -webkit-transform: scaleY(0.4) }\n 20% { -webkit-transform: scaleY(1.0) }\n }\n\n @keyframes sk-stretchdelay {\n 0%, 40%, 100% {\n transform: scaleY(0.4);\n -webkit-transform: scaleY(0.4);\n } 20% {\n transform: scaleY(1.0);\n -webkit-transform: scaleY(1.0);\n }\n }\n </style>\n\n <div class=\"container\">\n <div class=\"col m10 offset-m1 s12\">\n <div class=\"row\">\n <h2 class=\"ui header\">{{ titleAttr }}</h2>\n </div>\n <div class=\"{{ alertClass }}\" id=\"result_card\" style=\"display: none\">\n <i class=\"tiny material-icons\" *ngIf=\"frameworkCssAttr.toLowerCase() == 'materialize'\">info_outline</i>\n <i class=\"glyphicon glyphicon-info-sign\" *ngIf=\"frameworkCssAttr.toLowerCase() == 'bootstrap'\"></i>\n <span class=\"grey-text text-darken-4\" id=\"result\"></span>\n </div>\n <div class=\"row\">\n <form [ngFormModel]=\"myForm\" (ngSubmit)=\"sendEmail(myForm.value)\" class=\"col s12\">\n <div class=\"field\">\n <div class=\"row\">\n <label>{{ firstnameAttr }}</label><label *ngIf=\"firstname.hasError('required')\"><span style=\"color: red\"> (Required)</span></label>\n <input type=\"text\" id=\"firstnameInput\" class=\"{{ inputsClass }}\" [ngFormControl]=\"firstname\">\n </div>\n\n <div class=\"row\">\n <label>{{ lastnameAttr }}</label><label *ngIf=\"lastname.hasError('required')\"><span style=\"color: red\"> (Required)</span></label>\n <input type=\"text\" id=\"lastnameInput\" class=\"{{ inputsClass }}\" [ngFormControl]=\"lastname\">\n </div>\n\n <div class=\"row\">\n <label>{{ emailAttr }}</label><label *ngIf=\"email.hasError('required')\"><span style=\"color: red\"> (Required)</span></label>\n <div *ngIf=\"email.dirty && !email.valid\">\n <label *ngIf=\"email.errors.invalidEmailAddress\" style=\"color: red\"> Invalid Email </label>\n </div>\n <input type=\"email\" id=\"emailInput\" class=\"{{ inputsClass }}\" [ngFormControl]=\"email\">\n </div>\n\n <div class=\"row\">\n <label>{{ messageAttr }}</label><label *ngIf=\"message.hasError('required')\"><span style=\"color: red\"> (Required)</span></label>\n <textarea id=\"messageTextarea\" class=\"{{ textareaClass }} {{ inputsClass }}\" rows=\"5\" [ngFormControl]=\"message\" required></textarea>\n </div>\n </div>\n\n <div class=\"row\">\n <div class=\"pull-left spinner\" style=\"display: none\" id=\"progress\">\n <div class=\"rect1\"></div>\n <div class=\"rect2\"></div>\n <div class=\"rect3\"></div>\n <div class=\"rect4\"></div>\n <div class=\"rect5\"></div>\n </div>\n <div class=\"pull-left\" style=\"margin-top: 5px\">\n <input type=\"submit\" [disabled]=\"!myForm.valid\"\n class=\"{{ btnClass }}\"\n name=\"action\" value=\"{{ sendAttr }}\" />\n </div>\n </div>\n </form>\n </div>\n </div>\n </div>\n";
/*
@component: contact-form
@descrip: Component for implement contact form using ajax and validators
*/
ContactForm = (function () {
function ContactForm(fb, element) {
this.element = element;
//Get attributes values
var tag = this.element.nativeElement;
this.titleAttr = typeof tag.getAttribute('title') !== 'undefined' ? tag.getAttribute('title') : "Title";
this.firstnameAttr = typeof tag.getAttribute('firstname') !== 'undefined' ? tag.getAttribute('firstname') : "First Name";
this.lastnameAttr = typeof tag.getAttribute('lastname') !== 'undefined' ? tag.getAttribute('lastname') : "Last Name";
this.emailAttr = typeof tag.getAttribute('email') !== 'undefined' ? tag.getAttribute('email') : "Email";
this.sendAttr = typeof tag.getAttribute('send') !== 'undefined' ? tag.getAttribute('send') : "Send";
this.messageAttr = typeof tag.getAttribute('message') !== 'undefined' ? tag.getAttribute('message') : "Message";
this.urlAttr = typeof tag.getAttribute('url') !== 'undefined' ? tag.getAttribute('url') : "/send/";
this.frameworkCssAttr = typeof tag.getAttribute('frameworkCss') !== 'undefined' ? tag.getAttribute('frameworkCss') : "bootstrap";
//Check framework css to use
switch (this.frameworkCssAttr.toLowerCase()) {
//MaterializeCSS
case 'materialize':
this.inputsClass = "validate";
this.btnClass = "btn-large waves-effect waves-light teal default_color scrollspy";
this.textareaClass = "materialize-textarea";
this.alertClass = "card-panel";
break;
//Bootstrap
default:
this.inputsClass = "form-control";
this.btnClass = "btn btn-default";
this.textareaClass = "";
this.alertClass = "alert alert-info";
break;
}
//Validators form
this.myForm = fb.group({
'firstname': ['', common_1.Validators.required],
'lastname': ['', common_1.Validators.required],
'email': ['', common_1.Validators.compose([common_1.Validators.required, custom_validators_1.CustomValidators.validateEmail])],
'message': ['', common_1.Validators.required]
});
this.firstname = this.myForm.controls['firstname'];
this.lastname = this.myForm.controls['lastname'];
this.email = this.myForm.controls['email'];
this.message = this.myForm.controls['message'];
}
/*
@method: sendEmail
@descrip: Event submit for contact form
*/
ContactForm.prototype.sendEmail = function (value) {
//Result to send email
var result = document.querySelector("#result");
var result_card = document.querySelector("#result_card");
var progress = document.querySelector("#progress");
//Hide elements
result_card.style.display = "none";
//Show progress
progress.removeAttribute("style");
//Parameters
var creds = "firstname=" + value.firstname + "&lastname=" + value.lastname;
creds = creds + "&message=" + value.message + "&email=" + value.email;
//Send email
window.fetch(this.urlAttr, {
method: 'POST',
headers: {
"Content-type": "application/x-www-form-urlencoded; charset=UTF-8"
},
body: creds
})
.then(function (data) {
var res = data.text();
res.then(function (message) {
result.innerHTML = message;
//Show card message and hide progress
result_card.style.display = "block";
progress.style.display = "none";
});
})
.catch(function (error) {
result.innerHTML = "Error al procesar el formulario";
//Show card message and hide progress
result_card.style.display = "block";
progress.style.display = "none";
});
};
ContactForm = __decorate([
core_1.Component({
selector: 'contact-form',
directives: [common_1.FORM_DIRECTIVES],
template: DEFAULT_TEMPLATE
}),
__metadata('design:paramtypes', [(typeof (_a = typeof common_1.FormBuilder !== 'undefined' && common_1.FormBuilder) === 'function' && _a) || Object, (typeof (_b = typeof core_1.ElementRef !== 'undefined' && core_1.ElementRef) === 'function' && _b) || Object])
], ContactForm);
return ContactForm;
var _a, _b;
}());
exports_1("ContactForm", ContactForm);
}
}
});
//# sourceMappingURL=contact.js.map