yoyo-ng-modulewindy
Version:
服务于52ABP模板的前端开源的相关组件内容。整合了ng-alain和你NG ZORRO的内容
164 lines • 6.17 kB
JavaScript
import { Component, ElementRef, ChangeDetectionStrategy, ChangeDetectorRef, Input, Output, EventEmitter, Inject, HostBinding, } from '@angular/core';
import { DOCUMENT } from '@angular/common';
import { toBoolean, toNumber } from 'yoyo-ng-module/util';
import { fromEvent } from 'rxjs';
import { debounceTime, filter } from 'rxjs/operators';
import { FullContentService } from './full-content.service';
import { Router, ActivationStart, ActivationEnd } from '@angular/router';
var cls = "ad-full-content-wrap";
var fsCls = "ad-full-content-fs";
var hideTitleCls = "ad-full-content-ht";
var FullContentComponent = /** @class */ (function () {
// endregion
function FullContentComponent(el, router, cd, srv, doc) {
this.el = el;
this.router = router;
this.cd = cd;
this.srv = srv;
this.doc = doc;
this.inited = false;
this.id = "_full-content-" + Math.random()
.toString(36)
.substring(2);
this._height = 0;
this._hideTitle = true;
this._padding = 24;
this.fullscreenChange = new EventEmitter();
// region: resize
this.scroll$ = null;
}
Object.defineProperty(FullContentComponent.prototype, "fullscreen", {
// region: fields
get: function () {
return this._fullscreen;
},
set: function (value) {
this._fullscreen = toBoolean(value);
},
enumerable: true,
configurable: true
});
Object.defineProperty(FullContentComponent.prototype, "hideTitle", {
get: function () {
return this._hideTitle;
},
set: function (value) {
this._hideTitle = toBoolean(value);
},
enumerable: true,
configurable: true
});
Object.defineProperty(FullContentComponent.prototype, "padding", {
get: function () {
return this._padding;
},
set: function (value) {
this._padding = toNumber(value);
},
enumerable: true,
configurable: true
});
FullContentComponent.prototype.ngOnInit = function () {
var _this = this;
this.inited = true;
this.bodyEl = this.doc.querySelector('body');
this.bodyEl.classList.add(cls);
this.el.nativeElement.id = this.id;
this.update();
this.installResizeEvent();
this.srv$ = this.srv.change.subscribe(function (res) {
if (res)
_this.toggle();
});
this.route$ = this.router.events
.pipe(filter(function (e) {
return e instanceof ActivationStart || e instanceof ActivationEnd;
}), debounceTime(200))
.subscribe(function (e) {
if (!!document.querySelector('#' + _this.id)) {
_this.bodyEl.classList.add(cls);
_this.updateFsCls();
}
else {
_this.bodyEl.classList.remove(cls, fsCls, hideTitleCls);
}
});
};
FullContentComponent.prototype.ngAfterViewInit = function () {
var _this = this;
setTimeout(function () { return _this.updateHeight(); });
};
FullContentComponent.prototype.updateFsCls = function () {
if (this.fullscreen) {
this.bodyEl.classList.add(fsCls);
if (this.hideTitle)
this.bodyEl.classList.add(hideTitleCls);
}
else {
this.bodyEl.classList.remove(fsCls);
if (this.hideTitle)
this.bodyEl.classList.remove(hideTitleCls);
}
};
FullContentComponent.prototype.update = function () {
this.updateFsCls();
this.fullscreenChange.emit(this.fullscreen);
};
FullContentComponent.prototype.updateHeight = function () {
this._height =
this.bodyEl.getBoundingClientRect().height -
this.el.nativeElement.getBoundingClientRect().top -
this.padding;
this.cd.detectChanges();
};
FullContentComponent.prototype.toggle = function () {
this.fullscreen = !this.fullscreen;
this.update();
this.updateHeight();
};
FullContentComponent.prototype.ngOnChanges = function (changes) {
if (this.inited)
this.update();
};
FullContentComponent.prototype.ngOnDestroy = function () {
this.bodyEl.classList.remove(cls, fsCls, hideTitleCls);
this.uninstallResizeEvent();
this.srv$.unsubscribe();
this.route$.unsubscribe();
};
FullContentComponent.prototype.installResizeEvent = function () {
var _this = this;
this.scroll$ = fromEvent(window, 'resize')
.pipe(debounceTime(200))
.subscribe(function () { return _this.updateHeight(); });
};
FullContentComponent.prototype.uninstallResizeEvent = function () {
this.scroll$.unsubscribe();
};
FullContentComponent.decorators = [
{ type: Component, args: [{
selector: 'full-content',
template: "<ng-content></ng-content>",
host: { '[class.ad-full-content]': 'true' },
changeDetection: ChangeDetectionStrategy.OnPush,
},] },
];
/** @nocollapse */
FullContentComponent.ctorParameters = function () { return [
{ type: ElementRef },
{ type: Router },
{ type: ChangeDetectorRef },
{ type: FullContentService },
{ type: undefined, decorators: [{ type: Inject, args: [DOCUMENT,] }] }
]; };
FullContentComponent.propDecorators = {
_height: [{ type: HostBinding, args: ['style.height.px',] }],
fullscreen: [{ type: Input }],
hideTitle: [{ type: Input }],
padding: [{ type: Input }],
fullscreenChange: [{ type: Output }]
};
return FullContentComponent;
}());
export { FullContentComponent };
//# sourceMappingURL=full-content.component.js.map