improvements to the dropdown atom: use scrollbar when menu size exceeds the...

improvements to the dropdown atom: use scrollbar when menu size exceeds the viewport size. Also, add keybindings for Enter, Escape, Space, arrow keys, and navigating options by matching keypresses to the first character

pd/nw/css/c64.css

@@ -243,6 +243,7 @@ text {
     border-color: #7569d7;
     cursor: pointer;
     box-shadow: 2px 2px 0px #7569d7;
+    overflow-y: auto;
 }
 
 #dropdown_list ol {

pd/nw/css/default.css

@@ -357,6 +357,7 @@ text {
     border-color: #c3c3c3;
     cursor: pointer;
     box-shadow: 5px 0 5px -5px #aaa, 0 5px 5px -5px #aaa, -5px 0 5px -5px #aaa;
+    overflow-y: auto;
 }
 
 #dropdown_list ol {

pd/nw/css/extended.css

@@ -237,6 +237,7 @@ text {
     border-color: #c3c3c3;
     cursor: pointer;
     box-shadow: 5px 0 5px -5px #888, 0 5px 5px -5px #888, -5px 0 5px -5px #888;
+    overflow-y: auto;
 }
 
 #dropdown_list ol {

pd/nw/css/inverted.css

@@ -258,6 +258,7 @@ text {
     cursor: pointer;
     color: white;
     box-shadow: 5px 0 5px -5px #999, 0 5px 5px -5px #999, -5px 0 5px -5px #999;
+    overflow-y: auto;
 }
 
 #dropdown_list ol {

pd/nw/css/solarized.css

@@ -253,6 +253,7 @@ text {
     border-color: #93a1a1;
     cursor: pointer;
     color: #586e75;
+    overflow-y: auto;
 }
 
 #dropdown_list ol {

pd/nw/css/solarized_inverted.css

@@ -253,7 +253,7 @@ text {
     border-color: #586e75;
     cursor: pointer;
     color: #93a1a1;
-
+    overflow-y: auto;
 }
 
 #dropdown_list ol {

pd/nw/css/strongbad.css

@@ -248,6 +248,7 @@ text {
     cursor: pointer;
     color: #4bd046;
     box-shadow: 1px 1px 1px 1px #0b560b;
+    overflow-y: auto;
 }
 
 #dropdown_list ol {

pd/nw/css/subdued.css

@@ -243,6 +243,7 @@ text {
     border-style: solid;
     border-color: #b1d3b1;
     cursor: pointer;
+    overflow-y: auto;
 }
 
 #dropdown_list ol {

pd/nw/css/vanilla.css

@@ -237,6 +237,7 @@ text {
     border-style: solid;
     border-color: black;
     cursor: pointer;
+    overflow-y: auto;
 }
 
 #dropdown_list ol {

pd/nw/css/vanilla_inverted.css

@@ -253,6 +253,7 @@ text {
     border-color: white;
     cursor: pointer;
     color: white;
+    overflow-y: auto;
 }
 
 #dropdown_list ol {

pd/nw/pd_canvas.js

@@ -211,6 +211,21 @@ var canvas_events = (function() {
             pdgui.pdsend(elem.getAttribute("data-callback"),
                 elem.querySelector(".highlighted").getAttribute("data-index"));
         },
+        dropdown_highlight_elem = function(elem) {
+            var container = document.querySelector("#dropdown_list"),
+                li_array;
+            if (!elem.classList.contains("highlighted")) {
+                li_array = container.querySelectorAll("li");
+                Array.prototype.forEach.call(li_array, function(e) {
+                    e.classList.remove("highlighted");
+                });
+                elem.classList.add("highlighted");
+                // Make sure the highlighted element is in view
+                container.scrollTop = elem.offsetTop + elem.offsetHeight
+                    - container.clientHeight;
+                pdgui.post("offset is " + container.scrollTop);
+            }
+        },
         events = {
             mousemove: function(evt) {
                 //pdgui.post("x: " + evt.pageX + " y: " + evt.pageY +
@@ -475,8 +490,70 @@ var canvas_events = (function() {
                 //pdgui.post("previous state is " + canvas_events.get_previous_state());
                 canvas_events[canvas_events.get_previous_state()]();
             },
+            dropdown_menu_keydown: function(evt) {
+                var select_elem = document.querySelector("#dropdown_list"),
+                    li;
+                pdgui.post("keycode is " + evt.keyCode);
+                switch(evt.keyCode) {
+                    case 13:
+                    case 32:
+                        dropdown_index_to_pd(select_elem);
+                        select_elem.style.setProperty("display", "none");
+                        canvas_events.normal();
+                        break;
+                    case 27: // escape
+                        select_elem.style.setProperty("display", "none");
+                        pdgui.post("canceled thing");
+                        canvas_events.normal();
+                        break;
+                    case 38: // up
+                        li = select_elem.querySelector(".highlighted");
+                        li = li.previousElementSibling ||
+                             li.parentElement.lastElementChild;
+                        dropdown_highlight_elem(li);
+                        break;
+                    case 40: // down
+                        li = select_elem.querySelector(".highlighted");
+                        li = li.nextElementSibling ||
+                             li.parentElement.firstElementChild;
+                        dropdown_highlight_elem(li);
+                    default:
+                }
+
+            },
+            dropdown_menu_keypress: function(evt) {
+                var li_nodes = document.querySelectorAll("#dropdown_list li"),
+                    string_array = [],
+                    highlighted_index,
+                    match,
+                    offset;
+                highlighted_index =
+                    +document.querySelector("#dropdown_list .highlighted")
+                        .getAttribute("data-index");
+                offset = highlighted_index + 1;
+                Array.prototype.forEach.call(li_nodes, function(e, i, a) {
+                    var s = a[(i + offset) % a.length];
+                    string_array.push(s.textContent.trim());
+                });
+                match = string_array.indexOf(
+                    string_array.find(function(e) {
+                        return e.charAt(0).toLowerCase() ===
+                            String.fromCharCode(evt.charCode).toLowerCase();
+                }));
+                if (match !== undefined) {
+                    match = (match + offset) % li_nodes.length;
+                    if (match !== highlighted_index) {
+                        dropdown_highlight_elem(li_nodes[match]);
+                    }
+                }
+            },
             dropdown_menu_mousedown: function(evt) {
                 var select_elem = document.querySelector("#dropdown_list");
+                if (evt.target.parentNode
+                    && evt.target.parentNode.parentNode
+                    && evt.target.parentNode.parentNode.id === "dropdown_list") {
+                    dropdown_highlight_elem(evt.target);
+                }
                 dropdown_index_to_pd(select_elem);
                 select_elem.style.setProperty("display", "none");
                 canvas_events.normal();
@@ -497,11 +574,7 @@ var canvas_events = (function() {
                 if (evt.target.parentNode
                     && evt.target.parentNode.parentNode
                     && evt.target.parentNode.parentNode.id === "dropdown_list") {
-                    li_array = evt.target.parentNode.querySelectorAll('li');
-                    Array.prototype.forEach.call(li_array, function(e) {
-                        e.classList.remove("highlighted");
-                    });
-                    evt.target.classList.add("highlighted");
+                    dropdown_highlight_elem(evt.target);
                 }
                 // hide the dropdown menu <div> thingy
             }
@@ -761,6 +834,8 @@ var canvas_events = (function() {
             document.addEventListener("mousedown", events.dropdown_menu_mousedown, false);
             document.addEventListener("mouseup", events.dropdown_menu_mouseup, false);
             document.addEventListener("mouseover", events.dropdown_menu_mouseover, false);
+            document.addEventListener("keydown", events.dropdown_menu_keydown, false);
+            document.addEventListener("keypress", events.dropdown_menu_keypress, false);
         },
         search: function() {
             this.none();