Fixed #26561 -- Improved admin's JavaScript SelectBox performance on large lists. (fb68674e) · Commits · Dom Sekotill / django

django/contrib/admin/static/admin/js/SelectBox.js

+31 −22

Original line number	Diff line number	Diff line
		(function() {
		(function($) {
		'use strict';
		var SelectBox = {
		cache: {},
		@@ -7,8 +7,10 @@
		var node;
		SelectBox.cache[id] = [];
		var cache = SelectBox.cache[id];
		for (var i = 0, j = box.options.length; i < j; i++) {
		node = box.options[i];
		var boxOptions = box.options;
		var boxOptionsLength = boxOptions.length;
		for (var i = 0, j = boxOptionsLength; i < j; i++) {
		node = boxOptions[i];
		cache.push({value: node.value, text: node.text, displayed: 1});
		}
		},
		@@ -16,7 +18,8 @@
		// Repopulate HTML select box from cache
		var box = document.getElementById(id);
		var node;
		box.options.length = 0; // clear all options
		$(box).empty(); // clear all options
		var new_options = box.outerHTML.slice(0, -9); // grab just the opening tag
		var cache = SelectBox.cache[id];
		for (var i = 0, j = cache.length; i < j; i++) {
		node = cache[i];
		@@ -24,9 +27,11 @@
		var new_option = new Option(node.text, node.value, false, false);
		// Shows a tooltip when hovering over the option
		new_option.setAttribute("title", node.text);
		box.options[box.options.length] = new_option;
		new_options += new_option.outerHTML;
		}
		}
		new_options += '</select>';
		box.outerHTML = new_options;
		},
		filter: function(id, text) {
		// Redisplay the HTML select box, displaying only the choices containing ALL
		@@ -37,11 +42,13 @@
		for (var i = 0, j = cache.length; i < j; i++) {
		node = cache[i];
		node.displayed = 1;
		var node_text = node.text.toLowerCase();
		var numTokens = tokens.length;
		for (var k = 0; k < numTokens; k++) {
		token = tokens[k];
		if (node.text.toLowerCase().indexOf(token) === -1) {
		if (node_text.indexOf(token) === -1) {
		node.displayed = 0;
		break; // Once the first token isn't found we're done
		}
		}
		}
		@@ -57,11 +64,7 @@
		break;
		}
		}
		var k = cache.length - 1;
		for (i = delete_index; i < k; i++) {
		cache[i] = cache[i + 1];
		}
		cache.length--;
		cache.splice(delete_index, 1);
		},
		add_to_cache: function(id, option) {
		SelectBox.cache[id].push({value: option.value, text: option.text, displayed: 1});
		@@ -82,11 +85,13 @@
		var from_box = document.getElementById(from);
		var option;
		var boxOptions = from_box.options;
		for (var i = 0, j = boxOptions.length; i < j; i++) {
		var boxOptionsLength = boxOptions.length;
		for (var i = 0, j = boxOptionsLength; i < j; i++) {
		option = boxOptions[i];
		if (option.selected && SelectBox.cache_contains(from, option.value)) {
		SelectBox.add_to_cache(to, {value: option.value, text: option.text, displayed: 1});
		SelectBox.delete_from_cache(from, option.value);
		var option_value = option.value;
		if (option.selected && SelectBox.cache_contains(from, option_value)) {
		SelectBox.add_to_cache(to, {value: option_value, text: option.text, displayed: 1});
		SelectBox.delete_from_cache(from, option_value);
		}
		}
		SelectBox.redisplay(from);
		@@ -96,11 +101,13 @@
		var from_box = document.getElementById(from);
		var option;
		var boxOptions = from_box.options;
		for (var i = 0, j = boxOptions.length; i < j; i++) {
		var boxOptionsLength = boxOptions.length;
		for (var i = 0, j = boxOptionsLength; i < j; i++) {
		option = boxOptions[i];
		if (SelectBox.cache_contains(from, option.value)) {
		SelectBox.add_to_cache(to, {value: option.value, text: option.text, displayed: 1});
		SelectBox.delete_from_cache(from, option.value);
		var option_value = option.value;
		if (SelectBox.cache_contains(from, option_value)) {
		SelectBox.add_to_cache(to, {value: option_value, text: option.text, displayed: 1});
		SelectBox.delete_from_cache(from, option_value);
		}
		}
		SelectBox.redisplay(from);
		@@ -126,10 +133,12 @@
		},
		select_all: function(id) {
		var box = document.getElementById(id);
		for (var i = 0; i < box.options.length; i++) {
		box.options[i].selected = 'selected';
		var boxOptions = box.options;
		var boxOptionsLength = boxOptions.length;
		for (var i = 0; i < boxOptionsLength; i++) {
		boxOptions[i].selected = 'selected';
		}
		}
		};
		window.SelectBox = SelectBox;
		})();
		})(django.jQuery);

django/contrib/admin/static/admin/js/SelectFilter2.js

+31 −8

Original line number	Diff line number	Diff line
		@@ -118,10 +118,21 @@ Requires jQuery, core.js, and SelectBox.js.
		addEvent(filter_input, 'keypress', function(e) { SelectFilter.filter_key_press(e, field_id); });
		addEvent(filter_input, 'keyup', function(e) { SelectFilter.filter_key_up(e, field_id); });
		addEvent(filter_input, 'keydown', function(e) { SelectFilter.filter_key_down(e, field_id); });
		addEvent(from_box, 'change', function(e) { SelectFilter.refresh_icons(field_id); });
		addEvent(to_box, 'change', function(e) { SelectFilter.refresh_icons(field_id); });
		addEvent(from_box, 'dblclick', function() { SelectBox.move(field_id + '_from', field_id + '_to'); SelectFilter.refresh_icons(field_id); });
		addEvent(to_box, 'dblclick', function() { SelectBox.move(field_id + '_to', field_id + '_from'); SelectFilter.refresh_icons(field_id); });
		addEvent(selector_div, 'change', function(e) {
		if (e.target.tagName === 'SELECT') {
		SelectFilter.refresh_icons(field_id);
		}
		});
		addEvent(selector_div, 'dblclick', function(e) {
		if (e.target.tagName === 'OPTION') {
		if (e.target.closest('select').id === field_id + '_to') {
		SelectBox.move(field_id + '_to', field_id + '_from');
		} else {
		SelectBox.move(field_id + '_from', field_id + '_to');
		}
		SelectFilter.refresh_icons(field_id);
		}
		});
		addEvent(findForm(from_box), 'submit', function() { SelectBox.select_all(field_id + '_to'); });
		SelectBox.init(field_id + '_from');
		SelectBox.init(field_id + '_to');
		@@ -144,14 +155,26 @@ Requires jQuery, core.js, and SelectBox.js.
		// Initial icon refresh
		SelectFilter.refresh_icons(field_id);
		},
		any_selected: function(field) {
		var any_selected = false;
		try {
		// Temporarily add the required attribute and check validity.
		// This is much faster in WebKit browsers than the fallback.
		field.attr('required', 'required');
		any_selected = field.is(':valid');
		field.removeAttr('required');
		} catch (e) {
		// Browsers that don't support :valid (IE < 10)
		any_selected = field.find('option:selected').length > 0;
		}
		return any_selected;
		},
		refresh_icons: function(field_id) {
		var from = $('#' + field_id + '_from');
		var to = $('#' + field_id + '_to');
		var is_from_selected = from.find('option:selected').length > 0;
		var is_to_selected = to.find('option:selected').length > 0;
		// Active if at least one item is selected
		$('#' + field_id + '_add_link').toggleClass('active', is_from_selected);
		$('#' + field_id + '_remove_link').toggleClass('active', is_to_selected);
		$('#' + field_id + '_add_link').toggleClass('active', SelectFilter.any_selected(from));
		$('#' + field_id + '_remove_link').toggleClass('active', SelectFilter.any_selected(to));
		// Active if the corresponding box isn't empty
		$('#' + field_id + '_add_all_link').toggleClass('active', from.find('option').length > 0);
		$('#' + field_id + '_remove_all_link').toggleClass('active', to.find('option').length > 0);