Pisanje razširitev

Skript za vsako razširitev se pridobi in zažene, preden pripomoček za komentarje začne pridobivati prvi niz komentarjev in upodabljati uporabniški vmesnik.

Ob prvem nalaganju bodo na objekt razširitve pripeti naslednji podatki:

• config - Sklic na objekt config.
• translations - Sklic na objekt translations.
• commentsById - Sklic na vse komentarje po id.
• root - Sklic na korensko DOM vozlišče.

Razširitve naj preglasijo želene funkcije, ki jih bo pripomoček za komentarje poklical ob ustreznih časih.

Najmanjša možna razširitev bi bila:

Preprosta razširitev

Copy Run

1

2(function () {

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

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

5 });

6})();

7

Za namen tega primera shranite to kot my-extension.js in poskrbite, da bo dostopna na https://example.com/my-extension.min.js.

Ta razširitev ne naredi ničesar, le ob nalaganju pridobi objekt razširitve, ustvarjen s strani osnovne knjižnice za komentarje.

Ta objekt Extension je singleton in ni v skupni rabi z drugimi razširitvami.

Nato, da naložimo našo razširitev, moramo o njej obvestiti gradnik za komentarje. Na primer:

Uporaba razširitve po meri

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 si oglejte naslednji razdelek.

Objekt extension je sestavljen iz naslednje definicije:

JSDoc dokumentacija objekta Extension

Copy Run

1

2/**

3 * Objekt extension za FastCommentsUI. Uporablja se za lenobno nalaganje določenih komponent. Sistem ocen na primer

4 * ne uporabljajo vse stranke, zato ta extension naložimo šele, ko ga potrebujemo.

5 *

6 * @typedef {Object} FastCommentsUIExtension

7 * @property {string} id

8 * @property {Element} scriptNode

9 * @property {Element} root - Korensko DOM vozlišče pripomočka.

10 * @property {string} [css]

11 * @property {Object} config - Konfiguracijski objekt FastComments.

12 * @property {Object} commentsById - Referenca na objekt z vsemi komentarji po id, ki se nenehno posodablja.

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

14 * @property {Function} reRenderComment - Referenca na funkcijo, ki jo je mogoče poklicati za ponovno izris komentarja.

15 * @property {Function} removeCommentAndReRender - Referenca na funkcijo, ki jo je mogoče poklicati za odstranitev komentarja iz pomnilnika in ponovni izris ustreznega dela DOM.

16 * @property {Function} newBroadcastId - Referenca na funkcijo, ki jo je mogoče poklicati za ustvarjanje novega broadcast id in njegovo dodajanje v lokalni seznam broadcast id, ki jih je treba ignorirati.

17 * @property {Function} [withSessionId] - Pokličite z URL zahteve in povratnim klicem. Povratni klic se izvede z URL-jem, ki mu je dodan id seje gledalca, ko so blokirani piškotki tretjih oseb (ista pot, ki jo uporabljajo zahteve za komentarje in glasovanje), sicer pa se URL vrne nespremenjen. Ko id seje ni na voljo na ta način, se doda zadnji anonimni id seje, podan funkciji rememberAnonSessionId, če obstaja. Ne uporablja se za SSO.

18 * @property {Function} [rememberAnonSessionId] - Pokličite z anonSessionId, ki ga je vrnil odgovor. Strežnik ga vrne le gostu, čigar zahteva ni imela piškotka seje, in nikoli za prijavljeno sejo. Shranjen je v localStorage (ali v pomnilniku, ko shramba ni na voljo), tako da withSessionId pošlje id v kasnejših zahtevah in gost ohrani eno identiteto.

19 * @property {FastCommentsUIExtensionSetupEventHandlers} [setupEventHandlers]

20 * @property {FastCommentsUIExtensionPrepareCommentForSavingCallback} [prepareCommentForSaving] - Pokliče se s komentarjem, ki ga je treba objaviti. Vrnite false za preklic oddaje (na primer ko je priložena anketa nepopolna).

21 * @property {FastCommentsUIExtensionNewCommentCallback} [newComment]

22 * @property {FastCommentsUIExtensionReplyAreaFilter} [replyAreaFilter] - Filtrira HTML za območje komentarjev.

23 * @property {FastCommentsUIExtensionWidgetFilter} [widgetFilter] - Filtrira HTML za celoten pripomoček ob izrisu.

24 * @property {FastCommentsUIExtensionCommentTopFilter} [commentFilter] - Filtrira HTML za vsak komentar pred izrisom.

25 * @property {FastCommentsUIExtensionReplyAreaFilter} [commentMenuFilter] - Filtrira HTML za meni vsakega komentarja pred izrisom.

26 * @property {FastCommentsUIExtensionMenuFilter} [menuFilter] - Filtrira HTML za celoten pripomoček ob izrisu.

27 * @property {FastCommentsUIExtensionReplyAreaTop} [replyAreaTop] - (ZASTARELO) Vrne HTML, ki se doda na vrh območja za odgovore.

28 * @property {FastCommentsUIExtensionWidgetTopCallback} [widgetTop] - (ZASTARELO) Vrne HTML, ki se doda na vrh pripomočka.

29 * @property {FastCommentsUIExtensionCommentTopCallback} [commentTop] - (ZASTARELO) Vrne HTML, ki se doda na vrh elementa komentarja.

30 * @property {FastCommentsUIExtensionCommentBottomCallback} [commentBottom] - (ZASTARELO) Vrne HTML, ki se doda na dno elementa komentarja.

31 * @property {FastCommentsUIExtensionCommentBottomCallback} [commentContentBottom] - Vrne HTML, ki se doda za besedilom komentarja, znotraj elementa vsebine komentarja (uporabljajo ankete).

32 * @property {Function} [replyAreaInputBottom] - Vrne HTML, ki se doda znotraj okvira vnosa komentarja, pod besedilnim vnosom (ankete ga uporabljajo za urejevalnik ankete na mestu). Prejme id nadrejenega komentarja ali null za korensko polje za odgovore.

33 * @property {Function} [onPollUpdate] - Pokliče se s dogodkom v živo, ko se spremenijo števila glasov ankete na strani.

34 * @property {Function} isSiteAdmin - Vrne, ali je gledalec skrbnik ali moderator najemnika. Znano po prvem pridobivanju.

35 * @property {FastCommentsUIExtensionMenuBottomCallback} [menuBottom] - (ZASTARELO) Vrne HTML, ki se doda na dno elementa menija za vsak komentar.

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

45 * @param {Object.<string, Function>} clickListeners - Obdelovalci dogodkov za klike, po imenu razreda, ki jih je mogoče spreminjati po referenci.

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

Interakcija z Extension je preprosta, saj le definiramo reference na funkcije, ki jih želimo izvesti.

Če nadaljujemo prejšnji primer, recimo, da želimo dodati HTML na vrh vsakega komentarja:

Preprosta razširitev - nadaljevanje

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

Kadar koli vrnete HTML takole, bo vgrajen v uporabniški vmesnik prek algoritma za dom-diffing.

Ročno sprožitev ponovnega izrisa komentarja

Lahko počakamo na začetno nalaganje strani in ročno ponovno izrišemo komentar z uporabo reRenderComment:

Ponovni izris komentarja

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 ni obvezen, samo primer.

20 }

21})();

22