Browse Source

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

master
parent
commit
0a27ce15e3
  1. 49
      src/ObjectDisplay.js
  2. 2
      src/displayBlock.js
  3. 33
      src/image.js

49
src/ObjectDisplay.js

@ -19,6 +19,7 @@ module.exports = class ObjectDisplay {
let header = document.createElement('div') let header = document.createElement('div')
header.className = 'header' header.className = 'header'
header.setAttribute('data-order', -1000)
dom.appendChild(header) dom.appendChild(header)
div = document.createElement('div') div = document.createElement('div')
@ -34,32 +35,38 @@ module.exports = class ObjectDisplay {
header.appendChild(div) header.appendChild(div)
feature.sublayer.updateAssets(div, feature) 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') let body = document.createElement('div')
body.className = 'body' 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) => { 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)) { if (['details'].includes(this.displayId)) {
displayBlock({ displayBlock({
@ -115,7 +122,7 @@ module.exports = class ObjectDisplay {
footerContent += '<li>' + editLink(feature) + '</li>' footerContent += '<li>' + editLink(feature) + '</li>'
displayBlock({ displayBlock({
dom, dom,
content: '<ul class="popup-footer">' + footerContent + '</ul>',
content: '<ul class="footer">' + footerContent + '</ul>',
order: 1000 order: 1000
}) })
} }

2
src/displayBlock.js

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

33
src/image.js

@ -73,14 +73,14 @@ function show (img, options, div) {
} }
register_hook('show-details', function (data, category, dom, callback) { 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) { 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') var div = document.createElement('div')
div.className = 'images' div.className = 'images'
var imageWrapper var imageWrapper
@ -98,17 +98,18 @@ function displayImages(data, category, dom, callback, count) {
currentLoader.next({ currentLoader.next({
counter: data.detailsImageCounter, counter: data.detailsImageCounter,
wrap: true wrap: true
}, function (err, img) {
if (!img) {
}, function (err, data) {
if (!data) {
return callback(err) return callback(err)
} }
displayBlock({
const block = displayBlock({
dom, dom,
content: div, 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 = document.createElement('div')
imageWrapper.className = 'imageWrapper' imageWrapper.className = 'imageWrapper'
@ -118,10 +119,16 @@ function displayImages(data, category, dom, callback, count) {
size: Math.max(imageWrapper.offsetWidth, imageWrapper.offsetHeight) 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() loadNext()
} }
}) })
@ -130,12 +137,12 @@ function displayImages(data, category, dom, callback, count) {
currentLoader.next({ currentLoader.next({
counter: data.detailsImageCounter, counter: data.detailsImageCounter,
wrap: true wrap: true
}, function (err, img) {
}, function (err, data) {
if (err) { if (err) {
return console.log("Can't load next image", err) return console.log("Can't load next image", err)
} }
show(img, options, nextImageWrapper)
show(data, options, nextImageWrapper)
}) })
} }

Loading…
Cancel
Save