fix: avoid to display popup out of the screen on mobile (#329)

zefoy · Feb 26, 2023 · 0b328fb · 0b328fb
1 parent 45d685f
commit 0b328fb
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 1 deletion.
diff --git a/projects/lib/src/lib/color-picker.component.html b/projects/lib/src/lib/color-picker.component.html
@@ -1,5 +1,5 @@
 <div #dialogPopup class="color-picker" [class.open]="show" [style.display]="!show ? 'none' : 'block'" [style.visibility]="hidden ? 'hidden' : 'visible'" [style.top.px]="top" [style.left.px]="left" [style.position]="position" [style.height.px]="cpHeight" [style.width.px]="cpWidth" (click)="$event.stopPropagation()">
-  <div *ngIf="cpDialogDisplay === 'popup'" class="arrow arrow-{{cpUsePosition}}" [style.top.px]="arrowTop"></div>
+  <div *ngIf="cpDialogDisplay === 'popup'" [style.left]="cpArrowPosition" class="arrow arrow-{{cpUsePosition}}" [style.top.px]="arrowTop"></div>
 
   <div *ngIf="(cpColorMode || 1) === 1" class="saturation-lightness" [slider] [rgX]="1" [rgY]="1" [style.background-color]="hueSliderColor" (newValue)="onColorChange($event)" (dragStart)="onDragStart('saturation-lightness')" (dragEnd)="onDragEnd('saturation-lightness')">
     <div class="cursor" [style.top.px]="slider?.v" [style.left.px]="slider?.s"></div>

diff --git a/projects/lib/src/lib/color-picker.component.ts b/projects/lib/src/lib/color-picker.component.ts
@@ -137,6 +137,7 @@ export class ColorPickerComponent implements OnInit, OnDestroy, AfterViewInit {
   public cpAddColorButtonText: string;
   public cpAddColorButtonClass: string;
   public cpRemoveColorButtonClass: string;
+  public cpArrowPosition: number;
 
   public cpTriggerElement: ElementRef;
 
@@ -1045,6 +1046,19 @@ export class ColorPickerComponent implements OnInit, OnDestroy, AfterViewInit {
 
       if (this.cpPosition === 'auto') {
         const dialogBounds = this.dialogElement.nativeElement.getBoundingClientRect();
+        const windowInnerHeight = window.innerHeight;
+        const windowInnerWidth = window.innerWidth;
+        const elRefClientRect = this.elRef.nativeElement.getBoundingClientRect();
+        const bottom = this.top + dialogBounds.height;
+        if (bottom > windowInnerHeight) {
+          this.top = windowInnerHeight - dialogBounds.height;
+          this.cpArrowPosition = elRefClientRect.x / 2 - 20;
+        }
+        const right = this.left + dialogBounds.width;
+        if (right > windowInnerWidth) {
+          this.left = windowInnerWidth - dialogBounds.width;
+          this.cpArrowPosition = elRefClientRect.x / 2 - 20;
+        }
         const triggerBounds = this.cpTriggerElement.nativeElement.getBoundingClientRect();
         usePosition = calculateAutoPositioning(dialogBounds, triggerBounds);
       }

diff --git a/projects/lib/src/lib/color-picker.directive.ts b/projects/lib/src/lib/color-picker.directive.ts
@@ -82,6 +82,7 @@ export class ColorPickerDirective implements OnChanges, OnDestroy {
   @Input() cpAddColorButtonClass: string = 'cp-add-color-button-class';
 
   @Input() cpRemoveColorButtonClass: string = 'cp-remove-color-button-class';
+  @Input() cpArrowPosition: number = 0;
 
   @Input() cpExtraTemplate: TemplateRef<any>;