Extensies schrijven

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.

The extension object consists of the following definition:

Extensieobject JSDoc

Copy Run

1

2/**

3 * Het FastCommentsUI extensie‑object. Gebruikt voor lazy‑loading van bepaalde componenten. Bijvoorbeeld, het beoordelingssysteem wordt niet door alle klanten gebruikt, dus we laden die extensie alleen wanneer we deze nodig hebben.

4 *

5 * @typedef {Object} FastCommentsUIExtension

6 * @property {string} id

7 * @property {Element} scriptNode

8 * @property {Element} root - De widget root DOM‑knooppunt.

9 * @property {string} [css]

10 * @property {Object} config - Het FastComments‑configuratie‑object.

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

12 * @property {Object} translations - Een verwijzing naar alle vertalingen.

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

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

15 * @property {Function} newBroadcastId - Een verwijzing naar een functie die kan worden aangeroepen om een nieuw broadcast‑id te maken en toe te voegen aan de lokale lijst van te negeren broadcast‑ids.

16 * @property {FastCommentsUIExtensionSetupEventHandlers} [setupEventHandlers]

17 * @property {FastCommentsUIExtensionPrepareCommentForSavingCallback} [prepareCommentForSaving] - Wordt aangeroepen met de reactie die geplaatst moet worden. Retourneer false om de inzending te annuleren (bijvoorbeeld wanneer een bijgevoegde poll onvolledig is).

18 * @property {FastCommentsUIExtensionNewCommentCallback} [newComment]

19 * @property {FastCommentsUIExtensionReplyAreaFilter} [replyAreaFilter] - Filter HTML voor het reactie‑gebied.

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

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

22 * @property {FastCommentsUIExtensionReplyAreaFilter} [commentMenuFilter] - Filter HTML voor elk reactie‑menu vóór het renderen.

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

24 * @property {FastCommentsUIExtensionReplyAreaTop} [replyAreaTop] - (VEROUDERD) Retourneer HTML om toe te voegen aan de bovenkant van het reactie‑gebied.

25 * @property {FastCommentsUIExtensionWidgetTopCallback} [widgetTop] - (VEROUDERD) Retourneer HTML om toe te voegen aan de bovenkant van de widget.

26 * @property {FastCommentsUIExtensionCommentTopCallback} [commentTop] - (VEROUDERD) Retourneer HTML om toe te voegen aan de bovenkant van het reactie‑element.

27 * @property {FastCommentsUIExtensionCommentBottomCallback} [commentBottom] - (VEROUDERD) Retourneer HTML om toe te voegen aan de onderkant van het reactie‑element.

28 * @property {FastCommentsUIExtensionCommentBottomCallback} [commentContentBottom] - Retourneer HTML om toe te voegen na de reactietekst, binnen het reactie‑inhoudselement (gebruikt door polls).

29 * @property {Function} [replyAreaInputBottom] - Retourneer HTML om toe te voegen binnen het invoer‑frame van de reactie, onder de tekstinvoer (gebruikt door polls voor de inline poll‑editor). Ontvangt de bovenliggende reactie‑id, of null voor het hoofd‑reactie‑vak.

30 * @property {Function} [onPollUpdate] - Wordt aangeroepen met het live‑event wanneer de stemmingsaantallen van een poll op de pagina veranderen.

31 * @property {Function} isSiteAdmin - Retourneert of de kijker een beheerder of moderator van de tenant is. Bekend na de eerste fetch.

32 * @property {FastCommentsUIExtensionMenuBottomCallback} [menuBottom] - (VEROUDERD) Retourneer HTML om toe te voegen aan de onderkant van het menu‑element voor elke reactie.

33 * @property {FastCommentsUIExtensionRenderCallback} [onRender]

34 * @property {FastCommentsUIExtensionConnectionStatusCallback} [onLiveConnectionStatusUpdate]

35 * @property {FastCommentsUIExtensionInitialRenderCallback} [onInitialRenderComplete]

36 * @property {FastCommentsUIExtensionPresenceUpdateCallback} [onPresenceUpdate]

37 */

38

39/**

40 * @callback FastCommentsUIExtensionSetupEventHandlers

41 * @param {Element} element - Het root‑element.

42 * @param {Object.<string, Function>} clickListeners - De event‑handlers voor klikken, per klassenaam, die via referentie kunnen worden aangepast.

43 * @returns void

44 */

45

46/**

47 * @callback FastCommentsUIExtensionWidgetTopCallback

48 * @param {Object} moduleData

49 * @returns {string}

50 */

51

52/**

53 * @callback FastCommentsUIExtensionWidgetFilter

54 * @param {Object} moduleData

55 * @param {Object} html

56 * @returns {string}

57 */

58

59/**

60 * @callback FastCommentsUIExtensionCommentTopCallback

61 * @param {Object} comment

62 * @returns {string}

63 */

64

65/**

66 * @callback FastCommentsUIExtensionCommentTopFilter

67 * @param {Object} comment

68 * @param {string} html

69 * @returns {string}

70 */

71

72/**

73 * @callback FastCommentsUIExtensionCommentBottomCallback

74 * @param {Object} comment

75 * @returns {string}

76 */

77

78/**

79 * @callback FastCommentsUIExtensionMenuBottomCallback

80 * @param {Object} comment

81 * @returns {string}

82 */

83

84/**

85 * @callback FastCommentsUIExtensionMenuFilter

86 * @param {Object} comment

87 * @param {string} html

88 * @returns {string}

89 */

90

91/**

92 * @callback FastCommentsUIExtensionRenderCallback

93 * @returns {string}

94 */

95

96/**

97 * @callback FastCommentsUIExtensionConnectionStatusCallback

98 * @param {boolean} isConnected

99 * @returns {void}

100 */

101

102/**

103 * @callback FastCommentsUIExtensionInitialRenderCallback

104 * @returns {void}

105 */

106

107/**

108 * @callback FastCommentsUIExtensionReplyAreaTop

109 * @param {Object|null} currentUser

110 * @param {boolean} isSaving

111 * @param {boolean} isReplyOpen

112 * @param {string|null} parentId

113 * @returns {string}

114 */

115

116/**

117 * @callback FastCommentsUIExtensionReplyAreaFilter

118 * @param {Object|null} currentUser

119 * @param {boolean} isSaving

120 * @param {boolean} isReplyOpen

121 * @param {string|null} parentId

122 * @param {string|null} html

123 * @returns {string}

124 */

125

126/**

127 * @callback FastCommentsUIExtensionPrepareCommentForSavingCallback

128 * @param {Object} comment

129 * @param {string} parentId

130 */

131

132/**

133 * @callback FastCommentsUIExtensionNewCommentCallback

134 * @param {Object} comment

135 */

136

137/**

138 * @callback FastCommentsUIExtensionPresenceUpdateCallback

139 * @param {Object} update

140 */

141

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