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.

Uzantı (extension) nesnesi aşağıdaki tanımdan oluşur:

Extension Object JSDoc

Copy Run

1

2/**

3 * FastCommentsUI uzantı nesnesi. Belirli bileşenleri tembel yüklemek (lazy-loading) için kullanılır. Örneğin, yorum

4 * (review) sistemi tüm müşteriler tarafından kullanılmadığından, bu uzantıyı yalnızca ihtiyaç duyduğumuzda yükleriz.

5 *

6 * @typedef {Object} FastCommentsUIExtension

7 * @property {string} id

8 * @property {Element} scriptNode

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

10 * @property {string} [css]

11 * @property {Object} config - FastComments yapılandırma (config) nesnesi.

12 * @property {Object} commentsById - Tüm yorumları id'ye göre içeren ve güncel tutulan bir nesneye referans.

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

14 * @property {Function} reRenderComment - Bir yorumu yeniden render etmek için çağrılabilen bir fonksiyona referans.

15 * @property {Function} removeCommentAndReRender - Bir yorumu bellekten kaldırmak ve DOM'un ilgili bölümünü yeniden render etmek için çağrılabilen bir fonksiyona referans.

16 * @property {Function} newBroadcastId - Yeni bir broadcast id oluşturmak ve yok sayılacak yerel broadcast id listesine eklemek için çağrılabilen bir fonksiyona referans.

17 * @property {Function} [withSessionId] - Bir istek URL'si ve bir callback ile çağırın. Üçüncü taraf çerezleri engellendiğinde (yorum ve oylama isteklerinin kullandığı aynı yol üzerinden) URL'ye izleyicinin session id'sini ekleyerek callback'i çağırır; aksi halde URL'yi değiştirmeden iletir. Bu yolla bir session id mevcut olmadığında, varsa, rememberAnonSessionId'e en son verilen anonim session id'yi ekler. SSO için kullanılmaz.

18 * @property {Function} [rememberAnonSessionId] - Bir yanıtın döndürdüğü anonim session id ile çağırın. Sunucu bunu yalnızca isteğinde session çerezi olmayan bir misafire döndürür ve oturum açmış bir oturum için asla döndürmez. localStorage'da (depolama kullanılamıyorsa bellekte) tutulur; böylece withSessionId sonraki isteklerde bunu gönderir ve misafir tek bir kimlik korur.

19 * @property {FastCommentsUIExtensionSetupEventHandlers} [setupEventHandlers]

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

21 * @property {FastCommentsUIExtensionNewCommentCallback} [newComment]

22 * @property {FastCommentsUIExtensionReplyAreaFilter} [replyAreaFilter] - Yorum alanı için HTML filtresi.

23 * @property {FastCommentsUIExtensionWidgetFilter} [widgetFilter] - Render sırasında tüm widget için HTML filtresi.

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

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

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

27 * @property {FastCommentsUIExtensionReplyAreaTop} [replyAreaTop] - (ESKİ/LEGACY) Yanıt alanının üstüne eklenecek HTML döndürün.

28 * @property {FastCommentsUIExtensionWidgetTopCallback} [widgetTop] - (ESKİ/LEGACY) Widget'ın üstüne eklenecek HTML döndürün.

29 * @property {FastCommentsUIExtensionCommentTopCallback} [commentTop] - (ESKİ/LEGACY) Yorum öğesinin üstüne eklenecek HTML döndürün.

30 * @property {FastCommentsUIExtensionCommentBottomCallback} [commentBottom] - (ESKİ/LEGACY) Yorum öğesinin altına eklenecek HTML döndürün.

31 * @property {FastCommentsUIExtensionCommentBottomCallback} [commentContentBottom] - Yorum metninden sonra, yorum içerik öğesinin içinde eklenecek HTML döndürün (anketler tarafından kullanılır).

32 * @property {Function} [replyAreaInputBottom] - Yorum giriş çerçevesinin içinde, metin girişinin altına eklenecek HTML döndürün (anketler tarafından yerinde anket düzenleyicisi için kullanılır). Üst yorumun id'sini alır; kök yanıt kutusu için null alır.

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

34 * @property {Function} isSiteAdmin - İzleyicinin kiracının (tenant) yöneticisi veya moderatörü olup olmadığını döndürür. İlk veri çekilişinden sonra bilinir.

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

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 - Kök öğe.

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

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