ObjectDisplay: render body as block; location of image in popup/details

src/ObjectDisplay.js

@@ -19,6 +19,7 @@ module.exports = class ObjectDisplay {
 
     let header = document.createElement('div')
     header.className = 'header'
+    header.setAttribute('data-order', -1000)
     dom.appendChild(header)
 
     div = document.createElement('div')
@@ -34,32 +35,38 @@ module.exports = class ObjectDisplay {
     header.appendChild(div)
     feature.sublayer.updateAssets(div, feature)
 
-    div = document.createElement('div')
-    div.className = 'body'
-    dom.appendChild(div)
-
-    const updateBody = (div) => {
-      div.innerHTML = getProperty(feature.data, 'body', this.displayId, fallbackIds)
-      feature.sublayer.updateAssets(div, feature)
-    }
-
-    feature.object.on('update', updateBody.bind(this, div))
-    updateBody(div)
-
     let body = document.createElement('div')
     body.className = 'body'
-    dom.appendChild(body)
-    category.renderTemplate(feature, this.displayId + 'Body', (err, result) => {
-      body.innerHTML = result
-      feature.sublayer.updateAssets(body, feature)
+
+    let bodyCategory = document.createElement('div')
+    body.appendChild(bodyCategory)
+    let bodyTemplate = document.createElement('div')
+    body.appendChild(bodyTemplate)
+
+    let bodyBlock = displayBlock({
+      dom,
+      content: body,
+      order: 0
     })
 
-    category.on('update', this.updateListener = () => {
+    this.updateListener = () => {
+      bodyCategory.innerHTML = getProperty(feature.data, 'body', this.displayId, fallbackIds)
+      feature.sublayer.updateAssets(bodyCategory, feature)
+
       category.renderTemplate(feature, this.displayId + 'Body', (err, result) => {
-        body.innerHTML = result
-        feature.sublayer.updateAssets(body, feature)
-      })
+        bodyTemplate.innerHTML = result
+        feature.sublayer.updateAssets(bodyTemplate, feature)
+
+        if (bodyTemplate.innerHTML.match(/^\s*(<ul>\s*<\/ul>|)\s*$/) && bodyCategory.innerHTML.match(/^\s*(<ul>\s*<\/ul>|)\s*$/)) {
+          bodyBlock.classList.add('empty')
+        } else {
+          bodyBlock.classList.remove('empty')
+        }
       })
+    }
+
+    category.on('update', this.updateListener)
+    this.updateListener()
     
     if (['details'].includes(this.displayId)) {
       displayBlock({
@@ -115,7 +122,7 @@ module.exports = class ObjectDisplay {
       footerContent += '<li>' + editLink(feature) + '</li>'
       displayBlock({
         dom,
-        content: '<ul class="popup-footer">' + footerContent + '</ul>',
+        content: '<ul class="footer">' + footerContent + '</ul>',
         order: 1000
       })
     }

src/displayBlock.js

@@ -23,6 +23,8 @@ module.exports = function displayBlock ({dom, content, title, order}) {
   dom.appendChild(block)
 
   reorder(dom)
+
+  return block
 }
 
 function reorder (dom) {

src/image.js

@@ -73,14 +73,14 @@ function show (img, options, div) {
 }
 
 register_hook('show-details', function (data, category, dom, callback) {
-  displayImages(data, category, dom, callback, null)
+  displayImages(data, category, dom, callback, 'details')
 })
 
 register_hook('show-popup', function (data, category, dom, callback) {
-  displayImages(data, category, dom, callback, 1)
+  displayImages(data, category, dom, callback, 'popup')
 })
 
-function displayImages(data, category, dom, callback, count) {
+function displayImages(data, category, dom, callback, displayId) {
   var div = document.createElement('div')
   div.className = 'images'
   var imageWrapper
@@ -98,17 +98,18 @@ function displayImages(data, category, dom, callback, count) {
   currentLoader.next({
     counter: data.detailsImageCounter,
     wrap: true
-  }, function (err, img) {
-    if (!img) {
+  }, function (err, data) {
+    if (!data) {
       return callback(err)
     }
 
-    displayBlock({
+    const block = displayBlock({
       dom,
       content: div,
-      title: lang('images'),
-      order: 2
+      title: displayId === 'popup' ? null : lang('images'),
+      order: displayId === 'popup' ? -1 : 2
     })
+    block.classList.add('empty')
 
     imageWrapper = document.createElement('div')
     imageWrapper.className = 'imageWrapper'
@@ -118,10 +119,16 @@ function displayImages(data, category, dom, callback, count) {
       size: Math.max(imageWrapper.offsetWidth, imageWrapper.offsetHeight)
     }
 
-    showTimer = window.setInterval(showNext, 5000)
+    let img = show(data, options, imageWrapper)
+    if (img) {
+      img.onload = () => {
+        block.classList.remove('empty')
+        dom.classList.add('hasImage')
+      }
+    }
 
-    show(img, options, imageWrapper)
-    if (count !== 1) {
+    if (displayId === 'details') {
+      showTimer = window.setInterval(showNext, 5000)
       loadNext()
     }
   })
@@ -130,12 +137,12 @@ function displayImages(data, category, dom, callback, count) {
     currentLoader.next({
       counter: data.detailsImageCounter,
       wrap: true
-    }, function (err, img) {
+    }, function (err, data) {
       if (err) {
         return console.log("Can't load next image", err)
       }
 
-      show(img, options, nextImageWrapper)
+      show(data, options, nextImageWrapper)
     })
   }