fix tab bug

Pressing tab focused an element in the panel, moving the viewport of the
body element so the panel was in view. Because the body has hidden
overflow, it's not possible to scroll back. The panel *appears* to be
permanently open.

The fix is to actually remove the panels from the render tree after
hiding them, so they can't receive tab focus.

Author: markrian

Diff for: index.html

@@ -18,7 +18,7 @@ <h1>Oh dear!</h1>
             >
     </canvas>
 
-    <div id="constant-force-panel" class="panel panel-closed">
+    <div id="constant-force-panel" class="panel panel-closed hide">
         <div class="panel-header">
             <h2>Constant force</h2>
             <button type="button" class="delete">Delete</button>
@@ -36,7 +36,7 @@ <h2>Constant force</h2>
         <button class="close" type="button">Close</button>
     </div>
 
-    <div id="radial-force-panel" class="panel panel-closed">
+    <div id="radial-force-panel" class="panel panel-closed hide">
         <div class="panel-header">
             <h2>Radial force</h2>
             <button type="button" class="delete">Delete</button>
@@ -50,7 +50,7 @@ <h2>Radial force</h2>
         <button class="close" type="button">Close</button>
     </div>
 
-    <div id="emitter-panel" class="panel panel-closed">
+    <div id="emitter-panel" class="panel panel-closed hide">
         <div class="panel-header">
             <h2>Emitter</h2>
             <button type="button" class="delete">Delete</button>
@@ -104,4 +104,4 @@ <h2>Keyboard controls</h2>
 
     <script src="js/main.js" type="module"></script>
 </body>
-</html>
+</html>

Diff for: js/animation.js

@@ -0,0 +1,14 @@
+export function onTransitionEnd(el, fn) {
+    if (!('ontransitionend' in el)) {
+        fn();
+        return;
+    }
+    const listener = function (event) {
+        fn(event);
+        el.removeEventListener(listener);
+    };
+
+    el.addEventListener('transitionend', listener);
+}
+
+export const rAF = requestAnimationFrame;

Diff for: js/panels.js

@@ -1,4 +1,5 @@
 import bindEvents from './bind-events.js';
+import { onTransitionEnd, rAF } from './animation.js';
 
 function sensiblePrecision(number) {
     number = Number(number);
@@ -60,7 +61,8 @@ class Panel {
     }
 
     open(item) {
-        this.el.classList.toggle('panel-closed', false);
+        this.el.classList.remove('hide');
+        rAF(() => this.el.classList.remove('panel-closed'));
         this.item = item;
         for (const setting of this.settings) {
             setting.inputEl.value = item[setting.attr];
@@ -69,7 +71,8 @@ class Panel {
     }
 
     close() {
-        this.el.classList.toggle('panel-closed', true);
+        this.el.classList.add('panel-closed');
+        onTransitionEnd(this.el, () => this.el.classList.add('hide'));
         this.item = null;
     }
 

Diff for: style.css

@@ -147,4 +147,8 @@ button:hover {
     padding: .5em 1em;
     background-color: #c23;
     color: white;
-}
+}
+
+.hide {
+    display: none;
+}