Ticket #13614: 13614.filterselect-bug.3.diff

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

@@ -1 +1 @@
 /*
 SelectFilter2 - Turns a multiple-select box into a filter interface.
 
-Requires core.js, SelectBox.js and addevent.js.
+Requires core.js and addevent.js.
 */
 (function($) {
 function findForm(node) {
@@ -19 +19 @@
             return;
         }
         var from_box = document.getElementById(field_id);
-        from_box.id += '_from'; // change its ID
+
+        // --------------------------------------------------------------------
+        // Below is a hack to get around a bug in jQuery, which has been fixed
+        // so we could remove that hack once we upgrade jQuery.
+        // See http://bugs.jquery.com/ticket/8129
+        // The bug is that selected options aren't preserved after cloning the
+        // select widget when simply doing `actual_box = $(from_box).clone()`.
+        var actual_box = $('<select></select>').insertBefore(from_box).hide();
+        var i;
+        var attributes = from_box.attributes;
+        for(i=0; i<attributes.length; i++) {
+            actual_box.attr(attributes[i].name, attributes[i].value);
+        }
+        actual_box[0].innerHTML = from_box.innerHTML;
+        $(from_box).find('option').each(function(index, option){
+            $(option).data('index', index);
+        });
+        // --------------------------------------------------------------------
+
+        from_box.id += '_from';
+        from_box.name += '_from';
         from_box.className = 'filtered';
 
         var ps = from_box.parentNode.getElementsByTagName('p');
-        for (var i=0; i<ps.length; i++) {
+        for (i=0; i<ps.length; i++) {
             if (ps[i].className.indexOf("info") != -1) {
                 // Remove <p class="info">, because it just gets in the way.
                 from_box.parentNode.removeChild(ps[i]);
@@ -58 +78 @@
         filter_input.id = field_id + '_input';
 
         selector_available.appendChild(from_box);
-        var choose_all = quickElement('a', selector_available, gettext('Choose all'), 'title', interpolate(gettext('Click to choose all %s at once.'), [field_name]), 'href', 'javascript: (function(){ SelectBox.move_all("' + field_id + '_from", "' + field_id + '_to"); SelectFilter.refresh_icons("' + field_id + '");})()', 'id', field_id + '_add_all_link');
+        var choose_all = quickElement('a', selector_available, gettext('Choose all'), 'title', interpolate(gettext('Click to choose all %s at once.'), [field_name]), 'href', 'javascript: (function(){ SelectFilter.move("'+ field_id + '", "' + field_id + '_from", "' + field_id + '_to", true);})()', 'id', field_id + '_add_all_link');
         choose_all.className = 'selector-chooseall';
 
         // <ul class="selector-chooser">
         var selector_chooser = quickElement('ul', selector_div, '');
         selector_chooser.className = 'selector-chooser';
-        var add_link = quickElement('a', quickElement('li', selector_chooser, ''), gettext('Choose'), 'title', gettext('Choose'), 'href', 'javascript: (function(){ SelectBox.move("' + field_id + '_from","' + field_id + '_to"); SelectFilter.refresh_icons("' + field_id + '");})()', 'id', field_id + '_add_link');
+        var add_link = quickElement('a', quickElement('li', selector_chooser, ''), gettext('Choose'), 'title', gettext('Choose'), 'href', 'javascript: (function(){ SelectFilter.move("'+ field_id + '", "'+ field_id + '_from", "' + field_id + '_to");})()', 'id', field_id + '_add_link');
         add_link.className = 'selector-add';
-        var remove_link = quickElement('a', quickElement('li', selector_chooser, ''), gettext('Remove'), 'title', gettext('Remove'), 'href', 'javascript: (function(){ SelectBox.move("' + field_id + '_to","' + field_id + '_from"); SelectFilter.refresh_icons("' + field_id + '");})()', 'id', field_id + '_remove_link');
+        var remove_link = quickElement('a', quickElement('li', selector_chooser, ''), gettext('Remove'), 'title', gettext('Remove'), 'href', 'javascript: (function(){ SelectFilter.move("'+ field_id + '", "' + field_id + '_to", "' + field_id + '_from");})()', 'id', field_id + '_remove_link');
         remove_link.className = 'selector-remove';
 
         // <div class="selector-chosen">
@@ -75 +95 @@
         var title_chosen = quickElement('h2', selector_chosen, interpolate(gettext('Chosen %s') + ' ', [field_name]));
         quickElement('img', title_chosen, '', 'src', admin_media_prefix + 'img/icon-unknown.gif', 'width', '10', 'height', '10', 'class', 'help help-tooltip', 'title', interpolate(gettext('This is the list of chosen %s. You may remove some by selecting them in the box below and then clicking the "Remove" arrow between the two boxes.'), [field_name]));
 
-        var to_box = quickElement('select', selector_chosen, '', 'id', field_id + '_to', 'multiple', 'multiple', 'size', from_box.size, 'name', from_box.getAttribute('name'));
+        var to_box = quickElement('select', selector_chosen, '', 'id', field_id + '_to', 'multiple', 'multiple', 'size', from_box.size, 'name', actual_box.attr('name') + '_to');
         to_box.className = 'filtered';
-        var clear_all = quickElement('a', selector_chosen, gettext('Remove all'), 'title', interpolate(gettext('Click to remove all chosen %s at once.'), [field_name]), 'href', 'javascript: (function() { SelectBox.move_all("' + field_id + '_to", "' + field_id + '_from"); SelectFilter.refresh_icons("' + field_id + '");})()', 'id', field_id + '_remove_all_link');
+        var clear_all = quickElement('a', selector_chosen, gettext('Remove all'), 'title', interpolate(gettext('Click to remove all chosen %s at once.'), [field_name]), 'href', 'javascript: (function() { SelectFilter.move("'+ field_id + '", "' + field_id + '_to", "' + field_id + '_from", true);})()', 'id', field_id + '_remove_all_link');
         clear_all.className = 'selector-clearall';
 
-        from_box.setAttribute('name', from_box.getAttribute('name') + '_old');
-
         // Set up the JavaScript event handlers for the select box filter interface
         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(findForm(from_box), 'submit', function() { SelectBox.select_all(field_id + '_to'); });
-        SelectBox.init(field_id + '_from');
-        SelectBox.init(field_id + '_to');
-        // Move selected from_box options to to_box
-        SelectBox.move(field_id + '_from', field_id + '_to');
+        addEvent(from_box, 'change', function(e) { SelectFilter.refresh_state(field_id) });
+        addEvent(to_box, 'change', function(e) { SelectFilter.refresh_state(field_id) });
+        addEvent(from_box, 'dblclick', function() {
+            SelectFilter.move(field_id, field_id + '_from', field_id + '_to');
+        });
+        addEvent(to_box, 'dblclick', function() {
+            SelectFilter.move(field_id, field_id + '_to', field_id + '_from');
+        });
+
+        // Move selected from from_box options to to_box
+        SelectFilter.move(field_id, field_id + '_from', field_id + '_to');
 
         if (!is_stacked) {
             // In horizontal mode, give the same height to the two boxes.
@@ -109 +129 @@
         }
 
         // Initial icon refresh
-        SelectFilter.refresh_icons(field_id);
+        SelectFilter.refresh_state(field_id);
+    },
+    move: function(field_id, from_id, to_id, all) {
+        var options;
+        var from_box = $('#' + from_id);
+        var to_box = $('#' + to_id);
+        options = from_box.find("option");
+        if (!all) {
+            options = options.filter(':selected');
+        }
+        to_box.append(options);
+        to_box.find('option').removeAttr('selected');
+
+        SelectFilter.refresh_state(field_id);
     },
     refresh_icons: function(field_id) {
         var from = $('#' + field_id + '_from');
@@ -123 +156 @@
         $('#' + field_id + '_add_all_link').toggleClass('active', from.find('option').length > 0);
         $('#' + field_id + '_remove_all_link').toggleClass('active', to.find('option').length > 0);
     },
+    refresh_state: function(field_id) {
+        SelectFilter.refresh_icons(field_id);
+
+        // Re-generate the content of the actual, hidden, box.
+        var actual_box = $('#' + field_id);
+        var actual_options = actual_box.find('option');
+        var to_box = $('#' + field_id + '_to');
+
+        // De-select all options.
+        actual_box.find('option').removeAttr('selected', 'selected');
+
+        // Select all the same options as those from the 'to' box.
+        to_box.find('option').each(function(){
+            var option = actual_options[$(this).data('index')];
+            $(option).attr('selected', 'selected');
+        });
+    },
     filter_key_up: function(event, field_id) {
-        var from = document.getElementById(field_id + '_from');
+        var from_box = document.getElementById(field_id + '_from');
         // don't submit form if user pressed Enter
         if ((event.which && event.which == 13) || (event.keyCode && event.keyCode == 13)) {
-            from.selectedIndex = 0;
-            SelectBox.move(field_id + '_from', field_id + '_to');
-            from.selectedIndex = 0;
+            from_box.selectedIndex = 0;
+            SelectFilter.move(field_id, field_id + '_from', field_id + '_to');
+            from_box.selectedIndex = 0;
             return false;
         }
-        var temp = from.selectedIndex;
-        SelectBox.filter(field_id + '_from', document.getElementById(field_id + '_input').value);
-        from.selectedIndex = temp;
+        var temp = from_box.selectedIndex;
+// FIXME!
+//        SelectBox.filter(field_id + '_from', document.getElementById(field_id + '_input').value);
+        from_box.selectedIndex = temp;
         return true;
     },
     filter_key_down: function(event, field_id) {
-        var from = document.getElementById(field_id + '_from');
+        var from_box = document.getElementById(field_id + '_from');
         // right arrow -- move across
         if ((event.which && event.which == 39) || (event.keyCode && event.keyCode == 39)) {
-            var old_index = from.selectedIndex;
-            SelectBox.move(field_id + '_from', field_id + '_to');
-            from.selectedIndex = (old_index == from.length) ? from.length - 1 : old_index;
+            var old_index = from_box.selectedIndex;
+            SelectFilter.move(field_id, field_id + '_from', field_id + '_to');
+            from_box.selectedIndex = (old_index == from_box.length) ? from_box.length - 1 : old_index;
             return false;
         }
         // down arrow -- wrap around
         if ((event.which && event.which == 40) || (event.keyCode && event.keyCode == 40)) {
-            from.selectedIndex = (from.length == from.selectedIndex + 1) ? 0 : from.selectedIndex + 1;
+            from_box.selectedIndex = (from_box.length == from_box.selectedIndex + 1) ? 0 : from_box.selectedIndex + 1;
         }
         // up arrow -- wrap around
         if ((event.which && event.which == 38) || (event.keyCode && event.keyCode == 38)) {
-            from.selectedIndex = (from.selectedIndex == 0) ? from.length - 1 : from.selectedIndex - 1;
+            from_box.selectedIndex = (from_box.selectedIndex == 0) ? from_box.length - 1 : from_box.selectedIndex - 1;
         }
         return true;
     }

django/contrib/auth/admin.py

@@ -21 +21 @@
 class GroupAdmin(admin.ModelAdmin):
     search_fields = ('name',)
     ordering = ('name',)
-    filter_horizontal = ('permissions',)
+    filter_vertical = ('permissions',)
 
     def formfield_for_manytomany(self, db_field, request=None, **kwargs):
         if db_field.name == 'permissions':

tests/regressiontests/admin_widgets/tests.py

@@ -478 +478 @@
         self.cliff = models.Student.objects.create(name='Cliff')
         self.arthur = models.Student.objects.create(name='Arthur')
         self.school = models.School.objects.create(name='School of Awesome')
+        self.school.students = [self.lisa, self.peter]
+        self.school.alumni = [self.lisa, self.peter]
+        self.school.save()
         super(HorizontalVerticalFilterSeleniumFirefoxTests, self).setUp()
 
     def execute_basic_operations(self, field_name, mode):
@@ -505 +508 @@
             for option in self.selenium.find_elements_by_css_selector(from_box + ' option'):
                 option.click()
             self.selenium.find_element_by_id(choose_link).click()
+
         self.assertSelectOptions(from_box, [])
         self.assertSelectOptions(to_box,
                         [str(self.lisa.id), str(self.peter.id),
@@ -567 +571 @@
                          str(self.arthur.id), str(self.cliff.id)])
 
     def test_basic(self):
-        self.school.students = [self.lisa, self.peter]
-        self.school.alumni = [self.lisa, self.peter]
-        self.school.save()
+        self.admin_login(username='super', password='secret', login_url='/')
+        self.selenium.get(
+            '%s%s' % (self.live_server_url, '/admin_widgets/school/%s/' % self.school.id))
 
+        self.execute_basic_operations('students', 'vertical')
+        self.execute_basic_operations('alumni', 'horizontal')
+
+        # Save and check that everything is properly stored in the database ---
+        self.selenium.find_element_by_xpath('//input[@value="Save"]').click()
+        self.school = models.School.objects.get(id=self.school.id) # Reload from database
+        self.assertEqual(list(self.school.students.all()),
+                         [self.arthur, self.cliff, self.jason, self.john])
+        self.assertEqual(list(self.school.alumni.all()),
+                         [self.arthur, self.cliff, self.jason, self.john])
+
+    def test_webkit_bug_13614(self):
         self.admin_login(username='super', password='secret', login_url='/')
         self.selenium.get(
             '%s%s' % (self.live_server_url, '/admin_widgets/school/%s/' % self.school.id))
 
         self.execute_basic_operations('students', 'vertical')
         self.execute_basic_operations('alumni', 'horizontal')
+        # Navigate away and go back to the change form page -------------------
+        self.selenium.find_element_by_link_text('Home').click()
+        self.selenium.back()
+
+        # Check that everything is still in place -----------------------------
+        from_box = '#id_students_from'
+        to_box = '#id_students_to'
+        self.assertSelectOptions(from_box,
+                        [str(self.bob.id), str(self.jenny.id),
+                         str(self.lisa.id), str(self.peter.id)])
+        self.assertSelectOptions(to_box,
+                        [str(self.arthur.id), str(self.cliff.id),
+                         str(self.jason.id), str(self.john.id)])
+
+        from_box = '#id_alumni_from'
+        to_box = '#id_alumni_to'
+        self.assertSelectOptions(from_box,
+                        [str(self.bob.id), str(self.jenny.id),
+                         str(self.lisa.id), str(self.peter.id)])
+        self.assertSelectOptions(to_box,
+                        [str(self.arthur.id), str(self.cliff.id),
+                         str(self.jason.id), str(self.john.id)])
 
         # Save and check that everything is properly stored in the database ---
         self.selenium.find_element_by_xpath('//input[@value="Save"]').click()