objectDisplay: use display blocks in extensions

src/GeoInfo.js

@@ -5,6 +5,7 @@ const turf = {
 const tabs = require('modulekit-tabs')
 
 const formatUnits = require('./formatUnits')
+const displayBlock = require('./displayBlock')
 require('./GeoInfo.css')
 
 function heading (value) {
@@ -180,7 +181,14 @@ register_hook('init', function () {
 let showDetailsCurrent
 register_hook('show-details', (data, category, dom, callback) => {
   let div = document.createElement('div')
-  dom.appendChild(div)
+  div.className = 'geo-info'
+
+  displayBlock({
+    dom,
+    title: lang('geoinfo:header'),
+    content: div,
+    order: 5,
+  })
 
   showDetailsCurrent = [ data, category, div ]
   geoInfoShowDetails.apply(this, showDetailsCurrent)
@@ -195,7 +203,7 @@ register_hook('format-units-refresh', () => {
 
 function geoInfoShowDetails (data, category, div) {
   let ob = data.object
-  let result = '<div class="geo-info"><h3>' + lang('geoinfo:header') + '</h3>'
+  let result = ''
 
   let geojson = ob.GeoJSON()
   let area = turf.area(geojson)
@@ -219,7 +227,6 @@ function geoInfoShowDetails (data, category, div) {
     result += '<div class="object-se-corner" title="' + lang('geoinfo:se-corner') + '"><span class="value">' + formatUnits.coord({ lat: ob.bounds.maxlat, lng: ob.bounds.minlon }) + '</span></div>'
   }
 
-  result += '</div>'
   div.innerHTML = result
 }
 

src/image.js

@@ -1,5 +1,6 @@
 var httpGet = require('./httpGet')
 var ImageLoader = require('./ImageLoader')
+const displayBlock = require('./displayBlock')
 var showTimer
 
 function showImage (image, dom) {
@@ -73,22 +74,15 @@ function show (img, options, div) {
 
 register_hook('show-details', function (data, category, dom, callback) {
   var div = document.createElement('div')
-  div.className = 'images loading'
+  div.className = 'images'
   var imageWrapper
   var nextImageWrapper = document.createElement('div')
   let options
 
-  dom.appendChild(div)
-
   if (showTimer) {
     window.clearInterval(showTimer)
   }
 
-  var l = document.createElement('div')
-  l.innerHTML = '<i class="fa fa-spinner fa-pulse fa-fw"></i><span class="sr-only">Loading...</span>'
-  l.className = 'loadingIndicator'
-  div.appendChild(l)
-
   var currentLoader = new ImageLoader(data)
 
   data.detailsImageCounter = {}
@@ -97,15 +91,16 @@ register_hook('show-details', function (data, category, dom, callback) {
     counter: data.detailsImageCounter,
     wrap: true
   }, function (err, img) {
-    div.classList.remove('loading')
-
     if (!img) {
       return callback(err)
     }
 
-    var h = document.createElement('h3')
-    h.appendChild(document.createTextNode(lang('images')))
-    div.insertBefore(h, div.firstChild)
+    displayBlock({
+      dom,
+      content: div,
+      title: lang('images'),
+      order: 2
+    })
 
     imageWrapper = document.createElement('div')
     imageWrapper.className = 'imageWrapper'

src/wikipedia.js

@@ -1,4 +1,5 @@
 var wikidata = require('./wikidata')
+const displayBlock = require('./displayBlock')
 
 var cache = {}
 var loadClash = {}
@@ -269,11 +270,12 @@ register_hook('show-details', function (data, category, dom, callback) {
   }
 
   if (found) {
-    h = document.createElement('h3')
-    h.appendChild(document.createTextNode(lang('tag:wikipedia')))
-    dom.appendChild(h)
-
-    dom.appendChild(div)
+    displayBlock({
+      dom,
+      title: lang('tag:wikipedia'),
+      content: div,
+      order: 1
+    })
   }
 
   function done (err) {