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 mindste mulige udvidelse er:

En simpel udvidelse

Copy Run

1

2(function () {

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

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

5 });

6})();

7

For eksemplets skyld, gem dette som my-extension.js, og gør det tilgængeligt på https://example.com/my-extension.min.js.

Denne udvidelse gør ikke noget; ved indlæsning henter den udvidelsesobjektet, som er oprettet af kernekommentarbiblioteket.

This Extension object is a singleton and is not shared with any other extensions.

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

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

For funktionelle eksempler, se næste afsnit.

Udvidelsesobjektet består af følgende definition:

Udvidelsesobjekt JSDoc

Copy Run

1

2/**

3 * FastCommentsUI‑udvidelsesobjektet. Bruges til lazy‑loading af visse komponenter. For eksempel bruges anmeldelsessystemet ikke

4 * 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 konfigurationsobjekt.

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 påkaldes for at genrendere en kommentar.

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

16 * @property {Function} newBroadcastId - En reference til en funktion, der kan på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 {FastCommentsUIExtensionSetupEventHandlers} [setupEventHandlers]

18 * @property {FastCommentsUIExtensionPrepareCommentForSavingCallback} [prepareCommentForSaving] - Kaldes med kommentaren, der skal postes. Returner false for at annullere indsendelsen (for eksempel når en vedhæftet afstemning er ufuldstændig).

19 * @property {FastCommentsUIExtensionNewCommentCallback} [newComment]

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

21 * @property {FastCommentsUIExtensionWidgetFilter} [widgetFilter] - Filtrer HTML for hele widgeten ved rendering.

22 * @property {FastCommentsUIExtensionCommentTopFilter} [commentFilter] - Filtrer HTML for hver kommentar før rendering.

23 * @property {FastCommentsUIExtensionReplyAreaFilter} [commentMenuFilter] - Filtrer HTML for hver kommentarmenu før rendering.

24 * @property {FastCommentsUIExtensionMenuFilter} [menuFilter] - Filtrer HTML for hele widgeten ved rendering.

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

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

27 * @property {FastCommentsUIExtensionCommentTopCallback} [commentTop] - (LEGACY) Returner HTML, der skal tilføjes til toppen af kommentar‑elementet.

28 * @property {FastCommentsUIExtensionCommentBottomCallback} [commentBottom] - (LEGACY) Returner HTML, der skal tilføjes til bunden af kommentar‑elementet.

29 * @property {FastCommentsUIExtensionCommentBottomCallback} [commentContentBottom] - Returner HTML, der skal tilføjes efter kommentarteksten, inde i kommentarindholdselementet (bruges af afstemninger).

30 * @property {Function} [replyAreaInputBottom] - Returner HTML, der skal tilføjes inde i kommentarinputrammen, under tekstinput (bruges af afstemninger til den indlejrede afstemningseditor). Modtager den overordnede kommentar‑id, eller null for rodrækkens svarboks.

31 * @property {Function} [onPollUpdate] - Kaldes med live‑begivenheden, når stemmetalene for en afstemning på siden ændres.

32 * @property {Function} isSiteAdmin - Returnerer om seeren er en admin eller moderator af lejer. Kendt efter den første hentning.

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

34 * @property {FastCommentsUIExtensionRenderCallback} [onRender]

35 * @property {FastCommentsUIExtensionConnectionStatusCallback} [onLiveConnectionStatusUpdate]

36 * @property {FastCommentsUIExtensionInitialRenderCallback} [onInitialRenderComplete]

37 * @property {FastCommentsUIExtensionPresenceUpdateCallback} [onPresenceUpdate]

38 */

39

40/**

41 * @callback FastCommentsUIExtensionSetupEventHandlers

42 * @param {Element} element - The root element.

43 * @param {Object.<string, Function>} clickListeners - The event handlers for clicks, by class name, which can be modified by reference.

44 * @returns void

45 */

46

47/**

48 * @callback FastCommentsUIExtensionWidgetTopCallback

49 * @param {Object} moduleData

50 * @returns {string}

51 */

52

53/**

54 * @callback FastCommentsUIExtensionWidgetFilter

55 * @param {Object} moduleData

56 * @param {Object} html

57 * @returns {string}

58 */

59

60/**

61 * @callback FastCommentsUIExtensionCommentTopCallback

62 * @param {Object} comment

63 * @returns {string}

64 */

65

66/**

67 * @callback FastCommentsUIExtensionCommentTopFilter

68 * @param {Object} comment

69 * @param {string} html

70 * @returns {string}

71 */

72

73/**

74 * @callback FastCommentsUIExtensionCommentBottomCallback

75 * @param {Object} comment

76 * @returns {string}

77 */

78

79/**

80 * @callback FastCommentsUIExtensionMenuBottomCallback

81 * @param {Object} comment

82 * @returns {string}

83 */

84

85/**

86 * @callback FastCommentsUIExtensionMenuFilter

87 * @param {Object} comment

88 * @param {string} html

89 * @returns {string}

90 */

91

92/**

93 * @callback FastCommentsUIExtensionRenderCallback

94 * @returns {string}

95 */

96

97/**

98 * @callback FastCommentsUIExtensionConnectionStatusCallback

99 * @param {boolean} isConnected

100 * @returns {void}

101 */

102

103/**

104 * @callback FastCommentsUIExtensionInitialRenderCallback

105 * @returns {void}

106 */

107

108/**

109 * @callback FastCommentsUIExtensionReplyAreaTop

110 * @param {Object|null} currentUser

111 * @param {boolean} isSaving

112 * @param {boolean} isReplyOpen

113 * @param {string|null} parentId

114 * @returns {string}

115 */

116

117/**

118 * @callback FastCommentsUIExtensionReplyAreaFilter

119 * @param {Object|null} currentUser

120 * @param {boolean} isSaving

121 * @param {boolean} isReplyOpen

122 * @param {string|null} parentId

123 * @param {string|null} html

124 * @returns {string}

125 */

126

127/**

128 * @callback FastCommentsUIExtensionPrepareCommentForSavingCallback

129 * @param {Object} comment

130 * @param {string} parentId

131 */

132

133/**

134 * @callback FastCommentsUIExtensionNewCommentCallback

135 * @param {Object} comment

136 */

137

138/**

139 * @callback FastCommentsUIExtensionPresenceUpdateCallback

140 * @param {Object} update

141 */

142

Interacting with the Extension is simple, as we simply define references to functions we want invoked.

To build off the example earlier, let's say we want to add HTML to the top of each comment:

En simpel udvidelse - 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

Whenever you return HTML like this, it will get merged into the UI via a dom-diffing algorithm.

Manually triggering the re-render of a comment

We can wait for the initial page load and manually re-render a comment by invoking reRenderComment:

Genrendér 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 ikke nødvendig, bare et eksempel.

20 }

21})();

22