This innovative directive concept functions smoothly in Firefox's StackBlitz environment, but encounters an Uncaught Reference Error when integrated into my application. The displayed error in the browser is shown below:
https://i.sstatic.net/HLtxq.png
Context: The directive is implemented on the parent element and interacts with its child nodes. It is designed to calculate and scroll to the child component whose x-midline is closest to the parent's midline upon a (mouseup) event within the host parent view box container. Any helpful insights would be greatly appreciated! Thank you.
Directive Implementation:
import { Directive, OnInit, AfterViewInit, Input, HostListener, ElementRef } from '@angular/core';
@Directive({
selector: '[windowsnap]'
})
export class WindowSnapDirective implements OnInit, AfterViewInit {
scrollhistory = [];
parent = this.el.nativeElement;
constructor(private el: ElementRef) {
console.log('Constructor of windowsnap directive');
}
ngOnInit() {
console.log('Initialization of windowsnap directive');
}
ngAfterViewInit() {
console.log('AfterViewInit of windowsnap directive');
}
closest(num, arr) {
let curr = arr[0];
arr.forEach((val) => {
if (Math.abs(num - val) < Math.abs(num - curr)) {
curr = val
}
});
return curr;
}
@HostListener('mouseup') onMouseUp() {
this.scrollhistory.unshift(this.parent.scrollLeft);
console.log(this.scrollhistory)
if(this.parent.scrollLeft != this.scrollhistory[1]){
let child1El = this.parent.querySelector('child1');
let child2El = this.parent.querySelector('child2');
let child3El = this.parent.querySelector('child3');
let child1leftBoundary:number = child1El.offsetLeft;
let child1middleBoundary: number = child1El.offsetWidth * 0.5 + child1leftBoundary ;
let child1rightBoundary: number = child1El.offsetWidth + child1leftBoundary ;
let child2leftBoundary:number = child2El.offsetLeft;
let child2middleBoundary: number = child2El.offsetWidth * 0.5 + child2leftBoundary ;
let child2rightBoundary: number = child2El.offsetWidth + child2leftBoundary ;
let child3leftBoundary:number = child3El.offsetLeft;
let child3middleBoundary: number = child3El.offsetWidth * 0.5 + child3leftBoundary ;
let child3rightBoundary: number = child3El.offsetWidth + child3leftBoundary ;
let viewBoxL = (this.parent.scrollLeft)
let viewBoxC = (this.parent.scrollLeft + (this.parent.offsetWidth * 0.5))
let viewBoxR = (this.parent.scrollLeft + (this.parent.offsetWidth))
let a = (viewBoxC-child1middleBoundary)
let b = (viewBoxC-child2middleBoundary)
let c = (viewBoxC-child3middleBoundary)
let closestChildMid = this.closest(0, [a, b, c])
console.log("closest: " + closestChildMid)
if(closestChildMid === a){
child1El.scrollIntoView({behavior: "smooth", block: "center"});
}
if(closestChildMid === b){
child2El.scrollIntoView({behavior: "smooth", block: "center"});
}
if(closestChildMid === c){
child3El.scrollIntoView({behavior: "smooth", block: "center"});
}
}
}
}