-
Notifications
You must be signed in to change notification settings - Fork 87
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* fix: click on image of image-text-button triggers change * i18n: rename No to Product ID in tacton BOM * i18n: rename submit to request proposal * fix: display extended message on successful submission of firm request * i18n: shorten reset configuration to just reset * fix: text-buttons as radio button group * fix: hide more components if product is configurable * fix: styling improvements for step buttons * fix: mark current sub group as active with intersection observer
- Loading branch information
Showing
31 changed files
with
404 additions
and
198 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,10 +1,11 @@ | ||
| import { NgModule } from '@angular/core'; | ||
|
|
||
| import { ClickOutsideDirective } from './directives/click-outside.directive'; | ||
| import { IntersectionObserverDirective } from './directives/intersection-observer.directive'; | ||
| import { ServerHtmlDirective } from './directives/server-html.directive'; | ||
|
|
||
| @NgModule({ | ||
| declarations: [ClickOutsideDirective, ServerHtmlDirective], | ||
| exports: [ClickOutsideDirective, ServerHtmlDirective], | ||
| declarations: [ClickOutsideDirective, IntersectionObserverDirective, ServerHtmlDirective], | ||
| exports: [ClickOutsideDirective, IntersectionObserverDirective, ServerHtmlDirective], | ||
| }) | ||
| export class DirectivesModule {} |
114 changes: 114 additions & 0 deletions
114
src/app/core/directives/intersection-observer.directive.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,114 @@ | ||
| import { isPlatformBrowser } from '@angular/common'; | ||
| import { | ||
| Directive, | ||
| ElementRef, | ||
| EventEmitter, | ||
| Inject, | ||
| Input, | ||
| OnDestroy, | ||
| OnInit, | ||
| Output, | ||
| PLATFORM_ID, | ||
| } from '@angular/core'; | ||
| import { Observable, Subject } from 'rxjs'; | ||
| import { debounceTime, filter, takeUntil } from 'rxjs/operators'; | ||
|
|
||
| /** | ||
| * detect visibility status of components via IntersectionObserver | ||
| * | ||
| * taken from: https://blog.bitsrc.io/angular-maximizing-performance-with-the-intersection-observer-api-23d81312f178 | ||
| */ | ||
| @Directive({ | ||
| selector: '[ishIntersectionObserver]', | ||
| }) | ||
| export class IntersectionObserverDirective implements OnInit, OnDestroy { | ||
| @Input() intersectionDebounce = 0; | ||
| @Input() intersectionRootMargin = '0px'; | ||
| @Input() intersectionRoot: HTMLElement; | ||
| @Input() intersectionThreshold: number | number[]; | ||
|
|
||
| @Output() visibilityChange = new EventEmitter<IntersectionStatus>(); | ||
|
|
||
| private destroy$ = new Subject(); | ||
|
|
||
| constructor(private element: ElementRef, @Inject(PLATFORM_ID) private platformId: string) {} | ||
|
|
||
| ngOnInit() { | ||
| if (isPlatformBrowser(this.platformId)) { | ||
| const element = this.element.nativeElement; | ||
| const config = { | ||
| root: this.intersectionRoot, | ||
| rootMargin: this.intersectionRootMargin, | ||
| threshold: this.intersectionThreshold, | ||
| }; | ||
|
|
||
| fromIntersectionObserver(element, config, this.intersectionDebounce) | ||
| .pipe(takeUntil(this.destroy$)) | ||
| .subscribe(status => { | ||
| this.visibilityChange.emit(status); | ||
| }); | ||
| } | ||
| } | ||
|
|
||
| ngOnDestroy() { | ||
| this.destroy$.next(); | ||
| this.destroy$.complete(); | ||
| } | ||
| } | ||
|
|
||
| export type IntersectionStatus = 'Visible' | 'Pending' | 'NotVisible'; | ||
|
|
||
| const fromIntersectionObserver = (element: HTMLElement, config: IntersectionObserverInit, debounce = 0) => | ||
| new Observable<IntersectionStatus>(subscriber => { | ||
| const subject$ = new Subject<{ | ||
| entry: IntersectionObserverEntry; | ||
| observer: IntersectionObserver; | ||
| }>(); | ||
|
|
||
| const intersectionObserver = new IntersectionObserver((entries, observer) => { | ||
| entries.forEach(entry => { | ||
| if (isIntersecting(entry)) { | ||
| subject$.next({ entry, observer }); | ||
| } | ||
| }); | ||
| }, config); | ||
|
|
||
| subject$.subscribe(() => { | ||
| subscriber.next('Pending'); | ||
| }); | ||
|
|
||
| subject$.pipe(debounceTime(debounce), filter(Boolean)).subscribe(async ({ entry }) => { | ||
| const isEntryVisible = await isVisible(entry.target as HTMLElement); | ||
|
|
||
| if (isEntryVisible) { | ||
| subscriber.next('Visible'); | ||
| } else { | ||
| subscriber.next('NotVisible'); | ||
| } | ||
| }); | ||
|
|
||
| intersectionObserver.observe(element); | ||
|
|
||
| return { | ||
| unsubscribe() { | ||
| intersectionObserver.disconnect(); | ||
| // tslint:disable-next-line rxjs-no-subject-unsubscribe ban | ||
| subject$.unsubscribe(); | ||
| }, | ||
| }; | ||
| }); | ||
|
|
||
| async function isVisible(element: HTMLElement) { | ||
| return new Promise(resolve => { | ||
| const observer = new IntersectionObserver(([entry]) => { | ||
| resolve(entry.isIntersecting); | ||
| observer.disconnect(); | ||
| }); | ||
|
|
||
| observer.observe(element); | ||
| }); | ||
| } | ||
|
|
||
| function isIntersecting(entry: IntersectionObserverEntry) { | ||
| return entry.isIntersecting || entry.intersectionRatio > 0; | ||
| } |
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
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
9 changes: 5 additions & 4 deletions
9
src/app/extensions/tacton/pages/configure/tacton-group/tacton-group.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 |
|---|---|---|
| @@ -1,15 +1,16 @@ | ||
| <ng-container *ngIf="group && group.hasVisibleParameters"> | ||
| <h2 [id]="'anchor-' + group.name" *ngIf="!isSubGroup; else subGroup">{{ group?.description }}</h2> | ||
| <h2 [id]="'anchor-' + group.name" *ngIf="!level; else subGroup">{{ group?.description }}</h2> | ||
| <ng-template #subGroup> | ||
| <span class="anchor" [id]="'anchor-' + group.name"></span> | ||
| <h3>{{ group.description }}</h3> | ||
| <h3 ishIntersectionObserver (visibilityChange)="onIntersection(group.name, $event)">{{ group.description }}</h3> | ||
| </ng-template> | ||
| <img *ngIf="group.properties?.tc_group_picture" [src]="getImageUrl(group.properties?.tc_group_picture) | async" /> | ||
|
|
||
| <ng-container *ngFor="let item of group?.members"> | ||
| <ish-tacton-group *ngIf="isGroup(item); else isParameter" [group]="item" [isSubGroup]="true"></ish-tacton-group> | ||
| <ng-container *ngFor="let item of group?.members; let last = last"> | ||
| <ish-tacton-group *ngIf="isGroup(item); else isParameter" [group]="item" [level]="level + 1"></ish-tacton-group> | ||
| <ng-template #isParameter> | ||
| <ish-tacton-parameter [item]="item"></ish-tacton-parameter> | ||
| </ng-template> | ||
| <span *ngIf="!last" ishIntersectionObserver (visibilityChange)="onIntersection(group.name, $event)"></span> | ||
| </ng-container> | ||
| </ng-container> |
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
2 changes: 1 addition & 1 deletion
2
...tacton/pages/configure/tacton-image-text-buttons/tacton-image-text-buttons.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
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
48 changes: 28 additions & 20 deletions
48
.../extensions/tacton/pages/configure/tacton-step-buttons/tacton-step-buttons.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 |
|---|---|---|
| @@ -1,22 +1,30 @@ | ||
| <div *ngIf="stepConfig$ | async as config" class="d-flex flex-nowrap justify-content-between"> | ||
| <button class="btn btn-secondary no-wrap" (click)="reset()" data-testing-id="reset-configuration-button"> | ||
| {{ 'tacton.step_buttons.reset.label' | translate }} | ||
| </button> | ||
| <div> | ||
| <div *ngIf="config.previousStep" class="d-inline-block"> | ||
| <button class="btn btn-secondary" (click)="changeStep(config.previousStep)" data-testing-id="previous-button"> | ||
| {{ 'tacton.step_buttons.previous.label' | translate }} | ||
| </button> | ||
| </div> | ||
| <div *ngIf="config.nextStep" class="d-inline-block ml-2"> | ||
| <button class="btn btn-primary" (click)="changeStep(config.nextStep)" data-testing-id="next-button"> | ||
| {{ 'tacton.step_buttons.next.label' | translate }} | ||
| </button> | ||
| </div> | ||
| <div *ngIf="!config.nextStep" class="d-inline-block ml-2"> | ||
| <button class="btn btn-primary" (click)="submit()" data-testing-id="submit-button"> | ||
| {{ 'tacton.step_buttons.submit.label' | translate }} | ||
| </button> | ||
| </div> | ||
| <div *ngIf="stepConfig$ | async as config" class="d-flex flex-nowrap justify-content-between tacton-buttonbar"> | ||
| <div class="d-inline-block mr-auto"> | ||
| <button | ||
| class="btn btn-secondary no-wrap text-nowrap" | ||
| (click)="reset()" | ||
| data-testing-id="reset-configuration-button" | ||
| > | ||
| {{ 'tacton.step_buttons.reset.label' | translate }} | ||
| </button> | ||
| </div> | ||
| <div *ngIf="config.previousStep" class="d-inline-block ml-2"> | ||
| <button | ||
| class="btn btn-secondary text-nowrap" | ||
| (click)="changeStep(config.previousStep)" | ||
| data-testing-id="previous-button" | ||
| > | ||
| {{ 'tacton.step_buttons.previous.label' | translate }} | ||
| </button> | ||
| </div> | ||
| <div *ngIf="config.nextStep" class="d-inline-block ml-2"> | ||
| <button class="btn btn-primary text-nowrap" (click)="changeStep(config.nextStep)" data-testing-id="next-button"> | ||
| {{ 'tacton.step_buttons.next.label' | translate }} | ||
| </button> | ||
| </div> | ||
| <div *ngIf="!config.nextStep" class="d-inline-block ml-2"> | ||
| <button class="btn btn-primary text-nowrap" (click)="submit()" data-testing-id="submit-button"> | ||
| {{ 'tacton.step_buttons.submit.label' | translate }} | ||
| </button> | ||
| </div> | ||
| </div> |
Oops, something went wrong.