powerSearchNavigation.ts (hoppscotch-2.2.1) | : | powerSearchNavigation.ts (hoppscotch-3.0.0) | ||
---|---|---|---|---|
import { ref } from "@nuxtjs/composition-api" | import { ref } from "vue" | |||
const NAVIGATION_KEYS = ["ArrowDown", "ArrowUp", "Enter"] | const NAVIGATION_KEYS = ["ArrowDown", "ArrowUp", "Enter"] | |||
export function useArrowKeysNavigation(searchItems: any, options: any = {}) { | export function useArrowKeysNavigation(searchItems: any, options: any = {}) { | |||
function handleArrowKeysNavigation( | function handleArrowKeysNavigation( | |||
event: any, | event: any, | |||
itemIndex: any, | itemIndex: any, | |||
preventPropagation: Boolean | preventPropagation: boolean | |||
) { | ) { | |||
if (!NAVIGATION_KEYS.includes(event.key)) return | if (!NAVIGATION_KEYS.includes(event.key)) return | |||
if (preventPropagation) event.stopImmediatePropagation() | if (preventPropagation) event.stopImmediatePropagation() | |||
const itemsLength = searchItems.value.length | const itemsLength = searchItems.value.length | |||
const lastItemIndex = itemsLength - 1 | const lastItemIndex = itemsLength - 1 | |||
const itemIndexValue = itemIndex.value | const itemIndexValue = itemIndex.value | |||
const action = searchItems.value[itemIndexValue]?.action | const action = searchItems.value[itemIndexValue]?.action | |||
skipping to change at line 40 | skipping to change at line 40 | |||
} | } | |||
const preventPropagation = options && options.stopPropagation | const preventPropagation = options && options.stopPropagation | |||
const selectedEntry = ref(0) | const selectedEntry = ref(0) | |||
const onKeyUp = (event: any) => { | const onKeyUp = (event: any) => { | |||
handleArrowKeysNavigation(event, selectedEntry, preventPropagation) | handleArrowKeysNavigation(event, selectedEntry, preventPropagation) | |||
} | } | |||
function bindArrowKeysListerners() { | function bindArrowKeysListeners() { | |||
window.addEventListener("keydown", onKeyUp, { capture: preventPropagation }) | window.addEventListener("keydown", onKeyUp, { capture: preventPropagation }) | |||
} | } | |||
function unbindArrowKeysListerners() { | function unbindArrowKeysListeners() { | |||
window.removeEventListener("keydown", onKeyUp, { | window.removeEventListener("keydown", onKeyUp, { | |||
capture: preventPropagation, | capture: preventPropagation, | |||
}) | }) | |||
} | } | |||
return { | return { | |||
bindArrowKeysListerners, | bindArrowKeysListeners, | |||
unbindArrowKeysListerners, | unbindArrowKeysListeners, | |||
selectedEntry, | selectedEntry, | |||
} | } | |||
} | } | |||
End of changes. 5 change blocks. | ||||
6 lines changed or deleted | 6 lines changed or added |