From fb68674ea4b05280e3deb2ed23602038755092bc Mon Sep 17 00:00:00 2001 From: David Sanders Date: Fri, 29 Apr 2016 18:26:09 -0700 Subject: [PATCH] Fixed #26561 -- Improved admin's JavaScript SelectBox performance on large lists. --- .../admin/static/admin/js/SelectBox.js | 53 +++++++++++-------- .../admin/static/admin/js/SelectFilter2.js | 39 +++++++++++--- 2 files changed, 62 insertions(+), 30 deletions(-) diff --git a/django/contrib/admin/static/admin/js/SelectBox.js b/django/contrib/admin/static/admin/js/SelectBox.js index 95825d86af..1a14959bca 100644 --- a/django/contrib/admin/static/admin/js/SelectBox.js +++ b/django/contrib/admin/static/admin/js/SelectBox.js @@ -1,4 +1,4 @@ -(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 += ''; + 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); diff --git a/django/contrib/admin/static/admin/js/SelectFilter2.js b/django/contrib/admin/static/admin/js/SelectFilter2.js index 0935bb7bd3..19c16a704a 100644 --- a/django/contrib/admin/static/admin/js/SelectFilter2.js +++ b/django/contrib/admin/static/admin/js/SelectFilter2.js @@ -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);