ObjectDisplay/popup: use ObjectDisplay for popups

src/CategoryOverpass.js

@@ -11,8 +11,7 @@ var tabs = require('modulekit-tabs')
 var markers = require('./markers')
 var maki = require('./maki')
 var qs = require('sheet-router/qs')
-var editLink = require('./editLink')
-const objectDisplay = require('./objectDisplay')
+const ObjectDisplay = require('./ObjectDisplay')
 
 const showMore = require('./showMore')
 
@@ -54,13 +53,6 @@ var defaultValues = {
     preferredZoom: 16
   },
   layouts: {
-    popup:
-      '<div class="header">' +
-      '{% if object.popupDetails or object.details %}<div class="details">{{ object.popupDetails|default(object.details) }}</div>{% endif %}' +
-      '{% if object.popupDescription or object.description %}<div class="description">{{ object.popupDescription|default(object.description) }}</div>{% endif %}' +
-      '{% if object.popupTitle or object.title %}<div class="title">{{ object.popupTitle|default(object.title) }}</div>{% endif %}' +
-      '</div>' +
-      '<div class="popupBody">{{ object.popupBody|default(object.body) }}</div>',
     list: listTemplate.replace(/template/g, 'list')
   },
   queryOptions: {
@@ -108,6 +100,7 @@ function CategoryOverpass (options, data, repository) {
   data.styleNoBindPopup = [ 'selected' ]
   data.stylesNoAutoShow = [ 'selected' ]
   data.updateAssets = this.updateAssets.bind(this)
+  data.layouts.popup = () => null
 
   this.layer = new OverpassLayer(data)
 
@@ -132,11 +125,6 @@ function CategoryOverpass (options, data, repository) {
       return
     }
 
-    this.updatePopupContent(ob, ob.popup)
-
-    // Move close button into the content, to make its position depending whether a scrollbar is visible or not
-    ob.popup._contentNode.insertBefore(ob.popup._closeButton, ob.popup._contentNode.firstChild)
-
     this.emit('update', object, ob)
   }.bind(this))
   this.layer.on('add', (ob, data) => this.emit('add', ob, data))
@@ -535,26 +523,9 @@ CategoryOverpass.prototype.notifyPopupOpen = function (object, popup) {
     popup._contentNode.style = ''
   }
 
-  this.updatePopupContent(object, popup)
   this.currentSelected = this.layer.show(object.id, layerOptions, function () {})
-}
-
-CategoryOverpass.prototype.notifyPopupClose = function (object, popup) {
-  if (this.currentSelected) {
-    this.currentSelected.hide()
-    this.currentSelected = null
-  }
-
-  if (this.currentDetails) {
-    this.currentDetails.hide()
-    this.currentDetails = null
-  }
-}
-
-CategoryOverpass.prototype.updatePopupContent = function (object, popup) {
-  let id_with_sublayer = (object.sublayer_id === 'main' ? '' : object.sublayer_id + ':') + object.id
 
-  objectDisplay({
+  this.currentPopupDisplay = new ObjectDisplay({
     feature: object,
     category: this,
     dom: popup._contentNode,
@@ -563,49 +534,25 @@ CategoryOverpass.prototype.updatePopupContent = function (object, popup) {
     console.log('popup done')
   })
 
-  /*
-  if (this.popupBodyTemplate) {
-    let popupBody = popup._contentNode.querySelector('#popupBody')
-    if (!popupBody) {
-      popupBody = document.createElement('div')
-      popupBody.className = 'popupBody'
-      popupBody.id = 'popupBody'
-      popup._contentNode.appendChild(popupBody)
-    }
-
-    let html = this.popupBodyTemplate.render(object.twigData)
-    if (popupBody.currentHTML !== html) {
-      popupBody.innerHTML = html
-      this.updateAssets(popup._contentNode)
-    }
+  // Move close button into the content, to make its position depending whether a scrollbar is visible or not
+  popup._contentNode.insertBefore(popup._closeButton, popup._contentNode.firstChild)
+}
 
-    popupBody.currentHTML = html
+CategoryOverpass.prototype.notifyPopupClose = function (object, popup) {
+  if (this.currentSelected) {
+    this.currentSelected.hide()
+    this.currentSelected = null
   }
 
-  let hasBody = false
-  Array.from(popup._contentNode.querySelectorAll('.popupBody')).forEach(div => {
-    if (!div.innerHTML.match(/^\s*(<ul>\s*<\/ul>|)\s*$/)) {
-      hasBody = true
-    }
-  })
-  if (hasBody) {
-    popup._contentNode.classList.add('hasBody')
-  } else {
-    popup._contentNode.classList.remove('hasBody')
-  }
-  */
-
-  var footer = popup._contentNode.getElementsByClassName('popup-footer')
-  if (!footer.length) {
-    footer = document.createElement('ul')
-    popup._contentNode.appendChild(footer)
-    footer.className = 'popup-footer'
-    footer.setAttribute('data-order', 1000)
+  if (this.currentDetails) {
+    this.currentDetails.hide()
+    this.currentDetails = null
   }
 
-  var footerContent = '<li><a class="showDetails" href="#' + this.id + '/' + id_with_sublayer + '/details">' + lang('show details') + '</a></li>'
-  footerContent += '<li>' + editLink(object) + '</li>'
-  footer.innerHTML = footerContent
+  if (this.currentPopupDisplay) {
+    this.currentPopupDisplay.close()
+    delete this.currentPopupDisplay
+  }
 }
 
 CategoryOverpass.prototype.renderTemplate = function (object, templateId, callback) {

src/ObjectDisplay.js

@@ -1,6 +1,7 @@
 const exportAll = require('./exportAll')
 const tagsDisplay = require('./tagsDisplay').display
 const displayBlock = require('./displayBlock')
+const editLink = require('./editLink')
 
 module.exports = class ObjectDisplay {
   constructor ({feature, category, dom, displayId, fallbackIds}, callback) {
@@ -54,7 +55,6 @@ module.exports = class ObjectDisplay {
     })
 
     category.on('update', this.updateListener = () => {
-      console.log('update')
       category.renderTemplate(feature, this.displayId + 'Body', (err, result) => {
         body.innerHTML = result
         feature.sublayer.updateAssets(body, feature)
@@ -105,6 +105,15 @@ module.exports = class ObjectDisplay {
       order: 11
     })
 
+    let id_with_sublayer = (feature.sublayer_id === 'main' ? '' : feature.sublayer_id + ':') + feature.id
+    let footerContent = '<li><a class="showDetails" href="#' + this.category.id + '/' + id_with_sublayer + '/details">' + lang('show details') + '</a></li>'
+    footerContent += '<li>' + editLink(feature) + '</li>'
+    displayBlock({
+      dom,
+      content: '<ul class="popup-footer">' + footerContent + '</ul>',
+      order: 1000
+    })
+
     call_hooks_callback('show-' + this.displayId, feature, category, dom, err => {
       if (err.length) {
         return callback(err.join(', '))