fraport/fradrive-old
Archived
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

make mass input more accessible with more checks on form submit events

Browse Source
This commit is contained in:
Felix Hamann 2019-05-04 21:13:09 +02:00
parent 8381a065b6
commit 34c5134d97
1 changed files with 42 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

52
static/js/utils/massInput.js
View File

@ -24,6 +24,7 @@
var MASS_INPUT_UTIL_SELECTOR = '[uw-mass-input]'; var MASS_INPUT_UTIL_SELECTOR = '[uw-mass-input]';
var MASS_INPUT_CELL_SELECTOR = '.massinput__cell'; var MASS_INPUT_CELL_SELECTOR = '.massinput__cell';
var MASS_INPUT_ADD_CELL_SELECTOR = '.massinput__cell--add';
var MASS_INPUT_INITIALIZED_CLASS = 'mass-input--initialized'; var MASS_INPUT_INITIALIZED_CLASS = 'mass-input--initialized';
var massInputUtil = function(element) { var massInputUtil = function(element) {
@ -52,7 +53,9 @@
return { return {
name: MASS_INPUT_UTIL_NAME, name: MASS_INPUT_UTIL_NAME,
element: element, element: element,
destroy: function() {}, destroy: function() {
reset();
},
}; };
} }
@ -80,11 +83,26 @@
// find the according massinput cell thats hosts the element that triggered the submit // find the according massinput cell thats hosts the element that triggered the submit
var massInputCell = activeElement.closest(MASS_INPUT_CELL_SELECTOR); var massInputCell = activeElement.closest(MASS_INPUT_CELL_SELECTOR);
if (!massInputCell) {
return false;
}
var submitButton = massInputCell.querySelector('button[type="submit"][name][value]');
if (!submitButton) {
return false;
}
var isAddCell = massInputCell.matches(MASS_INPUT_ADD_CELL_SELECTOR);
var submitButtonIsActive = submitButton.matches(':focus, :active');
// if the cell is not an add cell the active element must at least be the cells submit button
if (!isAddCell && !submitButtonIsActive) {
return false;
}
event.preventDefault(); event.preventDefault();
var requestBody = serializeForm(massInputCell, enctype); var requestBody = serializeForm(submitButton, enctype);
if (requestFn) { if (requestFn && requestBody) {
requestFn( requestFn(
url, url,
{ {
@ -96,6 +114,9 @@
return response.text(); return response.text();
}).then(function(response) { }).then(function(response) {
processResponse(response); processResponse(response);
if (isAddCell) {
reFocusAddCell();
}
}); });
} }
}; };
@ -111,16 +132,11 @@
} }
} }
function serializeForm(massInputCell, enctype) { function serializeForm(submitButton, enctype) {
var formData = new FormData(massInputForm); var formData = new FormData(massInputForm);
// manually add name and value of submit button to formData // manually add name and value of submit button to formData
if (massInputCell) { formData.append(submitButton.name, submitButton.value);
var submitButton = massInputCell.querySelector('button[type="submit"][name][value]');
if (submitButton) {
formData.append(submitButton.name, submitButton.value);
}
}
if (enctype === 'application/x-www-form-urlencoded') { if (enctype === 'application/x-www-form-urlencoded') {
return new URLSearchParams(formData); return new URLSearchParams(formData);
@ -131,6 +147,22 @@
} }
} }
function reFocusAddCell() {
var addCell = element.querySelector(MASS_INPUT_ADD_CELL_SELECTOR);
if (!addCell) {
return false;
}
var addCellInput = addCell.querySelector('input:not([type="hidden"])');
if (addCellInput) {
// clear the inputs value
// TBD: make this work for checkboxes and radioboxes
// where the value should not be cleared
addCellInput.value = '';
addCellInput.focus();
}
}
function reset() { function reset() {
element.classList.remove(MASS_INPUT_INITIALIZED_CLASS); element.classList.remove(MASS_INPUT_INITIALIZED_CLASS);
massInputForm.removeEventListener('submit', massInputFormSubmitHandler) massInputForm.removeEventListener('submit', massInputFormSubmitHandler)