From 70d9911248936e901f903140c8a84b90e6f4d292 Mon Sep 17 00:00:00 2001
From: "Felix W. Dekker" <felix@fwdekker.com>
Date: Mon, 10 Jun 2019 15:03:25 +0200
Subject: [PATCH] Eliminate common CSS and JS

---
 index.html | 60 +++++++++++-------------------------------------------
 1 file changed, 12 insertions(+), 48 deletions(-)
diff --git a/index.html b/index.html
index 8d6aac8..2d12691 100644
--- a/index.html
+++ b/index.html
@@ -16,29 +16,7 @@
           integrity="sha256-l85OmPOjvil/SOvVt3HnSSjzF1TUMyT9eV0c2BzEGzU=" crossorigin="anonymous" />
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/milligram/1.3.0/milligram.min.css"
           integrity="sha256-Ro/wP8uUi8LR71kwIdilf78atpu8bTEwrK5ZotZo+Zc=" crossorigin="anonymous" />
-
-    <style>
-        html {
-            height: 100%;
-        }
-
-        body {
-            position: relative;
-
-            padding-top: 5rem;
-            padding-bottom: 9rem; /* Footer paddings + 1 */
-            min-height: 100%;
-        }
-
-        .footer {
-            position: absolute;
-            bottom: 0;
-
-            padding-top: 5rem;
-            padding-bottom: 3rem;
-            width: 100%;
-        }
-    </style>
+    <link rel="stylesheet" href="https://static.fwdekker.com/css/milligram-common.css" crossorigin="anonymous" />
 </head>
 <body>
     <main class="wrapper">
@@ -75,7 +53,7 @@
 
 
         <!-- Footer -->
-        <footer>
+        <footer class="footer">
             <section class="container">
                 <div class="footer">
                     Made by <a href="https://fwdekker.com/">Felix W. Dekker</a>.
@@ -89,32 +67,18 @@
 
     <script src="https://cdnjs.cloudflare.com/ajax/libs/js-cookie/2.2.0/js.cookie.min.js"
             integrity="sha256-9Nt2r+tJnSd2A2CRUvnjgsD+ES1ExvjbjBNqidm9doI=" crossorigin="anonymous"></script>
+    <script src="https://static.fwdekker.com/js/common.js" crossorigin="anonymous"></script>
     <script>
         const signatureColCount = 8;
 
 
-        const e = id => document.getElementById(id);
-        const q = query => document.querySelector(query);
-        const qa = query => document.querySelectorAll(query);
-
-        const doAfterLoad = fun => {
-            const oldOnLoad = window.onload || (() => {
-            });
-
-            window.onload = (() => {
-                oldOnLoad();
-                fun();
-            });
-        };
-
-
         /**
          * Returns an array of the signatures that are currently selected.
          */
         const getSelectedSignatures = () => {
             const signatures = [];
 
-            const selectedCheckboxes = qa("#signatures input:checked");
+            const selectedCheckboxes = $a("#signatures input:checked");
             for (let i = 0; i < selectedCheckboxes.length; i++) {
                 const selectedCheckbox = selectedCheckboxes[i];
                 signatures.push(selectedCheckbox.value);
@@ -129,12 +93,12 @@
          * @param signatures the array of signatures to select
          */
         const setSelectedSignatures = signatures => {
-            const checkboxes = qa("#signatures input");
+            const checkboxes = $a("#signatures input");
             for (let i = 0; i < checkboxes.length; i++)
                 checkboxes[i].checked = false;
 
             for (let i = 0; i < signatures.length; i++)
-                q(`#signature-${signatures[i]}`).checked = true;
+                $(`#signature-${signatures[i]}`).checked = true;
 
             updateSignatureToggle();
         };
@@ -143,7 +107,7 @@
          * Selects all signatures.
          */
         const setAllSignatures = checked => {
-            const checkboxes = qa("#signatures input");
+            const checkboxes = $a("#signatures input");
             for (let i = 0; i < checkboxes.length; i++)
                 checkboxes[i].checked = checked;
             saveSelectedSignaturesToCookie();
@@ -165,9 +129,9 @@
          * Updates the button used to toggle all signatures on or off.
          */
         const updateSignatureToggle = () => {
-            const signatureToggle = q("#signatureToggle");
+            const signatureToggle = $("#signatureToggle");
 
-            if (getSelectedSignatures().length === qa("#signatures input").length) {
+            if (getSelectedSignatures().length === $a("#signatures input").length) {
                 signatureToggle.innerHTML = "Deselect all signatures";
                 signatureToggle.onclick = () => setAllSignatures(false);
             } else {
@@ -199,7 +163,7 @@
          * @param signatures an array of signatures to create buttons for
          */
         const createSignatureButtons = signatures => {
-            const form = e("signatures");
+            const form = $("#signatures");
             form.innerHTML = "";
 
             let row;
@@ -261,7 +225,7 @@
          * @param record the record to display
          */
         const showRecord = (record) => {
-            e("output").innerHTML = record;
+            $("#output").innerHTML = record;
 
             const scrollingElement = (document.scrollingElement || document.body);
             scrollingElement.scrollTop = scrollingElement.scrollHeight;
@@ -269,7 +233,7 @@
 
 
         doAfterLoad(() => {
-            e("submit").onclick = () => downloadRandomRecord(record => showRecord(record));
+            $("#submit").onclick = () => downloadRandomRecord(record => showRecord(record));
 
             downloadSignatures(signatures => {
                 createSignatureButtons(signatures);
