Hijlkema.Codes/z-elements
1
0
Fork 0
Code Issues 9 Pull Requests Actions Packages Projects 1 Releases Activity

Clean up internal type usages

Browse Source
This commit is contained in:
Mitch Hijlkema
2023-09-02 21:02:50 +02:00
parent 41830bbca5
commit ad59f07d2b
14 changed files with 176 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
libs/tooltip/src/lib/controllers/position.controller.ts
View File

@@ -1,4 +1,6 @@
import { ReactiveController, ReactiveControllerHost } from 'lit';
import { ReactiveControllerHost } from '@z-elements/_internal/types';
import { ReactiveController } from 'lit';
import { Subject, debounceTime, fromEvent, takeUntil, tap } from 'rxjs';
@@ -15,7 +17,7 @@ import TooltipComponent from '../tooltip.component';
export class PositionController implements ReactiveController {
/** Private variables */
private readonly _host: ReactiveControllerHost<TooltipComponent>;
private _hostTarget: HTMLElement | undefined;
private _hostTarget: HTMLElement | null = null;
private readonly destroy$ = new Subject<void>();
@@ -24,7 +26,7 @@ export class PositionController implements ReactiveController {
/** Public variables */
public top: number = 0;
public left: number = 0;
public position: Placement;
public position: Placement | undefined;
/** constructor & lifecycle */
constructor(host: ReactiveControllerHost<TooltipComponent>) {
@@ -63,13 +65,12 @@ export class PositionController implements ReactiveController {
const availablePosition: Placement[] = [Placement.top, Placement.left, Placement.right, Placement.bottom];
this.position = this._host.preferredPlacement;
while (!this.doesPostionFitInScreen(topLeft) && exhaustedPositions.length < 4) {
while (!this.doesPositionFitInScreen(topLeft) && exhaustedPositions.length < 4) {
topLeft = this.getPositions(availablePosition.find((p) => !exhaustedPositions.includes(p))!);
exhaustedPositions.push(availablePosition.find((p) => !exhaustedPositions.includes(p))!);
this.position = availablePosition.find((p) => !exhaustedPositions.includes(p))!;
}
console.log(this.position);
this.top = topLeft.top;
this.left = topLeft.left;
@@ -87,7 +88,7 @@ export class PositionController implements ReactiveController {
switch (position) {
case Placement.top:
topLeft.top = domRect.top - this._host.contentElement?.offsetHeight;
topLeft.top = domRect.top - (this._host.contentElement?.offsetHeight || 0);
topLeft.left = domRect.left;
break;
case 'bottom':
@@ -95,11 +96,11 @@ export class PositionController implements ReactiveController {
topLeft.left = domRect.left;
break;
case 'left':
topLeft.top = domRect.top + domRect.height / 2 - this._host.contentElement?.offsetHeight / 2;
topLeft.left = domRect.left - this._host.contentElement?.offsetWidth;
topLeft.top = domRect.top + domRect.height / 2 - (this._host.contentElement?.offsetHeight || 0) / 2;
topLeft.left = domRect.left - (this._host.contentElement?.offsetWidth || 0);
break;
case 'right':
topLeft.top = domRect.top + domRect.height / 2 - this._host.contentElement?.offsetHeight / 2;
topLeft.top = domRect.top + domRect.height / 2 - (this._host.contentElement?.offsetHeight || 0) / 2;
topLeft.left = domRect.right;
break;
}
@@ -112,7 +113,7 @@ export class PositionController implements ReactiveController {
return element.getBoundingClientRect();
}
private doesPostionFitInScreen(topLeft: { top: number; left: number }): boolean {
private doesPositionFitInScreen(topLeft: { top: number; left: number }): boolean {
if (topLeft.top < 0) {
return false;
}
@@ -121,11 +122,11 @@ export class PositionController implements ReactiveController {
return false;
}
if (this.top + this._host.contentElement?.offsetHeight > window.innerHeight) {
if (this.top + (this._host.contentElement?.offsetHeight || 0) > window.innerHeight) {
return false;
}
if (this.left + this._host.contentElement?.offsetWidth > window.innerWidth) {
if (this.left + (this._host.contentElement?.offsetWidth || 0) > window.innerWidth) {
return false;
}

6
libs/tooltip/src/lib/controllers/visibility.controller.ts
View File

@@ -1,4 +1,6 @@
import { ReactiveController, ReactiveControllerHost } from 'lit';
import { ReactiveControllerHost } from '@z-elements/_internal/types';
import { ReactiveController } from 'lit';
import {
BehaviorSubject,
@@ -39,7 +41,7 @@ export class VisibilityController implements ReactiveController {
public show$ = this.emitShow$.asObservable();
public hide$ = this.emitHide$.asObservable();
/** constructor & lifecylce */
/** constructor & lifecycle */
constructor(host: ReactiveControllerHost<TooltipComponent>) {
this._host = host;
this._host.addController(this);