Refactoring of common code into 'core', in preparation for a generic 'Espruino App Loader'

core/css/main.css

@@ -0,0 +1,34 @@
+.navbar { background-color: #5755d9; padding: 0.5em 1em 0.5em 1em; }
+.navbar .navbar-brand {
+  color: #fff;
+  font-weight: bold;
+}
+.avatar img {
+  border-radius: 5px 5px 5px 5px;
+  background: #ddd;
+}
+#toastcontainer {
+  position:fixed;
+  bottom:8px;left:0px;right:0px;
+  z-index: 100;
+}
+.hero {
+  padding-bottom: 1rem;
+  padding-top: 1rem;
+  text-align:center;
+}
+.chip {
+  cursor: pointer;
+}
+.filter-nav {
+  display: inline-block;
+}
+.sort-nav {
+  float: right;
+}
+.tile-content { position: relative; }
+.link-github {
+  position:absolute;
+  top: 36px;
+  left: -24px;
+}

core/js/index.js

@@ -1,7 +1,7 @@
 let appJSON = []; // List of apps and info from apps.json
 let appsInstalled = []; // list of app JSON
 let appSortInfo = {}; // list of data to sort by, from appdates.csv { created, modified }
-let files = []; // list of files on Bangle
+let files = []; // list of files on the Espruimo Device
 let DEFAULTSETTINGS = {
   pretokenise : true,
   favourites : ["boot","launch","setting"]
@@ -193,7 +193,7 @@ function showTab(tabname) {
   htmlToArray(document.querySelectorAll("#tab-navigate .tab-item")).forEach(tab => {
     tab.classList.remove("active");
   });
-  htmlToArray(document.querySelectorAll(".bangle-tab")).forEach(tab => {
+  htmlToArray(document.querySelectorAll(".apploader-tab")).forEach(tab => {
     tab.style.display = "none";
   });
   document.getElementById("tab-"+tabname).classList.add("active");
@@ -256,10 +256,7 @@ function refreshLibrary() {
     let readme = `<a class="c-hand" onclick="showReadme('${app.id}')">Read more...</a>`;
     let favourite = favourites.find(e => e == app.id);
 
-    let username = "espruino";
+    let url = `${APP_SOURCECODE_URL}/${app.id}`;
-    let githubMatch = window.location.href.match(/\/(\w+)\.github\.io/);
-    if(githubMatch) username = githubMatch[1];
-    let url = `https://github.com/${username}/BangleApps/tree/master/apps/${app.id}`;
     let appurl = window.location.origin + window.location.pathname + "#" + encodeURIComponent(app.id);
 
     return `<div class="tile column col-6 col-sm-12 col-xs-12">
@@ -269,7 +266,7 @@ function refreshLibrary() {
     <div class="tile-content">
       <p class="tile-title text-bold"><a name="${appurl}"></a>${escapeHtml(app.name)} ${versionInfo}</p>
       <p class="tile-subtitle">${getAppDescription(app)}${app.readme?`<br/>${readme}`:""}</p>
-      <a href="${url}" target="_blank" class="link-github"><img src="img/github-icon-sml.png" alt="See the code on GitHub"/></a>
+      <a href="${url}" target="_blank" class="link-github"><img src="core/img/github-icon-sml.png" alt="See the code on GitHub"/></a>
     </div>
     <div class="tile-action">
       <button class="btn btn-link btn-action btn-lg ${!app.custom?"text-error":"d-hide"}" appid="${app.id}" title="Favorite"><i class="icon"></i>${favourite?"&#x2665;":"&#x2661;"}</button>
@@ -677,19 +674,6 @@ sortContainer.addEventListener('click', ({ target }) => {
 
 // =========================================== About
 
-if (window.location.host=="banglejs.com") {
-  document.getElementById("apploaderlinks").innerHTML =
-    'This is the official Bangle.js App Loader - you can also try the <a href="https://espruino.github.io/BangleApps/">Development Version</a> for the most recent apps.';
-} else if (window.location.host=="espruino.github.io") {
-  document.title += " [Development]";
-  document.getElementById("apploaderlinks").innerHTML =
-    'This is the development Bangle.js App Loader - you can also try the <a href="https://banglejs.com/apps/">Official Version</a> for stable apps.';
-} else {
-  document.title += " [Unofficial]";
-  document.getElementById("apploaderlinks").innerHTML =
-    'This is not the official Bangle.js App Loader - you can try the <a href="https://banglejs.com/apps/">Official Version</a> here.';
-}
-
 // Settings
 let SETTINGS_HOOKS = {}; // stuff to get called when a setting is loaded
 /// Load settings and update controls

index.html

@@ -3,10 +3,11 @@
   <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=0.8,maximum-scale=0.8, minimum-scale=0.8, shrink-to-fit=no">
-    <link rel="stylesheet" href="css/spectre.min.css">
+    <link rel="stylesheet" href="core/css/spectre.min.css">
-    <link rel="stylesheet" href="css/spectre-exp.min.css">
+    <link rel="stylesheet" href="core/css/spectre-exp.min.css">
-    <link rel="stylesheet" href="css/spectre-icons.min.css">
+    <link rel="stylesheet" href="core/css/spectre-icons.min.css">
-    <link rel="stylesheet" href="css/pwa.css">
+    <link rel="stylesheet" href="core/css/pwa.css">
+    <link rel="stylesheet" href="core/css/main.css">
     <link rel="apple-touch-icon" sizes="180x180" href="img/apple-touch-icon.png">
     <link rel="icon" type="image/png" sizes="32x32" href="img/favicon-32x32.png">
     <link rel="icon" type="image/png" sizes="16x16" href="img/favicon-16x16.png">
@@ -17,42 +18,6 @@
     <meta name="msapplication-TileColor" content="#5755d9">
     <meta name="theme-color" content="#5755d9">
     <title>Bangle.js App Loader</title>
-    <style>
-		.navbar { background-color: #5755d9; padding: 0.5em 1em 0.5em 1em; }
-		.navbar .navbar-brand {
-			color: #fff;
-      font-weight: bold;
-		}
-    .avatar img {
-      border-radius: 5px 5px 5px 5px;
-      background: #ddd;
-    }
-    #toastcontainer {
-      position:fixed;
-      bottom:8px;left:0px;right:0px;
-      z-index: 100;
-    }
-    .hero {
-      padding-bottom: 1rem;
-      padding-top: 1rem;
-      text-align:center;
-    }
-    .chip {
-      cursor: pointer;
-    }
-    .filter-nav {
-      display: inline-block;
-    }
-    .sort-nav {
-      float: right;
-    }
-    .tile-content { position: relative; }
-    .link-github {
-      position:absolute;
-      top: 36px;
-      left: -24px;
-    }
-	</style>
   </head>
   <body>
     <header class="navbar-primary navbar">
@@ -93,7 +58,7 @@
     <div class="container"  id="toastcontainer">
     </div>
 
-    <div class="container bangle-tab" id="librarycontainer">
+    <div class="container apploader-tab" id="librarycontainer">
       <div>
         <div class="filter-nav">
           <label class="chip active" filterid="">Default</label>
@@ -124,7 +89,7 @@
       </div>
     </div>
 
-    <div class="container bangle-tab" id="myappscontainer" style="display:none">
+    <div class="container apploader-tab" id="myappscontainer" style="display:none">
       <div class="panel">
         <div class="panel-header" style="text-align:right">
           <button class="btn refresh">Refresh...</button>
@@ -134,7 +99,7 @@
       </div>
     </div>
 
-    <div class="container bangle-tab" id="aboutcontainer" style="display:none">
+    <div class="container apploader-tab" id="aboutcontainer" style="display:none">
       <div class="hero bg-gray">
         <div class="hero-body">
           <a href="https://banglejs.com" target="_blank"><img src="img/banglejs-logo-mid.png" alt="Bangle.js"></a>
@@ -174,14 +139,15 @@
     </footer>
 
     <script src="https://www.puck-js.com/puck.js"></script>
-    <script src="lib/marked.min.js"></script>
+    <script src="loader.js"></script>
-    <script src="lib/espruinotools.js"></script>
+    <script src="core/lib/marked.min.js"></script>
-    <script src="lib/heatshrink.js"></script>    
+    <script src="core/lib/espruinotools.js"></script>
-    <script src="js/utils.js"></script>
+    <script src="core/lib/heatshrink.js"></script>
-    <script src="js/ui.js"></script>
+    <script src="core/js/utils.js"></script>
-    <script src="js/comms.js"></script>
+    <script src="core/js/ui.js"></script>
-    <script src="js/appinfo.js"></script>
+    <script src="core/js/comms.js"></script>
-    <script src="js/index.js"></script>
+    <script src="core/js/appinfo.js"></script>
-    <script src="js/pwa.js" defer></script>
+    <script src="core/js/index.js"></script>
+    <script src="core/js/pwa.js" defer></script>
   </body>
 </html>

loader.js

@@ -0,0 +1,20 @@
+if (window.location.host=="banglejs.com") {
+  document.getElementById("apploaderlinks").innerHTML =
+    'This is the official Bangle.js App Loader - you can also try the <a href="https://espruino.github.io/BangleApps/">Development Version</a> for the most recent apps.';
+} else if (window.location.host=="espruino.github.io") {
+  document.title += " [Development]";
+  document.getElementById("apploaderlinks").innerHTML =
+    'This is the development Bangle.js App Loader - you can also try the <a href="https://banglejs.com/apps/">Official Version</a> for stable apps.';
+} else {
+  document.title += " [Unofficial]";
+  document.getElementById("apploaderlinks").innerHTML =
+    'This is not the official Bangle.js App Loader - you can try the <a href="https://banglejs.com/apps/">Official Version</a> here.';
+}
+
+var APP_SOURCECODE_URL;
+(function() {
+  let username = "espruino";
+  let githubMatch = window.location.href.match(/\/(\w+)\.github\.io/);
+  if (githubMatch) username = githubMatch[1];
+  APP_SOURCECODE_URL = `https://github.com/${username}/BangleApps/tree/master/apps`;
+})();