Skip to content

Commit

Permalink
perf increase for klpWithTooltip
Browse files Browse the repository at this point in the history
  • Loading branch information
@wouter-willems
wouter-willems committed Sep 12, 2024
1 parent 55cb441 commit 6817b43
Show file tree
Hide file tree
Showing 2 changed files with 119 additions and 117 deletions.
2 changes: 1 addition & 1 deletion projects/klippa/ngx-enhancy-forms/package.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@klippa/ngx-enhancy-forms",
"version": "18.22.5",
"version": "18.22.6",
"publishConfig": {
"access": "public"
},
Expand Down
234 changes: 118 additions & 116 deletions projects/klippa/ngx-enhancy-forms/src/lib/withTooltip.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import {
Directive,
ElementRef,
EmbeddedViewRef,
Input,
Input, NgZone,
TemplateRef
} from "@angular/core";
import {stringIsSetAndFilled} from "./util/values";
Expand All @@ -29,131 +29,133 @@ export class WithTooltipDirective {
@Input() position: 'top' | 'bottom' = 'top';
private templateInstance: HTMLElement;
private viewRefForTemplate: EmbeddedViewRef<any>;
constructor(private el: ElementRef, private appRef: ApplicationRef) {
el.nativeElement.addEventListener('mouseenter', () => {
if (this.tooltipTemplate) {
this.hookUpTemplate();
}
let textToDisplay: string;
if (!this.templateInstance) {
textToDisplay = this.tooltipText || el.nativeElement.innerText.trim();
}
if (!stringIsSetAndFilled(this.klpWithTooltip)) {
return;
}
if (!stringIsSetAndFilled(textToDisplay) && !this.tooltipTemplate) {
return;
}
if (stringIsSetAndFilled(this.tooltipText)) {
if (this.tooltipText === el.nativeElement.innerText) {
constructor(private el: ElementRef, private appRef: ApplicationRef, private ngZone: NgZone) {
this.ngZone.runOutsideAngular(() => {
el.nativeElement.addEventListener('mouseenter', () => {
if (this.tooltipTemplate) {
this.hookUpTemplate();
}
let textToDisplay: string;
if (!this.templateInstance) {
textToDisplay = this.tooltipText || el.nativeElement.innerText.trim();
}
if (!stringIsSetAndFilled(this.klpWithTooltip)) {
return;
}
} else if (this.tooltipTemplate) {
// no need to check here, just render the template
} else {
if (el.nativeElement.offsetWidth >= el.nativeElement.scrollWidth) {
if (!stringIsSetAndFilled(textToDisplay) && !this.tooltipTemplate) {
return;
}
}
if (getComputedStyle(el.nativeElement).position === 'static') {
el.nativeElement.style.position = 'relative';
}
if (stringIsSetAndFilled(this.tooltipText)) {
if (this.tooltipText === el.nativeElement.innerText) {
return;
}
} else if (this.tooltipTemplate) {
// no need to check here, just render the template
} else {
if (el.nativeElement.offsetWidth >= el.nativeElement.scrollWidth) {
return;
}
}
if (getComputedStyle(el.nativeElement).position === 'static') {
el.nativeElement.style.position = 'relative';
}

this.div = document.createElement('div');
this.div.style.zIndex = `${zIndexStart + 2}`;
this.div.style.color = `${colors[this.klpWithTooltip].noAlpha}`;
this.div.style.position = 'fixed';
this.div.style.left = `${el.nativeElement.getBoundingClientRect().x}px`;
if (this.position === 'top') {
this.div.style.top = `${el.nativeElement.getBoundingClientRect().y}px`;
this.div.style.transform = `translate(calc(-100% + ${el.nativeElement.getBoundingClientRect().width}px), calc(-100% - 0.3rem))`;
} else if (this.position === 'bottom') {
this.div.style.top = `${el.nativeElement.getBoundingClientRect().y + el.nativeElement.getBoundingClientRect().height}px`;
this.div.style.transform = `translate(calc(-100% + ${el.nativeElement.getBoundingClientRect().width}px), calc(0% + 0.3rem))`;
}
this.div.style.maxWidth = '200px';
this.div.style.whiteSpace = 'break-spaces';
this.div.style.backgroundColor = 'white';
this.div.style.border = `1px solid ${colors[this.klpWithTooltip].withAlpha}`;
this.div.style.boxShadow = `2px 3px 10px 0px ${colors[this.klpWithTooltip].withAlpha}`;
this.div.style.padding = '0.3rem 0.5rem';
this.div.style.boxSizing = 'border-box';
this.div.style.borderRadius = '3px';
if (stringIsSetAndFilled(textToDisplay)) {
this.div.textContent = textToDisplay;
} else if (this.templateInstance) {
this.div.style.maxWidth = 'none';
this.div.style.visibility = 'hidden';
this.div.appendChild(this.templateInstance);
setTimeout(() => {
const color = getComputedStyle(this.templateInstance).backgroundColor || getComputedStyle(this.templateInstance).background;
this.div.style.backgroundColor = color;
this.div.style.visibility = 'visible';
});
}
el.nativeElement.prepend(this.div);
this.div = document.createElement('div');
this.div.style.zIndex = `${zIndexStart + 2}`;
this.div.style.color = `${colors[this.klpWithTooltip].noAlpha}`;
this.div.style.position = 'fixed';
this.div.style.left = `${el.nativeElement.getBoundingClientRect().x}px`;
if (this.position === 'top') {
this.div.style.top = `${el.nativeElement.getBoundingClientRect().y}px`;
this.div.style.transform = `translate(calc(-100% + ${el.nativeElement.getBoundingClientRect().width}px), calc(-100% - 0.3rem))`;
} else if (this.position === 'bottom') {
this.div.style.top = `${el.nativeElement.getBoundingClientRect().y + el.nativeElement.getBoundingClientRect().height}px`;
this.div.style.transform = `translate(calc(-100% + ${el.nativeElement.getBoundingClientRect().width}px), calc(0% + 0.3rem))`;
}
this.div.style.maxWidth = '200px';
this.div.style.whiteSpace = 'break-spaces';
this.div.style.backgroundColor = 'white';
this.div.style.border = `1px solid ${colors[this.klpWithTooltip].withAlpha}`;
this.div.style.boxShadow = `2px 3px 10px 0px ${colors[this.klpWithTooltip].withAlpha}`;
this.div.style.padding = '0.3rem 0.5rem';
this.div.style.boxSizing = 'border-box';
this.div.style.borderRadius = '3px';
if (stringIsSetAndFilled(textToDisplay)) {
this.div.textContent = textToDisplay;
} else if (this.templateInstance) {
this.div.style.maxWidth = 'none';
this.div.style.visibility = 'hidden';
this.div.appendChild(this.templateInstance);
setTimeout(() => {
const color = getComputedStyle(this.templateInstance).backgroundColor || getComputedStyle(this.templateInstance).background;
this.div.style.backgroundColor = color;
this.div.style.visibility = 'visible';
});
}
el.nativeElement.prepend(this.div);

this.triangle = document.createElement('div');
this.triangle.style.zIndex = `${zIndexStart + 1}`;
this.triangle.style.position = 'fixed';
this.triangle.style.left = `calc(${el.nativeElement.getBoundingClientRect().x + el.nativeElement.getBoundingClientRect().width}px - 2rem)`;
if (this.position === 'top') {
this.triangle.style.top = `${el.nativeElement.getBoundingClientRect().y}px`;
this.triangle.style.transform = `translate(-50%, calc(-100% + 0.1rem))`;
} else if (this.position === 'bottom') {
this.triangle.style.top = `${el.nativeElement.getBoundingClientRect().y + el.nativeElement.getBoundingClientRect().height}px`;
this.triangle.style.transform = `translate(-50%, 0rem) rotate(180deg)`;
}
this.triangle.style.width = '0';
this.triangle.style.height = '0';
this.triangle.style.borderLeft = `${triangleSize} solid transparent`;
this.triangle.style.borderRight = `${triangleSize} solid transparent`;
this.triangle.style.borderTop = `${triangleSize} solid ${colors[this.klpWithTooltip].withAlpha}`;
el.nativeElement.prepend(this.triangle);
this.triangle = document.createElement('div');
this.triangle.style.zIndex = `${zIndexStart + 1}`;
this.triangle.style.position = 'fixed';
this.triangle.style.left = `calc(${el.nativeElement.getBoundingClientRect().x + el.nativeElement.getBoundingClientRect().width}px - 2rem)`;
if (this.position === 'top') {
this.triangle.style.top = `${el.nativeElement.getBoundingClientRect().y}px`;
this.triangle.style.transform = `translate(-50%, calc(-100% + 0.1rem))`;
} else if (this.position === 'bottom') {
this.triangle.style.top = `${el.nativeElement.getBoundingClientRect().y + el.nativeElement.getBoundingClientRect().height}px`;
this.triangle.style.transform = `translate(-50%, 0rem) rotate(180deg)`;
}
this.triangle.style.width = '0';
this.triangle.style.height = '0';
this.triangle.style.borderLeft = `${triangleSize} solid transparent`;
this.triangle.style.borderRight = `${triangleSize} solid transparent`;
this.triangle.style.borderTop = `${triangleSize} solid ${colors[this.klpWithTooltip].withAlpha}`;
el.nativeElement.prepend(this.triangle);

this.triangleWhite = document.createElement('div');
this.triangleWhite.style.zIndex = `${zIndexStart + 3}`;
this.triangleWhite.style.position = 'fixed';
this.triangleWhite.style.left = `calc(${el.nativeElement.getBoundingClientRect().x + el.nativeElement.getBoundingClientRect().width}px - 2rem)`;
if (this.position === 'top') {
this.triangleWhite.style.top = `${el.nativeElement.getBoundingClientRect().y}px`;
this.triangleWhite.style.transform = `translate(-50%, calc(-100% + 0.1rem - 2px))`;
} else if (this.position === 'bottom') {
this.triangleWhite.style.top = `${el.nativeElement.getBoundingClientRect().y + el.nativeElement.getBoundingClientRect().height}px`;
this.triangleWhite.style.transform = `translate(-50%, -2px) rotate(180deg)`;
}
this.triangleWhite.style.width = '0';
this.triangleWhite.style.height = '0';
this.triangleWhite.style.borderLeft = `${triangleSize} solid transparent`;
this.triangleWhite.style.borderRight = `${triangleSize} solid transparent`;
this.triangleWhite = document.createElement('div');
this.triangleWhite.style.zIndex = `${zIndexStart + 3}`;
this.triangleWhite.style.position = 'fixed';
this.triangleWhite.style.left = `calc(${el.nativeElement.getBoundingClientRect().x + el.nativeElement.getBoundingClientRect().width}px - 2rem)`;
if (this.position === 'top') {
this.triangleWhite.style.top = `${el.nativeElement.getBoundingClientRect().y}px`;
this.triangleWhite.style.transform = `translate(-50%, calc(-100% + 0.1rem - 2px))`;
} else if (this.position === 'bottom') {
this.triangleWhite.style.top = `${el.nativeElement.getBoundingClientRect().y + el.nativeElement.getBoundingClientRect().height}px`;
this.triangleWhite.style.transform = `translate(-50%, -2px) rotate(180deg)`;
}
this.triangleWhite.style.width = '0';
this.triangleWhite.style.height = '0';
this.triangleWhite.style.borderLeft = `${triangleSize} solid transparent`;
this.triangleWhite.style.borderRight = `${triangleSize} solid transparent`;

if (stringIsSetAndFilled(textToDisplay)) {
this.triangleWhite.style.borderTop = `${triangleSize} solid white`;
} else if (this.templateInstance) {
this.div.style.visibility = 'hidden';
setTimeout(() => {
const color = getComputedStyle(this.templateInstance).backgroundColor || getComputedStyle(this.templateInstance).background;
this.triangleWhite.style.borderTop = `${triangleSize} solid ${color}`;
this.div.style.visibility = 'visible';
});
}
if (stringIsSetAndFilled(textToDisplay)) {
this.triangleWhite.style.borderTop = `${triangleSize} solid white`;
} else if (this.templateInstance) {
this.div.style.visibility = 'hidden';
setTimeout(() => {
const color = getComputedStyle(this.templateInstance).backgroundColor || getComputedStyle(this.templateInstance).background;
this.triangleWhite.style.borderTop = `${triangleSize} solid ${color}`;
this.div.style.visibility = 'visible';
});
}

el.nativeElement.prepend(this.triangleWhite);
});
el.nativeElement.prepend(this.triangleWhite);
});

el.nativeElement.addEventListener('mouseleave', () => {
if (this.tooltipTemplate) {
this.cleanUpTemplate();
}
try {
el.nativeElement.removeChild(this.div);
} catch (ex) {}
try {
el.nativeElement.removeChild(this.triangle);
} catch (ex) {}
try {
el.nativeElement.removeChild(this.triangleWhite);
} catch (ex) {}
el.nativeElement.addEventListener('mouseleave', () => {
if (this.tooltipTemplate) {
this.cleanUpTemplate();
}
try {
el.nativeElement.removeChild(this.div);
} catch (ex) {}
try {
el.nativeElement.removeChild(this.triangle);
} catch (ex) {}
try {
el.nativeElement.removeChild(this.triangleWhite);
} catch (ex) {}
});
});
}

Expand Down

0 comments on commit 6817b43

Please sign in to comment.