o-comment-count

📢 This component has been deprecated. The comment count functionality has been moved into o-comments. Please speak to the Comments team if you have any questions.

A small UI component for rendering the comment count of a given article.

Contents

• Adding comment count to your product
  • Declaratively
  • Imperatively
• Global configuration
  • Declaratively
  • Imperatively
• JavaScript API
  • Methods
  • Logging
• Browser support
• Core/enhanced experience

Adding comment count to your product

Declaratively

Use the following markup to enable comments:

<div data-o-component="o-comment-count"
    data-o-comment-count-auto-init="true|false"
    data-o-comment-count-config-article-id="{article-id}"
    data-o-comment-count-config-template="{count} Comment{plural}">

        <div class="o--if-no-js">0 Comments</div>
</div>

• data-o-comment-count-config-article-id a unique id for your content, ideally a UUID for FT content
• data-o-comment-count-auto-init="false" a module which has this attribute with a false value will not be initialized on the o.DOMContentLoaded event. This allows you to defer component initialisation.
• data-o-comment-count-config-{key} for any other configuration. {key} has the following rule: -- means new object level, - means camel case. Example: data-o-comment-count-config--data-format--absolute="value" is transformed to: {"livefyre": {"dataFormat": {"absolute": "value"}}}

For the full list of configuration, see the available configurations.

Those elements which don't have the data-o-comment-count-auto-init="false" attribute will be automatically initialized on the o.DOMContentReady event.

If you defer initialising oCommentCount by using data-o-comment-count-auto-init="false" then you can initialise the component whenever you want by calling

oCommentCount.init();

The init function may take an optional parameter: a context (this could be DOM element or a valid selector). The search would be performed only inside of this context element. If none is specified, it defaults to document.body.

Imperatively

Create an instance of the component with the parameters that are available:

var oCommentCountComponent = new oCommentCount(document.querySelector('.comment-count'), {
    articleId: 'article-id'
});

The widget is automatically initialized, unless you specify in the configuration autoInit: false. In this case you can initialize this particular object at a later time by calling the following:

oCommentCountComponent.init();

For the full list of configuration, see the available configurations.

More about the constructor config object

The configuration object which is passed to the contructor can/should have the following fields:

Mandatory fields:

• articleId: ID of the article, any string

Optional fields:

• template: can be used if you want to override the global template for this widget. {count} will be replaced with the count, and {plural} will be replaced with blank for a count of 0 or 1, and with 's' for a count > 1.
• autoInit: can be used to avoid initializing the widget automatically by setting this to false
• autoRefresh: it refreshes the widget with the latest count if set to true
• hideIfZero: if true, hides the dom element of the widget (visibility: hidden)

Global configuration

This module uses global configuration. These are related configurations for Livefyre.

The default configuration is the following:

{
    "template": "{count} Comment{plural}"
}

There are two ways for changing the default config:

Declaratively

In order to change the configuration, you can add a script tag in your page source with the format in the example below:

<script data-o-comment-count-config type="application/json">
    {
        "template": "{count}"
    }
</script>

This configuration will be loaded on the o.DOMContentLoaded event.

Also, don't forget to also add the configuration for o-comment-api (http://registry.origami.ft.com/components/o-comment-api#configuration) if you want to change the URLs of the services.

Imperatively

oCommentCount.setConfig(config)

The configuration can be changed using the setConfig static method. Calling this method with an object will merge the current configuration with the object specified (deep merge, primitive type values of the same key will be overwritten).

Example:

oCommentCount.setConfig({
    "template": "{count}"
});

As on the event o.DOMContentLoaded the widgets declared in the DOM are automatically initialized, it is preferred to call this function before the o.DOMContentLoaded event is triggered.

Also, don't forget to also add the configuration for o-comment-api (http://registry.origami.ft.com/components/o-comment-api#configuration). The API of o-comment-api is available by using oCommentCount.dataService.

JavaScript API

Events

oCommentCount.ready

The oCommentCount.ready event is fired after the comment count is initalised and added to the DOM.

The event has the following properties:

• detail.id - Widget id (deprecated)
• detail.instance - Widget instance.

	document.body.addEventListener('oCommentCount.ready', function(e) {
		console.log(e.detail.instance);
	});

methods

Methods

init

Called automatically unless autoInit is set to false. Init will basically fetch the comment count and render the template. If it's called multiple times, it re-renders the widget each time with the latest available comment count.

getCommentCount

Logging

Logging can be enabled for debugging purposes. It logs using the global 'console' if available (if not, nothing happens and it degrades gracefully). By default logging is disabled.

oCommentCount.enableLogging()

This method enables logging of the module.

oCommentCount.disableLogging()

This method disables logging of the module.

oCommentCount.setLoggingLevel(level)

This method sets the logging level. This could be a number from 0 to 4 (where 0 is debug, 4 is error), or a string from the available methods of 'console' (debug, log, info, warn, error). Default is 3 (warn).

Browser support

Works in accordance with our support policy

Core/Enhanced Experience

Only the enhanced experience offers any kind of commenting functionality. Core functionality will be added in due course.