nereo-material
Version:
This project contains [Material Design](https://material.io/design/) components built with Angular and Angular Material. Its goal is to provide components that are not yet implemented in [Angular Material](https://material.angular.io/).
80 lines • 9.77 kB
JavaScript
import { __decorate, __metadata } from "tslib";
import { Component } from '@angular/core';
var BackdropComponent = /** @class */ (function () {
function BackdropComponent() {
this.backLayerMinHeight = 56;
this.frontLayerMinHeight = 42;
}
BackdropComponent.prototype.reveal = function () {
var backLayer = this.getBackLayer();
var frontLayer = this.getFrontLayer();
var toolbar = this.getToolbar();
var from = frontLayer.offsetTop;
var to = toolbar.offsetHeight + backLayer.offsetHeight;
this.animateFrontLayerDown(frontLayer, from, to);
};
BackdropComponent.prototype.conceal = function () {
var frontLayer = this.getFrontLayer();
var from = frontLayer.offsetTop;
var to = this.backLayerMinHeight;
this.animateFrontLayerUp(frontLayer, from, to);
};
BackdropComponent.prototype.getBackLayer = function () {
return document.querySelector('nm-backdrop-back-layer-content');
};
BackdropComponent.prototype.getFrontLayer = function () {
return document.querySelector('nm-backdrop-front-layer');
};
BackdropComponent.prototype.getToolbar = function () {
return document.querySelector('mat-toolbar');
};
BackdropComponent.prototype.getWindowHeight = function () {
return document.documentElement.clientHeight;
};
// TODO Refactor animations to single function
BackdropComponent.prototype.animateFrontLayerDown = function (frontLayer, from, to) {
var pos = from;
var maxPos = this.getWindowHeight() - this.frontLayerMinHeight;
var interval = setInterval(frame, 3);
function frame() {
if (pos >= to || pos >= maxPos) {
if (to >= maxPos) {
frontLayer.style.top = maxPos + 'px';
}
else {
frontLayer.style.top = to + 'px';
}
clearInterval(interval);
}
else {
pos = to > from ? pos + 10 : pos - 10;
frontLayer.style.top = pos + 'px';
}
}
};
BackdropComponent.prototype.animateFrontLayerUp = function (frontLayer, from, to) {
var pos = from;
var interval = setInterval(frame, 3);
function frame() {
if (pos <= to) {
frontLayer.style.top = to + 'px';
clearInterval(interval);
}
else {
pos = to > from ? pos + 10 : pos - 10;
frontLayer.style.top = pos + 'px';
}
}
};
BackdropComponent = __decorate([
Component({
selector: 'nm-backdrop',
template: "\n <ng-content select=\"nm-backdrop-back-layer\"></ng-content>\n <ng-content select=\"nm-backdrop-front-layer\"></ng-content>\n ",
styles: ["\n :host {\n width: 100%;\n }\n "]
}),
__metadata("design:paramtypes", [])
], BackdropComponent);
return BackdropComponent;
}());
export { BackdropComponent };
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYmFja2Ryb3AuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6Im5nOi8vbmVyZW8tbWF0ZXJpYWwvIiwic291cmNlcyI6WyJsaWIvYmFja2Ryb3AvYmFja2Ryb3AuY29tcG9uZW50LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7QUFBQSxPQUFPLEVBQUUsU0FBUyxFQUFFLE1BQU0sZUFBZSxDQUFDO0FBYzFDO0lBSUU7UUFIUSx1QkFBa0IsR0FBVyxFQUFFLENBQUM7UUFDaEMsd0JBQW1CLEdBQVUsRUFBRSxDQUFDO0lBRXhCLENBQUM7SUFFVixrQ0FBTSxHQUFiO1FBQ0UsSUFBSSxTQUFTLEdBQUcsSUFBSSxDQUFDLFlBQVksRUFBRSxDQUFDO1FBQ3BDLElBQUksVUFBVSxHQUFHLElBQUksQ0FBQyxhQUFhLEVBQUUsQ0FBQztRQUN0QyxJQUFJLE9BQU8sR0FBRyxJQUFJLENBQUMsVUFBVSxFQUFFLENBQUM7UUFFaEMsSUFBSSxJQUFJLEdBQUcsVUFBVSxDQUFDLFNBQVMsQ0FBQztRQUNoQyxJQUFJLEVBQUUsR0FBRyxPQUFPLENBQUMsWUFBWSxHQUFHLFNBQVMsQ0FBQyxZQUFZLENBQUM7UUFDdkQsSUFBSSxDQUFDLHFCQUFxQixDQUFDLFVBQVUsRUFBRSxJQUFJLEVBQUUsRUFBRSxDQUFDLENBQUM7SUFDbkQsQ0FBQztJQUVNLG1DQUFPLEdBQWQ7UUFDRSxJQUFJLFVBQVUsR0FBRyxJQUFJLENBQUMsYUFBYSxFQUFFLENBQUM7UUFFdEMsSUFBSSxJQUFJLEdBQUcsVUFBVSxDQUFDLFNBQVMsQ0FBQztRQUNoQyxJQUFJLEVBQUUsR0FBRyxJQUFJLENBQUMsa0JBQWtCLENBQUM7UUFDakMsSUFBSSxDQUFDLG1CQUFtQixDQUFDLFVBQVUsRUFBRSxJQUFJLEVBQUUsRUFBRSxDQUFDLENBQUM7SUFDakQsQ0FBQztJQUVPLHdDQUFZLEdBQXBCO1FBQ0UsT0FBb0IsUUFBUSxDQUFDLGFBQWEsQ0FBQyxnQ0FBZ0MsQ0FBQyxDQUFBO0lBQzlFLENBQUM7SUFFTyx5Q0FBYSxHQUFyQjtRQUNFLE9BQW9CLFFBQVEsQ0FBQyxhQUFhLENBQUMseUJBQXlCLENBQUMsQ0FBQztJQUN4RSxDQUFDO0lBRU8sc0NBQVUsR0FBbEI7UUFDRSxPQUFvQixRQUFRLENBQUMsYUFBYSxDQUFDLGFBQWEsQ0FBQyxDQUFDO0lBQzVELENBQUM7SUFFTywyQ0FBZSxHQUF2QjtRQUNFLE9BQU8sUUFBUSxDQUFDLGVBQWUsQ0FBQyxZQUFZLENBQUM7SUFDL0MsQ0FBQztJQUVELDhDQUE4QztJQUN0QyxpREFBcUIsR0FBN0IsVUFBOEIsVUFBdUIsRUFBRSxJQUFZLEVBQUUsRUFBVTtRQUM3RSxJQUFJLEdBQUcsR0FBRyxJQUFJLENBQUM7UUFDZixJQUFJLE1BQU0sR0FBRyxJQUFJLENBQUMsZUFBZSxFQUFFLEdBQUcsSUFBSSxDQUFDLG1CQUFtQixDQUFDO1FBRS9ELElBQUksUUFBUSxHQUFHLFdBQVcsQ0FBQyxLQUFLLEVBQUUsQ0FBQyxDQUFDLENBQUM7UUFFckMsU0FBUyxLQUFLO1lBQ1osSUFBSSxHQUFHLElBQUksRUFBRSxJQUFJLEdBQUcsSUFBSSxNQUFNLEVBQUU7Z0JBQzlCLElBQUksRUFBRSxJQUFJLE1BQU0sRUFBQztvQkFDZixVQUFVLENBQUMsS0FBSyxDQUFDLEdBQUcsR0FBRyxNQUFNLEdBQUcsSUFBSSxDQUFDO2lCQUN0QztxQkFDSTtvQkFDSCxVQUFVLENBQUMsS0FBSyxDQUFDLEdBQUcsR0FBRyxFQUFFLEdBQUcsSUFBSSxDQUFDO2lCQUNsQztnQkFFRCxhQUFhLENBQUMsUUFBUSxDQUFDLENBQUM7YUFDekI7aUJBQU07Z0JBQ0wsR0FBRyxHQUFHLEVBQUUsR0FBRyxJQUFJLENBQUMsQ0FBQyxDQUFDLEdBQUcsR0FBRyxFQUFFLENBQUMsQ0FBQyxDQUFDLEdBQUcsR0FBRSxFQUFFLENBQUM7Z0JBQ3JDLFVBQVUsQ0FBQyxLQUFLLENBQUMsR0FBRyxHQUFHLEdBQUcsR0FBRyxJQUFJLENBQUM7YUFDbkM7UUFDSCxDQUFDO0lBQ0gsQ0FBQztJQUVPLCtDQUFtQixHQUEzQixVQUE0QixVQUF1QixFQUFFLElBQVksRUFBRSxFQUFVO1FBQzNFLElBQUksR0FBRyxHQUFHLElBQUksQ0FBQztRQUNmLElBQUksUUFBUSxHQUFHLFdBQVcsQ0FBQyxLQUFLLEVBQUUsQ0FBQyxDQUFDLENBQUM7UUFFckMsU0FBUyxLQUFLO1lBQ1YsSUFBSSxHQUFHLElBQUksRUFBRSxFQUFFO2dCQUNiLFVBQVUsQ0FBQyxLQUFLLENBQUMsR0FBRyxHQUFHLEVBQUUsR0FBRyxJQUFJLENBQUM7Z0JBQ2pDLGFBQWEsQ0FBQyxRQUFRLENBQUMsQ0FBQzthQUN6QjtpQkFBTTtnQkFDSCxHQUFHLEdBQUcsRUFBRSxHQUFHLElBQUksQ0FBQyxDQUFDLENBQUMsR0FBRyxHQUFHLEVBQUUsQ0FBQyxDQUFDLENBQUMsR0FBRyxHQUFFLEVBQUUsQ0FBQztnQkFDckMsVUFBVSxDQUFDLEtBQUssQ0FBQyxHQUFHLEdBQUcsR0FBRyxHQUFHLElBQUksQ0FBQzthQUNyQztRQUNMLENBQUM7SUFDSCxDQUFDO0lBN0VVLGlCQUFpQjtRQVo3QixTQUFTLENBQUM7WUFDVCxRQUFRLEVBQUUsYUFBYTtZQUN2QixRQUFRLEVBQUUseUlBR1Q7cUJBQ1EsZ0RBSVI7U0FDRixDQUFDOztPQUNXLGlCQUFpQixDQThFN0I7SUFBRCx3QkFBQztDQUFBLEFBOUVELElBOEVDO1NBOUVZLGlCQUFpQiIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbXBvbmVudCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICdubS1iYWNrZHJvcCcsXG4gIHRlbXBsYXRlOiBgXG4gICAgPG5nLWNvbnRlbnQgc2VsZWN0PVwibm0tYmFja2Ryb3AtYmFjay1sYXllclwiPjwvbmctY29udGVudD5cbiAgICA8bmctY29udGVudCBzZWxlY3Q9XCJubS1iYWNrZHJvcC1mcm9udC1sYXllclwiPjwvbmctY29udGVudD5cbiAgYCxcbiAgc3R5bGVzOiBbYFxuICAgIDpob3N0IHtcbiAgICAgICAgd2lkdGg6IDEwMCU7XG4gICAgfVxuICBgXVxufSlcbmV4cG9ydCBjbGFzcyBCYWNrZHJvcENvbXBvbmVudCB7XG4gIHByaXZhdGUgYmFja0xheWVyTWluSGVpZ2h0OiBudW1iZXIgPSA1NjtcbiAgcHJpdmF0ZSBmcm9udExheWVyTWluSGVpZ2h0Om51bWJlciA9IDQyO1xuXG4gIGNvbnN0cnVjdG9yKCkgeyB9XG5cbiAgcHVibGljIHJldmVhbCgpe1xuICAgIGxldCBiYWNrTGF5ZXIgPSB0aGlzLmdldEJhY2tMYXllcigpO1xuICAgIGxldCBmcm9udExheWVyID0gdGhpcy5nZXRGcm9udExheWVyKCk7XG4gICAgbGV0IHRvb2xiYXIgPSB0aGlzLmdldFRvb2xiYXIoKTtcblxuICAgIGxldCBmcm9tID0gZnJvbnRMYXllci5vZmZzZXRUb3A7XG4gICAgbGV0IHRvID0gdG9vbGJhci5vZmZzZXRIZWlnaHQgKyBiYWNrTGF5ZXIub2Zmc2V0SGVpZ2h0O1xuICAgIHRoaXMuYW5pbWF0ZUZyb250TGF5ZXJEb3duKGZyb250TGF5ZXIsIGZyb20sIHRvKTtcbiAgfVxuXG4gIHB1YmxpYyBjb25jZWFsKCl7XG4gICAgbGV0IGZyb250TGF5ZXIgPSB0aGlzLmdldEZyb250TGF5ZXIoKTtcblxuICAgIGxldCBmcm9tID0gZnJvbnRMYXllci5vZmZzZXRUb3A7XG4gICAgbGV0IHRvID0gdGhpcy5iYWNrTGF5ZXJNaW5IZWlnaHQ7XG4gICAgdGhpcy5hbmltYXRlRnJvbnRMYXllclVwKGZyb250TGF5ZXIsIGZyb20sIHRvKTtcbiAgfVxuXG4gIHByaXZhdGUgZ2V0QmFja0xheWVyKCk6IEhUTUxFbGVtZW50IHtcbiAgICByZXR1cm4gPEhUTUxFbGVtZW50PmRvY3VtZW50LnF1ZXJ5U2VsZWN0b3IoJ25tLWJhY2tkcm9wLWJhY2stbGF5ZXItY29udGVudCcpXG4gIH1cblxuICBwcml2YXRlIGdldEZyb250TGF5ZXIoKTogSFRNTEVsZW1lbnQge1xuICAgIHJldHVybiA8SFRNTEVsZW1lbnQ+ZG9jdW1lbnQucXVlcnlTZWxlY3Rvcignbm0tYmFja2Ryb3AtZnJvbnQtbGF5ZXInKTtcbiAgfVxuXG4gIHByaXZhdGUgZ2V0VG9vbGJhcigpOiBIVE1MRWxlbWVudCB7XG4gICAgcmV0dXJuIDxIVE1MRWxlbWVudD5kb2N1bWVudC5xdWVyeVNlbGVjdG9yKCdtYXQtdG9vbGJhcicpO1xuICB9XG5cbiAgcHJpdmF0ZSBnZXRXaW5kb3dIZWlnaHQoKTogbnVtYmVyIHtcbiAgICByZXR1cm4gZG9jdW1lbnQuZG9jdW1lbnRFbGVtZW50LmNsaWVudEhlaWdodDtcbiAgfVxuXG4gIC8vIFRPRE8gUmVmYWN0b3IgYW5pbWF0aW9ucyB0byBzaW5nbGUgZnVuY3Rpb25cbiAgcHJpdmF0ZSBhbmltYXRlRnJvbnRMYXllckRvd24oZnJvbnRMYXllcjogSFRNTEVsZW1lbnQsIGZyb206IG51bWJlciwgdG86IG51bWJlcil7XG4gICAgbGV0IHBvcyA9IGZyb207XG4gICAgbGV0IG1heFBvcyA9IHRoaXMuZ2V0V2luZG93SGVpZ2h0KCkgLSB0aGlzLmZyb250TGF5ZXJNaW5IZWlnaHQ7XG5cbiAgICBsZXQgaW50ZXJ2YWwgPSBzZXRJbnRlcnZhbChmcmFtZSwgMyk7XG4gIFxuICAgIGZ1bmN0aW9uIGZyYW1lKCkge1xuICAgICAgaWYgKHBvcyA+PSB0byB8fCBwb3MgPj0gbWF4UG9zKSB7XG4gICAgICAgIGlmICh0byA+PSBtYXhQb3Mpe1xuICAgICAgICAgIGZyb250TGF5ZXIuc3R5bGUudG9wID0gbWF4UG9zICsgJ3B4JztcbiAgICAgICAgfVxuICAgICAgICBlbHNlIHtcbiAgICAgICAgICBmcm9udExheWVyLnN0eWxlLnRvcCA9IHRvICsgJ3B4JztcbiAgICAgICAgfVxuICAgICAgICBcbiAgICAgICAgY2xlYXJJbnRlcnZhbChpbnRlcnZhbCk7XG4gICAgICB9IGVsc2Uge1xuICAgICAgICBwb3MgPSB0byA+IGZyb20gPyBwb3MgKyAxMCA6IHBvcyAtMTA7ICAgXG4gICAgICAgIGZyb250TGF5ZXIuc3R5bGUudG9wID0gcG9zICsgJ3B4JzsgXG4gICAgICB9XG4gICAgfVxuICB9XG5cbiAgcHJpdmF0ZSBhbmltYXRlRnJvbnRMYXllclVwKGZyb250TGF5ZXI6IEhUTUxFbGVtZW50LCBmcm9tOiBudW1iZXIsIHRvOiBudW1iZXIpe1xuICAgIGxldCBwb3MgPSBmcm9tO1xuICAgIGxldCBpbnRlcnZhbCA9IHNldEludGVydmFsKGZyYW1lLCAzKTtcblxuICAgIGZ1bmN0aW9uIGZyYW1lKCkge1xuICAgICAgICBpZiAocG9zIDw9IHRvKSB7XG4gICAgICAgICAgZnJvbnRMYXllci5zdHlsZS50b3AgPSB0byArICdweCc7ICAgXG4gICAgICAgICAgY2xlYXJJbnRlcnZhbChpbnRlcnZhbCk7XG4gICAgICAgIH0gZWxzZSB7XG4gICAgICAgICAgICBwb3MgPSB0byA+IGZyb20gPyBwb3MgKyAxMCA6IHBvcyAtMTA7ICAgXG4gICAgICAgICAgICBmcm9udExheWVyLnN0eWxlLnRvcCA9IHBvcyArICdweCc7IFxuICAgICAgICB9XG4gICAgfVxuICB9XG59XG4iXX0=