1
0
mirror of https://github.com/django/django.git synced 2024-12-22 17:16:24 +00:00

Updated based on completed SelectFilter2 changes

This commit is contained in:
Alanna Cao 2024-12-08 19:22:37 -05:00
parent 502084394c
commit a5fe0cd262

View File

@ -16,7 +16,6 @@ Requires core.js and SelectBox.js.
from_box.id += '_from'; // change its ID from_box.id += '_from'; // change its ID
from_box.className = 'filtered'; from_box.className = 'filtered';
from_box.setAttribute('aria-labelledby', field_id + '_from_title'); from_box.setAttribute('aria-labelledby', field_id + '_from_title');
from_box.setAttribute('aria-labelledby', field_id + '_from_title');
for (const p of from_box.parentNode.getElementsByTagName('p')) { for (const p of from_box.parentNode.getElementsByTagName('p')) {
if (p.classList.contains("info")) { if (p.classList.contains("info")) {
@ -44,19 +43,11 @@ Requires core.js and SelectBox.js.
selector_available_title.id = field_id + '_from_title'; selector_available_title.id = field_id + '_from_title';
selector_available_title.className = 'selector-available-title'; selector_available_title.className = 'selector-available-title';
quickElement('label', selector_available_title, interpolate(gettext('Available %s') + ' ', [field_name]), 'for', field_id + '_from'); quickElement('label', selector_available_title, interpolate(gettext('Available %s') + ' ', [field_name]), 'for', field_id + '_from');
const selector_available_title = quickElement('div', selector_available);
selector_available_title.id = field_id + '_from_title';
selector_available_title.className = 'selector-available-title';
quickElement('label', selector_available_title, interpolate(gettext('Available %s') + ' ', [field_name]), 'for', field_id + '_from');
quickElement( quickElement(
'p', 'p',
selector_available_title, selector_available_title,
interpolate(gettext('Choose %s by selecting them and then select the "Choose" arrow button.'), [field_name]), interpolate(gettext('Choose %s by selecting them and then select the "Choose" arrow button.'), [field_name]),
'class', 'helptext' 'class', 'helptext'
'p',
selector_available_title,
interpolate(gettext('Choose %s by selecting them and then select the "Choose" arrow button.'), [field_name]),
'class', 'helptext'
); );
const filter_p = quickElement('p', selector_available, '', 'id', field_id + '_filter'); const filter_p = quickElement('p', selector_available, '', 'id', field_id + '_filter');
@ -68,7 +59,6 @@ Requires core.js and SelectBox.js.
'span', search_filter_label, '', 'span', search_filter_label, '',
'class', 'help-tooltip search-label-icon', 'class', 'help-tooltip search-label-icon',
'aria-label', interpolate(gettext("Type into this box to filter down the list of available %s."), [field_name]) 'aria-label', interpolate(gettext("Type into this box to filter down the list of available %s."), [field_name])
'aria-label', interpolate(gettext("Type into this box to filter down the list of available %s."), [field_name])
); );
filter_p.appendChild(document.createTextNode(' ')); filter_p.appendChild(document.createTextNode(' '));
@ -84,13 +74,6 @@ Requires core.js and SelectBox.js.
'id', field_id + '_add_all', 'id', field_id + '_add_all',
'class', 'selector-chooseall' 'class', 'selector-chooseall'
); );
const choose_all = quickElement(
'button',
selector_available,
interpolate(gettext('Choose all %s'), [field_name]),
'id', field_id + '_add_all',
'class', 'selector-chooseall'
);
// <ul class="selector-chooser"> // <ul class="selector-chooser">
const selector_chooser = quickElement('ul', selector_div); const selector_chooser = quickElement('ul', selector_div);
@ -109,20 +92,6 @@ Requires core.js and SelectBox.js.
'id', field_id + '_remove', 'id', field_id + '_remove',
'class', 'selector-remove' 'class', 'selector-remove'
); );
const add_button = quickElement(
'button',
quickElement('li', selector_chooser),
interpolate(gettext('Choose selected %s'), [field_name]),
'id', field_id + '_add',
'class', 'selector-add'
);
const remove_button = quickElement(
'button',
quickElement('li', selector_chooser),
interpolate(gettext('Remove selected chosen %s'), [field_name]),
'id', field_id + '_remove',
'class', 'selector-remove'
);
// <div class="selector-chosen"> // <div class="selector-chosen">
const selector_chosen = quickElement('div', selector_div, '', 'id', field_id + '_selector_chosen'); const selector_chosen = quickElement('div', selector_div, '', 'id', field_id + '_selector_chosen');
@ -131,19 +100,11 @@ Requires core.js and SelectBox.js.
selector_chosen_title.className = 'selector-chosen-title'; selector_chosen_title.className = 'selector-chosen-title';
selector_chosen_title.id = field_id + '_to_title'; selector_chosen_title.id = field_id + '_to_title';
quickElement('label', selector_chosen_title, interpolate(gettext('Chosen %s') + ' ', [field_name]), 'for', field_id + '_to'); quickElement('label', selector_chosen_title, interpolate(gettext('Chosen %s') + ' ', [field_name]), 'for', field_id + '_to');
const selector_chosen_title = quickElement('div', selector_chosen);
selector_chosen_title.className = 'selector-chosen-title';
selector_chosen_title.id = field_id + '_to_title';
quickElement('label', selector_chosen_title, interpolate(gettext('Chosen %s') + ' ', [field_name]), 'for', field_id + '_to');
quickElement( quickElement(
'p', 'p',
selector_chosen_title, selector_chosen_title,
interpolate(gettext('Remove %s by selecting them and then select the "Remove" arrow button.'), [field_name]), interpolate(gettext('Remove %s by selecting them and then select the "Remove" arrow button.'), [field_name]),
'class', 'helptext' 'class', 'helptext'
'p',
selector_chosen_title,
interpolate(gettext('Remove %s by selecting them and then select the "Remove" arrow button.'), [field_name]),
'class', 'helptext'
); );
const filter_selected_p = quickElement('p', selector_chosen, '', 'id', field_id + '_filter_selected'); const filter_selected_p = quickElement('p', selector_chosen, '', 'id', field_id + '_filter_selected');
@ -155,7 +116,6 @@ Requires core.js and SelectBox.js.
'span', search_filter_selected_label, '', 'span', search_filter_selected_label, '',
'class', 'help-tooltip search-label-icon', 'class', 'help-tooltip search-label-icon',
'aria-label', interpolate(gettext("Type into this box to filter down the list of selected %s."), [field_name]) 'aria-label', interpolate(gettext("Type into this box to filter down the list of selected %s."), [field_name])
'aria-label', interpolate(gettext("Type into this box to filter down the list of selected %s."), [field_name])
); );
filter_selected_p.appendChild(document.createTextNode(' ')); filter_selected_p.appendChild(document.createTextNode(' '));
@ -163,17 +123,6 @@ Requires core.js and SelectBox.js.
const filter_selected_input = quickElement('input', filter_selected_p, '', 'type', 'text', 'placeholder', gettext("Filter")); const filter_selected_input = quickElement('input', filter_selected_p, '', 'type', 'text', 'placeholder', gettext("Filter"));
filter_selected_input.id = field_id + '_selected_input'; filter_selected_input.id = field_id + '_selected_input';
quickElement(
'select',
selector_chosen,
'',
'id', field_id + '_to',
'multiple', '',
'size', from_box.size,
'name', from_box.name,
'aria-labelledby', field_id + '_to_title',
'class', 'filtered'
);
quickElement( quickElement(
'select', 'select',
selector_chosen, selector_chosen,
@ -195,13 +144,6 @@ Requires core.js and SelectBox.js.
'id', field_id + '_remove_all', 'id', field_id + '_remove_all',
'class', 'selector-clearall' 'class', 'selector-clearall'
); );
const clear_all = quickElement(
'button',
selector_chosen,
interpolate(gettext('Remove all %s'), [field_name]),
'id', field_id + '_remove_all',
'class', 'selector-clearall'
);
from_box.name = from_box.name + '_old'; from_box.name = from_box.name + '_old';
@ -218,11 +160,9 @@ Requires core.js and SelectBox.js.
choose_all.addEventListener('click', function(e) { choose_all.addEventListener('click', function(e) {
move_selection(e, this, SelectBox.move_all, field_id + '_from', field_id + '_to'); move_selection(e, this, SelectBox.move_all, field_id + '_from', field_id + '_to');
}); });
add_button.addEventListener('click', function(e) {
add_button.addEventListener('click', function(e) { add_button.addEventListener('click', function(e) {
move_selection(e, this, SelectBox.move, field_id + '_from', field_id + '_to'); move_selection(e, this, SelectBox.move, field_id + '_from', field_id + '_to');
}); });
remove_button.addEventListener('click', function(e) {
remove_button.addEventListener('click', function(e) { remove_button.addEventListener('click', function(e) {
move_selection(e, this, SelectBox.move, field_id + '_to', field_id + '_from'); move_selection(e, this, SelectBox.move, field_id + '_to', field_id + '_from');
}); });