A collection of helper functions used by o-comments and o-chat.

Usage no npm install needed!

<script type="module">
  import cheeOCommentUtilities from 'https://cdn.skypack.dev/@chee/o-comment-utilities';


o-comment-utilities Build Status

A collection of helper functions used by o-comments and o-chat.




This module provides a useful way to handle application level configurations. It supports setting and reading configurations, also overriding existing values (helpful when the application should be working on different environments with partially different configuration).


In order to create a configuration, you should create an instance first:

var config1 = new oCommentUtilities.EnvConfig();

In order to keep an isolated configuration object of your application, which is accessible within your whole application, the following method can be used:

  • define a config.js file within your application
  • create an instance of config.js and expose it within the application:
var EnvConfig = require('js-env-config');

module.exports = new EnvConfig();



Gets the whole configuration if without parameter, or a field if a field is given as parameter.

Getting the whole configuration object:


Getting a field of the configuration object:


Sets the configuration. The current configuration is merged with this object. Existing fields that have primitive type values and the same field has value in the object given to set, are overwritten.

Setting an object:

    'configField': 'value'

Setting a key/value:

config.set('aField', {
    'configField': 'value'

This is equivalent with the following object:

    "aField": {
        "configField": "value"


This module helps creating custom events, listening on custom events and triggering them. It is similar to jQuery's event system (except that it doesn't support namespacing).


The constructor has no parameter.

var myEvent = new Events();



Registers a new event handler to an event.

myEvent.on(event, handler)


  • event: name of the event
  • handler: function which is called when the event is triggered. The handler can receive parameters if the trigger was made with data to be forwarded to handlers.

Registers a new event handler to an event. Similar to 'on', but the handler is called only once.

myEvent.one(event, handler)

Removes one or more event handlers.

myEvent.off(event, handler)


  • event: name of the event from which the handler should be removed.
  • handler: handler function that will be removed.

If handler is omitted, all event handlers from the event specified are removed. If both event and handler are omitted, all event handlers are removed.


Triggers an event: it causes calling all the event handlers that are listening for the event name.

myEvent.trigger(event, customData)


  • event: name of the event for which the handlers should be called.
  • customData: optional parameter, data to be passed to the event handlers.


This module provides a similar solution for JSONP communication as jQuery. For more information on JSONP, visit http://json-p.org/ .

The module is actually a single function. It should be called the following way:

    url: "URL here",
    data: "Data here" //optional
}, function (err, data) {
    if (err) {
        throw err;

    // use the data

Both parameters (configuration object and callback) are required. Also, the configuration should contain the 'url' field.


If data should be sent, it can be part of the URL directly, or can be provided as the data field within the configuration object. The data field should be an object with key-value pairs.


The callback has a Node.js inspired form. The first parameter is the error parameter, while the second one is the data parameter received from the server as a response.


This module provides a similar solution for loading a Javascript file asynchronously as jQuery's $.getScript() (http://api.jquery.com/jquery.getscript/).

The module is actually a single function. It can be called the following ways:

    url: "URL here",
    charset: "utf-8" //optional
}, function (err) {
    if (err) {
        throw err;

    // loaded successfully
oCommentUtilities.scriptLoader("URL here", function (err) {
    if (err) {
        throw err;

    // loaded successfully

Both parameters (configuration object/URL and callback) are required. Also, if the configuration is an object, it should contain the 'url' field.


The callback has a Node.js inspired form. The parameter is either 'null' or an Error instance. If it doesn't contain an error, the loading finished with success.


Wrapper around localStorage and sessionStorage, but enhanced with automatic type conversion.

Automatic type conversion means the followin: for example, if you store an object which can be serialized into a JSON string, when you read it back you will get the same Javascript object and not just a plain string.

The module exposes two main fields, both having the same API:

oCommentUtilities.storageWrapper.localStorage //wrapper around native localStorage
oCommentUtilities.storageWrapper.sessionStorage //wrapper around native sessionStorage

API of localStorage and sessionStorage

Both submodules has the same public API. The difference is only the place the data is saved (as it is in the native API).

Available methods:


Saves an item in the storage. It has the following form:

setItem(key, value);

The value is saved in the storage with the key. The value can be looked up using the key provided.

The item is saved in the following format:

{type}|{value converted/serialized to string}

For example, a boolean "true" value is saved in the following way:


Objects that can be serialized are saved with the type "json".


Reads the item and returns it in the original type that was saved.


For example, if a boolean true was saved, it is not returned as a string, but as a boolean type.


Returns true or false and it says if there is an item with that key.


Removes the item saved with the key provided.


Clears all entries for the current domain.


Returns the native localStorage or sessionStorage object.


Logging helper which uses the native "console" to log. It also extends IE8 logging capabilities by stringifying complex objects.

Where console is not available, the logger fails silently.

The module supports the following methods:

Logger configuration

The logger can be configured with the following: enable/disable, set the minimum level that is logged.

By default is logging disabled (recommended settings for production). Default level of logging is 'warn'.


Enables the logging.


Disables the logging.


Sets the minimum level that should be logged. The levels are the following:

  • debug
  • log
  • info
  • warn
  • error

Where level can be:

  • string: anything from the list above
  • numeric: any number from the range between 0-4, where 0 means log everything (min level is debug), while 4 means log only error level logs.

Logging functions

Available functions:

  • debug
  • log
  • info
  • warn
  • error



This submodule is meant to generate a callback only when all functions provided finished their execution. This is achieved by passing a callback as parameter to the functions that are executed.

The submodule itself is a single function and can be called in the following way:

    func1: function (callback) {},
    func2: function (callback) {},
    func3: {
        args: ['param1', 'param2'],
        func: function (callback, param1, param2) {}
}, function (dataAggregate) {
    // where data aggregate is:
    // {
    //      func1: 'dataFromFunc1',
    //      func2: 'dataFromFunc2',
    //      func2: 'dataFromFunc2'
    // }

Functions provided within the object can be in the following forms:

  1. Single function. As example are func1 and func2.
  2. Object with the following fields: func is the actual function that will be called, args are the arguments that are appended after the callback parameter.

For more information on the technical side, please visit the detailed documentation (docs/index.html).


This module is able to instantiate classes extended from o-comment-ui/Widget.js using markup in the DOM.

How to use it

This feature reads the DOM for certain types of elements. An example element:

<div data-o-component="o-chat" id="commentWidget" data-o-chat-config-title="o-chat-test-closed3" data-o-chat-config-url="http://ftalphaville.ft.com/marketslive-test.html" data-o-chat-config-articleId="marketslive-test" data-o-chat-config-order="inverted"></div>

Key parts of the DOM element:

  • data-o-component: defines the type of Widget element, in this example o-chat.
  • id: optional, if it's not present it will be generated
  • data attributes in the format data-o-{modulename}-config-{key}: configuration options that are passed to the Widget constructor. {key} has the following rule: -- means new object level, - means camel case. Example: data-o-comments-config-livefyre--data-format--absolute="value" is transformed to: {"livefyre": {"dataFormat": {"absolute": "value"}}}.

In order to start the DOM construction, the oCommentUtilities.initDomConstruct function should be called with a configuration object, which has the following fields:

  • context: an HTML element or selector. In this element will be performed the search for elements which has data-o-component="{modulename}". If none is specified, it falls back to document.body.
  • classNamespace: type of the Widget element, in the example above it would be a string 'o-chat'. It is used as class and also as part of the data attributes.
  • eventNamespace: according to the origami spec, all events generated should be namespaced with the module's name, without dashes, but with camel case. In the example above namespace would be a string 'oChat'.
  • module: reference to the global scope of the module. In the example above this would be the object oChat.
  • auto: if set to true, only the widgets which don't have data-{namespace}-auto-init="false" (e.g. data-o-chat-init="false") will be considered. This is useful when there are two phases of initialization: one on o.DOMContentLoaded and one on demand (lazy load). On o.DOMContentLoaded there will be loaded only the widgets which don't have this attribute, while the others only on explicit call.


var initDomConstructOnDemand = function () {
        classNamespace: 'o-chat',
        eventNamespace: 'oChat',
        moduleRef: oChat,
        classRef: oChat.Widget

document.addEventListener('o.DOMContentLoaded', function () {
        classNamespace: 'o-chat',
        eventNamespace: 'oChat',
        moduleRef: oChat,
        classRef: oChat.Widget,
        auto: true

In some cases this module should be called on demand by the product, so it could be exposed as a public API as part of the module which uses it.

Example: (from o-chat/main.js)

var Widget = require('./src/javascripts/Widget.js');

exports.init = function (el) {
    return oCommentUtilities.initDomConstruct({
        context: el,
        classNamespace: 'o-chat',
        eventNamespace: 'oChat',
        moduleRef: this,
        classRef: Widget

This way all the configurations are abstracted, the product should not care about setting them.

If you want to obtain a reference of the created Class instances, you should listen on the body to the event {namespace}.ready (e.g. oChat.ready), which will have the following details:

  • id: ID of the widget, which is basically the ID attribute of the owned DOM element
  • instance: the instance of the Class


document.body.addEventListener('oChat.ready', function (evt) {
    //evt.detail.id and evt.detail.instance are available

The instance that is already created will have a flag that says that it shouldn't be created again, even if initDomConstruct is called again. The flag that is set is data-{namespace}-built="true" (e.g. data-o-chat-built="true"). If you are creating instances in another way (programatically), the container element should have this flag set.

Return value

The return value is an array with all the instances of Class (e.g. oChat.Widget) created.


Helpers for working with cookies.


Reads a cookie by name.



Sets a cookie.

oCommentUtilities.cookie.set('name', 'value', 36 /*days */);


Removes a cookie



ftUser is a helper for obtaining information about the FT user, information like logged in status, user ID, email address, session ID.

Methods exposed that can be used:

  • isLoggedIn: returns the user's login status: true or false.
  • getEmail: returns the user's email address
  • getUserId: returns the user's ID
  • getSession: returns the FT session ID