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 61a3d82..47e32c0 100644 --- a/projects/ngx-tippy-demo/src/app/app-routing.module.ts +++ b/projects/ngx-tippy-demo/src/app/app-routing.module.ts @@ -4,6 +4,7 @@ import { DemoPageComponent } from '@pages/demo-page'; import { GroupedTooltipsComponent } from '@pages/grouped-tooltips'; import { MultipleTooltipsComponent } from '@pages/multiple-tooltips'; import { ServiceComponent } from '@pages/service'; +import { SingletonComponent } from '@pages/singleton'; 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'; @@ -47,6 +48,10 @@ export const routes: Routes = [ path: 'multiple-tooltips', component: MultipleTooltipsComponent, }, + { + path: 'singleton', + component: SingletonComponent, + }, ]; @NgModule({ diff --git a/projects/ngx-tippy-demo/src/app/app.component.scss b/projects/ngx-tippy-demo/src/app/app.component.scss index 07dd329..24b9bbe 100644 --- a/projects/ngx-tippy-demo/src/app/app.component.scss +++ b/projects/ngx-tippy-demo/src/app/app.component.scss @@ -32,8 +32,8 @@ position: fixed; top: $header-height; width: 16rem; - height: 100%; - padding: 2rem 1.5rem; + padding: 2rem 1.5rem 0.5rem 1.5rem; + bottom: 70px; @include max-w($tablet) { width: 10rem; @@ -56,5 +56,10 @@ .t-demo__content { width: 100%; max-width: 62.5rem; +} +.t-demo__footer { + box-shadow: 0 0.125rem 1rem #00000014; + background-color: var(--tui-base-01); + border-top: 0.1rem solid var(--tui-base-03); } diff --git a/projects/ngx-tippy-demo/src/app/app.module.ts b/projects/ngx-tippy-demo/src/app/app.module.ts index f340333..bf64bde 100644 --- a/projects/ngx-tippy-demo/src/app/app.module.ts +++ b/projects/ngx-tippy-demo/src/app/app.module.ts @@ -18,6 +18,7 @@ import { MultipleTooltipsComponent } from '@pages/multiple-tooltips'; import { NotSupportedComponent } from '@pages/not-supported'; import { PropsComponent } from '@pages/props'; import { ServiceComponent } from '@pages/service'; +import { SingletonComponent } from '@pages/singleton'; import { UsageComponent } from '@pages/usage'; import { SchemeService } from '@services'; import { TuiLetModule } from '@taiga-ui/cdk'; @@ -74,6 +75,7 @@ function initialize(SchemeService: SchemeService) { DefaultOrderKeyvaluePipe, GroupedTooltipsComponent, MultipleTooltipsComponent, + SingletonComponent, ], imports: [ AppRoutingModule, diff --git a/projects/ngx-tippy-demo/src/app/components/footer/footer.component.scss b/projects/ngx-tippy-demo/src/app/components/footer/footer.component.scss index b967c00..6a52312 100644 --- a/projects/ngx-tippy-demo/src/app/components/footer/footer.component.scss +++ b/projects/ngx-tippy-demo/src/app/components/footer/footer.component.scss @@ -1,5 +1,5 @@ .footer { - padding: 1.5rem 5rem 1.5rem 0; + padding: 1rem 5rem 1rem 0; text-align: right; } 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 d6e9c56..b89106f 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 @@ -45,7 +45,6 @@ fragment="basic_usage" routerLinkActive="nav__link--active" [routerLinkActiveOptions]="linkActiveOptions" - (click)="onFragmentNav('basic_usage')" > Basic usage @@ -58,7 +57,6 @@ fragment="initializing_on_condition" routerLinkActive="nav__link--active" [routerLinkActiveOptions]="linkActiveOptions" - (click)="onFragmentNav('initializing_on_condition')" > Initializing on condition @@ -101,7 +99,6 @@ fragment="{{ method.value }}" routerLinkActive="nav__link--active" [routerLinkActiveOptions]="linkActiveOptions" - (click)="onFragmentNav(method.value)" > {{ method.view }} @@ -130,7 +127,6 @@ fragment="additional_methods" routerLinkActive="nav__link--active" [routerLinkActiveOptions]="linkActiveOptions" - (click)="onFragmentNav('additional_methods')" > Additional methods @@ -143,7 +139,6 @@ fragment="static_methods" routerLinkActive="nav__link--active" [routerLinkActiveOptions]="linkActiveOptions" - (click)="onFragmentNav('static_methods')" > Static methods @@ -156,7 +151,6 @@ fragment="subscription_instances_changes" routerLinkActive="nav__link--active" [routerLinkActiveOptions]="linkActiveOptions" - (click)="onFragmentNav('subscription_instances_changes')" > Subscription to instances changes @@ -187,6 +181,58 @@ Multiple tooltips on a single element + +
  • + + Singleton + + + + + +
    • diff --git a/projects/ngx-tippy-demo/src/app/components/nav/nav.component.scss b/projects/ngx-tippy-demo/src/app/components/nav/nav.component.scss index 985f031..4d4fafb 100644 --- a/projects/ngx-tippy-demo/src/app/components/nav/nav.component.scss +++ b/projects/ngx-tippy-demo/src/app/components/nav/nav.component.scss @@ -1,5 +1,5 @@ .nav-box { - height: calc(100% - 128px); + height: 100%; } .nav__list { diff --git a/projects/ngx-tippy-demo/src/app/pages/app-content/app-content.component.html b/projects/ngx-tippy-demo/src/app/pages/app-content/app-content.component.html index 1947e26..6ee82d4 100644 --- a/projects/ngx-tippy-demo/src/app/pages/app-content/app-content.component.html +++ b/projects/ngx-tippy-demo/src/app/pages/app-content/app-content.component.html @@ -1,6 +1,6 @@
    -

    Applying content

    +

    Applying content

    You can pass content for tooltip through:

    @@ -13,7 +13,6 @@

    Applying content

    tuiLink routerLink="/applying-content" fragment="{{ method.value }}" - (click)="onFragmentNav(method.value)" > {{ method.view }} @@ -160,7 +159,7 @@

    Applying content

    Use setContent() method exposed by NgxTippyService

    - tippyName is mandatory for this approach +

    tippyName is mandatory for this approach

     -

    Demo page

    +

    Demo page

    @@ -209,7 +209,7 @@
    status="info" class="service-demo tui-space_vertical-4" > - mouseenter | focus | click | focusin | manual +

    mouseenter | focus | click | focusin | manual

    diff --git a/projects/ngx-tippy-demo/src/app/pages/demo-page/demo-page.component.scss b/projects/ngx-tippy-demo/src/app/pages/demo-page/demo-page.component.scss index a975653..3359ac8 100644 --- a/projects/ngx-tippy-demo/src/app/pages/demo-page/demo-page.component.scss +++ b/projects/ngx-tippy-demo/src/app/pages/demo-page/demo-page.component.scss @@ -25,10 +25,6 @@ } } -.tui-text_h3 { - margin-top: 0; -} - t-demo { margin-top: 1.2rem; } diff --git a/projects/ngx-tippy-demo/src/app/pages/getting-started/getting-started.component.html b/projects/ngx-tippy-demo/src/app/pages/getting-started/getting-started.component.html index f24cbd0..215bf88 100644 --- a/projects/ngx-tippy-demo/src/app/pages/getting-started/getting-started.component.html +++ b/projects/ngx-tippy-demo/src/app/pages/getting-started/getting-started.component.html @@ -1,6 +1,6 @@
    -

    Getting started

    +

    Getting started

    Recommended versions to use
    diff --git a/projects/ngx-tippy-demo/src/app/pages/getting-started/getting-started.component.scss b/projects/ngx-tippy-demo/src/app/pages/getting-started/getting-started.component.scss index e1aad8c..e8d1e82 100644 --- a/projects/ngx-tippy-demo/src/app/pages/getting-started/getting-started.component.scss +++ b/projects/ngx-tippy-demo/src/app/pages/getting-started/getting-started.component.scss @@ -1,7 +1,3 @@ -.tui-text_h3 { - margin-top: 0; -} - .tui-list__item { display: flex; align-items: center; diff --git a/projects/ngx-tippy-demo/src/app/pages/grouped-tooltips/grouped-tooltips.component.html b/projects/ngx-tippy-demo/src/app/pages/grouped-tooltips/grouped-tooltips.component.html index 381bfd4..791b554 100644 --- a/projects/ngx-tippy-demo/src/app/pages/grouped-tooltips/grouped-tooltips.component.html +++ b/projects/ngx-tippy-demo/src/app/pages/grouped-tooltips/grouped-tooltips.component.html @@ -1,6 +1,6 @@
    -

    Grouped tooltips

    +

    Grouped tooltips

    If you need to provide unique tooltip content to multiple elements but only initialize once, use the ngx-tippy-group @@ -11,7 +11,8 @@

    Grouped tooltips

    status="info" class="service-demo tui-space_vertical-4" > - For each tooltip within ngx-tippy-group component you should pass data-tippy-grouped attribute +

    For each tooltip within ngx-tippy-group component you + should pass data-tippy-grouped attribute

    +const GROUPED_TEMPLATE_SN = ` + + + +
    + Overridden properties +
    + +

    To override singletonProps by the individual tippy props use + data-tippy attributes: +

    + + + + + + + + + + + + + + + + +
    + Smooth transitions +
    + +

    Use the moveTransition property which is the transition between moves:

    + + + + + + + + + + +
    + Programmatically control singleton instance +
    + +

    Get singleton instance(s):

    + +
    + + + + + + + + + + + + + + + + + + +
    Method nameMethod parameterShort description
    getSingletonInstancename: stringGet specific singleton instance
    getSingletonInstances—Get all tippy singleton instances
    + + +

    + + Available methods described here + +

    +     +
    + + +

    + Its possible to control each singleton instance separately: +

    + + + + + + + + + + + + + + + + + + + Show first tooltip + + + + Show second tooltip + + + + Show third tooltip + + +
    diff --git a/projects/ngx-tippy-demo/src/app/pages/singleton/singleton.component.scss b/projects/ngx-tippy-demo/src/app/pages/singleton/singleton.component.scss new file mode 100644 index 0000000..91aaaf2 --- /dev/null +++ b/projects/ngx-tippy-demo/src/app/pages/singleton/singleton.component.scss @@ -0,0 +1,8 @@ +.singleton__btn:not(:first-child) { + margin-left: 1rem; +} + +.singleton__link:not(:first-child) { + display: block; + margin-left: 1rem; +} diff --git a/projects/ngx-tippy-demo/src/app/pages/singleton/singleton.component.ts b/projects/ngx-tippy-demo/src/app/pages/singleton/singleton.component.ts new file mode 100644 index 0000000..a192310 --- /dev/null +++ b/projects/ngx-tippy-demo/src/app/pages/singleton/singleton.component.ts @@ -0,0 +1,80 @@ +import { AfterViewInit, ChangeDetectionStrategy, ChangeDetectorRef, Component } from '@angular/core'; +import { Schemes } from '@interfaces'; +import { DestroyService, SchemeService } from '@services'; +import { NgxSingletonProps, NgxTippyService } from 'ngx-tippy-wrapper'; +import { takeUntil } from 'rxjs'; +import { followCursor } from 'tippy.js'; +import { SNIPPETS } from './snippets'; + +@Component({ + selector: 'app-singleton', + templateUrl: './singleton.component.html', + styleUrls: ['./singleton.component.scss'], + changeDetection: ChangeDetectionStrategy.OnPush, + providers: [DestroyService], +}) +export class SingletonComponent implements AfterViewInit { + public readonly snippets = SNIPPETS; + public isShowDemo: boolean = true; + + public singletonProps: NgxSingletonProps = { + arrow: false, + placement: 'right', + followCursor: true, + plugins: [followCursor], + offset: [-20, 20], + }; + + public smoothTransitions: NgxSingletonProps = { + arrow: false, + placement: 'top', + moveTransition: 'transform 0.4s cubic-bezier(.22,.68,0,1.71)', + }; + + public singletonOverriddenProps: NgxSingletonProps = { + overrides: ['arrow', 'placement'], + }; + + constructor( + private readonly schemeService: SchemeService, + private readonly destroy$: DestroyService, + private readonly cdr: ChangeDetectorRef, + private readonly tippyService: NgxTippyService + ) {} + + ngAfterViewInit() { + this.listenForSchemeChange(); + } + + public showTooltip(id: string | number) { + this.tippyService.getSingletonInstance('groovy_gorilla')?.show(id); + } + + private listenForSchemeChange() { + this.schemeService.scheme$.pipe(takeUntil(this.destroy$)).subscribe(scheme => { + const theme = scheme === Schemes.Dark ? 'light' : 'dark'; + this.singletonProps = { + ...this.singletonProps, + theme, + }; + + this.singletonOverriddenProps = { + ...this.singletonOverriddenProps, + theme, + }; + + this.smoothTransitions = { + ...this.smoothTransitions, + theme, + }; + + this.isShowDemo = false; + this.cdr.markForCheck(); + + setTimeout(() => { + this.isShowDemo = true; + this.cdr.markForCheck(); + }, 0); + }); + } +} diff --git a/projects/ngx-tippy-demo/src/app/pages/singleton/snippets.ts b/projects/ngx-tippy-demo/src/app/pages/singleton/snippets.ts new file mode 100644 index 0000000..4b1ac6d --- /dev/null +++ b/projects/ngx-tippy-demo/src/app/pages/singleton/snippets.ts @@ -0,0 +1,166 @@ +const SINGLETON_TEMPLATE_SN = ` + +`; + +const SINGLETON_COMPONENT_SN = `import { NgxSingletonProps } from 'ngx-tippy-wrapper'; +import { followCursor } from 'tippy.js'; + +@Component({ + ... +}) +class SingletonComponent { + public readonly singletonProps: NgxSingletonProps = { + arrow: false, + placement: 'right', + followCursor: true, + plugins: [followCursor], + offset: [-20, 20], + }; +}`; + +const SINGLETON_OVER_TEMPLATE_SN = ` + + + + + +`; + +const SINGLETON_OVER_COMPONENT_SN = `import { NgxSingletonProps } from 'ngx-tippy-wrapper'; + +@Component({ + ... +}) +export class SingletonComponent { + public readonly singletonOverriddenProps: NgxSingletonProps = { + overrides: ['arrow', 'placement'], + }; +}`; + +const SINGLETON_SMOOTH_COMPONENT_SN = `import { NgxSingletonProps } from 'ngx-tippy-wrapper'; + +@Component({ + ... +}) +export class SingletonComponent { + public readonly smoothTransitions: NgxSingletonProps = { + arrow: false, + placement: 'top', + moveTransition: 'transform 0.4s cubic-bezier(.22,.68,0,1.71)', + }; +}`; + +const SINGLETON_PROG_TEMPLATE_SN = ` + + + + + + + +// Show first child + + +// Show child instance at given index + + +// Show child with tippyName + +`; + +const SINGLETON_PROG_COMPONENT_SN = `import { NgxTippyService } from 'ngx-tippy-wrapper'; + +@Component({ + ... +}) +export class SingletonComponent { + + constructor(private readonly tippyService: NgxTippyService) {} + + public showTooltip(id?: string | number) { + this.tippyService.getSingletonInstance('groovy_gorilla')?.show(id); + } +}`; + +export const SNIPPETS = { + singleton_template_sn: { + snippet: SINGLETON_TEMPLATE_SN, + languages: ['html'], + }, + singleton_component_sn: { + snippet: SINGLETON_COMPONENT_SN, + languages: ['typescript'], + }, + singleton_over_template_sn: { + snippet: SINGLETON_OVER_TEMPLATE_SN, + languages: ['html'], + }, + singleton_over_component_sn: { + snippet: SINGLETON_OVER_COMPONENT_SN, + languages: ['typescript'], + }, + singleton_smooth_component_sn: { + snippet: SINGLETON_SMOOTH_COMPONENT_SN, + languages: ['typescript'], + }, + singleton_prog_template_sn: { + snippet: SINGLETON_PROG_TEMPLATE_SN, + languages: ['html'], + }, + singleton_prog_component_sn: { + snippet: SINGLETON_PROG_COMPONENT_SN, + languages: ['typescript'], + }, +}; diff --git a/projects/ngx-tippy-demo/src/app/pages/usage/usage.component.html b/projects/ngx-tippy-demo/src/app/pages/usage/usage.component.html index 9c929a3..ed509e7 100644 --- a/projects/ngx-tippy-demo/src/app/pages/usage/usage.component.html +++ b/projects/ngx-tippy-demo/src/app/pages/usage/usage.component.html @@ -1,6 +1,6 @@
    -

    Usage

    +

    Usage

    @@ -73,12 +73,12 @@

    Usage

    - - View all available properties - +

    + View all available properties +

    diff --git a/projects/ngx-tippy-demo/src/app/pages/usage/usage.component.scss b/projects/ngx-tippy-demo/src/app/pages/usage/usage.component.scss index c19fed5..60e45de 100644 --- a/projects/ngx-tippy-demo/src/app/pages/usage/usage.component.scss +++ b/projects/ngx-tippy-demo/src/app/pages/usage/usage.component.scss @@ -1,7 +1,3 @@ -.tui-text_h3 { - margin-top: 0; -} - ::ng-deep { .tippy-box[data-theme=light].custom-class { color: var(--tui-positive); diff --git a/projects/ngx-tippy-demo/src/app/shared/scroll.component.ts b/projects/ngx-tippy-demo/src/app/shared/scroll.component.ts index 4a6ccc5..1ff47ee 100644 --- a/projects/ngx-tippy-demo/src/app/shared/scroll.component.ts +++ b/projects/ngx-tippy-demo/src/app/shared/scroll.component.ts @@ -10,13 +10,9 @@ export class ScrollComponent { this.activatedRoute.fragment.subscribe(anchor => { anchor && setTimeout(() => { + console.log(`🚀 Scrolling to:`, anchor); this.scroller.scrollToAnchor(anchor); - }, 0); + }, 100); }); } - - protected onFragmentNav(anchor: string) { - console.log(`🚀 Scroll to`, anchor); - this.scroller.scrollToAnchor(anchor); - } } diff --git a/projects/ngx-tippy-demo/src/styles/common.scss b/projects/ngx-tippy-demo/src/styles/common.scss index 3c9d703..10dc79d 100644 --- a/projects/ngx-tippy-demo/src/styles/common.scss +++ b/projects/ngx-tippy-demo/src/styles/common.scss @@ -121,6 +121,10 @@ tui-notification { .nav__link.nav__link--active { color: var(--tui-support-16); + + &:hover { + color: #343f64; + } } .tippy-box[data-theme='pastel'] {