refactor: drop postrender events in favor of resizeObserver

mzdr · mzdr · commit dc111d97f08e · 2021-12-22T20:54:38.000+01:00
diff --git a/app/views/common/translation-key.js b/app/views/common/translation-key.js
@@ -1,5 +1,3 @@
-import { dispatch } from '@browserkids/dom';
-
 customElements.define('translation-key', class TranslationKey extends HTMLElement {
   #key;
 
@@ -18,7 +16,5 @@ customElements.define('translation-key', class TranslationKey extends HTMLElemen
     } else {
       this.textContent = await app?.translate(this.#key);
     }
-
-    dispatch(this, 'postrender');
   }
 });
diff --git a/app/views/preferences/preferences.html b/app/views/preferences/preferences.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html class="is-native -transparent">
+<html @keydown.window="onKeyDown" class="is-native -transparent">
 <head>
   <meta charset="utf-8">
   <meta http-equiv="Content-Security-Policy" content="default-src 'self' 'sha256-rsIvmmZP7gi++DMJu/EmEuqN8OZoShxV4vpYFEUSSEI='">
@@ -46,13 +46,7 @@ <h1 class="name" :text="productName"></h1>
     </div>
   </section>
 
-  <form
-    #$form
-    @input="onInput"
-    @postrender="onPostRender"
-    @keydown.window="onKeyDown"
-    class="contents preferences-contents"
-  >
+  <form #$form @input="onInput" class="contents preferences-contents">
     <section class="content" #$content>
       <label class="form-group">
         <input type="checkbox" name="openAtLogin" class="action -toggle">
diff --git a/app/views/preferences/renderer.js b/app/views/preferences/renderer.js
@@ -3,6 +3,8 @@ import { bindAttributes, bindEventListeners, findReferences } from '@browserkids
 window.renderer = new class Renderer {
   #isPackaged = null;
 
+  #resize = null;
+
   constructor({ app, preferences }) {
     this.$root = document.documentElement;
     this.$refs = findReferences(this.$root);
@@ -17,7 +19,21 @@ window.renderer = new class Renderer {
     });
 
     this.app.on('update-downloaded', this.onUpdateDownloaded.bind(this));
-    this.render();
+
+    this
+      .createObserver({ resize: true })
+      .render();
+  }
+
+  createObserver(settings = {}) {
+    const { resize = false } = settings;
+
+    if (resize) {
+      this.#resize = new ResizeObserver(this.onResize.bind(this));
+      this.#resize.observe(this.$root);
+    }
+
+    return this;
   }
 
   onCategoryClicked({ currentTarget }) {
@@ -54,17 +70,17 @@ window.renderer = new class Renderer {
     }
   }
 
-  onPostRender() {
+  onQuitClicked() {
+    this.app.quit();
+  }
+
+  onResize() {
     this.app.resizeWindow({
       height: this.$root.offsetHeight,
       width: this.$root.offsetWidth,
     });
   }
 
-  onQuitClicked() {
-    this.app.quit();
-  }
-
   onRestartClicked() {
     this.app.restart();
   }

Original file line number	Diff line number	Diff line change
`@@ -1,5 +1,3 @@`
`1`		`-import { dispatch } from '@browserkids/dom';`
`2`		`-`
`3`	`1`	`customElements.define('translation-key', class TranslationKey extends HTMLElement {`
`4`	`2`	`#key;`
`5`	`3`
`@@ -18,7 +16,5 @@ customElements.define('translation-key', class TranslationKey extends HTMLElemen`
`18`	`16`	`} else {`
`19`	`17`	`this.textContent = await app?.translate(this.#key);`
`20`	`18`	`}`
`21`		`-`
`22`		`- dispatch(this, 'postrender');`
`23`	`19`	`}`
`24`	`20`	`});`