Refactor tabs to use a library.

We still need to refactor the css to match, though

Changelog.md

@@ -1,5 +1,9 @@
 # Changelog
 
+## v0.3.0 - 1st February 2019
+
+ - 
+
 ## v0.2.0 - 26th January 2019
 The first entry!
 

client_src/css/popup.css

@@ -4,11 +4,18 @@
 
 h2.device-name { text-align: center; }
 .device-name::after {
-    content: "#" attr(data-id);
-    float: right; margin-right: 1em;
-    
-    font-size: 80%;
-    color: hsl(230, 45%, 65%);
+	content: "#" attr(data-id);
+	float: right; margin-right: 1em;
+	
+	font-size: 80%;
+	color: hsl(230, 45%, 65%);
+}
+
+.tab-panes .tab-pane {
+	display: none
+}
+.tab-panes .active {
+	display: block
 }
 
 .tabs {
@@ -40,7 +47,7 @@ h2.device-name { text-align: center; }
 	color: hsl(252, 100%, 59%);
 	text-decoration: none;
 }
-.tabs li a.selected { opacity: 1; }
+.tabs li.active a { opacity: 1; }
 
 /* Default */
 .tab-content { display: none; }
@@ -50,32 +57,32 @@ h2.device-name { text-align: center; }
 .device-data {
 	display: flex; justify-content: center;
 	
-    min-height: 20em;
+	min-height: 20em;
 	padding-top: 1em;
 }
 
 .device-params { margin: 0 auto; }
 
 .device-property-table {
-    border-collapse: collapse;
+	border-collapse: collapse;
 }
 .device-property-table tr:nth-child(odd) {
-    background: hsla(222, 100%, 70%, 0.25);
+	background: hsla(222, 100%, 70%, 0.25);
 }
 .device-property-table th {
-    padding-right: 2em;
+	padding-right: 2em;
 }
 .device-property-table td:nth-child(2) {
-    border-left: 0.2em solid hsl(222, 100%, 59%);
-    padding-left: 0.5em;
+	border-left: 0.2em solid hsl(222, 100%, 59%);
+	padding-left: 0.5em;
 }
 
 .reading-types {
 	list-style-type: none;
 	padding: 0;
 	
-    display: flex;
-    flex-direction: row;
+	display: flex;
+	flex-direction: row;
 }
 .reading-types button {
 	margin: 0.25em;

client_src/js/LayerDeviceMarkers.mjs

@@ -5,6 +5,7 @@ import 'leaflet.markercluster';
 // import CreateElement from 'dom-create-element-query-selector';
 // We're using the git repo for now until an update is released, and rollup doesn't like that apparently
 import CreateElement from '../../node_modules/dom-create-element-query-selector/src/index.js';
+import tabs from 'tabs';
 
 import Config from './Config.mjs';
 import DeviceReadingDisplay from './DeviceReadingDisplay.mjs';
@@ -87,22 +88,21 @@ class LayerDeviceMarkers {
 		// Select a tab by default
 		window.location = "#tab-data";
 		
-		result.appendChild(CreateElement("ul.tabs"));
-		let tabs = result.querySelector(".tabs");
-		tabs.innerHTML = `<li><a href="#tab-info">Info</a></li>
-		<li><a href="#tab-data">Data</a></li>`;
-		tabs.addEventListener("click", (event) => {
-			tabs.querySelectorAll("a").forEach((el) => el.classList.remove("selected"));
-			event.target.classList.add("selected");
-		})
+		let tabContainer = CreateElement("div.tab-container",
+			CreateElement("ul.tabs",
+				CreateElement("li", CreateElement("a.tab.active", "Info")),
+				CreateElement("li", CreateElement("a.tab", "Data"))
+			),
+			CreateElement("div.tab-panes",
+				CreateElement("div.device-params.tab-pane.active")
+				// The tab pane for the graph is added dynamically below
+			)
+		);
+		result.appendChild(tabContainer);
 		
 		// ----------------------------------
 		
-		let data_container = CreateElement("div.device-data",
-			CreateElement("div.device-params.tab-content#tab-info")
-		);
-		result.appendChild(data_container);
-		let params_container = data_container.querySelector(".device-params");
+		let params_container = tabContainer.querySelector(".device-params");
 		
 		let info_list = [];
 		for(let property in device_info) {
@@ -114,11 +114,8 @@ class LayerDeviceMarkers {
 			// some property values
 			let value = device_info[property];
 			
-			// Filter out undefined properties
-			if(typeof value == "undefined" || value === null) {
+			if(typeof value == "undefined" || value === null)
 				value = "(not specified)";
-			}
-			
 			
 			// If the value isn't a string, but is still 'truthy'
 			if(typeof value != "string") {
@@ -126,9 +123,7 @@ class LayerDeviceMarkers {
 					case "location":
 						value = `(${value[0]}, ${value[1]})`;
 						break;
-					default:
-						value = value.toString();
-						break;
+					default: value = value.toString(); break;
 				}
 			}
 			
@@ -138,7 +133,9 @@ class LayerDeviceMarkers {
 				CreateElement("td.value", value)
 			));
 		}
-		params_container.appendChild(CreateElement("table.device-property-table", ...info_list));
+		params_container.appendChild(
+			CreateElement("table.device-property-table", ...info_list)
+		);
 		
 		params_container.appendChild(CreateElement("p.device-notes",
 			CreateElement("em", device_info.other || "")
@@ -146,14 +143,15 @@ class LayerDeviceMarkers {
 		
 		// ----------------------------------
 		
-		// TODO: Allow the user to change the reading type
 		let chart_device_data = new DeviceReadingDisplay(Config, device_info.id);
 		chart_device_data.setup("PM25").then(() => 
 			console.info("[layer/markers] Device chart setup complete!")
 		);
-		chart_device_data.display.classList.add("tab-content");
-		chart_device_data.display.setAttribute("id", "tab-data");
-		data_container.appendChild(chart_device_data.display);
+		chart_device_data.display.classList.add("tab-pane");
+		tabContainer.querySelector(".tab-panes").appendChild(chart_device_data.display);
+		
+		
+		tabs(tabContainer);
 		
 		// ----------------------------------
 		

package-lock.json

@@ -4830,6 +4830,11 @@
         "whet.extend": "~0.9.9"
       }
     },
+    "tabs": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/tabs/-/tabs-0.2.0.tgz",
+      "integrity": "sha1-Rw9vL6VGYGTrGpUB10wWqIPPv9o="
+    },
     "terser": {
       "version": "3.14.1",
       "resolved": "https://registry.npmjs.org/terser/-/terser-3.14.1.tgz",

package.json

@@ -25,7 +25,8 @@
     "leaflet.markercluster": "^1.4.1",
     "moment": "^2.23.0",
     "nanomodal": "^5.1.1",
-    "smartsettings": "^1.2.3"
+    "smartsettings": "^1.2.3",
+    "tabs": "^0.2.0"
   },
   "devDependencies": {
     "@types/chart.js": "^2.7.42",