From 6dd71ebf917696f31a593dbdabe80457cc0ef5c1 Mon Sep 17 00:00:00 2001 From: Bryan Housel Date: Fri, 3 Nov 2017 16:48:18 -0400 Subject: [PATCH] Fix loading of images from OpenStreetCam API, add viewer \o/ --- css/60_photos.css | 66 ++++++++------- modules/services/mapillary.js | 59 +++++++------- modules/services/openstreetcam.js | 120 ++++++++++------------------ modules/svg/openstreetcam_images.js | 4 +- modules/ui/init.js | 25 +++++- 5 files changed, 124 insertions(+), 150 deletions(-) diff --git a/css/60_photos.css b/css/60_photos.css index f1c81e420..c09f559fe 100644 --- a/css/60_photos.css +++ b/css/60_photos.css @@ -1,5 +1,36 @@ -/* Mapillary Image Layer */ +/* photo viewer div */ +#photoviewer { + position: absolute; + bottom: 30px; + width: 330px; + height: 250px; + padding: 5px; + background-color: #fff; +} +#photoviewer button.thumb-hide { + border-radius: 0; + padding: 5px; + position: absolute; + right: 0; + top: 0; + z-index: 500; +} + +.photo-wrapper, +.photo-wrapper img { + width: 100%; + height: 100%; +} + +/*#photoviewer.hide, +.photo-wrapper.hide { + visibility: hidden; + display: block; +} +*/ + +/* Mapillary Image Layer */ .layer-mapillary-images { pointer-events: none; } @@ -39,7 +70,6 @@ } /* Mapillary Sign Layer */ - .layer-mapillary-signs { pointer-events: none; } @@ -68,7 +98,6 @@ /* OpenStreetCam Image Layer */ - .layer-openstreetcam-images { pointer-events: none; } @@ -122,34 +151,3 @@ text-align: right; } -.mapillary-wrap { - position: absolute; - bottom: 30px; - width: 330px; - height: 250px; - padding: 5px; - background-color: #fff; -} - -.mapillary-wrap.hidden { - visibility: hidden; -} - -.mapillary-wrap button.thumb-hide { - border-radius: 0; - padding: 5px; - position: absolute; - right: 0; - top: 0; - z-index: 500; -} - -.mly-wrapper { - visibility: hidden; - width: 100%; - height: 100%; -} - -.mly-wrapper.active { - visibility: visible; -} diff --git a/modules/services/mapillary.js b/modules/services/mapillary.js index bc0c5d425..b9d3a5a61 100644 --- a/modules/services/mapillary.js +++ b/modules/services/mapillary.js @@ -24,7 +24,6 @@ import rbush from 'rbush'; import { d3geoTile as d3_geoTile } from '../lib/d3.geo.tile'; import { geoExtent } from '../geo'; -import { svgIcon } from '../svg'; import { utilDetect } from '../util/detect'; import { utilQsString, utilRebind } from '../util'; @@ -377,28 +376,14 @@ export default { loadViewer: function(context) { - var that = this; - var wrap = d3_select('#content').selectAll('.mapillary-wrap') - .data([0]); - - var enter = wrap.enter() - .append('div') - .attr('class', 'mapillary-wrap') - .classed('al', true) // 'al'=left, 'ar'=right - .classed('hidden', true); - - enter - .append('button') - .attr('class', 'thumb-hide') - .on('click', function () { that.hideViewer(); }) - .append('div') - .call(svgIcon('#icon-close')); - - enter + // add mly-wrapper for viewer-js + d3_select('#photoviewer').selectAll('.mly-wrapper') + .data([0]) + .enter() .append('div') .attr('id', 'mly') - .attr('class', 'mly-wrapper') - .classed('active', false); + .attr('class', 'photo-wrapper mly-wrapper') + .classed('hide', true); // load mapillary-viewercss d3_select('head').selectAll('#mapillary-viewercss') @@ -420,22 +405,32 @@ export default { showViewer: function() { - d3_select('#content') - .selectAll('.mapillary-wrap') - .classed('hidden', false) - .selectAll('.mly-wrapper') - .classed('active', true); + var wrap = d3_select('#photoviewer') + .classed('hide', false); + + var isHidden = wrap.selectAll('.photo-wrapper.mly-wrapper.hide').size(); + + if (isHidden) { + wrap + .selectAll('.photo-wrapper:not(.mly-wrapper)') + .classed('hide', true); + + wrap + .selectAll('.photo-wrapper.mly-wrapper') + .classed('hide', false); + + mapillaryViewer.resize(); + } return this; }, hideViewer: function() { - d3_select('#content') - .selectAll('.mapillary-wrap') - .classed('hidden', true) - .selectAll('.mly-wrapper') - .classed('active', false); + d3_select('#photoviewer') + .classed('hide', true) + .selectAll('.photo-wrapper') + .classed('hide', true); d3_selectAll('.layer-mapillary-images .viewfield-group, .layer-mapillary-signs .icon-sign') .classed('selected', false); @@ -514,7 +509,7 @@ export default { mapillaryClicks.push(imageKey); } - d3_selectAll('.layer-mapillary-images .viewfield-group') + d3_selectAll('.viewfield-group') .classed('selected', function(d) { return d.key === imageKey; }); diff --git a/modules/services/openstreetcam.js b/modules/services/openstreetcam.js index eb32ade74..7a16cf875 100644 --- a/modules/services/openstreetcam.js +++ b/modules/services/openstreetcam.js @@ -3,7 +3,6 @@ import _find from 'lodash-es/find'; import _flatten from 'lodash-es/flatten'; import _forEach from 'lodash-es/forEach'; import _map from 'lodash-es/map'; -import _some from 'lodash-es/some'; import { range as d3_range } from 'd3-array'; import { dispatch as d3_dispatch } from 'd3-dispatch'; @@ -125,6 +124,8 @@ function loadNextTilePage(which, currZoom, url, tile) { cache.inflight[id] = d3_request(url) .mimeType('application/json') + .header('Content-type', 'application/x-www-form-urlencoded') + .response(function(xhr) { return JSON.parse(xhr.responseText); }) .post(params, function(err, data) { cache.loaded[id] = true; delete cache.inflight[id]; @@ -140,6 +141,7 @@ function loadNextTilePage(which, currZoom, url, tile) { key: item.id, ca: +item.heading, captured_at: item.date_added, + imagePath: item.name }; } return { @@ -239,67 +241,57 @@ export default { }, - loadViewer: function(context) { - // var that = this; - // var wrap = d3_select('#content').selectAll('.openstreetcam-wrap') - // .data([0]); - - // var enter = wrap.enter() - // .append('div') - // .attr('class', 'openstreetcam-wrap') - // .classed('al', true) // 'al'=left, 'ar'=right - // .classed('hidden', true); - - // enter - // .append('button') - // .attr('class', 'thumb-hide') - // .on('click', function () { that.hideViewer(); }) - // .append('div') - // .call(svgIcon('#icon-close')); - - // enter - // .append('div') - // .attr('id', 'mly') - // .attr('class', 'mly-wrapper') - // .classed('active', false); + loadViewer: function() { + // add osc-wrapper + d3_select('#photoviewer').selectAll('.osc-wrapper') + .data([0]) + .enter() + .append('div') + .attr('class', 'photo-wrapper osc-wrapper') + .classed('hide', true) + .append('img'); }, showViewer: function() { - // d3_select('#content') - // .selectAll('.openstreetcam-wrap') - // .classed('hidden', false) - // .selectAll('.mly-wrapper') - // .classed('active', true); + var wrap = d3_select('#photoviewer') + .classed('hide', false); + + var isHidden = wrap.selectAll('.photo-wrapper.osc-wrapper.hide').size(); + + if (isHidden) { + wrap + .selectAll('.photo-wrapper:not(.osc-wrapper)') + .classed('hide', true); + + wrap + .selectAll('.photo-wrapper.osc-wrapper') + .classed('hide', false); + } return this; }, hideViewer: function() { - // d3_select('#content') - // .selectAll('.openstreetcam-wrap') - // .classed('hidden', true) - // .selectAll('.mly-wrapper') - // .classed('active', false); + d3_select('#photoviewer') + .classed('hide', true) + .selectAll('.photo-wrapper') + .classed('hide', true); - // d3_selectAll('.layer-openstreetcam-images .viewfield-group') - // .classed('selected', false); + d3_selectAll('.layer-openstreetcam-images .viewfield-group') + .classed('selected', false); openstreetcamImage = null; return this; }, - updateViewer: function(imageKey, context) { - if (!imageKey) return; - - // if (!openstreetcamViewer) { - // this.initViewer(imageKey, context); - // } else { - // openstreetcamViewer.moveToKey(imageKey); - // } - + updateViewer: function(imagePath) { + if (imagePath) { + d3_select('#photoviewer .osc-wrapper img') + .attr('src', apibase + '/' + imagePath); + } return this; }, @@ -308,40 +300,10 @@ export default { if (!arguments.length) return openstreetcamImage; openstreetcamImage = imageKey; - // d3_selectAll('.layer-openstreetcam-images .viewfield-group') - // .classed('selected', function(d) { - // return d.key === imageKey; - // }); - - // if (!imageKey) return this; - - - // function localeTimestamp(s) { - // if (!s) return null; - // var d = new Date(s); - // if (isNaN(d.getTime())) return null; - // return d.toLocaleString(undefined, { timeZone: 'UTC' }); - // } - - // var selected = d3_selectAll('.layer-openstreetcam-images .viewfield-group.selected'); - // if (selected.empty()) return this; - - // var datum = selected.datum(); - // var timestamp = localeTimestamp(datum.captured_at); - // var attribution = d3_select('.openstreetcam-js-dom .Attribution'); - // var capturedAt = attribution.selectAll('.captured-at'); - // if (capturedAt.empty()) { - // attribution - // .append('span') - // .text('|'); - // capturedAt = attribution - // .append('span') - // .attr('class', 'captured-at'); - // } - // capturedAt - // .text(timestamp); - - // this.updateDetections(); + d3_selectAll('.viewfield-group') + .classed('selected', function(d) { + return d.key === imageKey; + }); return this; }, diff --git a/modules/svg/openstreetcam_images.js b/modules/svg/openstreetcam_images.js index 5087ee96d..53b0f7c61 100644 --- a/modules/svg/openstreetcam_images.js +++ b/modules/svg/openstreetcam_images.js @@ -81,8 +81,8 @@ export function svgOpenstreetcamImages(projection, context, dispatch) { context.map().centerEase(d.loc); openstreetcam - .selectedImage(d.key, true) - .updateViewer(d.key, context) + .selectedImage(d.key) + .updateViewer(d.imagePath) .showViewer(); } diff --git a/modules/ui/init.js b/modules/ui/init.js index 8519c6f88..69eda0302 100644 --- a/modules/ui/init.js +++ b/modules/ui/init.js @@ -8,9 +8,9 @@ import { d3keybinding as d3_keybinding } from '../lib/d3.keybinding.js'; import { t, textDirection } from '../util/locale'; import { tooltip } from '../util/tooltip'; -import { svgDefs, svgIcon } from '../svg/index'; -import { modeBrowse } from '../modes/index'; -import { behaviorHash } from '../behavior/index'; +import { svgDefs, svgIcon } from '../svg'; +import { modeBrowse } from '../modes'; +import { behaviorHash } from '../behavior'; import { utilGetDimensions } from '../util/dimensions'; import { uiAccount } from './account'; @@ -238,6 +238,25 @@ export function uiInit(context) { .call(uiContributors(context)); + var photoviewer = content + .append('div') + .attr('id', 'photoviewer') + .classed('al', true) // 'al'=left, 'ar'=right + .classed('hide', true); + + photoviewer + .append('button') + .attr('class', 'thumb-hide') + .on('click', function () { + d3_select('#photoviewer') + .classed('hide', true) + .select('div') + .classed('hide', true); + }) + .append('div') + .call(svgIcon('#icon-close')); + + window.onbeforeunload = function() { return context.save(); };