mirror of
https://github.com/FoggedLens/iD.git
synced 2026-02-12 16:52:50 +00:00
Support filtering by multiple photo usernames
This commit is contained in:
4
API.md
4
API.md
@@ -45,8 +45,8 @@ of iD (e.g. `https://ideditor-release.netlify.app`), the following parameters ar
|
||||
_Available values:_ `streetside` (Microsoft Bing), `mapillary`, `mapillary-signs`, `mapillary-map-features`, `openstreetcam`
|
||||
* __`photo_dates`__ - The range of capture dates by which to filter street-level photos. Dates are given in YYYY-MM-DD format and separated by `_`. One-sided ranges are supported.<br/>
|
||||
_Example:_ `photo_dates=2019-01-01_2020-12-31`, `photo_dates=2019-01-01_`, `photo_dates=_2020-12-31`<br/>
|
||||
* __`photo_username`__ - The Mapillary or OpenStreetCam username by which to filter street-level photos.<br/>
|
||||
_Example:_ `photo_user=quincylvania`<br/>
|
||||
* __`photo_username`__ - The Mapillary or OpenStreetCam username by which to filter street-level photos. Multiple comma-separated usernames are supported.<br/>
|
||||
_Example:_ `photo_user=quincylvania`, `photo_user=quincylvania,chrisbeddow`<br/>
|
||||
* __`photo`__ - The service and ID of the street-level photo to show.<br/>
|
||||
_Example:_ `photo=streetside/718514589`<br/>
|
||||
_Available prefixes:_ `streetside/`, `mapillary/`, `openstreetcam/`
|
||||
|
||||
@@ -13,7 +13,7 @@ export function rendererPhotos(context) {
|
||||
var _dateFilters = ['fromDate', 'toDate'];
|
||||
var _fromDate;
|
||||
var _toDate;
|
||||
var _username;
|
||||
var _usernames;
|
||||
|
||||
function photos() {}
|
||||
|
||||
@@ -81,10 +81,21 @@ export function rendererPhotos(context) {
|
||||
};
|
||||
|
||||
photos.setUsernameFilter = function(val, updateUrl) {
|
||||
_username = val;
|
||||
if (val && typeof val === 'string') val = val.replace(/;/g, ',').split(',');
|
||||
if (val) {
|
||||
val = val.map(d => d.trim()).filter(Boolean);
|
||||
if (!val.length) {
|
||||
val = null;
|
||||
}
|
||||
}
|
||||
_usernames = val;
|
||||
dispatch.call('change', this);
|
||||
if (updateUrl) {
|
||||
setUrlFilterValue('photo_username', val);
|
||||
var hashString;
|
||||
if (_usernames) {
|
||||
hashString = _usernames.join(',');
|
||||
}
|
||||
setUrlFilterValue('photo_username', hashString);
|
||||
}
|
||||
};
|
||||
|
||||
@@ -117,7 +128,7 @@ export function rendererPhotos(context) {
|
||||
};
|
||||
|
||||
photos.shouldFilterByUsername = function() {
|
||||
return showsLayer('mapillary') || showsLayer('openstreetcam');
|
||||
return showsLayer('mapillary') || showsLayer('openstreetcam') || showsLayer('streetside');
|
||||
};
|
||||
|
||||
photos.showsPhotoType = function(val) {
|
||||
@@ -153,8 +164,8 @@ export function rendererPhotos(context) {
|
||||
return photos;
|
||||
};
|
||||
|
||||
photos.username = function() {
|
||||
return _username;
|
||||
photos.usernames = function() {
|
||||
return _usernames;
|
||||
};
|
||||
|
||||
photos.init = function() {
|
||||
|
||||
@@ -492,12 +492,12 @@ export default {
|
||||
var showsFlat = context.photos().showsFlat();
|
||||
var fromDate = context.photos().fromDate();
|
||||
var toDate = context.photos().toDate();
|
||||
var username = context.photos().username();
|
||||
var usernames = context.photos().usernames();
|
||||
var filter = ['all'];
|
||||
|
||||
if (!showsPano) filter.push(['==', 'pano', false]);
|
||||
if (!showsFlat && showsPano) filter.push(['==', 'pano', true]);
|
||||
if (username) filter.push(['==', 'username', username]);
|
||||
if (usernames && usernames.length) filter.push(['==', 'username', usernames[0]]);
|
||||
if (fromDate) {
|
||||
var fromTimestamp = new Date(fromDate).getTime();
|
||||
filter.push(['>=', 'capturedAt', fromTimestamp]);
|
||||
|
||||
@@ -116,7 +116,7 @@ export function svgMapillaryImages(projection, context, dispatch) {
|
||||
var showsFlat = context.photos().showsFlat();
|
||||
var fromDate = context.photos().fromDate();
|
||||
var toDate = context.photos().toDate();
|
||||
var username = context.photos().username();
|
||||
var usernames = context.photos().usernames();
|
||||
|
||||
if (!showsPano || !showsFlat) {
|
||||
images = images.filter(function(image) {
|
||||
@@ -136,9 +136,9 @@ export function svgMapillaryImages(projection, context, dispatch) {
|
||||
return new Date(image.captured_at).getTime() <= toTimestamp;
|
||||
});
|
||||
}
|
||||
if (username) {
|
||||
if (usernames) {
|
||||
images = images.filter(function(image) {
|
||||
return image.captured_by === username;
|
||||
return usernames.indexOf(image.captured_by) !== -1;
|
||||
});
|
||||
}
|
||||
return images;
|
||||
@@ -149,7 +149,7 @@ export function svgMapillaryImages(projection, context, dispatch) {
|
||||
var showsFlat = context.photos().showsFlat();
|
||||
var fromDate = context.photos().fromDate();
|
||||
var toDate = context.photos().toDate();
|
||||
var username = context.photos().username();
|
||||
var usernames = context.photos().usernames();
|
||||
|
||||
if (!showsPano || !showsFlat) {
|
||||
sequences = sequences.filter(function(sequence) {
|
||||
@@ -184,9 +184,9 @@ export function svgMapillaryImages(projection, context, dispatch) {
|
||||
return new Date(sequence.properties.captured_at).getTime() <= toTimestamp;
|
||||
});
|
||||
}
|
||||
if (username) {
|
||||
if (usernames) {
|
||||
sequences = sequences.filter(function(sequence) {
|
||||
return sequence.properties.username === username;
|
||||
return usernames.indexOf(sequence.properties.username) !== -1;
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
@@ -110,7 +110,7 @@ export function svgOpenstreetcamImages(projection, context, dispatch) {
|
||||
function filterImages(images) {
|
||||
var fromDate = context.photos().fromDate();
|
||||
var toDate = context.photos().toDate();
|
||||
var username = context.photos().username();
|
||||
var usernames = context.photos().usernames();
|
||||
|
||||
if (fromDate) {
|
||||
var fromTimestamp = new Date(fromDate).getTime();
|
||||
@@ -124,9 +124,9 @@ export function svgOpenstreetcamImages(projection, context, dispatch) {
|
||||
return new Date(item.captured_at).getTime() <= toTimestamp;
|
||||
});
|
||||
}
|
||||
if (username) {
|
||||
if (usernames) {
|
||||
images = images.filter(function(item) {
|
||||
return item.captured_by === username;
|
||||
return usernames.indexOf(item.captured_by) !== -1;
|
||||
});
|
||||
}
|
||||
|
||||
@@ -136,7 +136,7 @@ export function svgOpenstreetcamImages(projection, context, dispatch) {
|
||||
function filterSequences(sequences) {
|
||||
var fromDate = context.photos().fromDate();
|
||||
var toDate = context.photos().toDate();
|
||||
var username = context.photos().username();
|
||||
var usernames = context.photos().usernames();
|
||||
|
||||
if (fromDate) {
|
||||
var fromTimestamp = new Date(fromDate).getTime();
|
||||
@@ -150,9 +150,9 @@ export function svgOpenstreetcamImages(projection, context, dispatch) {
|
||||
return new Date(image.properties.captured_at).getTime() <= toTimestamp;
|
||||
});
|
||||
}
|
||||
if (username) {
|
||||
if (usernames) {
|
||||
sequences = sequences.filter(function(image) {
|
||||
return image.properties.captured_by === username;
|
||||
return usernames.indexOf(image.properties.captured_by) !== -1;
|
||||
});
|
||||
}
|
||||
|
||||
@@ -177,7 +177,7 @@ export function svgOpenstreetcamImages(projection, context, dispatch) {
|
||||
sequences = filterSequences(sequences);
|
||||
images = filterImages(images);
|
||||
}
|
||||
|
||||
|
||||
var traces = layer.selectAll('.sequences').selectAll('.sequence')
|
||||
.data(sequences, function(d) { return d.properties.key; });
|
||||
|
||||
|
||||
@@ -162,7 +162,7 @@ export function svgStreetside(projection, context, dispatch) {
|
||||
function filterBubbles(bubbles) {
|
||||
var fromDate = context.photos().fromDate();
|
||||
var toDate = context.photos().toDate();
|
||||
var username = context.photos().username();
|
||||
var usernames = context.photos().usernames();
|
||||
|
||||
if (fromDate) {
|
||||
var fromTimestamp = new Date(fromDate).getTime();
|
||||
@@ -176,9 +176,9 @@ export function svgStreetside(projection, context, dispatch) {
|
||||
return new Date(bubble.captured_at).getTime() <= toTimestamp;
|
||||
});
|
||||
}
|
||||
if (username) {
|
||||
if (usernames) {
|
||||
bubbles = bubbles.filter(function(bubble) {
|
||||
return bubble.captured_by === username;
|
||||
return usernames.indexOf(bubble.captured_by) !== -1;
|
||||
});
|
||||
}
|
||||
|
||||
@@ -188,7 +188,7 @@ export function svgStreetside(projection, context, dispatch) {
|
||||
function filterSequences(sequences) {
|
||||
var fromDate = context.photos().fromDate();
|
||||
var toDate = context.photos().toDate();
|
||||
var username = context.photos().username();
|
||||
var usernames = context.photos().usernames();
|
||||
|
||||
if (fromDate) {
|
||||
var fromTimestamp = new Date(fromDate).getTime();
|
||||
@@ -202,9 +202,9 @@ export function svgStreetside(projection, context, dispatch) {
|
||||
return new Date(sequences.properties.captured_at).getTime() <= toTimestamp;
|
||||
});
|
||||
}
|
||||
if (username) {
|
||||
if (usernames) {
|
||||
sequences = sequences.filter(function(sequences) {
|
||||
return sequences.properties.captured_by === username;
|
||||
return usernames.indexOf(sequences.properties.captured_by) !== -1;
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
@@ -237,7 +237,7 @@ export function uiSectionPhotoOverlays(context) {
|
||||
|
||||
function drawUsernameFilter(selection) {
|
||||
function filterEnabled() {
|
||||
return context.photos().username();
|
||||
return context.photos().usernames();
|
||||
}
|
||||
var ul = selection
|
||||
.selectAll('.layer-list-username-filter')
|
||||
@@ -280,15 +280,22 @@ export function uiSectionPhotoOverlays(context) {
|
||||
.attr('type', 'text')
|
||||
.attr('class', 'list-item-input')
|
||||
.call(utilNoAuto)
|
||||
.property('value', context.photos().username())
|
||||
.property('value', usernameValue)
|
||||
.on('change', function() {
|
||||
var value = d3_select(this).property('value');
|
||||
context.photos().setUsernameFilter(value, true);
|
||||
d3_select(this).property('value', usernameValue);
|
||||
});
|
||||
|
||||
li
|
||||
.merge(liEnter)
|
||||
.classed('active', filterEnabled);
|
||||
|
||||
function usernameValue() {
|
||||
var usernames = context.photos().usernames();
|
||||
if (usernames) return usernames.join('; ');
|
||||
return usernames;
|
||||
}
|
||||
}
|
||||
|
||||
function toggleLayer(which) {
|
||||
|
||||
Reference in New Issue
Block a user