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:

Extension Object JSDoc

Copy Run

1

2/**

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

4 * es utilizado por todos los clientes, por lo que solo cargamos esa extensión cuando la necesitamos.

5 *

6 * @typedef {Object} FastCommentsUIExtension

7 * @property {string} id

8 * @property {Element} scriptNode

9 * @property {Element} root - El nodo raíz DOM 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 puede invocarse para volver a renderizar un comentario.

15 * @property {Function} removeCommentAndReRender - Una referencia a una función que puede invocarse 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 puede invocarse para crear un nuevo broadcast id y añadirlo a la lista local de broadcast ids a ignorar.

17 * @property {FastCommentsUIExtensionSetupEventHandlers} [setupEventHandlers]

18 * @property {FastCommentsUIExtensionPrepareCommentForSavingCallback} [prepareCommentForSaving]

19 * @property {FastCommentsUIExtensionNewCommentCallback} [newComment]

20 * @property {FastCommentsUIExtensionReplyAreaFilter} [replyAreaFilter] - Filtrar el HTML para el área de comentarios.

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

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

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

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

25 * @property {FastCommentsUIExtensionReplyAreaTop} [replyAreaTop] - (LEGADO) Devolver HTML para añadir en la parte superior del área de respuesta.

26 * @property {FastCommentsUIExtensionWidgetTopCallback} [widgetTop] - (LEGADO) Devolver HTML para añadir en la parte superior del widget.

27 * @property {FastCommentsUIExtensionCommentTopCallback} [commentTop] - (LEGADO) Devolver HTML para añadir en la parte superior del elemento de comentario.

28 * @property {FastCommentsUIExtensionCommentBottomCallback} [commentBottom] - (LEGADO) Devolver HTML para añadir en la parte inferior del elemento de comentario.

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

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

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

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

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