mirror of
				https://github.com/zulip/zulip.git
				synced 2025-11-03 21:43:21 +00:00 
			
		
		
		
	Fix keyboard handling for info overlays.
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:
		@@ -62,7 +62,10 @@ exports.toggle = (function () {
 | 
			
		||||
            }
 | 
			
		||||
 | 
			
		||||
            meta.idx = idx;
 | 
			
		||||
            elem.focus();
 | 
			
		||||
 | 
			
		||||
            if (!opts.child_wants_focus) {
 | 
			
		||||
                elem.focus();
 | 
			
		||||
            }
 | 
			
		||||
        }
 | 
			
		||||
 | 
			
		||||
        function maybe_go_left() {
 | 
			
		||||
@@ -99,6 +102,9 @@ exports.toggle = (function () {
 | 
			
		||||
        }());
 | 
			
		||||
 | 
			
		||||
        var prototype = {
 | 
			
		||||
            maybe_go_left: maybe_go_left,
 | 
			
		||||
            maybe_go_right: maybe_go_right,
 | 
			
		||||
 | 
			
		||||
            value: function () {
 | 
			
		||||
                if (meta.idx >= 0) {
 | 
			
		||||
                    return opts.values[meta.idx].label;
 | 
			
		||||
 
 | 
			
		||||
@@ -22,9 +22,10 @@ function adjust_mac_shortcuts() {
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
function _setup_info_overlay() {
 | 
			
		||||
    var info_overlay_toggle = components.toggle({
 | 
			
		||||
    var opts = {
 | 
			
		||||
        name: "info-overlay-toggle",
 | 
			
		||||
        selected: 0,
 | 
			
		||||
        child_wants_focus: true,
 | 
			
		||||
        values: [
 | 
			
		||||
            { label: i18n.t("Keyboard shortcuts"), key: "keyboard-shortcuts" },
 | 
			
		||||
            { label: i18n.t("Message formatting"), key: "markdown-help" },
 | 
			
		||||
@@ -35,10 +36,29 @@ function _setup_info_overlay() {
 | 
			
		||||
            $("#" + key).show();
 | 
			
		||||
            $("#" + key).find(".modal-body").focus();
 | 
			
		||||
        },
 | 
			
		||||
    }).get();
 | 
			
		||||
    };
 | 
			
		||||
 | 
			
		||||
    $(".informational-overlays .overlay-tabs")
 | 
			
		||||
        .append($(info_overlay_toggle).addClass("large"));
 | 
			
		||||
    var toggler = components.toggle(opts);
 | 
			
		||||
    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)) {
 | 
			
		||||
        adjust_mac_shortcuts();
 | 
			
		||||
 
 | 
			
		||||
		Reference in New Issue
	
	Block a user