Adding a bit of a description

PaulKinlan · Sep 26, 2018 · e3b58c6 · e3b58c6 · vercel · Sep 26, 2018
1 parent 1ab4d9a
commit e3b58c6
Show file tree

Hide file tree

Showing 9 changed files with 209 additions and 54 deletions.
diff --git a/app/about.html b/app/about.html
@@ -0,0 +1,120 @@
+<!doctype html>
+<html lang="en-GB">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>Capture QR Code</title>
+    <meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline' data: https://www.googletagmanager.com/">
+    <meta name="description" content="Instantly snap QR codes on mobile and desktop without installing an app.">
+
+    <!-- Add to homescreen -->
+    <link rel="manifest" href="/manifest.json">
+
+    <!-- Fallback to homescreen for Chrome <39 on Android -->
+    <meta name="mobile-web-app-capable" content="yes">
+    <meta name="application-name" content="Capture QR Code">
+    <link rel="icon" sizes="192x192" href="/images/touch/chrome-touch-icon-192x192.png">
+
+    <!-- Add to homescreen for Safari on iOS -->
+    <meta name="apple-mobile-web-app-capable" content="yes">
+    <meta name="apple-mobile-web-app-status-bar-style" content="black">
+    <meta name="apple-mobile-web-app-title" content="Snap QR Code">
+    <link rel="apple-touch-icon" href="/images/touch/apple-touch-icon.png">
+
+    <!-- Tile icon for Win8 (144x144 + tile color) -->
+    <meta name="msapplication-TileImage" content="/images/touch/ms-touch-icon-144x144-precomposed.png">
+    <meta name="msapplication-TileColor" content="#212121">
+
+    <!-- Origin Trial Token, feature = Shape Detection API, origin = https://qrsnapper.com, expires = 2018-11-05 -->
+    <meta http-equiv="origin-trial" data-feature="Shape Detection API" data-expires="2018-11-05" content="Ask9b8eaymdcPPFq0xVl/GH4DVDZnMhMiffYEexo9/LiOL21SHQQkToqpAozpULepkOaPlnv8RegP813aA2XAwEAAABVeyJvcmlnaW4iOiJodHRwczovL3Fyc25hcHBlci5jb206NDQzIiwiZmVhdHVyZSI6IlNoYXBlRGV0ZWN0aW9uIiwiZXhwaXJ5IjoxNTQxNDI1NDE1fQ==">
+
+    <meta name="theme-color" content="#212121">
+    <link rel="stylesheet" href="/styles/app.css">
+    <script src="/scripts/main.mjs" type="module"></script>
+    <script src="/scripts/main.js" defer nomodule></script>
+  </head>
+  <body>
+
+    <div class="wsk-layout">
+      <div class="wsk-layout__content">
+        <div id="camera" class="Camera">
+          <canvas class="Camera-display"></canvas>
+          <img src="/images/help_outline-24px.svg" class="about" />
+          <div class="CameraRealtime hidden">
+            <video class="Camera-video" muted autoplay playsinline></video>
+            <div class="Camera-instructions">Point at a QR code</div>
+            <div class="Camera-toggle wsk-button wsk-button--fab">
+              <input type="checkbox" id="checkbox-1" class="Camera-toggle-input" />
+              <label for="checkbox-1">
+                <img class="front" src="/images/ic_camera_front_24px.svg">
+                <img class="rear" src="/images/ic_camera_rear_24px.svg">
+              </label>
+            </div>
+          </div>
+          <div class="Camera-overlay"></div>
+          <div id="camera-fallback" class="CameraFallback hidden">
+            <form method="post" action="/scan-image" class="CameraFallback-form">
+              <input type="file" accept="image/*" capture="camera" id="qrcode-input" name="qrcode" class="CameraFallback-input">
+              <label for="qrcode-input"><img src="/images/ic_file_upload_24px.svg"></label>
+              <img class="CameraFallback-image">
+            </form>
+          </div>
+        </div>
+        <!-- QR Code found-->
+        <div id="qrcode" class="wsk-card wsk-shadow--z3 QRCodeSuccessDialog">
+          <div class="wsk-card--heading">
+             <span class="wsk-card--heading-text">QR Code found</span>
+          </div>
+          <div class="wsk-card--lower QRCodeSuccessDialog-data" >
+          </div>
+          <div class="wsk-card--bottom">
+            <div>
+              <button class="wsk-button QRCodeSuccessDialog-navigate">Open</button>
+              <button class="wsk-button QRCodeSuccessDialog-callback hidden">
+                <div class="QRCodeSuccessDialogCallback-name">Return</div>
+                <div class="QRCodeSuccessDialogCallback-domain"></div>
+              </button>
+              <button class="wsk-button QRCodeSuccessDialog-ignore">Ignore</button>
+              <button class="wsk-button QRCodeSuccessDialog-share hidden">Share</button>
+            </div>
+          </div>
+        </div>
+
+        <!-- About Dialog -->
+        <div id="about" class="wsk-card wsk-shadow--z3 QRCodeAboutDialog">
+          <div class="wsk-card--heading">
+              <span class="wsk-card--heading-text">About QR Snapper</span>
+          </div>
+          <div class="wsk-card--lower QRCodeAboutDialog-data">
+            <p>QR Snapper is the simplest to use QR Scanner available on the web.</p>
+            <p>If you would like to learn how it was built, visit <a href="https://paul.kinlan.me/projects/qrsnapper/">Paul Kinlan's site</a>.</p>
+            <p>The code is also available on <a href="https://github.com/PaulKinlan/qrcode/">Github</a>.</p>
+          </div>
+          <div class="wsk-card--bottom">
+            <div>
+              <button class="wsk-button QRCodeAboutDialog-close">Close</button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <script>
+    if('serviceWorker' in navigator) {
+      navigator.serviceWorker.register('/sw.js', { scope: '/' })
+        .then(function() { console.log("Service Worker Registered"); });
+    }
+    </script>
+
+    <!-- Global site tag (gtag.js) - Google Analytics -->
+<script async src="https://www.googletagmanager.com/gtag/js?id=UA-42052847-1"></script>
+<script>
+  window.dataLayer = window.dataLayer || [];
+  function gtag(){dataLayer.push(arguments);}
+  gtag('js', new Date());
+
+  gtag('config', 'UA-42052847-1');
+</script>
+  </body>
+</html>
diff --git a/app/images/help_outline-24px.svg b/app/images/help_outline-24px.svg
diff --git a/app/index.html b/app/index.html
@@ -5,16 +5,15 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <title>Capture QR Code</title>
-    <meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline' data: https://www.google-analytics.com">
+    <meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline' data: https://www.googletagmanager.com/">
     <meta name="description" content="Instantly snap QR codes on mobile and desktop without installing an app.">
-    <meta name="google-site-verification" content="N3q910j70fsM6wav0NfyA-xd1uuXIg0IZw0w2lmgI-o">
 
     <!-- Add to homescreen -->
     <link rel="manifest" href="/manifest.json">
 
     <!-- Fallback to homescreen for Chrome <39 on Android -->
     <meta name="mobile-web-app-capable" content="yes">
-    <meta name="application-name" content="Capture QR Code">
+    <meta name="application-name" content="Snap QR Code">
     <link rel="icon" sizes="192x192" href="/images/touch/chrome-touch-icon-192x192.png">
 
     <!-- Add to homescreen for Safari on iOS -->
@@ -41,6 +40,7 @@
       <div class="wsk-layout__content">
         <div id="camera" class="Camera">
           <canvas class="Camera-display"></canvas>
+          <img src="/images/help_outline-24px.svg" class="about" />
           <div class="CameraRealtime hidden">
             <video class="Camera-video" muted autoplay playsinline></video>
             <div class="Camera-instructions">Point at a QR code</div>
@@ -79,6 +79,20 @@
             </div>
           </div>
         </div>
+        <!-- About Dialog -->
+        <div id="about" class="wsk-card wsk-shadow--z3 QRCodeAboutDialog">
+          <div class="wsk-card--heading">
+              <span class="wsk-card--heading-text">About QR Snapper</span>
+          </div>
+          <div class="wsk-card--lower QRCodeAboutDialog-data">
+            About.
+          </div>
+          <div class="wsk-card--bottom">
+            <div>
+              <button class="wsk-button QRCodeAboutDialog-close">Close</button>
+            </div>
+          </div>
+        </div>
       </div>
     </div>
 

diff --git a/app/scripts/main.js b/app/scripts/main.js
@@ -27,6 +27,13 @@ import { decode } from './qrclient.js'
 
     var cameraManager = new CameraManager('camera');
     var qrCodeManager = new QRCodeManager('qrcode');
+    var qrCodeHelpManager = new QRCodeHelpManager('about');
+    var helpButton = document.querySelector('.about');
+
+    helpButton.onclick = function() {
+      qrCodeHelpManager.showDialog();
+    };
+
     var processingFrame = false;
 
     cameraManager.onframe = async function(context) {
@@ -181,6 +188,23 @@ import { decode } from './qrclient.js'
 
   };
 
+  let QRCodeHelpManager = function(element) {
+    let root = document.getElementById(element);
+    let qrhelpClose = root.querySelector(".QRCodeAboutDialog-close");
+
+    this.showDialog = function() {
+      root.style.display = 'block';
+    };
+
+    this.closeDialog = function() {
+      root.style.display = 'none';
+    };
+
+    qrhelpClose.addEventListener("click", function() {
+      this.closeDialog();
+    }.bind(this));
+  };
+
   var WebCamManager = function(cameraRoot) {
     var width, height;
     var cameraToggleInput = cameraRoot.querySelector('.Camera-toggle-input');
@@ -433,7 +457,6 @@ import { decode } from './qrclient.js'
     };
   };
 
-
   var CameraManager = function(element) {
     // The camera gets a video stream, and adds it to a canvas.
     // The canvas is analysed but also displayed to the user.
@@ -551,9 +574,8 @@ import { decode } from './qrclient.js'
     this.resize();
   };
 
-  window.addEventListener('load', function() {
+  // Start the camera without wating for all resources to load.
-    var camera = new QRCodeCamera();
+  var camera = new QRCodeCamera();
-  });
 })();
 
 window.addEventListener('unhandledrejection', function(event) {

diff --git a/app/scripts/sw/fileManifest.js b/app/scripts/sw/fileManifest.js
@@ -3,6 +3,7 @@ export const requiredFiles = [
   '/images/ic_camera_front_24px.svg',
   '/images/ic_camera_rear_24px.svg',
   '/images/ic_file_upload_24px.svg',
+  '/images/help_outline-24px.svg',
   '/images/touch/ms-touch-icon-144x144-precomposed.png',
   '/images/touch/chrome-touch-icon-192x192.png',
   '/images/touch/apple-touch-icon.png',

diff --git a/app/styles/QRCodeAboutDialog.css b/app/styles/QRCodeAboutDialog.css
@@ -0,0 +1,14 @@
+.QRCodeAboutDialog {
+  height: auto !important;
+  display: none;
+  position: absolute !important;
+  margin: auto auto;
+  width: 80%;
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: 100 !important;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  top: 50%;
+}
diff --git a/app/styles/all.css b/app/styles/all.css
@@ -13,22 +13,33 @@
 .wsk-shadow--z5 {
   box-shadow: 0 19px 19px 0 rgba(0, 0, 0, 0.3), 0 15px 6px 0 rgba(0, 0, 0, 0.22); }
 
-/* We're splitting fonts into "preferred" and "performance" in order to optimize
-   page loading. For important text, such as the body, we want it to load
-   immediately and not wait for the web font load, whereas for other sections,
-   such as headers and titles, we're OK with things taking a bit longer to load.
-   We do have some optional classes and parameters in the mixins, in case you
-   definitely want to make sure you're using the preferred font and don't mind
-   the performance hit.
-   We should be able to improve on this once CSS Font Loading L3 becomes more
-   widely available.
-*/
 html, body {
+  margin: 0px;
+}
+
+* {
+  user-select: none;
+}
+
+main {
+  padding: 20px;
+}
+
+html, body {
+  color: #9e9e9e;
+  background-color: #424242;
+  height: 100%;
+  font-family: "Helvetica", "Arial", sans-serif;
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 20px; 
 }
 
 h1, h2, h3, h4, h5, h6, p {
+  color: #424242;
   margin: 0;
-  padding: 0; }
+  padding: 0;
+}
 
 /**
  * Styles for HTML elements
@@ -368,16 +379,6 @@ dt {
    We should be able to improve on this once CSS Font Loading L3 becomes more
    widely available.
 */
-html, body {
-  font-family: "Helvetica", "Arial", sans-serif;
-  font-size: 14px;
-  font-weight: 400;
-  line-height: 20px; }
-
-h1, h2, h3, h4, h5, h6, p {
-  margin: 0;
-  padding: 0; }
-
 
 /* Card dimensions */
 /* Cover image */

diff --git a/app/styles/camera.css b/app/styles/camera.css
@@ -1,29 +1,3 @@
-body {
-  margin: 0px;
-}
-
-* {
-  user-select: none;
-}
-
-main {
-  padding: 20px;
-}
-
-html, body {
-  color: #9e9e9e;
-  background-color: #424242;
-  height: 100%;
-  font-family: "Helvetica", "Arial", sans-serif;
-  font-size: 14px;
-  font-weight: 400;
-  line-height: 20px; 
-}
-
-h1, h2, h3, h4, h5 {
-  color: #424242;
-}
-
 .Camera.debug .Camera-display {
   position: absolute;
   z-index: 100;
@@ -201,4 +175,10 @@ h1, h2, h3, h4, h5 {
   padding: 18px;
   border-radius: 2px;
   margin: 1em;
+}
+
+.Camera .about {
+  position: absolute;
+  margin: 1em;
+  z-index: 100;
 }
diff --git a/app/sw.js b/app/sw.js
@@ -27,6 +27,8 @@ self.addEventListener('activate', function(event) {
 });
 
 self.addEventListener('install', function(e) {
+  self.skipWaiting();
+
   e.waitUntil(
     caches.open(dataStoreVersion).then(function(cache) {
       return cache.addAll(requiredFiles);