@ohayojp.com/components
Version:
Common business components of ohayojp.
707 lines (699 loc) • 21.8 kB
JavaScript
import { DOCUMENT, CommonModule } from '@angular/common';
import { EventEmitter, Component, ChangeDetectionStrategy, ViewEncapsulation, ElementRef, Optional, Inject, ChangeDetectorRef, Injectable, ApplicationRef, ComponentFactoryResolver, Injector, ɵɵdefineInjectable, ɵɵinject, INJECTOR, NgModule } from '@angular/core';
import { Router } from '@angular/router';
import { OhayoLocaleService, OhayoLocaleModule } from '@ohayojp.com/theme';
import { of, pipe } from 'rxjs';
import { switchMap, delay } from 'rxjs/operators';
import { Platform } from '@angular/cdk/platform';
import { OhayoUtilModule } from '@ohayojp.com/util';
import { NzButtonModule } from 'ng-zorro-antd/button';
import { NzNoAnimationModule } from 'ng-zorro-antd/core/no-animation';
import { NzOutletModule } from 'ng-zorro-antd/core/outlet';
import { NzPopoverModule } from 'ng-zorro-antd/popover';
/**
* @fileoverview added by tsickle
* Generated from: onboarding.component.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* @record
*/
function OnboardingLightData() { }
if (false) {
/** @type {?} */
OnboardingLightData.prototype.el;
/** @type {?} */
OnboardingLightData.prototype.top;
/** @type {?} */
OnboardingLightData.prototype.left;
/** @type {?} */
OnboardingLightData.prototype.width;
/** @type {?} */
OnboardingLightData.prototype.height;
/** @type {?} */
OnboardingLightData.prototype.clientHeight;
/** @type {?} */
OnboardingLightData.prototype.clientWidth;
}
class OnboardingComponent {
/**
* @param {?} el
* @param {?} doc
* @param {?} platform
* @param {?} cdr
*/
constructor(el, doc, platform, cdr) {
this.el = el;
this.doc = doc;
this.platform = platform;
this.cdr = cdr;
this.active = 0;
this.max = 0;
this.op = new EventEmitter();
this.running = false;
}
/**
* @return {?}
*/
get first() {
return this.active === 0;
}
/**
* @return {?}
*/
get last() {
return this.active === this.max - 1;
}
/**
* @private
* @return {?}
*/
_getDoc() {
return this.doc;
}
/**
* @private
* @return {?}
*/
_getWin() {
return this._getDoc().defaultView || window;
}
/**
* @private
* @return {?}
*/
getLightData() {
/** @type {?} */
const doc = this._getDoc();
/** @type {?} */
const win = this._getWin();
/** @type {?} */
const el = (/** @type {?} */ (doc.querySelector(this.item.selectors)));
if (!el) {
return null;
}
/** @type {?} */
const scrollTop = win.pageYOffset || doc.documentElement.scrollTop || doc.body.scrollTop;
/** @type {?} */
const scrollLeft = win.pageXOffset || doc.documentElement.scrollLeft || doc.body.scrollLeft;
/** @type {?} */
const rect = el.getBoundingClientRect();
/** @type {?} */
const top = rect.top + scrollTop;
/** @type {?} */
const left = rect.left + scrollLeft;
/** @type {?} */
const padding = 8;
/** @type {?} */
const needPadding = top > padding && left > padding;
/** @type {?} */
const offsetPos = needPadding ? padding : 0;
/** @type {?} */
const offsetWH = needPadding ? padding * 2 : 0;
return {
top: top - offsetPos,
left: left - offsetPos,
width: rect.width + offsetWH,
height: rect.height + offsetWH,
el,
clientWidth: doc.body.clientWidth,
clientHeight: doc.body.clientHeight,
};
}
/**
* @private
* @param {?} pos
* @return {?}
*/
scroll(pos) {
this.prevSelectorEl = pos.el;
/** @type {?} */
const scrollY = pos.top - (pos.clientHeight - pos.height) / 2;
this._getWin().scrollTo({ top: scrollY });
this.updatePrevElStatus(true);
}
/**
* @param {?} status
* @return {?}
*/
updateRunning(status) {
this.running = status;
this.cdr.detectChanges();
if (!status) {
this.updatePosition();
}
}
/**
* @private
* @return {?}
*/
updatePosition() {
if (!this.platform.isBrowser) {
return;
}
/** @type {?} */
const pos = this.getLightData();
if (pos == null) {
console.warn(`Did not matches selectors [${this.item.selectors}]`);
return;
}
/** @type {?} */
const lightStyle = ((/** @type {?} */ (this.el.nativeElement.querySelector('.onboarding__light')))).style;
lightStyle.top = `${pos.top}px`;
lightStyle.left = `${pos.left}px`;
lightStyle.width = `${pos.width}px`;
lightStyle.height = `${pos.height}px`;
this.updatePrevElStatus(false);
this.scroll(pos);
}
/**
* @private
* @param {?} status
* @return {?}
*/
updatePrevElStatus(status) {
if (this.prevSelectorEl) {
this.prevSelectorEl.classList[status ? 'add' : 'remove']('onboarding__light-el');
}
}
/**
* @param {?} type
* @return {?}
*/
to(type) {
this.op.emit(type);
}
/**
* @return {?}
*/
handleMask() {
if (this.config.maskClosable === true) {
this.to('done');
}
}
/**
* @return {?}
*/
ngOnDestroy() {
clearTimeout(this.time);
this.updatePrevElStatus(false);
}
}
OnboardingComponent.decorators = [
{
type: Component, args: [{
selector: 'onboarding',
template: "<div *ngIf=\"!running && config.mask\" class=\"onboarding__mask\" (click)=\"handleMask()\"></div>\n<div\n *ngIf=\"item\"\n class=\"onboarding__light\"\n [class.onboarding__light-hide]=\"running\"\n [attr.style]=\"item.lightStyle\"\n nz-popover\n [nzPopoverTitle]=\"item.title\"\n [nzPopoverContent]=\"content\"\n [nzPopoverVisible]=\"!running\"\n [nzPopoverTrigger]=\"null\"\n [nzPopoverPlacement]=\"item.position\"\n [nzPopoverOverlayClassName]=\"item.className\"\n [nzPopoverOverlayStyle]=\"{ 'max-width.px': item.width }\"\n [nzNoAnimation]=\"true\"\n></div>\n<ng-template #content>\n <ng-container *nzStringTemplateOutlet=\"item.content\">\n <div [innerHTML]=\"item.content\"></div>\n </ng-container>\n <div class=\"flex-center-between onboarding__footer\">\n <span class=\"onboarding__total\">\n <ng-container *ngIf=\"config.showTotal\">{{ active + 1 }}/{{ max }}</ng-container>\n </span>\n <div class=\"onboarding__btns\">\n <a *ngIf=\"!last && item.skip !== null\" nz-button nzType=\"link\" (click)=\"to('skip')\" nzSize=\"small\" data-btnType=\"skip\">\n <ng-container *nzStringTemplateOutlet=\"item.skip\">{{ item.skip }}</ng-container>\n </a>\n <a *ngIf=\"!first && item.prev !== null\" nz-button (click)=\"to('prev')\" nzSize=\"small\" data-btnType=\"prev\">\n <ng-container *nzStringTemplateOutlet=\"item.prev\">{{ item.prev }}</ng-container>\n </a>\n <a *ngIf=\"!last && item.next !== null\" nz-button (click)=\"to('next')\" nzType=\"primary\" nzSize=\"small\" data-btnType=\"next\">\n <ng-container *nzStringTemplateOutlet=\"item.next\">{{ item.next }}</ng-container>\n </a>\n <a *ngIf=\"last && item.done !== null\" nz-button (click)=\"to('done')\" nzType=\"primary\" nzSize=\"small\" data-btnType=\"done\">\n <ng-container *nzStringTemplateOutlet=\"item.done\">{{ item.done }}</ng-container>\n </a>\n </div>\n </div>\n</ng-template>\n",
host: {
'[class.onboarding]': `true`,
'[attr.data-onboarding-active]': `active`,
},
preserveWhitespaces: false,
changeDetection: ChangeDetectionStrategy.OnPush,
encapsulation: ViewEncapsulation.None
}]
}
];
/** @nocollapse */
OnboardingComponent.ctorParameters = () => [
{ type: ElementRef },
{ type: undefined, decorators: [{ type: Optional }, { type: Inject, args: [DOCUMENT,] }] },
{ type: Platform },
{ type: ChangeDetectorRef }
];
if (false) {
/**
* @type {?}
* @private
*/
OnboardingComponent.prototype.time;
/**
* @type {?}
* @private
*/
OnboardingComponent.prototype.prevSelectorEl;
/** @type {?} */
OnboardingComponent.prototype.config;
/** @type {?} */
OnboardingComponent.prototype.item;
/** @type {?} */
OnboardingComponent.prototype.active;
/** @type {?} */
OnboardingComponent.prototype.max;
/** @type {?} */
OnboardingComponent.prototype.op;
/** @type {?} */
OnboardingComponent.prototype.running;
/**
* @type {?}
* @private
*/
OnboardingComponent.prototype.el;
/**
* @type {?}
* @private
*/
OnboardingComponent.prototype.doc;
/**
* @type {?}
* @private
*/
OnboardingComponent.prototype.platform;
/**
* @type {?}
* @private
*/
OnboardingComponent.prototype.cdr;
}
/**
* @fileoverview added by tsickle
* Generated from: onboarding.service.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
class OnboardingService {
/**
* @param {?} i18n
* @param {?} appRef
* @param {?} resolver
* @param {?} router
* @param {?} injector
* @param {?} doc
*/
constructor(i18n, appRef, resolver, router, injector, doc) {
this.i18n = i18n;
this.appRef = appRef;
this.resolver = resolver;
this.router = router;
this.injector = injector;
this.doc = doc;
this.active = 0;
this.running$ = null;
this._running = false;
this.type = null;
}
/**
* @private
* @return {?}
*/
_getDoc() {
return this.doc;
}
/**
* @return {?}
*/
get running() {
return this._running;
}
/**
* @private
* @return {?}
*/
attach() {
/** @type {?} */
const compRef = (this.compRef = this.resolver.resolveComponentFactory(OnboardingComponent).create(this.injector));
this.appRef.attachView(compRef.hostView);
/** @type {?} */
const compNode = ((/** @type {?} */ (compRef.hostView))).rootNodes[0];
/** @type {?} */
const doc = this._getDoc();
/** @type {?} */
const cdk = (/** @type {?} */ (doc.querySelector('.cdk-overlay-container')));
if (cdk) {
doc.body.insertBefore(compNode, cdk);
}
else {
doc.body.appendChild(compNode);
}
this.op$ = this.compRef.instance.op.subscribe((/**
* @param {?} type
* @return {?}
*/
(type) => {
switch (type) {
case 'next':
this.next();
break;
case 'prev':
this.prev();
break;
default:
this.done();
break;
}
}));
}
/**
* @private
* @template THIS
* @this {THIS}
* @return {THIS}
*/
cancelRunning() {
if ((/** @type {?} */ (this)).running$) {
(/** @type {?} */ (this)).running$.unsubscribe();
(/** @type {?} */ (this)).running$ = null;
}
return (/** @type {?} */ (this));
}
/**
* @private
* @template THIS
* @this {THIS}
* @param {?} status
* @return {THIS}
*/
updateRunning(status) {
(/** @type {?} */ (this))._running = status;
(/** @type {?} */ ((/** @type {?} */ (this)).compRef)).instance.updateRunning(status);
return (/** @type {?} */ (this));
}
/**
* @private
* @return {?}
*/
destroy() {
this.cancelRunning();
if (this.compRef) {
this.appRef.detachView(this.compRef.hostView);
this.compRef.destroy();
this.op$.unsubscribe();
}
}
/**
* @private
* @param {?=} isStart
* @return {?}
*/
showItem(isStart = false) {
/** @type {?} */
const items = (/** @type {?} */ (this.config.items));
/** @type {?} */
const item = (/** @type {?} */ (Object.assign(Object.assign({ position: 'bottomLeft', before: of(true), after: of(true) }, this.i18n.getData('onboarding')), items[this.active])));
Object.assign(this.compRef.instance, { item, config: this.config, active: this.active, max: items.length });
/** @type {?} */
const pipes = [
switchMap((/**
* @return {?}
*/
() => (item.url ? this.router.navigateByUrl(item.url) : of(true)))),
switchMap((/**
* @return {?}
*/
() => {
/** @type {?} */
const obs = this.type === 'prev' ? (/** @type {?} */ (item.after)) : (/** @type {?} */ (item.before));
return typeof obs === 'number' ? of(true).pipe(delay(obs)) : obs;
})),
];
if (!isStart) {
pipes.push(delay(1));
}
this.updateRunning(true);
this.running$ = of(true)
.pipe(pipe.apply(this, pipes))
.subscribe((/**
* @template THIS
* @this {THIS}
* @return {THIS}
*/
() => this.cancelRunning().updateRunning(false)), (/**
* @return {?}
*/
() => this.done()));
}
/**
* @param {?} config
* @return {?}
*/
start(config) {
if (this.running) {
return;
}
this.destroy();
this.config = Object.assign({ items: [], mask: true, maskClosable: true, showTotal: false }, config);
this.active = 0;
this.type = null;
this.attach();
this.showItem(true);
}
/**
* @return {?}
*/
next() {
if (this._running || this.active + 1 >= (/** @type {?} */ (this.config.items)).length) {
this.done();
return;
}
this.type = 'next';
++this.active;
this.showItem();
}
/**
* @return {?}
*/
prev() {
if (this._running || this.active - 1 < 0) {
return;
}
this.type = 'prev';
--this.active;
this.showItem();
}
/**
* @return {?}
*/
done() {
this.type = 'done';
this.destroy();
}
/**
* @return {?}
*/
ngOnDestroy() {
this.destroy();
}
}
OnboardingService.decorators = [
{ type: Injectable, args: [{ providedIn: 'root' },] }
];
/** @nocollapse */
OnboardingService.ctorParameters = () => [
{ type: OhayoLocaleService },
{ type: ApplicationRef },
{ type: ComponentFactoryResolver },
{ type: Router },
{ type: Injector },
{ type: undefined, decorators: [{ type: Inject, args: [DOCUMENT,] }] }
];
/** @nocollapse */ OnboardingService.ɵprov = ɵɵdefineInjectable({ factory: function OnboardingService_Factory() { return new OnboardingService(ɵɵinject(OhayoLocaleService), ɵɵinject(ApplicationRef), ɵɵinject(ComponentFactoryResolver), ɵɵinject(Router), ɵɵinject(INJECTOR), ɵɵinject(DOCUMENT)); }, token: OnboardingService, providedIn: "root" });
if (false) {
/**
* @type {?}
* @private
*/
OnboardingService.prototype.compRef;
/**
* @type {?}
* @private
*/
OnboardingService.prototype.op$;
/**
* @type {?}
* @private
*/
OnboardingService.prototype.config;
/**
* @type {?}
* @private
*/
OnboardingService.prototype.active;
/**
* @type {?}
* @private
*/
OnboardingService.prototype.running$;
/**
* @type {?}
* @private
*/
OnboardingService.prototype._running;
/**
* @type {?}
* @private
*/
OnboardingService.prototype.type;
/**
* @type {?}
* @private
*/
OnboardingService.prototype.i18n;
/**
* @type {?}
* @private
*/
OnboardingService.prototype.appRef;
/**
* @type {?}
* @private
*/
OnboardingService.prototype.resolver;
/**
* @type {?}
* @private
*/
OnboardingService.prototype.router;
/**
* @type {?}
* @private
*/
OnboardingService.prototype.injector;
/**
* @type {?}
* @private
*/
OnboardingService.prototype.doc;
}
/**
* @fileoverview added by tsickle
* Generated from: onboarding.types.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* @record
*/
function OnboardingConfig() { }
if (false) {
/**
* Onboarding items
* @type {?|undefined}
*/
OnboardingConfig.prototype.items;
/**
* Whether to show mask or not, Default: `true`
* @type {?|undefined}
*/
OnboardingConfig.prototype.mask;
/**
* Clicking on the mask (area outside the onboarding) to close the onboarding or not, Default: `true`
* @type {?|undefined}
*/
OnboardingConfig.prototype.maskClosable;
/**
* Whether to show total, Default: `true`
* @type {?|undefined}
*/
OnboardingConfig.prototype.showTotal;
}
/**
* @record
*/
function OnboardingItem() { }
if (false) {
/**
* The CSS selector, which identifies the html element you want to describe
* @type {?}
*/
OnboardingItem.prototype.selectors;
/**
* Positioning of the selector element, relative to the contents of the children, Default: `bottomLeft`
* @type {?|undefined}
*/
OnboardingItem.prototype.position;
/**
* Class name of the panel
* @type {?|undefined}
*/
OnboardingItem.prototype.className;
/**
* Light style
* @type {?|undefined}
*/
OnboardingItem.prototype.lightStyle;
/**
* Width of the panel
* @type {?|undefined}
*/
OnboardingItem.prototype.width;
/**
* Title text of the panel
* @type {?|undefined}
*/
OnboardingItem.prototype.title;
/**
* Content text of the panel
* @type {?|undefined}
*/
OnboardingItem.prototype.content;
/**
* Skip button of the panel
* - `null` Don't show
* @type {?|undefined}
*/
OnboardingItem.prototype.skip;
/**
* Prev button of the panel
* - `null` Don't show
* @type {?|undefined}
*/
OnboardingItem.prototype.prev;
/**
* Next button of the panel
* - `null` Don't show
* @type {?|undefined}
*/
OnboardingItem.prototype.next;
/**
* Done button of the panel
* - `null` Don't show
* @type {?|undefined}
*/
OnboardingItem.prototype.done;
/**
* Target router url
* @type {?|undefined}
*/
OnboardingItem.prototype.url;
/**
* Callback before entering, triggered when call `next` operates
* - `number` indicate delay
* @type {?|undefined}
*/
OnboardingItem.prototype.before;
/**
* Callback after entering, triggered when call `prev` operates
* - `number` indicate delay
* @type {?|undefined}
*/
OnboardingItem.prototype.after;
}
/**
* @fileoverview added by tsickle
* Generated from: onboarding.module.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/** @type {?} */
const COMPONENTS = [OnboardingComponent];
class OnboardingModule {
}
OnboardingModule.decorators = [
{
type: NgModule, args: [{
imports: [CommonModule, OhayoLocaleModule, OhayoUtilModule, NzPopoverModule, NzOutletModule, NzButtonModule, NzNoAnimationModule],
declarations: COMPONENTS,
entryComponents: 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: onboarding.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
export { OnboardingComponent, OnboardingModule, OnboardingService };
//# sourceMappingURL=onboarding.js.map