infra
/
cryptpad
2
1
Fork 0
Code Issues Pull Requests Projects Releases 1 Activity

Autocomplete on key press in some dropdown menus

pull/1/head
yflory 2017-03-06 12:18:12 +01:00
parent c04819538b
commit cb88227e2b
7 changed files with 112 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
customize.dist/main.css
View File

@ -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;

7
customize.dist/messages.js
View File

@ -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 () {

5
customize.dist/src/less/dropdown.less
View File

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

4
customize.dist/toolbar.css
View File

@ -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;

14
www/code/main.js
View File

@ -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);
});

87
www/common/cryptpad-common.js
View File

@ -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');

7
www/slide/main.js
View File

@ -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);
});