Platform | Timeline

Index

Timeline is a feed of posts made by users that the user follows or communities that they participate in.
Through that it is possible to interact with the posts by commenting on them, enjoying them or sharing them.

As well as all the components of Fluig social layer, Timeline uses the SuperWidget facilitator in the Javascript layer.
To learn more about the functioning of the SuperWidget, see the manual at http://tdn.totvs.com/display/fluig/Super+Widget.

Binding HTML elements to functions

To bind an event to an HTML element, you must follow the format below.
The HTML component must have an attribute data- which will receive the bind of the widget functions.

Example of a Save function bind on a button

<button data-save-data>Save data</button>

bindings: {
    local: {
        'save data': [' click_saveData']
    }
 },
//implementation of Save function
saveData: function (el, ev) {
    //write the save data button action here
}, ...

The function attributed to an HTML element has 2 parameters:

• el: It represents the button itself. In the case of the example: <button data-save-data>Save data</button>
• ev: it represents the object of the event fired

Note that it is not necessary to add the prefix data-.
The array assigned is a string in the EVENT_FUNCTION standard. Various combinations of event x function may be attributed to a single element.
The bindings made on the local object are related to HTML elements inside the div of the widget. And the binds made on the global object are for elements either outside the widget div or removed from the widget div by another script, as it is the case of the jQueryUI modals.

Component functions

Below are the details of the Timeline functions.

likeSocial(el, ev)

Action of the element data-timeline-link-like. It is responsible for the event to like posts and other social objects.

sendComment(el, ev)

Data-send-comment element event, responsible for creating the comment of a post or another social object.

linkRemovePost(el, ev)

Action for the element data-linkRemovePost, responsible for removing the post.

linkRemovePostComment(el, ev)

Action for the element data-linkRemovePostComment, responsible for removing the comment from a post.

likeListSocial(el, ev)

Action for the element data-like-list-social, responsible for displaying a list of users who supported a post or social object.

timelineLinkRecommend(el, ev)

Action for the element data-timeline-link-recommend, responsible for sharing a post or social object.

showMore(el, ev)

Action of the element data-showMore.
When the timeline is rendered, a maximum size of posts is displayed.
If there are any posts that are older than the limit shown, this link is displayed to the user to display the next N posts.

btnShowMoreComments(el, ev)

Action of the element data-btn-show-more-comments.
When the timeline is rendered, a maximum size of comments per post is displayed.
If there are any comments that are older than the limit shown, this link is displayed to the user to display the next N comments.

timelineLinkSocial(el, ev)

Action of the element timeline-link-community.
This function is an enabler to redirect the page to a user's profile, community or social object that has an alias.

timelineLinkComment(el, ev)

Action of the element data-timeline-link-comment, responsible for displaying the comment text field.

showPostedPost(eventName, data)

Action triggered by the event "newPostEvent".
This event is triggered by the widget poster, when a new post is made by the user, and is immediately rendered to them.  

showRealtimePost(eventName, data)

Action triggered by the event "newpostalert".
This event happens when a new post related to the logged in user is created.
A Java service then identifies the users who need to be notified and triggers an event to the Node server with the recipient user’s id and the id of the post.
The Node server then notifies the user by using the "newpostalert" event that renders the post on the screen.

removeRealtimePost(eventName, data)

Action triggered by the event "removepostalert", which notifies the timeline to remove the post.

validateTitleNotPublish()

This function checks whether the user's timeline has posts.
If it is empty, it displays an internationalized message "No posts" in the title.
Otherwise, it displays the message "Latest posts".

renderPost(postId)

It performs a REST call and retrieves the data from a post, and then renders it.

renderComment(commentId)

It performs a REST call and retrieves the data (in HTML) from a comment, and then returns it.

listPosts(event)

This function is called only by the showMore function.

listComments(event, domElement)

This function is used only by the btnShowMoreComments function.

countLength(el, ev)

Function to count the characters in the recommendation text field.
When the character limit is exceeded, it disables the button and adds a red border in the field.

getYoutubeInfo()

This function iterates over the timeline already rendered, in search of posts that have videos from Youtube.
For each post found via the attribute "data-post-youtube-id", a JSONP request is made to a Youtube service to retrieve the title of the video.
This function can be performed several times, because each time a post with a video from Youtube is found, the attribute "data-post-youtube-id" is consumed, preventing the operation from repeating.

linkRecommendedPost(el, ev)

This event is triggered when the user tries to click on a link of a post recommended by another user.
Although the system validates if the user has permission to view the post, a validation is done on the client´s end by accessing a REST service that defines and returns the permission.

commentListSocial(domElement, typeAction)

This function is responsible for counting the comments and changing the text in a post.

watch(el, ev)

Action of the element data-timeline-link-watch. It is responsible for the event to follow up posts and other social objects.

getNumberWatchs(options, el)

This function is responsible for making a call on the server and returning the number of users that follow up the post.

watchListSocial(el, ev)

Action for the element data-watch-list-social, responsible for displaying a list of users who follow up a post or social object.

toggleStatusClass(el, isAction, actionType)

This function is responsible for changing the status of the buttons that change colors when they perform an action on it.