CalvinBackup/iD
1
0
Fork 0
mirror of https://github.com/FoggedLens/iD.git synced 2026-05-18 14:45:12 +02:00
Code Issues Packages Projects Releases Wiki Activity

feat: date and username filtering for photo overlay layers

Browse Source
This commit is contained in:
Nikola Plesa
2020-07-23 13:28:19 +02:00
parent bd9d4bce74
commit 22bc5121a4
10 changed files with 337 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
modules/ui/sections/photo_overlays.js
+123 -2
View File
@@ -24,7 +24,9 @@ export function uiSectionPhotoOverlays(context) {
.attr('class', 'photo-overlay-container')
.merge(container)
.call(drawPhotoItems)
.call(drawPhotoTypeItems);
.call(drawPhotoTypeItems)
.call(drawDateFilter)
.call(drawUsernameFilter);
}
function drawPhotoItems(selection) {
@@ -92,7 +94,6 @@ export function uiSectionPhotoOverlays(context) {
return t(id.replace(/-/g, '_') + '.title');
});
// Update
li
.merge(liEnter)
@@ -164,6 +165,126 @@ export function uiSectionPhotoOverlays(context) {
.property('checked', typeEnabled);
}
function drawDateFilter(selection) {
var data = context.photos().dateFilters();
function filterEnabled(d) {
return context.photos().dateFilterValue(d);
}
var ul = selection
.selectAll('.layer-list-date-filter')
.data(context.photos().shouldFilterByDate() ? [0] : []);
ul.exit()
.remove();
ul = ul.enter()
.append('ul')
.attr('class', 'layer-list layer-list-date-filter')
.merge(ul);
var li = ul.selectAll('.list-item-date-filter')
.data(data);
li.exit()
.remove();
var liEnter = li.enter()
.append('li')
.attr('class', 'list-item-date-filter');
var labelEnter = liEnter
.append('label')
.each(function(d) {
d3_select(this)
.call(uiTooltip()
.title(t('photo_overlays.date_filter.' + d + '.tooltip'))
.placement('top')
);
});
labelEnter
.append('span')
.text(function(d) {
return t('photo_overlays.date_filter.' + d + '.title');
});
labelEnter
.append('input')
.attr('type', 'date')
.attr('class', 'list-item-input')
.attr('placeholder', 'dd/mm/yyyy')
.on('change', function(d) {
var value = d3_select(this).property('value');
context.photos().setDateFilter(d, value);
});
li
.merge(liEnter)
.classed('active', filterEnabled)
.selectAll('input')
.property('value', function(d) {
return context.photos().dateFilterValue(d);
});
}
function drawUsernameFilter(selection) {
function filterEnabled() {
return context.photos().username();
}
var ul = selection
.selectAll('.layer-list-username-filter')
.data(context.photos().shouldFilterByUsername() ? [0] : []);
ul.exit()
.remove();
ul = ul.enter()
.append('ul')
.attr('class', 'layer-list layer-list-username-filter')
.merge(ul);
var li = ul.selectAll('.list-item-username-filter')
.data(['username-filter']);
li.exit()
.remove();
var liEnter = li.enter()
.append('li')
.attr('class', 'list-item-username-filter');
var labelEnter = liEnter
.append('label')
.each(function() {
d3_select(this)
.call(uiTooltip()
.title(t('photo_overlays.username_filter.tooltip'))
.placement('top')
);
});
labelEnter
.append('span')
.text(t('photo_overlays.username_filter.title'));
labelEnter
.append('input')
.attr('type', 'text')
.attr('class', 'list-item-input')
.on('change', function() {
var value = d3_select(this).property('value');
context.photos().setUsernameFilter(value);
});
li
.merge(liEnter)
.classed('active', filterEnabled)
.selectAll('input')
.property('value', context.photos().username());
}
function toggleLayer(which) {
setLayer(which, !showsLayer(which));
}