From 99bfde4417c70349adf6642414ed7ec550cf34fa Mon Sep 17 00:00:00 2001
From: Kevin Ansfield <kevin@lookingsideways.co.uk>
Date: Wed, 25 May 2022 10:06:35 +0100
Subject: [PATCH] Converted <GhCanvasHeader> to glimmer component

no issue

- added `{{on-scroll}}` modifier to replace custom setup and teardown of event handlers inside the component
---
 .../admin/app/components/gh-canvas-header.hbs |  3 +-
 .../admin/app/components/gh-canvas-header.js  | 28 +++----------------
 ghost/admin/app/modifiers/on-scroll.js        | 23 +++++++++++++++
 3 files changed, 28 insertions(+), 26 deletions(-)
 create mode 100644 ghost/admin/app/modifiers/on-scroll.js

diff --git a/ghost/admin/app/components/gh-canvas-header.hbs b/ghost/admin/app/components/gh-canvas-header.hbs
index 52d9df4e79..91d0033377 100644
--- a/ghost/admin/app/components/gh-canvas-header.hbs
+++ b/ghost/admin/app/components/gh-canvas-header.hbs
@@ -1,6 +1,5 @@
 <div
-    {{did-insert (action "initScrollWatch")}}
-    {{will-destroy (action "clearScrollWatch")}}
+    {{on-scroll this.onScroll scrollContainer=".gh-main"}}
     ...attributes
 >
     <header class="gh-canvas-header-content">
diff --git a/ghost/admin/app/components/gh-canvas-header.js b/ghost/admin/app/components/gh-canvas-header.js
index e403750f93..c24f5d483a 100644
--- a/ghost/admin/app/components/gh-canvas-header.js
+++ b/ghost/admin/app/components/gh-canvas-header.js
@@ -1,33 +1,13 @@
-import Component from '@ember/component';
-import classic from 'ember-classic-decorator';
+import Component from '@glimmer/component';
 import {action} from '@ember/object';
-import {run} from '@ember/runloop';
-import {tagName} from '@ember-decorators/component';
 
-@classic
-@tagName('')
 export default class GhCanvasHeader extends Component {
     @action
-    initScrollWatch(element) {
-        this._onScroll = run.bind(this, this.onScroll, element);
-        this._scrollContainer = element.closest('.gh-main');
-        if (this._scrollContainer) {
-            this._scrollContainer.addEventListener('scroll', this._onScroll, {passive: true});
-        }
-    }
-
-    @action
-    clearScrollWatch() {
-        if (this._scrollContainer) {
-            this._scrollContainer.removeEventListener('scroll', this._onScroll);
-        }
-    }
-
-    onScroll(element) {
-        if (this._isSticky && this._scrollContainer.scrollTop < 10) {
+    onScroll(element, scrollContainer) {
+        if (this._isSticky && scrollContainer.scrollTop < 10) {
             element.classList.remove('gh-canvas-header--sticky');
             this._isSticky = false;
-        } else if (!this._isSticky && this._scrollContainer.scrollTop > 10) {
+        } else if (!this._isSticky && scrollContainer.scrollTop > 10) {
             element.classList.add('gh-canvas-header--sticky');
             this._isSticky = true;
         }
diff --git a/ghost/admin/app/modifiers/on-scroll.js b/ghost/admin/app/modifiers/on-scroll.js
new file mode 100644
index 0000000000..99e6bbe870
--- /dev/null
+++ b/ghost/admin/app/modifiers/on-scroll.js
@@ -0,0 +1,23 @@
+import Modifier from 'ember-modifier';
+import {action} from '@ember/object';
+
+export default class OnScrollModifier extends Modifier {
+    @action
+    onScroll(event) {
+        this.args.positional[0](this.element, this.scrollContainer, event);
+    }
+
+    didInstall() {
+        this.scrollContainer = this.element;
+
+        if (this.args.named.scrollContainer) {
+            this.scrollContainer = this.element.closest(this.args.named.scrollContainer);
+        }
+
+        this.scrollContainer?.addEventListener('scroll', this.onScroll, {passive: true});
+    }
+
+    willDestroy() {
+        this.scrollContainer?.removeEventListener('scroll', this.onScroll, {passive: true});
+    }
+}