2024-07-07 09:32:30 -06:00
|
|
|
import {isDocumentFragmentOrElementNode} from '../utils/dom.ts';
|
2023-09-07 02:00:20 -06:00
|
|
|
|
2024-08-10 03:46:48 -06:00
|
|
|
type DirElement = HTMLInputElement | HTMLTextAreaElement;
|
|
|
|
|
2024-02-07 19:42:18 -07:00
|
|
|
// for performance considerations, it only uses performant syntax
|
2024-08-10 03:46:48 -06:00
|
|
|
function attachDirAuto(el: DirElement) {
|
2023-09-07 02:00:20 -06:00
|
|
|
if (el.type !== 'hidden' &&
|
|
|
|
el.type !== 'checkbox' &&
|
|
|
|
el.type !== 'radio' &&
|
|
|
|
el.type !== 'range' &&
|
|
|
|
el.type !== 'color') {
|
|
|
|
el.dir = 'auto';
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2024-11-21 06:57:42 -07:00
|
|
|
export function initDirAuto(): void {
|
2023-09-07 02:00:20 -06:00
|
|
|
const observer = new MutationObserver((mutationList) => {
|
|
|
|
const len = mutationList.length;
|
|
|
|
for (let i = 0; i < len; i++) {
|
|
|
|
const mutation = mutationList[i];
|
|
|
|
const len = mutation.addedNodes.length;
|
|
|
|
for (let i = 0; i < len; i++) {
|
2024-08-10 03:46:48 -06:00
|
|
|
const addedNode = mutation.addedNodes[i] as HTMLElement;
|
2024-02-07 19:42:18 -07:00
|
|
|
if (!isDocumentFragmentOrElementNode(addedNode)) continue;
|
2024-08-10 03:46:48 -06:00
|
|
|
if (addedNode.nodeName === 'INPUT' || addedNode.nodeName === 'TEXTAREA') {
|
|
|
|
attachDirAuto(addedNode as DirElement);
|
|
|
|
}
|
|
|
|
const children = addedNode.querySelectorAll<DirElement>('input, textarea');
|
2023-09-07 02:00:20 -06:00
|
|
|
const len = children.length;
|
|
|
|
for (let childIdx = 0; childIdx < len; childIdx++) {
|
|
|
|
attachDirAuto(children[childIdx]);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
});
|
|
|
|
|
2024-08-10 03:46:48 -06:00
|
|
|
const docNodes = document.querySelectorAll<DirElement>('input, textarea');
|
2023-09-07 02:00:20 -06:00
|
|
|
const len = docNodes.length;
|
|
|
|
for (let i = 0; i < len; i++) {
|
|
|
|
attachDirAuto(docNodes[i]);
|
|
|
|
}
|
|
|
|
|
|
|
|
observer.observe(document, {subtree: true, childList: true});
|
|
|
|
}
|