Писање екстензија

Скрипт за свако проширење се преузима и извршава пре него што виџет коментара почне да преузима први скуп коментара и да приказује кориснички интерфејс.

При првом учитавању, следећи подаци ће бити додати на објекат проширења:

• config - Референца на објекат config.
• translations - Референца на објекат translations.
• commentsById - Референца на све коментаре по id.
• root - Референца на 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 је јединичан (singleton) и није дељен са другим проширењима.

Даље, да бисмо учитали наше проширење, морамо обавестити видгет за коментаре о њему. На пример:

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

За функционалне примере, погледајте следећи одељак.

Објекат проширења се састоји од следеће дефиниције:

Објекат проширења JSDoc

Copy Run

1

2/**

3 * FastCommentsUI објекат проширења. Користи се за лениво учитавање одређених компоненти. На пример, систем за рецензије није коришћен од свих корисника, па учитавамо то проширење само када нам је потребно.

4 *

5 * @typedef {Object} FastCommentsUIExtension

6 * @property {string} id

7 * @property {Element} scriptNode

8 * @property {Element} root - DOM чвор корена виџета.

9 * @property {string} [css]

10 * @property {Object} config - FastComments конфигурациони објекат.

11 * @property {Object} commentsById - Референца на објекат са свим коментарима по ID-у, који се одржава ажурним.

12 * @property {Object} translations - Референца на све преводе.

13 * @property {Function} reRenderComment - Референца на функцију која се може позвати за поновно рендеровање коментара.

14 * @property {Function} removeCommentAndReRender - Референца на функцију која се може позвати за уклањање коментара из меморије и поновно рендеровање одговарајућег дела DOM-а.

15 * @property {Function} newBroadcastId - Референца на функцију која се може позвати за креирање новог broadcast ID-а и додавање у локални списак broadcast ID-ова за игнорисање.

16 * @property {FastCommentsUIExtensionSetupEventHandlers} [setupEventHandlers]

17 * @property {FastCommentsUIExtensionPrepareCommentForSavingCallback} [prepareCommentForSaving] - Позива се са коментаром који ће бити објављен. Враћа false да би се отказао подношење (на пример када је приложена анкета непотпуна).

18 * @property {FastCommentsUIExtensionNewCommentCallback} [newComment]

19 * @property {FastCommentsUIExtensionReplyAreaFilter} [replyAreaFilter] - Филтрира HTML за област коментара.

20 * @property {FastCommentsUIExtensionWidgetFilter} [widgetFilter] - Филтрира HTML за цео виџет приликом рендеровања.

21 * @property {FastCommentsUIExtensionCommentTopFilter} [commentFilter] - Филтрира HTML за сваки коментар пре рендеровања.

22 * @property {FastCommentsUIExtensionReplyAreaFilter} [commentMenuFilter] - Филтрира HTML за сваки мени коментара пре рендеровања.

23 * @property {FastCommentsUIExtensionMenuFilter} [menuFilter] - Филтрира HTML за цео виџет приликом рендеровања.

24 * @property {FastCommentsUIExtensionReplyAreaTop} [replyAreaTop] - (LEGACY) Враћа HTML који се додаје на врх области одговора.

25 * @property {FastCommentsUIExtensionWidgetTopCallback} [widgetTop] - (LEGACY) Враћа HTML који се додаје на врх виџета.

26 * @property {FastCommentsUIExtensionCommentTopCallback} [commentTop] - (LEGACY) Враћа HTML који се додаје на врх елемента коментара.

27 * @property {FastCommentsUIExtensionCommentBottomCallback} [commentBottom] - (LEGACY) Враћа HTML који се додаје на дно елемента коментара.

28 * @property {FastCommentsUIExtensionCommentBottomCallback} [commentContentBottom] - Враћа HTML који се додаје након текста коментара, унутар елемента садржаја коментара (користи се за анкете).

29 * @property {Function} [replyAreaInputBottom] - Враћа HTML који се додаје у оквир уноса коментара, испод текстуалног уноса (користи се за анкете у уређивачу на месту). Прихвата ID родитељског коментара, или null за коренски оквир одговора.

30 * @property {Function} [onPollUpdate] - Позива се са живим догађајем када се промене бројеви гласова анкете на страници.

31 * @property {Function} isSiteAdmin - Враћа да ли је посматрач администратор или модератор tenancy-а. Познато након првог преузимања.

32 * @property {FastCommentsUIExtensionMenuBottomCallback} [menuBottom] - (LEGACY) Враћа HTML који се додаје на дно мени елемента за сваки коментар.

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

42 * @param {Object.<string, Function>} clickListeners - Хендлери за кликове, по имену класе, који се могу модификовати по референци.

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

Interacting with the Extension is simple, as we simply define references to functions we want invoked.

Да бисмо надоградили претходни пример, рецимо да желимо да додамо 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

Whenever you return HTML like this, it will get merged into the UI via a dom-diffing algorithm.

Ручно покретање поновног рендера коментара

Можемо сачекати почетно учитавање странице и ручно поново рендеровати коментар позивајући 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