blockly > FocusManager

FocusManager क्लास

यह एक पेज पर मौजूद सिंगलटन है. यह एक या उससे ज़्यादा IFocusableTrees में Blockly फ़ोकस को मैनेज करता है. साथ ही, इस फ़ोकस को DOM के साथ दोनों दिशाओं में सिंक करता है.

अगर कॉल करने वालों को पेज पर मौजूद कुछ Blockly कॉम्पोनेंट के लिए, इनपुट फ़ोकस को साफ़ तौर पर बदलना है, तो उन्हें इस मैनेजर में मौजूद फ़ोकस फ़ंक्शन का इस्तेमाल करना चाहिए.

मैनेजर, डीओएम से फ़ोकस इवेंट को हैंडल करने के लिए ज़िम्मेदार होता है. ये इवेंट, उपयोगकर्ताओं के पेज एलिमेंट पर क्लिक करने की वजह से हो सकते हैं. साथ ही, यह पक्का करता है कि संबंधित IFocusableNodes को साफ़ तौर पर, ऐक्टिव/पैसिव तरीके से हाइलाइट किया गया हो. ऐसा उसी तरह से किया जाता है जिस तरह से focusNode() को कॉल करके दिखाया जाता है.

हस्ताक्षर:

export declare class FocusManager 

निर्माता

निर्माता	मॉडिफ़ायर	ब्यौरा
(constructor)(addGlobalEventListener)		FocusManager क्लास का नया इंस्टेंस बनाता है

प्रॉपर्टी

प्रॉपर्टी	मॉडिफ़ायर	टाइप	ब्यौरा
ACTIVE_FOCUS_NODE_CSS_CLASS_NAME	static readonly	(डिक्लेयर नहीं किया गया)	यह सीएसएस क्लास, IFocusableNode एलिमेंट को असाइन की जाती है. फ़िलहाल, इसमें ऐक्टिव DOM और Blockly फ़ोकस होता है. इसका इस्तेमाल सीधे तौर पर कभी नहीं किया जाना चाहिए. इसके बजाय, FocusManager पर भरोसा करें. इससे यह पक्का किया जा सकता है कि नोड पर फ़ोकस चालू है. यह फ़ोकस, DOM फ़ोकस के ज़रिए अपने-आप चालू होता है या इस क्लास की ओर से उपलब्ध कराई गई अलग-अलग focus* तरीकों के ज़रिए मैन्युअल तरीके से चालू होता है. हमारा सुझाव है कि इस क्लास के नाम का इस्तेमाल करके भी क्वेरी न करें. इसके बजाय, किसी नोड को ढूंढने के लिए FocusableTreeTraverser या IFocusableTree के तरीकों का इस्तेमाल करें.
PASSIVE_FOCUS_NODE_CSS_CLASS_NAME	static readonly	(डिक्लेयर नहीं किया गया)	यह सीएसएस क्लास, IFocusableNode एलिमेंट को असाइन की जाती है. फ़िलहाल, इन एलिमेंट पर पैसिव फ़ोकस है. इसका मतलब है कि ये एलिमेंट, अपने रिलेटिव ट्री में सबसे हाल ही के नोड थे जिन पर ऐक्टिव फ़ोकस था. ACTIVE_FOCUS_NODE_CSS_CLASS_NAME देखें. अगर इनके आस-पास के ट्री को फ़ोकस करने का अनुरोध किया जाता है, तो इन पर फिर से ऐक्टिव फ़ोकस होगा. जैसे, नीचे दिए गए focusTree का इस्तेमाल करना. इस कॉन्स्टेंट का सीधे तौर पर इस्तेमाल करने से जुड़ी चेतावनियां और सीमाएं जानने के लिए, ACTIVE_FOCUS_NODE_CSS_CLASS_NAME देखें. आम तौर पर, इसका इस्तेमाल कभी नहीं करना चाहिए.

तरीके

तरीका	मॉडिफ़ायर	ब्यौरा
ephemeralFocusTaken()
focusNode(focusableNode)		यह फ़ंक्शन, डीओएम इनपुट को तय किए गए नोड पर फ़ोकस करता है और उसे ऐक्टिव तौर पर फ़ोकस किए गए नोड के तौर पर मार्क करता है. पहले फ़ोकस किए गए किसी भी नोड को अपडेट किया जाएगा. अगर वह फ़ोकस किए जा सकने वाले किसी दूसरे ट्री में है, तो उसे हल्के तौर पर हाइलाइट किया जाएगा. अगर वह उसी ट्री में है, तो उसे धुंधला किया जाएगा. **अहम जानकारी**: अगर दिए गए नोड पर फ़ोकस नहीं किया जा सकता (जैसे, इसकी canBeFocused() विधि, फ़ॉल्स वैल्यू दिखाती है), तो इसे अनदेखा कर दिया जाएगा. साथ ही, फ़ोकस की मौजूदा स्थिति में कोई बदलाव नहीं होगा. ध्यान दें कि इससे तय किए गए नोड के एलिमेंट का tabindex अपडेट हो सकता है. इससे यह पक्का किया जा सकेगा कि फ़ोकस किए जाने पर, स्क्रीन रीडर इसे सही तरीके से पढ़ सकें.
focusTree(focusableTree)		यह IFocusableTree पर फ़ोकस करता है. इसका मतलब है कि ट्री के पैसिव फ़ोकस वाले नोड पर ऐक्टिव फ़ोकस को वापस लाना या ट्री के रूट नोड पर फ़ोकस करना. ध्यान दें कि अगर तय किए गए ट्री में पहले से ही कोई फ़ोकस किया गया नोड है, तो इससे मौजूदा फ़ोकस में कोई बदलाव नहीं होगा. हालांकि, अगर उस नोड पर पैसिव फ़ोकस है, तो उसे ऐक्टिव फ़ोकस पर वापस सेट कर दिया जाएगा. अन्य नोड पर पड़ने वाले असर के बारे में जानने के लिए, getFocusedNode देखें.
getFocusedNode()		यह फ़ोकस किए गए IFocusableTree से जुड़े, फ़ोकस किए गए मौजूदा IFocusableNode को दिखाता है. अगर कोई IFocusableNode फ़ोकस नहीं किया गया है, तो यह null दिखाता है. ध्यान दें कि यह फ़ंक्शन, IFocusableTree.getFocusedNode() के साथ समानता बनाए रखेगा. इसका मतलब है कि अगर किसी ट्री पर फ़ोकस है, लेकिन उसके किसी भी नॉन-रूट चाइल्ड पर फ़ोकस नहीं है, तो यह फ़ंक्शन null वैल्यू देगा. हालांकि, getFocusedTree() ऐसा नहीं करेगा. यह भी ध्यान दें कि अगर फ़िलहाल, कुछ समय के लिए फ़ोकस कैप्चर किया गया है (जैसे, takeEphemeralFocus का इस्तेमाल करके), तो हो सकता है कि यहां लौटाए गए नोड में फ़िलहाल DOM फ़ोकस न हो.
getFocusedTree()		फ़ोकस किए गए मौजूदा IFocusableTree को दिखाता है. अगर फ़िलहाल कोई फ़ोकस नहीं किया गया है, तो शून्य दिखाता है. यह भी ध्यान दें कि अगर फ़िलहाल इफ़ेमरल फ़ोकस कैप्चर किया गया है (जैसे, takeEphemeralFocus का इस्तेमाल करके), तो हो सकता है कि यहां लौटाए गए ट्री में फ़िलहाल DOM फ़ोकस न हो.
getFocusManager()	static	यह फ़ंक्शन, पेज-ग्लोबल FocusManager दिखाता है. यह गारंटी दी जाती है कि फ़ंक्शन कॉल के दौरान, लौटाया गया इंस्टेंस नहीं बदलेगा. हालांकि, पेज लोड होने पर यह बदल सकता है.
isRegistered(tree)		यह फ़ंक्शन यह दिखाता है कि registerTree का इस्तेमाल करके, इस मैनेजर में तय किया गया ट्री पहले से रजिस्टर है या नहीं. साथ ही, यह भी दिखाता है कि unregisterTree का इस्तेमाल करके, इसे अब तक अनरजिस्टर नहीं किया गया है.
registerTree(tree, rootShouldBeAutoTabbable)		यह फ़ंक्शन, फ़ोकस को अपने-आप मैनेज करने के लिए, नया IFocusableTree रजिस्टर करता है. अगर ट्री में फ़िलहाल कोई ऐसा एलिमेंट है जिस पर DOM फ़ोकस है, तो जब तक फ़ोकस किसी नए, मॉनिटर किए जा रहे एलिमेंट/नोड पर नहीं बदल जाता, तब तक इस मैनेजर की इंटरनल स्थिति पर इसका कोई असर नहीं पड़ेगा. अगर दिया गया ट्री, इस मैनेजर में पहले से रजिस्टर है, तो यह फ़ंक्शन थ्रो करता है. isRegistered का इस्तेमाल उन मामलों में करें जहां यह पक्का नहीं किया जा सकता कि ट्री रजिस्टर किया गया है या नहीं. ट्री के रजिस्ट्रेशन को पसंद के मुताबिक बनाया जा सकता है, ताकि टैब अपने-आप रुक जाएं. इससे उपयोगकर्ता को ट्री के रूट पर टैब नेविगेट करने की सुविधा मिलती है. हालांकि, ऐसा सिर्फ़ तब किया जा सकता है, जब ट्री पर फ़ोकस न हो. अगर यह सुविधा बंद है, तो ट्री के रूट पर पहली बार फ़ोकस किए जाने पर, वह अपने-आप फ़ोकस किया जा सकेगा. हालांकि, उस पर टैब नहीं किया जा सकेगा. ऐसा किसी भी ऐसे नोड पर फ़ोकस किए जाने पर होगा जिस पर फ़ोकस किया जा सकता है.
takeEphemeralFocus(focusableElement)		यह फ़ंक्शन, किसी एलिमेंट पर फ़ोकस को कुछ समय के लिए कैप्चर करता है. ऐसा तब तक होता है, जब तक कि लौटाए गए लैम्डा को कॉल नहीं किया जाता. यह सुविधा, खास तौर पर डायलॉग जैसे कुछ समय के लिए दिखने वाले यूज़र इंटरफ़ेस (यूआई) फ़्लो के लिए मददगार साबित हो सकती है. अहम जानकारी: लौटाए गए लैम्डा को कॉल करना *ज़रूरी* है. ऐसा न करने पर, पेज पर कहीं भी अपने-आप फ़ोकस होने की सुविधा काम नहीं करेगी. हमारा सुझाव है कि आप लैंबडा कॉल को उससे जुड़े यूज़र इंटरफ़ेस (यूआई) के बंद होने से जोड़ें. इससे, अगर इनपुट को मैन्युअल तरीके से, कुछ समय के लिए दिखने वाले यूआई से बाहर के किसी एलिमेंट में बदल दिया जाता है, तो यूआई बंद हो जाना चाहिए और अपने-आप इनपुट वापस आ जाना चाहिए. ध्यान दें कि इस लैम्डा को सिर्फ़ एक बार कॉल किया जाना चाहिए. इसके बाद किए जाने वाले कॉल से गड़बड़ी होगी. ध्यान दें कि मैनेजर, डोम इनपुट सिग्नल को ट्रैक करता रहेगा. भले ही, कुछ समय के लिए फ़ोकस चालू हो. हालांकि, जब तक लौटाए गए लैम्डा को कॉल नहीं किया जाता, तब तक नोड की स्थिति में कोई बदलाव नहीं होगा. इसके अलावा, किसी भी समय सिर्फ़ एक इफ़ेमरल फ़ोकस कॉन्टेक्स्ट चालू किया जा सकता है. एक साथ एक से ज़्यादा इफ़ेमरल फ़ोकस कॉन्टेक्स्ट चालू करने पर, गड़बड़ी का मैसेज दिखेगा.
unregisterTree(tree)		यह फ़ंक्शन, IFocusableTree को फ़ोकस अपने-आप मैनेज होने की सुविधा से हटाता है. अगर ट्री में पहले से कोई नोड फ़ोकस किया गया था, तो उसका हाइलाइट हट जाएगा. यह फ़ंक्शन, DOM फ़ोकस को नहीं बदलता है. अगर दिया गया ट्री, इस मैनेजर में रजिस्टर नहीं है, तो यह फ़ंक्शन गड़बड़ी दिखाता है. अगर ट्री को टैब को अपने-आप मैनेज करने की सुविधा के साथ रजिस्टर किया गया था, तो यह फ़ंक्शन ट्री के रूट एलिमेंट के tabindex को रीसेट कर देगा.