map: show buttons along content buttons

This commit is contained in:
Nils Schneider 2015-07-07 01:56:11 +02:00
parent cc3d591bd0
commit 144dba319e
4 changed files with 45 additions and 34 deletions

View file

@ -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)

View file

@ -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()
}

View file

@ -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;

View file

@ -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 {