mirror of
https://github.com/django/django.git
synced 2025-03-11 18:02:35 +00:00
Fixed #31365 -- Removed jQuery usage in SelectFilter2.js.
This commit is contained in:
parent
aa21020218
commit
3a807a6f59
@ -2,9 +2,9 @@
|
|||||||
/*
|
/*
|
||||||
SelectFilter2 - Turns a multiple-select box into a filter interface.
|
SelectFilter2 - Turns a multiple-select box into a filter interface.
|
||||||
|
|
||||||
Requires jQuery, core.js, and SelectBox.js.
|
Requires core.js and SelectBox.js.
|
||||||
*/
|
*/
|
||||||
(function($) {
|
(function() {
|
||||||
'use strict';
|
'use strict';
|
||||||
window.SelectFilter = {
|
window.SelectFilter = {
|
||||||
init: function(field_id, field_name, is_stacked) {
|
init: function(field_id, field_name, is_stacked) {
|
||||||
@ -156,9 +156,20 @@ Requires jQuery, core.js, and SelectBox.js.
|
|||||||
|
|
||||||
if (!is_stacked) {
|
if (!is_stacked) {
|
||||||
// In horizontal mode, give the same height to the two boxes.
|
// In horizontal mode, give the same height to the two boxes.
|
||||||
var j_from_box = $('#' + field_id + '_from');
|
var j_from_box = document.getElementById(field_id + '_from');
|
||||||
var j_to_box = $('#' + field_id + '_to');
|
var j_to_box = document.getElementById(field_id + '_to');
|
||||||
j_to_box.height($(filter_p).outerHeight() + j_from_box.outerHeight());
|
var height = filter_p.offsetHeight + j_from_box.offsetHeight;
|
||||||
|
|
||||||
|
var j_to_box_style = window.getComputedStyle(j_to_box);
|
||||||
|
if (j_to_box_style.getPropertyValue('box-sizing') === 'border-box') {
|
||||||
|
// Add the padding and border to the final height.
|
||||||
|
height += parseInt(j_to_box_style.getPropertyValue('padding-top'), 10)
|
||||||
|
+ parseInt(j_to_box_style.getPropertyValue('padding-bottom'), 10)
|
||||||
|
+ parseInt(j_to_box_style.getPropertyValue('border-top-width'), 10)
|
||||||
|
+ parseInt(j_to_box_style.getPropertyValue('border-bottom-width'), 10);
|
||||||
|
}
|
||||||
|
|
||||||
|
j_to_box.style.height = height + 'px';
|
||||||
}
|
}
|
||||||
|
|
||||||
// Initial icon refresh
|
// Initial icon refresh
|
||||||
@ -167,20 +178,20 @@ Requires jQuery, core.js, and SelectBox.js.
|
|||||||
any_selected: function(field) {
|
any_selected: function(field) {
|
||||||
var any_selected = false;
|
var any_selected = false;
|
||||||
// Temporarily add the required attribute and check validity.
|
// Temporarily add the required attribute and check validity.
|
||||||
field.attr('required', 'required');
|
field.required = true;
|
||||||
any_selected = field.is(':valid');
|
any_selected = field.checkValidity();
|
||||||
field.removeAttr('required');
|
field.required = false;
|
||||||
return any_selected;
|
return any_selected;
|
||||||
},
|
},
|
||||||
refresh_icons: function(field_id) {
|
refresh_icons: function(field_id) {
|
||||||
var from = $('#' + field_id + '_from');
|
var from = document.getElementById(field_id + '_from');
|
||||||
var to = $('#' + field_id + '_to');
|
var to = document.getElementById(field_id + '_to');
|
||||||
// Active if at least one item is selected
|
// Active if at least one item is selected
|
||||||
$('#' + field_id + '_add_link').toggleClass('active', SelectFilter.any_selected(from));
|
document.getElementById(field_id + '_add_link').classList.toggle('active', SelectFilter.any_selected(from));
|
||||||
$('#' + field_id + '_remove_link').toggleClass('active', SelectFilter.any_selected(to));
|
document.getElementById(field_id + '_remove_link').classList.toggle('active', SelectFilter.any_selected(to));
|
||||||
// Active if the corresponding box isn't empty
|
// Active if the corresponding box isn't empty
|
||||||
$('#' + field_id + '_add_all_link').toggleClass('active', from.find('option').length > 0);
|
document.getElementById(field_id + '_add_all_link').classList.toggle('active', from.querySelector('option'));
|
||||||
$('#' + field_id + '_remove_all_link').toggleClass('active', to.find('option').length > 0);
|
document.getElementById(field_id + '_remove_all_link').classList.toggle('active', to.querySelector('option'));
|
||||||
},
|
},
|
||||||
filter_key_press: function(event, field_id) {
|
filter_key_press: function(event, field_id) {
|
||||||
var from = document.getElementById(field_id + '_from');
|
var from = document.getElementById(field_id + '_from');
|
||||||
@ -219,11 +230,9 @@ Requires jQuery, core.js, and SelectBox.js.
|
|||||||
};
|
};
|
||||||
|
|
||||||
window.addEventListener('load', function(e) {
|
window.addEventListener('load', function(e) {
|
||||||
$('select.selectfilter, select.selectfilterstacked').each(function() {
|
document.querySelectorAll('select.selectfilter, select.selectfilterstacked').forEach(function(el) {
|
||||||
var $el = $(this),
|
var data = el.dataset;
|
||||||
data = $el.data();
|
SelectFilter.init(el.id, data.fieldName, parseInt(data.isStacked, 10));
|
||||||
SelectFilter.init($el.attr('id'), data.fieldName, parseInt(data.isStacked, 10));
|
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
})();
|
||||||
})(django.jQuery);
|
|
||||||
|
@ -24,17 +24,12 @@ class FilteredSelectMultiple(forms.SelectMultiple):
|
|||||||
Note that the resulting JavaScript assumes that the jsi18n
|
Note that the resulting JavaScript assumes that the jsi18n
|
||||||
catalog has been loaded in the page
|
catalog has been loaded in the page
|
||||||
"""
|
"""
|
||||||
@property
|
class Media:
|
||||||
def media(self):
|
|
||||||
extra = '' if settings.DEBUG else '.min'
|
|
||||||
js = [
|
js = [
|
||||||
'vendor/jquery/jquery%s.js' % extra,
|
'admin/js/core.js',
|
||||||
'jquery.init.js',
|
'admin/js/SelectBox.js',
|
||||||
'core.js',
|
'admin/js/SelectFilter2.js',
|
||||||
'SelectBox.js',
|
|
||||||
'SelectFilter2.js',
|
|
||||||
]
|
]
|
||||||
return forms.Media(js=["admin/js/%s" % path for path in js])
|
|
||||||
|
|
||||||
def __init__(self, verbose_name, is_stacked, attrs=None, choices=()):
|
def __init__(self, verbose_name, is_stacked, attrs=None, choices=()):
|
||||||
self.verbose_name = verbose_name
|
self.verbose_name = verbose_name
|
||||||
|
Loading…
x
Reference in New Issue
Block a user