Origami Frontend Components & Services

JSDoc: o-comment-ui active

Widget

Global Property

Exports of submodules

Links

texts

Global Property

Type

  • Object

Custom messages that are used in the FrontEnd.

Links

serviceMessageOverrides

Global Property

Type

  • Object

Error messages coming from the web services could be not user friendly. So some of the messages are mapped to a more user friendly message.

Links

enableLogging

Global Function

Enables logging.

Returns

  • undefined

Links

disableLogging

Global Function

Disables logging.

Returns

  • undefined

Links

setLoggingLevel

Global Function

Sets logging level.

Returns

  • undefined

Links

Widget(rootEl, config)

Global Function

Widget is responsible to coordinate getting initialization data, loading resources and initializing the Ui. While this class implements some of the basic functionality (handling errors, loading timeout), it should be extended by providing an implementation for getting the initialization data and loading the resources.

Configuration

Mandatory fields:
  • articleId: ID of the article, any string
  • url: canonical URL of the page
  • title: Title of the page
Optional fields:
  • timeout: Period of time after a timeout is triggered. Default is 15000 ms (15 sec). Its value should be given in milliseconds (ms).
parameter type default description
rootEl String | Object Selector or DOM element where the widget should be loaded.
config Object Configuration object, as described in the class description.

Returns

  • undefined

Links

getWidgetEl

Global Function

Returns the widget container DOM element

Returns

  • DOMObject - Widget's DOM element

Links

on(eventName, eventHandler)

Global Function

Attach new event handlers.

parameter type default description
eventName string Required. Name of the event to which to attach the handler.
eventHandler function Required. Handler Function which will be called when the event is triggered.

Returns

  • undefined

Links

off(eventName, eventHandler)

Global Function

Removes the event handler(s).

parameter type default description
eventName string Required. Specifies the event from which all handlers should be removed. If omitted, all event handlers are removed from all events.
eventHandler function Required. The event name should be specified as well if this is specified. Specifies the handler which should be removed from the event specified.

Returns

  • undefined

Links

trigger(eventName, data)

Global Function

Triggers an event.

parameter type default description
eventName string Required. Name of the event which will be triggered.
data object Optional. Data to be passed to the handler.

Returns

  • undefined

Links

loadInitData(callback)

Global Function

! 'this' could not have the value of the instance. To be sure you use the correct instance value, you should save it in the constructor in a variable (var self = this) and use that variable.

parameter type default description
callback function function (err, data), where data is the init data

Returns

  • undefined

Links

WidgetUi(widgetContainer)

Global Function

This class is responsible to handle the UI part of a commenting widget. An instance of this is created within an instance of the Widget. While this implementation has predefined methods, it can be extended with particular UI methods.

parameter type default description
widgetContainer DOMObject DOM Object or selector of the container of the widget.

Returns

  • undefined

Links

scrollToWidget(callback)

Global Function

Scrolls the page to the widget.

parameter type default description
callback function Called when the scroll animation is finished.

Returns

  • undefined

Links

addNotAvailableMessage

Global Function

Inserts message when comments is not available, either because of the web services or Livefyre.

Returns

  • undefined

Links

clearContainer

Global Function

Clears the container's content.

Returns

  • undefined

Links

serializeForm(form)

Global Function

Helper to serialize form values into JavaScript Object (key-value pairs).

parameter type default description
form DOMObject DOM Object of the form element.

Returns

  • Object - Serialized key-value pairs of the form.

Links

OverlayFormContent(config)

Global Function

Form is a helper for creating a form. It handles constructing the form element, generating buttons, forwarding submit and cancel events.

parameter type default description
config Object Configuration object which specifies the elements of the form (form fragments, buttons).

Returns

  • undefined

Links

serialize

Global Function

Serializes the form that is built by this instance.

Returns

  • Object - Serialized key-value pairs of the form.

Links

showError(errMessages)

Global Function

Shows an error message on top of the form.

parameter type default description
errMessages String The error message to show.

Returns

  • undefined

Links

clearError

Global Function

Clears all the errors.

Returns

  • undefined

Links

disableButtons

Global Function

Disables the buttons (useful when an action is already in progress).

Returns

  • undefined

Links

enableButtons

Global Function

Enables the buttons (useful when the buttons were disabled while an action was in progress and the user is given back the control).

Returns

  • undefined

Links

initialPseudonym

Global Function

Form fragment that contains setting the initial pseudonym.

Returns

  • String - Mustache template

Links

changePseudonym(config)

Global Function

Form fragment that contains changing the initial pseudonym.

parameter type default description
config Object Configuration object. If a pseudonym exists, it should be set in config.currentPseudonym.

Returns

  • String - Mustache template

Links

emailSettingsForm(config)

Global Function

Form fragment that contains the form inputs for the email preferences.

parameter type default description
config Object Current settings.

Returns

  • String - Mustache template

Links

emailSettings(config)

Global Function

Email settings fragment within a dialog that contains pseudonym as well.

parameter type default description
config Object Current settings.

Returns

  • String - Mustache template

Links

emailSettingsStandalone(config)

Global Function

Email settings fragment which is shown standalone within the dialog.

parameter type default description
config Object Current settings.

Returns

  • String - Mustache template

Links

followExplanation

Global Function

Explanation with image of the Follow functionality.

Returns

  • String - Mustache template

Links

commentingSettingsExplanation

Global Function

Explanation with image of the commenting settings dialog.

Returns

  • String - Mustache template

Links

sessionExpired

Global Function

Session expired dialog content.

Returns

  • String - Mustache template

Links

show(currentPseudonym, callbacks)

Global Function

Settings dialog where the user can change its pseudonym or email preferences.

parameter type default description
currentPseudonym Object Required. Current pseudonym of the user.
callbacks Object Object with callback functions. Possible fields: - submit: Required. Function that is called when the form is submitted - close: Optional. Function that is called when the dialog is closed.

Returns

  • undefined

Links

show(callbacks)

Global Function

Shows a dialog which reminds the user to save its email preferences if he/she didn't do so.

parameter type default description
callbacks Object Object with callback functions. Possible fields: - submit: Required. Function that is called when the form is submitted - close: Optional. Function that is called when the dialog is closed.

Returns

  • undefined

Links

show(callbacks)

Global Function

Shows a dialog with a sign in link to re-login after a session expire.

parameter type default description
callbacks Object Object with callback functions. Possible fields: - submit: Required. Function that is called when the form is submitted - close: Optional. Function that is called when the dialog is closed.

Returns

  • undefined

Links

show(callbacks)

Global Function

Shows a dialog for setting the initial pseudonym (shown when the user doesn't have a pseudonym set).

parameter type default description
callbacks Object Object with callback functions. Possible fields: - submit: Required. Function that is called when the form is submitted - close: Optional. Function that is called when the dialog is closed.

Returns

  • undefined

Links

show(currentData, callbacks)

Global Function

Settings dialog where the user can change its pseudonym or email preferences.

parameter type default description
currentData Object Required. Current settings of the user, which consists of displayName and email settings.
callbacks Object Object with callback functions. Possible fields: - submit: Required. Function that is called when the form is submitted - close: Optional. Function that is called when the dialog is closed.

Returns

  • undefined

Links

toDOM(htmlString)

Global Function

Converts a plain HTML string into a DOM object.

parameter type default description
htmlString String Plain HTML in a string format.

Returns

  • DOMObject - DOM Object

Links

getComputedStyle(el, pseudoElement)

Global Function

getComputedStyle polyfill for IE. If native function is available, that one is used.

parameter type default description
el DOMObject The Element for which to get the computed style.
pseudoElement DOMObject Optional. A string specifying the pseudo-element to match. Must be omitted (or null) for regular elements.

Returns

  • Object - Object that has a getPropertyValue function which gets a property name as parameter.

Links

windowSize

Global Function

Computes the window's size.

Returns

  • Object - {width: XX, height: YY}

Links

module.exports

Static Property

Type

  • function

Export of Widget.

Links

module.exports

Static Property

Type

  • function

Export of WidgetUI.

Links

OverlayFormContent~disableAllButtons(buttons)

Inner Function

Disable all buttons of a button collection.

parameter type default description
buttons Array Array of buttons (DOM objects).

Returns

  • undefined

Links

OverlayFormContent~enableAllButtons(buttons)

Inner Function

Enable all buttons of a button collection.

parameter type default description
buttons Array Array of buttons (DOM objects).

Returns

  • undefined

Links

module.exports

Static Property

Type

  • Form

Export the Form class.

Links

module.exports

Static Property

Type

  • Object

Mustache templates, compiled but not rendered.

Links

Switch component view

GitHub Repository

Install o-comment-ui

If using the Build Service, add o-comment-ui@^4.2.5 to your script and link tags.

If running a Manual Build, run bower install --save "o-comment-ui@^4.2.5".

Help & Support

o-comment-ui is maintained directly by the Origami team. If you have any questions about o-comment-ui or Origami in general, we are happy to help. 😊

Slack: #ft-origami
Email: origami.support@ft.com

Feedback / Issues

To report a bug or request features please create an issue on Github. For support or general feedback please get in touch 😊

Slack: #ft-origami
Email: origami.support@ft.com