각 확장 기능의 스크립트는 댓글 위젯이 첫 번째 댓글 집합을 가져오고 UI를 렌더링하기 시작하기 전에 가져와서 실행됩니다.

초기 로드 시, 다음 데이터가 extension 객체에 추가됩니다:

• 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 객체는 싱글톤이며 다른 확장과 공유되지 않습니다.

다음으로, 확장을 로드하려면 댓글 위젯에 이를 알려야 합니다. 예를 들어:

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 * The FastCommentsUI extension object. Used for lazy-loading certain components. For example, the review system is not

4 * used by all customers, so we only load that extension when we want it.

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 - 새 브로드캐스트 ID를 생성하고 무시할 로컬 브로드캐스트 ID 목록에 추가하기 위해 호출할 수 있는 함수에 대한 참조.

17 * @property {FastCommentsUIExtensionSetupEventHandlers} [setupEventHandlers]

18 * @property {FastCommentsUIExtensionPrepareCommentForSavingCallback} [prepareCommentForSaving]

19 * @property {FastCommentsUIExtensionNewCommentCallback} [newComment]

20 * @property {FastCommentsUIExtensionReplyAreaFilter} [replyAreaFilter] - 댓글 영역의 HTML을 필터합니다.

21 * @property {FastCommentsUIExtensionWidgetFilter} [widgetFilter] - 렌더링 시 전체 위젯의 HTML을 필터합니다.

22 * @property {FastCommentsUIExtensionCommentTopFilter} [commentFilter] - 렌더링 전에 각 댓글의 HTML을 필터합니다.

23 * @property {FastCommentsUIExtensionReplyAreaFilter} [commentMenuFilter] - 각 댓글 메뉴를 렌더링하기 전에 HTML을 필터합니다.

24 * @property {FastCommentsUIExtensionMenuFilter} [menuFilter] - 렌더링 시 전체 위젯의 HTML을 필터합니다.

25 * @property {FastCommentsUIExtensionReplyAreaTop} [replyAreaTop] - (LEGACY) 답글 영역 상단에 추가할 HTML을 반환합니다.

26 * @property {FastCommentsUIExtensionWidgetTopCallback} [widgetTop] - (LEGACY) 위젯 상단에 추가할 HTML을 반환합니다.

27 * @property {FastCommentsUIExtensionCommentTopCallback} [commentTop] - (LEGACY) 댓글 요소 상단에 추가할 HTML을 반환합니다.

28 * @property {FastCommentsUIExtensionCommentBottomCallback} [commentBottom] - (LEGACY) 댓글 요소 하단에 추가할 HTML을 반환합니다.

29 * @property {FastCommentsUIExtensionMenuBottomCallback} [menuBottom] - (LEGACY) 각 댓글의 메뉴 요소 하단에 추가할 HTML을 반환합니다.

30 * @property {FastCommentsUIExtensionRenderCallback} [onRender]

31 * @property {FastCommentsUIExtensionConnectionStatusCallback} [onLiveConnectionStatusUpdate]

32 * @property {FastCommentsUIExtensionInitialRenderCallback} [onInitialRenderComplete]

33 * @property {FastCommentsUIExtensionPresenceUpdateCallback} [onPresenceUpdate]

34 */

35

36/**

37 * @callback FastCommentsUIExtensionSetupEventHandlers

38 * @param {Element} element - 루트 요소.

39 * @param {Object.<string, Function>} clickListeners - 클래스 이름별 클릭 이벤트 핸들러로, 참조를 통해 수정할 수 있습니다.

40 * @returns void

41 */

42

43/**

44 * @callback FastCommentsUIExtensionWidgetTopCallback

45 * @param {Object} moduleData

46 * @returns {string}

47 */

48

49/**

50 * @callback FastCommentsUIExtensionWidgetFilter

51 * @param {Object} moduleData

52 * @param {Object} html

53 * @returns {string}

54 */

55

56/**

57 * @callback FastCommentsUIExtensionCommentTopCallback

58 * @param {Object} comment

59 * @returns {string}

60 */

61

62/**

63 * @callback FastCommentsUIExtensionCommentTopFilter

64 * @param {Object} comment

65 * @param {string} html

66 * @returns {string}

67 */

68

69/**

70 * @callback FastCommentsUIExtensionCommentBottomCallback

71 * @param {Object} comment

72 * @returns {string}

73 */

74

75/**

76 * @callback FastCommentsUIExtensionMenuBottomCallback

77 * @param {Object} comment

78 * @returns {string}

79 */

80

81/**

82 * @callback FastCommentsUIExtensionMenuFilter

83 * @param {Object} comment

84 * @param {string} html

85 * @returns {string}

86 */

87

88/**

89 * @callback FastCommentsUIExtensionRenderCallback

90 * @returns {string}

91 */

92

93/**

94 * @callback FastCommentsUIExtensionConnectionStatusCallback

95 * @param {boolean} isConnected

96 * @returns {void}

97 */

98

99/**

100 * @callback FastCommentsUIExtensionInitialRenderCallback

101 * @returns {void}

102 */

103

104/**

105 * @callback FastCommentsUIExtensionReplyAreaTop

106 * @param {Object|null} currentUser

107 * @param {boolean} isSaving

108 * @param {boolean} isReplyOpen

109 * @param {string|null} parentId

110 * @returns {string}

111 */

112

113/**

114 * @callback FastCommentsUIExtensionReplyAreaFilter

115 * @param {Object|null} currentUser

116 * @param {boolean} isSaving

117 * @param {boolean} isReplyOpen

118 * @param {string|null} parentId

119 * @param {string|null} html

120 * @returns {string}

121 */

122

123/**

124 * @callback FastCommentsUIExtensionPrepareCommentForSavingCallback

125 * @param {Object} comment

126 * @param {string} parentId

127 */

128

129/**

130 * @callback FastCommentsUIExtensionNewCommentCallback

131 * @param {Object} comment

132 */

133

134/**

135 * @callback FastCommentsUIExtensionPresenceUpdateCallback

136 * @param {Object} update

137 */

138

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을 반환하면, dom-diffing 알고리즘을 통해 UI에 병합됩니다.

댓글을 수동으로 다시 렌더링하기

초기 페이지 로드를 기다린 다음 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); // timeout not required, just an example.

20 }

21})();

22