Написання розширень

Скрипт для кожного розширення завантажується та виконується до того, як віджет коментарів почне завантажувати перший набір коментарів і відображати інтерфейс користувача.

На початковому завантаженні до об'єкта розширення буде додано такі дані:

• config - Посилання на об'єкт config.
• translations - Посилання на об'єкт translations.
• commentsById - Посилання на всі коментарі за id.
• root - Посилання на кореневий DOM-вузол.

Розширення повинні перевизначити необхідні функції, які віджет коментарів викликатиме у відповідні моменти.

Найпростіше можливе розширення виглядатиме так:

Просте розширення

Copy Run

1

2(function () {

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

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

5 });

6})();

7

Для цілей цього прикладу збережіть його як my-extension.js і зробіть доступним за адресою https://example.com/my-extension.min.js.

Це розширення нічого не робить, окрім того, що під час завантаження воно отримує об'єкт розширення, створений основною бібліотекою коментарів.

Цей об'єкт 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

Функціональні приклади дивіться в наступному розділі.

Об'єкт розширення складається з наступного визначення:

JSDoc об'єкта розширення

Copy Run

1

2/**

3 * Об'єкт розширення FastCommentsUI. Використовується для лінивого завантаження певних компонентів. Наприклад, систему відгуків

4 * використовують не всі клієнти, тому ми завантажуємо це розширення лише тоді, коли воно потрібне.

5 *

6 * @typedef {Object} FastCommentsUIExtension

7 * @property {string} id

8 * @property {Element} scriptNode

9 * @property {Element} root - Кореневий DOM-вузол віджета.

10 * @property {string} [css]

11 * @property {Object} config - Об'єкт конфігурації FastComments.

12 * @property {Object} commentsById - Посилання на об'єкт з усіма коментарями за id, який постійно оновлюється.

13 * @property {Object} translations - Посилання на всі переклади.

14 * @property {Function} reRenderComment - Посилання на функцію, яку можна викликати для повторного рендерингу коментаря.

15 * @property {Function} removeCommentAndReRender - Посилання на функцію, яку можна викликати, щоб видалити коментар з пам'яті та повторно відрендерити відповідну частину DOM.

16 * @property {Function} newBroadcastId - Посилання на функцію, яку можна викликати, щоб створити новий broadcast id і додати його до локального списку broadcast id, які слід ігнорувати.

17 * @property {Function} [withSessionId] - Викликається з URL запиту та колбеком. Викликає колбек з URL, до якого додано ідентифікатор сесії глядача, коли сторонні cookie заблоковані (той самий шлях, який використовують запити коментарів і голосів), або з незміненим URL в іншому випадку. Коли ідентифікатор сесії таким чином недоступний, додає останній анонімний ідентифікатор сесії, переданий до rememberAnonSessionId, якщо він є. Не використовується для SSO.

18 * @property {Function} [rememberAnonSessionId] - Викликається з anonSessionId, який повернула відповідь. Сервер повертає його лише гостю, чий запит не містив cookie сесії, і ніколи для авторизованої сесії. Він зберігається в localStorage (або в пам'яті, коли сховище недоступне), щоб withSessionId надсилав його в наступних запитах і гість зберігав одну ідентичність.

19 * @property {FastCommentsUIExtensionSetupEventHandlers} [setupEventHandlers]

20 * @property {FastCommentsUIExtensionPrepareCommentForSavingCallback} [prepareCommentForSaving] - Викликається з коментарем, який готується до публікації. Поверніть false, щоб скасувати надсилання (наприклад, коли прикріплене опитування не завершене).

21 * @property {FastCommentsUIExtensionNewCommentCallback} [newComment]

22 * @property {FastCommentsUIExtensionReplyAreaFilter} [replyAreaFilter] - Фільтр HTML для області коментарів.

23 * @property {FastCommentsUIExtensionWidgetFilter} [widgetFilter] - Фільтр HTML для всього віджета під час рендерингу.

24 * @property {FastCommentsUIExtensionCommentTopFilter} [commentFilter] - Фільтр HTML для кожного коментаря перед рендерингом.

25 * @property {FastCommentsUIExtensionReplyAreaFilter} [commentMenuFilter] - Фільтр HTML для меню кожного коментаря перед рендерингом.

26 * @property {FastCommentsUIExtensionMenuFilter} [menuFilter] - Фільтр HTML для всього віджета під час рендерингу.

27 * @property {FastCommentsUIExtensionReplyAreaTop} [replyAreaTop] - (LEGACY) Повертає HTML, який додається у верхню частину області відповіді.

28 * @property {FastCommentsUIExtensionWidgetTopCallback} [widgetTop] - (LEGACY) Повертає HTML, який додається у верхню частину віджета.

29 * @property {FastCommentsUIExtensionCommentTopCallback} [commentTop] - (LEGACY) Повертає HTML, який додається у верхню частину елемента коментаря.

30 * @property {FastCommentsUIExtensionCommentBottomCallback} [commentBottom] - (LEGACY) Повертає HTML, який додається в нижню частину елемента коментаря.

31 * @property {FastCommentsUIExtensionCommentBottomCallback} [commentContentBottom] - Повертає HTML, який додається після тексту коментаря, всередині елемента вмісту коментаря (використовується опитуваннями).

32 * @property {Function} [replyAreaInputBottom] - Повертає HTML, який додається всередині рамки поля коментаря, під текстовим полем (використовується опитуваннями для вбудованого редактора опитувань). Отримує id батьківського коментаря або null для кореневого поля відповіді.

33 * @property {Function} [onPollUpdate] - Викликається з live-подією, коли змінюються кількості голосів опитування на сторінці.

34 * @property {Function} isSiteAdmin - Повертає, чи є глядач адміністратором або модератором орендаря. Відомо після першого запиту.

35 * @property {FastCommentsUIExtensionMenuBottomCallback} [menuBottom] - (LEGACY) Повертає HTML, який додається в нижню частину елемента меню для кожного коментаря.

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 - Кореневий елемент.

45 * @param {Object.<string, Function>} clickListeners - Обробники подій кліків, за назвою класу, які можна змінювати за посиланням.

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

Взаємодія з Extension проста: ми просто визначаємо посилання на функції, які хочемо викликати.

Продовжуючи попередній приклад, припустімо, що ми хочемо додати HTML зверху кожного коментаря:

Просте розширення — продовження

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

Коли ви повертаєте HTML таким чином, він буде об'єднаний з UI за допомогою алгоритму dom-diffing.

Ручний повторний рендер коментаря

Ми можемо дочекатися початкового завантаження сторінки і вручну повторно відрендерити коментар, викликавши reRenderComment:

Повторний рендер коментаря

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); // таймаут не обов'язковий, просто приклад.

20 }

21})();

22