From e738ef841f0eb855e83014b2abcb5cf575b1d06f Mon Sep 17 00:00:00 2001 From: Alexander Kislov Date: Sat, 2 Sep 2023 15:13:13 +0300 Subject: [PATCH] Implement working with sercvice page --- .../src/app/app-routing.module.ts | 5 + projects/ngx-tippy-demo/src/app/app.module.ts | 5 +- .../app/components/demo/demo.component.html | 2 +- .../app/components/demo/demo.component.scss | 5 + .../src/app/components/demo/demo.component.ts | 3 +- .../components/header/header.component.scss | 3 + .../src/app/components/nav/nav.component.html | 56 +++++ .../service/_tests/service.component.spec.ts | 22 ++ .../src/app/pages/service/index.ts | 1 + .../app/pages/service/service.component.html | 229 ++++++++++++++++++ .../app/pages/service/service.component.scss | 12 + .../app/pages/service/service.component.ts | 134 ++++++++++ .../src/app/pages/service/snippets.ts | 65 +++++ 13 files changed, 539 insertions(+), 3 deletions(-) create mode 100644 projects/ngx-tippy-demo/src/app/pages/service/_tests/service.component.spec.ts create mode 100644 projects/ngx-tippy-demo/src/app/pages/service/index.ts create mode 100644 projects/ngx-tippy-demo/src/app/pages/service/service.component.html create mode 100644 projects/ngx-tippy-demo/src/app/pages/service/service.component.scss create mode 100644 projects/ngx-tippy-demo/src/app/pages/service/service.component.ts create mode 100644 projects/ngx-tippy-demo/src/app/pages/service/snippets.ts diff --git a/projects/ngx-tippy-demo/src/app/app-routing.module.ts b/projects/ngx-tippy-demo/src/app/app-routing.module.ts index 342379a..c79c8b2 100644 --- a/projects/ngx-tippy-demo/src/app/app-routing.module.ts +++ b/projects/ngx-tippy-demo/src/app/app-routing.module.ts @@ -1,5 +1,6 @@ import { NgModule } from '@angular/core'; import { PreloadAllModules, RouterModule, Routes } from '@angular/router'; +import { ServiceComponent } from '@pages/service'; import { AppContentComponent } from 'projects/ngx-tippy-demo/src/app/pages/app-content'; import { GettingStartedComponent } from 'projects/ngx-tippy-demo/src/app/pages/getting-started'; import { PropsComponent } from 'projects/ngx-tippy-demo/src/app/pages/props'; @@ -27,6 +28,10 @@ export const routes: Routes = [ path: 'applying-content', component: AppContentComponent, }, + { + path: 'working-with-service', + component: ServiceComponent, + }, ]; @NgModule({ diff --git a/projects/ngx-tippy-demo/src/app/app.module.ts b/projects/ngx-tippy-demo/src/app/app.module.ts index 502d6a4..9cedc8c 100644 --- a/projects/ngx-tippy-demo/src/app/app.module.ts +++ b/projects/ngx-tippy-demo/src/app/app.module.ts @@ -14,6 +14,7 @@ import { ContentComponent } from '@pages/content'; import { GettingStartedComponent } from '@pages/getting-started'; import { NotSupportedComponent } from '@pages/not-supported'; import { PropsComponent } from '@pages/props'; +import { ServiceComponent } from '@pages/service'; import { UsageComponent } from '@pages/usage'; import { SchemeService } from '@services'; import { TuiLetModule } from '@taiga-ui/cdk'; @@ -30,7 +31,7 @@ import { TuiSvgModule, TuiThemeNightModule, } from '@taiga-ui/core'; -import { TuiAccordionModule, TuiBadgeModule, TuiInputModule } from '@taiga-ui/kit'; +import { TuiAccordionModule, TuiBadgeModule, TuiInputModule, TuiIslandModule } from '@taiga-ui/kit'; import { NgDompurifySanitizer } from '@tinkoff/ng-dompurify'; import { HIGHLIGHT_OPTIONS, HighlightModule } from 'ngx-highlightjs'; import { NgxTippyModule } from 'ngx-tippy-wrapper'; @@ -57,6 +58,7 @@ function initialize(SchemeService: SchemeService) { NotSupportedComponent, PropsComponent, AppContentComponent, + ServiceComponent, ], imports: [ AppRoutingModule, @@ -72,6 +74,7 @@ function initialize(SchemeService: SchemeService) { TuiButtonModule, TuiDialogModule, TuiExpandModule, + TuiIslandModule, TuiInputModule, TuiLetModule, TuiLinkModule, diff --git a/projects/ngx-tippy-demo/src/app/components/demo/demo.component.html b/projects/ngx-tippy-demo/src/app/components/demo/demo.component.html index 1e704ed..3d19102 100644 --- a/projects/ngx-tippy-demo/src/app/components/demo/demo.component.html +++ b/projects/ngx-tippy-demo/src/app/components/demo/demo.component.html @@ -1,5 +1,5 @@
diff --git a/projects/ngx-tippy-demo/src/app/components/demo/demo.component.scss b/projects/ngx-tippy-demo/src/app/components/demo/demo.component.scss index e1996a8..f0c95ce 100644 --- a/projects/ngx-tippy-demo/src/app/components/demo/demo.component.scss +++ b/projects/ngx-tippy-demo/src/app/components/demo/demo.component.scss @@ -16,4 +16,9 @@ border-radius: 0.75rem; @include transition-color-bgc; } + + .demo.service { + display: flex; + justify-content: space-between; + } } diff --git a/projects/ngx-tippy-demo/src/app/components/demo/demo.component.ts b/projects/ngx-tippy-demo/src/app/components/demo/demo.component.ts index 53cf1c1..4ae6302 100644 --- a/projects/ngx-tippy-demo/src/app/components/demo/demo.component.ts +++ b/projects/ngx-tippy-demo/src/app/components/demo/demo.component.ts @@ -1,4 +1,4 @@ -import { AfterViewInit, ChangeDetectionStrategy, Component, ElementRef, OnInit, ViewChild } from '@angular/core'; +import { AfterViewInit, ChangeDetectionStrategy, Component, ElementRef, Input, OnInit, ViewChild } from '@angular/core'; import { Schemes } from '@interfaces'; import { DestroyService, SchemeService } from '@services'; import { NgxTippyInstance, NgxTippyService } from 'ngx-tippy-wrapper'; @@ -12,6 +12,7 @@ import { takeUntil } from 'rxjs'; providers: [DestroyService], }) export class DemoComponent implements OnInit, AfterViewInit { + @Input() customClass!: string; @ViewChild('content', { read: ElementRef }) projectedContent!: ElementRef; constructor( diff --git a/projects/ngx-tippy-demo/src/app/components/header/header.component.scss b/projects/ngx-tippy-demo/src/app/components/header/header.component.scss index 3eb45a0..642f133 100644 --- a/projects/ngx-tippy-demo/src/app/components/header/header.component.scss +++ b/projects/ngx-tippy-demo/src/app/components/header/header.component.scss @@ -72,6 +72,9 @@ $animation-time: 3s; } .header__support-icon--coffee { + background: var(--tui-base-03); + padding: 0.75rem; + border-radius: 50%; display: none; color: var(--tui-text-02); opacity: 0.8; diff --git a/projects/ngx-tippy-demo/src/app/components/nav/nav.component.html b/projects/ngx-tippy-demo/src/app/components/nav/nav.component.html index 0985a33..21dfee9 100644 --- a/projects/ngx-tippy-demo/src/app/components/nav/nav.component.html +++ b/projects/ngx-tippy-demo/src/app/components/nav/nav.component.html @@ -97,5 +97,61 @@ + +
  • + + Working with service + + + + + + +
    • diff --git a/projects/ngx-tippy-demo/src/app/pages/service/_tests/service.component.spec.ts b/projects/ngx-tippy-demo/src/app/pages/service/_tests/service.component.spec.ts new file mode 100644 index 0000000..17672df --- /dev/null +++ b/projects/ngx-tippy-demo/src/app/pages/service/_tests/service.component.spec.ts @@ -0,0 +1,22 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { ServiceComponent } from '../service.component'; + +describe('ServiceComponent', () => { + let component: ServiceComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ServiceComponent], + }).compileComponents(); + + fixture = TestBed.createComponent(ServiceComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/projects/ngx-tippy-demo/src/app/pages/service/index.ts b/projects/ngx-tippy-demo/src/app/pages/service/index.ts new file mode 100644 index 0000000..72c792e --- /dev/null +++ b/projects/ngx-tippy-demo/src/app/pages/service/index.ts @@ -0,0 +1 @@ +export { ServiceComponent } from './service.component'; diff --git a/projects/ngx-tippy-demo/src/app/pages/service/service.component.html b/projects/ngx-tippy-demo/src/app/pages/service/service.component.html new file mode 100644 index 0000000..968c041 --- /dev/null +++ b/projects/ngx-tippy-demo/src/app/pages/service/service.component.html @@ -0,0 +1,229 @@ +
    + +

    Working with service

    + +

    NgxTippyService provides functionality to control the tippy programmatically. +

    + + + +

    Import and provide service:

    + + + + + + View all available methods + + + + + +

    + Additional methods: +

    + +
    + + + + + + + + + + + + + + + + + + +
    NameParameter/parametersDescription
    getInstancename: stringGet specific instance
    getInstances—Get all tippy instances
    +
    + + + +

    + Static methods: +

    + +
    + + + + + + + + + + + + + + + + + + + + + + + +
    NameParameter/parametersDescription
    setDefaultPropstippyProps: NgxTippyPropsSet the default props for each new tippy instance +
    showAll—Show all tooltips
    hideAlloptions?: NgxTippyHideAllOptionsHide all tooltips or hide all except a particular one, additional + hide them with duration
    +
    + + + +
    + Subscription to instances changes +
    + +

    Subscription provides logging for tippy instance state changes:

    + + + +

    It provides data in format:

    + + + + +
    +
    +
    + +

    category

    +

    Some heading

    +

    + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore + et dolore magna aliqua. +

    +

    + + Link + +

    +     +
    +
    + +

    Title

    +

    + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore + et dolore magna aliqua. +

    + +     +
    +
    + +
    +
    +
    +
    +
    +

    + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut + labore et dolore magna aliqua. +

    +

    + + Fill some papers + +

    +
    +
    +     +
    +
    +
    +     + + + +
    Name: {{ changesdiscoDingo.name }}
    +
    Reason: {{ changesdiscoDingo.reason }}
    +     + + +
    Name: {{ changesCosmicCuttlefish.name }}
    +
    Reason: {{ changesCosmicCuttlefish.reason }}
    +     + + +
    Name: {{ changesYakketyYak.name }}
    +
    Reason: {{ changesYakketyYak.reason }}
    +     +     + + +
    diff --git a/projects/ngx-tippy-demo/src/app/pages/service/service.component.scss b/projects/ngx-tippy-demo/src/app/pages/service/service.component.scss new file mode 100644 index 0000000..0ff2eb1 --- /dev/null +++ b/projects/ngx-tippy-demo/src/app/pages/service/service.component.scss @@ -0,0 +1,12 @@ +.tui-text_h3 { + margin-top: 0; +} + +.service-demo { + font-size: 0.9rem; + width: 30%; + + span:not(:first-child) { + margin-left: 1rem; + } +} diff --git a/projects/ngx-tippy-demo/src/app/pages/service/service.component.ts b/projects/ngx-tippy-demo/src/app/pages/service/service.component.ts new file mode 100644 index 0000000..2cc6fc9 --- /dev/null +++ b/projects/ngx-tippy-demo/src/app/pages/service/service.component.ts @@ -0,0 +1,134 @@ +import { AfterViewInit, ChangeDetectionStrategy, ChangeDetectorRef, Component, OnDestroy, OnInit } from '@angular/core'; +import { DestroyService } from '@services'; +import { NgxTippyService } from 'ngx-tippy-wrapper'; +import { InstancesChanges } from 'projects/ngx-tippy-wrapper/src/public-api'; +import { takeUntil, timer } from 'rxjs'; +import { SNIPPETS } from './snippets'; +@Component({ + selector: 't-demo-service', + templateUrl: './service.component.html', + styleUrls: ['./service.component.scss'], + changeDetection: ChangeDetectionStrategy.OnPush, + providers: [DestroyService], +}) +export class ServiceComponent implements OnInit, AfterViewInit, OnDestroy { + public readonly snippets = SNIPPETS; + public readonly discoDingo = 'disco_dingo'; + public readonly cosmicCuttlefish = 'cosmi_cuttlefish'; + public readonly yakketyYak = 'yakkety_yak'; + + public changesdiscoDingo!: InstancesChanges; + public changesCosmicCuttlefish!: InstancesChanges; + public changesYakketyYak!: InstancesChanges; + + constructor( + private readonly tippyService: NgxTippyService, + private readonly destroy$: DestroyService, + private readonly cdr: ChangeDetectorRef + ) {} + + ngOnInit() { + this.subToInstancesChanges(); + } + + ngAfterViewInit() { + this.startShowdiscoDingo(); + this.startShowCosmicCuttlefish(); + this.startShowYakketyYak(); + } + + ngOnDestroy() { + this.tippyService.getInstance(this.discoDingo)?.destroy(); + this.tippyService.getInstance(this.cosmicCuttlefish)?.destroy(); + this.tippyService.getInstance(this.yakketyYak)?.destroy(); + } + + private startShowdiscoDingo() { + timer(1000, 16000) + .pipe(takeUntil(this.destroy$)) + .subscribe(() => { + this.tippyService.show(this.discoDingo); + + setTimeout(() => { + this.tippyService.getInstance(this.discoDingo) && + this.tippyService.setProps(this.discoDingo, { arrow: false }); + }, 3000); + + setTimeout(() => { + this.tippyService.getInstance(this.discoDingo) && + this.tippyService.setProps(this.discoDingo, { placement: 'right', offset: [-20, -80] }); + }, 6000); + + setTimeout(() => { + this.tippyService.getInstance(this.discoDingo) && + this.tippyService.setProps(this.discoDingo, { + content: 'Something new', + animation: 'scale', + }); + }, 9000); + + setTimeout(() => { + this.tippyService.getInstance(this.discoDingo) && this.tippyService.hide(this.discoDingo); + }, 12000); + + setTimeout(() => { + this.tippyService.getInstance(this.discoDingo) && + this.tippyService.setProps(this.discoDingo, { placement: 'left', offset: [0, 20], arrow: true }); + }, 13000); + }); + } + + private startShowCosmicCuttlefish() { + timer(3000, 20000) + .pipe(takeUntil(this.destroy$)) + .subscribe(() => { + this.tippyService.show(this.cosmicCuttlefish); + + setTimeout(() => { + this.tippyService.getInstance(this.cosmicCuttlefish) && + this.tippyService.setProps(this.cosmicCuttlefish, { + content: '😄', + }); + }, 9000); + + setTimeout(() => { + this.tippyService.getInstance(this.cosmicCuttlefish) && this.tippyService.hide(this.cosmicCuttlefish); + }, 15000); + }); + } + + private startShowYakketyYak() { + timer(5000, 15000) + .pipe(takeUntil(this.destroy$)) + .subscribe(() => { + this.tippyService.show(this.yakketyYak); + + setTimeout(() => { + this.tippyService.getInstance(this.yakketyYak) && this.tippyService.disable(this.yakketyYak); + }, 5000); + + setTimeout(() => { + this.tippyService.getInstance(this.yakketyYak) && this.tippyService.enable(this.yakketyYak); + }, 8000); + }); + } + + subToInstancesChanges() { + this.tippyService.instancesChanges.pipe(takeUntil(this.destroy$)).subscribe((changes: InstancesChanges) => { + console.log(`⭐ Changes:`, changes); + if (changes.name === this.discoDingo) { + this.changesdiscoDingo = changes; + } + + if (changes.name === this.cosmicCuttlefish) { + this.changesCosmicCuttlefish = changes; + } + + if (changes.name === this.yakketyYak) { + this.changesYakketyYak = changes; + } + + this.cdr.markForCheck(); + }); + } +} diff --git a/projects/ngx-tippy-demo/src/app/pages/service/snippets.ts b/projects/ngx-tippy-demo/src/app/pages/service/snippets.ts new file mode 100644 index 0000000..7fae622 --- /dev/null +++ b/projects/ngx-tippy-demo/src/app/pages/service/snippets.ts @@ -0,0 +1,65 @@ +const IMPORT_SERVICE = `import { NgxTippyService } from 'ngx-tippy-wrapper'; + +@Component({ ... }) +export class DemoComponent implements OnInit { + constructor(private readonly tippyService: NgxTippyService) {} + ... +}`; + +const CHANGES = `import { Subscription } from 'rxjs'; +import { NgxTippyService } from 'ngx-tippy-wrapper'; + +@Component({ ... }) +export class DemoComponent implements OnInit, OnDestroy { + private instancesChanges$: Subscription; + + constructor(private tippyService: NgxTippyService) {} + + ngOnInit() { + this.subToInstancesChanges(); + } + + ngOnDestroy() { + this.instancesChanges$ && this.instancesChanges$.unsubscribe(); + } + + subToInstancesChanges() { + this.instancesChanges$ = + this.ngxTippyService.instancesChanges.subscribe((changes: InstancesChanges) => { ... }); + } +}`; + +const CHANGES_INTERFACE = `interface InstancesChanges { + name: string; + reason: InstanceChangeReason; + instance: NgxTippyInstance; +} + + type InstanceChangeReason = + "clearDelayTimeouts" + | "destroy" + | "disable" + | "enable" + | "hide" + | "hideWithInteractivity" + | "setContent" + | "setProps" + | "show" + | "unmount" + | "setInstance" +}`; + +export const SNIPPETS = { + import: { + snippet: IMPORT_SERVICE, + languages: ['typescript'], + }, + changes: { + snippet: CHANGES, + languages: ['typescript'], + }, + changes_interface: { + snippet: CHANGES_INTERFACE, + languages: ['typescript'], + }, +};