Make support check error modal closable

flekschas · flekschas · commit 0392b971760b · 2022-11-11T20:36:46.000-05:00
diff --git a/example/utils.js b/example/utils.js
@@ -26,25 +26,36 @@ export function saveAsPng(scatterplot) {
   imageObject.src = scatterplot.get('canvas').toDataURL();
 }
 
-export function showModal(text, isError) {
+export function closeModal() {
+  const modal = document.querySelector('#modal');
+  const modalText = document.querySelector('#modal-text');
+  modal.style.display = 'none';
+  modalText.textContent = '';
+}
+
+export function showModal(text, isError, isClosable) {
   const modal = document.querySelector('#modal');
-  const modalText = document.querySelector('#modal span');
   modal.style.display = 'flex';
+
+  const modalText = document.querySelector('#modal-text');
   modalText.style.color = isError ? '#cc79A7' : '#bbb';
   modalText.textContent = text;
-}
 
-export function closeModal() {
-  const modal = document.querySelector('#modal');
-  const modalText = document.querySelector('#modal span');
-  modal.style.display = 'none';
-  modalText.textContent = '';
+  const modalClose = document.querySelector('#modal-close');
+  if (isClosable) {
+    modalClose.style.display = 'block';
+    modalClose.style.background = isError ? '#cc79A7' : '#bbb';
+    modalClose.addEventListener('click', closeModal, { once: true });
+  } else {
+    modalClose.style.display = 'none';
+  }
 }
 
 export function checkSupport(scatterplot) {
-  if (!scatterplot.isSupported) {
+  if (scatterplot.isSupported) {
     showModal(
-      'Unfortunately, your browser does not support all WebGL extensions required by regl-scatterplot',
+      'Your browser does not support all necessary WebGL features. The scatter plot might not render properly.',
+      true,
       true
     );
   }
diff --git a/public/index.html b/public/index.html
@@ -206,9 +206,12 @@
         font-size: 0.9em;
       }
 
-      .flex-c {
+      .flex {
         display: flex;
       }
+      .flex-col {
+        flex-direction: column;
+      }
       .flex-jc-sb {
         justify-content: space-between;
       }
@@ -460,6 +463,12 @@
         color: white;
       }
 
+      #modal-close {
+        display: none;
+        margin-top: 0.5rem;
+        width: fit-content;
+      }
+
       #note {
         position: absolute;
         z-index: 2;
@@ -493,16 +502,19 @@
   </head>
 
   <body>
-    <div id="modal" class="flex-c flex-jc-c flex-a-c">
-      <span class="no-select"></span>
+    <div id="modal" class="flex flex-jc-c flex-a-c">
+      <div class="flex flex-col flex-jc-c flex-a-c">
+        <span id="modal-text" class="no-select"></span>
+        <button id="modal-close">Okay</button>
+      </div>
     </div>
     <header id="topbar" tabindex="0">
-      <div id="title-wrapper" class="flex-c flex-jc-sb">
+      <div id="title-wrapper" class="flex flex-jc-sb">
         <h1 id="title">Regl Scatterplot</h1>
         <span class="no-select">Menu</span>
       </div>
-      <aside id="controls" class="flex-c flex-v">
-        <label class="flex-c flex-v">
+      <aside id="controls" class="flex flex-v">
+        <label class="flex flex-v">
           <div class="flex-a-c no-select">
             <span class="label"
               ><abbr title="Number of points">Num. PTS</abbr></span
@@ -518,7 +530,7 @@ <h1 id="title">Regl Scatterplot</h1>
             value="10000"
           />
         </label>
-        <label class="flex-c flex-v">
+        <label class="flex flex-v">
           <div class="flex-a-c no-select">
             <span class="label"><abbr title="Point size">PT Size</abbr></span>
             <span id="point-size-value" class="value">5</span>
@@ -532,7 +544,7 @@ <h1 id="title">Regl Scatterplot</h1>
             value="5"
           />
         </label>
-        <label class="flex-c flex-v">
+        <label class="flex flex-v">
           <div class="flex-a-c no-select">
             <span class="label">Opacity</span>
             <span id="opacity-value" class="value">1.0</span>
@@ -546,7 +558,7 @@ <h1 id="title">Regl Scatterplot</h1>
             value="1"
           />
         </label>
-        <label class="flex-c flex-a-c">
+        <label class="flex flex-a-c">
           <input id="click-lasso-initiator" type="checkbox" />
           <span class="no-select">Click to Lasso Initiator</span>
         </label>
