mirror of
https://github.com/netbox-community/netbox.git
synced 2025-07-14 09:51:22 -06:00
fixed text deselection and refactor
This commit is contained in:
parent
ef29bffb72
commit
11f7e3099d
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.
@ -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)
|
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user