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

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

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

• 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]

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 {FastCommentsUIReplyAreaTop} [replyAreaTop] - (LEGACY) Враћа HTML који се додаје на врх области одговора.

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

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

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

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

29 * @property {FastCommentsUIExtensionRenderCallback} [onRender]

30 * @property {FastCommentsUIExtensionConnectionStatusCallback} [onLiveConnectionStatusUpdate]

31 * @property {FastCommentsUIExtensionInitialRenderCallback} [onInitialRenderComplete]

32 * @property {FastCommentsUIExtensionPresenceUpdateCallback} [onPresenceUpdate]

33 */

34

35/**

36 * @callback FastCommentsUIExtensionSetupEventHandlers

37 * @param {Element} element - Корени елемент.

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

39 * @returns void

40 */

41

42/**

43 * @callback FastCommentsUIExtensionWidgetTopCallback

44 * @param {Object} moduleData

45 * @returns {string}

46 */

47

48/**

49 * @callback FastCommentsUIExtensionWidgetFilter

50 * @param {Object} moduleData

51 * @param {Object} html

52 * @returns {string}

53 */

54

55/**

56 * @callback FastCommentsUIExtensionCommentTopCallback

57 * @param {Object} comment

58 * @returns {string}

59 */

60

61/**

62 * @callback FastCommentsUIExtensionCommentTopFilter

63 * @param {Object} comment

64 * @param {string} html

65 * @returns {string}

66 */

67

68/**

69 * @callback FastCommentsUIExtensionCommentBottomCallback

70 * @param {Object} comment

71 * @returns {string}

72 */

73

74/**

75 * @callback FastCommentsUIExtensionMenuBottomCallback

76 * @param {Object} comment

77 * @returns {string}

78 */

79

80/**

81 * @callback FastCommentsUIExtensionMenuFilter

82 * @param {Object} comment

83 * @param {string} html

84 * @returns {string}

85 */

86

87/**

88 * @callback FastCommentsUIExtensionRenderCallback

89 * @returns {string}

90 */

91

92/**

93 * @callback FastCommentsUIExtensionConnectionStatusCallback

94 * @param {boolean} isConnected

95 * @returns {void}

96 */

97

98/**

99 * @callback FastCommentsUIExtensionInitialRenderCallback

100 * @returns {void}

101 */

102

103/**

104 * @callback FastCommentsUIExtensionReplyAreaTop

105 * @param {Object|null} currentUser

106 * @param {boolean} isSaving

107 * @param {boolean} isReplyOpen

108 * @param {string|null} parentId

109 * @returns {string}

110 */

111

112/**

113 * @callback FastCommentsUIExtensionReplyAreaFilter

114 * @param {Object|null} currentUser

115 * @param {boolean} isSaving

116 * @param {boolean} isReplyOpen

117 * @param {string|null} parentId

118 * @param {string|null} html

119 * @returns {string}

120 */

121

122/**

123 * @callback FastCommentsUIExtensionPrepareCommentForSavingCallback

124 * @param {Object} comment

125 * @param {string} parentId

126 */

127

128/**

129 * @callback FastCommentsUIExtensionNewCommentCallback

130 * @param {Object} comment

131 */

132

133/**

134 * @callback FastCommentsUIExtensionPresenceUpdateCallback

135 * @param {Object} update

136 */

137

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