एक्सटेंशन लिखना

प्रत्येक एक्सटेंशन के लिए स्क्रिप्ट को कमेंट विजेट द्वारा पहले सेट की गई कमेंट्स को फ़ेच करने और UI रेंडर करने से पहले फ़ेच और इनवोक किया जाता है।

प्रारंभिक लोड पर, निम्नलिखित डेटा एक्सटेंशन ऑब्जेक्ट पर टैग किया जाएगा:

• config - config ऑब्जेक्ट का एक संदर्भ।
• translations - translations ऑब्जेक्ट का एक संदर्भ।
• commentsById - आईडी के अनुसार सभी कमेंट्स का एक संदर्भ।
• root - रूट DOM नोड का एक संदर्भ।

एक्सटेंशन को वांछित फ़ंक्शंस को ओवरराइड करना चाहिए, जिन्हें कमेंट विजेट उचित समय पर इनवोक करेगा।

सबसे छोटा संभव एक्सटेंशन इस प्रकार होगा:

एक सरल एक्सटेंशन

Copy Run

1

2(function () {

3 const extension = FastCommentsUI.extensions.find((extension) => {

4 return extension.id === 'my-extension';

5 });

6})();

7

इस उदाहरण के लिए, इसे my-extension.js के रूप में सेव करें, और इसे https://example.com/my-extension.min.js पर उपलब्ध कराएं।

यह एक्सटेंशन कुछ नहीं करता, सिवाय इसके कि लोड होने पर यह कोर कमेंट लाइब्रेरी द्वारा बनाए गए एक्सटेंशन ऑब्जेक्ट को फ़ेच करता है।

यह Extension ऑब्जेक्ट एक सिंगलटन है और किसी अन्य एक्सटेंशन के साथ साझा नहीं किया जाता।

अगला, अपना एक्सटेंशन लोड करने के लिए, हमें कमेंट विजेट को इसके बारे में बताना होगा। उदाहरण के लिए:

कस्टम एक्सटेंशन का उपयोग करना

Copy Run

1

2<script async src="https://cdn.fastcomments.com/js/embed-v2-async.min.js"></script>

3<div id="fastcomments-widget"></div>

4<script>

5window.fcConfigs = [{

6 "tenantId": "demo",

7 "extensions": [

8 {

9 "id": "my-extension",

10 "path": "https://example.com/my-extension.min.js"

11 }

12 ]

13}];

14</script>

15

कार्यात्मक उदाहरणों के लिए, अगला अनुभाग देखें।

एक्सटेंशन ऑब्जेक्ट निम्नलिखित परिभाषा से मिलकर बना है:

एक्सटेंशन ऑब्जेक्ट JSDoc

Copy Run

1

2/**

3 * FastCommentsUI एक्सटेंशन ऑब्जेक्ट। कुछ कंपोनेंट्स को lazy-load करने के लिए उपयोग किया जाता है। उदाहरण के लिए, रिव्यू सिस्टम सभी

4 * ग्राहकों द्वारा उपयोग नहीं किया जाता, इसलिए हम उस एक्सटेंशन को केवल तब लोड करते हैं जब हमें उसकी आवश्यकता होती है।

5 *

6 * @typedef {Object} FastCommentsUIExtension

7 * @property {string} id

8 * @property {Element} scriptNode

9 * @property {Element} root - विजेट का रूट DOM नोड।

10 * @property {string} [css]

11 * @property {Object} config - FastComments कॉन्फ़िग ऑब्जेक्ट।

12 * @property {Object} commentsById - id के अनुसार सभी कमेंट्स वाले ऑब्जेक्ट का संदर्भ, जो अपडेट रखा जाता है।

13 * @property {Object} translations - सभी अनुवादों का संदर्भ।

14 * @property {Function} reRenderComment - एक फ़ंक्शन का संदर्भ जिसे किसी कमेंट को फिर से रेंडर करने के लिए कॉल किया जा सकता है।

15 * @property {Function} removeCommentAndReRender - एक फ़ंक्शन का संदर्भ जिसे किसी कमेंट को मेमोरी से हटाने और DOM के उपयुक्त भाग को फिर से रेंडर करने के लिए कॉल किया जा सकता है।

16 * @property {Function} newBroadcastId - एक फ़ंक्शन का संदर्भ जिसे नया broadcast id बनाने और उसे अनदेखा करने के लिए स्थानीय broadcast ids की सूची में जोड़ने के लिए कॉल किया जा सकता है।

17 * @property {FastCommentsUIExtensionSetupEventHandlers} [setupEventHandlers]

18 * @property {FastCommentsUIExtensionPrepareCommentForSavingCallback} [prepareCommentForSaving] - पोस्ट होने वाले कमेंट के साथ कॉल किया जाता है। सबमिट रद्द करने के लिए false लौटाएं (उदाहरण के लिए जब जुड़ा पोल अधूरा हो)।

19 * @property {FastCommentsUIExtensionNewCommentCallback} [newComment]

20 * @property {FastCommentsUIExtensionReplyAreaFilter} [replyAreaFilter] - कमेंट एरिया के लिए HTML फ़िल्टर।

21 * @property {FastCommentsUIExtensionWidgetFilter} [widgetFilter] - रेंडर पर पूरे विजेट के लिए HTML फ़िल्टर।

22 * @property {FastCommentsUIExtensionCommentTopFilter} [commentFilter] - रेंडर से पहले प्रत्येक कमेंट के लिए HTML फ़िल्टर।

23 * @property {FastCommentsUIExtensionReplyAreaFilter} [commentMenuFilter] - रेंडर से पहले प्रत्येक कमेंट मेनू के लिए HTML फ़िल्टर।

24 * @property {FastCommentsUIExtensionMenuFilter} [menuFilter] - रेंडर पर पूरे विजेट के लिए HTML फ़िल्टर।

25 * @property {FastCommentsUIExtensionReplyAreaTop} [replyAreaTop] - (LEGACY) रिप्लाई एरिया के शीर्ष पर जोड़ने के लिए HTML लौटाएं।

26 * @property {FastCommentsUIExtensionWidgetTopCallback} [widgetTop] - (LEGACY) विजेट के शीर्ष पर जोड़ने के लिए HTML लौटाएं।

27 * @property {FastCommentsUIExtensionCommentTopCallback} [commentTop] - (LEGACY) कमेंट एलिमेंट के शीर्ष पर जोड़ने के लिए HTML लौटाएं।

28 * @property {FastCommentsUIExtensionCommentBottomCallback} [commentBottom] - (LEGACY) कमेंट एलिमेंट के निचले भाग पर जोड़ने के लिए HTML लौटाएं।

29 * @property {FastCommentsUIExtensionCommentBottomCallback} [commentContentBottom] - कमेंट टेक्स्ट के बाद, कमेंट कंटेंट एलिमेंट के अंदर जोड़ने के लिए HTML लौटाएं (पोल्स द्वारा उपयोग किया जाता है)।

30 * @property {Function} [replyAreaInputBottom] - कमेंट इनपुट फ़्रेम के अंदर, टेक्स्ट इनपुट के नीचे जोड़ने के लिए HTML लौटाएं (इन-प्लेस पोल एडिटर के लिए पोल्स द्वारा उपयोग किया जाता है)। पैरेंट कमेंट id प्राप्त करता है, या रूट रिप्लाई बॉक्स के लिए null।

31 * @property {Function} [onPollUpdate] - पेज पर किसी पोल के वोट काउंट बदलने पर लाइव इवेंट के साथ कॉल किया जाता है।

32 * @property {Function} isSiteAdmin - लौटाता है कि दर्शक टेनेंट का एडमिन या मॉडरेटर है या नहीं। पहली फ़ेच के बाद ज्ञात होता है।

33 * @property {FastCommentsUIExtensionMenuBottomCallback} [menuBottom] - (LEGACY) प्रत्येक कमेंट के मेनू एलिमेंट के निचले भाग पर जोड़ने के लिए HTML लौटाएं।

34 * @property {FastCommentsUIExtensionRenderCallback} [onRender]

35 * @property {FastCommentsUIExtensionConnectionStatusCallback} [onLiveConnectionStatusUpdate]

36 * @property {FastCommentsUIExtensionInitialRenderCallback} [onInitialRenderComplete]

37 * @property {FastCommentsUIExtensionPresenceUpdateCallback} [onPresenceUpdate]

38 */

39

40/**

41 * @callback FastCommentsUIExtensionSetupEventHandlers

42 * @param {Element} element - रूट एलिमेंट।

43 * @param {Object.<string, Function>} clickListeners - क्लिक के लिए इवेंट हैंडलर, क्लास नाम के अनुसार, जिन्हें संदर्भ द्वारा संशोधित किया जा सकता है।

44 * @returns void

45 */

46

47/**

48 * @callback FastCommentsUIExtensionWidgetTopCallback

49 * @param {Object} moduleData

50 * @returns {string}

51 */

52

53/**

54 * @callback FastCommentsUIExtensionWidgetFilter

55 * @param {Object} moduleData

56 * @param {Object} html

57 * @returns {string}

58 */

59

60/**

61 * @callback FastCommentsUIExtensionCommentTopCallback

62 * @param {Object} comment

63 * @returns {string}

64 */

65

66/**

67 * @callback FastCommentsUIExtensionCommentTopFilter

68 * @param {Object} comment

69 * @param {string} html

70 * @returns {string}

71 */

72

73/**

74 * @callback FastCommentsUIExtensionCommentBottomCallback

75 * @param {Object} comment

76 * @returns {string}

77 */

78

79/**

80 * @callback FastCommentsUIExtensionMenuBottomCallback

81 * @param {Object} comment

82 * @returns {string}

83 */

84

85/**

86 * @callback FastCommentsUIExtensionMenuFilter

87 * @param {Object} comment

88 * @param {string} html

89 * @returns {string}

90 */

91

92/**

93 * @callback FastCommentsUIExtensionRenderCallback

94 * @returns {string}

95 */

96

97/**

98 * @callback FastCommentsUIExtensionConnectionStatusCallback

99 * @param {boolean} isConnected

100 * @returns {void}

101 */

102

103/**

104 * @callback FastCommentsUIExtensionInitialRenderCallback

105 * @returns {void}

106 */

107

108/**

109 * @callback FastCommentsUIExtensionReplyAreaTop

110 * @param {Object|null} currentUser

111 * @param {boolean} isSaving

112 * @param {boolean} isReplyOpen

113 * @param {string|null} parentId

114 * @returns {string}

115 */

116

117/**

118 * @callback FastCommentsUIExtensionReplyAreaFilter

119 * @param {Object|null} currentUser

120 * @param {boolean} isSaving

121 * @param {boolean} isReplyOpen

122 * @param {string|null} parentId

123 * @param {string|null} html

124 * @returns {string}

125 */

126

127/**

128 * @callback FastCommentsUIExtensionPrepareCommentForSavingCallback

129 * @param {Object} comment

130 * @param {string} parentId

131 */

132

133/**

134 * @callback FastCommentsUIExtensionNewCommentCallback

135 * @param {Object} comment

136 */

137

138/**

139 * @callback FastCommentsUIExtensionPresenceUpdateCallback

140 * @param {Object} update

141 */

142

Extension के साथ इंटरैक्ट करना सरल है, क्योंकि हम केवल उन फ़ंक्शनों के संदर्भ परिभाषित करते हैं जिन्हें हम इनवोक होना चाहते हैं।

पिछले उदाहरण को आगे बढ़ाते हुए, मान लीजिए हम प्रत्येक कमेंट के शीर्ष पर HTML जोड़ना चाहते हैं:

एक सरल एक्सटेंशन - जारी

Copy Run

1

2(function () {

3 const extension = FastCommentsUI.extensions.find((extension) => {

4 return extension.id === 'my-extension';

5 });

6

7 extension.commentFilter = function(comment, html) {

8 return `<h3>The user's name is ${comment.commenterName}!</h3>` + html;

9 }

10})();

11

जब भी आप इस तरह HTML रिटर्न करते हैं, यह एक dom-diffing एल्गोरिद्म के माध्यम से UI में मर्ज हो जाएगा।

किसी कमेंट का पुनः रेंडर मैन्युअली ट्रिगर करना

हम प्रारंभिक पेज लोड का इंतज़ार कर सकते हैं और reRenderComment को इनवोक करके किसी कमेंट को मैन्युअली पुनः रेंडर कर सकते हैं:

कमेंट का पुनः रेंडर

Copy Run

1

2(function () {

3 const extension = FastCommentsUI.extensions.find((extension) => {

4 return extension.id === 'my-extension';

5 });

6

7 let renderCount = 0;

8

9 extension.commentFilter = function(comment, html) {

10 renderCount++;

11 return `<h3>The render count is ${renderCount}!</h3>` + html;

12 }

13

14 extension.onInitialRenderComplete = function() {

15 setInterval(function() {

16 extension.reRenderComment(extension.commentsById[Object.keys(extension.commentsById)[0]], function renderDone() {

17 console.log('Comment re-render done.');

18 });

19 }, 2000); // timeout not required, just an example.

20 }

21})();

22