Eklenti Yazma

Her uzantı için betik, yorum bileşeni ilk yorum kümesini almaya ve kullanıcı arayüzünü oluşturmaya başlamadan önce alınır ve çalıştırılır.

İlk yüklemede, aşağıdaki veriler uzantı nesnesine eklenecektir:

• config - config nesnesine bir referans.
• translations - translations nesnesine bir referans.
• commentsById - id'ye göre tüm yorumların bir referansı.
• root - kök DOM düğümüne bir referans.

Uzantılar, yorum bileşeninin uygun zamanlarda çağıracağı istenen işlevleri geçersiz kılmalıdır.

Olabilecek en küçük uzantı şöyle olur:

Basit Bir Uzantı

Copy Run

1

2(function () {

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

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

5 });

6})();

7

Bu örnek için bunu my-extension.js olarak kaydedin ve https://example.com/my-extension.min.js adresinde erişilebilir hale getirin.

Bu uzantı herhangi bir şey yapmaz; yüklenince çekirdek yorum kütüphanesi tarafından oluşturulan uzantı nesnesini alır.

Bu Extension nesnesi tekil (singleton) bir nesnedir ve diğer uzantılarla paylaşılmaz.

Sonraki adım, uzantımızı yüklemek için yorum widget'ına bunu bildirmektir. Örneğin:

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

İşlevsel örnekler için bir sonraki bölüme bakın.

The extension object consists of the following definition:

Uzantı Nesnesi JSDoc

Copy Run

1

2/**

3 * FastCommentsUI uzantı nesnesi. Belirli bileşenlerin tembel yüklenmesi için kullanılır. Örneğin, inceleme sistemi tüm müşteriler tarafından kullanılmaz, bu yüzden bu uzantıyı yalnızca ihtiyacımız olduğunda yükleriz.

4 *

5 * @typedef {Object} FastCommentsUIExtension

6 * @property {string} id

7 * @property {Element} scriptNode

8 * @property {Element} root - Widget'ın kök DOM düğümü.

9 * @property {string} [css]

10 * @property {Object} config - FastComments yapılandırma nesnesi.

11 * @property {Object} commentsById - Tüm yorumların kimliğe göre bulunduğu bir nesneye referans, güncel tutulur.

12 * @property {Object} translations - Tüm çevirilere bir referans.

13 * @property {Function} reRenderComment - Bir yorumu yeniden renderlamak için çağrılabilecek bir fonksiyona referans.

14 * @property {Function} removeCommentAndReRender - Yorum

15

16u bellekten kaldırmak ve DOM'un ilgili kısmını yeniden renderlamak için çağrılabilecek bir fonksiyona referans.

17 * @property {Function} newBroadcastId - Yeni bir yayın kimliği oluşturmak ve bunu yok sayılacak yerel yayın kimliği listesine eklemek için çağrılabilecek bir fonksiyona referans.

18 * @property {FastCommentsUIExtensionSetupEventHandlers} [setupEventHandlers]

19 * @property {FastCommentsUIExtensionPrepareCommentForSavingCallback} [prepareCommentForSaving] - Gönderilmek üzere olan yorumla birlikte çağrılır. Gönderimi iptal etmek için false döndürün (örneğin ekli anket eksik olduğunda).

20 * @property {FastCommentsUIExtensionNewCommentCallback} [newComment]

21 * @property {FastCommentsUIExtensionReplyAreaFilter} [replyAreaFilter] - Yorum alanı için HTML'i filtrele.

22 * @property {FastCommentsUIExtensionWidgetFilter} [widgetFilter] - Tüm widget'ın render sırasında HTML'ini filtrele.

23 * @property {FastCommentsUIExtensionCommentTopFilter} [commentFilter] - Render öncesinde her yorum için HTML'i filtrele.

24 * @property {FastCommentsUIExtensionReplyAreaFilter} [commentMenuFilter] - Render öncesinde her yorum menüsü için HTML'i filtrele.

25 * @property {FastCommentsUIExtensionMenuFilter} [menuFilter] - Render sırasında tüm widget için HTML'i filtrele.

26 * @property {FastCommentsUIExtensionReplyAreaTop} [replyAreaTop] - (ESKİ) Yanıt alanının üstüne eklemek için HTML döndür.

27 * @property {FastCommentsUIExtensionWidgetTopCallback} [widgetTop] - (ESKİ) Widget'ın üstüne eklemek için HTML döndür.

28 * @property {FastCommentsUIExtensionCommentTopCallback} [commentTop] - (ESKİ) Yorum öğesinin üstüne eklemek için HTML döndür.

29 * @property {FastCommentsUIExtensionCommentBottomCallback} [commentBottom] - (ESKİ) Yorum öğesinin altına eklemek için HTML döndür.

30 * @property {FastCommentsUIExtensionCommentBottomCallback} [commentContentBottom] - Yorum metninden sonra, yorum içeriği öğesi içinde eklemek için HTML döndür (anketler tarafından kullanılır).

31 * @property {Function} [replyAreaInputBottom] - Metin girişinin altında, yorum giriş çerçevesi içinde eklemek için HTML döndür (yerinde anket düzenleyicisi için anketler tarafından kullanılır). Üst yorum kimliğini alır, kök yanıt kutusu için null olabilir.

32 * @property {Function} [onPollUpdate] - Sayfadaki bir anketin oy sayıları değiştiğinde canlı olayla birlikte çağrılır.

33 * @property {Function} isSiteAdmin - Görüntüleyicinin kiracının yöneticisi veya moderatörü olup olmadığını döndürür. İlk getirme işleminden sonra bilinir.

34 * @property {FastCommentsUIExtensionMenuBottomCallback} [menuBottom] - (ESKİ) Her yorum için menü öğesinin altına eklemek için HTML döndür.

35 * @property {FastCommentsUIExtensionRenderCallback} [onRender]

36 * @property {FastCommentsUIExtensionConnectionStatusCallback} [onLiveConnectionStatusUpdate]

37 * @property {FastCommentsUIExtensionInitialRenderCallback} [onInitialRenderComplete]

38 * @property {FastCommentsUIExtensionPresenceUpdateCallback} [onPresenceUpdate]

39 */

40

41/**

42 * @callback FastCommentsUIExtensionSetupEventHandlers

43 * @param {Element} element - Kök öğe.

44 * @param {Object.<string, Function>} clickListeners - Sınıf adına göre tıklama olay işleyicileri, referansla değiştirilebilir.

45 * @returns void

46 */

47

48/**

49 * @callback FastCommentsUIExtensionWidgetTopCallback

50 * @param {Object} moduleData

51 * @returns {string}

52 */

53

54/**

55 * @callback FastCommentsUIExtensionWidgetFilter

56 * @param {Object} moduleData

57 * @param {Object} html

58 * @returns {string}

59 */

60

61/**

62 * @callback FastCommentsUIExtensionCommentTopCallback

63 * @param {Object} comment

64 * @returns {string}

65 */

66

67/**

68 * @callback FastCommentsUIExtensionCommentTopFilter

69 * @param {Object} comment

70 * @param {string} html

71 * @returns {string}

72 */

73

74/**

75 * @callback FastCommentsUIExtensionCommentBottomCallback

76 * @param {Object} comment

77 * @returns {string}

78 */

79

80/**

81 * @callback FastCommentsUIExtensionMenuBottomCallback

82 * @param {Object} comment

83 * @returns {string}

84 */

85

86/**

87 * @callback FastCommentsUIExtensionMenuFilter

88 * @param {Object} comment

89 * @param {string} html

90 * @returns {string}

91 */

92

93/**

94 * @callback FastCommentsUIExtensionRenderCallback

95 * @returns {string}

96 */

97

98/**

99 * @callback FastCommentsUIExtensionConnectionStatusCallback

100 * @param {boolean} isConnected

101 * @returns {void}

102 */

103

104/**

105 * @callback FastCommentsUIExtensionInitialRenderCallback

106 * @returns {void}

107 */

108

109/**

110 * @callback FastCommentsUIExtensionReplyAreaTop

111 * @param {Object|null} currentUser

112 * @param {boolean} isSaving

113 * @param {boolean} isReplyOpen

114 * @param {string|null} parentId

115 * @returns {string}

116 */

117

118/**

119 * @callback FastCommentsUIExtensionReplyAreaFilter

120 * @param {Object|null} currentUser

121 * @param {boolean} isSaving

122 * @param {boolean} isReplyOpen

123 * @param {string|null} parentId

124 * @param {string|null} html

125 * @returns {string}

126 */

127

128/**

129 * @callback FastCommentsUIExtensionPrepareCommentForSavingCallback

130 * @param {Object} comment

131 * @param {string} parentId

132 */

133

134/**

135 * @callback FastCommentsUIExtensionNewCommentCallback

136 * @param {Object} comment

137 */

138

139/**

140 * @callback FastCommentsUIExtensionPresenceUpdateCallback

141 * @param {Object} update

142 */

143

Extension ile etkileşim basittir; çağrılmasını istediğimiz fonksiyonlara referanslar tanımlamak yeterlidir.

Önceki örnekten yola çıkarak, her yorumun üstüne HTML eklemek istediğimizi varsayalım:

Basit Bir Eklenti - Devam

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

Böyle HTML döndürdüğünüzde, dom-diffing algoritması aracılığıyla UI'ya birleştirilir.

Bir yorumun yeniden render edilmesini elle tetikleme

İlk sayfa yüklemesini bekleyip reRenderComment çağırarak bir yorumu elle yeniden render edebiliriz:

Bir Yorumu Yeniden Render Etme

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); // zaman aşımı gerekli değil, sadece bir örnek.

20 }

21})();

22