Autocomplete on key press in some dropdown menus

customize.dist/main.css

@@ -376,6 +376,10 @@
   background-color: #f1f1f1;
   color: black !important;
 }
+.dropdown-bar .dropdown-bar-content a.active {
+  background-color: #e8e8e8;
+  color: black !important;
+}
 .dropdown-bar .dropdown-bar-content hr {
   margin: 5px 0px;
   height: 1px;

customize.dist/messages.js

@@ -109,12 +109,7 @@ define(req, function(Default, Language) {
         var $button = $(selector).find('button .buttonTitle');
         // Select the current language in the list
         var option = $(selector).find('[data-value="' + language + '"]');
-        if ($(option).length) {
+        selector.setValue(language || 'English');
-            $button.text($(option).text());
-        }
-        else {
-            $button.text('English');
-        }
 
         // Listen for language change
         $(selector).find('a.languageValue').on('click', function () {

customize.dist/src/less/dropdown.less

@@ -57,6 +57,11 @@
                 background-color: #f1f1f1;
                 color: black !important;
             }
+
+            &.active {
+                background-color: #e8e8e8;
+                color: black !important;
+            }
         }
 
         hr {

customize.dist/toolbar.css

@@ -42,6 +42,10 @@
   background-color: #f1f1f1;
   color: black !important;
 }
+.dropdown-bar .dropdown-bar-content a.active {
+  background-color: #e8e8e8;
+  color: black !important;
+}
 .dropdown-bar .dropdown-bar-content hr {
   margin: 5px 0px;
   height: 1px;

www/code/main.js

@@ -81,7 +81,7 @@ define([
                 editor.setOption('mode', mode);
                 if ($select) {
                     var name = $select.find('a[data-value="' + mode + '"]').text() || 'Mode';
-                    $select.find('.buttonTitle').text(name);
+                    $select.setValue(name);
                 }
             };
 
@@ -110,7 +110,9 @@ define([
                         }
                         editor.setOption('theme', theme);
                     }
-                    if ($select) { $select.find('.buttonTitle').text(theme || 'Theme'); }
+                    if ($select) {
+                        $select.setValue(theme || 'Theme');
+                    }
                 };
             }());
 
@@ -438,13 +440,14 @@ define([
                         text: 'Mode', // Button initial text
                         options: options, // Entries displayed in the menu
                         left: true, // Open to the left of the button
+                        isSelect: true,
                     };
                     var $block = module.$language = Cryptpad.createDropdown(dropdownConfig);
                     var $button = $block.find('.buttonTitle');
 
                     $block.find('a').click(function (e) {
-                        setMode($(this).attr('data-value'));
+                        setMode($(this).attr('data-value'), $block);
-                        $button.text($(this).text());
+                        onLocal();
                     });
 
                     $rightside.append($block);
@@ -471,6 +474,8 @@ define([
                         text: 'Theme', // Button initial text
                         options: options, // Entries displayed in the menu
                         left: true, // Open to the left of the button
+                        isSelect: true,
+                        initialValue: lastTheme
                     };
                     var $block = module.$theme = Cryptpad.createDropdown(dropdownConfig);
                     var $button = $block.find('.buttonTitle');
@@ -480,7 +485,6 @@ define([
                     $block.find('a').click(function (e) {
                         var theme = $(this).attr('data-value');
                         setTheme(theme, $block);
-                        $button.text($(this).text());
                         localStorage.setItem(themeKey, theme);
                     });
 

www/common/cryptpad-common.js

@@ -1132,6 +1132,34 @@ define([
 
         $container.append($button).append($innerblock);
 
+        var value = config.initialValue || '';
+
+        var setActive = function ($el) {
+            if ($el.length !== 1) { return; }
+            $innerblock.find('.active').removeClass('active');
+            $el.addClass('active');
+            var scroll = $el.position().top + $innerblock.scrollTop();
+            if (scroll < $innerblock.scrollTop()) {
+                $innerblock.scrollTop(scroll);
+            } else if (scroll > ($innerblock.scrollTop() + 280)) {
+                $innerblock.scrollTop(scroll-270);
+            }
+        };
+
+        var hide = function () {
+            window.setTimeout(function () { $innerblock.hide(); }, 0);
+        };
+
+        var show = function () {
+            $innerblock.show();
+            $innerblock.find('.active').removeClass('active');
+            if (config.isSelect && value) {
+                var $val = $innerblock.find('[data-value="'+value+'"]');
+                setActive($val);
+                $innerblock.scrollTop($val.position().top + $innerblock.scrollTop());
+            }
+        };
+
         $button.click(function (e) {
             e.stopPropagation();
             var state = $innerblock.is(':visible');
@@ -1144,12 +1172,64 @@ define([
                 // empty try catch in case this iframe is problematic (cross-origin)
             }
             if (state) {
-                $innerblock.hide();
+                hide();
                 return;
             }
-            $innerblock.show();
+            show();
         });
 
+        if (config.isSelect) {
+            var pressed = '';
+            var to;
+            $container.keydown(function (e) {
+                var $value = $innerblock.find('[data-value].active');
+                if (e.which === 38) { // Up
+                    if ($value.length) {
+                        var $prev = $value.prev();
+                        setActive($prev);
+                    }
+                }
+                if (e.which === 40) { // Down
+                    if ($value.length) {
+                        var $next = $value.next();
+                        setActive($next);
+                    }
+                }
+                if (e.which === 13) { //Enter
+                    if ($value.length) {
+                        $value.click();
+                        hide();
+                    }
+                }
+                if (e.which === 27) { // Esc
+                    hide();
+                }
+            });
+            $container.keypress(function (e) {
+                window.clearTimeout(to);
+                var c = String.fromCharCode(e.which);
+                pressed += c;
+                var $value = $innerblock.find('[data-value^="'+pressed+'"]:first');
+                if ($value.length) {
+                    setActive($value);
+                    $innerblock.scrollTop($value.position().top + $innerblock.scrollTop());
+                }
+                to = window.setTimeout(function () {
+                    pressed = '';
+                }, 1000);
+            });
+
+            $container.setValue = function (val) {
+                value = val;
+                var $val = $innerblock.find('[data-value="'+val+'"]');
+                var textValue = $val.html() || val;
+                $button.find('.buttonTitle').html(textValue);
+            };
+            $container.getValue = function () {
+                return value || '';
+            };
+        }
+
         return $container;
     };
 
@@ -1174,7 +1254,8 @@ define([
             text: Messages.language, // Button initial text
             options: options, // Entries displayed in the menu
             left: true, // Open to the left of the button
-            container: $initBlock // optional
+            container: $initBlock, // optional
+            isSelect: true
         };
         var $block = createDropdown(dropdownConfig);
         $block.attr('id', 'language-selector');

www/slide/main.js

@@ -128,7 +128,9 @@ define([
                         }
                         editor.setOption('theme', theme);
                     }
-                    if ($select) { $select.find('.buttonTitle').text(theme || 'Theme'); }
+                    if ($select) {
+                        $select.setValue(theme || 'Theme');
+                    }
                 };
             }());
 
@@ -500,6 +502,8 @@ define([
                         text: 'Theme', // Button initial text
                         options: options, // Entries displayed in the menu
                         left: true, // Open to the left of the button
+                        isSelect: true,
+                        initialValue: lastTheme
                     };
                     var $block = module.$theme = Cryptpad.createDropdown(dropdownConfig);
                     var $button = $block.find('.buttonTitle');
@@ -509,7 +513,6 @@ define([
                     $block.find('a').click(function (e) {
                         var theme = $(this).attr('data-value');
                         setTheme(theme, $block);
-                        $button.text($(this).text());
                         localStorage.setItem(themeKey, theme);
                     });