Writing Extensions | FastComments Docs

Развој проширења

Контекст

FastComments омогућава проширивање наше основне функционалности преко скрипти које називамо проширења.

Једно Extension може додати додатно HTML означавање у видгет за коментаре, регистровати слушаче догађаја и извршавати произвољан код.

Овдје ћете наћи примјере проширења која имамо у продукцији, као и документацију о томе како писати проширења.

Животни циклус екстензије

Скрипта за сваку екстензију се преузима и извршава пре него што видгет за коментаре почне да преузима први скуп коментара и приказује кориснички интерфејс.

При почетном учитавању, следећи подаци ће бити додати на објекат екстензије:

config - Референца на config објекат.
translations - Референца на translations објекат.
commentsById - Референца на све коментаре по id.
root - Референца на root DOM чвор.

Екстензије треба да препишу жељене функције, које ће видгет за коментаре позивати у одговарајућим тренуцима.

Дефинисање екстензије

Најмање могуће проширење би било:

Једноставно проширење

Copy

Run

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

У овом примеру, сачувајте ово као my-extension.js, и учините га доступним на https://example.com/my-extension.min.js.

Ово проширење не ради ништа, осим што при учитавању преузима објекат проширења који је креирала основна библиотека коментара.

Овај Extension објекат је синглтон и није дељен са ниједним другим проширењем.

Затим, да бисмо учитали наше проширење, морамо обавестити видџет за коментаре о њему. На пример:

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>

За функционалне примјере, погледајте следећи одељак.

Примјери екстензија

U FastCommentsu, pišemo naše sopstvene ekstenzije, koristeći isti API. Možete pogledati neminifikovan kod za ove ekstenzije na sljedećim endpointima:

Dark Mode

The Dark Mode extension is conditionally loaded when a "dark" page is detected. This extension simply adds some CSS to the comment widget. This way we do not have to load the dark mode CSS when it is not needed.

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

Moderation

When the current user is a moderator, we use the moderation extension.

This is a good example for adding click-based event listeners, making API requests, adding to the comment menu and comment areas.

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

Live Chat

The Live Chat extension (in combination with other configuration and styling) turns the comment widget into a live chat component.

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

Објекат екстензије

The extension object consists of the following definition:

JSDoc објекта екстензије

Copy

Run

/**
 * The FastCommentsUI extension object. Used for lazy-loading certain components. For example, the review system is not
 * used by all customers, so we only load that extension when we want it.
 *
 * @typedef {Object} FastCommentsUIExtension
 * @property {string} id
 * @property {Element} scriptNode
 * @property {Element} root - Коренски DOM чвор виџета.
 * @property {string} [css]
 * @property {Object} config - FastComments конфигурациони објекат.
 * @property {Object} commentsById - Референца на објекат са свим коментарима по id, која се одржава ажурном.
 * @property {Object} translations - Референца на све преводе.
 * @property {Function} reRenderComment - Референца на функцију која се може позвати да поново рендерује коментар.
 * @property {Function} removeCommentAndReRender - Референца на функцију која се може позвати да уклони коментар из меморије и поново рендерује одговарајући део DOM-а.
 * @property {Function} newBroadcastId - Референца на функцију која се може позвати да креира нови broadcast id и дода га у локалну листу broadcast id-ева које треба игнорисати.
 * @property {FastCommentsUIExtensionSetupEventHandlers} [setupEventHandlers]
 * @property {FastCommentsUIExtensionPrepareCommentForSavingCallback} [prepareCommentForSaving]
 * @property {FastCommentsUIExtensionNewCommentCallback} [newComment]
 * @property {FastCommentsUIExtensionReplyAreaFilter} [replyAreaFilter] - Филтрира HTML за област коментара.
 * @property {FastCommentsUIExtensionWidgetFilter} [widgetFilter] - Филтрира HTML за цео виџет при рендеровању.
 * @property {FastCommentsUIExtensionCommentTopFilter} [commentFilter] - Филтрира HTML за сваки коментар пре рендера.
 * @property {FastCommentsUIExtensionReplyAreaFilter} [commentMenuFilter] - Филтрира HTML за мени сваког коментара пре рендера.
 * @property {FastCommentsUIExtensionMenuFilter} [menuFilter] - Филтрира HTML за цео виџет при рендеровању.
 * @property {FastCommentsUIExtensionReplyAreaTop} [replyAreaTop] - (ЗАСТАРЕЛО) Враћа HTML који ће се додати на врх области за одговор.
 * @property {FastCommentsUIExtensionWidgetTopCallback} [widgetTop] - (ЗАСТАРЕЛО) Враћа HTML који ће се додати на врх виџета.
 * @property {FastCommentsUIExtensionCommentTopCallback} [commentTop] - (ЗАСТАРЕЛО) Враћа HTML који ће се додати на врх елемента коментара.
 * @property {FastCommentsUIExtensionCommentBottomCallback} [commentBottom] - (ЗАСТАРЕЛО) Враћа HTML који ће се додати на дно елемента коментара.
 * @property {FastCommentsUIExtensionMenuBottomCallback} [menuBottom] - (ЗАСТАРЕЛО) Враћа HTML који ће се додати на дно елемента менија за сваки коментар.
 * @property {FastCommentsUIExtensionRenderCallback} [onRender]
 * @property {FastCommentsUIExtensionConnectionStatusCallback} [onLiveConnectionStatusUpdate]
 * @property {FastCommentsUIExtensionInitialRenderCallback} [onInitialRenderComplete]
 * @property {FastCommentsUIExtensionPresenceUpdateCallback} [onPresenceUpdate]
 */
   
/**
 * @callback FastCommentsUIExtensionSetupEventHandlers
 * @param {Element} element - Коренски елемент.
 * @param {Object.<string, Function>} clickListeners - Обработачи догађаја за кликове, по имену класе, који се могу изменити преко референце.
 * @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
 */

АПИ екстензије

Interakcija са Extension је једноставна, јер једноставно дефинишемо референце на функције које желимо да се позову.

Да надовежемо на пример раније, рецимо да желимо да додамо HTML на врх сваког коментара:

Једноставно проширење - наставак

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;
    }
})();

Кад год вратите HTML на овај начин, он ће бити спојен у UI помоћу dom-diffing алгоритма.

Ручно покретање поновног рендеровања коментара

Можемо сачекати почетно учитавање странице и ручно поново рендеровати коментар позивањем reRenderComment:

Поновно рендеровање коментара

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 not required, just an example.
    }
})();

Језик 🇲🇪 Српски (Црна Гора)

Позадина

АПИ

Развој проширења

Контекст

Животни циклус екстензије

Дефинисање екстензије

Примјери екстензија

Dark Mode

Moderation

Live Chat

Објекат екстензије

АПИ екстензије

Ручно покретање поновног рендеровања коментара