npm - arrowtab - Versions diffs - 0.0.1 → 0.0.3 - Mend

arrowtab 0.0.1 → 0.0.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (62) hide show

package/LICENSE +21 -0
package/README.md +110 -3
package/dist/index.d.ts +1 -0
package/dist/index.js +2 -0
package/dist/index.js.map +1 -0
package/dist/index.test.d.ts +1 -0
package/dist/index.test.js +6 -0
package/dist/index.test.js.map +1 -0
package/dist/lib/debugMode.d.ts +8 -0
package/dist/lib/debugMode.js +68 -0
package/dist/lib/debugMode.js.map +1 -0
package/dist/lib/distances.d.ts +13 -0
package/dist/lib/distances.js +15 -0
package/dist/lib/distances.js.map +1 -0
package/dist/lib/getAngle.d.ts +4 -0
package/dist/lib/getAngle.js +15 -0
package/dist/lib/getAngle.js.map +1 -0
package/dist/lib/getFocusable.js +29 -0
package/dist/lib/getFocusable.js.map +1 -0
package/dist/lib/getXyDistance.d.ts +7 -0
package/dist/lib/getXyDistance.js +12 -0
package/dist/lib/getXyDistance.js.map +1 -0
package/dist/lib/hasDisabledKeys.d.ts +4 -0
package/dist/lib/hasDisabledKeys.js +26 -0
package/dist/lib/hasDisabledKeys.js.map +1 -0
package/dist/lib/hasTextSelection.d.ts +4 -0
package/dist/lib/hasTextSelection.js +53 -0
package/dist/lib/hasTextSelection.js.map +1 -0
package/dist/lib/initArrowTab.d.ts +5 -0
package/dist/lib/initArrowTab.js +102 -0
package/dist/lib/initArrowTab.js.map +1 -0
package/dist/lib/positions.js +16 -0
package/dist/lib/positions.js.map +1 -0
package/dist/lib/preventNativeArrowKeyPresses.d.ts +4 -0
package/dist/lib/preventNativeArrowKeyPresses.js +24 -0
package/dist/lib/preventNativeArrowKeyPresses.js.map +1 -0
package/dist/lib/strategies.d.ts +9 -23
package/dist/lib/strategies.js +111 -39
package/dist/lib/strategies.js.map +1 -1
package/dist/lib/{sumBy.mjs → sumBy.js} +1 -1
package/dist/lib/sumBy.js.map +1 -0
package/package.json +35 -9
package/.prettierrc +0 -5
package/.vscode/settings.json +0 -4
package/dist/index.d.mts +0 -1
package/dist/index.mjs +0 -177
package/dist/index.mjs.map +0 -1
package/dist/lib/getFocusable.mjs +0 -15
package/dist/lib/getFocusable.mjs.map +0 -1
package/dist/lib/positions.mjs +0 -12
package/dist/lib/positions.mjs.map +0 -1
package/dist/lib/sumBy.mjs.map +0 -1
package/index.html +0 -142
package/src/index.mts +0 -228
package/src/lib/getFocusable.mts +0 -13
package/src/lib/positions.mts +0 -12
package/src/lib/strategies.ts +0 -62
package/src/lib/sumBy.mts +0 -4
package/tsconfig.json +0 -20
/package/dist/lib/{getFocusable.d.mts → getFocusable.d.ts} +0 -0
/package/dist/lib/{positions.d.mts → positions.d.ts} +0 -0
/package/dist/lib/{sumBy.d.mts → sumBy.d.ts} +0 -0

package/index.html DELETED Viewed

@@ -1,142 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>arrowTab</title>
-    <script src="https://cdn.tailwindcss.com"></script>
-  </head>
-  <body>
-    <div class="flex flex-col gap-48">
-      <div class="grid grid-cols-3 gap-4 p-4 items-baseline">
-        <input type="text" class="border-2 border-gray-300 p-2" />
-        <input type="text" class="border-2 border-gray-300 p-2" />
-        <input type="text" class="border-2 border-gray-300 p-2" />
-        <input type="text" class="border-2 border-gray-300 p-2" />
-        <input type="text" class="border-2 border-gray-300 p-2" value="Hello" />
-        <input type="text" class="border-2 border-gray-300 p-2" />
-        <input type="text" class="border-2 border-gray-300 p-2" />
-        <input type="text" class="border-2 border-gray-300 p-2" />
-        <input type="text" class="border-2 border-gray-300 p-2" />
-      </div>
-      <div class="grid grid-cols-3 gap-4 p-4 items-baseline">
-        <input type="text" class="border-2 border-gray-300 p-2" />
-        <input type="text" disabled class="border-2 border-gray-300 p-2" />
-        <input type="text" class="border-2 border-gray-300 p-2" />
-        <input type="text" disabled class="border-2 border-gray-300 p-2" />
-        <input type="text" class="border-2 border-gray-300 p-2" />
-        <input type="text" disabled class="border-2 border-gray-300 p-2" />
-        <input type="text" class="border-2 border-gray-300 p-2" />
-        <input type="text" disabled class="border-2 border-gray-300 p-2" />
-        <input type="text" class="border-2 border-gray-300 p-2" />
-      </div>
-      <div class="grid grid-cols-3 gap-4 p-4 items-baseline">
-        <input type="text" class="border-2 border-gray-300 p-2" />
-        <input type="text" class="border-2 border-gray-300 p-2" />
-        <input type="text" class="border-2 border-gray-300 p-2" />
-        <input type="text" class="border-2 border-gray-300 p-2" />
-        <input
-          type="text"
-          class="border-2 border-gray-300 p-2"
-          value="✅ Input with Text"
-        />
-        <input type="text" class="border-2 border-gray-300 p-2" />
-        <input type="text" class="border-2 border-gray-300 p-2" />
-        <input type="text" class="border-2 border-gray-300 p-2" />
-        <input type="text" class="border-2 border-gray-300 p-2" />
-        <hr class="col-span-3" />
-        <input
-          type="text"
-          class="border-2 border-gray-300 p-2"
-          value="✅ input"
-        />
-        <div>
-          <span>❌ input hidden</span>
-          <input type="text" hidden class="border-2 border-gray-300 p-2" />
-        </div>
-        <input
-          type="text"
-          disabled
-          class="border-2 border-gray-300 p-2"
-          value="❌ input disabled"
-        />
-        <button>✅ Button</button>
-        <button disabled>❌ button disabled</button>
-        <button aria-hidden="true">❌ button aria-hidden</button>
-        <a href="#" class="focus:outline">✅ a tag with href</a>
-        <a class="focus:outline">❌ only a tag</a>
-        <div></div>
-        <div tabindex="10">✅ tabindex="10"</div>
-        <div tabindex="0">✅ tabindex="0"</div>
-        <div tabindex="-1">❌ tabindex="-1"</div>
-        <hr class="col-span-3" />
-        <input type="text" class="border-2 border-gray-300 p-2" />
-        <input type="text" class="border-2 border-gray-300 p-2" />
-        <input type="text" class="border-2 border-gray-300 p-2" />
-        <input type="text" class="border-2 border-gray-300 p-2" />
-        <textarea class="border-2 border-gray-300 p-2">
-          ✅ Multiline
-          Textarea
-        </textarea>
-        <input type="text" class="border-2 border-gray-300 p-2" />
-        <input type="text" class="border-2 border-gray-300 p-2" />
-        <input type="text" class="border-2 border-gray-300 p-2" />
-        <input type="text" class="border-2 border-gray-300 p-2" />
-        <hr class="col-span-3" />
-        <input
-          type="button"
-          class="border-2 border-gray-300 p-2"
-          value="input button"
-        />
-        <input
-          type="submit"
-          class="border-2 border-gray-300 p-2"
-          value="input submit"
-        />
-        <input
-          type="reset"
-          class="border-2 border-gray-300 p-2"
-          value="input reset"
-        />
-        <input type="password" class="border-2 border-gray-300 p-2" />
-        <input type="checkbox" class="border-2 border-gray-300 p-2" />
-        <input type="radio" class="border-2 border-gray-300 p-2" />
-        <input type="file" class="border-2 border-gray-300 p-2" />
-        <input type="image" class="border-2 border-gray-300 p-2" />
-        <input type="email" class="border-2 border-gray-300 p-2" />
-        <input type="url" class="border-2 border-gray-300 p-2" />
-        <input type="tel" class="border-2 border-gray-300 p-2" />
-        <input type="search" class="border-2 border-gray-300 p-2" />
-        <input type="date" class="border-2 border-gray-300 p-2" />
-        <input type="time" class="border-2 border-gray-300 p-2" />
-        <input type="datetime" class="border-2 border-gray-300 p-2" />
-        <input type="datetime-local" class="border-2 border-gray-300 p-2" />
-        <input type="month" class="border-2 border-gray-300 p-2" />
-        <input type="week" class="border-2 border-gray-300 p-2" />
-        <input type="number" class="border-2 border-gray-300 p-2" />
-        <input type="range" class="border-2 border-gray-300 p-2" />
-        <input type="color" class="border-2 border-gray-300 p-2" />
-        <input type="text" class="border-2 border-gray-300 p-2" />
-        <input type="text" class="border-2 border-gray-300 p-2" />
-        <input type="text" class="border-2 border-gray-300 p-2" />
-        <!-- TODO: select, details -->
-        <!-- TODO: summary, iframe (?) -->
-      </div>
-    </div>
-    <script type="module">
-      import { initArrowTab } from './dist/index.mjs'
-      initArrowTab()
-    </script>
-  </body>
-</html>

package/src/index.mts DELETED Viewed

@@ -1,228 +0,0 @@
-// TODO: Options
-// modifierKey: 'ctrlKey',
-// onlyWithModifierKey: false, // TODO: Better name
-// strategy: arrowTab.XWalkEuclidean,
-// selector: undefined,
-// elementFilter: () => boolean,
-// getElementPosition: (element) => { x: number, y: number },
-// eventTriggerName: 'keydown' | 'keyup',
-// earlyReturn: (event) => boolean, // TODO: Better name
-import { getFocusable } from './lib/getFocusable.mjs'
-import { getMiddle } from './lib/positions.mjs'
-import { strategy } from './lib/strategies.js'
-import { sumBy } from './lib/sumBy.mjs'
-export const initArrowTab = () => {
-  document.addEventListener(
-    'keydown',
-    (event) => {
-      const activeStrategy = strategy.XWalkEuclidean
-      const activeElement =
-        document.activeElement === document.body
-          ? getFocusable()?.[0]
-          : document.activeElement
-      if (!activeElement) {
-        return
-      }
-      if (
-        event.key !== 'ArrowLeft' &&
-        event.key !== 'ArrowRight' &&
-        event.key !== 'ArrowUp' &&
-        event.key !== 'ArrowDown'
-      ) {
-        return
-      }
-      if (
-        activeElement instanceof HTMLInputElement ||
-        activeElement instanceof HTMLTextAreaElement
-      ) {
-        const selectionStart = activeElement.selectionStart
-        const selectionEnd = activeElement.selectionEnd
-        if (
-          event.key === 'ArrowLeft' &&
-          selectionStart !== undefined &&
-          selectionStart !== null &&
-          selectionStart !== 0
-        ) {
-          return
-        }
-        if (
-          event.key === 'ArrowRight' &&
-          selectionStart !== undefined &&
-          selectionStart !== null &&
-          selectionStart !== activeElement.value?.length
-        ) {
-          return
-        }
-        if (
-          (event.key === 'ArrowLeft' || event.key === 'ArrowRight') &&
-          selectionStart !== undefined &&
-          selectionEnd !== undefined &&
-          selectionStart !== null &&
-          selectionEnd !== null &&
-          selectionStart !== selectionEnd
-        ) {
-          return
-        }
-        if (
-          event.key === 'ArrowUp' &&
-          selectionStart !== undefined &&
-          selectionStart !== null &&
-          activeElement instanceof HTMLTextAreaElement
-        ) {
-          const rows = activeElement.value?.split('\n')
-          const start = selectionStart
-          const firstRow = rows.at(0)
-          if (firstRow && start > firstRow.length) {
-            return
-          }
-        }
-        if (
-          event.key === 'ArrowDown' &&
-          selectionStart !== undefined &&
-          selectionStart !== null &&
-          activeElement instanceof HTMLTextAreaElement
-        ) {
-          const rows = activeElement.value?.split('\n')
-          const withoutLastRow = rows.slice(0, -1)
-          const lengthUntilLastRow = sumBy(withoutLastRow, (row) => row.length)
-          const start = selectionStart
-          if (start <= lengthUntilLastRow + 1) {
-            return
-          }
-        }
-      }
-      const inputTypesThatNeedModifierKey: Record<string, string[]> = {
-        date: ['ArrowDown', 'ArrowUp'],
-        time: ['ArrowDown', 'ArrowUp'],
-        datetime: ['ArrowDown', 'ArrowUp'],
-        'datetime-local': ['ArrowDown', 'ArrowUp'],
-        month: ['ArrowDown', 'ArrowUp'],
-        week: ['ArrowDown', 'ArrowUp'],
-        number: ['ArrowDown', 'ArrowUp'],
-        range: ['ArrowDown', 'ArrowUp', 'ArrowLeft', 'ArrowRight'],
-      }
-      if (activeElement instanceof HTMLInputElement) {
-        const inputType = activeElement.type
-        if (
-          inputTypesThatNeedModifierKey[inputType] &&
-          inputTypesThatNeedModifierKey[inputType].includes(event.key)
-        ) {
-          // TODO: Use modifierKey
-          if (!event.shiftKey) {
-            return
-          } else {
-            event.preventDefault()
-          }
-        }
-      }
-      const activePosition = getMiddle(activeElement)
-      const allFocusable = getFocusable()
-      const withoutActiveElement = allFocusable.filter(
-        (element) => element !== activeElement,
-      )
-      const withPosition = withoutActiveElement.map((element) => {
-        const position = getMiddle(element)
-        // Calculate angle between active element and focusable element
-        const xDistance = position.x - activePosition.x
-        const yDistance = position.y - activePosition.y
-        let angle =
-          Math.acos(yDistance / Math.sqrt(xDistance ** 2 + yDistance ** 2)) *
-          (180 / Math.PI)
-        const direction = xDistance > 0 ? 'right' : 'left'
-        if (direction === 'right') {
-          angle = 360 - angle
-        }
-        return {
-          xDistance,
-          yDistance,
-          element,
-          angle,
-          position,
-        }
-      })
-      const withDistance = withPosition.map((focusable) => {
-        const distance = activeStrategy.distanceMetric({ ...focusable, event })
-        return {
-          ...focusable,
-          distance,
-        }
-      })
-      const withWithinReach = withDistance.map((focusable) => {
-        const withinReach = activeStrategy.withinReachMetric({
-          ...focusable,
-          event,
-        })
-        return {
-          ...focusable,
-          withinReach,
-        }
-      })
-      const reversed = [...withWithinReach].reverse() // Prefer down / right if same distance
-      const sorted = reversed.sort((a, b) => {
-        return a.distance - b.distance
-      })
-      const withinReach = sorted.filter(({ withinReach }) => withinReach)
-      let nearest = withinReach.at(0)
-      if (!nearest) {
-        return
-      }
-      // const nearlySameDistance = _.filter(candidates, (candidate) => {
-      //   return candidate.distance - nearest.distance < 10
-      // })
-      // console.log('nearlySameDistance', nearlySameDistance)
-      // if (nearlySameDistance.length > 1) {
-      //   const ordered = _.orderBy(nearlySameDistance, (candidate) => {
-      //     if (event.key === 'ArrowDown') {
-      //       console.log('ArrowDown', candidate.xDistance)
-      //       return -candidate.xDistance
-      //     }
-      //     if (event.key === 'ArrowUp') {
-      //       return candidate.xDistance
-      //     }
-      //     if (event.key === 'ArrowLeft') {
-      //       return candidate.yDistance
-      //     }
-      //     if (event.key === 'ArrowRight') {
-      //       console.log('ArrowRight', candidate.yDistance)
-      //       return -candidate.yDistance
-      //     }
-      //   })
-      //   console.log('ordered', ordered)
-      //   nearest = _.first(ordered)
-      // }
-      if (nearest.element instanceof HTMLElement) {
-        nearest.element.focus()
-      }
-    },
-    { capture: true },
-  )
-}

package/src/lib/getFocusable.mts DELETED Viewed

@@ -1,13 +0,0 @@
-export const getFocusable = () => {
-  // Selectors from https://zellwk.com/blog/keyboard-focusable-elements/
-  const allFocusable = document.querySelectorAll(
-    'a[href], button, input, textarea, select, details, [tabindex]:not([tabindex^="-"])',
-  )
-  const focusable = Array.from(allFocusable).filter((element) => {
-    if ('disabled' in element && element.disabled) return false
-    if ('hidden' in element && element.hidden) return false
-    if (element.getAttribute('aria-hidden') === 'true') return false
-    return true
-  })
-  return focusable
-}

package/src/lib/positions.mts DELETED Viewed

@@ -1,12 +0,0 @@
-export const getMiddle = (element: Element) => {
-  const { x, y, width, height } = element.getBoundingClientRect()
-  return {
-    x: x + width / 2,
-    y: y + height / 2,
-  }
-}
-export const getTopLeft = (element: Element) => {
-  const { x, y } = element.getBoundingClientRect()
-  return { x, y }
-}

package/src/lib/strategies.ts DELETED Viewed

@@ -1,62 +0,0 @@
-type StrategyInput = {
-  event: KeyboardEvent
-  xDistance: number
-  yDistance: number
-  element: Element
-  angle: number
-  position: { x: number; y: number }
-}
-const withinReachMetrics = {
-  XWalk: ({ angle, event }: StrategyInput) => {
-    if (event.key === 'ArrowDown' && (angle >= 315 || angle <= 45)) {
-      return true
-    }
-    if (event.key === 'ArrowLeft' && angle > 45 && angle < 135) {
-      return true
-    }
-    if (event.key === 'ArrowUp' && angle >= 135 && angle <= 225) {
-      return true
-    }
-    if (event.key === 'ArrowRight' && angle > 225 && angle < 315) {
-      return true
-    }
-    return false
-  },
-}
-const distanceMetrics = {
-  euclidean: ({ xDistance, yDistance }: StrategyInput) => {
-    return Math.sqrt(xDistance ** 2 + yDistance ** 2)
-  },
-  manhattan: ({ xDistance, yDistance }: StrategyInput) => {
-    return Math.abs(xDistance) + Math.abs(yDistance)
-  },
-  manhattanWeighted: ({ xDistance, yDistance, event }: StrategyInput) => {
-    if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {
-      return Math.abs(xDistance) + Math.abs(yDistance) * 0.1
-    }
-    if (event.key === 'ArrowLeft' || event.key === 'ArrowRight') {
-      return Math.abs(xDistance) * 0.1 + Math.abs(yDistance)
-    }
-  },
-}
-export const strategy = {
-  XWalkEuclidean: {
-    withinReachMetric: withinReachMetrics.XWalk,
-    distanceMetric: distanceMetrics.euclidean,
-  },
-  XWalkManhattan: {
-    withinReachMetric: withinReachMetrics.XWalk,
-    distanceMetric: distanceMetrics.manhattan,
-  },
-  XWalkManhattanWeighted: {
-    withinReachMetric: withinReachMetrics.XWalk,
-    distanceMetric: distanceMetrics.manhattanWeighted,
-  },
-}

package/src/lib/sumBy.mts DELETED Viewed

@@ -1,4 +0,0 @@
-export const sumBy = <T extends unknown>(
-  arr: Array<T>,
-  func: (item: T) => number,
-) => arr.reduce((acc, item) => acc + func(item), 0)

package/tsconfig.json DELETED Viewed

@@ -1,20 +0,0 @@
-{
-  "compilerOptions": {
-    "esModuleInterop": true,
-    "skipLibCheck": true,
-    "target": "es2022",
-    "allowJs": true,
-    "resolveJsonModule": true,
-    "moduleDetection": "force",
-    "isolatedModules": true,
-    "verbatimModuleSyntax": true,
-    "strict": true,
-    "noUncheckedIndexedAccess": true,
-    "noImplicitOverride": true,
-    "module": "NodeNext",
-    "outDir": "dist",
-    "sourceMap": true,
-    "declaration": true,
-    "lib": ["es2022", "dom", "dom.iterable"]
-  }
-}

/package/dist/lib/{getFocusable.d.mts → getFocusable.d.ts} RENAMED Viewed

File without changes

/package/dist/lib/{positions.d.mts → positions.d.ts} RENAMED Viewed

File without changes

/package/dist/lib/{sumBy.d.mts → sumBy.d.ts} RENAMED Viewed

File without changes