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.

Het extension object bestaat uit de volgende definitie:

Extension Object JSDoc

Copy Run

1

2/**

3 * Het FastCommentsUI extension object. Wordt gebruikt voor het lazy-loaden van bepaalde componenten. Het reviewsysteem wordt bijvoorbeeld

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

5 *

6 * @typedef {Object} FastCommentsUIExtension

7 * @property {string} id

8 * @property {Element} scriptNode

9 * @property {Element} root - Het DOM-knooppunt van de widget-root.

10 * @property {string} [css]

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

12 * @property {Object} commentsById - Een verwijzing naar een object met alle reacties op id, dat actueel wordt gehouden.

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

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

15 * @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.

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

17 * @property {Function} [withSessionId] - Aanroepen met een request-URL en een callback. Roept de callback aan met de URL plus de sessie-id van de kijker toegevoegd wanneer cookies van derden worden geblokkeerd (zelfde pad als comment- en vote-requests), of met de URL ongewijzigd anders. Wanneer er op die manier geen sessie-id beschikbaar is, wordt de anonieme sessie-id toegevoegd die als laatste aan rememberAnonSessionId is doorgegeven, indien aanwezig. Niet gebruikt voor SSO.

18 * @property {Function} [rememberAnonSessionId] - Aanroepen met de anonSessionId die een response heeft teruggegeven. De server geeft er slechts één terug aan een gast waarvan het verzoek geen sessiecookie had, en nooit voor een ingelogde sessie. Deze wordt bewaard in localStorage (of in het geheugen wanneer opslag niet beschikbaar is), zodat withSessionId deze bij latere verzoeken meestuurt en de gast één identiteit behoudt.

19 * @property {FastCommentsUIExtensionSetupEventHandlers} [setupEventHandlers]

20 * @property {FastCommentsUIExtensionPrepareCommentForSavingCallback} [prepareCommentForSaving] - Wordt aangeroepen met de reactie die geplaatst gaat worden. Geef false terug om het verzenden te annuleren (bijvoorbeeld wanneer een bijgevoegde poll onvolledig is).

21 * @property {FastCommentsUIExtensionNewCommentCallback} [newComment]

22 * @property {FastCommentsUIExtensionReplyAreaFilter} [replyAreaFilter] - Filtert HTML voor het reactiegebied.

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

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

25 * @property {FastCommentsUIExtensionReplyAreaFilter} [commentMenuFilter] - Filtert HTML voor het menu van elke reactie vóór het renderen.

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

27 * @property {FastCommentsUIExtensionReplyAreaTop} [replyAreaTop] - (LEGACY) Geef HTML terug om bovenaan het reactiegebied toe te voegen.

28 * @property {FastCommentsUIExtensionWidgetTopCallback} [widgetTop] - (LEGACY) Geef HTML terug om bovenaan de widget toe te voegen.

29 * @property {FastCommentsUIExtensionCommentTopCallback} [commentTop] - (LEGACY) Geef HTML terug om bovenaan het reactie-element toe te voegen.

30 * @property {FastCommentsUIExtensionCommentBottomCallback} [commentBottom] - (LEGACY) Geef HTML terug om onderaan het reactie-element toe te voegen.

31 * @property {FastCommentsUIExtensionCommentBottomCallback} [commentContentBottom] - Geef HTML terug om na de reactietekst toe te voegen, binnen het content-element van de reactie (gebruikt door polls).

32 * @property {Function} [replyAreaInputBottom] - Geef HTML terug om binnen het invoerkader van de reactie toe te voegen, onder de tekstinvoer (gebruikt door polls voor de poll-editor op zijn plek). Ontvangt de id van de bovenliggende reactie, of null voor het hoofdreactievak.

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

34 * @property {Function} isSiteAdmin - Geeft terug of de kijker een admin of moderator van de tenant is. Bekend na de eerste fetch.

35 * @property {FastCommentsUIExtensionMenuBottomCallback} [menuBottom] - (LEGACY) Geef HTML terug om onderaan het menu-element van elke reactie toe te voegen.

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

45 * @param {Object.<string, Function>} clickListeners - De event handlers voor klikken, op klassenaam, die by reference gewijzigd kunnen worden.

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

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