[add] update assets & slight rearrangements

assets/common.js

@@ -1,3 +1,6 @@
+/**
+ * Custom Service Worker Convenience Functions Wrapper
+ **/
 const SW = (function () {
   // Helper Function
   function randomID() {
@@ -63,3 +66,57 @@ const SW = (function () {
 
   return { install, send };
 })();
+
+/**
+ * Custom IndexedDB Convenience Functions Wrapper
+ **/
+const IDB = (function () {
+  if (!idbKeyval)
+    return console.error(
+      "[IDB] idbKeyval not found - Did you load idb-keyval?"
+    );
+
+  let { get, del, entries, update, keys } = idbKeyval;
+
+  return {
+    async set(key, newValue) {
+      let changeObj = {};
+      await update(key, (oldValue) => {
+        if (oldValue != null) changeObj.oldValue = oldValue;
+        changeObj.newValue = newValue;
+        return newValue;
+      });
+      return changeObj;
+    },
+
+    get(key, defaultValue) {
+      return get(key).then((resp) => {
+        return defaultValue && resp == null ? defaultValue : resp;
+      });
+    },
+
+    del(key) {
+      return del(key);
+    },
+
+    find(keyRegExp, includeValues = false) {
+      if (!(keyRegExp instanceof RegExp)) throw new Error("Invalid RegExp");
+
+      if (!includeValues)
+        return keys().then((allKeys) =>
+          allKeys.filter((key) => keyRegExp.test(key))
+        );
+
+      return entries().then((allItems) => {
+        const matchingKeys = allItems.filter((keyVal) =>
+          keyRegExp.test(keyVal[0])
+        );
+        return matchingKeys.reduce((obj, keyVal) => {
+          const [key, val] = keyVal;
+          obj[key] = val;
+          return obj;
+        }, {});
+      });
+    },
+  };
+})();

assets/lib/idb-keyval.min.js

@@ -1,50 +1 @@
 function _slicedToArray(t,n){return _arrayWithHoles(t)||_iterableToArrayLimit(t,n)||_unsupportedIterableToArray(t,n)||_nonIterableRest()}function _nonIterableRest(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}function _unsupportedIterableToArray(t,n){if(t){if("string"==typeof t)return _arrayLikeToArray(t,n);var r=Object.prototype.toString.call(t).slice(8,-1);return"Object"===r&&t.constructor&&(r=t.constructor.name),"Map"===r||"Set"===r?Array.from(t):"Arguments"===r||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r)?_arrayLikeToArray(t,n):void 0}}function _arrayLikeToArray(t,n){(null==n||n>t.length)&&(n=t.length);for(var r=0,e=new Array(n);r<n;r++)e[r]=t[r];return e}function _iterableToArrayLimit(t,n){var r=null==t?null:"undefined"!=typeof Symbol&&t[Symbol.iterator]||t["@@iterator"];if(null!=r){var e,o,u=[],i=!0,a=!1;try{for(r=r.call(t);!(i=(e=r.next()).done)&&(u.push(e.value),!n||u.length!==n);i=!0);}catch(t){a=!0,o=t}finally{try{i||null==r.return||r.return()}finally{if(a)throw o}}return u}}function _arrayWithHoles(t){if(Array.isArray(t))return t}function _typeof(t){return _typeof="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t},_typeof(t)}!function(t,n){"object"===("undefined"==typeof exports?"undefined":_typeof(exports))&&"undefined"!=typeof module?n(exports):"function"==typeof define&&define.amd?define(["exports"],n):n((t="undefined"!=typeof globalThis?globalThis:t||self).idbKeyval={})}(this,(function(t){"use strict";function n(t){return new Promise((function(n,r){t.oncomplete=t.onsuccess=function(){return n(t.result)},t.onabort=t.onerror=function(){return r(t.error)}}))}function r(t,r){var e=indexedDB.open(t);e.onupgradeneeded=function(){return e.result.createObjectStore(r)};var o=n(e);return function(t,n){return o.then((function(e){return n(e.transaction(r,t).objectStore(r))}))}}var e;function o(){return e||(e=r("keyval-store","keyval")),e}function u(t,r){return t.openCursor().onsuccess=function(){this.result&&(r(this.result),this.result.continue())},n(t.transaction)}t.clear=function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:o();return t("readwrite",(function(t){return t.clear(),n(t.transaction)}))},t.createStore=r,t.del=function(t){var r=arguments.length>1&&void 0!==arguments[1]?arguments[1]:o();return r("readwrite",(function(r){return r.delete(t),n(r.transaction)}))},t.delMany=function(t){var r=arguments.length>1&&void 0!==arguments[1]?arguments[1]:o();return r("readwrite",(function(r){return t.forEach((function(t){return r.delete(t)})),n(r.transaction)}))},t.entries=function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:o();return t("readonly",(function(r){if(r.getAll&&r.getAllKeys)return Promise.all([n(r.getAllKeys()),n(r.getAll())]).then((function(t){var n=_slicedToArray(t,2),r=n[0],e=n[1];return r.map((function(t,n){return[t,e[n]]}))}));var e=[];return t("readonly",(function(t){return u(t,(function(t){return e.push([t.key,t.value])})).then((function(){return e}))}))}))},t.get=function(t){var r=arguments.length>1&&void 0!==arguments[1]?arguments[1]:o();return r("readonly",(function(r){return n(r.get(t))}))},t.getMany=function(t){var r=arguments.length>1&&void 0!==arguments[1]?arguments[1]:o();return r("readonly",(function(r){return Promise.all(t.map((function(t){return n(r.get(t))})))}))},t.keys=function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:o();return t("readonly",(function(t){if(t.getAllKeys)return n(t.getAllKeys());var r=[];return u(t,(function(t){return r.push(t.key)})).then((function(){return r}))}))},t.promisifyRequest=n,t.set=function(t,r){var e=arguments.length>2&&void 0!==arguments[2]?arguments[2]:o();return e("readwrite",(function(e){return e.put(r,t),n(e.transaction)}))},t.setMany=function(t){var r=arguments.length>1&&void 0!==arguments[1]?arguments[1]:o();return r("readwrite",(function(r){return t.forEach((function(t){return r.put(t[1],t[0])})),n(r.transaction)}))},t.update=function(t,r){var e=arguments.length>2&&void 0!==arguments[2]?arguments[2]:o();return e("readwrite",(function(e){return new Promise((function(o,u){e.get(t).onsuccess=function(){try{e.put(r(this.result),t),o(n(e.transaction))}catch(t){u(t)}}}))}))},t.values=function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:o();return t("readonly",(function(t){if(t.getAll)return n(t.getAll());var r=[];return u(t,(function(t){return r.push(t.value)})).then((function(){return r}))}))},Object.defineProperty(t,"__esModule",{value:!0})}));
-
-/**
- * Custom IDB Convenience Functions Wrapper
- **/
-const IDB = (function () {
-  let { get, del, entries, update, keys } = idbKeyval;
-
-  return {
-    async set(key, newValue) {
-      let changeObj = {};
-      await update(key, (oldValue) => {
-        if (oldValue != null) changeObj.oldValue = oldValue;
-        changeObj.newValue = newValue;
-        return newValue;
-      });
-      return changeObj;
-    },
-
-    get(key, defaultValue) {
-      return get(key).then((resp) => {
-        return defaultValue && resp == null ? defaultValue : resp;
-      });
-    },
-
-    del(key) {
-      return del(key);
-    },
-
-    find(keyRegExp, includeValues = false) {
-      if (!(keyRegExp instanceof RegExp)) throw new Error("Invalid RegExp");
-
-      if (!includeValues)
-        return keys().then((allKeys) =>
-          allKeys.filter((key) => keyRegExp.test(key))
-        );
-
-      return entries().then((allItems) => {
-        const matchingKeys = allItems.filter((keyVal) =>
-          keyRegExp.test(keyVal[0])
-        );
-        return matchingKeys.reduce((obj, keyVal) => {
-          const [key, val] = keyVal;
-          obj[key] = val;
-          return obj;
-        }, {});
-      });
-    },
-  };
-})();

assets/local/index.html

@@ -27,10 +27,14 @@
     <link rel="manifest" href="/manifest.json" />
     <link rel="stylesheet" href="/assets/style.css" />
 
+    <!-- Libraries -->
     <script src="/assets/lib/jszip.min.js"></script>
     <script src="/assets/lib/epub.min.js"></script>
-    <script src="/assets/lib/idb-keyval.js"></script>
+    <script src="/assets/lib/idb-keyval.min.js"></script>
-    <script src="/assets/lib/sw-helper.js"></script>
+    <script src="/assets/lib/sw-helper.min.js"></script>
+
+    <!-- Local -->
+    <script src="/assets/common.js"></script>
     <script src="/assets/index.js"></script>
     <script src="/assets/local/index.js"></script>
 

assets/reader/index.html

@@ -20,18 +20,21 @@
     <link rel="stylesheet" href="/assets/style.css" />
 
     <!-- Libraries -->
-    <script src="/assets/lib/platform.js"></script>
+    <script src="/assets/lib/platform.min.js"></script>
     <script src="/assets/lib/jszip.min.js"></script>
     <script src="/assets/lib/epub.min.js"></script>
-    <script src="/assets/lib/no-sleep.js"></script>
+    <script src="/assets/lib/no-sleep.min.js"></script>
-    <script src="/assets/lib/idb-keyval.js"></script>
+    <script src="/assets/lib/idb-keyval.min.js"></script>
-    <script src="/assets/lib/sw-helper.js"></script>
 
     <!-- Reader -->
+    <script src="/assets/common.js"></script>
     <script src="/assets/index.js"></script>
     <script src="/assets/reader/index.js"></script>
 
     <style>
+      /* ----------------------------- */
+      /* -------- PWA Styling -------- */
+      /* ----------------------------- */
       html,
       body {
         overscroll-behavior-y: none;

assets/sw.js

@@ -70,14 +70,14 @@ const PRECACHE_ASSETS = [
   "/manifest.json",
   "/assets/index.js",
   "/assets/style.css",
+  "/assets/common.js",
 
   // Library Assets
-  "/assets/lib/platform.js",
+  "/assets/lib/platform.min.js",
   "/assets/lib/jszip.min.js",
   "/assets/lib/epub.min.js",
-  "/assets/lib/no-sleep.js",
+  "/assets/lib/no-sleep.min.js",
-  "/assets/lib/idb-keyval.js",
+  "/assets/lib/idb-keyval.min.js",
-  "/assets/lib/sw-helper.js",
 ];
 
 // ------------------------------------------------------- //

templates/activity.html

@@ -6,28 +6,16 @@
     <table class="min-w-full leading-normal bg-white dark:bg-gray-700 text-sm">
       <thead class="text-gray-800 dark:text-gray-400">
         <tr>
-          <th
+          <th class="p-3 font-normal text-left uppercase border-b border-gray-200 dark:border-gray-800">
-            scope="col"
-            class="p-3 font-normal text-left uppercase border-b border-gray-200 dark:border-gray-800"
-          >
             Document
           </th>
-          <th
+          <th class="p-3 font-normal text-left uppercase border-b border-gray-200 dark:border-gray-800">
-            scope="col"
-            class="p-3 font-normal text-left uppercase border-b border-gray-200 dark:border-gray-800"
-          >
             Time
           </th>
-          <th
+          <th class="p-3 font-normal text-left uppercase border-b border-gray-200 dark:border-gray-800">
-            scope="col"
-            class="p-3 font-normal text-left uppercase border-b border-gray-200 dark:border-gray-800"
-          >
             Duration
           </th>
-          <th
+          <th class="p-3 font-normal text-left uppercase border-b border-gray-200 dark:border-gray-800">
-            scope="col"
-            class="p-3 font-normal text-left uppercase border-b border-gray-200 dark:border-gray-800"
-          >
             Percent
           </th>
         </tr>
@@ -38,7 +26,6 @@
 	  <td class="text-center p-3" colspan="4">No Results</td>
 	</tr>
 	{{ end }}
-
         {{range $activity := .Data }}
         <tr>
           <td class="p-3 border-b border-gray-200">

templates/base.html

@@ -15,8 +15,8 @@
     <link rel="stylesheet" href="/assets/style.css">
 
     <!-- Service Worker / Offline Cache Flush -->
-    <script src="/assets/lib/idb-keyval.js"></script>
+    <script src="/assets/lib/idb-keyval.min.js"></script>
-    <script src="/assets/lib/sw-helper.js"></script>
+    <script src="/assets/common.js"></script>
     <script src="/assets/index.js"></script>
 
     <style>
@@ -235,9 +235,7 @@
 	</div>
       </div>
       <h1 class="text-xl font-bold dark:text-white px-6 lg:ml-44">{{block "header" .}}{{end}}</h1>
-      <div
+      <div class="relative flex items-center justify-end w-full p-4 space-x-4">
-	class="relative flex items-center justify-end w-full p-4 space-x-4"
-      >
 	<a href="#" class="relative block">
 	  <svg
 	    width="20"
@@ -309,9 +307,7 @@
       </div>
     </div>
 
-    <main
+    <main class="relative overflow-hidden">
-      class="relative overflow-hidden"
-    >
       <div id="container" class="h-[100dvh] px-4 overflow-auto md:px-6 lg:ml-48">
         {{block "content" .}}{{end}}
       </div>

templates/document.html

@@ -67,7 +67,6 @@
 		type="submit"
 	      >Remove Cover</button>
 	    </form>
-
 	  </div>
 	  <div class="relative">
 	    <label for="delete-button">
@@ -323,7 +322,6 @@
 	    </svg>
 	  </label>
 	  <input type="checkbox" id="progress-info-button" class="hidden css-button"/>
-
 	  <div class="absolute z-30 top-7 right-0 p-3 transition-all duration-200 bg-gray-200 rounded shadow-lg shadow-gray-500 dark:shadow-gray-900 dark:bg-gray-600">
 	    <div class="text-xs flex">
               <p class="text-gray-400 w-32">Seconds / Percent</p>
@@ -355,20 +353,6 @@
 	    {{ .Data.Percentage }}%
 	  </p>
       </div>
-      <!--
-      <div>
-	  <p class="text-gray-500">ISBN 10</p>
-	  <p class="font-medium text-lg">
-	  {{ or .Data.Isbn10 "N/A" }}
-	  </p>
-      </div>
-      <div>
-	  <p class="text-gray-500">ISBN 13</p>
-	  <p class="font-medium text-lg">
-	  {{ or .Data.Isbn13 "N/A" }}
-	  </p>
-      </div>
-      -->
     </div>
 
     <div class="relative">

templates/documents.html

@@ -7,7 +7,7 @@
 {{end}}
 
 {{define "content"}}
-<div class="grid grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
+<div class="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
   {{range $doc := .Data }}
   <div class="w-full relative">
     <div class="flex gap-4 w-full h-full p-4 bg-white shadow-lg dark:bg-gray-700 rounded">

templates/error.html

@@ -30,29 +30,27 @@
   <body
     class="bg-gray-100 dark:bg-gray-800 flex flex-col justify-center h-screen"
   >
-    <section>
+    <div class="py-8 px-4 mx-auto max-w-screen-xl lg:py-16 lg:px-6">
-      <div class="py-8 px-4 mx-auto max-w-screen-xl lg:py-16 lg:px-6">
+      <div class="mx-auto max-w-screen-sm text-center">
-        <div class="mx-auto max-w-screen-sm text-center">
+        <h1
-          <h1
+          class="mb-4 text-7xl tracking-tight font-extrabold lg:text-9xl text-gray-600 dark:text-gray-500"
-            class="mb-4 text-7xl tracking-tight font-extrabold lg:text-9xl text-gray-600 dark:text-gray-500"
+        >
-          >
+          {{ .Status }}
-            {{ .Status }}
+        </h1>
-          </h1>
+        <p
-          <p
+          class="mb-4 text-3xl tracking-tight font-bold text-gray-900 md:text-4xl dark:text-white"
-            class="mb-4 text-3xl tracking-tight font-bold text-gray-900 md:text-4xl dark:text-white"
+        >
-          >
+          {{ .Error }}
-            {{ .Error }}
+        </p>
-          </p>
+        <p class="mb-8 text-lg font-light text-gray-500 dark:text-gray-400">
-          <p class="mb-8 text-lg font-light text-gray-500 dark:text-gray-400">
+          {{ .Message }}
-            {{ .Message }}
+        </p>
-          </p>
+        <a
-          <a
+          href="/"
-            href="/"
+          class="rounded text-center font-medium px-2 py-1 text-white bg-gray-500 dark:text-gray-800 hover:bg-gray-800 dark:hover:bg-gray-100"
-            class="rounded text-center font-medium px-2 py-1 text-white bg-gray-500 dark:text-gray-800 hover:bg-gray-800 dark:hover:bg-gray-100"
+          >Back to Homepage</a
-            >Back to Homepage</a
+        >
-          >
-        </div>
       </div>
-    </section>
+    </div>
   </body>
 </html>

templates/login.html

@@ -28,8 +28,8 @@
     <link rel="stylesheet" href="./assets/style.css" />
 
     <!-- Service Worker / Offline Cache Flush -->
-    <script src="/assets/lib/idb-keyval.js"></script>
+    <script src="/assets/lib/idb-keyval.min.js"></script>
-    <script src="/assets/lib/sw-helper.js"></script>
+    <script src="/assets/common.js"></script>
     <script src="/assets/index.js"></script>
 
     <style>