Add Bootstrap 4 support

www/css/sidemenu-bs3.css

@@ -0,0 +1,76 @@
+/*
+This Source Code Form is subject to the terms of the Mozilla Public
+License, v. 2.0. If a copy of the MPL was not distributed with this
+file, You can obtain one at http://mozilla.org/MPL/2.0/.
+*/
+@media screen and (max-width: 767px) {
+    .navbar, .navbar-brand {
+        min-height: 56px;
+        height: 56px;
+    }
+
+    .navbar-brand {
+        font-size: 20px;
+        margin-top: -4px;
+    }
+
+    .navbar-toggle {
+        border: 0px solid white;
+        margin-top: 11px;
+        margin-bottom: 11px;
+    }
+
+    #navbar-collapse {
+        display: none;
+    }
+
+    button.navbar-toggle[data-toggle="collapse"] {
+        float: left;
+        margin-left: 15px;
+    }
+
+    .navbar-header .navbar-brand {
+        margin-left: -20px;
+    }
+
+    .navbar-header .navbar-brand img {
+        display: none;
+    }
+}
+
+#swipe-nav ul {
+    margin-bottom: 10px;
+    padding-left: 2px;
+    list-style-type: none;
+    padding: 3px;
+}
+
+#swipe-nav ul li {
+    color: #424242;
+    padding-top: 5px;
+    padding-bottom: 5px;
+}
+
+#swipe-nav ul li a:focus,a:active {
+    background-color: #e0e0e0;
+}
+
+#swipe-nav ul li i.fa {
+    font-size: 120%;
+    margin-right: 10px;
+    margin-left: 5px;
+}
+
+#swipe-nav ul li a {
+    display: inline-block;
+    color: #424242;
+    font-size: 110%;
+    text-decoration: none;
+    width: 100%;
+    padding-top: 10px;
+    padding-bottom: 10px;
+}
+
+#swipe-nav ul li a:hover {
+    text-decoration: none;
+}

www/css/sidemenu-bs4.css

@@ -0,0 +1,48 @@
+/*
+This Source Code Form is subject to the terms of the Mozilla Public
+License, v. 2.0. If a copy of the MPL was not distributed with this
+file, You can obtain one at http://mozilla.org/MPL/2.0/.
+*/
+@media screen and (max-width: 767px) {
+    #navbar-collapse {
+        display: none;
+    }
+}
+
+#swipe-nav .swipe-list {
+    margin-top: 5px;
+    margin-bottom: 10px;
+    padding-left: 0px;
+    list-style-type: none;
+    padding: 3px;
+}
+
+#swipe-nav .swipe-list .nav-item {
+    color: #424242;
+    padding-top: 5px;
+    padding-bottom: 5px;
+}
+
+#swipe-nav .swipe-list .nav-item a:focus,a:active {
+    background-color: #e0e0e0;
+}
+
+#swipe-nav .swipe-list .nav-item i.fa {
+    font-size: 120%;
+    margin-right: 10px;
+    margin-left: 5px;
+}
+
+#swipe-nav .swipe-list .nav-item a {
+    display: inline-block;
+    color: #424242;
+    font-size: 110%;
+    text-decoration: none;
+    width: 100%;
+    padding-top: 15px;
+    padding-bottom: 15px;
+}
+
+#swipe-nav .swipe-list .nav-item a:hover {
+    text-decoration: none;
+}

www/css/sidemenu.css

@@ -15,41 +15,6 @@
     display: initial;
 }
 
-@media screen and (max-width: 767px) {
-    .navbar, .navbar-brand {
-        min-height: 56px;
-        height: 56px;
-    }
-
-    .navbar-brand {
-        font-size: 20px;
-        margin-top: -4px;
-    }
-
-    .navbar-toggle {
-        border: 0px solid white;
-        margin-top: 11px;
-        margin-bottom: 11px;
-    }
-
-    #navbar-collapse {
-        display: none;
-    }
-
-    button.navbar-toggle[data-toggle="collapse"] {
-        float: left;
-        margin-left: 15px;
-    }
-
-    .navbar-header .navbar-brand {
-        margin-left: -20px;
-    }
-
-    .navbar-header .navbar-brand img {
-        display: none;
-    }   
-}
-
 #swipe-nav {
     display: none;
     visibility: visible;
@@ -92,43 +57,6 @@
     font-size: 120%;
 }
 
-#swipe-nav ul {
-    margin-bottom: 10px;
-    padding-left: 2px;
-    list-style-type: none;
-    padding: 3px;
-}
-
-#swipe-nav ul li {
-    color: #424242;
-    padding-top: 5px;
-    padding-bottom: 5px;
-}
-
-#swipe-nav ul li a:focus,a:active {
-    background-color: #e0e0e0;
-}
-
-#swipe-nav ul li i.fa {
-    font-size: 120%;
-    margin-right: 10px;
-    margin-left: 5px;
-}
-
-#swipe-nav ul li a {
-    display: inline-block;
-    color: #424242;
-    font-size: 110%;
-    text-decoration: none;
-    width: 100%;
-    padding-top: 10px;
-    padding-bottom: 10px;
-}
-
-#swipe-nav ul li a:hover {
-    text-decoration: none;
-}
-
 #swipe-nav #swipe-pages {
     padding-bottom: 10px;
     border-bottom: 1px solid #eeeeee;

www/js/app.js

@@ -30,9 +30,9 @@ function openscreen(screenname, effect) {
 }
 
 /**
- * Fetch user info (name, email, etc) from the server and save to the global 
+ * Fetch user info (name, email, etc) from the server and save to the global
  * variable `userinfo`.
- * @param function callback An optional function to run if/when the request 
+ * @param function callback An optional function to run if/when the request
  * succeeds.
  */
 function getuserinfo(callback) {
@@ -90,7 +90,7 @@ function addnavbarbtn(screenid, icon, title) {
 
 /**
  * Set the navbar options.
- * 
+ *
  * @param String title Text to display
  * @param boolean showarrow True if the back arrow should be visible
  * @param Stringn backscreen The screen to open when the title is pressed, false or null for none
@@ -110,8 +110,8 @@ function setnavbartitle(title, showarrow, backscreen) {
 
 /**
  * Set the navbar.
- * @param String,boolean type false if no navbar, "home" for the home screen, 
+ * @param String,boolean type false if no navbar, "home" for the home screen,
- * "settings" for settings, "app" for a custom title, or anything else for 
+ * "settings" for settings, "app" for a custom title, or anything else for
  * a simple one.
  * @param String screentitle The title to show if type == "app"
  * @param String returnscreen Where to go back to.  Defaults to "home".
@@ -168,6 +168,17 @@ function setnavbar(type, screentitle, returnscreen) {
     }
 }
 
+/**
+ * Thanks to https://stackoverflow.com/a/13542669
+ * @param {type} color
+ * @param {type} percent
+ * @returns {String}
+ */
+function shadeColor2(color, percent) {
+    var f = parseInt(color.slice(1), 16), t = percent < 0 ? 0 : 255, p = percent < 0 ? percent * -1 : percent, R = f >> 16, G = f >> 8 & 0x00FF, B = f & 0x0000FF;
+    return "#" + (0x1000000 + (Math.round((t - R) * p) + R) * 0x10000 + (Math.round((t - G) * p) + G) * 0x100 + (Math.round((t - B) * p) + B)).toString(16).slice(1);
+}
+
 /**
  * Load the app.html view and open an app with native Android UI elements
  * @param String id Application ID

www/js/sidemenu.js

@@ -52,20 +52,34 @@ function togglemenu() {
 
 $(document).ready(function () {
     $.fx.off = __JQUERYFXOFF__;
+    var bootstrap_version = $.fn.tooltip.Constructor.VERSION;
+    if (typeof navbar_breakpoint != "undefined") {
+        var nav_breakpoint = navbar_breakpoint;
+    } else {
+        var nav_breakpoint = "sm";
+    }
     var pages = $('#navbar-collapse .navbar-nav').html();
     var body = $('body');
     var username = "__USERNAME__";
     var menucolor = $('.navbar').css('backgroundColor');
-    var textcolor = $('.navbar .navbar-nav > li > a').css('color');
+    var textcolor = $('.navbar .navbar-brand').css('color');
     var logo = "__LOGO__";
-    body.append("<div id='swipe-nav'><div id='swipe-header' style='background-color: " + menucolor + "; color: " + textcolor + "'><a href='./app.php'><img id='swipe-appicon' src='" + logo + "' /></a> <div id='swipe-username'><i class='fa fa-user fa-fw'></i> " + username + "</div></div>\n<ul id='swipe-pages'>" + pages + "</ul><ul><li><a onclick='quitapp()'><i class='fa fa-sign-out fa-fw'></i> Back to Menu</a></li></ul></div>");
+
+    parent.postMessage("setcolor " + menucolor, "*");
+    parent.postMessage('load_bs_version ' + bootstrap_version + ' ' + nav_breakpoint, '*');
+
+    if (bootstrap_version.startsWith("4")) {
+        $('#navbar-right').html("<span class='nav-item py-" + nav_breakpoint + "-0'><a class='nav-link py-" + nav_breakpoint + "-0' onclick='quitapp()'><i class='fas fa-sign-out-alt fa-fw'></i> Back to Menu</a></span>");
+        body.append("<div id='swipe-nav'><div id='swipe-header' style='background-color: " + menucolor + "; color: " + textcolor + "'><a href='./app.php'><img id='swipe-appicon' src='" + logo + "' /></a> <div id='swipe-username'><i class='fa fa-user fa-fw'></i> " + username + "</div></div>\n<div id='swipe-pages' class='swipe-list'>" + pages + "</div><div class='swipe-list'><span class='nav-item'><a class='nav-link' onclick='quitapp()'><i class='fas fa-sign-out-alt fa-fw'></i> Back to Menu</a></span></div></div>");
+    } else {
+        body.append("<div id='swipe-nav'><div id='swipe-header' style='background-color: " + menucolor + "; color: " + textcolor + "'><a href='./app.php'><img id='swipe-appicon' src='" + logo + "' /></a> <div id='swipe-username'><i class='fa fa-user fa-fw'></i> " + username + "</div></div>\n<ul id='swipe-pages'>" + pages + "</ul><ul><li><a onclick='quitapp()'><i class='fa fa-sign-out fa-fw'></i> Back to Menu</a></li></ul></div>");
+    }
     body.append("<div id='swipe-shader'></div>");
 
     $(".navbar-brand").attr("href", "#");
 
-    parent.postMessage("setcolor " + menucolor, "*");
-
     $('button.navbar-toggle[data-toggle="collapse"]').click(togglemenu);
+    $('button.navbar-toggler[data-toggle="collapse"]').click(togglemenu);
 
     $('#swipe-shader').click(togglemenu);
 

www/views/app.html

@@ -39,6 +39,7 @@
                         historyctr++;
                         // Do this right away so it's a bit harder to glitch
                         $('#appframe').contents().find('.navbar-right').html("<li><a onclick='quitapp()'><i class='fa fa-sign-out fa-fw'></i> Back to Menu</a></li>");
+                        // Moved BS4 code to sidemenu.js
                         $.get("css/sidemenu.css", function (style) {
                             $('#appframe').contents().find('head').append("<style>" + style + "</style>");
                             $.get("js/jquery-ui.min.js", function (script) {
@@ -75,20 +76,48 @@
     }
 
     var scanningactive = false;
-    var dedup = false;
+    var dedup = [];
     window.addEventListener('message', function (event) {
         console.log("app event: " + event.data);
         setTimeout(function () {
-            dedup = false;
+            dedup = [];
         }, 500);
-        if (dedup) {
+        if (dedup.includes(event.data)) {
             return;
         }
-        dedup = true;
+        dedup.push(event.data);
         if (event.data == "quit") {
             openscreen("home");
         } else if (event.data == "goneback") {
             historyctr -= 1;
+        } else if (event.data.startsWith("load_bs_version ")) {
+            var bootstrap_version = event.data.split(" ")[1];
+            var nav_breakpoint = event.data.split(" ")[2];
+            var bs_file = "bs3";
+            if (bootstrap_version.startsWith("4")) {
+                bs_file = "bs4";
+            }
+            $.get("css/sidemenu-" + bs_file + ".css", function (style) {
+                if (bs_file == "bs4") {
+                    var break_px = "767";
+                    switch (nav_breakpoint) {
+                        case "sm":
+                            break_px = "575";
+                            break;
+                        case "md":
+                            break_px = "767";
+                            break;
+                        case "lg":
+                            break_px = "991";
+                            break;
+                        case "xl":
+                            break_px = "1199";
+                            break;
+                    }
+                    style = style.replace("max-width: 767px", "max-width: " + break_px + "px");
+                }
+                $('#appframe').contents().find('head').append("<style>" + style + "</style>");
+            });
         } else if (event.data.startsWith("setcolor ")) {
             var color = event.data.split(" ", 2)[1];
             if (cordova.platformId == 'android') {
@@ -99,6 +128,7 @@
                         return;
                     }
                 }
+                StatusBar.backgroundColorByHexString(shadeColor2(color, -0.1));
             } else {
                 StatusBar.backgroundColorByHexString(color);
             }