diff --git a/customize.dist/main.css b/customize.dist/main.css index 791563ed3..910b5073f 100644 --- a/customize.dist/main.css +++ b/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; diff --git a/customize.dist/messages.js b/customize.dist/messages.js index 924139570..a2249adcc 100644 --- a/customize.dist/messages.js +++ b/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) { - $button.text($(option).text()); - } - else { - $button.text('English'); - } + selector.setValue(language || 'English'); // Listen for language change $(selector).find('a.languageValue').on('click', function () { diff --git a/customize.dist/src/less/dropdown.less b/customize.dist/src/less/dropdown.less index 0d915cf80..79a7edbec 100644 --- a/customize.dist/src/less/dropdown.less +++ b/customize.dist/src/less/dropdown.less @@ -57,6 +57,11 @@ background-color: #f1f1f1; color: black !important; } + + &.active { + background-color: #e8e8e8; + color: black !important; + } } hr { diff --git a/customize.dist/toolbar.css b/customize.dist/toolbar.css index bf5458f84..f8393a327 100644 --- a/customize.dist/toolbar.css +++ b/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; diff --git a/www/code/main.js b/www/code/main.js index 6ed315e82..a091b3f76 100644 --- a/www/code/main.js +++ b/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')); - $button.text($(this).text()); + setMode($(this).attr('data-value'), $block); + 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); }); diff --git a/www/common/cryptpad-common.js b/www/common/cryptpad-common.js index eddebd105..d90b6fd54 100644 --- a/www/common/cryptpad-common.js +++ b/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'); diff --git a/www/slide/main.js b/www/slide/main.js index bc3defec6..9b26ca921 100644 --- a/www/slide/main.js +++ b/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); });