mirror of
https://github.com/zulip/zulip.git
synced 2025-11-06 15:03:34 +00:00
5b94e1dfad
See example here: https://jsbin.com/relewizita/edit?html,js,output Basically the original statement get the first of each input, button and select element, and then select the first of these in the next line. We can simply query the first one in one step. The settings menu have at most 20 of these input elements so performance should have no impact.
145 lines
3.8 KiB
JavaScript
145 lines
3.8 KiB
JavaScript
var settings_panel_menu = (function () {
|
|
|
|
var exports = {};
|
|
|
|
exports.make_menu = function (opts) {
|
|
var main_elem = opts.main_elem;
|
|
var hash_prefix = opts.hash_prefix;
|
|
var curr_li = main_elem.children('li').eq(0);
|
|
|
|
var self = {};
|
|
|
|
self.show = function () {
|
|
main_elem.show();
|
|
var section = self.current_tab();
|
|
self.activate_section(section);
|
|
curr_li.focus();
|
|
};
|
|
|
|
self.hide = function () {
|
|
main_elem.hide();
|
|
};
|
|
|
|
self.current_tab = function () {
|
|
return curr_li.data('section');
|
|
};
|
|
|
|
self.li_for_section = function (section) {
|
|
var li = $("#settings_overlay_container li[data-section='" + section + "']");
|
|
return li;
|
|
};
|
|
|
|
self.set_key_handlers = function (toggler) {
|
|
keydown_util.handle({
|
|
elem: main_elem,
|
|
handlers: {
|
|
left_arrow: toggler.maybe_go_left,
|
|
right_arrow: toggler.maybe_go_right,
|
|
enter_key: self.enter_panel,
|
|
up_arrow: self.prev,
|
|
down_arrow: self.next,
|
|
},
|
|
});
|
|
};
|
|
|
|
self.prev = function () {
|
|
curr_li.prev().focus().click();
|
|
return true;
|
|
};
|
|
|
|
self.next = function () {
|
|
curr_li.next().focus().click();
|
|
return true;
|
|
};
|
|
|
|
self.enter_panel = function () {
|
|
var panel = self.get_panel();
|
|
var sel = 'input:visible,button:visible,select:visible';
|
|
var panel_elem = panel.find(sel).first();
|
|
|
|
panel_elem.focus();
|
|
return true;
|
|
};
|
|
|
|
self.activate_section = function (section) {
|
|
curr_li = self.li_for_section(section);
|
|
|
|
main_elem.children("li").removeClass("active no-border");
|
|
curr_li.addClass("active");
|
|
curr_li.prev().addClass("no-border");
|
|
|
|
var settings_section_hash = '#' + hash_prefix + section;
|
|
hashchange.update_browser_history(settings_section_hash);
|
|
|
|
$(".settings-section, .settings-wrapper").removeClass("show");
|
|
|
|
settings_sections.load_settings_section(section);
|
|
|
|
self.get_panel().addClass('show');
|
|
|
|
ui.reset_scrollbar($("#settings_content"));
|
|
|
|
var $settings_overlay_container = $("#settings_overlay_container");
|
|
$settings_overlay_container.find(".right").addClass("show");
|
|
$settings_overlay_container.find(".settings-header.mobile").addClass("slide-left");
|
|
|
|
settings.set_settings_header(section);
|
|
};
|
|
|
|
self.get_panel = function () {
|
|
var section = curr_li.data('section');
|
|
var sel = "[data-name='" + section + "']";
|
|
var panel = $(".settings-section" + sel + ", .settings-wrapper" + sel);
|
|
return panel;
|
|
};
|
|
|
|
main_elem.on("click", "li[data-section]", function (e) {
|
|
var section = $(this).attr('data-section');
|
|
|
|
self.activate_section(section);
|
|
|
|
// You generally want to add logic to activate_section,
|
|
// not to this click handler.
|
|
|
|
e.stopPropagation();
|
|
});
|
|
|
|
return self;
|
|
};
|
|
|
|
exports.initialize = function () {
|
|
exports.normal_settings = exports.make_menu({
|
|
main_elem: $('.normal-settings-list'),
|
|
hash_prefix: "settings/",
|
|
});
|
|
exports.org_settings = exports.make_menu({
|
|
main_elem: $('.org-settings-list'),
|
|
hash_prefix: "organization/",
|
|
});
|
|
};
|
|
|
|
exports.show_normal_settings = function () {
|
|
exports.org_settings.hide();
|
|
exports.normal_settings.show();
|
|
};
|
|
|
|
exports.show_org_settings = function () {
|
|
exports.normal_settings.hide();
|
|
exports.org_settings.show();
|
|
};
|
|
|
|
exports.set_key_handlers = function (toggler) {
|
|
exports.normal_settings.set_key_handlers(toggler);
|
|
exports.org_settings.set_key_handlers(toggler);
|
|
};
|
|
|
|
return exports;
|
|
|
|
}());
|
|
|
|
if (typeof module !== 'undefined') {
|
|
module.exports = settings_panel_menu;
|
|
}
|
|
|
|
window.settings_panel_menu = settings_panel_menu;
|