From 814561d06929f3adbeb3fbedc0da2fa71074fb35 Mon Sep 17 00:00:00 2001
From: José Bollo <jose.bollo@iot.bzh>
Date: Tue, 19 Sep 2017 12:23:13 +0200
Subject: monitoring: Add CSS/style/theme switch dynamically
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
This can be useful when presenting the monitoring
to switch from a dark theme to a light theme
dynamically.
Change-Id: I25beffe2071e7a71d7ad493099ab3bb674de8461
Signed-off-by: José Bollo <jose.bollo@iot.bzh>
---
test/monitoring/monitor.html | 4 +++-
test/monitoring/monitor.js | 50 ++++++++++++++++++++++++++++++++++++++++++++
2 files changed, 53 insertions(+), 1 deletion(-)
(limited to 'test')
diff --git a/test/monitoring/monitor.html b/test/monitoring/monitor.html
index 22f090ed..2c07c1ba 100644
--- a/test/monitoring/monitor.html
+++ b/test/monitoring/monitor.html
@@ -18,7 +18,8 @@
-->
<title>Monitoring</title>
<link href="monitor-base.css" rel="stylesheet">
- <link href="monitor-demo.css" rel="stylesheet">
+ <link href="monitor-demo.css" rel="stylesheet" title="demo">
+ <link href="monitor-pastel.css" rel="alternate stylesheet" title="pastel">
<script type="text/javascript" src="underscore-min.js"></script>
<script type="text/javascript" src="AFB.js"></script>
<script type="text/javascript" src="monitor.js"></script>
@@ -67,6 +68,7 @@
<div id="menu" class="-flex-v">
<div id="connect" class="x-button">Connect</div>
<div id="disconnect" class="x-button">Disconnect</div>
+ <div id="style" class="x-button">style</div>
<div id="autoscroll" class="x-button">Stop scroll</div>
<div id="addsep" class="x-button">Add separator</div>
<div id="droptracevts" class="x-button">Clear traces</div>
diff --git a/test/monitoring/monitor.js b/test/monitoring/monitor.js
index 6ca75cc6..5b9dc0ea 100644
--- a/test/monitoring/monitor.js
+++ b/test/monitoring/monitor.js
@@ -39,6 +39,8 @@ var logmsgs_node;
var apis_node;
var all_node;
+var styles;
+
/* flags */
var show_perms = false;
var show_monitor_events = false;
@@ -81,7 +83,14 @@ function on_connect(evt) {
connect();
}
+function next_style(evt) {
+ styles.next();
+}
+
function init() {
+ styles = makecss();
+ at("style").onclick = next_style;
+
/* prepare the DOM templates */
t_api = at("t-api").content.firstElementChild;
t_verb = at("t-verb").content.firstElementChild;
@@ -510,3 +519,44 @@ function obj2html(json) {
});
}
+function makecss()
+{
+ var i, l, a, links, x;
+
+ x = { idx: 0, byidx: [], byname: {}, names: [] };
+ links = document.getElementsByTagName("link");
+ for (i = 0 ; i < links.length ; i++) {
+ l = links[i];
+ if (l.title && l.rel.indexOf( "stylesheet" ) != -1) {
+ if (!(l.title in x.byname)) {
+ x.byname[l.title] = x.byidx.length;
+ x.names.push(l.title);
+ x.byidx.push([]);
+ }
+ x.byidx[x.byname[l.title]].push(l);
+ }
+ }
+
+ x.set = function(id) {
+ if (id in x.byname)
+ id = x.byname[id];
+ if (id in x.byidx) {
+ var i, j, a, b;
+ x.idx = id;
+ a = x.byidx;
+ for (i = 0 ; i < a.length ; i++) {
+ b = a[i];
+ for (j = 0 ; j < b.length ; j++)
+ b[j].disabled = i != id;
+ }
+ }
+ };
+
+ x.next = function() {
+ x.set((x.idx + 1) % x.byidx.length);
+ };
+
+ x.set(0);
+ return x;
+}
+
--
cgit