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

Add search-to-add functionality

Browse Source
This commit is contained in:
Quincy Morgan
2019-02-28 15:00:00 -05:00
parent b6effd6ed0
commit 4a82604cab
8 changed files with 208 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

68
css/80_app.css
View File

@@ -451,21 +451,24 @@ button[disabled].action:hover {
width: 100%;
}
.tool-group.leading-area {
flex-shrink: 2;
justify-content: flex-start;
}
.tool-group.leading-area,
.tool-group.trailing-area {
flex-shrink: 2;
}
.tool-group.center-area {
justify-content: center;
}
.tool-group.trailing-area {
justify-content: flex-start;
justify-content: flex-end;
}
.tool-group > div {
display: flex;
margin: 0 5px;
}
.tool-group button {
.tool-group button.bar-button {
flex: 1 1 auto;
flex-flow: row nowrap;
align-items: center;
@@ -589,7 +592,7 @@ button.add-note svg.icon {
width: unset;
}
#bar.narrow .spinner,
#bar.narrow button .label {
#bar.narrow button.bar-button .label {
display: none;
}
#bar.narrow button .count {
@@ -597,8 +600,17 @@ button.add-note svg.icon {
border-right-width: 0;
}
/* Add a feature search bar
------------------------------------------------------- */
.search-add {
width: 100%;
min-width: 200px;
max-width: 600px;
}
.search-add .search-wrap {
position: relative;
width: 100%;
}
.search-add input[type='search'] {
position: relative;
@@ -607,10 +619,13 @@ button.add-note svg.icon {
border: none;
border-radius: 20px;
font-size: 14px;
min-width: 160px;
text-indent: 25px;
padding: 5px 10px
}
.search-add input[type='search']:focus {
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
.search-add .search-icon {
color: #333;
display: block;
@@ -619,7 +634,45 @@ button.add-note svg.icon {
top: 10px;
pointer-events: none;
}
.search-add .popover {
max-height: 200px;
width: 100%;
position: absolute;
top: 40px;
border-radius: 0 0 4px 4px;
border-top: 2px solid #DCDCDC;
overflow-y: auto;
}
.search-add .list-item {
display: flex;
position: relative;
padding: 2px;
}
.search-add .list-item:not(:last-of-type) {
border-bottom: 1px solid #DCDCDC;
}
.search-add .list-item .label {
font-weight: bold;
font-size: 12px;
padding-left: 2px;
top: 0;
bottom: 0;
position: relative;
display: flex;
align-items: center;
line-height: 1.2em;
}
.search-add .list-item > *:not(button) {
pointer-events: none;
}
.search-add .list-item button {
position: absolute;
border-radius: 0;
height: 100%;
width: 100%;
top: 0;
left: 0;
}
/* Header for modals / panes
------------------------------------------------------- */
@@ -1018,9 +1071,10 @@ a.hide-toggle {
height: 60px;
text-align: center;
}
#bar .preset-icon-container {
.preset-icon-container.small {
width: 40px;
height: 40px;
flex: 0 0 auto;
}
.preset-icon-line {

17
modules/presets/collection.js
View File

@@ -34,6 +34,14 @@ export function presetCollection(collection) {
}));
},
matchAnyGeometry: function(geometries) {
return presetCollection(this.collection.filter(function(d) {
return geometries.some(function(geometry) {
return d.matchGeometry(geometry);
});
}));
},
search: function(value, geometry) {
if (!value) return this;
@@ -134,8 +142,6 @@ export function presetCollection(collection) {
return a.preset;
});
var other = presets.item(geometry);
var results = leading_name.concat(
leading_suggestions,
leading_terms,
@@ -145,7 +151,12 @@ export function presetCollection(collection) {
similar_terms
).slice(0, maxSearchResults - 1);
return presetCollection(_uniq(results.concat(other)));
if (geometry) {
var other = presets.item(geometry);
results = results.concat(other);
}
return presetCollection(_uniq(results));
}
};

2
modules/ui/init.js
View File

@@ -91,7 +91,7 @@ export function uiInit(context) {
var sidebarButton = leadingArea
.append('div')
.append('button')
.attr('class', 'sidebar-toggle')
.attr('class', 'sidebar-toggle bar-button')
.attr('tabindex', -1)
.on('click', ui.sidebar.toggle)
.call(tooltip()

5
modules/ui/modes.js
View File

@@ -98,8 +98,6 @@ export function uiModes(context) {
var favoritePresets = context.getFavoritePresets();
var favoriteModes = favoritePresets.map(function(d) {
var preset = context.presets().item(d.id);
var isMaki = /^maki-/.test(preset.icon);
var icon = '#' + preset.icon + (isMaki ? '-11' : '');
var markerClass = 'add-preset add-' + d.geom + ' add-preset-' + preset.name()
.replace(/\s+/g, '_')
+ '-' + d.geom; //replace spaces with underscores to avoid css interpretation
@@ -117,7 +115,6 @@ export function uiModes(context) {
title: presetName,
description: t(tooltipTitleID, { feature: presetName }),
key: '',
icon: icon,
preset: preset,
geometry: d.geom
};
@@ -145,7 +142,7 @@ export function uiModes(context) {
var buttonsEnter = buttons.enter()
.append('button')
.attr('tabindex', -1)
.attr('class', function(d) { return d.id + ' add-button'; })
.attr('class', function(d) { return d.id + ' add-button bar-button'; })
.on('click.mode-buttons', function(d) {
if (!enabled(d)) return;

2
modules/ui/preset_icon.js
View File

@@ -128,7 +128,7 @@ export function uiPresetIcon() {
container = container.enter()
.append('div')
.attr('class', 'preset-icon-container')
.attr('class', 'preset-icon-container ' + sizeClass)
.merge(container);
var p = preset.apply(this, arguments);

2
modules/ui/save.js
View File

@@ -77,7 +77,7 @@ export function uiSave(context) {
var button = selection
.append('button')
.attr('class', 'save disabled')
.attr('class', 'save disabled bar-button')
.attr('tabindex', -1)
.on('click', save)
.call(tooltipBehavior);

133
modules/ui/search_add.js
View File

@@ -6,6 +6,12 @@ import {
selectAll as d3_selectAll
} from 'd3-selection';
import {
modeAddArea,
modeAddLine,
modeAddPoint
} from '../modes';
import { t, textDirection } from '../util/locale';
import { actionChangePreset } from '../actions/index';
import { operationDelete } from '../operations/index';
@@ -18,25 +24,142 @@ import { utilKeybinding, utilNoAuto, utilRebind } from '../util';
export function uiSearchAdd(context) {
var dispatch = d3_dispatch('choose');
var presets;
var search = d3_select(null), popover = d3_select(null), list = d3_select(null);
function searchAdd(selection) {
presets = context.presets().matchAnyGeometry(['point', 'line', 'area']);
var searchWrap = selection
.append('div')
.attr('class', 'search-wrap');
var search = searchWrap
search = searchWrap
.append('input')
.attr('class', 'search-input')
.attr('placeholder', t('modes.add_feature.title'))
.attr('type', 'search')
.call(utilNoAuto);
//.on('keydown', initialKeydown)
//.on('keypress', keypress)
//.on('input', inputevent);
.call(utilNoAuto)
.on('focus', function() {
popover.classed('hide', false);
})
.on('blur', function() {
popover.classed('hide', true);
})
.on('input', function () {
var value = search.property('value');
//list.classed('filtered', value.length);
if (value.length) {
var results = presets.search(value);
list.call(drawList, results);
} else {
//list.call(drawList, context.presets().defaults(geometry, 36));
}
});
searchWrap
.call(svgIcon('#iD-icon-search', 'search-icon pre-text'));
popover = searchWrap
.append('div')
.attr('class', 'popover fillL hide')
.on('mousedown', function() {
// don't blur the search input (and thus close results)
d3_event.preventDefault();
d3_event.stopPropagation();
});
list = popover
.append('div')
.attr('class', 'list');//
//.call(drawList, context.presets().defaults(geometry, 36));
}
function supportedGeometry(preset) {
return preset.geometry.filter(function(geometry) {
return ['point', 'line', 'area'].indexOf(geometry) !== -1;
});
}
function defaultGeometry(item) {
if (item.geometry.filter) {
var supportedGeom = supportedGeometry(item);
if (supportedGeom.length === 1) {
return supportedGeom[0];
}
} else {
return item.geometry;
}
return 'point';
}
function drawList(list, presets) {
/*var collection = presets.collection.reduce(function(collection, preset) {
if (preset.members) {
collection.push(CategoryItem(preset));
} else if (preset.visible()) {
collection.push(PresetItem(preset));
}
return collection;
}, []);*/
var items = list.selectAll('.list-item')
.data(presets.collection, function(d) { return d.id; });
items.order();
items.exit()
.remove();
var row = items.enter()
.append('div')
.attr('class', function(item) { return 'list-item preset-' + item.id.replace('/', '-'); });
var button = row.append('button')
.on('click', function(d) {
var geom = defaultGeometry(d);
var markerClass = 'add-preset add-' + geom + ' add-preset-' + d.name()
.replace(/\s+/g, '_')
+ '-' + geom; //replace spaces with underscores to avoid css interpretation
var modeInfo = {
id: markerClass,
button: markerClass,
preset: d,
geometry: geom
};
var mode;
switch (geom) {
case 'point':
case 'vertex':
mode = modeAddPoint(context, modeInfo);
break;
case 'line':
mode = modeAddLine(context, modeInfo);
break;
case 'area':
mode = modeAddArea(context, modeInfo);
}
search.node().blur();
context.enter(mode);
});
row.each(function(d) {
d3_select(this).call(
uiPresetIcon()
.geometry(defaultGeometry(d))
.preset(d)
.sizeClass('small')
);
});
row.append('div')
.attr('class', 'label')
.append('div')
.attr('class', 'label-inner')
.text(function(d) {
return d.name();
});
//updateForFeatureHiddenState();
}
return utilRebind(searchAdd, dispatch, 'on');

2
modules/ui/undo_redo.js
View File

@@ -46,7 +46,7 @@ export function uiUndoRedo(context) {
.data(commands)
.enter()
.append('button')
.attr('class', function(d) { return 'disabled ' + d.id + '-button'; })
.attr('class', function(d) { return 'disabled ' + d.id + '-button bar-button'; })
.on('click', function(d) { return d.action(); })
.call(tooltipBehavior);