diff --git a/www/css/sidemenu-bs3.css b/www/css/sidemenu-bs3.css new file mode 100644 index 0000000..ede7a75 --- /dev/null +++ b/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; +} \ No newline at end of file diff --git a/www/css/sidemenu-bs4.css b/www/css/sidemenu-bs4.css new file mode 100644 index 0000000..a49fd77 --- /dev/null +++ b/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; +} \ No newline at end of file diff --git a/www/css/sidemenu.css b/www/css/sidemenu.css index 9affd03..5d43026 100644 --- a/www/css/sidemenu.css +++ b/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; diff --git a/www/js/app.js b/www/js/app.js index 8cae537..235684b 100644 --- a/www/js/app.js +++ b/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, - * "settings" for settings, "app" for a custom title, or anything else for + * @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 * 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 diff --git a/www/js/sidemenu.js b/www/js/sidemenu.js index f0eb5c4..e5384e8 100644 --- a/www/js/sidemenu.js +++ b/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("
" + username + "
\n
"); + + parent.postMessage("setcolor " + menucolor, "*"); + parent.postMessage('load_bs_version ' + bootstrap_version + ' ' + nav_breakpoint, '*'); + + if (bootstrap_version.startsWith("4")) { + $('#navbar-right').html(" Back to Menu"); + body.append("
" + username + "
\n
" + pages + "
Back to Menu
"); + } else { + body.append("
" + username + "
\n
"); + } body.append("
"); $(".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); diff --git a/www/views/app.html b/www/views/app.html index e6437e6..6d63fd0 100644 --- a/www/views/app.html +++ b/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("
  • Back to Menu
    • "); + // Moved BS4 code to sidemenu.js $.get("css/sidemenu.css", function (style) { $('#appframe').contents().find('head').append(""); $.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(""); + }); } 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); }