Δημιουργία επεκτάσεων

Το script για κάθε επέκταση ανακτάται και εκτελείται πριν το widget σχολίων αρχίσει να ανακτά το πρώτο σετ σχολίων και να αποδίδει το UI.

Κατά την αρχική φόρτωση, τα ακόλουθα δεδομένα θα προστεθούν στο αντικείμενο της επέκτασης:

• config - Αναφορά στο αντικείμενο config.
• translations - Αναφορά στο αντικείμενο translations.
• commentsById - Αναφορά σε όλα τα σχόλια ανά id.
• root - Αναφορά στον ριζικό κόμβο DOM.

Οι επεκτάσεις θα πρέπει να αντικαταστήσουν τις επιθυμητές συναρτήσεις, τις οποίες το widget σχολίων θα καλεί στις κατάλληλες στιγμές.

Η μικρότερη δυνατή επέκταση θα ήταν:

Μια Απλή Επέκταση

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 αντικείμενο είναι ένα singleton και δεν μοιράζεται με καμία άλλη επέκταση.

Στη συνέχεια, για να φορτώσουμε την επέκτασή μας, πρέπει να ενημερώσουμε το widget σχολίων για αυτήν. Για παράδειγμα:

Χρήση Προσαρμοσμένης Επέκτασης

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

Για λειτουργικά παραδείγματα, δείτε την επόμενη ενότητα.

Το αντικείμενο extension αποτελείται από τον ακόλουθο ορισμό:

JSDoc του αντικειμένου Extension

Copy Run

1

2/**

3 * Το αντικείμενο extension του FastCommentsUI. Χρησιμοποιείται για lazy-loading ορισμένων components. Για παράδειγμα, το σύστημα κριτικών δεν

4 * χρησιμοποιείται από όλους τους πελάτες, οπότε φορτώνουμε αυτό το extension μόνο όταν το θέλουμε.

5 *

6 * @typedef {Object} FastCommentsUIExtension

7 * @property {string} id

8 * @property {Element} scriptNode

9 * @property {Element} root - Ο ριζικός κόμβος DOM του widget.

10 * @property {string} [css]

11 * @property {Object} config - Το αντικείμενο 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 {Function} [withSessionId] - Καλείται με ένα URL αιτήματος και ένα callback. Καλεί το callback με το URL plus το session id του θεατή προσαρτημένο όταν τα third-party cookies είναι μπλοκαρισμένα (η ίδια διαδρομή που χρησιμοποιούν τα αιτήματα σχολίων και ψήφων), ή το URL αμετάβλητο διαφορετικά. Όταν δεν είναι διαθέσιμο session id με αυτόν τον τρόπο, προσαρτά το τελευταίο ανώνυμο session id που δόθηκε στο rememberAnonSessionId, αν υπάρχει. Δεν χρησιμοποιείται για SSO.

18 * @property {Function} [rememberAnonSessionId] - Καλείται με το anonSessionId που επέστρεψε μια απάντηση. Ο server επιστρέφει ένα μόνο σε επισκέπτη του οποίου το αίτημα δεν είχε session cookie, και ποτέ για συνδεδεμένη συνεδρία. Διατηρείται στο localStorage (ή στη μνήμη όταν ο χώρος αποθήκευσης δεν είναι διαθέσιμος) ώστε το withSessionId να το στέλνει σε επόμενα αιτήματα και ο επισκέπτης να διατηρεί μία ταυτότητα.

19 * @property {FastCommentsUIExtensionSetupEventHandlers} [setupEventHandlers]

20 * @property {FastCommentsUIExtensionPrepareCommentForSavingCallback} [prepareCommentForSaving] - Καλείται με το σχόλιο που πρόκειται να δημοσιευτεί. Επιστρέψτε false για να ακυρωθεί η υποβολή (για παράδειγμα όταν μια συνημμένη ψηφοφορία είναι ελλιπής).

21 * @property {FastCommentsUIExtensionNewCommentCallback} [newComment]

22 * @property {FastCommentsUIExtensionReplyAreaFilter} [replyAreaFilter] - Φιλτράρει το HTML για την περιοχή σχολίων.

23 * @property {FastCommentsUIExtensionWidgetFilter} [widgetFilter] - Φιλτράρει το HTML για ολόκληρο το widget κατά την απόδοση.

24 * @property {FastCommentsUIExtensionCommentTopFilter} [commentFilter] - Φιλτράρει το HTML για κάθε σχόλιο πριν την απόδοση.

25 * @property {FastCommentsUIExtensionReplyAreaFilter} [commentMenuFilter] - Φιλτράρει το HTML για το μενού κάθε σχολίου πριν την απόδοση.

26 * @property {FastCommentsUIExtensionMenuFilter} [menuFilter] - Φιλτράρει το HTML για ολόκληρο το widget κατά την απόδοση.

27 * @property {FastCommentsUIExtensionReplyAreaTop} [replyAreaTop] - (LEGACY) Επιστρέφει HTML για προσθήκη στην κορυφή της περιοχής απάντησης.

28 * @property {FastCommentsUIExtensionWidgetTopCallback} [widgetTop] - (LEGACY) Επιστρέφει HTML για προσθήκη στην κορυφή του widget.

29 * @property {FastCommentsUIExtensionCommentTopCallback} [commentTop] - (LEGACY) Επιστρέφει HTML για προσθήκη στην κορυφή του στοιχείου σχολίου.

30 * @property {FastCommentsUIExtensionCommentBottomCallback} [commentBottom] - (LEGACY) Επιστρέφει HTML για προσθήκη στο τέλος του στοιχείου σχολίου.

31 * @property {FastCommentsUIExtensionCommentBottomCallback} [commentContentBottom] - Επιστρέφει HTML για προσθήκη μετά το κείμενο του σχολίου, μέσα στο στοιχείο περιεχομένου του σχολίου (χρησιμοποιείται από ψηφοφορίες).

32 * @property {Function} [replyAreaInputBottom] - Επιστρέφει HTML για προσθήκη μέσα στο πλαίσιο εισαγωγής σχολίου, κάτω από το πεδίο κειμένου (χρησιμοποιείται από ψηφοφορίες για τον επεξεργαστή ψηφοφορίας επί τόπου). Λαμβάνει το id του γονικού σχολίου, ή null για το ριζικό πλαίσιο απάντησης.

33 * @property {Function} [onPollUpdate] - Καλείται με το live event όταν αλλάζουν οι μετρήσεις ψήφων μιας ψηφοφορίας στη σελίδα.

34 * @property {Function} isSiteAdmin - Επιστρέφει αν ο θεατής είναι διαχειριστής ή συντονιστής του tenant. Γίνεται γνωστό μετά το πρώτο fetch.

35 * @property {FastCommentsUIExtensionMenuBottomCallback} [menuBottom] - (LEGACY) Επιστρέφει HTML για προσθήκη στο τέλος του στοιχείου μενού για κάθε σχόλιο.

36 * @property {FastCommentsUIExtensionRenderCallback} [onRender]

37 * @property {FastCommentsUIExtensionConnectionStatusCallback} [onLiveConnectionStatusUpdate]

38 * @property {FastCommentsUIExtensionInitialRenderCallback} [onInitialRenderComplete]

39 * @property {FastCommentsUIExtensionPresenceUpdateCallback} [onPresenceUpdate]

40 */

41

42/**

43 * @callback FastCommentsUIExtensionSetupEventHandlers

44 * @param {Element} element - Το ριζικό στοιχείο.

45 * @param {Object.<string, Function>} clickListeners - Οι χειριστές συμβάντων για κλικ, ανά όνομα κλάσης, οι οποίοι μπορούν να τροποποιηθούν κατ' αναφορά.

46 * @returns void

47 */

48

49/**

50 * @callback FastCommentsUIExtensionWidgetTopCallback

51 * @param {Object} moduleData

52 * @returns {string}

53 */

54

55/**

56 * @callback FastCommentsUIExtensionWidgetFilter

57 * @param {Object} moduleData

58 * @param {Object} html

59 * @returns {string}

60 */

61

62/**

63 * @callback FastCommentsUIExtensionCommentTopCallback

64 * @param {Object} comment

65 * @returns {string}

66 */

67

68/**

69 * @callback FastCommentsUIExtensionCommentTopFilter

70 * @param {Object} comment

71 * @param {string} html

72 * @returns {string}

73 */

74

75/**

76 * @callback FastCommentsUIExtensionCommentBottomCallback

77 * @param {Object} comment

78 * @returns {string}

79 */

80

81/**

82 * @callback FastCommentsUIExtensionMenuBottomCallback

83 * @param {Object} comment

84 * @returns {string}

85 */

86

87/**

88 * @callback FastCommentsUIExtensionMenuFilter

89 * @param {Object} comment

90 * @param {string} html

91 * @returns {string}

92 */

93

94/**

95 * @callback FastCommentsUIExtensionRenderCallback

96 * @returns {string}

97 */

98

99/**

100 * @callback FastCommentsUIExtensionConnectionStatusCallback

101 * @param {boolean} isConnected

102 * @returns {void}

103 */

104

105/**

106 * @callback FastCommentsUIExtensionInitialRenderCallback

107 * @returns {void}

108 */

109

110/**

111 * @callback FastCommentsUIExtensionReplyAreaTop

112 * @param {Object|null} currentUser

113 * @param {boolean} isSaving

114 * @param {boolean} isReplyOpen

115 * @param {string|null} parentId

116 * @returns {string}

117 */

118

119/**

120 * @callback FastCommentsUIExtensionReplyAreaFilter

121 * @param {Object|null} currentUser

122 * @param {boolean} isSaving

123 * @param {boolean} isReplyOpen

124 * @param {string|null} parentId

125 * @param {string|null} html

126 * @returns {string}

127 */

128

129/**

130 * @callback FastCommentsUIExtensionPrepareCommentForSavingCallback

131 * @param {Object} comment

132 * @param {string} parentId

133 */

134

135/**

136 * @callback FastCommentsUIExtensionNewCommentCallback

137 * @param {Object} comment

138 */

139

140/**

141 * @callback FastCommentsUIExtensionPresenceUpdateCallback

142 * @param {Object} update

143 */

144

Η αλληλεπίδραση με το 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 όπως αυτό, θα συγχωνευθεί στο UI μέσω ενός αλγορίθμου dom-diffing.

Χειροκίνητη επαναπόδοση ενός σχολίου

Μπορούμε να περιμένουμε την αρχική φόρτωση της σελίδας και να επαναποδώσουμε χειροκίνητα ένα σχόλιο καλώντας το 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