Pisanje ekstenzija

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:

Objekat Ekstenzije JSDoc

Copy Run

1

2/**

3 * FastCommentsUI ekstenzioni objekat. Koristi se za lenjo učitavanje određenih komponenti. Na primer, sistem za recenzije nije

4 * korišćen od svih kupaca, pa učitavamo tu ekstenziju samo kada nam je potrebna.

5 *

6 * @typedef {Object} FastCommentsUIExtension

7 * @property {string} id

8 * @property {Element} scriptNode

9 * @property {Element} root - DOM čvor korena vidžeta.

10 * @property {string} [css]

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

12 * @property {Object} commentsById - Referenca na objekat sa svim komentarima po ID‑u, koji se ažurira u realnom vremenu.

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

14 * @property {Function} reRenderComment - Referenca na funkciju koja može da se pozove za ponovno renderovanje komentara.

15 * @property {Function} removeCommentAndReRender - Referenca na funkciju koja može da se pozove za uklanjanje komentara iz memorije i ponovno renderovanje odgovarajućeg dela DOM‑a.

16 * @property {Function} newBroadcastId - Referenca na funkciju koja može da se pozove za kreiranje novog broadcast ID‑a i dodavanje u lokalnu listu broadcast ID‑ova koje treba ignorisati.

17 * @property {FastCommentsUIExtensionSetupEventHandlers} [setupEventHandlers]

18 * @property {FastCommentsUIExtensionPrepareCommentForSavingCallback} [prepareCommentForSaving] - Poziva se sa komentarom koji će biti objavljen. Vratite false da otkažete slanje (na primer kada je priložena anketa nekompletna).

19 * @property {FastCommentsUIExtensionNewCommentCallback} [newComment]

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

21 * @property {FastCommentsUIExtensionWidgetFilter} [widgetFilter] - Filtrirajte HTML za ceo vidžet prilikom renderovanja.

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

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

24 * @property {FastCommentsUIExtensionMenuFilter} [menuFilter] - Filtrirajte HTML za ceo vidžet prilikom renderovanja.

25 * @property {FastCommentsUIExtensionReplyAreaTop} [replyAreaTop] - (LEGACY) Vraća HTML koji se dodaje na vrh oblasti za odgovor.

26 * @property {FastCommentsUIExtensionWidgetTopCallback} [widgetTop] - (LEGACY) Vraća HTML koji se dodaje na vrh vidžeta.

27 * @property {FastCommentsUIExtensionCommentTopCallback} [commentTop] - (LEGACY) Vraća HTML koji se dodaje na vrh elementa komentara.

28 * @property {FastCommentsUIExtensionCommentBottomCallback} [commentBottom] - (LEGACY) Vraća HTML koji se dodaje na dno elementa komentara.

29 * @property {FastCommentsUIExtensionCommentBottomCallback} [commentContentBottom] - Vraća HTML koji se dodaje posle teksta komentara, unutar elementa sadržaja komentara (koristi se za ankete).

30 * @property {Function} [replyAreaInputBottom] - Vraća HTML koji se dodaje unutar okvira za unos komentara, ispod polja za tekst (koristi se za ankete u editoru ankete na mestu). Prima ID roditeljskog komentara, ili null za korenski okvir za odgovor.

31 * @property {Function} [onPollUpdate] - Poziva se sa live događajem kada se promeni broj glasova ankete na stranici.

32 * @property {Function} isSiteAdmin - Vraća da li je posmatrač administrator ili moderator tenant‑a. Poznato nakon prvog fetch‑a.

33 * @property {FastCommentsUIExtensionMenuBottomCallback} [menuBottom] - (LEGACY) Vraća HTML koji se dodaje na dno menija za svaki komentar.

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

43 * @param {Object.<string, Function>} clickListeners - Handleri za klikove, po nazivu klase, koji se mogu izmeniti po referenci.

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

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