Fix the slide behaviour when the controls are closing (#149)

* Fix the slide behaviour when the controls are closing

* Remove console.log

* Remove setTimeout approach

and replace with ipcRenderer.sendSync to take the finish of the transition syncronously, combined with a callback to add "hidden" class to "controls-content" div

Author: Kon Hondros

app/src/main/index.js

@@ -43,6 +43,7 @@ ipcMain.on('set-main-window-size', (event, args) => {
   if (args.width && args.height && mainWindow) {
     [args.width, args.height] = [parseInt(args.width, 10), parseInt(args.height, 10)];
     mainWindow.setSize(args.width, args.height, true); // true == animate
+    event.returnValue = true; // Give true to sendSync caller
   }
 });
 

app/src/renderer/js/main.js

@@ -27,6 +27,12 @@ function setMainWindowSize() {
   ipcRenderer.send('set-main-window-size', {width, height});
 }
 
+function setStrictWindowSize(width, height, callback) {
+  if (ipcRenderer.sendSync('set-main-window-size', {width, height})) {
+    callback();
+  }
+}
+
 document.addEventListener('DOMContentLoaded', () => {
   // Element definitions
   const aspectRatioSelector = document.querySelector('.aspect-ratio-selector');
@@ -305,14 +311,23 @@ document.addEventListener('DOMContentLoaded', () => {
 
     triangle.classList.toggle('up');
 
-    controls.classList.toggle('hidden');
+    if (controls.classList.contains('hidden')) {
+      controls.classList.remove('hidden');
+      setMainWindowSize();
+    } else {
+      const w = document.documentElement.scrollWidth;
+      const h = document.documentElement.scrollHeight - controls.scrollHeight - 1;
+
+      setStrictWindowSize(w, h, () => {
+        controls.classList.add('hidden');
+      });
+    }
 
     if (!initializedActiveShim && !controls.classList.contains('hidden')) {
       handleActiveButtonGroup({buttonGroup: exportAs[0].parentNode});
       initializedActiveShim = true;
+      setMainWindowSize();
     }
-
-    setMainWindowSize();
   };
 
   options.onclick = event => {