Writing Extensions | FastComments Docs

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

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

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

Preprosta razširitev

Copy

Run

(function () {
    const extension = FastCommentsUI.extensions.find((extension) => {
        return extension.id === 'my-extension';
    });
})();

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

Run

<script async src="https://cdn.fastcomments.com/js/embed-v2-async.min.js"></script>
<div id="fastcomments-widget"></div>
<script>
window.fcConfigs = [{
    "tenantId": "demo",
    "extensions": [
        {
            "id": "my-extension",
            "path": "https://example.com/my-extension.min.js"
        }
    ]
}];
</script>

Za funkcionalne primere glejte naslednji razdelek.

Primeri razširitev

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

Objekt razširitve vsebuje naslednjo definicijo:

JSDoc razširitvenega objekta

Copy

Run

/**
 * The FastCommentsUI extension object. Uporablja se za odloženo nalaganje določenih komponent. Na primer, sistem ocen ni
 * v uporabi pri vseh strankah, zato to razširitev naložimo le takrat, ko jo potrebujemo.
 *
 * @typedef {Object} FastCommentsUIExtension
 * @property {string} id
 * @property {Element} scriptNode
 * @property {Element} root - Koreninski DOM element gradnika.
 * @property {string} [css]
 * @property {Object} config - Konfiguracijski objekt FastComments.
 * @property {Object} commentsById - Referenca na objekt z vsemi komentarji po id-ju, ki se ažurno posodablja.
 * @property {Object} translations - Referenca na vse prevode.
 * @property {Function} reRenderComment - Referenca na funkcijo, ki jo lahko pokličete za ponovni izris komentarja.
 * @property {Function} removeCommentAndReRender - Referenca na funkcijo, ki jo lahko pokličete za odstranitev komentarja iz pomnilnika in ponovno upodobitev ustreznega dela DOM-a.
 * @property {Function} newBroadcastId - Referenca na funkcijo, ki jo lahko pokličete za ustvarjanje novega broadcast id-ja in njegovo dodajanje v lokalni seznam broadcast id-jev, ki jih je treba prezreti.
 * @property {FastCommentsUIExtensionSetupEventHandlers} [setupEventHandlers]
 * @property {FastCommentsUIExtensionPrepareCommentForSavingCallback} [prepareCommentForSaving]
 * @property {FastCommentsUIExtensionNewCommentCallback} [newComment]
 * @property {FastCommentsUIExtensionReplyAreaFilter} [replyAreaFilter] - Filter HTML-ja za območje komentarjev.
 * @property {FastCommentsUIExtensionWidgetFilter} [widgetFilter] - Filter HTML-ja za celoten gradnik ob upodabljanju.
 * @property {FastCommentsUIExtensionCommentTopFilter} [commentFilter] - Filter HTML-ja za vsak komentar pred upodabljanjem.
 * @property {FastCommentsUIExtensionReplyAreaFilter} [commentMenuFilter] - Filter HTML-ja za meni vsakega komentarja pred upodabljanjem.
 * @property {FastCommentsUIExtensionMenuFilter} [menuFilter] - Filter HTML-ja za celoten gradnik ob upodabljanju.
 * @property {FastCommentsUIExtensionReplyAreaTop} [replyAreaTop] - (ZASTARELO) Vrne HTML za dodajanje na vrh območja odgovorov.
 * @property {FastCommentsUIExtensionWidgetTopCallback} [widgetTop] - (ZASTARELO) Vrne HTML za dodajanje na vrh gradnika.
 * @property {FastCommentsUIExtensionCommentTopCallback} [commentTop] - (ZASTARELO) Vrne HTML za dodajanje na vrh elementa komentarja.
 * @property {FastCommentsUIExtensionCommentBottomCallback} [commentBottom] - (ZASTARELO) Vrne HTML za dodajanje na dno elementa komentarja.
 * @property {FastCommentsUIExtensionMenuBottomCallback} [menuBottom] - (ZASTARELO) Vrne HTML za dodajanje na dno elementa menija za vsak komentar.
 * @property {FastCommentsUIExtensionRenderCallback} [onRender]
 * @property {FastCommentsUIExtensionConnectionStatusCallback} [onLiveConnectionStatusUpdate]
 * @property {FastCommentsUIExtensionInitialRenderCallback} [onInitialRenderComplete]
 * @property {FastCommentsUIExtensionPresenceUpdateCallback} [onPresenceUpdate]
 */
   
/**
 * @callback FastCommentsUIExtensionSetupEventHandlers
 * @param {Element} element - Koreninski element.
 * @param {Object.<string, Function>} clickListeners - Event handlerji za klike, po imenu razreda, ki jih je mogoče spremeniti po referenci.
 * @returns void
 */
/**
 * @callback FastCommentsUIExtensionWidgetTopCallback
 * @param {Object} moduleData
 * @returns {string}
 */
/**
 * @callback FastCommentsUIExtensionWidgetFilter
 * @param {Object} moduleData
 * @param {Object} html
 * @returns {string}
 */
/**
 * @callback FastCommentsUIExtensionCommentTopCallback
 * @param {Object} comment
 * @returns {string}
 */
/**
 * @callback FastCommentsUIExtensionCommentTopFilter
 * @param {Object} comment
 * @param {string} html
 * @returns {string}
 */
/**
 * @callback FastCommentsUIExtensionCommentBottomCallback
 * @param {Object} comment
 * @returns {string}
 */
/**
 * @callback FastCommentsUIExtensionMenuBottomCallback
 * @param {Object} comment
 * @returns {string}
 */
/**
 * @callback FastCommentsUIExtensionMenuFilter
 * @param {Object} comment
 * @param {string} html
 * @returns {string}
 */
/**
 * @callback FastCommentsUIExtensionRenderCallback
 * @returns {string}
 */
/**
 * @callback FastCommentsUIExtensionConnectionStatusCallback
 * @param {boolean} isConnected
 * @returns {void}
 */
/**
 * @callback FastCommentsUIExtensionInitialRenderCallback
 * @returns {void}
 */
/**
 * @callback FastCommentsUIExtensionReplyAreaTop
 * @param {Object|null} currentUser
 * @param {boolean} isSaving
 * @param {boolean} isReplyOpen
 * @param {string|null} parentId
 * @returns {string}
 */
/**
 * @callback FastCommentsUIExtensionReplyAreaFilter
 * @param {Object|null} currentUser
 * @param {boolean} isSaving
 * @param {boolean} isReplyOpen
 * @param {string|null} parentId
 * @param {string|null} html
 * @returns {string}
 */
/**
 * @callback FastCommentsUIExtensionPrepareCommentForSavingCallback
 * @param {Object} comment
 * @param {string} parentId
 */
/**
 * @callback FastCommentsUIExtensionNewCommentCallback
 * @param {Object} comment
 */
/**
 * @callback FastCommentsUIExtensionPresenceUpdateCallback
 * @param {Object} update
 */

API razširitve

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

Run

(function () {
    const extension = FastCommentsUI.extensions.find((extension) => {
        return extension.id === 'my-extension';
    });
    extension.commentFilter = function(comment, html) {
        return `<h3>The user's name is ${comment.commenterName}!</h3>` + html;
    }
})();

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

Run

(function () {
    const extension = FastCommentsUI.extensions.find((extension) => {
        return extension.id === 'my-extension';
    });
    let renderCount = 0;
    extension.commentFilter = function(comment, html) {
        renderCount++;
        return `<h3>The render count is ${renderCount}!</h3>` + html;
    }
    extension.onInitialRenderComplete = function() {
        setInterval(function() {
            extension.reRenderComment(extension.commentsById[Object.keys(extension.commentsById)[0]], function renderDone() {
                console.log('Comment re-render done.');
            });
        }, 2000); // timeout ni potreben, le primer.
    }
})();

Jezik 🇸🇮 Slovenščina

Ozadje

API

Razvijanje razširitev

Kontekst

Življenjski cikel razširitve

Opredelitev razširitve

Primeri razširitev

Temni način

Moderacija

Klepet v živo

Objekt razširitve

API razširitve

Manually triggering the re-render of a comment