From 692c046b1e3b962e91c6e05633c5a8d5794d52cb Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Stephan=20B=C3=B6sch-Plepelits?= Date: Sat, 2 Jan 2021 13:21:27 +0100 Subject: [PATCH] ObjectDisplay: convert to class --- src/ObjectDisplay.js | 124 +++++++++++++++++++++++++++++++++++++++++++ src/index.js | 10 +++- src/objectDisplay.js | 119 ----------------------------------------- 3 files changed, 132 insertions(+), 121 deletions(-) create mode 100644 src/ObjectDisplay.js delete mode 100644 src/objectDisplay.js diff --git a/src/ObjectDisplay.js b/src/ObjectDisplay.js new file mode 100644 index 00000000..b637f7e2 --- /dev/null +++ b/src/ObjectDisplay.js @@ -0,0 +1,124 @@ +const exportAll = require('./exportAll') +const tagsDisplay = require('./tagsDisplay').display +const displayBlock = require('./displayBlock') + +module.exports = class ObjectDisplay { + constructor ({feature, category, dom, displayId, fallbackIds}, callback) { + if (!fallbackIds) { + fallbackIds = [] + } + + var div, h, dt, dd, li, a + var k + + dom.innerHTML = '' + + let header = document.createElement('div') + header.className = 'header' + dom.appendChild(header) + + div = document.createElement('div') + div.className = 'description' + div.innerHTML = getProperty(feature.data, 'description', displayId, fallbackIds) + + header.appendChild(div) + feature.sublayer.updateAssets(div, feature) + + div = document.createElement('div') + div.className = 'title' + div.innerHTML = getProperty(feature.data, 'title', displayId, fallbackIds) + header.appendChild(div) + feature.sublayer.updateAssets(div, feature) + + div = document.createElement('div') + div.className = 'body' + dom.appendChild(div) + + function updateBody (div) { + div.innerHTML = getProperty(feature.data, 'body', 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, displayId + 'Body', (err, result) => { + body.innerHTML = result + feature.sublayer.updateAssets(body, feature) + }) + + displayBlock({ + dom, + content: exportAll(feature), + title: lang('header:export'), + order: 5 + }) + + displayBlock({ + dom, + content: tagsDisplay(feature.object.tags), + title: lang('header:attributes'), + order: 10 + }) + + div = document.createElement('dl') + div.className = 'meta' + dt = document.createElement('dt') + dt.appendChild(document.createTextNode('id')) + div.appendChild(dt) + dd = document.createElement('dd') + a = document.createElement('a') + a.appendChild(document.createTextNode(feature.object.type + '/' + feature.object.osm_id)) + a.href = config.urlOpenStreetMap + '/' + feature.object.type + '/' + feature.object.osm_id + a.target = '_blank' + + dd.appendChild(a) + div.appendChild(dd) + for (k in feature.object.meta) { + dt = document.createElement('dt') + dt.appendChild(document.createTextNode(k)) + div.appendChild(dt) + + dd = document.createElement('dd') + dd.appendChild(document.createTextNode(feature.object.meta[k])) + div.appendChild(dd) + } + + displayBlock({ + dom, + content: div, + title: lang('header:osm_meta'), + order: 11 + }) + + call_hooks_callback('show-' + displayId, feature, category, dom, err => { + if (err.length) { + return callback(err.join(', ')) + } + + callback() + }) + } + + close () { + } +} + +function getProperty(data, id, displayId, fallbackIds) { + const idCap = id[0].toUpperCase() + id.substr(1) + + let variants = [displayId + idCap] + variants = variants.concat(fallbackIds.map(fid => fid + idCap)) + variants.push(id) + + variants = variants.filter(vid => vid in data) + + if (variants.length) { + return data[variants[0]] + } + + return '' +} diff --git a/src/index.js b/src/index.js index cab5a7f9..f3728105 100644 --- a/src/index.js +++ b/src/index.js @@ -42,7 +42,8 @@ require('./GeoInfo') require('./PluginMeasure') require('./PluginGeoLocate') require('./tagsDisplay-tag2link') -const objectDisplay = require('./objectDisplay') +const ObjectDisplay = require('./ObjectDisplay') +let currentObjectDisplay = null window.onload = function () { var initState = config.defaultView @@ -240,7 +241,7 @@ function show (id, options, callback) { } if (options.showDetails) { - objectDisplay({ + currentObjectDisplay = new ObjectDisplay({ feature: data, dom: document.getElementById('contentDetails'), category, @@ -258,6 +259,11 @@ function show (id, options, callback) { } function hide () { + if (currentObjectDisplay) { + currentObjectDisplay.close() + currentObjectDisplay = null + } + call_hooks('hide-' + document.getElementById('content').className) document.getElementById('content').className = 'list' } diff --git a/src/objectDisplay.js b/src/objectDisplay.js deleted file mode 100644 index 946905fe..00000000 --- a/src/objectDisplay.js +++ /dev/null @@ -1,119 +0,0 @@ -const exportAll = require('./exportAll') -const tagsDisplay = require('./tagsDisplay').display -const displayBlock = require('./displayBlock') - -function getProperty(data, id, displayId, fallbackIds) { - const idCap = id[0].toUpperCase() + id.substr(1) - - let variants = [displayId + idCap] - variants = variants.concat(fallbackIds.map(fid => fid + idCap)) - variants.push(id) - - variants = variants.filter(vid => vid in data) - - if (variants.length) { - return data[variants[0]] - } - - return '' -} - -module.exports = function objectDisplay ({feature, category, dom, displayId, fallbackIds}, callback) { - if (!fallbackIds) { - fallbackIds = [] - } - - var div, h, dt, dd, li, a - var k - - dom.innerHTML = '' - - let header = document.createElement('div') - header.className = 'header' - dom.appendChild(header) - - div = document.createElement('div') - div.className = 'description' - div.innerHTML = getProperty(feature.data, 'description', displayId, fallbackIds) - - header.appendChild(div) - feature.sublayer.updateAssets(div, feature) - - div = document.createElement('div') - div.className = 'title' - div.innerHTML = getProperty(feature.data, 'title', displayId, fallbackIds) - header.appendChild(div) - feature.sublayer.updateAssets(div, feature) - - div = document.createElement('div') - div.className = 'body' - dom.appendChild(div) - - function updateBody (div) { - div.innerHTML = getProperty(feature.data, 'body', displayId, fallbackIds) - feature.sublayer.updateAssets(div, feature) - } - - feature.object.on('update', updateBody.bind(this, div)) - updateBody(div) - - div = document.createElement('div') - div.className = 'body' - dom.appendChild(div) - category.renderTemplate(feature, displayId + 'Body', function (div, err, result) { - div.innerHTML = result - feature.sublayer.updateAssets(div, feature) - }.bind(this, div)) - - displayBlock({ - dom, - content: exportAll(feature), - title: lang('header:export'), - order: 5 - }) - - displayBlock({ - dom, - content: tagsDisplay(feature.object.tags), - title: lang('header:attributes'), - order: 10 - }) - - div = document.createElement('dl') - div.className = 'meta' - dt = document.createElement('dt') - dt.appendChild(document.createTextNode('id')) - div.appendChild(dt) - dd = document.createElement('dd') - a = document.createElement('a') - a.appendChild(document.createTextNode(feature.object.type + '/' + feature.object.osm_id)) - a.href = config.urlOpenStreetMap + '/' + feature.object.type + '/' + feature.object.osm_id - a.target = '_blank' - - dd.appendChild(a) - div.appendChild(dd) - for (k in feature.object.meta) { - dt = document.createElement('dt') - dt.appendChild(document.createTextNode(k)) - div.appendChild(dt) - - dd = document.createElement('dd') - dd.appendChild(document.createTextNode(feature.object.meta[k])) - div.appendChild(dd) - } - - displayBlock({ - dom, - content: div, - title: lang('header:osm_meta'), - order: 11 - }) - - call_hooks_callback('show-' + displayId, feature, category, dom, err => { - if (err.length) { - return callback(err.join(', ')) - } - - callback() - }) -}