-
Notifications
You must be signed in to change notification settings - Fork 29
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
37 changed files
with
974 additions
and
11 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,4 +1,4 @@ | ||
| /.angular/cache | ||
| /.angular | ||
| # Logs | ||
| logs | ||
| *.log | ||
|
|
||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
61 changes: 61 additions & 0 deletions
61
apps/ngx-ui-tour-demo/src/app/prime-ng-popover/examples/default-template.md
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,61 @@ | ||
| ```html | ||
| <tour-step-template> | ||
| <ng-template let-step="step"> | ||
| <div | ||
| [style.width]="step.stepDimensions?.width" | ||
| [style.min-width]="step.stepDimensions?.minWidth" | ||
| [style.max-width]="step.stepDimensions?.maxWidth" | ||
| class="main-container" | ||
| > | ||
| <div class="title-container"> | ||
| <div class="title">{{ step?.title }}</div> | ||
| <p-button | ||
| severity="secondary" | ||
| icon="pi pi-times" | ||
| ariaLabel="Close" | ||
| variant="text" | ||
| [rounded]="true" | ||
| (click)="tourService.end()" | ||
| /> | ||
| </div> | ||
|
|
||
| <p | ||
| class="card-text" | ||
| [innerHTML]="step.content" | ||
| ></p> | ||
|
|
||
| <div | ||
| class="buttons" | ||
| [class.no-progress]="!step.showProgress" | ||
| > | ||
| <p-button | ||
| [disabled]="!tourService.hasPrev(step)" | ||
| icon="pi pi-angle-left" | ||
| iconPos="left" | ||
| severity="secondary" | ||
| [label]="step.prevBtnTitle" | ||
| (click)="tourService.prev()" | ||
| /> | ||
| @if (step.showProgress) { | ||
| <div class="progress">{{ tourService.steps.indexOf(step) + 1 }} / {{ tourService.steps.length }}</div> | ||
| } | ||
|
|
||
| @if (tourService.hasNext(step) && !step.nextOnAnchorClick) { | ||
| <p-button | ||
| icon="pi pi-angle-right" | ||
| iconPos="right" | ||
| [label]="step.nextBtnTitle" | ||
| (click)="tourService.next()" | ||
| /> | ||
| } | ||
| @if (!tourService.hasNext(step)) { | ||
| <p-button | ||
| [label]="step.endBtnTitle" | ||
| (click)="tourService.end()" | ||
| /> | ||
| } | ||
| </div> | ||
| </div> | ||
| </ng-template> | ||
| </tour-step-template> | ||
| ``` |
69 changes: 69 additions & 0 deletions
69
apps/ngx-ui-tour-demo/src/app/prime-ng-popover/prime-ng-popover.component.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,69 @@ | ||
| <tui-doc-page | ||
| header="PrimeNG" | ||
| package="ngx-ui-tour-primeng" | ||
| > | ||
| <ng-template pageTab> | ||
| <p> | ||
| <code>ngx-ui-tour</code> is a UI tour library built for Angular. It's inspired by | ||
| <a tuiLink target="_blank" tourAnchor="angular-ui-tour" href="https://benmarch.github.io/angular-ui-tour">angular-ui-tour</a>. | ||
| </p> | ||
| <p> | ||
| <code>TourPrimeNgModule</code> is an implementation of the tour UI that uses | ||
| <a tuiLink href="https://primeng.org" target="_blank">PrimeNG</a> Popover to display tour steps. | ||
| </p> | ||
| <p> | ||
| <button | ||
| tuiButton | ||
| type="button" | ||
| (click)="tourService.start()" | ||
| tourAnchor="start.tour" | ||
| > | ||
| Start Demo Tour | ||
| </button> | ||
| </p> | ||
| </ng-template> | ||
| <ng-template pageTab> | ||
| <app-header tourAnchor="installation" id="installation">Installation</app-header> | ||
|
|
||
| <ol> | ||
| <li> | ||
| <code>npm install ngx-ui-tour-primeng primeng @primeng/themes primeicons</code> | ||
| </li> | ||
| <li> | ||
| Import <code>TourPrimeNgModule</code> into your app module | ||
| </li> | ||
| <li> | ||
| Make sure <code>RouterModule</code> is imported in your app module | ||
| </li> | ||
| <li> | ||
| Make sure PrimeNG is | ||
| <a tuiLink href="https://primeng.org/installation" target="_blank">installed correctly</a> | ||
| </li> | ||
| </ol> | ||
| <app-usage | ||
| moduleName="TourPrimeNgModule" | ||
| ></app-usage> | ||
| </ng-template> | ||
| <ng-template pageTab> | ||
| <app-step-config | ||
| [isCloseOnOutsideClickVisible]="true" | ||
| /> | ||
| <app-tour-service-api/> | ||
| <app-events/> | ||
| </ng-template> | ||
| <ng-template pageTab> | ||
| <app-faq | ||
| disablePageScrollingIntroducedIn="1.0" | ||
| /> | ||
| </ng-template> | ||
| <ng-template pageTab> | ||
| <app-hotkeys/> | ||
| <app-defaults/> | ||
| <app-custom-template | ||
| [defaultTemplate]="defaultTemplate" | ||
| /> | ||
| <app-styling-active-tour-anchor/> | ||
| </ng-template> | ||
| </tui-doc-page> | ||
|
|
||
| <tour-step-template/> |
3 changes: 3 additions & 0 deletions
3
apps/ngx-ui-tour-demo/src/app/prime-ng-popover/prime-ng-popover.component.scss
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,3 @@ | ||
| app-header { | ||
| margin-top: 0; | ||
| } |
121 changes: 121 additions & 0 deletions
121
apps/ngx-ui-tour-demo/src/app/prime-ng-popover/prime-ng-popover.component.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,121 @@ | ||
| import {ChangeDetectionStrategy, Component, inject, type OnInit} from '@angular/core'; | ||
| import {TuiAddonDoc} from '@taiga-ui/addon-doc'; | ||
| import {type IStepOption, TourAnchorPrimeNgDirective, TourPrimeNgModule, TourService} from 'ngx-ui-tour-primeng'; | ||
| import {TuiButton, TuiLink} from '@taiga-ui/core'; | ||
| import {provideTourDirective, SHARED_COMPONENTS} from '../shared'; | ||
| import defaultTemplate from './examples/default-template.md' with {loader: 'text'}; | ||
| import {DELAY_AFTER_NAVIGATION} from '../app.providers'; | ||
|
|
||
| @Component({ | ||
| selector: 'app-prime-ng-popover', | ||
| imports: [ | ||
| TuiAddonDoc, | ||
| TuiLink, | ||
| TourPrimeNgModule, | ||
| TuiButton, | ||
| SHARED_COMPONENTS | ||
| ], | ||
| templateUrl: './prime-ng-popover.component.html', | ||
| styleUrl: './prime-ng-popover.component.scss', | ||
| changeDetection: ChangeDetectionStrategy.OnPush, | ||
| providers: [ | ||
| provideTourDirective(TourAnchorPrimeNgDirective) | ||
| ] | ||
| }) | ||
| export default class PrimeNgPopoverComponent implements OnInit { | ||
|
|
||
| readonly tourSteps: IStepOption[] = [{ | ||
| anchorId: 'start.tour', | ||
| content: 'Welcome to the Ngx-UI-Tour tour!', | ||
| title: 'Welcome' | ||
| }, { | ||
| anchorId: 'angular-ui-tour', | ||
| content: 'Thanks to angular-ui-tour for the inspiration for the library', | ||
| title: 'angular-ui-tour' | ||
| }, { | ||
| anchorId: 'installation', | ||
| content: 'First, install the library...', | ||
| title: 'Installation', | ||
| route: 'prime-ng/Setup' | ||
| }, { | ||
| anchorId: 'usage', | ||
| content: '...then use it.', | ||
| title: 'Usage', | ||
| route: 'prime-ng/Setup' | ||
| }, { | ||
| anchorId: 'tourService.start', | ||
| content: 'Don\'t forget to actually start the tour.', | ||
| title: 'Start the tour', | ||
| route: 'prime-ng/Setup' | ||
| }, { | ||
| anchorId: 'config.anchorId', | ||
| content: 'Every step needs an anchor.', | ||
| title: 'Anchor', | ||
| route: 'prime-ng/API' | ||
| }, { | ||
| anchorId: 'config.enableBackdrop', | ||
| content: 'You can enable backdrop to highlight active element.', | ||
| title: 'Backdrop', | ||
| enableBackdrop: true, | ||
| route: 'prime-ng/API' | ||
| }, { | ||
| anchorId: 'config.route', | ||
| content: 'Tours can span multiple routes.', | ||
| title: 'Route', | ||
| route: 'prime-ng/API' | ||
| }, { | ||
| anchorId: 'config.centerAnchorOnScroll', | ||
| content: 'Enable this config to keep active anchor element centered when possible.', | ||
| title: 'Center active anchor', | ||
| route: 'prime-ng/API' | ||
| }, { | ||
| anchorId: 'config.smoothScroll', | ||
| content: 'Enable "smoothScroll" option to smoothly scroll to an active element.', | ||
| title: 'Smooth scroll', | ||
| route: 'prime-ng/API' | ||
| }, { | ||
| anchorId: 'config.buttons.custom', | ||
| content: 'You can set custom step button names', | ||
| title: 'Button Titles', | ||
| prevBtnTitle: 'My Prev', | ||
| nextBtnTitle: 'My Next', | ||
| endBtnTitle: 'My End', | ||
| route: 'prime-ng/API', | ||
| stepDimensions: { | ||
| maxWidth: '350px' | ||
| } | ||
| }, { | ||
| anchorId: 'config.isAsync', | ||
| content: 'Mark your step as async if anchor element is added to DOM with a delay', | ||
| title: 'Wait for async event', | ||
| route: 'prime-ng/API' | ||
| }, { | ||
| anchorId: 'config.nextOnAnchorClick', | ||
| content: 'Click on the config description to go to the next step', | ||
| title: 'Next on Anchor Click', | ||
| route: 'prime-ng/API', | ||
| nextOnAnchorClick: true | ||
| }, { | ||
| anchorId: 'events', | ||
| content: 'You can subscribe to events', | ||
| title: 'Events', | ||
| route: 'prime-ng/API' | ||
| }, { | ||
| anchorId: 'hotkeys', | ||
| content: 'Try using the hotkeys to navigate through the tour.', | ||
| title: 'Hotkeys', | ||
| route: 'prime-ng/Misc' | ||
| }]; | ||
| readonly defaultTemplate = defaultTemplate; | ||
|
|
||
| protected readonly tourService = inject(TourService); | ||
| private readonly delayAfterNavigation = inject(DELAY_AFTER_NAVIGATION); | ||
|
|
||
| ngOnInit() { | ||
| this.tourService.initialize(this.tourSteps, { | ||
| route: 'prime-ng', | ||
| delayAfterNavigation: this.delayAfterNavigation | ||
| }); | ||
| } | ||
|
|
||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.