CalvinBackup/iD
1
0
Fork 0
mirror of https://github.com/FoggedLens/iD.git synced 2026-05-21 07:46:58 +02:00
Code Issues Packages Projects Releases Wiki Activity

Add basic arrow key navigation of the search-to-add bar

Browse Source
This commit is contained in:
Quincy Morgan
2019-03-04 10:03:05 -05:00
parent c7e86de579
commit 9f3329149c
3 changed files with 66 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
css/80_app.css
+4 -1
View File
@@ -676,7 +676,10 @@ button.add-note svg.icon {
}
.search-add .list-item button.choose:hover,
.search-add .list-item button.choose:focus {
background: #E6ECFF;
background: #fff;
}
.search-add .list-item.focused:not(.disabled) button {
background: #e8ebff;
}
.search-add .list-item button.choose.disabled {
background-color: #ececec;
modules/ui/preset_icon.js
+1 -1
View File
@@ -240,7 +240,7 @@ export function uiPresetIcon() {
});
icon.selectAll('use')
.attr('href', '#' + picon + (isMaki ? (isSmall() ? '-11' : '-15') : ''));
.attr('href', '#' + picon + (isMaki ? (isSmall() && geom === 'point' ? '-11' : '-15') : ''));
}
modules/ui/search_add.js
+61 -1
View File
@@ -45,12 +45,52 @@ export function uiSearchAdd(context) {
.on('keypress', function() {
// enter/return
if (d3_event.keyCode === 13) {
popover.selectAll('.list > .list-item:first-child button.choose')
popover.selectAll('.list .list-item.focused button.choose')
.each(function(d) { d.choose.call(this); });
d3_event.preventDefault();
d3_event.stopPropagation();
}
})
.on('keydown', function(){
// up/down arrow key navigation
if (d3_event.keyCode === utilKeybinding.keyCodes['↓']) {
d3_event.preventDefault();
d3_event.stopPropagation();
var nextFocus,
priorFocus = popover.selectAll('.list .list-item.focused');
if (priorFocus.empty()) {
nextFocus = popover.selectAll('.list > .list-item:first-child');
} else {
nextFocus = popover.selectAll('.list .list-item.focused + .list-item');
if (nextFocus.empty()) {
nextFocus = d3_select(priorFocus.nodes()[0].nextElementSibling)
.selectAll('.list-item:first-child');
}
}
if (!nextFocus.empty()) {
focusListItem(nextFocus);
priorFocus.classed('focused', false);
}
} else if (d3_event.keyCode === utilKeybinding.keyCodes['↑']) {
d3_event.preventDefault();
d3_event.stopPropagation();
var priorFocus = popover.selectAll('.list .list-item.focused');
if (!priorFocus.empty()) {
var nextFocus = d3_select(priorFocus.nodes()[0].previousElementSibling);
if (!nextFocus.empty() && !nextFocus.classed('list-item')) {
nextFocus = nextFocus.selectAll('.list-item:last-child');
}
if (!nextFocus.empty()) {
focusListItem(nextFocus);
priorFocus.classed('focused', false);
}
}
}
})
.on('mousedown', function() {
search.attr('clicking', true);
})
@@ -81,6 +121,9 @@ export function uiSearchAdd(context) {
if (value.length) {
var results = presets.search(value);
list.call(drawList, results);
popover.selectAll('.list .list-item.focused')
.classed('focused', false);
focusListItem(popover.selectAll('.list > .list-item:first-child'));
} else {
//list.call(drawList, context.presets().defaults(geometry, 36));
}
@@ -112,6 +155,13 @@ export function uiSearchAdd(context) {
});
}
function focusListItem(selection) {
if (!selection.empty()) {
selection.classed('focused', true);
//selection.nodes()[0].scrollIntoView();
}
}
function drawList(list, presets) {
var collection = presets.collection.map(function(preset) {
@@ -153,6 +203,16 @@ export function uiSearchAdd(context) {
id += '-' + d.geometry;
}
return id;
})
.on('mouseover', function(d) {
list.selectAll('.list-item.focused')
.classed('focused', false);
d3_select(this)
.classed('focused', true);
})
.on('mouseout', function(d) {
d3_select(this)
.classed('focused', false);
});
row.append('button')