Skript za svaku ekstenziju se preuzima i poziva pre nego što vidžet komentara počne da preuzima prvi skup komentara i prikazuje korisnički interfejs.

Pri početnom učitavanju, sledeći podaci biće prikačeni na objekat ekstenzije:

• config - Referenca na objekat config.
• translations - Referenca na objekat translations.
• commentsById - Referenca na sve komentare po id.
• root - Referenca na root DOM čvor.

Ekstenzije bi trebalo da prepišu željene funkcije, koje će vidžet komentara pozivati u odgovarajućim trenucima.

Najmanje moguće proširenje bi bilo:

Jednostavno proširenje

Copy Run

1

2(function () {

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

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

5 });

6})();

7

Za potrebe ovog primera, sačuvajte ovo kao my-extension.js, i postavite ga na https://example.com/my-extension.min.js.

Ovo proširenje ništa ne radi, osim što pri učitavanju preuzima Extension objekat koji je kreirala osnovna biblioteka za komentare.

Ovaj Extension objekat je singleton i nije deljen sa nijednim drugim proširenjima.

Dalje, da bismo učitali naše proširenje, moramo obavestiti widget za komentare o njemu. Na primer:

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

Za funkcionalne primere, pogledajte sledeći odeljak.

The extension object consists of the following definition:

JSDoc objekta ekstenzije

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 - Korenski DOM čvor widgeta.

10 * @property {string} [css]

11 * @property {Object} config - FastComments konfiguracioni objekat.

12 * @property {Object} commentsById - Referenca na objekat sa svim komentarima po id-ju, koja se održava ažurnom.

13 * @property {Object} translations - Referenca na sve prevode.

14 * @property {Function} reRenderComment - Referenca na funkciju koju je moguće pozvati da se ponovo renderuje komentar.

15 * @property {Function} removeCommentAndReRender - Referenca na funkciju koju je moguće pozvati da ukloni komentar iz memorije i ponovo renderuje odgovarajući deo DOM-a.

16 * @property {Function} newBroadcastId - Referenca na funkciju koju je moguće pozvati da kreira novi broadcast id i doda ga u lokalnu listu broadcast id-eva koje treba ignorisati.

17 * @property {FastCommentsUIExtensionSetupEventHandlers} [setupEventHandlers]

18 * @property {FastCommentsUIExtensionPrepareCommentForSavingCallback} [prepareCommentForSaving]

19 * @property {FastCommentsUIExtensionNewCommentCallback} [newComment]

20 * @property {FastCommentsUIExtensionReplyAreaFilter} [replyAreaFilter] - Filter HTML-a za oblast komentara.

21 * @property {FastCommentsUIExtensionWidgetFilter} [widgetFilter] - Filter HTML-a za ceo widget pri renderovanju.

22 * @property {FastCommentsUIExtensionCommentTopFilter} [commentFilter] - Filter HTML-a za svaki komentar pre renderovanja.

23 * @property {FastCommentsUIExtensionReplyAreaFilter} [commentMenuFilter] - Filter HTML-a za svaki meni komentara pre renderovanja.

24 * @property {FastCommentsUIExtensionMenuFilter} [menuFilter] - Filter HTML-a za ceo widget pri renderovanju.

25 * @property {FastCommentsUIExtensionReplyAreaTop} [replyAreaTop] - (ZASTARELO) Vraća HTML koji će biti dodat na vrh polja za odgovor.

26 * @property {FastCommentsUIExtensionWidgetTopCallback} [widgetTop] - (ZASTARELO) Vraća HTML koji će biti dodat na vrh widgeta.

27 * @property {FastCommentsUIExtensionCommentTopCallback} [commentTop] - (ZASTARELO) Vraća HTML koji će biti dodat na vrh elementa komentara.

28 * @property {FastCommentsUIExtensionCommentBottomCallback} [commentBottom] - (ZASTARELO) Vraća HTML koji će biti dodat na dno elementa komentara.

29 * @property {FastCommentsUIExtensionMenuBottomCallback} [menuBottom] - (ZASTARELO) Vraća HTML koji će biti dodat na dno elementa menija za svaki komentar.

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 - Korenski element.

39 * @param {Object.<string, Function>} clickListeners - Obradivači događaja za klikove, po nazivu klase, koje je moguće izmeniti putem 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

Interakcija sa Extension je jednostavna, jer jednostavno definišemo reference na funkcije koje želimo da budu pozvane.

Da bismo nadogradili raniji primer, pretpostavimo da želimo da dodamo HTML na vrh svakog komentara:

Jednostavno proširenje - Nastavak

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

Kad god vratite HTML kao ovaj, on će biti uklopljen u UI putem algoritma za dom-diffing.

Ručno pokretanje ponovnog renderovanja komentara

Možemo sačekati inicijalno učitavanje stranice i ručno ponovo renderovati komentar pozivanjem reRenderComment:

Ponovno renderovanje komentara

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