Tworzenie rozszerzeń

Skrypt dla każdego rozszerzenia jest pobierany i uruchamiany zanim widżet komentarzy zacznie pobierać pierwszy zestaw komentarzy i renderować UI.

Na początkowym ładowaniu następujące dane zostaną przypisane do obiektu rozszerzenia:

• config - Odwołanie do obiektu config.
• translations - Odwołanie do obiektu translations.
• commentsById - Odwołanie do wszystkich komentarzy według id.
• root - Odwołanie do głównego węzła DOM.

Rozszerzenia powinny nadpisać pożądane funkcje, które widżet komentarzy wywoła w odpowiednich momentach.

Najmniejsze możliwe rozszerzenie wyglądałoby następująco:

Proste rozszerzenie

Copy Run

1

2(function () {

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

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

5 });

6})();

7

Na potrzeby tego przykładu zapisz to jako my-extension.js i udostępnij pod adresem https://example.com/my-extension.min.js.

To rozszerzenie nic nie robi, poza tym przy wczytaniu pobiera obiekt rozszerzenia utworzony przez główną bibliotekę komentarzy.

This Extension object is a singleton and is not shared with any other extensions.

Aby załadować nasze rozszerzenie, musimy poinformować o tym widżet komentarzy. Na przykład:

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

Przykłady funkcjonalne znajdują się w następnej sekcji.

Obiekt rozszerzenia składa się z następującej definicji:

Obiekt Rozszerzenia JSDoc

Copy Run

1

2/**

3 * Obiekt rozszerzenia FastCommentsUI. Używany do leniwego ładowania niektórych komponentów. Na przykład system recenzji nie jest używany przez wszystkich klientów, więc ładujemy to rozszerzenie tylko wtedy, gdy jest potrzebne.

4 *

5 * @typedef {Object} FastCommentsUIExtension

6 * @property {string} id

7 * @property {Element} scriptNode

8 * @property {Element} root - Główny węzeł DOM widżetu.

9 * @property {string} [css]

10 * @property {Object} config - Obiekt konfiguracyjny FastComments.

11 * @property {Object} commentsById - Odniesienie do obiektu zawierającego wszystkie komentarze według identyfikatora, który jest na bieżąco aktualizowany.

12 * @property {Object} translations - Odniesienie do wszystkich tłumaczeń.

13 * @property {Function} reRenderComment - Odniesienie do funkcji, którą można wywołać, aby ponownie wyrenderować komentarz.

14 * @property {Function} removeCommentAndReRender - Odniesienie do funkcji, którą można wywołać, aby usunąć komentarz z pamięci i ponownie wyrenderować odpowiednią część DOM.

15 * @property {Function} newBroadcastId - Odniesienie do funkcji, którą można wywołać, aby utworzyć nowy identyfikator transmisji i dodać go do lokalnej listy identyfikatorów transmisji do ignorowania.

16 * @property {FastCommentsUIExtensionSetupEventHandlers} [setupEventHandlers]

17 * @property {FastCommentsUIExtensionPrepareCommentForSavingCallback} [prepareCommentForSaving] - Wywoływany z komentarzem, który ma zostać opublikowany. Zwróć false, aby anulować wysyłkę (na przykład gdy dołączona ankieta jest niekompletna).

18 * @property {FastCommentsUIExtensionNewCommentCallback} [newComment]

19 * @property {FastCommentsUIExtensionReplyAreaFilter} [replyAreaFilter] - Filtruje HTML dla obszaru komentarza.

20 * @property {FastCommentsUIExtensionWidgetFilter} [widgetFilter] - Filtruje HTML dla całego widżetu podczas renderowania.

21 * @property {FastCommentsUIExtensionCommentTopFilter} [commentFilter] - Filtruje HTML dla każdego komentarza przed renderowaniem.

22 * @property {FastCommentsUIExtensionReplyAreaFilter} [commentMenuFilter] - Filtruje HTML dla każdego menu komentarza przed renderowaniem.

23 * @property {FastCommentsUIExtensionMenuFilter} [menuFilter] - Filtruje HTML dla całego widżetu podczas renderowania.

24 * @property {FastCommentsUIExtensionReplyAreaTop} [replyAreaTop] - (LEGACY) Zwraca HTML do dodania na górze obszaru odpowiedzi.

25 * @property {FastCommentsUIExtensionWidgetTopCallback} [widgetTop] - (LEGACY) Zwraca HTML do dodania na górze widżetu.

26 * @property {FastCommentsUIExtensionCommentTopCallback} [commentTop] - (LEGACY) Zwraca HTML do dodania na górze elementu komentarza.

27 * @property {FastCommentsUIExtensionCommentBottomCallback} [commentBottom] - (LEGACY) Zwraca HTML do dodania na dole elementu komentarza.

28 * @property {FastCommentsUIExtensionCommentBottomCallback} [commentContentBottom] - Zwraca HTML do dodania po tekście komentarza, wewnątrz elementu zawartości komentarza (używane w ankietach).

29 * @property {Function} [replyAreaInputBottom] - Zwraca HTML do dodania wewnątrz ramki wprowadzania komentarza, pod polem tekstowym (używane w ankietach dla edytora ankiet w miejscu). Otrzymuje identyfikator komentarza nadrzędnego lub null dla głównego pola odpowiedzi.

30 * @property {Function} [onPollUpdate] - Wywoływany przy zdarzeniu na żywo, gdy liczby głosów w ankiecie na stronie się zmieniają.

31 * @property {Function} isSiteAdmin - Zwraca, czy oglądający jest administratorem lub moderatorem najemcy. Znane po pierwszym pobraniu.

32 * @property {FastCommentsUIExtensionMenuBottomCallback} [menuBottom] - (LEGACY) Zwraca HTML do dodania na dole elementu menu dla każdego komentarza.

33 * @property {FastCommentsUIExtensionRenderCallback} [onRender]

34 * @property {FastCommentsUIExtensionConnectionStatusCallback} [onLiveConnectionStatusUpdate]

35 * @property {FastCommentsUIExtensionInitialRenderCallback} [onInitialRenderComplete]

36 * @property {FastCommentsUIExtensionPresenceUpdateCallback} [onPresenceUpdate]

37 */

38

39/**

40 * @callback FastCommentsUIExtensionSetupEventHandlers

41 * @param {Element} element - Główny element.

42 * @param {Object.<string, Function>} clickListeners - Obsługa zdarzeń kliknięć, według nazwy klasy, które mogą być modyfikowane przez referencję.

43 * @returns void

44 */

45

46/**

47 * @callback FastCommentsUIExtensionWidgetTopCallback

48 * @param {Object} moduleData

49 * @returns {string}

50 */

51

52/**

53 * @callback FastCommentsUIExtensionWidgetFilter

54 * @param {Object} moduleData

55 * @param {Object} html

56 * @returns {string}

57 */

58

59/**

60 * @callback FastCommentsUIExtensionCommentTopCallback

61 * @param {Object} comment

62 * @returns {string}

63 */

64

65/**

66 * @callback FastCommentsUIExtensionCommentTopFilter

67 * @param {Object} comment

68 * @param {string} html

69 * @returns {string}

70 */

71

72/**

73 * @callback FastCommentsUIExtensionCommentBottomCallback

74 * @param {Object} comment

75 * @returns {string}

76 */

77

78/**

79 * @callback FastCommentsUIExtensionMenuBottomCallback

80 * @param {Object} comment

81 * @returns {string}

82 */

83

84/**

85 * @callback FastCommentsUIExtensionMenuFilter

86 * @param {Object} comment

87 * @param {string} html

88 * @returns {string}

89 */

90

91/**

92 * @callback FastCommentsUIExtensionRenderCallback

93 * @returns {string}

94 */

95

96/**

97 * @callback FastCommentsUIExtensionConnectionStatusCallback

98 * @param {boolean} isConnected

99 * @returns {void}

100 */

101

102/**

103 * @callback FastCommentsUIExtensionInitialRenderCallback

104 * @returns {void}

105 */

106

107/**

108 * @callback FastCommentsUIExtensionReplyAreaTop

109 * @param {Object|null} currentUser

110 * @param {boolean} isSaving

111 * @param {boolean} isReplyOpen

112 * @param {string|null} parentId

113 * @returns {string}

114 */

115

116/**

117 * @callback FastCommentsUIExtensionReplyAreaFilter

118 * @param {Object|null} currentUser

119 * @param {boolean} isSaving

120 * @param {boolean} isReplyOpen

121 * @param {string|null} parentId

122 * @param {string|null} html

123 * @returns {string}

124 */

125

126/**

127 * @callback FastCommentsUIExtensionPrepareCommentForSavingCallback

128 * @param {Object} comment

129 * @param {string} parentId

130 */

131

132/**

133 * @callback FastCommentsUIExtensionNewCommentCallback

134 * @param {Object} comment

135 */

136

137/**

138 * @callback FastCommentsUIExtensionPresenceUpdateCallback

139 * @param {Object} update

140 */

141

Interakcja z Extension jest prosta — wystarczy zdefiniować odniesienia do funkcji, które chcemy wywołać.

Bazując na wcześniejszym przykładzie, załóżmy, że chcemy dodać HTML na początku każdego komentarza:

Proste rozszerzenie - ciąg dalszy

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

Kiedykolwiek zwrócisz HTML w ten sposób, zostanie on scalony z interfejsem użytkownika za pomocą algorytmu porównywania DOM (dom-diffing).

Ręczne wywoływanie ponownego renderowania komentarza

Możemy poczekać na początkowe załadowanie strony i ręcznie ponownie wyrenderować komentarz, wywołując reRenderComment:

Ponowne renderowanie komentarza

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 nie jest wymagany, to tylko przykład.

20 }

21})();

22