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
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() {});
Account
Updated 6 months ago