From 3cc2d9ae7e9d769f902e226c89b495c438ad2c04 Mon Sep 17 00:00:00 2001
From: Ryan Blenis <ryan.blenis@gmail.com>
Date: Sat, 30 Nov 2019 20:26:39 -0500
Subject: [PATCH] - Move p19 styles to stylesheet - Wait to update meshcore
 until after all plugins loaded (reduced processing power) - More intuitive
 registerPluginTab functionality - OnStates for current plugin tab

---
 pluginHandler.js         | 18 +++++++++++++-----
 public/styles/style.css  | 21 +++++++++++++++++++++
 views/default.handlebars | 17 -----------------
 3 files changed, 34 insertions(+), 22 deletions(-)

diff --git a/pluginHandler.js b/pluginHandler.js
index 3d1e7e08..4a1d347a 100644
--- a/pluginHandler.js
+++ b/pluginHandler.js
@@ -51,8 +51,8 @@ module.exports.pluginHandler = function (parent) {
                         parent.db.updatePlugin(plugin._id, plugin_config);
                     } catch (e) { console.log("Plugin config file for " + plugin.name + " could not be parsed."); }
                 }
-                obj.parent.updateMeshCore(); // db calls are delayed, lets inject here once we're ready
             });
+            obj.parent.updateMeshCore(); // db calls are async, lets inject here once we're ready
         });
     } else {
         obj.loadList.forEach(function (plugin, index) {
@@ -88,17 +88,25 @@ module.exports.pluginHandler = function (parent) {
                 }
             }
         };
-        
+        // accepts a function returning an object or an object with { tabId: "yourTabIdValue", tabTitle: "Your Tab Title" }
         obj.registerPluginTab = function(pluginRegInfo) {
-            var d = pluginRegInfo();
+            var d = null;
+            if (typeof pluginRegInfo == 'function') d = pluginRegInfo();
+            else d = pluginRegInfo;
             if (!Q(d.tabId)) {
-                QA('p19headers', '<span onclick="return pluginHandler.callPluginPage(\\''+d.tabId+'\\');">'+d.tabTitle+'</span>');
+                var defaultOn = 'class="on"';
+                if (Q('p19headers').querySelectorAll("span.on").length) defaultOn = '';
+                QA('p19headers', '<span ' + defaultOn + ' onclick="return pluginHandler.callPluginPage(\\''+d.tabId+'\\', this);">'+d.tabTitle+'</span>');
+                QA('p19pages', '<div id="' + d.tabId + '"></div>');
             }
         };
-        obj.callPluginPage = function(id) {
+        obj.callPluginPage = function(id, el) {
             var pages = Q('p19pages').querySelectorAll("#p19pages>div"); 
             for (const i of pages) { i.style.display = 'none'; }
             QV(id, true);
+            var tabs = Q('p19headers').querySelectorAll("span"); 
+            for (const i of tabs) { i.classList.remove('on'); }
+            el.classList.add('on');
         };
         obj.addPluginEx = function() {
             meshserver.send({ action: 'addplugin', url: Q('pluginurlinput').value});
diff --git a/public/styles/style.css b/public/styles/style.css
index 4f103582..097d6d7e 100644
--- a/public/styles/style.css
+++ b/public/styles/style.css
@@ -2645,3 +2645,24 @@ a {
     width: 100%;
     height: 100%;
 }
+
+#p19headers {
+    padding-right: 7px;
+    padding-bottom: 10px;
+    font-weight: bold;
+    border-bottom: 1px dotted blue;
+}
+
+#p19headers > span:nth-child(n+2) {
+    border-left: 1px solid black;
+}
+
+#p19headers > span {
+    padding-left: 4px;
+    padding-right: 4px;
+    cursor: pointer;
+    font-weight: lighter;
+}
+#p19headers > span.on {
+    font-weight: bold;
+}
diff --git a/views/default.handlebars b/views/default.handlebars
index ff229c5d..bc35201c 100644
--- a/views/default.handlebars
+++ b/views/default.handlebars
@@ -893,23 +893,6 @@
             </div>
             <div id=p19 style="display:none">
                 <h1>Plugins - <span id=p19deviceName></span></h1>
-                <style>
-                    #p19headers {
-                        padding-right: 7px;
-                        padding-bottom: 10px;
-                        font-weight: bold;
-                        border-bottom: 1px dotted blue;
-                    }
-
-                        #p19headers > span:nth-child(n+2) {
-                            border-left: 1px solid black;
-                        }
-
-                        #p19headers > span {
-                            padding-left: 4px;
-                            padding-right: 4px;
-                        }
-                </style>
                 <div id="p19headers"></div>
                 <div id=p19pages></div>
             </div>