diff --git a/css/60_photos.css b/css/60_photos.css index 7ce43b5ad..ad6116fcf 100644 --- a/css/60_photos.css +++ b/css/60_photos.css @@ -148,8 +148,25 @@ /* OpenStreetCam viewer */ .osc-wrapper { + position: relative; background-color: #000; background-image: url(img/loader-black.gif); background-position: center; background-repeat: no-repeat; } + +.osc-wrapper .osc-attribution { + width: 100%; + font-size: 10px; + text-align: right; + position: absolute; + bottom: 0; + right: 0; + padding: 4px 2px; + z-index: 10; +} + +.osc-attribution a, +.osc-attribution span { + padding: 4px 2px; +} diff --git a/modules/services/openstreetcam.js b/modules/services/openstreetcam.js index 22a1db571..593fc3be4 100644 --- a/modules/services/openstreetcam.js +++ b/modules/services/openstreetcam.js @@ -149,7 +149,9 @@ function loadNextTilePage(which, currZoom, url, tile) { ca: +item.heading, captured_at: localeDateString(item.shot_date || item.date_added), captured_by: item.username, - imagePath: item.lth_name + imagePath: item.lth_name, + sequence_id: item.sequence_id, + sequence_index: item.sequence_index }; } return { @@ -257,22 +259,23 @@ export default { .append('div') .attr('class', 'photo-wrapper osc-wrapper') .classed('hide', true) - .append('img'); + .append('div') + .attr('class', 'osc-attribution fillD'); }, showViewer: function() { - var wrap = d3_select('#photoviewer') + var viewer = d3_select('#photoviewer') .classed('hide', false); - var isHidden = wrap.selectAll('.photo-wrapper.osc-wrapper.hide').size(); + var isHidden = viewer.selectAll('.photo-wrapper.osc-wrapper.hide').size(); if (isHidden) { - wrap + viewer .selectAll('.photo-wrapper:not(.osc-wrapper)') .classed('hide', true); - wrap + viewer .selectAll('.photo-wrapper.osc-wrapper') .classed('hide', false); } @@ -295,15 +298,46 @@ export default { }, - updateViewer: function(imagePath) { + updateViewer: function(d) { var wrap = d3_select('#photoviewer .osc-wrapper'); wrap.selectAll('img') .remove(); - if (imagePath) { + if (d) { wrap.append('img') - .attr('src', apibase + '/' + imagePath); + .attr('src', apibase + '/' + d.imagePath); + + var attribution = wrap.selectAll('.osc-attribution').html(''); + + if (d.captured_by) { + attribution + .append('a') + .attr('class', 'captured_by') + .attr('href', apibase + '/user/' + d.captured_by) + .text('@' + d.captured_by); + + attribution + .append('span') + .text('|'); + } + + if (d.captured_at) { + attribution + .append('span') + .attr('class', 'captured_at') + .text(d.captured_at); + + attribution + .append('span') + .text('|'); + } + + attribution + .append('a') + .attr('class', 'image_link') + .attr('href', apibase + '/details/' + d.sequence_id + '/' + d.sequence_index) + .text('openstreetcam.org'); } return this; }, diff --git a/modules/svg/openstreetcam_images.js b/modules/svg/openstreetcam_images.js index 53b0f7c61..59f228ce1 100644 --- a/modules/svg/openstreetcam_images.js +++ b/modules/svg/openstreetcam_images.js @@ -82,7 +82,7 @@ export function svgOpenstreetcamImages(projection, context, dispatch) { openstreetcam .selectedImage(d.key) - .updateViewer(d.imagePath) + .updateViewer(d) .showViewer(); }