Skrivning af udvidelser

Scriptet for hver udvidelse hentes og køres, før kommentarboksen begynder at hente det første sæt kommentarer og gengive brugergrænsefladen.

Ved første indlæsning vil følgende data blive tilknyttet udvidelsesobjektet:

• config - En reference til config-objektet.
• translations - En reference til translations-objektet.
• commentsById - En reference til alle kommentarer efter id.
• root - En reference til rod-DOM-noden.

Udvidelser bør overskrive de ønskede funktioner, som kommentarboksen vil kalde på de relevante tidspunkter.

Den mindst mulige udvidelse ville være:

En simpel udvidelse

Copy Run

1

2(function () {

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

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

5 });

6})();

7

I dette eksempel kan du gemme dette som my-extension.js og gøre det tilgængeligt på https://example.com/my-extension.min.js.

Denne udvidelse gør ikke noget, bortset fra at den ved indlæsning henter det udvidelsesobjekt, der er oprettet af kerne-kommentarbiblioteket.

Dette Extension-objekt er en singleton og deles ikke med andre udvidelser.

Dernæst, for at indlæse vores udvidelse, skal vi fortælle kommentar-widgetten om den. For eksempel:

Brug af en brugerdefineret udvidelse

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

For funktionelle eksempler, se næste afsnit.

Udvidelsesobjektet består af følgende definition:

Extension Object JSDoc

Copy Run

1

2/**

3 * FastCommentsUI-udvidelsesobjektet. Bruges til lazy-loading af bestemte komponenter. For eksempel bruges anmeldelsessystemet

4 * ikke af alle kunder, så vi indlæser kun den udvidelse, når vi har brug for den.

5 *

6 * @typedef {Object} FastCommentsUIExtension

7 * @property {string} id

8 * @property {Element} scriptNode

9 * @property {Element} root - Widgetens rod-DOM-node.

10 * @property {string} [css]

11 * @property {Object} config - FastComments config-objektet.

12 * @property {Object} commentsById - En reference til et objekt med alle kommentarer efter id, som holdes opdateret.

13 * @property {Object} translations - En reference til alle oversættelser.

14 * @property {Function} reRenderComment - En reference til en funktion, der kan kaldes for at re-rendere en kommentar.

15 * @property {Function} removeCommentAndReRender - En reference til en funktion, der kan kaldes for at fjerne en kommentar fra hukommelsen og re-rendere den relevante del af DOM'en.

16 * @property {Function} newBroadcastId - En reference til en funktion, der kan kaldes for at oprette et nyt broadcast-id og tilføje det til den lokale liste over broadcast-id'er, der skal ignoreres.

17 * @property {Function} [withSessionId] - Kald med en request-URL og et callback. Kalder callbacket med URL'en plus seerens session-id tilføjet, når tredjepartscookies er blokeret (samme sti som kommentar- og stemme-requests bruger), ellers uændret URL. Når der ikke er noget session-id tilgængeligt på den måde, tilføjes det anonyme session-id, der sidst blev givet til rememberAnonSessionId, hvis der er et. Bruges ikke til SSO.

18 * @property {Function} [rememberAnonSessionId] - Kald med det anonSessionId, som et svar returnerede. Serveren returnerer kun ét til en gæst, hvis request ikke havde nogen session-cookie, og aldrig for en logget ind-session. Det gemmes i localStorage (eller i hukommelsen, når lager ikke er tilgængeligt), så withSessionId sender det ved senere requests, og gæsten beholder én identitet.

19 * @property {FastCommentsUIExtensionSetupEventHandlers} [setupEventHandlers]

20 * @property {FastCommentsUIExtensionPrepareCommentForSavingCallback} [prepareCommentForSaving] - Kaldes med kommentaren, der er ved at blive sendt. Returner false for at annullere indsendelsen (f.eks. når en vedhæftet afstemning er ufuldstændig).

21 * @property {FastCommentsUIExtensionNewCommentCallback} [newComment]

22 * @property {FastCommentsUIExtensionReplyAreaFilter} [replyAreaFilter] - Filtrerer HTML for kommentarområdet.

23 * @property {FastCommentsUIExtensionWidgetFilter} [widgetFilter] - Filtrerer HTML for hele widgeten ved render.

24 * @property {FastCommentsUIExtensionCommentTopFilter} [commentFilter] - Filtrerer HTML for hver kommentar før render.

25 * @property {FastCommentsUIExtensionReplyAreaFilter} [commentMenuFilter] - Filtrerer HTML for hver kommentarmenu før render.

26 * @property {FastCommentsUIExtensionMenuFilter} [menuFilter] - Filtrerer HTML for hele widgeten ved render.

27 * @property {FastCommentsUIExtensionReplyAreaTop} [replyAreaTop] - (LEGACY) Returnerer HTML, der skal tilføjes i toppen af svarområdet.

28 * @property {FastCommentsUIExtensionWidgetTopCallback} [widgetTop] - (LEGACY) Returnerer HTML, der skal tilføjes i toppen af widgeten.

29 * @property {FastCommentsUIExtensionCommentTopCallback} [commentTop] - (LEGACY) Returnerer HTML, der skal tilføjes i toppen af kommentarelementet.

30 * @property {FastCommentsUIExtensionCommentBottomCallback} [commentBottom] - (LEGACY) Returnerer HTML, der skal tilføjes i bunden af kommentarelementet.

31 * @property {FastCommentsUIExtensionCommentBottomCallback} [commentContentBottom] - Returnerer HTML, der skal tilføjes efter kommentarteksten, inde i kommentarens indholdselement (bruges af afstemninger).

32 * @property {Function} [replyAreaInputBottom] - Returnerer HTML, der skal tilføjes inde i kommentarinputrammen, under tekstinputtet (bruges af afstemninger til den indbyggede afstemningseditor). Modtager forældrekommentarens id eller null for roden af svarboksen.

33 * @property {Function} [onPollUpdate] - Kaldes med live-eventet, når stemmetallene for en afstemning på siden ændres.

34 * @property {Function} isSiteAdmin - Returnerer, om seeren er admin eller moderator for tenanten. Kendes efter det første fetch.

35 * @property {FastCommentsUIExtensionMenuBottomCallback} [menuBottom] - (LEGACY) Returnerer HTML, der skal tilføjes i bunden af menuelementet for hver kommentar.

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 - rodelementet.

45 * @param {Object.<string, Function>} clickListeners - Eventhandlers for klik, efter klassenavn, som kan ændres ved reference.

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

Interaktion med Extension er enkel, da vi blot definerer referencer til de funktioner, vi ønsker kaldt.

For at bygge videre på det tidligere eksempel, lad os sige, at vi vil tilføje HTML til toppen af hver kommentar:

En simpel Extension - fortsat

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

Når du returnerer HTML som denne, vil den blive flettet ind i UI'en via en dom-diffing-algoritme.

Manuelt udløse re-rendering af en kommentar

Vi kan vente på den indledende sideindlæsning og manuelt re-rendere en kommentar ved at kalde reRenderComment:

Re-rendering af en kommentar

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 er ikke påkrævet, kun et eksempel.

20 }

21})();

22