paulmataruso/zulip
1
0
Fork 0
mirror of https://github.com/zulip/zulip.git synced 2025-11-06 15:03:34 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fix keyboard handling for info overlays.

Browse Source 
For info overlays (keyboard/markdown/search help) we now let
the modal portions of the widget have focus, so that you can
page around.  And then tab switching still works with the arrow
keys.
This commit is contained in:
Steve Howell
2018-04-04 11:01:34 -04:00
committed by Tim Abbott
parent bd591424e2
commit 0e7073ec29
2 changed files with 31 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
static/js/components.js
View File

@@ -62,8 +62,11 @@ exports.toggle = (function () {
} }
meta.idx = idx; meta.idx = idx;
if (!opts.child_wants_focus) {
elem.focus(); elem.focus();
} }
}
function maybe_go_left() { function maybe_go_left() {
if (meta.idx > 0) { if (meta.idx > 0) {
@@ -99,6 +102,9 @@ exports.toggle = (function () {
}()); }());
var prototype = { var prototype = {
maybe_go_left: maybe_go_left,
maybe_go_right: maybe_go_right,
value: function () { value: function () {
if (meta.idx >= 0) { if (meta.idx >= 0) {
return opts.values[meta.idx].label; return opts.values[meta.idx].label;

28
static/js/info_overlay.js
View File

@@ -22,9 +22,10 @@ function adjust_mac_shortcuts() {
} }
function _setup_info_overlay() { function _setup_info_overlay() {
var info_overlay_toggle = components.toggle({ var opts = {
name: "info-overlay-toggle", name: "info-overlay-toggle",
selected: 0, selected: 0,
child_wants_focus: true,
values: [ values: [
{ label: i18n.t("Keyboard shortcuts"), key: "keyboard-shortcuts" }, { label: i18n.t("Keyboard shortcuts"), key: "keyboard-shortcuts" },
{ label: i18n.t("Message formatting"), key: "markdown-help" }, { label: i18n.t("Message formatting"), key: "markdown-help" },
@@ -35,10 +36,29 @@ function _setup_info_overlay() {
$("#" + key).show(); $("#" + key).show();
$("#" + key).find(".modal-body").focus(); $("#" + key).find(".modal-body").focus();
}, },
}).get(); };
$(".informational-overlays .overlay-tabs") var toggler = components.toggle(opts);
.append($(info_overlay_toggle).addClass("large")); var elem = toggler.get();
elem.addClass('large');
var modals = _.map(opts.values, function (item) {
var key = item.key; // e.g. markdown-help
var modal = $('#' + key).find('.modal-body');
return modal;
});
_.each(modals, function (modal) {
keydown_util.handle({
elem: modal,
handlers: {
left_arrow: toggler.maybe_go_left,
right_arrow: toggler.maybe_go_right,
},
});
});
$(".informational-overlays .overlay-tabs").append(elem);
if (/Mac/i.test(navigator.userAgent)) { if (/Mac/i.test(navigator.userAgent)) {
adjust_mac_shortcuts(); adjust_mac_shortcuts();