FastComments.com

Menu Icon

Jezik 🇸🇮 Slovenščina
🇺🇸 English 🇧🇬 Български 🇨🇳 简体中文 🇹🇼 繁體中文 🇭🇷 Hrvatski 🇩🇰 Dansk 🇳🇱 Nederlands 🇫🇷 Français (France) 🇩🇪 Deutsch 🇬🇷 Ελληνικά 🇮🇱 עברית 🇮🇹 Italiano 🇯🇵 日本語 🇰🇷 한국어 🇵🇱 Polski 🇧🇷 Português (Brasil) 🇷🇺 Русский 🇷🇸 Srpski (Latinica) 🇷🇸 Српски 🇸🇮 Slovenščina 🇪🇸 Español 🇺🇦 Українська 🇹🇷 Türkçe

Ozadje

Življenjski cikel razširitve
Opredelitev razširitve
Primeri razširitev

API

Objekt razširitve
API razširitve

Pisanje razširitev

Razvijanje razširitev

Kontekst

FastComments omogoča razširitev naše osnovne funkcionalnosti s skriptami, ki jim pravimo Extensions.

Extension lahko doda dodatno označevanje (markup) v pripomoček za komentarje, doda poslušalce dogodkov in izvaja poljubno kodo.

Tukaj boste našli primere razširitev, ki jih imamo v produkciji, kot tudi dokumentacijo o tem, kako pisati razširitve.

Življenjski cikel razširitve Internal Link

Skript za vsako razširitev se pridobi in zažene, preden pripomoček za komentarje začne pridobivati prvi niz komentarjev in upodabljati uporabniški vmesnik.

Ob prvem nalaganju bodo na objekt razširitve pripeti naslednji podatki:

  • config - Sklic na objekt config.
  • translations - Sklic na objekt translations.
  • commentsById - Sklic na vse komentarje po id.
  • root - Sklic na korensko DOM vozlišče.

Razširitve naj preglasijo želene funkcije, ki jih bo pripomoček za komentarje poklical ob ustreznih časih.

Opredelitev razširitve Internal Link

Najmanjša možna razširitev bi bila:

Preprosta razširitev
Copy CopyRun External Link
1
2(function () {
3 const extension = FastCommentsUI.extensions.find((extension) => {
4 return extension.id === 'my-extension';
5 });
6})();
7

V ta primer shranite datoteko kot my-extension.js, in jo naredite dostopno na https://example.com/my-extension.min.js.

Ta razširitev ne počne ničesar, ob nalaganju pa pridobi objekt razširitve, ki ga ustvari osnovna knjižnica komentarjev.

This Extension object is a singleton and is not shared with any other extensions.

Da naložimo našo razširitev, moramo pripomočku za komentarje povedati za njo. Na primer:

Using a Custom Extension
Copy CopyRun External Link
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

Za funkcionalne primere glejte naslednji razdelek.

Primeri razširitev Internal Link

Pri FastComments pišemo naše razširitve, ki uporabljajo isti API. Kodo brez minifikacije za te razširitve si lahko ogledate na naslednjih končnih točkah:

Temni način

Razširitev Temni način se pogojno naloži, ko je zaznana "dark" stran. Ta razširitev preprosto doda nekaj CSS v vtičnik za komentarje. Tako ni treba naložiti CSS za temni način, kadar ni potreben.

https://fastcomments.com/js/comment-ui/extensions/comment-ui.dark.extension.js

Moderacija

Ko je trenutni uporabnik moderator, uporabimo razširitev za moderacijo.

To je dober primer za dodajanje poslušalcev dogodkov na klik, pošiljanje API zahtev, dodajanje v meni komentarjev in območja komentarjev.

https://fastcomments.com/js/comment-ui/extensions/comment-ui.moderation.extension.js

Klepet v živo

Razširitev Klepet v živo (v kombinaciji z drugo konfiguracijo in stiliranjem) spremeni vtičnik za komentarje v komponento za klepet v živo.

https://fastcomments.com/js/comment-ui/extensions/live-chat.extension.js

Objekt razširitve Internal Link

Razširjeni objekt JSDoc
Copy CopyRun External Link
1
2/**
3 * Razširjeni objekt FastCommentsUI. Uporabljen za leno nalaganje določenih komponent. Na primer, sistem za ocenjevanje ni uporabljen pri vseh strankah, zato to razširitev naložimo le, ko jo potrebujemo.
4 *
5 * @typedef {Object} FastCommentsUIExtension
6 * @property {string} id
7 * @property {Element} scriptNode
8 * @property {Element} root - Korenni DOM vozlišče gradnika.
9 * @property {string} [css]
10 * @property {Object} config - Konfiguracijski objekt FastComments.
11 * @property {Object} commentsById - Referenca na objekt, ki vsebuje vse komentarje po ID-ju in je vzdrževana posodobljena.
12 * @property {Object} translations - Referenca na vse prevode.
13 * @property {Function} reRenderComment - Referenca na funkcijo, ki jo je mogoče poklicati za ponovno upodabljanje komentarja.
14 * @property {Function} removeCommentAndReRender - Referenca na funkcijo, ki jo je mogoče poklicati za odstranitev komentarja iz pomnilnika in ponovno upodabljanje ustreznega dela DOM-a.
15 * @property {Function} newBroadcastId - Referenca na funkcijo, ki jo je mogoče poklicati za ustvarjanje novega ID-ja za oddajanje in dodajanje v lokalni seznam ID-jev oddajanja, ki jih je treba prezreti.
16 * @property {FastCommentsUIExtensionSetupEventHandlers} [setupEventHandlers]
17 * @property {FastCommentsUIExtensionPrepareCommentForSavingCallback} [prepareCommentForSaving] - Poklicana s komentarjem, ki naj bo objavljen. Vrne false za preklic pošiljanja (na primer, ko je priloženo glasovanje nepopolno).
18 * @property {FastCommentsUIExtensionNewCommentCallback} [newComment]
19 * @property {FastCommentsUIExtensionReplyAreaFilter} [replyAreaFilter] - Filtrira HTML za območje komentarja.
20 * @property {FastCommentsUIExtensionWidgetFilter} [widgetFilter] - Filtrira HTML za celoten gradnik ob upodabljanju.
21 * @property {FastCommentsUIExtensionCommentTopFilter} [commentFilter] - Filtrira HTML za vsak komentar pred upodabljanjem.
22 * @property {FastCommentsUIExtensionReplyAreaFilter} [commentMenuFilter] - Filtrira HTML za vsak meni komentarja pred upodabljanjem.
23 * @property {FastCommentsUIExtensionMenuFilter} [menuFilter] - Filtrira HTML za celoten gradnik ob upodabljanju.
24 * @property {FastCommentsUIExtensionReplyAreaTop} [replyAreaTop] - (ZASTARJEL) Vrne HTML, ki se doda na vrh območja odgovora.
25 * @property {FastCommentsUIExtensionWidgetTopCallback} [widgetTop] - (ZASTARJEL) Vrne HTML, ki se doda na vrh gradnika.
26 * @property {FastCommentsUIExtensionCommentTopCallback} [commentTop] - (ZASTARJEL) Vrne HTML, ki se doda na vrh elementa komentarja.
27 * @property {FastCommentsUIExtensionCommentBottomCallback} [commentBottom] - (ZASTARJEL) Vrne HTML, ki se doda na dno elementa komentarja.
28 * @property {FastCommentsUIExtensionCommentBottomCallback} [commentContentBottom] - Vrne HTML, ki se doda po besedilu komentarja, znotraj elementa vsebine komentarja (uporablja se pri anketah).
29 * @property {Function} [replyAreaInputBottom] - Vrne HTML, ki se doda znotraj okvira za vnos komentarja, pod besedilnim vnosom (uporablja se pri anketah za vgrajeni urejevalnik anket). Prejme ID nadrejenega komentarja ali null za korensko polje odgovora.
30 * @property {Function} [onPollUpdate] - Poklicano z dogodkom v živo, ko se število glasov v anketi na strani spremeni.
31 * @property {Function} isSiteAdmin - Vrne, ali je gledalec skrbnik ali moderator najemnika. Znano po prvem pridobivanju.
32 * @property {FastCommentsUIExtensionMenuBottomCallback} [menuBottom] - (ZASTARJEL) Vrne HTML, ki se doda na dno elementa menija za vsak komentar.
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 - Korenni element.
42 * @param {Object.<string, Function>} clickListeners - Obdelovalci dogodkov za klike, po imenu razreda, ki jih je mogoče spremeniti po referenci.
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

API razširitve Internal Link

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

To build off the example earlier, let's say we want to add HTML to the top of each comment:

Preprosta razširitev - Nadaljevanje
Copy CopyRun External Link
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.

Manually triggering the re-render of a comment

We can wait for the initial page load and manually re-render a comment by invoking reRenderComment:

Ponovno upodabljanje komentarja
Copy CopyRun External Link
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 ni potreben, le primer.
20 }
21})();
22
Prispevajte k temu vodniku