From 9f3329149c942854785c7f81086f07dfa85f9a36 Mon Sep 17 00:00:00 2001
From: Quincy Morgan <quincy.morgan@icloud.com>
Date: Mon, 4 Mar 2019 10:03:05 -0500
Subject: [PATCH] Add basic arrow key navigation of the search-to-add bar

---
 css/80_app.css            |  5 +++-
 modules/ui/preset_icon.js |  2 +-
 modules/ui/search_add.js  | 62 ++++++++++++++++++++++++++++++++++++++-
 3 files changed, 66 insertions(+), 3 deletions(-)

diff --git a/css/80_app.css b/css/80_app.css
index 5b9040ae5..a699a8479 100644
--- a/css/80_app.css
+++ b/css/80_app.css
@@ -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;
diff --git a/modules/ui/preset_icon.js b/modules/ui/preset_icon.js
index d7e5745ed..9610be3e8 100644
--- a/modules/ui/preset_icon.js
+++ b/modules/ui/preset_icon.js
@@ -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') : ''));
     }
 
 
diff --git a/modules/ui/search_add.js b/modules/ui/search_add.js
index 2d62e1ecc..7c3ae2bfc 100644
--- a/modules/ui/search_add.js
+++ b/modules/ui/search_add.js
@@ -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')