Erweiterungen schreiben

Das Skript für jede Erweiterung wird abgerufen und aufgerufen, bevor das Kommentar-Widget beginnt, das erste Set von Kommentaren abzurufen und die Benutzeroberfläche zu rendern.

Beim ersten Laden werden die folgenden Daten dem Erweiterungsobjekt angehängt:

• config - Eine Referenz auf das config-Objekt.
• translations - Eine Referenz auf das translations-Objekt.
• commentsById - Eine Referenz auf alle Kommentare nach ID.
• root - Eine Referenz auf den Root-DOM-Knoten.

Erweiterungen sollten die gewünschten Funktionen überschreiben, die das Kommentar-Widget zu den entsprechenden Zeitpunkten aufrufen wird.

Die kleinstmögliche Erweiterung wäre:

Eine einfache Erweiterung

Copy Run

1

2(function () {

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

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

5 });

6})();

7

Für dieses Beispiel speichern Sie dies als my-extension.js und machen es unter https://example.com/my-extension.min.js verfügbar.

Diese Erweiterung macht nichts, außer dass sie beim Laden das von der Core-Kommentarbibliothek erstellte Erweiterungsobjekt abruft.

Dieses Extension-Objekt ist ein Singleton und wird mit keiner anderen Erweiterung geteilt.

Als Nächstes müssen wir, um unsere Erweiterung zu laden, das Kommentar-Widget darüber informieren. Zum Beispiel:

Verwendung einer benutzerdefinierten Erweiterung

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

Funktionale Beispiele finden Sie im nächsten Abschnitt.

Das Extension-Objekt besteht aus folgender Definition:

Extension-Objekt JSDoc

Copy Run

1

2/**

3 * Das FastCommentsUI Extension-Objekt. Wird für das Lazy-Loading bestimmter Komponenten verwendet. Zum Beispiel wird das

4 * Review-System nicht von allen Kunden genutzt, daher laden wir diese Extension nur, wenn wir sie benötigen.

5 *

6 * @typedef {Object} FastCommentsUIExtension

7 * @property {string} id

8 * @property {Element} scriptNode

9 * @property {Element} root - Der DOM-Wurzelknoten des Widgets.

10 * @property {string} [css]

11 * @property {Object} config - Das FastComments config-Objekt.

12 * @property {Object} commentsById - Eine Referenz auf ein Objekt mit allen Kommentaren nach ID, das aktuell gehalten wird.

13 * @property {Object} translations - Eine Referenz auf alle Übersetzungen.

14 * @property {Function} reRenderComment - Eine Referenz auf eine Funktion, die aufgerufen werden kann, um einen Kommentar neu zu rendern.

15 * @property {Function} removeCommentAndReRender - Eine Referenz auf eine Funktion, die aufgerufen werden kann, um einen Kommentar aus dem Speicher zu entfernen und den entsprechenden Teil des DOM neu zu rendern.

16 * @property {Function} newBroadcastId - Eine Referenz auf eine Funktion, die aufgerufen werden kann, um eine neue Broadcast-ID zu erstellen und sie zur lokalen Liste der zu ignorierenden Broadcast-IDs hinzuzufügen.

17 * @property {Function} [withSessionId] - Mit einer Request-URL und einem Callback aufrufen. Ruft den Callback mit der URL plus der angehängten Session-ID des Betrachters auf, wenn Third-Party-Cookies blockiert sind (derselbe Pfad, den Kommentar- und Vote-Requests verwenden), andernfalls mit der unveränderten URL. Wenn auf diese Weise keine Session-ID verfügbar ist, wird die anonyme Session-ID angehängt, die zuletzt an rememberAnonSessionId übergeben wurde, falls vorhanden. Wird nicht für SSO verwendet.

18 * @property {Function} [rememberAnonSessionId] - Mit der anonSessionId aufrufen, die eine Antwort zurückgegeben hat. Der Server gibt eine nur an einen Gast zurück, dessen Request keinen Session-Cookie hatte, und nie für eine eingeloggte Session. Sie wird in localStorage gespeichert (oder im Speicher, wenn Storage nicht verfügbar ist), damit withSessionId sie bei späteren Requests sendet und der Gast eine Identität behält.

19 * @property {FastCommentsUIExtensionSetupEventHandlers} [setupEventHandlers]

20 * @property {FastCommentsUIExtensionPrepareCommentForSavingCallback} [prepareCommentForSaving] - Wird mit dem Kommentar aufgerufen, der gerade gepostet werden soll. Gib false zurück, um das Absenden abzubrechen (z. B. wenn eine angehängte Umfrage unvollständig ist).

21 * @property {FastCommentsUIExtensionNewCommentCallback} [newComment]

22 * @property {FastCommentsUIExtensionReplyAreaFilter} [replyAreaFilter] - Filtert HTML für den Kommentarbereich.

23 * @property {FastCommentsUIExtensionWidgetFilter} [widgetFilter] - Filtert HTML für das gesamte Widget beim Rendern.

24 * @property {FastCommentsUIExtensionCommentTopFilter} [commentFilter] - Filtert HTML für jeden Kommentar vor dem Rendern.

25 * @property {FastCommentsUIExtensionReplyAreaFilter} [commentMenuFilter] - Filtert HTML für das Menü jedes Kommentars vor dem Rendern.

26 * @property {FastCommentsUIExtensionMenuFilter} [menuFilter] - Filtert HTML für das gesamte Widget beim Rendern.

27 * @property {FastCommentsUIExtensionReplyAreaTop} [replyAreaTop] - (LEGACY) Gibt HTML zurück, das am oberen Rand des Antwortbereichs hinzugefügt wird.

28 * @property {FastCommentsUIExtensionWidgetTopCallback} [widgetTop] - (LEGACY) Gibt HTML zurück, das am oberen Rand des Widgets hinzugefügt wird.

29 * @property {FastCommentsUIExtensionCommentTopCallback} [commentTop] - (LEGACY) Gibt HTML zurück, das am oberen Rand des Kommentar-Elements hinzugefügt wird.

30 * @property {FastCommentsUIExtensionCommentBottomCallback} [commentBottom] - (LEGACY) Gibt HTML zurück, das am unteren Rand des Kommentar-Elements hinzugefügt wird.

31 * @property {FastCommentsUIExtensionCommentBottomCallback} [commentContentBottom] - Gibt HTML zurück, das nach dem Kommentartext innerhalb des Kommentar-Inhalts-Elements hinzugefügt wird (von Umfragen verwendet).

32 * @property {Function} [replyAreaInputBottom] - Gibt HTML zurück, das innerhalb des Kommentar-Eingaberahmens unterhalb des Texteingabefelds hinzugefügt wird (von Umfragen für den Umfrage-Editor an Ort und Stelle verwendet). Erhält die ID des übergeordneten Kommentars oder null für das Root-Antwortfeld.

33 * @property {Function} [onPollUpdate] - Wird mit dem Live-Event aufgerufen, wenn sich die Stimmenzahlen einer Umfrage auf der Seite ändern.

34 * @property {Function} isSiteAdmin - Gibt zurück, ob der Betrachter ein Admin oder Moderator des Tenants ist. Nach dem ersten Fetch bekannt.

35 * @property {FastCommentsUIExtensionMenuBottomCallback} [menuBottom] - (LEGACY) Gibt HTML zurück, das am unteren Rand des Menü-Elements für jeden Kommentar hinzugefügt wird.

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 - Das Root-Element.

45 * @param {Object.<string, Function>} clickListeners - Die Event-Handler für Klicks, nach Klassenname, die per Referenz geändert werden können.

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

Die Interaktion mit der Extension ist einfach, da wir lediglich Verweise auf Funktionen definieren, die aufgerufen werden sollen.

Um am vorherigen Beispiel anzuknüpfen, nehmen wir an, wir möchten HTML am Anfang jedes Kommentars hinzufügen:

Eine einfache Erweiterung - Fortsetzung

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

Wann immer Sie auf diese Weise HTML zurückgeben, wird es mittels eines DOM-Diffing-Algorithmus in die UI integriert.

Manuelles Auslösen des erneuten Renderns eines Kommentars

Wir können auf das initiale Laden der Seite warten und einen Kommentar manuell neu rendern, indem wir reRenderComment aufrufen:

Einen Kommentar neu rendern

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 nicht erforderlich, nur ein Beispiel.

20 }

21})();

22