From 0a27ce15e34544963bdb06430a0951d2305a71f1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Stephan=20B=C3=B6sch-Plepelits?= <skunk@xover.mud.at>
Date: Sat, 2 Jan 2021 21:10:51 +0100
Subject: [PATCH] ObjectDisplay: render body as block; location of image in
 popup/details

---
 src/ObjectDisplay.js | 49 +++++++++++++++++++++++++-------------------
 src/displayBlock.js  |  2 ++
 src/image.js         | 33 +++++++++++++++++------------
 3 files changed, 50 insertions(+), 34 deletions(-)

diff --git a/src/ObjectDisplay.js b/src/ObjectDisplay.js
index 528f3c91..fe4e4356 100644
--- a/src/ObjectDisplay.js
+++ b/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
       })
     }
diff --git a/src/displayBlock.js b/src/displayBlock.js
index c7ecd83d..32859462 100644
--- a/src/displayBlock.js
+++ b/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) {
diff --git a/src/image.js b/src/image.js
index 7167846a..01cfba63 100644
--- a/src/image.js
+++ b/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)
     })
   }