tailjng 0.0.55 → 0.0.57

package/src/lib/components/coach-mark/coach-mark.component.ts

@@ -0,0 +1,45 @@
+import { CommonModule } from '@angular/common';
+import { Component, Input, TemplateRef } from '@angular/core';
+
+type CoachPosition =
+  | 'top'
+  | 'top-left'
+  | 'top-right'
+  | 'bottom'
+  | 'bottom-left'
+  | 'bottom-right'
+  | 'left'
+  | 'left-top'
+  | 'left-bottom'
+  | 'right'
+  | 'right-top'
+  | 'right-bottom';
+
+@Component({
+  selector: 'JCoachMarkOverlay',
+  imports: [CommonModule],
+  templateUrl: './coach-mark.component.html',
+  styleUrl: './coach-mark.component.scss'
+})
+export class JCoachMarkComponent {
+  @Input() title = '';
+  @Input() description = '';
+  @Input() contentTemplate?: TemplateRef<unknown>;
+
+  @Input() spotlight = true;
+
+  @Input() cardTop = 0;
+  @Input() cardLeft = 0;
+
+  @Input() targetTop = 0;
+  @Input() targetLeft = 0;
+  @Input() targetWidth = 0;
+  @Input() targetHeight = 0;
+  @Input() targetRadius = '12px';
+
+  @Input() position: CoachPosition = 'bottom';
+
+  @Input() width = '300px';
+  @Input() maxWidth = '340px';
+  @Input() zIndex = 99999;
+}

package/src/lib/components/coach-mark/coach-mark.directive.ts

@@ -0,0 +1,256 @@
+import {
+    ApplicationRef,
+    ComponentRef,
+    Directive,
+    ElementRef,
+    EnvironmentInjector,
+    HostListener,
+    Input,
+    OnDestroy,
+    TemplateRef,
+    createComponent
+} from '@angular/core';
+
+import { JCoachMarkComponent } from './coach-mark.component';
+
+type CoachTrigger = 'hover' | 'click';
+type CoachPosition =
+  | 'top'
+  | 'top-left'
+  | 'top-right'
+  | 'bottom'
+  | 'bottom-left'
+  | 'bottom-right'
+  | 'left'
+  | 'left-top'
+  | 'left-bottom'
+  | 'right'
+  | 'right-top'
+  | 'right-bottom';
+
+@Directive({
+    selector: '[jCoachMark]',
+    standalone: true
+})
+export class JCoachMarkDirective implements OnDestroy {
+    @Input() coachTitle = '';
+    @Input() coachDescription = '';
+    @Input() coachContent?: TemplateRef<unknown>;
+
+    @Input() coachTrigger: CoachTrigger = 'click';
+    @Input() coachPosition: CoachPosition = 'bottom';
+
+    @Input() coachSpotlight = true;
+    @Input() coachDisabled = false;
+
+    @Input() coachWidth = '300px';
+    @Input() coachMaxWidth = '340px';
+    @Input() coachOffset = 12;
+    @Input() coachRadius = '12px';
+
+    private overlayRef?: ComponentRef<JCoachMarkComponent>;
+    private isOpen = false;
+
+    private scrollHandler = () => this.updatePosition();
+    private resizeHandler = () => this.updatePosition();
+
+    constructor(
+        private elementRef: ElementRef<HTMLElement>,
+        private appRef: ApplicationRef,
+        private injector: EnvironmentInjector
+    ) { }
+
+    @HostListener('mouseenter')
+    onMouseEnter() {
+        if (this.coachTrigger === 'hover') this.open();
+    }
+
+    @HostListener('mouseleave')
+    onMouseLeave() {
+        if (this.coachTrigger === 'hover') this.close();
+    }
+
+    @HostListener('click', ['$event'])
+    onClick(event: MouseEvent) {
+        if (this.coachTrigger !== 'click') return;
+
+        event.stopPropagation();
+
+        this.isOpen ? this.close() : this.open();
+
+        setTimeout(() => {
+            document.addEventListener('click', this.documentClickHandler);
+        });
+    }
+
+    private documentClickHandler = (event: MouseEvent) => {
+        const host = this.elementRef.nativeElement;
+
+        if (!host.contains(event.target as Node)) {
+            this.close();
+        }
+    };
+
+    private open() {
+        if (this.coachDisabled) return;
+        if (this.overlayRef) return;
+
+        this.overlayRef = createComponent(JCoachMarkComponent, {
+            environmentInjector: this.injector
+        });
+
+        this.overlayRef.instance.title = this.coachTitle;
+        this.overlayRef.instance.description = this.coachDescription;
+        this.overlayRef.instance.contentTemplate = this.coachContent;
+
+        this.overlayRef.instance.spotlight = this.coachSpotlight;
+        this.overlayRef.instance.position = this.coachPosition;
+
+        this.overlayRef.instance.width = this.coachWidth;
+        this.overlayRef.instance.maxWidth = this.coachMaxWidth;
+        this.overlayRef.instance.targetRadius = this.coachRadius;
+
+        this.appRef.attachView(this.overlayRef.hostView);
+
+        document.body.appendChild(
+            this.overlayRef.location.nativeElement
+        );
+
+        this.isOpen = true;
+
+        requestAnimationFrame(() => this.updatePosition());
+
+        window.addEventListener('scroll', this.scrollHandler, true);
+        window.addEventListener('resize', this.resizeHandler);
+    }
+
+    private updatePosition() {
+        if (!this.overlayRef) return;
+
+        const host = this.elementRef.nativeElement;
+        const rect = host.getBoundingClientRect();
+
+        const cardElement = this.overlayRef.location.nativeElement
+            .querySelector('.j-coach-card') as HTMLElement;
+
+        if (!cardElement) return;
+
+        const cardRect = cardElement.getBoundingClientRect();
+
+        let cardTop = 0;
+        let cardLeft = 0;
+
+        const position = this.coachPosition;
+
+        const alignCenterX = rect.left + rect.width / 2 - cardRect.width / 2;
+        const alignLeft = rect.left;
+        const alignRight = rect.right - cardRect.width;
+
+        const alignCenterY = rect.top + rect.height / 2 - cardRect.height / 2;
+        const alignTop = rect.top;
+        const alignBottom = rect.bottom - cardRect.height;
+
+        switch (position) {
+            case 'top':
+                cardTop = rect.top - cardRect.height - this.coachOffset;
+                cardLeft = alignCenterX;
+                break;
+
+            case 'top-left':
+                cardTop = rect.top - cardRect.height - this.coachOffset;
+                cardLeft = alignLeft;
+                break;
+
+            case 'top-right':
+                cardTop = rect.top - cardRect.height - this.coachOffset;
+                cardLeft = alignRight;
+                break;
+
+            case 'bottom':
+                cardTop = rect.bottom + this.coachOffset;
+                cardLeft = alignCenterX;
+                break;
+
+            case 'bottom-left':
+                cardTop = rect.bottom + this.coachOffset;
+                cardLeft = alignLeft;
+                break;
+
+            case 'bottom-right':
+                cardTop = rect.bottom + this.coachOffset;
+                cardLeft = alignRight;
+                break;
+
+            case 'left':
+                cardTop = alignCenterY;
+                cardLeft = rect.left - cardRect.width - this.coachOffset;
+                break;
+
+            case 'left-top':
+                cardTop = alignTop;
+                cardLeft = rect.left - cardRect.width - this.coachOffset;
+                break;
+
+            case 'left-bottom':
+                cardTop = alignBottom;
+                cardLeft = rect.left - cardRect.width - this.coachOffset;
+                break;
+
+            case 'right':
+                cardTop = alignCenterY;
+                cardLeft = rect.right + this.coachOffset;
+                break;
+
+            case 'right-top':
+                cardTop = alignTop;
+                cardLeft = rect.right + this.coachOffset;
+                break;
+
+            case 'right-bottom':
+                cardTop = alignBottom;
+                cardLeft = rect.right + this.coachOffset;
+                break;
+        }
+
+        const margin = 10;
+
+        cardLeft = Math.max(margin, cardLeft);
+        cardTop = Math.max(margin, cardTop);
+
+        if (cardLeft + cardRect.width > window.innerWidth - margin) {
+            cardLeft = window.innerWidth - cardRect.width - margin;
+        }
+
+        if (cardTop + cardRect.height > window.innerHeight - margin) {
+            cardTop = window.innerHeight - cardRect.height - margin;
+        }
+
+        this.overlayRef.instance.targetTop = rect.top;
+        this.overlayRef.instance.targetLeft = rect.left;
+        this.overlayRef.instance.targetWidth = rect.width;
+        this.overlayRef.instance.targetHeight = rect.height;
+
+        this.overlayRef.instance.cardTop = cardTop;
+        this.overlayRef.instance.cardLeft = cardLeft;
+
+        this.overlayRef.changeDetectorRef.detectChanges();
+    }
+
+    private close() {
+        this.isOpen = false;
+
+        document.removeEventListener('click', this.documentClickHandler);
+        window.removeEventListener('scroll', this.scrollHandler, true);
+        window.removeEventListener('resize', this.resizeHandler);
+
+        if (!this.overlayRef) return;
+
+        this.appRef.detachView(this.overlayRef.hostView);
+        this.overlayRef.destroy();
+        this.overlayRef = undefined;
+    }
+
+    ngOnDestroy() {
+        this.close();
+    }
+}