@cdf/cdf-ng-contact-us-form
Version:
118 lines • 5.34 kB
JavaScript
//BASED ON:
// - http://richardvenneman.github.io/floatl/example/
// - https://ui8.net/account/signin
"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 FloatLabelDirective = (function () {
function FloatLabelDirective(element) {
this.floatContainerClass = 'floatLabelContainer';
this.floatTextAreaClass = 'floatLabelContainer__textarea';
this.animateClass = 'animate';
this.floatLabelClass = 'floatLabelContainer__label';
this.floatInputClass = 'floatLabelContainer__input';
this.focusedClass = 'floatLabelContainer--focused';
this.hasValueClass = 'floatLabelContainer--hasValue';
this.elementRef = element;
}
;
FloatLabelDirective.prototype.ngOnInit = function () {
this.nativeElement = this.elementRef.nativeElement;
this.labelElement = this.nativeElement.querySelector('label');
this.formElement = this.nativeElement.querySelector('input') || this.nativeElement.querySelector('textarea');
// console.log('elementRef:', this.elementRef);
// console.log('nativeElement:', this.elementRef.nativeElement);
// console.log('labelElement', this.labelElement);
// console.log('formElement', this.formElement);
// console.log('------------------------------------------------------------');
//SET CLASSES TO APPLY FLOATING LABEL
this.addClass(this.nativeElement, this.floatContainerClass);
this.addClass(this.nativeElement, this.animateClass);
this.addClass(this.labelElement, this.floatLabelClass);
this.addClass(this.formElement, this.floatInputClass);
//IF TEXTAREA, THEN APPLY CLASS SPECIFIC FOR TEXTAREAS
if (this.nativeElement.querySelector('textarea')) {
this.addClass(this.nativeElement, this.floatTextAreaClass);
}
this.bindListeners();
};
;
FloatLabelDirective.prototype.ngOnDestroy = function () {
this.removeEventListener(this.formElement, 'focus');
this.removeEventListener(this.formElement, 'blur');
};
;
FloatLabelDirective.prototype.bindListeners = function () {
var _this = this;
this.addEventListener(this.formElement, 'focus', function () {
_this.addClass(_this.nativeElement, _this.focusedClass);
});
this.addEventListener(this.formElement, 'blur', function () {
if (_this.formElement.value === '') {
_this.removeClass(_this.nativeElement, _this.focusedClass);
_this.removeClass(_this.nativeElement, _this.hasValueClass);
}
else {
_this.removeClass(_this.nativeElement, _this.focusedClass);
_this.addClass(_this.nativeElement, _this.hasValueClass);
}
});
};
;
FloatLabelDirective.prototype.addEventListener = function (element, eventName, handler) {
if (element) {
if (element.addEventListener) {
element.addEventListener(eventName, handler);
}
else {
element.attachEvent("on%{eventName}", function () {
handler.call(element);
});
}
}
};
;
FloatLabelDirective.prototype.removeEventListener = function (element, eventName) {
if (element && element.removeEventListener) {
element.removeEventListener(eventName);
}
};
;
FloatLabelDirective.prototype.addClass = function (element, className) {
if (element.classList) {
element.classList.add(className);
}
else {
element.className += " %{className}";
}
};
;
FloatLabelDirective.prototype.removeClass = function (element, className) {
if (element.classList) {
element.classList.remove(className);
}
else {
var re = new RegExp('(^|\\b)' + className.split(' ').join('|') + '(\\b|$)', 'gi');
element.className = element.className.replace(re, ' ');
}
};
;
return FloatLabelDirective;
}());
FloatLabelDirective = __decorate([
core_1.Directive({
selector: '[floatLabel]'
}),
__metadata("design:paramtypes", [core_1.ElementRef])
], FloatLabelDirective);
exports.FloatLabelDirective = FloatLabelDirective;
//# sourceMappingURL=float-label.directive.js.map