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

Το 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.

Αυτή η επέκταση δεν κάνει τίποτα, εκτός από το ότι κατά τη φόρτωση ανακτά το αντικείμενο επέκτασης που δημιουργείται από τη βασική βιβλιοθήκη σχολίων.

This Extension object is a singleton and is not shared with any other extensions.

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

Using a Custom 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-loading ορισμένων στοιχείων. Για παράδειγμα, το σύστημα αξιολογήσεων δεν

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

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 - Το αντικείμενο ρυθμίσεων 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 για ολόκληρο το widget κατά την απόδοση.

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

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

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

25 * @property {FastCommentsUIExtensionReplyAreaTop} [replyAreaTop] - (ΠΑΡΑΚΑΤΑΓΩΓΗ) Επιστρέφει HTML για προσθήκη στην κορυφή της περιοχής απαντήσεων.

26 * @property {FastCommentsUIExtensionWidgetTopCallback} [widgetTop] - (ΠΑΡΑΚΑΤΑΓΩΓΗ) Επιστρέφει HTML για προσθήκη στην κορυφή του widget.

27 * @property {FastCommentsUIExtensionCommentTopCallback} [commentTop] - (ΠΑΡΑΚΑΤΑΓΩΓΗ) Επιστρέφει HTML για προσθήκη στην κορυφή του στοιχείου σχολίου.

28 * @property {FastCommentsUIExtensionCommentBottomCallback} [commentBottom] - (ΠΑΡΑΚΑΤΑΓΩΓΗ) Επιστρέφει HTML για προσθήκη στο κάτω μέρος του στοιχείου σχολίου.

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

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

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

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

33 * @property {FastCommentsUIExtensionMenuBottomCallback} [menuBottom] - (ΠΑΡΑΚΑΤΑΓΩΓΗ) Επιστρέφει 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 όπως αυτό, θα συγχωνευθεί στο 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