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:

JSDoc for Extension-objektet

Copy Run

1

2/**

3 * The FastCommentsUI extension object. Used for lazy-loading certain components. For example, the review system is not

4 * used by all customers, so we only load that extension when we want it.

5 *

6 * @typedef {Object} FastCommentsUIExtension

7 * @property {string} id

8 * @property {Element} scriptNode

9 * @property {Element} root - Widget-rodens DOM-node.

10 * @property {string} [css]

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

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 gengive en kommentar igen.

15 * @property {Function} removeCommentAndReRender - En reference til en funktion, der kan kaldes for at fjerne en kommentar fra hukommelsen og gengive 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 {FastCommentsUIExtensionSetupEventHandlers} [setupEventHandlers]

18 * @property {FastCommentsUIExtensionPrepareCommentForSavingCallback} [prepareCommentForSaving]

19 * @property {FastCommentsUIExtensionNewCommentCallback} [newComment]

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

21 * @property {FastCommentsUIExtensionWidgetFilter} [widgetFilter] - Filtrer HTML for hele widget'en ved gengivelse.

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

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

24 * @property {FastCommentsUIExtensionMenuFilter} [menuFilter] - Filtrer HTML for hele widget'en ved gengivelse.

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

26 * @property {FastCommentsUIExtensionWidgetTopCallback} [widgetTop] - (LEGACY) Returner HTML, der skal tilføjes øverst i widget'en.

27 * @property {FastCommentsUIExtensionCommentTopCallback} [commentTop] - (LEGACY) Returner HTML, der skal tilføjes øverst i kommentarelementet.

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

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

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 - Rod-elementet.

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

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

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