Merge branch 'info'

lang/de.json

@@ -1,4 +1,5 @@
 {
+    "category-info-tooltip": "Info & Legende",
     "closed": "geschlossen",
     "default": "Standard",
     "error": {

lang/en.json

@@ -1,4 +1,5 @@
 {
+    "category-info-tooltip": "Info & Map key",
     "closed": "closed",
     "default": "default",
     "error": {

src/CategoryBase.js

@@ -1,5 +1,6 @@
 /* global lang, ui_lang, options, alert */
 var OpenStreetBrowserLoader = require('./OpenStreetBrowserLoader')
+var tabs = require('./tabs')
 
 function CategoryBase (id, data) {
   this.id = id
@@ -57,6 +58,10 @@ function CategoryBase (id, data) {
     }
   }
 
+  this.tools = new tabs.Tabs()
+  this.dom.appendChild(this.tools.node)
+  this.tools.node.classList.add('tools')
+
   this.domContent = document.createElement('div')
   this.domContent.className = 'content'
   this.dom.appendChild(this.domContent)

src/CategoryOverpass.js

@@ -3,6 +3,8 @@ var OverpassLayer = require('overpass-layer')
 var OverpassLayerList = require('overpass-layer').List
 var CategoryBase = require('./CategoryBase')
 var state = require('./state')
+var tabs = require('./tabs')
+var markers = require('./markers')
 var defaultValues = {
   feature: {
     title: "{{ localizedTag(tags, 'name') |default(localizedTag(tags, 'operator')) | default(localizedTag(tags, 'ref')) | default(trans('unnamed')) }}",
@@ -13,7 +15,9 @@ var defaultValues = {
       opacity: 1,
       radius: 12,
       fill: false
-    }
+    },
+    markerSymbol: "{{ markerPointer({})|raw }}",
+    listMarkerSymbol: "{{ markerCircle({})|raw }}",
   },
   queryOptions: {
     split: 64
@@ -113,7 +117,6 @@ function CategoryOverpass (id, data) {
 
   this.domStatus = document.createElement('div')
   this.domStatus.className = 'status'
-
   this.dom.appendChild(this.domStatus)
 
   register_hook('state-get', function (state) {
@@ -157,8 +160,13 @@ CategoryOverpass.prototype.load = function (callback) {
 CategoryOverpass.prototype.setMap = function (map) {
   CategoryBase.prototype.setMap.call(this, map)
 
-  this.map.on('zoomend', this.updateStatus.bind(this))
+  this.map.on('zoomend', function () {
+    this.updateStatus()
+    this.updateInfo()
+  }.bind(this))
+
   this.updateStatus()
+  this.updateInfo()
 }
 
 CategoryOverpass.prototype.updateStatus = function () {
@@ -176,6 +184,24 @@ CategoryOverpass.prototype.updateStatus = function () {
   }
 }
 
+CategoryOverpass.prototype._getMarker = function (ob) {
+  if (ob.data.listMarkerSymbol.trim() == 'line') {
+    var div = document.createElement('div')
+    div.className = 'marker'
+    div.innerHTML = markers.line(ob.data)
+
+    return div
+  } else if (ob.data.listMarkerSymbol.trim() == 'area') {
+    var div = document.createElement('div')
+    div.className = 'marker'
+    div.innerHTML = markers.circle(ob.data)
+
+    return div
+  }
+
+  return this.origGetMarker(ob)
+}
+
 CategoryOverpass.prototype.open = function () {
   if (this.isOpen) {
     return
@@ -187,11 +213,43 @@ CategoryOverpass.prototype.open = function () {
 
   if (!this.list) {
     this.list = new OverpassLayerList(this.domContent, this.layer)
+    this.origGetMarker = this.list._getMarker
+    this.list._getMarker = this._getMarker.bind(this)
   }
 
   this.isOpen = true
 
   state.update()
+
+  if ('info' in this.data) {
+    if (!this.tabInfo) {
+      this.tabInfo = new tabs.Tab({
+        id: 'info'
+      })
+      this.tools.add(this.tabInfo)
+
+      this.tabInfo.header.innerHTML = '<i class="fa fa-info-circle" aria-hidden="true"></i>'
+      this.tabInfo.header.title = lang('category-info-tooltip')
+      this.domInfo = this.tabInfo.content
+      this.domInfo.classList.add('info')
+
+      this.templateInfo = OverpassLayer.twig.twig({ data: this.data.info, autoescape: true })
+    }
+
+    this.updateInfo()
+  }
+}
+
+CategoryOverpass.prototype.updateInfo = function () {
+  if (!this.tabInfo) {
+    return
+  }
+
+  global.currentCategory = this
+  var data = JSON.parse(JSON.stringify(this.data))
+  data.map = { zoom: map.getZoom() }
+  this.domInfo.innerHTML = this.templateInfo.render(data)
+  global.currentCategory = null
 }
 
 CategoryOverpass.prototype.recalc = function () {

src/index.js

@@ -25,6 +25,7 @@ require('./overpassChooser')
 require('./fullscreen')
 require('./mapLayers')
 require('./twigFunctions')
+require('./markers')
 require('./categories')
 require('./wikipedia')
 require('./image')

src/markers.js

@@ -0,0 +1,106 @@
+var OverpassLayer = require('overpass-layer')
+
+function cssStyle (style) {
+  var ret = ''
+  if ('color' in style) {
+    ret += 'stroke: ' + style.color + ';'
+  }
+  if ('weight' in style) {
+    ret += 'stroke-width: ' + style.weight + ';'
+  }
+  if ('dashArray' in style) {
+    ret += 'stroke-dasharray: ' + style.dashArray + ';'
+  }
+  if ('dashArray' in style) {
+    ret += 'stroke-dasharray: ' + style.dashArray + ';'
+  }
+  if ('dashOffset' in style) {
+    ret += 'stroke-dashoffset: ' + style.dashOffset + ';'
+  }
+  if ('fillColor' in style) {
+    ret += 'fill: ' + style.fillColor + ';'
+  } else if ('color' in style) {
+    ret += 'fill: ' + style.color + ';'
+  } else {
+    ret += 'fill: #3388ff;'
+  }
+  if ('fillOpacity' in style) {
+    ret += 'fill-opacity: ' + style.fillOpacity + ';'
+  } else {
+    ret += 'fill-opacity: 0.2;'
+  }
+
+  return ret
+}
+
+function markerLine (data) {
+  var ret = '<svg anchorX="13" anchorY="8" width="25" height="15">'
+
+  if (!('styles' in data)) {
+    data = {
+      style: data,
+      styles: [ 'default' ]
+    }
+  }
+
+  for (var i = 0; i < data.styles.length; i++) {
+    var k = data.styles[i]
+    var style = k === 'default' ? data.style : data['style:' + k]
+
+    ret += '<line x1="0" y1="8" x2="25" y2="8" style="' + cssStyle(style) + '"/>'
+  }
+
+  ret += '</svg>'
+
+  return ret
+}
+
+function markerPolygon (data) {
+  var ret = '<svg anchorX="13" anchorY="8" width="25" height="25">'
+
+  if (!('styles' in data)) {
+    data = {
+      style: data,
+      styles: [ 'default' ]
+    }
+  }
+
+  for (var i = 0; i < data.styles.length; i++) {
+    var k = data.styles[i]
+    var style = k === 'default' ? data.style : data['style:' + k]
+
+    ret += '<rect x="3" y="3" width="18" height="18" style="' + cssStyle(style) + '"/>'
+  }
+
+  ret += '</svg>'
+
+  return ret
+}
+
+function markerCircle (style) {
+  var fillColor = 'fillColor' in style ? style.fillColor : '#f2756a'
+  var color = 'color' in style ? style.color : '#000000'
+  var weight = 'weight' in style ? style.weight : 1
+
+  return '<svg anchorX="13" anchorY="13" width="25" height="25"><circle cx="12.5" cy="12.5" r="12" style="stroke: ' + color + '; stroke-width: ' + weight + '; fill: ' + fillColor + ';"/></svg>'
+}
+
+function markerPointer (style) {
+  var fillColor = 'fillColor' in style ? style.fillColor : '#f2756a'
+  var color = 'color' in style ? style.color : '#000000'
+  var weight = 'weight' in style ? style.weight : 1
+
+  return '<svg anchorX="13" anchorY="45" width="25" height="45"><path d="M0.5,12.5 A 12,12 0 0 1 24.5,12.5 C 24.5,23 13,30 12.5,44.5 C 12,30 0.5,23 0.5,12.5" style="stroke: ' + color + '; stroke-width: ' + weight + '; fill: ' + fillColor + ';"/></svg>'
+}
+
+OverpassLayer.twig.extendFunction('markerLine', markerLine)
+OverpassLayer.twig.extendFunction('markerCircle', markerCircle)
+OverpassLayer.twig.extendFunction('markerPointer', markerPointer)
+OverpassLayer.twig.extendFunction('markerPolygon', markerPolygon)
+
+module.exports = {
+  line: markerLine,
+  circle: markerCircle,
+  pointer: markerPointer,
+  polygon: markerPolygon
+}

src/tabs.js

@@ -0,0 +1,140 @@
+/**
+ * @param {Object} options
+ * @property {DOMNode} node the DOMNode which can be added to a parent
+ * @property {Tab|null} selected The selected tab
+ * @property {Tab[]} list List of available tabs
+ */
+function Tabs (options) {
+  this.options = options || {}
+  this.node = document.createElement('div')
+  this.node.className = 'tabs'
+
+  this.headers = document.createElement('ul')
+  this.headers.className = 'tabs-list'
+  this.node.appendChild(this.headers)
+
+  this.selected = null
+  this.list = []
+}
+
+/**
+ * add a tab
+ * @param {Tab} tab
+ */
+Tabs.prototype.add = function (tab) {
+  this.headers.appendChild(tab.header)
+  this.node.appendChild(tab.content)
+  tab.master = this
+}
+
+/**
+ * return a tab
+ * @param {Tab|number|id} tab
+ */
+Tabs.prototype.get = function (tab) {
+  if (typeof tab === 'object') {
+    return tab
+  }
+
+  if (typeof tab === 'number') {
+    return this.list[tab]
+  }
+
+  for (var i = 0; i < this.list.length; i++) {
+    if (this.list[i].options.id === tab) {
+      return this.list[i]
+    }
+  }
+}
+
+/**
+ * select the specified tab
+ * @param {Tab|number|id} tab
+ */
+Tabs.prototype.select = function (tab) {
+  if (this.selected) {
+    this.unselect()
+  }
+
+  tab = this.get(tab)
+  this.selected = tab
+
+  this.node.classList.add('has-selected')
+
+  tab._select()
+}
+
+/**
+ * unselect the currently selected tab
+ */
+Tabs.prototype.unselect = function () {
+  if (this.selected) {
+    this.selected._unselect()
+    this.selected = null
+  }
+
+  this.node.classList.remove('has-selected')
+}
+
+/**
+ * add a new tab pane to the tabs
+ * @param {Object} options
+ * @param {String} options.id ID of the tab
+ * @property {DOMNode} content
+ * @property {DOMNode} header
+ * @property {Tabs} master
+ */
+function Tab (options) {
+  this.options = options || {}
+  this.master = null
+
+  this.header = document.createElement('li')
+  this.header.onclick = function () {
+    this.toggle()
+  }.bind(this)
+
+  this.content = document.createElement('div')
+  this.content.className = 'tabs-section'
+}
+
+/**
+ * select this tab
+ */
+Tab.prototype.select = function () {
+  this.master.select(this)
+}
+
+/**
+ * toggle this tab (if selected, unselect)
+ */
+Tab.prototype.toggle = function () {
+  if (this.master.selected === this) {
+    this.master.unselect()
+  } else {
+    this.master.select(this)
+  }
+}
+
+Tab.prototype._select = function () {
+  this.header.classList.add('selected')
+  this.content.classList.add('selected')
+}
+
+/**
+ * unselect this tab
+ */
+Tab.prototype.unselect = function () {
+  if (this.master.selected === this) {
+    this.master.unselect()
+  }
+}
+
+Tab.prototype._unselect = function () {
+  this.header.classList.remove('selected')
+  this.content.classList.remove('selected')
+}
+
+module.exports = {
+  Tabs: Tabs,
+  Tab: Tab
+}

src/twigFunctions.js

@@ -44,3 +44,19 @@ OverpassLayer.twig.extendFunction('colorInterpolate', function (map, value) {
   var colormap = colorInterpolate(map)
   return colormap(value)
 })
+OverpassLayer.twig.extendFunction('evaluate', function (tags) {
+  var ob = {
+    id: 'x0',
+    isShown: true,
+    layer_id: global.currentCategory.id,
+    object: {
+      id: 'x0',
+      meta: {},
+      tags: tags,
+      type: 'special'
+    }
+  }
+
+  var d = global.currentCategory.layer.evaluate(ob)
+  return d
+})

style.css

@@ -183,13 +183,26 @@ body {
   float: right;
 }
 #content .category > .content,
+#content .category > .tools,
 #content .category > .status {
   display: none;
 }
 #content .category.open > .content,
+#content .category.open > .tools,
 #content .category.open > .status {
   display: block;
 }
+.info {
+  position: relative;
+  border: 1px solid black;
+}
+.info > .closeButton {
+  position: absolute;
+  top: 0;
+  right: 0;
+  text-decoration: none;
+  font-size: 12px;
+}
 #content .category > .status,
 #content .category > .content > ul.overpass-layer-list {
   padding-top: 3px;
@@ -220,6 +233,11 @@ ul.overpass-layer-list > li > .markerParent {
 }
 ul.overpass-layer-list > li > .markerParent > .marker {
 }
+.info > table > tr > td:first-of-type,
+.info > table > tbody > tr > td:first-of-type {
+  position: relative;
+}
+.info .sign,
 ul.overpass-layer-list > li > .markerParent > .icon {
   text-align: center;
   position: absolute;
@@ -551,3 +569,34 @@ a.showDetails {
   top: 0; bottom: 0; left: 0; right: 0;
   margin: auto;
 }
+
+/**** TABS ****/
+.tabs .tabs-section {
+  display: none;
+  border: 1px solid #999;
+  border-top: none;
+}
+.tabs .tabs-section.selected {
+  display: block;
+}
+.tabs .tabs-list {
+  margin: 0;
+  padding: 0;
+  border-bottom: 1px solid transparent;
+}
+.tabs.has-selected .tabs-list {
+  border-bottom: 1px solid #999;
+}
+.tabs .tabs-list > li {
+  list-style: none;
+  display: inline-block;
+  border: 1px solid transparent;
+  padding: 1px 3px;
+  cursor: pointer;
+  margin-bottom: -1px;
+}
+.tabs .tabs-list > li.selected {
+  border: 1px solid #999;
+  border-bottom: 1px solid #fff;
+  z-index: 1;
+}