Het script voor elke extensie wordt opgehaald en aangeroepen voordat de commentaar-widget begint met het ophalen van de eerste set reacties en het renderen van de UI.

Bij het initiële laden wordt de volgende data aan het extensie-object toegevoegd:

• config - Een verwijzing naar het config object.
• translations - Een verwijzing naar het translations object.
• commentsById - Een verwijzing naar alle reacties per id.
• root - Een verwijzing naar de root DOM-node.

Extensies moeten de gewenste functies overschrijven, die de commentaar-widget op de juiste momenten zal aanroepen.

De kleinste mogelijke extensie zou zijn:

Een eenvoudige extensie

Copy Run

1

2(function () {

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

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

5 });

6})();

7

Sla dit voor dit voorbeeld op als my-extension.js en maak het beschikbaar via https://example.com/my-extension.min.js.

Deze extensie doet niets; bij het laden haalt hij het extensieobject op dat door de kern van de commentaarbibliotheek is aangemaakt.

Dit Extension-object is een singleton en wordt niet gedeeld met andere extensies.

Vervolgens, om onze extensie te laden, moeten we de commentaarwidget hierover informeren. Bijvoorbeeld:

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

Voor functionele voorbeelden, zie de volgende sectie.

Het extensieobject bestaat uit de volgende definitie:

JSDoc van Extensieobject

Copy Run

1

2/**

3 * Het FastCommentsUI-extensieobject. Wordt gebruikt om bepaalde componenten lazy te laden. Bijvoorbeeld, het reviewsysteem wordt niet

4 * door alle klanten gebruikt, dus laden we die extensie alleen wanneer we die nodig hebben.

5 *

6 * @typedef {Object} FastCommentsUIExtension

7 * @property {string} id

8 * @property {Element} scriptNode

9 * @property {Element} root - De root DOM-node van de widget.

10 * @property {string} [css]

11 * @property {Object} config - Het FastComments-configuratieobject.

12 * @property {Object} commentsById - Een referentie naar een object met alle reacties per id, dat up-to-date wordt gehouden.

13 * @property {Object} translations - Een referentie naar alle vertalingen.

14 * @property {Function} reRenderComment - Een referentie naar een functie die aangeroepen kan worden om een reactie opnieuw te renderen.

15 * @property {Function} removeCommentAndReRender - Een referentie naar een functie die aangeroepen kan worden om een reactie uit het geheugen te verwijderen en het juiste deel van de DOM opnieuw te renderen.

16 * @property {Function} newBroadcastId - Een referentie naar een functie die kan worden aangeroepen om een nieuwe broadcast-id te maken en toe te voegen aan de lokale lijst met te negeren broadcast-id's.

17 * @property {FastCommentsUIExtensionSetupEventHandlers} [setupEventHandlers]

18 * @property {FastCommentsUIExtensionPrepareCommentForSavingCallback} [prepareCommentForSaving]

19 * @property {FastCommentsUIExtensionNewCommentCallback} [newComment]

20 * @property {FastCommentsUIExtensionReplyAreaFilter} [replyAreaFilter] - Filter HTML voor het reactiegebied.

21 * @property {FastCommentsUIExtensionWidgetFilter} [widgetFilter] - Filter HTML voor de hele widget bij het renderen.

22 * @property {FastCommentsUIExtensionCommentTopFilter} [commentFilter] - Filter HTML voor elke reactie vóór het renderen.

23 * @property {FastCommentsUIExtensionReplyAreaFilter} [commentMenuFilter] - Filter HTML voor elk reactiemenu vóór het renderen.

24 * @property {FastCommentsUIExtensionMenuFilter} [menuFilter] - Filter HTML voor de hele widget bij het renderen.

25 * @property {FastCommentsUIExtensionReplyAreaTop} [replyAreaTop] - (LEGACY) Retourneer HTML die bovenaan het reactiegebied wordt toegevoegd.

26 * @property {FastCommentsUIExtensionWidgetTopCallback} [widgetTop] - (LEGACY) Retourneer HTML die bovenaan de widget wordt toegevoegd.

27 * @property {FastCommentsUIExtensionCommentTopCallback} [commentTop] - (LEGACY) Retourneer HTML die bovenaan het reactie-element wordt toegevoegd.

28 * @property {FastCommentsUIExtensionCommentBottomCallback} [commentBottom] - (LEGACY) Retourneer HTML die onderaan het reactie-element wordt toegevoegd.

29 * @property {FastCommentsUIExtensionMenuBottomCallback} [menuBottom] - (LEGACY) Retourneer HTML die onderaan het menuelement voor elke reactie wordt toegevoegd.

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 - Het root-element.

39 * @param {Object.<string, Function>} clickListeners - De eventhandlers voor klikgebeurtenissen, gegroepeerd per classnaam, die via referentie kunnen worden aangepast.

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

Interactie met de Extension is eenvoudig: we definiëren gewoon referenties naar functies die we willen aanroepen.

Om voort te bouwen op het eerdere voorbeeld, laten we zeggen dat we HTML aan de bovenkant van elke reactie willen toevoegen:

Een eenvoudige extensie - Vervolg

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

Wanneer je HTML op deze manier terugstuurt, wordt deze samengevoegd in de UI via een dom-diffing-algoritme.

Het handmatig triggeren van het opnieuw renderen van een reactie

We kunnen wachten op de eerste paginalading en handmatig een reactie opnieuw renderen door reRenderComment aan te roepen:

Opnieuw renderen van een reactie

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