Fix moveGlow (#36)

src/app/button/glow/glow-manager.ts

@@ -1,12 +1,24 @@
 import { Renderer2 } from '@angular/core';
 
 export class GlowManager {
+    private listeners: (() => void)[] = [];
+
     constructor(private renderer: Renderer2, private glowEl: HTMLElement) {}
 
     register(t: HTMLButtonElement) {
-        this.renderer.listen(t, 'mouseenter', this.showGlow.bind(this));
-        this.renderer.listen(t, 'mouseleave', this.hideGlow.bind(this));
-        this.renderer.listen(t, 'mousemove', this.moveGlow.bind(this, t));
+        this.unregister();
+        this.listeners = [
+            this.renderer.listen(t, 'mouseenter', this.showGlow.bind(this)),
+            this.renderer.listen(t, 'mouseleave', this.hideGlow.bind(this)),
+            this.renderer.listen(t, 'mousemove', this.moveGlow.bind(this, t))
+        ];
+    }
+
+    unregister() {
+        let unlisten: () => void;
+        while ((unlisten = this.listeners.pop())) {
+            unlisten();
+        }
     }
 
     private showGlow() {
@@ -17,9 +29,10 @@ export class GlowManager {
         this.renderer.removeClass(this.glowEl, 'show');
     }
 
-    private moveGlow(t: HTMLElement, event: MouseEvent) {
-        const x = event.pageX - t.offsetLeft;
-        const y = event.pageY - t.offsetTop;
+    private moveGlow(t: HTMLElement, { clientX, clientY }: MouseEvent) {
+        const { left, top } = t.getBoundingClientRect();
+        const x = clientX - left;
+        const y = clientY - top;
         this.renderer.setStyle(this.glowEl, 'transform', `translate(${x}px, ${y}px)`);
     }
 }

src/app/button/glow/glow.component.html

@@ -1 +1 @@
-<span class="dsh-glow"></span>
+<span #glow class="dsh-glow"></span>

src/app/button/glow/glow.component.ts

@@ -1,4 +1,14 @@
-import { Component, Input, OnInit, Renderer2, ElementRef, OnChanges, SimpleChanges } from '@angular/core';
+import {
+    Component,
+    Input,
+    OnInit,
+    Renderer2,
+    ElementRef,
+    OnChanges,
+    SimpleChanges,
+    ViewChild,
+    OnDestroy
+} from '@angular/core';
 import { ThemePalette } from '@angular/material';
 
 import { GlowManager } from './glow-manager';
@@ -9,26 +19,31 @@ import { ColorManager } from '../color-manager';
     templateUrl: 'glow.component.html',
     styleUrls: ['glow.component.scss']
 })
-export class GlowComponent implements OnInit, OnChanges {
+export class GlowComponent implements OnInit, OnChanges, OnDestroy {
     @Input() target: HTMLButtonElement;
     @Input() color: ThemePalette;
 
-    private glowEl: HTMLElement;
+    @ViewChild('glow') private glowRef: ElementRef<HTMLSpanElement>;
     private colorManager: ColorManager;
+    private glowManager: GlowManager;
 
-    constructor(private elementRef: ElementRef, private renderer: Renderer2) {}
+    constructor(private renderer: Renderer2) {}
 
     ngOnChanges({ color }: SimpleChanges) {
-        if (this.glowEl && color && color.previousValue !== color.currentValue) {
+        if (this.glowRef.nativeElement && color && color.previousValue !== color.currentValue) {
             this.colorManager.set(color.currentValue);
             this.colorManager.remove(color.previousValue);
         }
     }
 
     ngOnInit() {
-        this.glowEl = this.elementRef.nativeElement.querySelector('.dsh-glow');
-        this.colorManager = new ColorManager(this.renderer, this.glowEl);
-        new GlowManager(this.renderer, this.glowEl).register(this.target);
+        this.colorManager = new ColorManager(this.renderer, this.glowRef.nativeElement);
+        this.glowManager = new GlowManager(this.renderer, this.glowRef.nativeElement);
+        this.glowManager.register(this.target);
         this.colorManager.set(this.color);
     }
+
+    ngOnDestroy() {
+        this.glowManager.unregister();
+    }
 }