mirror of
https://github.com/zulip/zulip.git
synced 2025-11-04 22:13:26 +00:00
0e7073ec29
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.
106 lines
2.6 KiB
JavaScript
106 lines
2.6 KiB
JavaScript
var info_overlay = (function () {
|
|
|
|
var exports = {};
|
|
|
|
function adjust_mac_shortcuts() {
|
|
var keys_map = [
|
|
['Backspace', 'Delete'],
|
|
['Enter', 'Return'],
|
|
['Home', 'Fn + Left'],
|
|
['End', 'Fn + Right'],
|
|
['PgUp', 'Fn + Up'],
|
|
['PgDn', 'Fn + Down'],
|
|
];
|
|
|
|
$(".hotkeys_table").each(function () {
|
|
var html = $(this).html();
|
|
keys_map.forEach(function (pair) {
|
|
html = html.replace(new RegExp(pair[0]), pair[1]);
|
|
});
|
|
$(this).html(html);
|
|
});
|
|
}
|
|
|
|
function _setup_info_overlay() {
|
|
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" },
|
|
{ label: i18n.t("Search operators"), key: "search-operators" },
|
|
],
|
|
callback: function (name, key) {
|
|
$(".overlay-modal").hide();
|
|
$("#" + key).show();
|
|
$("#" + key).find(".modal-body").focus();
|
|
},
|
|
};
|
|
|
|
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();
|
|
}
|
|
}
|
|
|
|
exports.show = function (target) {
|
|
var overlay = $(".informational-overlays");
|
|
|
|
if (!overlay.hasClass("show")) {
|
|
overlays.open_overlay({
|
|
name: 'informationalOverlays',
|
|
overlay: overlay,
|
|
on_close: function () {
|
|
hashchange.changehash("");
|
|
},
|
|
});
|
|
}
|
|
|
|
if (target) {
|
|
components.toggle.lookup("info-overlay-toggle").goto(target);
|
|
}
|
|
};
|
|
|
|
exports.maybe_show_keyboard_shortcuts = function () {
|
|
if (overlays.is_active()) {
|
|
return;
|
|
}
|
|
if (popovers.any_active()) {
|
|
return;
|
|
}
|
|
exports.show("keyboard-shortcuts");
|
|
};
|
|
|
|
exports.initialize = function () {
|
|
i18n.ensure_i18n(_setup_info_overlay);
|
|
};
|
|
|
|
return exports;
|
|
}());
|
|
|
|
if (typeof module !== 'undefined') {
|
|
module.exports = info_overlay;
|
|
}
|