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/).
86 lines • 9.3 kB
JavaScript
import { __decorate, __metadata } from "tslib";
import { Component } from '@angular/core';
let BackdropComponent = class BackdropComponent {
constructor() {
this.backLayerMinHeight = 56;
this.frontLayerMinHeight = 42;
}
reveal() {
let backLayer = this.getBackLayer();
let frontLayer = this.getFrontLayer();
let toolbar = this.getToolbar();
let from = frontLayer.offsetTop;
let to = toolbar.offsetHeight + backLayer.offsetHeight;
this.animateFrontLayerDown(frontLayer, from, to);
}
conceal() {
let frontLayer = this.getFrontLayer();
let from = frontLayer.offsetTop;
let to = this.backLayerMinHeight;
this.animateFrontLayerUp(frontLayer, from, to);
}
getBackLayer() {
return document.querySelector('nm-backdrop-back-layer-content');
}
getFrontLayer() {
return document.querySelector('nm-backdrop-front-layer');
}
getToolbar() {
return document.querySelector('mat-toolbar');
}
getWindowHeight() {
return document.documentElement.clientHeight;
}
// TODO Refactor animations to single function
animateFrontLayerDown(frontLayer, from, to) {
let pos = from;
let maxPos = this.getWindowHeight() - this.frontLayerMinHeight;
let 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';
}
}
}
animateFrontLayerUp(frontLayer, from, to) {
let pos = from;
let 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: `
<ng-content select="nm-backdrop-back-layer"></ng-content>
<ng-content select="nm-backdrop-front-layer"></ng-content>
`,
styles: [`
:host {
width: 100%;
}
`]
}),
__metadata("design:paramtypes", [])
], BackdropComponent);
export { BackdropComponent };
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYmFja2Ryb3AuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6Im5nOi8vbmVyZW8tbWF0ZXJpYWwvIiwic291cmNlcyI6WyJsaWIvYmFja2Ryb3AvYmFja2Ryb3AuY29tcG9uZW50LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7QUFBQSxPQUFPLEVBQUUsU0FBUyxFQUFFLE1BQU0sZUFBZSxDQUFDO0FBYzFDLElBQWEsaUJBQWlCLEdBQTlCLE1BQWEsaUJBQWlCO0lBSTVCO1FBSFEsdUJBQWtCLEdBQVcsRUFBRSxDQUFDO1FBQ2hDLHdCQUFtQixHQUFVLEVBQUUsQ0FBQztJQUV4QixDQUFDO0lBRVYsTUFBTTtRQUNYLElBQUksU0FBUyxHQUFHLElBQUksQ0FBQyxZQUFZLEVBQUUsQ0FBQztRQUNwQyxJQUFJLFVBQVUsR0FBRyxJQUFJLENBQUMsYUFBYSxFQUFFLENBQUM7UUFDdEMsSUFBSSxPQUFPLEdBQUcsSUFBSSxDQUFDLFVBQVUsRUFBRSxDQUFDO1FBRWhDLElBQUksSUFBSSxHQUFHLFVBQVUsQ0FBQyxTQUFTLENBQUM7UUFDaEMsSUFBSSxFQUFFLEdBQUcsT0FBTyxDQUFDLFlBQVksR0FBRyxTQUFTLENBQUMsWUFBWSxDQUFDO1FBQ3ZELElBQUksQ0FBQyxxQkFBcUIsQ0FBQyxVQUFVLEVBQUUsSUFBSSxFQUFFLEVBQUUsQ0FBQyxDQUFDO0lBQ25ELENBQUM7SUFFTSxPQUFPO1FBQ1osSUFBSSxVQUFVLEdBQUcsSUFBSSxDQUFDLGFBQWEsRUFBRSxDQUFDO1FBRXRDLElBQUksSUFBSSxHQUFHLFVBQVUsQ0FBQyxTQUFTLENBQUM7UUFDaEMsSUFBSSxFQUFFLEdBQUcsSUFBSSxDQUFDLGtCQUFrQixDQUFDO1FBQ2pDLElBQUksQ0FBQyxtQkFBbUIsQ0FBQyxVQUFVLEVBQUUsSUFBSSxFQUFFLEVBQUUsQ0FBQyxDQUFDO0lBQ2pELENBQUM7SUFFTyxZQUFZO1FBQ2xCLE9BQW9CLFFBQVEsQ0FBQyxhQUFhLENBQUMsZ0NBQWdDLENBQUMsQ0FBQTtJQUM5RSxDQUFDO0lBRU8sYUFBYTtRQUNuQixPQUFvQixRQUFRLENBQUMsYUFBYSxDQUFDLHlCQUF5QixDQUFDLENBQUM7SUFDeEUsQ0FBQztJQUVPLFVBQVU7UUFDaEIsT0FBb0IsUUFBUSxDQUFDLGFBQWEsQ0FBQyxhQUFhLENBQUMsQ0FBQztJQUM1RCxDQUFDO0lBRU8sZUFBZTtRQUNyQixPQUFPLFFBQVEsQ0FBQyxlQUFlLENBQUMsWUFBWSxDQUFDO0lBQy9DLENBQUM7SUFFRCw4Q0FBOEM7SUFDdEMscUJBQXFCLENBQUMsVUFBdUIsRUFBRSxJQUFZLEVBQUUsRUFBVTtRQUM3RSxJQUFJLEdBQUcsR0FBRyxJQUFJLENBQUM7UUFDZixJQUFJLE1BQU0sR0FBRyxJQUFJLENBQUMsZUFBZSxFQUFFLEdBQUcsSUFBSSxDQUFDLG1CQUFtQixDQUFDO1FBRS9ELElBQUksUUFBUSxHQUFHLFdBQVcsQ0FBQyxLQUFLLEVBQUUsQ0FBQyxDQUFDLENBQUM7UUFFckMsU0FBUyxLQUFLO1lBQ1osSUFBSSxHQUFHLElBQUksRUFBRSxJQUFJLEdBQUcsSUFBSSxNQUFNLEVBQUU7Z0JBQzlCLElBQUksRUFBRSxJQUFJLE1BQU0sRUFBQztvQkFDZixVQUFVLENBQUMsS0FBSyxDQUFDLEdBQUcsR0FBRyxNQUFNLEdBQUcsSUFBSSxDQUFDO2lCQUN0QztxQkFDSTtvQkFDSCxVQUFVLENBQUMsS0FBSyxDQUFDLEdBQUcsR0FBRyxFQUFFLEdBQUcsSUFBSSxDQUFDO2lCQUNsQztnQkFFRCxhQUFhLENBQUMsUUFBUSxDQUFDLENBQUM7YUFDekI7aUJBQU07Z0JBQ0wsR0FBRyxHQUFHLEVBQUUsR0FBRyxJQUFJLENBQUMsQ0FBQyxDQUFDLEdBQUcsR0FBRyxFQUFFLENBQUMsQ0FBQyxDQUFDLEdBQUcsR0FBRSxFQUFFLENBQUM7Z0JBQ3JDLFVBQVUsQ0FBQyxLQUFLLENBQUMsR0FBRyxHQUFHLEdBQUcsR0FBRyxJQUFJLENBQUM7YUFDbkM7UUFDSCxDQUFDO0lBQ0gsQ0FBQztJQUVPLG1CQUFtQixDQUFDLFVBQXVCLEVBQUUsSUFBWSxFQUFFLEVBQVU7UUFDM0UsSUFBSSxHQUFHLEdBQUcsSUFBSSxDQUFDO1FBQ2YsSUFBSSxRQUFRLEdBQUcsV0FBVyxDQUFDLEtBQUssRUFBRSxDQUFDLENBQUMsQ0FBQztRQUVyQyxTQUFTLEtBQUs7WUFDVixJQUFJLEdBQUcsSUFBSSxFQUFFLEVBQUU7Z0JBQ2IsVUFBVSxDQUFDLEtBQUssQ0FBQyxHQUFHLEdBQUcsRUFBRSxHQUFHLElBQUksQ0FBQztnQkFDakMsYUFBYSxDQUFDLFFBQVEsQ0FBQyxDQUFDO2FBQ3pCO2lCQUFNO2dCQUNILEdBQUcsR0FBRyxFQUFFLEdBQUcsSUFBSSxDQUFDLENBQUMsQ0FBQyxHQUFHLEdBQUcsRUFBRSxDQUFDLENBQUMsQ0FBQyxHQUFHLEdBQUUsRUFBRSxDQUFDO2dCQUNyQyxVQUFVLENBQUMsS0FBSyxDQUFDLEdBQUcsR0FBRyxHQUFHLEdBQUcsSUFBSSxDQUFDO2FBQ3JDO1FBQ0wsQ0FBQztJQUNILENBQUM7Q0FDRixDQUFBO0FBOUVZLGlCQUFpQjtJQVo3QixTQUFTLENBQUM7UUFDVCxRQUFRLEVBQUUsYUFBYTtRQUN2QixRQUFRLEVBQUU7OztHQUdUO2lCQUNROzs7O0dBSVI7S0FDRixDQUFDOztHQUNXLGlCQUFpQixDQThFN0I7U0E5RVksaUJBQWlCIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tcG9uZW50IH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ25tLWJhY2tkcm9wJyxcbiAgdGVtcGxhdGU6IGBcbiAgICA8bmctY29udGVudCBzZWxlY3Q9XCJubS1iYWNrZHJvcC1iYWNrLWxheWVyXCI+PC9uZy1jb250ZW50PlxuICAgIDxuZy1jb250ZW50IHNlbGVjdD1cIm5tLWJhY2tkcm9wLWZyb250LWxheWVyXCI+PC9uZy1jb250ZW50PlxuICBgLFxuICBzdHlsZXM6IFtgXG4gICAgOmhvc3Qge1xuICAgICAgICB3aWR0aDogMTAwJTtcbiAgICB9XG4gIGBdXG59KVxuZXhwb3J0IGNsYXNzIEJhY2tkcm9wQ29tcG9uZW50IHtcbiAgcHJpdmF0ZSBiYWNrTGF5ZXJNaW5IZWlnaHQ6IG51bWJlciA9IDU2O1xuICBwcml2YXRlIGZyb250TGF5ZXJNaW5IZWlnaHQ6bnVtYmVyID0gNDI7XG5cbiAgY29uc3RydWN0b3IoKSB7IH1cblxuICBwdWJsaWMgcmV2ZWFsKCl7XG4gICAgbGV0IGJhY2tMYXllciA9IHRoaXMuZ2V0QmFja0xheWVyKCk7XG4gICAgbGV0IGZyb250TGF5ZXIgPSB0aGlzLmdldEZyb250TGF5ZXIoKTtcbiAgICBsZXQgdG9vbGJhciA9IHRoaXMuZ2V0VG9vbGJhcigpO1xuXG4gICAgbGV0IGZyb20gPSBmcm9udExheWVyLm9mZnNldFRvcDtcbiAgICBsZXQgdG8gPSB0b29sYmFyLm9mZnNldEhlaWdodCArIGJhY2tMYXllci5vZmZzZXRIZWlnaHQ7XG4gICAgdGhpcy5hbmltYXRlRnJvbnRMYXllckRvd24oZnJvbnRMYXllciwgZnJvbSwgdG8pO1xuICB9XG5cbiAgcHVibGljIGNvbmNlYWwoKXtcbiAgICBsZXQgZnJvbnRMYXllciA9IHRoaXMuZ2V0RnJvbnRMYXllcigpO1xuXG4gICAgbGV0IGZyb20gPSBmcm9udExheWVyLm9mZnNldFRvcDtcbiAgICBsZXQgdG8gPSB0aGlzLmJhY2tMYXllck1pbkhlaWdodDtcbiAgICB0aGlzLmFuaW1hdGVGcm9udExheWVyVXAoZnJvbnRMYXllciwgZnJvbSwgdG8pO1xuICB9XG5cbiAgcHJpdmF0ZSBnZXRCYWNrTGF5ZXIoKTogSFRNTEVsZW1lbnQge1xuICAgIHJldHVybiA8SFRNTEVsZW1lbnQ+ZG9jdW1lbnQucXVlcnlTZWxlY3Rvcignbm0tYmFja2Ryb3AtYmFjay1sYXllci1jb250ZW50JylcbiAgfVxuXG4gIHByaXZhdGUgZ2V0RnJvbnRMYXllcigpOiBIVE1MRWxlbWVudCB7XG4gICAgcmV0dXJuIDxIVE1MRWxlbWVudD5kb2N1bWVudC5xdWVyeVNlbGVjdG9yKCdubS1iYWNrZHJvcC1mcm9udC1sYXllcicpO1xuICB9XG5cbiAgcHJpdmF0ZSBnZXRUb29sYmFyKCk6IEhUTUxFbGVtZW50IHtcbiAgICByZXR1cm4gPEhUTUxFbGVtZW50PmRvY3VtZW50LnF1ZXJ5U2VsZWN0b3IoJ21hdC10b29sYmFyJyk7XG4gIH1cblxuICBwcml2YXRlIGdldFdpbmRvd0hlaWdodCgpOiBudW1iZXIge1xuICAgIHJldHVybiBkb2N1bWVudC5kb2N1bWVudEVsZW1lbnQuY2xpZW50SGVpZ2h0O1xuICB9XG5cbiAgLy8gVE9ETyBSZWZhY3RvciBhbmltYXRpb25zIHRvIHNpbmdsZSBmdW5jdGlvblxuICBwcml2YXRlIGFuaW1hdGVGcm9udExheWVyRG93bihmcm9udExheWVyOiBIVE1MRWxlbWVudCwgZnJvbTogbnVtYmVyLCB0bzogbnVtYmVyKXtcbiAgICBsZXQgcG9zID0gZnJvbTtcbiAgICBsZXQgbWF4UG9zID0gdGhpcy5nZXRXaW5kb3dIZWlnaHQoKSAtIHRoaXMuZnJvbnRMYXllck1pbkhlaWdodDtcblxuICAgIGxldCBpbnRlcnZhbCA9IHNldEludGVydmFsKGZyYW1lLCAzKTtcbiAgXG4gICAgZnVuY3Rpb24gZnJhbWUoKSB7XG4gICAgICBpZiAocG9zID49IHRvIHx8IHBvcyA+PSBtYXhQb3MpIHtcbiAgICAgICAgaWYgKHRvID49IG1heFBvcyl7XG4gICAgICAgICAgZnJvbnRMYXllci5zdHlsZS50b3AgPSBtYXhQb3MgKyAncHgnO1xuICAgICAgICB9XG4gICAgICAgIGVsc2Uge1xuICAgICAgICAgIGZyb250TGF5ZXIuc3R5bGUudG9wID0gdG8gKyAncHgnO1xuICAgICAgICB9XG4gICAgICAgIFxuICAgICAgICBjbGVhckludGVydmFsKGludGVydmFsKTtcbiAgICAgIH0gZWxzZSB7XG4gICAgICAgIHBvcyA9IHRvID4gZnJvbSA/IHBvcyArIDEwIDogcG9zIC0xMDsgICBcbiAgICAgICAgZnJvbnRMYXllci5zdHlsZS50b3AgPSBwb3MgKyAncHgnOyBcbiAgICAgIH1cbiAgICB9XG4gIH1cblxuICBwcml2YXRlIGFuaW1hdGVGcm9udExheWVyVXAoZnJvbnRMYXllcjogSFRNTEVsZW1lbnQsIGZyb206IG51bWJlciwgdG86IG51bWJlcil7XG4gICAgbGV0IHBvcyA9IGZyb207XG4gICAgbGV0IGludGVydmFsID0gc2V0SW50ZXJ2YWwoZnJhbWUsIDMpO1xuXG4gICAgZnVuY3Rpb24gZnJhbWUoKSB7XG4gICAgICAgIGlmIChwb3MgPD0gdG8pIHtcbiAgICAgICAgICBmcm9udExheWVyLnN0eWxlLnRvcCA9IHRvICsgJ3B4JzsgICBcbiAgICAgICAgICBjbGVhckludGVydmFsKGludGVydmFsKTtcbiAgICAgICAgfSBlbHNlIHtcbiAgICAgICAgICAgIHBvcyA9IHRvID4gZnJvbSA/IHBvcyArIDEwIDogcG9zIC0xMDsgICBcbiAgICAgICAgICAgIGZyb250TGF5ZXIuc3R5bGUudG9wID0gcG9zICsgJ3B4JzsgXG4gICAgICAgIH1cbiAgICB9XG4gIH1cbn1cbiJdfQ==