Writing Extensions | FastComments Docs

Ανάπτυξη Επεκτάσεων

Πλαίσιο

FastComments παρέχει τη δυνατότητα επέκτασης της βασικής λειτουργικότητάς μας μέσω σεναρίων που ονομάζουμε Επεκτάσεις.

Ένα Extension μπορεί να προσθέσει επιπλέον σήμανση στο widget σχολίων, ακροατές συμβάντων και να εκτελέσει αυθαίρετο κώδικα.

Εδώ θα βρείτε παραδείγματα επεκτάσεων που έχουμε σε παραγωγή, καθώς και τεκμηρίωση για το πώς να γράψετε επεκτάσεις.

Κύκλος ζωής επέκτασης

Το script για κάθε επέκταση ανακτάται και εκτελείται πριν το widget σχολίων αρχίσει να ανακτά το πρώτο σετ σχολίων και να αποδίδει το UI.

Κατά την αρχική φόρτωση, τα ακόλουθα δεδομένα θα προστεθούν στο αντικείμενο της επέκτασης:

config - Αναφορά στο αντικείμενο config.
translations - Αναφορά στο αντικείμενο translations.
commentsById - Αναφορά σε όλα τα σχόλια ανά id.
root - Αναφορά στον ριζικό κόμβο DOM.

Οι επεκτάσεις θα πρέπει να αντικαταστήσουν τις επιθυμητές συναρτήσεις, τις οποίες το widget σχολίων θα καλεί στις κατάλληλες στιγμές.

Ορισμός επέκτασης

Η μικρότερη δυνατή επέκταση θα ήταν:

Μια Απλή Επέκταση

Copy

Run

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

Για το παράδειγμα αυτό, αποθηκεύστε το ως my-extension.js, και κάντε το διαθέσιμο στο https://example.com/my-extension.min.js.

Αυτή η επέκταση δεν κάνει τίποτα, εκτός από το ότι κατά τη φόρτωση ανακτά το αντικείμενο επέκτασης που δημιουργείται από τη βασική βιβλιοθήκη σχολίων.

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

Στη συνέχεια, για να φορτώσουμε την επέκτασή μας, πρέπει να ενημερώσουμε το widget σχολίων γι' αυτήν. Για παράδειγμα:

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 στο widget σχολίων. Με αυτόν τον τρόπο δεν χρειάζεται να φορτώνουμε το 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

Ζωντανή Συνομιλία

Η επέκταση Ζωντανής Συνομιλίας (σε συνδυασμό με άλλες ρυθμίσεις και στυλ) μετατρέπει το widget σχολίων σε ένα στοιχείο ζωντανής συνομιλίας.

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 του widget.
 * @property {string} [css]
 * @property {Object} config - Το αντικείμενο ρυθμίσεων (config) του FastComments.
 * @property {Object} commentsById - Αναφορά σε ένα αντικείμενο με όλα τα σχόλια κατά id, το οποίο διατηρείται ενημερωμένο.
 * @property {Object} translations - Αναφορά σε όλες τις μεταφράσεις.
 * @property {Function} reRenderComment - Αναφορά σε μια συνάρτηση που μπορεί να κληθεί για να επανα-αποδώσει (re-render) ένα σχόλιο.
 * @property {Function} removeCommentAndReRender - Αναφορά σε μια συνάρτηση που μπορεί να κληθεί για να αφαιρέσει ένα σχόλιο από τη μνήμη και να επανα-αποδώσει το κατάλληλο μέρος του DOM.
 * @property {Function} newBroadcastId - Αναφορά σε μια συνάρτηση που μπορεί να δημιουργήσει ένα νέο broadcast id και να το προσθέσει στη τοπική λίστα των broadcast ids που θα αγνοηθούν.
 * @property {FastCommentsUIExtensionSetupEventHandlers} [setupEventHandlers]
 * @property {FastCommentsUIExtensionPrepareCommentForSavingCallback} [prepareCommentForSaving]
 * @property {FastCommentsUIExtensionNewCommentCallback} [newComment]
 * @property {FastCommentsUIExtensionReplyAreaFilter} [replyAreaFilter] - Φιλτράρει το HTML για την περιοχή απάντησης (reply area).
 * @property {FastCommentsUIExtensionWidgetFilter} [widgetFilter] - Φιλτράρει το HTML για ολόκληρο το widget κατά το render.
 * @property {FastCommentsUIExtensionCommentTopFilter} [commentFilter] - Φιλτράρει το HTML για κάθε σχόλιο πριν από το render.
 * @property {FastCommentsUIExtensionReplyAreaFilter} [commentMenuFilter] - Φιλτράρει το HTML για κάθε μενού σχολίου πριν από το render.
 * @property {FastCommentsUIExtensionMenuFilter} [menuFilter] - Φιλτράρει το HTML για ολόκληρο το widget κατά το render.
 * @property {FastCommentsUIExtensionReplyAreaTop} [replyAreaTop] - (LEGACY) Επιστρέφει HTML για προσθήκη στο πάνω μέρος της περιοχής απάντησης.
 * @property {FastCommentsUIExtensionWidgetTopCallback} [widgetTop] - (LEGACY) Επιστρέφει HTML για προσθήκη στο πάνω μέρος του widget.
 * @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 της επέκτασης

Η αλληλεπίδραση με το 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.
    }
})();

Υπόβαθρο

Διεπαφή API

Ανάπτυξη Επεκτάσεων

Πλαίσιο

Κύκλος ζωής επέκτασης

Ορισμός επέκτασης

Παραδείγματα επεκτάσεων

Σκοτεινή Λειτουργία

Εποπτεία

Ζωντανή Συνομιλία

Το αντικείμενο επέκτασης

Το API της επέκτασης

Χειροκίνητη επαναπόδοση ενός σχολίου

Γλώσσα 🇬🇷 Ελληνικά

Υπόβαθρο

Διεπαφή API

Ανάπτυξη Επεκτάσεων

Πλαίσιο

Κύκλος ζωής επέκτασης

Ορισμός επέκτασης

Παραδείγματα επεκτάσεων

Σκοτεινή Λειτουργία

Εποπτεία

Ζωντανή Συνομιλία

Το αντικείμενο επέκτασης

Το API της επέκτασης

Χειροκίνητη επαναπόδοση ενός σχολίου