Scrivere estensioni

Lo script per ogni estensione viene recuperato e invocato prima che il widget dei commenti inizi a recuperare il primo set di commenti e a renderizzare l'interfaccia utente.

Al caricamento iniziale, i seguenti dati verranno aggiunti all'oggetto dell'estensione:

• config - Un riferimento all'oggetto config.
• translations - Un riferimento all'oggetto translations.
• commentsById - Un riferimento a tutti i commenti per id.
• root - Un riferimento al nodo DOM radice.

Le estensioni dovrebbero sovrascrivere le funzioni desiderate, che il widget dei commenti invocherà nei momenti appropriati.

L'estensione più piccola possibile sarebbe:

Una semplice estensione

Copy Run

1

2(function () {

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

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

5 });

6})();

7

Per questo esempio, salva questo come my-extension.js, e rendilo disponibile a https://example.com/my-extension.min.js.

Questa estensione non fa nulla; al caricamento recupera l'oggetto extension creato dalla libreria principale dei commenti.

Questo oggetto Extension è un singleton e non viene condiviso con altre estensioni.

Successivamente, per caricare la nostra estensione, dobbiamo comunicarlo al widget dei commenti. Ad esempio:

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

Per esempi funzionali, vedi la sezione successiva.

L'oggetto extension è composto dalla seguente definizione:

JSDoc dell'oggetto Extension

Copy Run

1

2/**

3 * L'oggetto extension di FastCommentsUI. Utilizzato per il lazy-loading di alcuni componenti. Ad esempio, il sistema di recensioni non è

4 * utilizzato da tutti i clienti, quindi carichiamo quella extension solo quando la vogliamo.

5 *

6 * @typedef {Object} FastCommentsUIExtension

7 * @property {string} id

8 * @property {Element} scriptNode

9 * @property {Element} root - Il nodo DOM radice del widget.

10 * @property {string} [css]

11 * @property {Object} config - L'oggetto di configurazione di FastComments.

12 * @property {Object} commentsById - Un riferimento a un oggetto con tutti i commenti per id, che viene mantenuto aggiornato.

13 * @property {Object} translations - Un riferimento a tutte le traduzioni.

14 * @property {Function} reRenderComment - Un riferimento a una funzione che può essere invocata per ri-renderizzare un commento.

15 * @property {Function} removeCommentAndReRender - Un riferimento a una funzione che può essere invocata per rimuovere un commento dalla memoria e ri-renderizzare la parte appropriata del DOM.

16 * @property {Function} newBroadcastId - Un riferimento a una funzione che può essere invocata per creare un nuovo broadcast id e aggiungerlo alla lista locale di broadcast id da ignorare.

17 * @property {Function} [withSessionId] - Chiamare con un URL di richiesta e una callback. Invoca la callback con l'URL più l'id di sessione del visualizzatore aggiunto quando i cookie di terze parti sono bloccati (lo stesso percorso usato dalle richieste di commento e voto), oppure l'URL invariato in caso contrario. Quando non è disponibile un id di sessione in quel modo, aggiunge l'id di sessione anonimo fornito più di recente a rememberAnonSessionId, se presente. Non usato per SSO.

18 * @property {Function} [rememberAnonSessionId] - Chiamare con l'anonSessionId restituito da una risposta. Il server lo restituisce solo a un ospite la cui richiesta non aveva cookie di sessione, e mai per una sessione connessa. Viene conservato in localStorage (o in memoria quando lo storage non è disponibile) così che withSessionId lo invii nelle richieste successive e l'ospite mantenga una sola identità.

19 * @property {FastCommentsUIExtensionSetupEventHandlers} [setupEventHandlers]

20 * @property {FastCommentsUIExtensionPrepareCommentForSavingCallback} [prepareCommentForSaving] - Chiamata con il commento che sta per essere pubblicato. Restituire false per annullare l'invio (ad esempio quando un sondaggio allegato è incompleto).

21 * @property {FastCommentsUIExtensionNewCommentCallback} [newComment]

22 * @property {FastCommentsUIExtensionReplyAreaFilter} [replyAreaFilter] - Filtra l'HTML per l'area dei commenti.

23 * @property {FastCommentsUIExtensionWidgetFilter} [widgetFilter] - Filtra l'HTML per l'intero widget al render.

24 * @property {FastCommentsUIExtensionCommentTopFilter} [commentFilter] - Filtra l'HTML per ogni commento prima del render.

25 * @property {FastCommentsUIExtensionReplyAreaFilter} [commentMenuFilter] - Filtra l'HTML per il menu di ogni commento prima del render.

26 * @property {FastCommentsUIExtensionMenuFilter} [menuFilter] - Filtra l'HTML per l'intero widget al render.

27 * @property {FastCommentsUIExtensionReplyAreaTop} [replyAreaTop] - (LEGACY) Restituisce HTML da aggiungere in cima all'area di risposta.

28 * @property {FastCommentsUIExtensionWidgetTopCallback} [widgetTop] - (LEGACY) Restituisce HTML da aggiungere in cima al widget.

29 * @property {FastCommentsUIExtensionCommentTopCallback} [commentTop] - (LEGACY) Restituisce HTML da aggiungere in cima all'elemento del commento.

30 * @property {FastCommentsUIExtensionCommentBottomCallback} [commentBottom] - (LEGACY) Restituisce HTML da aggiungere in fondo all'elemento del commento.

31 * @property {FastCommentsUIExtensionCommentBottomCallback} [commentContentBottom] - Restituisce HTML da aggiungere dopo il testo del commento, dentro l'elemento del contenuto del commento (usato dai sondaggi).

32 * @property {Function} [replyAreaInputBottom] - Restituisce HTML da aggiungere dentro il frame di input dei commenti, sotto il campo di testo (usato dai sondaggi per l'editor del sondaggio in-place). Riceve l'id del commento padre, o null per la casella di risposta principale.

33 * @property {Function} [onPollUpdate] - Chiamata con l'evento live quando i conteggi dei voti di un sondaggio nella pagina cambiano.

34 * @property {Function} isSiteAdmin - Restituisce se il visualizzatore è un amministratore o un moderatore del tenant. Nota dopo il primo fetch.

35 * @property {FastCommentsUIExtensionMenuBottomCallback} [menuBottom] - (LEGACY) Restituisce HTML da aggiungere in fondo all'elemento del menu per ogni commento.

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 - L'elemento radice.

45 * @param {Object.<string, Function>} clickListeners - Gli event handler per i click, per nome classe, che possono essere modificati per riferimento.

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

Interagire con l'Extension è semplice, poiché definiamo semplicemente riferimenti alle funzioni che vogliamo vengano invocate.

Per continuare l'esempio precedente, diciamo che vogliamo aggiungere HTML in cima a ogni commento:

Una semplice estensione - Continua

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

Ogni volta che restituisci HTML come questo, verrà integrato nella UI tramite un algoritmo di dom-diffing.

Trigger manuale del re-render di un commento

Possiamo attendere il caricamento iniziale della pagina e rieseguire manualmente il render di un commento invocando reRenderComment:

Re-Render di un Commento

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 non richiesto, solo un esempio.

20 }

21})();

22