diff --git a/lib/gui.js b/lib/gui.js index 91e63c3..08c8a5b 100644 --- a/lib/gui.js +++ b/lib/gui.js @@ -14,6 +14,9 @@ function (chroma, Map, Sidebar, Tabs, Container, Meshstats, Linklist, var linkScale = chroma.scale(chroma.interpolate.bezier(["green", "yellow", "red"])).domain([1, 5]) var sidebar + var buttons = document.createElement("div") + buttons.classList.add("buttons") + function dataTargetRemove(d) { dataTargets = dataTargets.filter( function (e) { return d !== e }) } @@ -32,7 +35,7 @@ function (chroma, Map, Sidebar, Tabs, Container, Meshstats, Linklist, function addContent(K) { removeContent() - content = new K(config, linkScale, sidebar, router) + content = new K(config, linkScale, sidebar, router, buttons) contentDiv.appendChild(content.div) if (latestData) @@ -54,21 +57,21 @@ function (chroma, Map, Sidebar, Tabs, Container, Meshstats, Linklist, sidebar = new Sidebar(document.body) + contentDiv.appendChild(buttons) + var buttonToggle = document.createElement("button") - buttonToggle.classList.add("contenttoggle") - buttonToggle.classList.add("next-graph") + buttonToggle.textContent = "" buttonToggle.onclick = function () { if (content.constructor === Map) { - buttonToggle.classList.remove("next-graph") - buttonToggle.classList.add("next-map") + buttonToggle.textContent = "" router.view("g") } else { - buttonToggle.classList.remove("next-map") - buttonToggle.classList.add("next-graph") + buttonToggle.textContent = "" router.view("m") } } - contentDiv.appendChild(buttonToggle) + + buttons.appendChild(buttonToggle) var title = new Title(config) var infobox = new Infobox(config, sidebar, router) diff --git a/lib/map.js b/lib/map.js index ec2522c..ee610f2 100644 --- a/lib/map.js +++ b/lib/map.js @@ -18,6 +18,7 @@ define(["map/clientlayer", "map/labelslayer", onAdd: function () { var button = L.DomUtil.create("button", "add-layer") + button.textContent = "" L.DomEvent.disableClickPropagation(button) L.DomEvent.addListener(button, "click", this.f, this) @@ -43,6 +44,7 @@ define(["map/clientlayer", "map/labelslayer", onAdd: function () { var button = L.DomUtil.create("button", "locate-user") + button.textContent = "" L.DomEvent.disableClickPropagation(button) L.DomEvent.addListener(button, "click", this.onClick, this) @@ -118,7 +120,7 @@ define(["map/clientlayer", "map/labelslayer", var iconAlert = { color: "#D43E2A", fillColor: "#D43E2A", radius: 6, fillOpacity: 0.8, opacity: 0.8, weight: 2, className: "stroke-first node-alert" } var iconNew = { color: "#1566A9", fillColor: "#93E929", radius: 6, fillOpacity: 1.0, opacity: 0.5, weight: 2 } - return function (config, linkScale, sidebar, router) { + return function (config, linkScale, sidebar, router, buttons) { var self = this var barycenter var groupOnline, groupOffline, groupNew, groupLost, groupLines @@ -135,6 +137,20 @@ define(["map/clientlayer", "map/labelslayer", disableTracking() }) + var mybuttons = [] + + function addButton(button) { + var el = button.onAdd() + mybuttons.push(el) + buttons.appendChild(el) + } + + function clearButtons() { + mybuttons.forEach( function (d) { + buttons.removeChild(d) + }) + } + function saveView() { savedView = {center: map.getCenter(), zoom: map.getZoom()} @@ -207,9 +223,9 @@ define(["map/clientlayer", "map/labelslayer", map.on("locationerror", locationError) map.on("dragend", saveView) - map.addControl(locateUserButton) + addButton(locateUserButton) - map.addControl(new AddLayerButton(function () { + addButton(new AddLayerButton(function () { /*eslint no-alert:0*/ var layerName = prompt("Leaflet Provider:") addLayer(layerName) @@ -400,6 +416,7 @@ define(["map/clientlayer", "map/labelslayer", } self.destroy = function () { + clearButtons() map.remove() } diff --git a/scss/_map.scss b/scss/_map.scss index 8daf410..f0b340c 100644 --- a/scss/_map.scss +++ b/scss/_map.scss @@ -6,14 +6,6 @@ width: 100%; height: 100%; - button.locate-user:after { - content: '\f2a7'; - } - - button.add-layer:after { - content: '\f217'; - } - .node-alert { -webkit-animation: blink 2s linear; -webkit-animation-iteration-count: infinite; diff --git a/scss/main.scss b/scss/main.scss index 0d53e93..dd1f3b7 100644 --- a/scss/main.scss +++ b/scss/main.scss @@ -13,25 +13,24 @@ $buttondistance: 12pt; @import '_map'; @import '_forcegraph'; -.contenttoggle { - z-index: 100; - position: absolute; - top: $buttondistance; - right: $buttondistance; -} - -.contenttoggle.next-graph:after { - content: '\f341'; -} - -.contenttoggle.next-map:after { - content: '\f203'; -} - .content { position: fixed; width: 100%; height: 100vh; + + .buttons { + direction: rtl; + unicode-bidi: bidi-override; + + z-index: 100; + position: absolute; + top: $buttondistance; + right: $buttondistance; + + button { + margin-left: $buttondistance; + } + } } .tabs {