Viafoura Events

Events

The Viafoura service publishes several global notifications that can be helpful for developers
who want to run code during different events within our system.

Authentication

Authentication.Login

This event is published when there is a valid login attempt through the Viafoura
login form.

Note that this event only gets published if the Viafoura login form is used.
This event does not indicate whether or not the login was successful.

Examples

window.vf.$subscribe('authentication', 'login', (email, password) => {});

Authentication.Logout

This event is published when there is a logout attempt with the Viafoura
authentication.

Note that this event only gets published if the Viafoura authentication is used.
This event does not indicate whether or not the logout was successful.

Examples

window.vf.$subscribe('authentication', 'logout', () => {});

Authentication.Logout-Failure

This event is published when there is a failed logout attempt with the Viafoura
authentication.

Note that this event only gets published if the Viafoura authentication is used.

Examples

window.vf.$subscribe('authentication', 'logout/failure', () => {});

Authentication.Required

This event is published when the user is unauthenticated (logged out) and attempts to
access an area of the site that requires authentication (eg: logged in comment, or
current user profile).

Examples

// Hook called any time authentication is requested by Viafoura to perform an action
window.vf.$subscribe('authentication', 'required', () => {
    // Do something here
});

// This event can be published in order to cause the tray to open and display the login
// view. This will not have any effect if Viafoura login is disabled.
window.vf.$publish('authentication', 'required');

Authentication.Signup

This event is published when there is a signup attempt with the Viafoura
authentication.

Note that this event only gets published if the Viafoura authentication is used.
This event does not indicate whether or not the signup was successful.

Examples

window.vf.$subscribe('authentication', 'signup', () => {});

Authentication.Signup-Failure

This event is published when there is a failed sign up attempt with the Viafoura
authentication.

Note that this event only gets published if the Viafoura authentication is used.

Examples

window.vf.$subscribe('authentication', 'signup/failure', () => {});

Average-Rating

Average-Rating.Loaded

This event is triggered when the Average Rating widget is mounted for the first time.

Parameters

el HTMLElement The DOM element of the Average Rating widget

Examples

window.vf.$subscribe('average-rating', 'loaded', function(el) {});

Comment

Comment.Created

The event is triggered when a top level comment is successfully created. This event
publishes the comment data for the comment which was created.

Examples

window.vf.$subscribe(
    'comment',
    'created',
    function({
        actor_uuid,
        content,
        content_container_uuid,
        content_uuid,
        parent_actor_uuid,
        parent_uuid,
        section_uuid,
        thread_uuid,
    }) {
        console.log('comment', `The User who commented is: ${actor_uuid}.`);
    });

Meta

version: 2.0

Comment.Edited

The event is triggered when a top level comment is successfully edited. This event
publishes the comment data for the comment which was edited.

Examples

window.vf.$subscribe('comment', 'edited', function(comment) {});

Meta

version: 2.0

Comment.Reaction

This event is triggered each time a comment is liked, unliked, disliked or undisliked.
The event publishes the data for comment which was rendered.

Examples

window.vf.$subscribe('comment', 'reaction', function(comment) {});

Meta

version: 2.0

Comment.Rendered

This event is triggered for each comment that is rendered. The event publishes the data
for comment which was rendered as well as the resulting DOM element.

Examples

window.vf.$subscribe('comment', 'rendered', function(comment, el) {});

Meta

version: 2.0

Comment-Count

Comment-Count.Loaded

This event is triggered when the Comment Count widget is mounted for the first time.

Parameters

el HTMLElement The DOM element of the Comment Count widget

Examples

window.vf.$subscribe('comment-count', 'loaded', function(el) {});

Meta

version: 2.0

Comment-Replies

Comment-Replies.Loaded

This event is triggered when replies for a comment have been loaded. The event publishes
the relevant page's information as well as the comment at the top of the thread.

Examples

window.vf.$subscribe('comment-replies', 'loaded', function(page, comment) {});

Meta

version: 2.0

Comment-Replies-Realtime

Comment-Replies-Realtime.Loaded

This event is triggered when the realtime indicator is clicked, and the replies have
been loaded. The event publishes the relevant page's information as well as the comment
at the top of the thread.

Examples

window.vf.$subscribe('comment-replies-realtime', 'loaded', function(page, comment) {});

Meta

version: 2.0

Comment-Reply

Comment-Reply.Posted

The event when the reply comment is successfully created. This event publishes the
comment data for which the reply was posted.

Examples

window.vf.$subscribe(
    'comment-reply',
    'posted',
    function({
        actor_uuid,
        content,
        content_container_uuid,
        content_uuid,
        parent_actor_uuid,
        parent_uuid,
        section_uuid,
        thread_uuid,
    }) {
        console.log('comment-reply', `The User who replied is: ${actor_uuid}.`);
    });

Meta

version: 2.0

Comment-Thread

Comment-Thread.Loaded

The event is triggered when the commenting thread for an article has been loaded for the
first time. The event publishes the relevant page's information. It is only triggered
once per widget.

Examples

window.vf.$subscribe('comment-thread', 'loaded', function(page) {});

Meta

version: 2.0

Commenting

Commenting.Loaded

This event is triggered when the Commenting/Conversations widget is mounted for the
first time. This occurs after the widget has called the API to get the initial set of
comments and has rendered them on the page.

Parameters

el HTMLElement The DOM element of the Commenting widget

Examples

window.vf.$subscribe('commenting', 'loaded', function(el) {});

Commenting.Resized

This event is triggered when the Commenting/Conversations widget container changes size.
This is especially useful when using the widgets on an amp page as the events can be
utilized to resize the amp-iframe.

Examples

window.vf.$subscribe('commenting', 'resized', function() {});

Meta

version: 2.0

Commenting.Sorted

This event when the user presses the commenting sort button, causing the comment thread
to resort. The event returns the chosen sort order and the previous sort order.

Examples

window.vf.$subscribe('commenting', 'sorted', function(sort, previous_sort) {});

Comments

Comments.More-loaded

This event is triggered when the "show more" button is clicked at the bottom of the
commenting thread in order to load more comments, and the new comments have been loaded.

Examples

window.vf.$subscribe('comments', 'more-loaded', function(page) {});

Meta

version: 2.0

Comments.Read

This event is triggered when the commenting widget is inside the viewport for 3 seconds.
The event returns the commenting widget DOM element that was in the viewport.

Examples

window.vf.$subscribe('comments', 'read', function(commentingWidgetEl) {});

Comments-Realtime

Comments-Realtime.More-loaded

This event is triggered once comments have been loaded after clicking the realtime
notification indicator. The event publishes the relevant page's information.

Examples

window.vf.$subscribe('comments-realtime', 'more-loaded', function(page) {});

Meta

version: 2.0

Liveblog

Liveblog.Loaded

This event is triggered when the Live Blogging widget is mounted for the first time. This
occurs after the widget has called the API to get the initial set of posts and has
rendered them on the page.

Parameters

el HTMLElement The DOM element of the Live Blogging widget

Examples

window.vf.$subscribe('liveblog', 'loaded', function(el) {});

Meta

version: 3.0

Liveblog.Resized

This event is triggered when the Liveblog widget container changes size.
This is especially useful when using the widgets on an amp page as the events can be
utilized to resize the amp-iframe.

Examples

window.vf.$subscribe('liveblog', 'resized', function() {});

Meta

version: 3.0

Livechat

Livechat.Loaded

This event is triggered when the Community Chat widget is mounted for the first time.
This occurs when the widget is rendered on the page before any messages are loaded.

Parameters

el HTMLElement The DOM element of the Community Chat widget

Examples

window.vf.$subscribe('livechat', 'loaded', function(el) {});

Meta

version: 3.0

Login

Login.Failure

This event is published when a login attempt has failed. This can be caused by a number
of things including the user being banned, network issues, etc. It should be published
with an object containing information about the error and the login.

Examples

window.vf.$subscribe('login', 'failure', function(errorContext, loginContext) {});

Login.Success

This event is published when a login attempt has been successful. It should be published
with an object containing information about the now logged in user.

Examples

window.vf.$subscribe('login', 'success', function(userContext) {});

Logout

Logout.Success

This event is published when a logout attempt is successful.

Examples

window.vf.$subscribe('logout', 'success', function() {});

Media-Gallery

Media-Gallery.Loaded

This event is triggered when the Media Gallery widget is mounted for the first time.

Parameters

el HTMLElement The DOM element of the Media Gallery widget

Examples

window.vf.$subscribe('media-gallery', 'loaded', function(el) {});

Meta

version: 2.0

User-Notifications

User-Notifications.New-Count-Changed

This event is triggered when the number of "new" notifications that a
user has changes.

Parameters

count Number The current number of new notifications for the current user

Examples

window.vf.$subscribe('user-notifications', 'new-count-changed', (count) => {
    console.log(`The current user has ${count} new notifications`);
});

Profile

Profile.Show

This event is triggered when a user's profile is meant to be shown. It passes the
attributes of the user in question.

Parameters

user VfUser An object defining the user whose profile will be shown

Examples

window.vf.$subscribe('profile', 'show', (user,) => {
    console.log('This is the user whose profile should be shown: ', user);
});

Quote

Quote.Loaded

This event is triggered when the Quote widget is mounted for the first time.

Parameters

el HTMLElement The DOM element of the Quote widget

Examples

window.vf.$subscribe('quote', 'loaded', function(el) {});

Rating-Avg

Rating-Avg.Loaded

This event is triggered when the Rating Average widget is mounted for the first time.

Parameters

el HTMLElement The DOM element of the Rating Average widget

Examples

window.vf.$subscribe('rating-avg', 'loaded', function(el) {});

Rating-User

Rating-User.Loaded

This event is triggered when the Rating User widget is mounted for the first time.

Parameters

el HTMLElement The DOM element of the Rating User widget

Examples

window.vf.$subscribe('rating-user', 'loaded', function(el) {});

Review-Form

Review-Form.Loaded

This event is triggered when the Review Form widget is mounted for the first time.

Parameters

el HTMLElement The DOM element of the Review Form widget

Examples

window.vf.$subscribe('review-form', 'loaded', function(el) {});

Share.Clicked

The event is triggered when a share button is clicked. The social network that it was
shared to (eg. facebook, twitter) and the button DOM Node which was clicked should both
be published.

Examples

window.vf.$subscribe('share', 'clicked', function(network, button) {});

Share-Total

Share-Total.Loaded

This event is triggered when the Share Total widget is mounted for the first time.

Parameters

el HTMLElement The DOM element of the Share Total widget

Examples

window.vf.$subscribe('share-total', 'loaded', function(el) {});

Sharebar

Sharebar.Loaded

This event is triggered when the Sharebar widget is mounted for the first time.

Parameters

el HTMLElement The DOM element of the Sharebar widget

Examples

window.vf.$subscribe('sharebar', 'loaded', function(el) {});

Topics

Topics.Loaded

This event is published when the topics context has been changed. This event is
published with the newest context.

Examples

window.vf.$subscribe('topics', 'loaded', function(topicsContext) {});

Tray

Tray.Close

This event can be used to close the tray.

Examples

window.vf.$publish('tray', 'close');

Tray.Closed

This event is triggered once the tray has been fully closed and is no longer visible to
the user.

Examples

window.vf.$subscribe('tray', 'closed', () => {
    console.log(`You just closed the tray.`);
});

Tray.Open

This event can be used to cause the tray to open when closed.

Parameters

trigger HTMLElement @deprecated element to focus back to when the tray closes. For example, if you are creating a button to open the tray, this should be a reference to the HTML button causing the tray to open.
tabName String? can be one of: vf-feed (default), vf-community, vf-settings, vf-account, vf-profile.Note: vf-community and vf-profile will trigger authentication required when the user
is unauthenticated. vf-account will not display when Viafoura login is disabled.

Examples

// Open tray to feed view
window.vf.$publish('tray', 'open');

// Open tray to community view
// in the context of a click event "e"
window.vf.$publish('tray', 'open', e.currentTarget, 'vf-community');

Tray.Open-Intent

This event can be used to cause the tray assets (JS, CSS, data etc.)
to load in the background

Examples

// When a user hovers over the tray open button
window.vf.$publish('tray', 'open-intent');

Tray.Opened

This event is triggered once the tray has been newly opened from a closed state and
is fully visible to the user. It passes the currently open view to the callback function.

Examples

window.vf.$subscribe('tray', 'opened', (tabName) => {
    console.log(`You just opened the ${tabName} tab.`);
});

Tray.Toggle

This event can be used to cause the tray to open (if it is closed) or close (if it is
open).

Parameters

trigger HTMLElement @deprecated element to focus back to when the tray closes. For example, if you are creating a button to open the tray, this should be a reference to the HTML button causing the tray to open.
tabName String? can be one of: vf-feed (default), vf-community, vf-settings, vf-account, vf-profile.

Examples

// Toggle tray to community view, otherwise, close the tray if it is already open
// in the context of a click event "e"
window.vf.$publish('tray', 'toggle', e.currentTarget, 'vf-community');

Tray-Tab

User

User.Loaded

This event is published when the user context has been changed. This event is published
with the newest context.

Examples

window.vf.$subscribe('user', 'loaded', function(userContext) {});

Vf-Ads

Vf-Ads.Request-Comment-Ad

This event is published when an ad slot initially becomes available or is reloaded.

Parameters

slotName String The ID of the element that will hold the ad

Examples

window.vf.$subscribe('vf-ads', 'requestCommentAd', function(slotName) {
     const adContainer = document.getElementById(slotName);
     // ... inject your ad into the container
});

Vf-Tray

Vf-Tray.Loaded

This event is triggered when the Tray widget is mounted for the first time.

Parameters

el HTMLElement The DOM element of the Tray widget

Examples

window.vf.$subscribe('vf-tray', 'loaded', function(el) {});

Vf-Tray-Trigger

Vf-Tray-Trigger.Clicked

This event is published when the user has caused the tray to open.

Examples

window.vf.$subscribe('vf-tray-trigger', 'clicked', function() {});

Vf-Tray-Trigger.Loaded

This event is triggered when the Tray Trigger is mounted for the first time.

Parameters

el HTMLElement The DOM element of the Tray Trigger

Examples

window.vf.$subscribe('vf-tray-trigger', 'loaded', function(el) {});

Widgets

Widgets.Mount

This event can be used to cause the widget mounted code to run.

This can be helpful when you are dynamically adding widgets to the page and want to
force the script to mount them.

Examples

window.vf.$publish('widgets', 'mount', function() {});