1
0
mirror of https://github.com/netbox-community/netbox.git synced 2024-05-10 07:54:54 +00:00

fixed text deselection and refactor

This commit is contained in:
CroogQT
2022-05-05 15:01:40 -07:00
parent ef29bffb72
commit 11f7e3099d
3 changed files with 34 additions and 32 deletions

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@@ -4,29 +4,21 @@ import { previousPkCheckState } from '../stores';
type PreviousPkCheckState = { element: Nullable<HTMLInputElement> };
function preventTextHighlight(): void {
return
function removeTextSelection(): void{
window.getSelection()?.removeAllRanges();
}
function updatePreviousPkCheckState(eventTargetElement: HTMLInputElement, state: StateManager<PreviousPkCheckState>): void {
state.set('element', eventTargetElement);
}
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 === false){
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){
function toggleCheckboxRange(eventTargetElement: HTMLInputElement, previousStateElement: HTMLInputElement, elementList: Generator): void{
let changePkCheckboxState = false
for(let element of elementList){
//Change loop's current checkbox state to eventTargetElement checkbox state
if(changePkCheckboxState === true){
element.checked = eventTargetElement.checked;
}
//The previously clicked checkbox was above the shift clicked checkbox
if(element === previousStateElement){
if(changePkCheckboxState === true){
@@ -34,9 +26,6 @@ function handlePkCheck(event: _MouseEvent, state: StateManager<PreviousPkCheckSt
return
}
changePkCheckboxState = true;
}
//Change loop's current checkbox state to eventTargetElement checkbox state
if(changePkCheckboxState === true){
element.checked = eventTargetElement.checked;
}
//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 {
const checkboxElements = getElements<HTMLInputElement>('input[type="checkbox"][name="pk"]');
for (const element of checkboxElements) {
element.addEventListener('click', (event) => {
//Prevents shift+click from selecting table text
document.addEventListener('selectstart', preventTextHighlight)
removeTextSelection()
//Stop propogation to avoid event firing multiple times
event.stopPropagation();
//Main logic for multi select
handlePkCheck(event, previousPkCheckState);
//Re-enables user's ability to select table text
document.removeEventListener('selectstart', preventTextHighlight)
});
}
}