Writing Extensions | FastComments Docs

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

Контекст

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

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

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

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

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

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

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 је јединичан (singleton) и није дељен са другим проширењима.

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

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>

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

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

У FastComments-у, ми пишемо сопствене екстензије користећи исти API. Можете погледати неминификовани код за ове екстензије на следећим крајњим тачкама:

Тамни режим

Екстензија Тамни режим се условно учитава када се открије "dark" страница. Ова екстензија једноставно додаје неко CSS у виџет коментара. На тај начин не морамо да учитавамо CSS за тамни режим када он није потребан.

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

Модерација

Када је тренутни корисник модератор, користимо екстензију за модерацију.

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

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

Уживо чет

Екстензија Уживо чет (у комбинацији са другом конфигурацијом и стиловањем) претвара виџет коментара у компоненту за уживо чет.

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

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

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] - (LEGACY) Враћа HTML који се додаје на врх области одговора.
 * @property {FastCommentsUIExtensionWidgetTopCallback} [widgetTop] - (LEGACY) Враћа HTML који се додаје на врх виџета.
 * @property {FastCommentsUIExtensionCommentTopCallback} [commentTop] - (LEGACY) Враћа HTML који се додаје на врх елемента коментара.
 * @property {FastCommentsUIExtensionCommentBottomCallback} [commentBottom] - (LEGACY) Враћа HTML који се додаје на дно елемента коментара.
 * @property {FastCommentsUIExtensionMenuBottomCallback} [menuBottom] - (LEGACY) Враћа 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
 */

API екстензије

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

Да бисмо надоградили претходни пример, рецимо да желимо да додамо 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;
    }
})();

Whenever you return HTML like this, it will get merged into the UI via a dom-diffing algorithm.

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

Можемо сачекати почетно учитавање странице и ручно поново рендеровати коментар позивајући 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); // тајмаут није потребан, само пример.
    }
})();

Језик 🇷🇸 Српски

Позадина

API

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

Контекст

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

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

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

Тамни режим

Модерација

Уживо чет

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

API екстензије

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