NeoAnd/netbox
1
0
Fork 0
mirror of https://github.com/netbox-community/netbox.git synced 2025-07-14 09:51:22 -06:00
Code Issues Actions 8 Packages Projects Releases Wiki Activity

fixed text deselection and refactor

Browse Source
This commit is contained in:
CroogQT 2022-05-05 15:01:40 -07:00
parent ef29bffb72
commit 11f7e3099d
3 changed files with 27 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
netbox/project-static/dist/netbox.js vendored
View File

Binary file not shown.

BIN
netbox/project-static/dist/netbox.js.map vendored
View File

Binary file not shown.

52
netbox/project-static/src/buttons/selectMultiple.ts
View File

@ -4,29 +4,21 @@ import { previousPkCheckState } from '../stores';
type PreviousPkCheckState = { element: Nullable<HTMLInputElement> }; type PreviousPkCheckState = { element: Nullable<HTMLInputElement> };
function preventTextHighlight(): void { function removeTextSelection(): void{
return window.getSelection()?.removeAllRanges();
} }
function updatePreviousPkCheckState(eventTargetElement: HTMLInputElement, state: StateManager<PreviousPkCheckState>): void { function updatePreviousPkCheckState(eventTargetElement: HTMLInputElement, state: StateManager<PreviousPkCheckState>): void {
state.set('element', eventTargetElement); state.set('element', eventTargetElement);
} }
function handlePkCheck(event: _MouseEvent, state: StateManager<PreviousPkCheckState>): void { function toggleCheckboxRange(eventTargetElement: HTMLInputElement, previousStateElement: HTMLInputElement, elementList: Generator): void{
const eventTargetElement = event.target as HTMLInputElement; let changePkCheckboxState = false
const previousStateElement = state.get('element'); for(let element of elementList){
updatePreviousPkCheckState(eventTargetElement, state); //Change loop's current checkbox state to eventTargetElement checkbox state
//Stop if user is not holding shift key if(changePkCheckboxState === true){
if(event.shiftKey === false){ element.checked = eventTargetElement.checked;
return }
}
//If no previous state, store event target element as previous state and return
if (previousStateElement === null) {
return updatePreviousPkCheckState(eventTargetElement, state);
}
const checkboxList = getElements<HTMLInputElement>('input[type="checkbox"][name="pk"]');
let changePkCheckboxState = false;
for(const element of checkboxList){
//The previously clicked checkbox was above the shift clicked checkbox //The previously clicked checkbox was above the shift clicked checkbox
if(element === previousStateElement){ if(element === previousStateElement){
if(changePkCheckboxState === true){ if(changePkCheckboxState === true){
@ -34,9 +26,6 @@ function handlePkCheck(event: _MouseEvent, state: StateManager<PreviousPkCheckSt
return return
} }
changePkCheckboxState = true; changePkCheckboxState = true;
}
//Change loop's current checkbox state to eventTargetElement checkbox state
if(changePkCheckboxState === true){
element.checked = eventTargetElement.checked; element.checked = eventTargetElement.checked;
} }
//The previously clicked checkbox was below the shift clicked checkbox //The previously clicked checkbox was below the shift clicked checkbox
@ -50,18 +39,31 @@ function handlePkCheck(event: _MouseEvent, state: StateManager<PreviousPkCheckSt
} }
} }
function handlePkCheck(event: MouseEvent, state: StateManager<PreviousPkCheckState>): void {
const eventTargetElement = event.target as HTMLInputElement;
const previousStateElement = state.get('element');
updatePreviousPkCheckState(eventTargetElement, state);
//Stop if user is not holding shift key
if(!event.shiftKey){
return
}
removeTextSelection();
//If no previous state, store event target element as previous state and return
if (previousStateElement === null) {
return updatePreviousPkCheckState(eventTargetElement, state);
}
const checkboxList = getElements<HTMLInputElement>('input[type="checkbox"][name="pk"]');
toggleCheckboxRange(eventTargetElement, previousStateElement, checkboxList)
}
export function initSelectMultiple(): void { export function initSelectMultiple(): void {
const checkboxElements = getElements<HTMLInputElement>('input[type="checkbox"][name="pk"]'); const checkboxElements = getElements<HTMLInputElement>('input[type="checkbox"][name="pk"]');
for (const element of checkboxElements) { for (const element of checkboxElements) {
element.addEventListener('click', (event) => { element.addEventListener('click', (event) => {
//Prevents shift+click from selecting table text removeTextSelection()
document.addEventListener('selectstart', preventTextHighlight)
//Stop propogation to avoid event firing multiple times //Stop propogation to avoid event firing multiple times
event.stopPropagation(); event.stopPropagation();
//Main logic for multi select
handlePkCheck(event, previousPkCheckState); handlePkCheck(event, previousPkCheckState);
//Re-enables user's ability to select table text
document.removeEventListener('selectstart', preventTextHighlight)
}); });
} }
} }