Necromancing।
আমার কাছে 0-ট্যাবআইডেক্সের একটি গুচ্ছ রয়েছে, যা আমি কীবোর্ডের সাহায্যে নেভিগেট করতে চেয়েছিলাম।
যেহেতু, কেবলমাত্র উপাদানগুলির অর্ডার ম্যাটার করে, আমি এটি ব্যবহার করে করেছিdocument.createTreeWalker
সুতরাং প্রথমে আপনি ফিল্টারটি তৈরি করুন (আপনি কেবল [দৃশ্যমান] উপাদানগুলি চান, যার একটি NUMERICAL মান সহ "ট্যাব ইন্ডেক্স" বৈশিষ্ট্য রয়েছে।
তারপরে আপনি রুট নোড সেট করেছেন, এর বাইরে আপনি অনুসন্ধান করতে চান না। আমার ক্ষেত্রে, this.m_treeএকটি আল-উপাদানটি রয়েছে যা একটি টোগেবল গাছ রয়েছে। পরিবর্তে যদি আপনি পুরো দস্তাবেজটি চান তবে কেবল এটির this.m_treeসাথে প্রতিস্থাপন করুন document.documentElement।
তারপরে আপনি বর্তমান নোডটিকে বর্তমান সক্রিয় উপাদানটিতে সেট করেছেন:
ni.currentNode = el;
তারপর আপনি ফিরে ni.nextNode()বা ni.previousNode()।
দ্রষ্টব্য:
যদি আপনার ট্যাবইন্ডিস থাকে তবে এটি সঠিক ক্রমে ট্যাবগুলি ফিরিয়ে দেবে না! = 0 এবং উপাদান ক্রমটি ট্যাবআইন্ডেক্স ক্রম নয়। ট্যাবআইন্ডেক্স = 0 এর ক্ষেত্রে, ট্যাবর্ডারটি সর্বদা উপাদান ক্রম হয়, এই কারণেই এটি কাজ করে (সেই ক্ষেত্রে)।
protected createFilter(fn?: (node: Node) => number): NodeFilter
{
function acceptNode(node: Node): number
{
return NodeFilter.FILTER_ACCEPT;
}
if (fn == null)
fn = acceptNode;
const safeFilter: NodeFilter = <NodeFilter><any>fn;
(<any>safeFilter).acceptNode = fn;
return safeFilter;
}
protected createTabbingFilter(): NodeFilter
{
// Accept all currently filtered elements.
function acceptNode(node: Node): number
{
if (!node)
return NodeFilter.FILTER_REJECT;
if (node.nodeType !== Node.ELEMENT_NODE)
return NodeFilter.FILTER_REJECT;
if (window.getComputedStyle(<Element>node).display === "none")
return NodeFilter.FILTER_REJECT;
// "tabIndex": "0"
if (!(<Element>node).hasAttribute("tabIndex"))
return NodeFilter.FILTER_SKIP;
let tabIndex = parseInt((<Element>node).getAttribute("tabIndex"), 10);
if (!tabIndex || isNaN(tabIndex) || !isFinite(tabIndex))
return NodeFilter.FILTER_SKIP;
// if ((<Element>node).tagName !== "LI") return NodeFilter.FILTER_SKIP;
return NodeFilter.FILTER_ACCEPT;
}
return this.createFilter(acceptNode);
}
protected getNextTab(el: HTMLElement): HTMLElement
{
let currentNode: Node;
// https://developer.mozilla.org/en-US/docs/Web/API/Document/createNodeIterator
// https://developer.mozilla.org/en-US/docs/Web/API/Document/createTreeWalker
// let ni = document.createNodeIterator(el, NodeFilter.SHOW_ELEMENT);
// let ni = document.createTreeWalker(this.m_tree, NodeFilter.SHOW_ELEMENT);
let ni = document.createTreeWalker(this.m_tree, NodeFilter.SHOW_ELEMENT, this.createTabbingFilter(), false);
ni.currentNode = el;
while (currentNode = ni.nextNode())
{
return <HTMLElement>currentNode;
}
return el;
}
protected getPreviousTab(el: HTMLElement): HTMLElement
{
let currentNode: Node;
let ni = document.createTreeWalker(this.m_tree, NodeFilter.SHOW_ELEMENT, this.createTabbingFilter(), false);
ni.currentNode = el;
while (currentNode = ni.previousNode())
{
return <HTMLElement>currentNode;
}
return el;
}
নোট করুন যে সময় লুপ
while (currentNode = ni.nextNode())
{
return <HTMLElement>currentNode; // everything is already filtered down to what we need here
}
কেবলমাত্র যদি সেখানে আপনি চান তবেই আপনার অতিরিক্ত মানদণ্ড থাকে যা আপনি ক্রিয়েটরিওয়ালকারকে দেওয়া ফিল্টারে ফিল্টার করতে পারবেন না।
উল্লেখ্য এই টাইপ করা বিষয় হয়, তাহলে আপনি কোলন (:) পিছনে সব টোকেন মুছে ফেলার জন্য প্রয়োজন, কোণ-বন্ধনীর মধ্যে (<>), যেমন <Element>বা :(node: Node) => numberবৈধ জাভাস্ক্রিপ্ট জন্য।
এখানে পরিষেবা হিসাবে, পরিবহিত জেএস:
"use strict";
function createFilter(fn) {
function acceptNode(node) {
return NodeFilter.FILTER_ACCEPT;
}
if (fn == null)
fn = acceptNode;
const safeFilter = fn;
safeFilter.acceptNode = fn;
return safeFilter;
}
function createTabbingFilter() {
function acceptNode(node) {
if (!node)
return NodeFilter.FILTER_REJECT;
if (node.nodeType !== Node.ELEMENT_NODE)
return NodeFilter.FILTER_REJECT;
if (window.getComputedStyle(node).display === "none")
return NodeFilter.FILTER_REJECT;
if (!node.hasAttribute("tabIndex"))
return NodeFilter.FILTER_SKIP;
let tabIndex = parseInt(node.getAttribute("tabIndex"), 10);
if (!tabIndex || isNaN(tabIndex) || !isFinite(tabIndex))
return NodeFilter.FILTER_SKIP;
return NodeFilter.FILTER_ACCEPT;
}
return createFilter(acceptNode);
}
function getNextTab(el) {
let currentNode;
let ni = document.createTreeWalker(document.documentElement, NodeFilter.SHOW_ELEMENT, createTabbingFilter(), false);
ni.currentNode = el;
while (currentNode = ni.nextNode()) {
return currentNode;
}
return el;
}
function getPreviousTab(el) {
let currentNode;
let ni = document.createTreeWalker(document.documentElement, NodeFilter.SHOW_ELEMENT, createTabbingFilter(), false);
ni.currentNode = el;
while (currentNode = ni.previousNode()) {
return currentNode;
}
return el;
}
currentElementId = "";?