Add noscript warning

4 files changed, 26 insertions, 9 deletions

diff --git a/index.html b/index.html
index 0dae2d8..fa1ef21 100644
--- a/index.html
+++ b/index.html
@@ -12,6 +12,11 @@
     <meta charset="utf-8">
     <link rel="icon" href="favicon.ico">
     <link rel="stylesheet" type="text/css" href="pointless/viewer/viewer.css">
+
+    <noscript>
+      <style type="text/css">#fileSelect { display: none; }</style>
+    </noscript>
+
     <title>Pointless Viewer</title>
   </head>
 
@@ -38,12 +43,18 @@
           <code>\setbeameroption{show notes on second screen=right}</code>)
         </p>
 
-        <p>
-          Please select a PDF file to load.
-          Slides will be opened in a new window.
+        <p class="warning">
+          <noscript>A web browser with JavaScript support is required to use this application.</noscript>
         </p>
 
-        <input id="fileInput" type="file" multiple="false"/>
+        <div id="fileSelect">
+          <p>
+            Please select a PDF file to load.
+            Slides will be opened in a new window.
+          </p>
+
+          <input id="fileInput" type="file" multiple="false"/>
+        </div>
       </div>
 
       <div>
diff --git a/pointless/viewer/screen.js b/pointless/viewer/screen.js
index 9ba4574..4f5e5bf 100644
--- a/pointless/viewer/screen.js
+++ b/pointless/viewer/screen.js
@@ -19,6 +19,7 @@ class Screen {
     this.pageTurnCount = 0;
 
     this._registerListeners();
+    this._hideWelcomeScreen();
   }
 
   setPage(page) {
@@ -36,6 +37,11 @@ class Screen {
     });
   }
 
+  _hideWelcomeScreen() {
+    const welcomeScreen = this.window.document.getElementById("welcomeScreen");
+    welcomeScreen.style.display = "none";
+  }
+
   _getScreenSize(ratio) {
     const windowRatio = this.window.innerWidth / this.window.innerHeight;
     const horizontalScaleFactor = ratio / windowRatio;
diff --git a/pointless/viewer/viewer.css b/pointless/viewer/viewer.css
index 09ef4e1..21bba3b 100644
--- a/pointless/viewer/viewer.css
+++ b/pointless/viewer/viewer.css
@@ -31,7 +31,6 @@ header span {
 }
 
 #welcomeScreen {
-  display: none;
   max-height: 100%;
   min-width: 20rem;
   overflow: auto;
@@ -98,3 +97,8 @@ header span {
 .notification:empty {
   display: none;
 }
+
+.warning {
+  font-weight: bold;
+  color: orangered;
+}
diff --git a/pointless/viewer/viewer.js b/pointless/viewer/viewer.js
index e3a1043..f4cc348 100644
--- a/pointless/viewer/viewer.js
+++ b/pointless/viewer/viewer.js
@@ -9,15 +9,11 @@
 
 class Viewer {
   constructor() {
-    this.welcomeScreen = document.getElementById("welcomeScreen");
     this.fileInput = document.getElementById("fileInput");
-
-    this.welcomeScreen.style.display = "block";
     this._listenForInput();
   }
 
   load(source) {
-    this.welcomeScreen.style.display = "none";
     pdfjsLib.getDocument(source).then(function(pdf) {
       const presentation = new Presentation(pdf);
     }).catch(function(error) {