@neocomplexx/ngx-neo-directives-mat
Version:
60 lines • 7.05 kB
JavaScript
import { __decorate, __metadata } from "tslib";
import { Directive, ElementRef, Input, HostListener } from '@angular/core';
var NeoMatchHeightDirective = /** @class */ (function () {
function NeoMatchHeightDirective(el) {
this.el = el;
}
NeoMatchHeightDirective.prototype.onResize = function () {
this.matchHeight(this.el.nativeElement, this.matchHeightClassName);
};
NeoMatchHeightDirective.prototype.ngAfterViewChecked = function () {
this.matchHeight(this.el.nativeElement, this.matchHeightClassName);
};
NeoMatchHeightDirective.prototype.matchHeight = function (parent, className) {
if (!parent) {
return;
}
// step 1: find all the child elements with the selected class name
var children = parent.getElementsByClassName(className);
if (!children) {
return;
}
// step 1b: reset all children height
Array.from(children).forEach(function (x) {
x.style.height = 'initial';
});
// step 2a: get all the child elements heights
var itemHeights = Array.from(children)
.map(function (x) { return x.getBoundingClientRect().height; });
// step 2b: find out the tallest
var maxHeight = itemHeights.reduce(function (prev, curr) {
return curr > prev ? curr : prev;
}, 0);
// step 3: update all the child elements to the tallest height
Array.from(children)
.forEach(function (x) { return x.style.height = maxHeight + "px"; });
};
NeoMatchHeightDirective.ctorParameters = function () { return [
{ type: ElementRef }
]; };
__decorate([
Input('neoMatchHeight'),
__metadata("design:type", String)
], NeoMatchHeightDirective.prototype, "matchHeightClassName", void 0);
__decorate([
HostListener('window:resize'),
__metadata("design:type", Function),
__metadata("design:paramtypes", []),
__metadata("design:returntype", void 0)
], NeoMatchHeightDirective.prototype, "onResize", null);
NeoMatchHeightDirective = __decorate([
Directive({
// tslint:disable-next-line:directive-selector
selector: '[neoMatchHeight]'
}),
__metadata("design:paramtypes", [ElementRef])
], NeoMatchHeightDirective);
return NeoMatchHeightDirective;
}());
export { NeoMatchHeightDirective };
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibmVvLW1hdGNoaGVpZ2h0LmRpcmVjdGl2ZS5qcyIsInNvdXJjZVJvb3QiOiJuZzovL0BuZW9jb21wbGV4eC9uZ3gtbmVvLWRpcmVjdGl2ZXMtbWF0LyIsInNvdXJjZXMiOlsibGliL25lby1tYXRjaGhlaWdodC5kaXJlY3RpdmUudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IjtBQUFBLE9BQU8sRUFDSCxTQUFTLEVBQUUsVUFBVSxFQUNyQixLQUFLLEVBQUUsWUFBWSxFQUN0QixNQUFNLGVBQWUsQ0FBQztBQU92QjtJQU9JLGlDQUFvQixFQUFjO1FBQWQsT0FBRSxHQUFGLEVBQUUsQ0FBWTtJQUNsQyxDQUFDO0lBTDhCLDBDQUFRLEdBQVI7UUFDM0IsSUFBSSxDQUFDLFdBQVcsQ0FBQyxJQUFJLENBQUMsRUFBRSxDQUFDLGFBQWEsRUFBRSxJQUFJLENBQUMsb0JBQW9CLENBQUMsQ0FBQztJQUN2RSxDQUFDO0lBS0Qsb0RBQWtCLEdBQWxCO1FBQ0ksSUFBSSxDQUFDLFdBQVcsQ0FBQyxJQUFJLENBQUMsRUFBRSxDQUFDLGFBQWEsRUFBRSxJQUFJLENBQUMsb0JBQW9CLENBQUMsQ0FBQztJQUN2RSxDQUFDO0lBRU0sNkNBQVcsR0FBbEIsVUFBbUIsTUFBbUIsRUFBRSxTQUFpQjtRQUNyRCxJQUFJLENBQUMsTUFBTSxFQUFFO1lBQUUsT0FBTztTQUFFO1FBRXhCLG1FQUFtRTtRQUNuRSxJQUFNLFFBQVEsR0FBRyxNQUFNLENBQUMsc0JBQXNCLENBQUMsU0FBUyxDQUFDLENBQUM7UUFFMUQsSUFBSSxDQUFDLFFBQVEsRUFBRTtZQUFFLE9BQU87U0FBRTtRQUUxQixxQ0FBcUM7UUFDckMsS0FBSyxDQUFDLElBQUksQ0FBQyxRQUFRLENBQUMsQ0FBQyxPQUFPLENBQUMsVUFBQyxDQUFjO1lBQ3hDLENBQUMsQ0FBQyxLQUFLLENBQUMsTUFBTSxHQUFHLFNBQVMsQ0FBQztRQUMvQixDQUFDLENBQUMsQ0FBQztRQUVILDhDQUE4QztRQUM5QyxJQUFNLFdBQVcsR0FBRyxLQUFLLENBQUMsSUFBSSxDQUFDLFFBQVEsQ0FBQzthQUNuQyxHQUFHLENBQUMsVUFBQSxDQUFDLElBQUksT0FBQSxDQUFDLENBQUMscUJBQXFCLEVBQUUsQ0FBQyxNQUFNLEVBQWhDLENBQWdDLENBQUMsQ0FBQztRQUVoRCxnQ0FBZ0M7UUFDaEMsSUFBTSxTQUFTLEdBQUcsV0FBVyxDQUFDLE1BQU0sQ0FBQyxVQUFDLElBQUksRUFBRSxJQUFJO1lBQzVDLE9BQU8sSUFBSSxHQUFHLElBQUksQ0FBQyxDQUFDLENBQUMsSUFBSSxDQUFDLENBQUMsQ0FBQyxJQUFJLENBQUM7UUFDckMsQ0FBQyxFQUFFLENBQUMsQ0FBQyxDQUFDO1FBRU4sOERBQThEO1FBQzlELEtBQUssQ0FBQyxJQUFJLENBQUMsUUFBUSxDQUFDO2FBQ2YsT0FBTyxDQUFDLFVBQUMsQ0FBYyxJQUFLLE9BQUEsQ0FBQyxDQUFDLEtBQUssQ0FBQyxNQUFNLEdBQU0sU0FBUyxPQUFJLEVBQWpDLENBQWlDLENBQUMsQ0FBQztJQUN4RSxDQUFDOztnQkFoQ3VCLFVBQVU7O0lBTlQ7UUFBeEIsS0FBSyxDQUFDLGdCQUFnQixDQUFDOzt5RUFBOEI7SUFFdkI7UUFBOUIsWUFBWSxDQUFDLGVBQWUsQ0FBQzs7OzsyREFFN0I7SUFMUSx1QkFBdUI7UUFKbkMsU0FBUyxDQUFDO1lBQ1AsOENBQThDO1lBQzlDLFFBQVEsRUFBRSxrQkFBa0I7U0FDL0IsQ0FBQzt5Q0FRMEIsVUFBVTtPQVB6Qix1QkFBdUIsQ0F3Q25DO0lBQUQsOEJBQUM7Q0FBQSxBQXhDRCxJQXdDQztTQXhDWSx1QkFBdUIiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQge1xyXG4gICAgRGlyZWN0aXZlLCBFbGVtZW50UmVmLFxyXG4gICAgSW5wdXQsIEhvc3RMaXN0ZW5lclxyXG59IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xyXG5pbXBvcnQgeyBBZnRlclZpZXdDaGVja2VkIH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XHJcblxyXG5ARGlyZWN0aXZlKHtcclxuICAgIC8vIHRzbGludDpkaXNhYmxlLW5leHQtbGluZTpkaXJlY3RpdmUtc2VsZWN0b3JcclxuICAgIHNlbGVjdG9yOiAnW25lb01hdGNoSGVpZ2h0XSdcclxufSlcclxuZXhwb3J0IGNsYXNzIE5lb01hdGNoSGVpZ2h0RGlyZWN0aXZlIGltcGxlbWVudHMgQWZ0ZXJWaWV3Q2hlY2tlZCB7XHJcbiAgICBASW5wdXQoJ25lb01hdGNoSGVpZ2h0JykgbWF0Y2hIZWlnaHRDbGFzc05hbWU6IHN0cmluZztcclxuXHJcbiAgICBASG9zdExpc3RlbmVyKCd3aW5kb3c6cmVzaXplJykgb25SZXNpemUoKSB7XHJcbiAgICAgICAgdGhpcy5tYXRjaEhlaWdodCh0aGlzLmVsLm5hdGl2ZUVsZW1lbnQsIHRoaXMubWF0Y2hIZWlnaHRDbGFzc05hbWUpO1xyXG4gICAgfVxyXG5cclxuICAgIGNvbnN0cnVjdG9yKHByaXZhdGUgZWw6IEVsZW1lbnRSZWYpIHtcclxuICAgIH1cclxuXHJcbiAgICBuZ0FmdGVyVmlld0NoZWNrZWQoKSB7XHJcbiAgICAgICAgdGhpcy5tYXRjaEhlaWdodCh0aGlzLmVsLm5hdGl2ZUVsZW1lbnQsIHRoaXMubWF0Y2hIZWlnaHRDbGFzc05hbWUpO1xyXG4gICAgfVxyXG5cclxuICAgIHB1YmxpYyBtYXRjaEhlaWdodChwYXJlbnQ6IEhUTUxFbGVtZW50LCBjbGFzc05hbWU6IHN0cmluZykge1xyXG4gICAgICAgIGlmICghcGFyZW50KSB7IHJldHVybjsgfVxyXG5cclxuICAgICAgICAvLyBzdGVwIDE6IGZpbmQgYWxsIHRoZSBjaGlsZCBlbGVtZW50cyB3aXRoIHRoZSBzZWxlY3RlZCBjbGFzcyBuYW1lXHJcbiAgICAgICAgY29uc3QgY2hpbGRyZW4gPSBwYXJlbnQuZ2V0RWxlbWVudHNCeUNsYXNzTmFtZShjbGFzc05hbWUpO1xyXG5cclxuICAgICAgICBpZiAoIWNoaWxkcmVuKSB7IHJldHVybjsgfVxyXG5cclxuICAgICAgICAvLyBzdGVwIDFiOiByZXNldCBhbGwgY2hpbGRyZW4gaGVpZ2h0XHJcbiAgICAgICAgQXJyYXkuZnJvbShjaGlsZHJlbikuZm9yRWFjaCgoeDogSFRNTEVsZW1lbnQpID0+IHtcclxuICAgICAgICAgICAgeC5zdHlsZS5oZWlnaHQgPSAnaW5pdGlhbCc7XHJcbiAgICAgICAgfSk7XHJcblxyXG4gICAgICAgIC8vIHN0ZXAgMmE6IGdldCBhbGwgdGhlIGNoaWxkIGVsZW1lbnRzIGhlaWdodHNcclxuICAgICAgICBjb25zdCBpdGVtSGVpZ2h0cyA9IEFycmF5LmZyb20oY2hpbGRyZW4pXHJcbiAgICAgICAgICAgIC5tYXAoeCA9PiB4LmdldEJvdW5kaW5nQ2xpZW50UmVjdCgpLmhlaWdodCk7XHJcblxyXG4gICAgICAgIC8vIHN0ZXAgMmI6IGZpbmQgb3V0IHRoZSB0YWxsZXN0XHJcbiAgICAgICAgY29uc3QgbWF4SGVpZ2h0ID0gaXRlbUhlaWdodHMucmVkdWNlKChwcmV2LCBjdXJyKSA9PiB7XHJcbiAgICAgICAgICAgIHJldHVybiBjdXJyID4gcHJldiA/IGN1cnIgOiBwcmV2O1xyXG4gICAgICAgIH0sIDApO1xyXG5cclxuICAgICAgICAvLyBzdGVwIDM6IHVwZGF0ZSBhbGwgdGhlIGNoaWxkIGVsZW1lbnRzIHRvIHRoZSB0YWxsZXN0IGhlaWdodFxyXG4gICAgICAgIEFycmF5LmZyb20oY2hpbGRyZW4pXHJcbiAgICAgICAgICAgIC5mb3JFYWNoKCh4OiBIVE1MRWxlbWVudCkgPT4geC5zdHlsZS5oZWlnaHQgPSBgJHttYXhIZWlnaHR9cHhgKTtcclxuICAgIH1cclxufVxyXG4iXX0=