@ohayojp.com/components
Version:
Common business components of ohayojp.
393 lines (385 loc) • 11.2 kB
JavaScript
import { __decorate, __metadata } from 'tslib';
import { DOCUMENT, CommonModule } from '@angular/common';
import { Injectable, ɵɵdefineInjectable, EventEmitter, Component, ChangeDetectionStrategy, ViewEncapsulation, ElementRef, ChangeDetectorRef, Inject, Input, Output, Directive, NgModule } from '@angular/core';
import { ActivationStart, ActivationEnd, Router } from '@angular/router';
import { InputBoolean, InputNumber, OhayoUtilModule } from '@ohayojp.com/util';
import { BehaviorSubject, fromEvent } from 'rxjs';
import { share, debounceTime, filter } from 'rxjs/operators';
/**
* @fileoverview added by tsickle
* Generated from: full-content.service.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
class FullContentService {
constructor() {
this._change = new BehaviorSubject(null);
}
/**
* 切换全屏工作区状态
* @return {?}
*/
toggle() {
this._change.next(true);
}
/**
* @return {?}
*/
get change() {
return this._change.pipe(share());
}
}
FullContentService.decorators = [
{ type: Injectable, args: [{ providedIn: 'root' },] }
];
/** @nocollapse */ FullContentService.ɵprov = ɵɵdefineInjectable({ factory: function FullContentService_Factory() { return new FullContentService(); }, token: FullContentService, providedIn: "root" });
if (false) {
/**
* @type {?}
* @private
*/
FullContentService.prototype._change;
}
/**
* @fileoverview added by tsickle
* Generated from: full-content.component.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/** @type {?} */
const wrapCls = `full-content__body`;
/** @type {?} */
const openedCls = `full-content__opened`;
/** @type {?} */
const hideTitleCls = `full-content__hidden-title`;
class FullContentComponent {
// #endregion
/**
* @param {?} el
* @param {?} cdr
* @param {?} srv
* @param {?} router
* @param {?} doc
*/
constructor(el, cdr, srv, router, doc) {
this.el = el;
this.cdr = cdr;
this.srv = srv;
this.router = router;
this.doc = doc;
this.inited = false;
this.id = `_full-content-${Math.random().toString(36).substring(2)}`;
this.scroll$ = null;
this._height = 0;
this.hideTitle = true;
this.padding = 24;
this.fullscreenChange = new EventEmitter();
}
/**
* @private
* @return {?}
*/
updateCls() {
/** @type {?} */
const clss = this.bodyEl.classList;
if (this.fullscreen) {
clss.add(openedCls);
if (this.hideTitle) {
clss.add(hideTitleCls);
}
}
else {
clss.remove(openedCls);
if (this.hideTitle) {
clss.remove(hideTitleCls);
}
}
}
/**
* @private
* @return {?}
*/
update() {
this.updateCls();
this.updateHeight();
this.fullscreenChange.emit(this.fullscreen);
}
/**
* @private
* @return {?}
*/
updateHeight() {
this._height =
this.bodyEl.getBoundingClientRect().height - ((/** @type {?} */ (this.el.nativeElement))).getBoundingClientRect().top - this.padding;
this.cdr.detectChanges();
}
/**
* @private
* @return {?}
*/
removeInBody() {
this.bodyEl.classList.remove(wrapCls, openedCls, hideTitleCls);
}
/**
* @return {?}
*/
ngOnInit() {
this.inited = true;
this.bodyEl = this.doc.querySelector('body');
this.bodyEl.classList.add(wrapCls);
((/** @type {?} */ (this.el.nativeElement))).id = this.id;
this.updateCls();
// when window resize
this.scroll$ = fromEvent(window, 'resize')
.pipe(debounceTime(200))
.subscribe((/**
* @return {?}
*/
() => this.updateHeight()));
// when servier changed
this.srv$ = this.srv.change.pipe(filter((/**
* @param {?} res
* @return {?}
*/
res => res !== null))).subscribe((/**
* @return {?}
*/
() => this.toggle()));
// when router changed
this.route$ = this.router.events
.pipe(filter((/**
* @param {?} e
* @return {?}
*/
(e) => e instanceof ActivationStart || e instanceof ActivationEnd)), debounceTime(200))
.subscribe((/**
* @return {?}
*/
() => {
if (!!this.doc.querySelector('#' + this.id)) {
this.bodyEl.classList.add(wrapCls);
this.updateCls();
}
else {
this.removeInBody();
}
}));
}
/**
* @return {?}
*/
toggle() {
this.fullscreen = !this.fullscreen;
this.update();
this.updateHeight();
}
/**
* @return {?}
*/
ngAfterViewInit() {
setTimeout((/**
* @return {?}
*/
() => this.updateHeight()));
}
/**
* @return {?}
*/
ngOnChanges() {
if (this.inited)
this.update();
}
/**
* @return {?}
*/
ngOnDestroy() {
this.removeInBody();
(/** @type {?} */ (this.scroll$)).unsubscribe();
this.srv$.unsubscribe();
this.route$.unsubscribe();
}
}
FullContentComponent.decorators = [
{
type: Component, args: [{
selector: 'full-content',
exportAs: 'fullContent',
template: ` <ng-content></ng-content> `,
host: {
'[class.full-content]': 'true',
'[style.height.px]': '_height',
},
preserveWhitespaces: false,
changeDetection: ChangeDetectionStrategy.OnPush,
encapsulation: ViewEncapsulation.None
}]
}
];
/** @nocollapse */
FullContentComponent.ctorParameters = () => [
{ type: ElementRef },
{ type: ChangeDetectorRef },
{ type: FullContentService },
{ type: Router },
{ type: undefined, decorators: [{ type: Inject, args: [DOCUMENT,] }] }
];
FullContentComponent.propDecorators = {
fullscreen: [{ type: Input }],
hideTitle: [{ type: Input }],
padding: [{ type: Input }],
fullscreenChange: [{ type: Output }]
};
__decorate([
InputBoolean(),
__metadata("design:type", Boolean)
], FullContentComponent.prototype, "fullscreen", void 0);
__decorate([
InputBoolean(),
__metadata("design:type", Object)
], FullContentComponent.prototype, "hideTitle", void 0);
__decorate([
InputNumber(),
__metadata("design:type", Object)
], FullContentComponent.prototype, "padding", void 0);
if (false) {
/** @type {?} */
FullContentComponent.ngAcceptInputType_fullscreen;
/** @type {?} */
FullContentComponent.ngAcceptInputType_hideTitle;
/** @type {?} */
FullContentComponent.ngAcceptInputType_padding;
/**
* @type {?}
* @private
*/
FullContentComponent.prototype.bodyEl;
/**
* @type {?}
* @private
*/
FullContentComponent.prototype.inited;
/**
* @type {?}
* @private
*/
FullContentComponent.prototype.srv$;
/**
* @type {?}
* @private
*/
FullContentComponent.prototype.route$;
/**
* @type {?}
* @private
*/
FullContentComponent.prototype.id;
/**
* @type {?}
* @private
*/
FullContentComponent.prototype.scroll$;
/** @type {?} */
FullContentComponent.prototype._height;
/** @type {?} */
FullContentComponent.prototype.fullscreen;
/** @type {?} */
FullContentComponent.prototype.hideTitle;
/** @type {?} */
FullContentComponent.prototype.padding;
/** @type {?} */
FullContentComponent.prototype.fullscreenChange;
/**
* @type {?}
* @private
*/
FullContentComponent.prototype.el;
/**
* @type {?}
* @private
*/
FullContentComponent.prototype.cdr;
/**
* @type {?}
* @private
*/
FullContentComponent.prototype.srv;
/**
* @type {?}
* @private
*/
FullContentComponent.prototype.router;
/**
* @type {?}
* @private
*/
FullContentComponent.prototype.doc;
}
/**
* @fileoverview added by tsickle
* Generated from: full-content-toggle.directive.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
class FullContentToggleDirective {
/**
* @param {?} parent
*/
constructor(parent) {
this.parent = parent;
}
/**
* @return {?}
*/
_click() {
this.parent.toggle();
}
}
FullContentToggleDirective.decorators = [
{
type: Directive, args: [{
selector: '[full-toggle]',
exportAs: 'fullToggle',
host: {
'(click)': '_click()',
},
},]
}
];
/** @nocollapse */
FullContentToggleDirective.ctorParameters = () => [
{ type: FullContentComponent }
];
if (false) {
/**
* @type {?}
* @private
*/
FullContentToggleDirective.prototype.parent;
}
/**
* @fileoverview added by tsickle
* Generated from: full-content.module.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/** @type {?} */
const COMPONENTS = [FullContentComponent, FullContentToggleDirective];
class FullContentModule {
}
FullContentModule.decorators = [
{
type: NgModule, args: [{
imports: [CommonModule, OhayoUtilModule],
declarations: [...COMPONENTS],
exports: [...COMPONENTS],
},]
}
];
/**
* @fileoverview added by tsickle
* Generated from: public_api.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* @fileoverview added by tsickle
* Generated from: fullContent.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
export { FullContentComponent, FullContentModule, FullContentService, FullContentToggleDirective };
//# sourceMappingURL=fullContent.js.map