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

On initial load, the following data will be tagged onto the extension object:

• 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 σχολίων γι' αυτή. Για παράδειγμα:

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 * The FastCommentsUI extension object. Used for lazy-loading certain components. For example, the review system is not

4 * used by all customers, so we only load that extension when we want it.

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 - Αναφορά σε συνάρτηση που μπορεί να κληθεί για να επανα-αποδώσει (re-render) ένα σχόλιο.

15 * @property {Function} removeCommentAndReRender - Αναφορά σε συνάρτηση που μπορεί να κληθεί για να αφαιρέσει ένα σχόλιο από τη μνήμη και να επανα-αποδώσει το αντίστοιχο μέρος του DOM.

16 * @property {Function} newBroadcastId - Αναφορά σε συνάρτηση που μπορεί να κληθεί για να δημιουργήσει ένα νέο broadcast id και να το προσθέσει στην τοπική λίστα broadcast ids που θα αγνοούνται.

17 * @property {FastCommentsUIExtensionSetupEventHandlers} [setupEventHandlers]

18 * @property {FastCommentsUIExtensionPrepareCommentForSavingCallback} [prepareCommentForSaving]

19 * @property {FastCommentsUIExtensionNewCommentCallback} [newComment]

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

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

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

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

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

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

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

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

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

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

30 * @property {FastCommentsUIExtensionRenderCallback} [onRender]

31 * @property {FastCommentsUIExtensionConnectionStatusCallback} [onLiveConnectionStatusUpdate]

32 * @property {FastCommentsUIExtensionInitialRenderCallback} [onInitialRenderComplete]

33 * @property {FastCommentsUIExtensionPresenceUpdateCallback} [onPresenceUpdate]

34 */

35

36/**

37 * @callback FastCommentsUIExtensionSetupEventHandlers

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

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

40 * @returns void

41 */

42

43/**

44 * @callback FastCommentsUIExtensionWidgetTopCallback

45 * @param {Object} moduleData

46 * @returns {string}

47 */

48

49/**

50 * @callback FastCommentsUIExtensionWidgetFilter

51 * @param {Object} moduleData

52 * @param {Object} html

53 * @returns {string}

54 */

55

56/**

57 * @callback FastCommentsUIExtensionCommentTopCallback

58 * @param {Object} comment

59 * @returns {string}

60 */

61

62/**

63 * @callback FastCommentsUIExtensionCommentTopFilter

64 * @param {Object} comment

65 * @param {string} html

66 * @returns {string}

67 */

68

69/**

70 * @callback FastCommentsUIExtensionCommentBottomCallback

71 * @param {Object} comment

72 * @returns {string}

73 */

74

75/**

76 * @callback FastCommentsUIExtensionMenuBottomCallback

77 * @param {Object} comment

78 * @returns {string}

79 */

80

81/**

82 * @callback FastCommentsUIExtensionMenuFilter

83 * @param {Object} comment

84 * @param {string} html

85 * @returns {string}

86 */

87

88/**

89 * @callback FastCommentsUIExtensionRenderCallback

90 * @returns {string}

91 */

92

93/**

94 * @callback FastCommentsUIExtensionConnectionStatusCallback

95 * @param {boolean} isConnected

96 * @returns {void}

97 */

98

99/**

100 * @callback FastCommentsUIExtensionInitialRenderCallback

101 * @returns {void}

102 */

103

104/**

105 * @callback FastCommentsUIExtensionReplyAreaTop

106 * @param {Object|null} currentUser

107 * @param {boolean} isSaving

108 * @param {boolean} isReplyOpen

109 * @param {string|null} parentId

110 * @returns {string}

111 */

112

113/**

114 * @callback FastCommentsUIExtensionReplyAreaFilter

115 * @param {Object|null} currentUser

116 * @param {boolean} isSaving

117 * @param {boolean} isReplyOpen

118 * @param {string|null} parentId

119 * @param {string|null} html

120 * @returns {string}

121 */

122

123/**

124 * @callback FastCommentsUIExtensionPrepareCommentForSavingCallback

125 * @param {Object} comment

126 * @param {string} parentId

127 */

128

129/**

130 * @callback FastCommentsUIExtensionNewCommentCallback

131 * @param {Object} comment

132 */

133

134/**

135 * @callback FastCommentsUIExtensionPresenceUpdateCallback

136 * @param {Object} update

137 */

138

Η αλληλεπίδραση με το Extension είναι απλή, καθώς απλώς ορίζουμε αναφορές προς συναρτήσεις που θέλουμε να κληθούν.

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

Ένα Απλό Extension - Συνέχεια

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