|
import { isAnySegmentPart } from '../../../builders/date-field/_internal/helpers.js'; |
|
import { isHTMLElement, kbd } from '../index.js'; |
|
|
|
|
|
|
|
|
|
|
|
|
|
export function handleSegmentNavigation(e, fieldId) { |
|
const currentTarget = e.currentTarget; |
|
if (!isHTMLElement(currentTarget)) |
|
return; |
|
const { prev, next } = getPrevNextSegments(currentTarget, fieldId); |
|
if (e.key === kbd.ARROW_LEFT) { |
|
if (!prev) |
|
return; |
|
prev.focus(); |
|
} |
|
else if (e.key === kbd.ARROW_RIGHT) { |
|
if (!next) |
|
return; |
|
next.focus(); |
|
} |
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
export function getNextSegment(node, segments) { |
|
const index = segments.indexOf(node); |
|
if (index === segments.length - 1 || index === -1) |
|
return null; |
|
const nextIndex = index + 1; |
|
const nextSegment = segments[nextIndex]; |
|
return nextSegment; |
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
export function getPrevSegment(node, segments) { |
|
const index = segments.indexOf(node); |
|
if (index === 0 || index === -1) |
|
return null; |
|
const prevIndex = index - 1; |
|
const prevSegment = segments[prevIndex]; |
|
return prevSegment; |
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
export function getPrevNextSegments(node, fieldId) { |
|
const segments = getSegments(fieldId); |
|
if (!segments.length) { |
|
return { |
|
next: null, |
|
prev: null, |
|
}; |
|
} |
|
return { |
|
next: getNextSegment(node, segments), |
|
prev: getPrevSegment(node, segments), |
|
}; |
|
} |
|
|
|
|
|
|
|
|
|
export function moveToNextSegment(e, fieldId) { |
|
const node = e.currentTarget; |
|
if (!isHTMLElement(node)) |
|
return; |
|
const { next } = getPrevNextSegments(node, fieldId); |
|
if (!next) |
|
return; |
|
next.focus(); |
|
} |
|
export function isSegmentNavigationKey(key) { |
|
if (key === kbd.ARROW_RIGHT || key === kbd.ARROW_LEFT) |
|
return true; |
|
return false; |
|
} |
|
|
|
|
|
|
|
export function getSegments(id) { |
|
const inputContainer = document.getElementById(id); |
|
if (!isHTMLElement(inputContainer)) |
|
return []; |
|
const segments = Array.from(inputContainer.querySelectorAll('[data-segment]')).filter((el) => { |
|
if (!isHTMLElement(el)) |
|
return false; |
|
const segment = el.dataset.segment; |
|
if (segment === 'trigger') |
|
return true; |
|
if (!isAnySegmentPart(segment) || segment === 'literal') |
|
return false; |
|
return true; |
|
}); |
|
return segments; |
|
} |
|
|
|
|
|
|
|
export function getFirstSegment(id) { |
|
const segments = getSegments(id); |
|
return segments[0]; |
|
} |
|
|