mirror of
https://github.com/netbox-community/netbox.git
synced 2025-07-22 20:12:00 -06:00
Added TypeScript to handle conditionally floating the object list forms
This commit is contained in:
parent
3b8a3dc66a
commit
1e03eb4eb8
BIN
netbox/project-static/dist/netbox.css
vendored
BIN
netbox/project-static/dist/netbox.css
vendored
Binary file not shown.
BIN
netbox/project-static/dist/netbox.js
vendored
BIN
netbox/project-static/dist/netbox.js
vendored
Binary file not shown.
BIN
netbox/project-static/dist/netbox.js.map
vendored
BIN
netbox/project-static/dist/netbox.js.map
vendored
Binary file not shown.
35
netbox/project-static/src/buttons/floatBulk.ts
Normal file
35
netbox/project-static/src/buttons/floatBulk.ts
Normal file
@ -0,0 +1,35 @@
|
||||
import { getElements, fadeIn } from '../util';
|
||||
|
||||
/**
|
||||
* Conditionally add and remove a class that will float the button group
|
||||
* based on whether or not items in the list are checked
|
||||
*/
|
||||
function toggleFloat(): void {
|
||||
const checkedCheckboxes = document.querySelector<HTMLInputElement>('input[type="checkbox"][name="pk"]:checked');
|
||||
const buttonGroup = document.querySelector<HTMLDivElement>('div.form.form-horizontal div.btn-list');
|
||||
const isFloating = buttonGroup.classList.contains('btn-float-group-left');
|
||||
if (checkedCheckboxes !== null && !isFloating) {
|
||||
buttonGroup.classList.add('btn-float-group-left');
|
||||
}
|
||||
else if (checkedCheckboxes === null && isFloating) {
|
||||
buttonGroup.classList.remove('btn-float-group-left');
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Initialize floating bulk buttons.
|
||||
*/
|
||||
export function initFloatBulk(): void {
|
||||
for (const element of getElements<HTMLInputElement>('input[type="checkbox"][name="pk"]')) {
|
||||
element.addEventListener('change', event => {
|
||||
toggleFloat();
|
||||
});
|
||||
}
|
||||
// Handle the select-all checkbox
|
||||
for (const element of getElements<HTMLInputElement>('table tr th > input[type="checkbox"].toggle')) {
|
||||
element.addEventListener('change', event => {
|
||||
toggleFloat();
|
||||
});
|
||||
}
|
||||
}
|
@ -3,6 +3,7 @@ import { initDepthToggle } from './depthToggle';
|
||||
import { initMoveButtons } from './moveOptions';
|
||||
import { initReslug } from './reslug';
|
||||
import { initSelectAll } from './selectAll';
|
||||
import { initFloatBulk } from './floatBulk';
|
||||
import { initSelectMultiple } from './selectMultiple';
|
||||
import { initMarkdownPreviews } from './markdownPreview';
|
||||
import { initSecretToggle } from './secretToggle';
|
||||
@ -14,6 +15,7 @@ export function initButtons(): void {
|
||||
initReslug,
|
||||
initSelectAll,
|
||||
initSelectMultiple,
|
||||
initFloatBulk,
|
||||
initMoveButtons,
|
||||
initMarkdownPreviews,
|
||||
initSecretToggle,
|
||||
|
Loading…
Reference in New Issue
Block a user