fix(#327): workaround to resize ion-app

Author: peterpeterparker

studio/src/global/app-dev.ts

@@ -50,3 +50,54 @@ setupDeckGoConfig({
     prismComponentsUrl: 'https://raw.githubusercontent.com/PrismJS/prism/886698d5b759ef46162a5723a2493f97c689dc94/components.json',
     gifExampleSrc: 'https://media.giphy.com/media/xUA7baWfTjfHGLZc3e/200w_d.gif'
 });
+
+// https://github.com/deckgo/deckdeckgo/issues/327
+// https://github.com/ionic-team/ionic/issues/19065
+
+const hack = () => {
+    const ionApp = document.querySelector('ion-app');
+
+    if (ionApp) {
+        window.requestAnimationFrame(() => {
+            ionApp.style.height = '100%';
+            window.requestAnimationFrame(() => {
+                ionApp.style.height = '';
+            });
+        });
+    }
+};
+
+let resizerObserver;
+
+document.addEventListener('DOMContentLoaded', () => {
+    if (!window) {
+        return;
+    }
+
+    if ('ResizeObserver' in window) {
+        const ResizeObserver = (window as any).ResizeObserver;
+        resizerObserver = new ResizeObserver(hack);
+        resizerObserver.observe(document.documentElement);
+    } else {
+        window.addEventListener('keyboardWillShow', hack);
+        window.addEventListener('keyboardWillHide', hack);
+        window.addEventListener('resize', hack);
+    }
+});
+
+window.addEventListener('unload', () => {
+    if (!window) {
+        return;
+    }
+
+    if ('ResizeObserver' in window) {
+        if (resizerObserver) {
+            resizerObserver.unobserve(document.documentElement);
+            resizerObserver.disconnect();
+        }
+    } else {
+        window.removeEventListener('keyboardWillShow', hack);
+        window.removeEventListener('keyboardWillHide', hack);
+        window.removeEventListener('resize', hack);
+    }
+});

studio/src/global/app.ts

@@ -57,3 +57,55 @@ log.apply(console, ['%cDeckDeckGo', 'color: #3880ff;font-size:2rem;font-weight:
 log.apply(console, ['%cHey there, interested by our code? Lucky you, we are open source :)', 'color: black;font-size:1rem;font-weight: 300;']);
 log.apply(console, ['%cCome say hi and contribute to our project on Github', 'color: black;font-size:1rem;font-weight: 300;']);
 log.apply(console, ['%chttps://github.com/deckgo/deckdeckgo', 'font-size:1rem;font-weight: 300;']);
+
+
+// https://github.com/deckgo/deckdeckgo/issues/327
+// https://github.com/ionic-team/ionic/issues/19065
+
+const hack = () => {
+    const ionApp = document.querySelector('ion-app');
+
+    if (ionApp) {
+        window.requestAnimationFrame(() => {
+            ionApp.style.height = '100%';
+            window.requestAnimationFrame(() => {
+                ionApp.style.height = '';
+            });
+        });
+    }
+};
+
+let resizerObserver;
+
+document.addEventListener('DOMContentLoaded', () => {
+    if (!window) {
+        return;
+    }
+
+    if ('ResizeObserver' in window) {
+        const ResizeObserver = (window as any).ResizeObserver;
+        resizerObserver = new ResizeObserver(hack);
+        resizerObserver.observe(document.documentElement);
+    } else {
+        window.addEventListener('keyboardWillShow', hack);
+        window.addEventListener('keyboardWillHide', hack);
+        window.addEventListener('resize', hack);
+    }
+});
+
+window.addEventListener('unload', () => {
+    if (!window) {
+        return;
+    }
+
+    if ('ResizeObserver' in window) {
+        if (resizerObserver) {
+            resizerObserver.unobserve(document.documentElement);
+            resizerObserver.disconnect();
+        }
+    } else {
+        window.removeEventListener('keyboardWillShow', hack);
+        window.removeEventListener('keyboardWillHide', hack);
+        window.removeEventListener('resize', hack);
+    }
+});