use modifier

OsamaSayegh · OsamaSayegh · commit 508ee6c88662 · 2025-06-02T19:59:39.000+03:00
diff --git a/app/assets/javascripts/admin/addon/components/changes-banner.gjs b/app/assets/javascripts/admin/addon/components/changes-banner.gjs
@@ -1,14 +1,21 @@
 import Component from "@glimmer/component";
 import { tracked } from "@glimmer/tracking";
 import { action } from "@ember/object";
-import didInsert from "@ember/render-modifiers/modifiers/did-insert";
-import willDestroy from "@ember/render-modifiers/modifiers/will-destroy";
+import { modifier } from "ember-modifier";
 import DButton from "discourse/components/d-button";
 import htmlSafe from "discourse/helpers/html-safe";
 
 export default class ChangesBanner extends Component {
   @tracked isSaving = false;
-  _resizer = null;
+
+  resizerModifier = modifier((element) => {
+    const container = document.getElementById("main-container");
+    const resizer = () => this.positionBanner(container, element);
+    resizer();
+
+    window.addEventListener("resize", resizer);
+    return () => window.removeEventListener("resize", resizer);
+  });
 
   @action
   async save() {
@@ -21,21 +28,6 @@ export default class ChangesBanner extends Component {
     }
   }
 
-  @action
-  setupResizeObserver(element) {
-    const container = document.getElementById("main-container");
-    this._resizer = () => this.positionBanner(container, element);
-
-    this._resizer();
-
-    this._resizeObserver = window.addEventListener("resize", this._resizer);
-  }
-
-  @action
-  teardownResizeObserver() {
-    window.removeEventListener("resize", this._resizer);
-  }
-
   positionBanner(container, element) {
     if (container) {
       const { width } = container.getBoundingClientRect();
@@ -45,11 +37,7 @@ export default class ChangesBanner extends Component {
   }
 
   <template>
-    <div
-      class="admin-changes-banner"
-      {{didInsert this.setupResizeObserver}}
-      {{willDestroy this.teardownResizeObserver}}
-    >
+    <div class="admin-changes-banner" {{this.resizerModifier}}>
       <span class="admin-changes-banner__main-label">{{htmlSafe
           @bannerLabel
         }}</span>
