Escribir extensiones

El script de cada extensión se obtiene e invoca antes de que el widget de comentarios comience a obtener el primer conjunto de comentarios y a renderizar la interfaz de usuario.

En la carga inicial, los siguientes datos se anexarán al objeto de la extensión:

• config - A reference to the config object.
• translations - A reference to the translations object.
• commentsById - A reference to all comments by id.
• root - A reference to the root DOM node.

Las extensiones deben sobrescribir las funciones deseadas, que el widget de comentarios invocará en los momentos apropiados.

La extensión más pequeña posible sería:

Una extensión simple

Copy Run

1

2(function () {

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

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

5 });

6})();

7

Para este ejemplo, guárdalo como my-extension.js, y ponlo disponible en https://example.com/my-extension.min.js.

Esta extensión no hace nada; excepto que al cargarse recupera el objeto de extensión creado por la biblioteca principal de comentarios.

Este objeto Extension es una instancia única y no se comparte con ninguna otra extensión.

A continuación, para cargar nuestra extensión, tenemos que informar al widget de comentarios sobre ella. Por ejemplo:

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

Para ejemplos funcionales, vea la siguiente sección.

El objeto de extensión consiste en la siguiente definición:

JSDoc del objeto de extensión

Copy Run

1

2/**

3 * El objeto de extensión de FastCommentsUI. Se usa para la carga diferida de ciertos componentes. Por ejemplo, el sistema de reseñas no es

4 * usado por todos los clientes, por lo que solo cargamos esa extensión cuando la queremos.

5 *

6 * @typedef {Object} FastCommentsUIExtension

7 * @property {string} id

8 * @property {Element} scriptNode

9 * @property {Element} root - El nodo DOM raíz del widget.

10 * @property {string} [css]

11 * @property {Object} config - El objeto de configuración de FastComments.

12 * @property {Object} commentsById - Una referencia a un objeto con todos los comentarios por id, que se mantiene actualizado.

13 * @property {Object} translations - Una referencia a todas las traducciones.

14 * @property {Function} reRenderComment - Una referencia a una función que se puede invocar para volver a renderizar un comentario.

15 * @property {Function} removeCommentAndReRender - Una referencia a una función que se puede invocar para eliminar un comentario de la memoria y volver a renderizar la parte correspondiente del DOM.

16 * @property {Function} newBroadcastId - Una referencia a una función que se puede invocar para crear un nuevo id de difusión y añadirlo a la lista local de ids de difusión a ignorar.

17 * @property {Function} [withSessionId] - Se llama con una URL de solicitud y un callback. Invoca el callback con la URL más el id de sesión del espectador añadido cuando las cookies de terceros están bloqueadas (la misma ruta que usan las solicitudes de comentario y voto), o la URL sin cambios en caso contrario. Cuando no hay un id de sesión disponible de esa manera, añade el id de sesión anónima dado por última vez a rememberAnonSessionId, si existe. No se usa para SSO.

18 * @property {Function} [rememberAnonSessionId] - Se llama con el anonSessionId que devolvió una respuesta. El servidor solo devuelve uno a un invitado cuya solicitud no tenía cookie de sesión, y nunca para una sesión iniciada. Se guarda en localStorage (o en memoria cuando el almacenamiento no está disponible) para que withSessionId lo envíe en solicitudes posteriores y el invitado mantenga una sola identidad.

19 * @property {FastCommentsUIExtensionSetupEventHandlers} [setupEventHandlers]

20 * @property {FastCommentsUIExtensionPrepareCommentForSavingCallback} [prepareCommentForSaving] - Se llama con el comentario que está a punto de publicarse. Devuelve false para cancelar el envío (por ejemplo, cuando una encuesta adjunta está incompleta).

21 * @property {FastCommentsUIExtensionNewCommentCallback} [newComment]

22 * @property {FastCommentsUIExtensionReplyAreaFilter} [replyAreaFilter] - Filtra el HTML del área de comentarios.

23 * @property {FastCommentsUIExtensionWidgetFilter} [widgetFilter] - Filtra el HTML de todo el widget al renderizar.

24 * @property {FastCommentsUIExtensionCommentTopFilter} [commentFilter] - Filtra el HTML de cada comentario antes de renderizar.

25 * @property {FastCommentsUIExtensionReplyAreaFilter} [commentMenuFilter] - Filtra el HTML del menú de cada comentario antes de renderizar.

26 * @property {FastCommentsUIExtensionMenuFilter} [menuFilter] - Filtra el HTML de todo el widget al renderizar.

27 * @property {FastCommentsUIExtensionReplyAreaTop} [replyAreaTop] - (OBSOLETO) Devuelve HTML para añadir a la parte superior del área de respuestas.

28 * @property {FastCommentsUIExtensionWidgetTopCallback} [widgetTop] - (OBSOLETO) Devuelve HTML para añadir a la parte superior del widget.

29 * @property {FastCommentsUIExtensionCommentTopCallback} [commentTop] - (OBSOLETO) Devuelve HTML para añadir a la parte superior del elemento del comentario.

30 * @property {FastCommentsUIExtensionCommentBottomCallback} [commentBottom] - (OBSOLETO) Devuelve HTML para añadir a la parte inferior del elemento del comentario.

31 * @property {FastCommentsUIExtensionCommentBottomCallback} [commentContentBottom] - Devuelve HTML para añadir después del texto del comentario, dentro del elemento de contenido del comentario (usado por las encuestas).

32 * @property {Function} [replyAreaInputBottom] - Devuelve HTML para añadir dentro del marco de entrada de comentarios, debajo del campo de texto (usado por las encuestas para el editor de encuestas en el lugar). Recibe el id del comentario padre, o null para el cuadro de respuesta raíz.

33 * @property {Function} [onPollUpdate] - Se llama con el evento en vivo cuando cambian los recuentos de votos de una encuesta en la página.

34 * @property {Function} isSiteAdmin - Devuelve si el espectador es administrador o moderador del tenant. Se conoce después de la primera petición.

35 * @property {FastCommentsUIExtensionMenuBottomCallback} [menuBottom] - (OBSOLETO) Devuelve HTML para añadir a la parte inferior del elemento de menú de cada comentario.

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 - El elemento raíz.

45 * @param {Object.<string, Function>} clickListeners - Los manejadores de eventos para clics, por nombre de clase, que pueden modificarse por referencia.

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

Interactuar con la Extension es sencillo, ya que simplemente definimos referencias a las funciones que queremos invocar.

Para basarnos en el ejemplo anterior, digamos que queremos añadir HTML al principio de cada comentario:

Una extensión simple - Continuación

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

Cada vez que devuelvas HTML así, se fusionará en la interfaz mediante un algoritmo de dom-diffing.

Volver a renderizar un comentario manualmente

Podemos esperar a la carga inicial de la página y volver a renderizar manualmente un comentario invocando reRenderComment:

Volver a renderizar un comentario

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); // el timeout no es necesario, solo un ejemplo.

20 }

21})();

22