<div id="main-content" class="wiki-content group">
<h2 id="Timeline-Índice">Index</h2>
<p>
<style type='text/css'>/*<![CDATA[*/
div.rbtoc1412695813820 {
padding: 0px;
}
div.rbtoc1412695813820 ul {
list-style: disc;
margin-left: 0px;
}
div.rbtoc1412695813820 li {
margin-left: 0px;
padding-left: 0px;
}
/*]]>*/
</style>
<div class='toc-macro rbtoc1412695813820'>
<ul class='toc-indentation'>
<li><a href='#Timeline-Índice'>Index</a>
<ul class='toc-indentation'>
<li><a href='#Timeline-BinddeelementosHTMLafunções'>Binding
HTML elements to functions</a>
<ul class='toc-indentation'>
<li><a
href='#Timeline-Exemplodeumbinddafunçãosalvaremumbotão'>Example
of a Save function bind on a button</a></li>
</ul></li>
<li><a href='#Timeline-Funçõesdocomponente'>Component
functions</a>
<ul class='toc-indentation'>
<li><a href='#Timeline-likeSocial(el,ev)'>likeSocial(el,
ev)</a></li>
<li><a href='#Timeline-sendComment(el,ev)'>sendComment
(el, ev)</a></li>
<li><a href='#Timeline-linkRemovePost(el,ev)'>linkRemovePost
(el, ev)</a></li>
<li><a href='#Timeline-linkRemovePostComment(el,ev)'>linkRemovePostComment(el,
ev)</a></li>
<li><a href='#Timeline-likeListSocial(el,ev)'>likeListSocial
(el, ev)</a></li>
<li><a href='#Timeline-timelineLinkRecommend(el,ev)'>timelineLinkRecommend
(el, ev)</a></li>
<li><a href='#Timeline-showMore(el,ev)'>showMore (el,
ev)</a></li>
<li><a href='#Timeline-btnShowMoreComments(el,ev)'>btnShowMoreComments
(el, ev)</a></li>
<li><a href='#Timeline-timelineLinkSocial(el,ev)'>timelineLinkSocial(el,
ev)</a></li>
<li><a href='#Timeline-timelineLinkComment(el,ev)'>timelineLinkComment(el,
ev)</a></li>
<li><a href='#Timeline-showPostedPost(eventName,data)'>showPostedPost(eventName,
data)</a></li>
<li><a href='#Timeline-showRealtimePost(eventName,data)'>showRealtimePost(eventName,
data)</a></li>
<li><a href='#Timeline-removeRealtimePost(eventName,data)'>removeRealtimePost(eventName,
data)</a></li>
<li><a href='#Timeline-validateTitleNotPublish()'>validateTitleNotPublish()</a></li>
<li><a href='#Timeline-renderPost(postId)'>renderPost(postId)</a></li>
<li><a href='#Timeline-renderComment(commentId)'>renderComment(commentId)</a></li>
<li><a href='#Timeline-listPosts(event)'>listPosts(event)</a></li>
<li><a href='#Timeline-listComments(event,domElement)'>listComments(event,
domElement)</a></li>
<li><a href='#Timeline-countLength(el,ev)'>countLength(el,
ev)</a></li>
<li><a href='#Timeline-getYoutubeInfo()'>getYoutubeInfo()</a></li>
<li><a href='#Timeline-linkRecommendedPost(el,ev)'>linkRecommendedPost(el,
ev)</a></li>
<li><a
href='#Timeline-commentListSocial(domElement,typeAction)'>commentListSocial(domElement,
typeAction)</a></li>
<li><a href='#Timeline-watch(el,ev)'>watch(el, ev)</a></li>
<li><a href='#Timeline-getNumberWatchs(options,el)'>getNumberWatchs(options,
el)</a></li>
<li><a href='#Timeline-watchListSocial(el,ev)'>watchListSocial(el,
ev)</a></li>
<li><a
href='#Timeline-toggleStatusClass(el,isAction,actionType)'>toggleStatusClass(el,
isAction, actionType)</a></li>
</ul></li>
</ul></li>
</ul>
</div>
</p>
<p>
Timeline is a feed of posts made by users that the user follows or
communities that they participate in.<br />Through that it is
possible to interact with the posts by commenting on them, enjoying
them or sharing them.
</p>
<p>
As well as all the components of Fluig social layer, Timeline uses the
SuperWidget facilitator in the Javascript layer.<br />To learn more
about the functioning of the SuperWidget, see the manual at <a
href="http://tdn.totvs.com/display/fluig/Super+Widget" rel="nofollow">http://tdn.totvs.com/display/fluig/Super+Widget</a>.
</p>
<h3 id="Timeline-BinddeelementosHTMLafunções">Binding HTML
elements to functions</h3>
<p>
To bind an event to an HTML element, you must follow the format below.<br />The
HTML component must have an attribute <strong>data-</strong> which
will receive the bind of the widget functions.
</p>
<h4 id="Timeline-Exemplodeumbinddafunçãosalvaremumbotão">Example
of a Save function bind on a button</h4>
<p> </p>
<div class="code panel pdl" style="border-width: 1px;">
<div class="codeHeader panelHeader pdl"
style="border-bottom-width: 1px;">
<b>In HTML</b>
</div>
<div class="codeContent panelContent pdl">
<pre class="theme: Eclipse; brush: html/xml; gutter: false"
style="font-size: 12px;"><button data-save-data>Save data</button></pre>
</div>
</div>
<div class="code panel pdl" style="border-width: 1px;">
<div class="codeHeader panelHeader pdl"
style="border-bottom-width: 1px;">
<b>In the .js file of the widget</b>
</div>
<div class="codeContent panelContent pdl">
<pre class="theme: Eclipse; brush: javascript; gutter: false"
style="font-size: 12px;">bindings: {
local: {
'save data': [' click_saveData']
}
},
//implementation of Save function
saveData: function (el, ev) {
//write the save data button action here
}, ...</pre>
</div>
</div>
<p>The function attributed to an HTML element has 2 parameters:</p>
<ul>
<li><strong>el:</strong> It represents the button itself. In the
case of the example: <button data-save-data>Save data</button></li>
<li><strong>ev:</strong> it represents the object of the event
fired</li>
</ul>
<p>
Note that it is not necessary to add the prefix <strong>data-</strong>.<br />The
array assigned is a string in the EVENT_FUNCTION standard. Various
combinations of event x function may be attributed to a single
element.<br />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.
</p>
<h3 id="Timeline-Funçõesdocomponente">Component functions</h3>
<p>Below are the details of the Timeline functions.</p>
<h4 id="Timeline-likeSocial(el,ev)">likeSocial(el, ev)</h4>
<p>
Action of the element data-<span
style="font-size: 10.0pt; line-height: 13.0pt;">timeline-link-like</span><span
style="font-size: 10.0pt; line-height: 13.0pt;">. It is
responsible for the event to like posts and other social objects.</span>
</p>
<h4 id="Timeline-sendComment(el,ev)">sendComment(el, ev)</h4>
<p>Data-send-comment element event, responsible for creating the
comment of a post or another social object.</p>
<h4 id="Timeline-linkRemovePost(el,ev)">linkRemovePost(el, ev)</h4>
<p>Action for the element data-linkRemovePost, responsible for
removing the post.</p>
<h4 id="Timeline-linkRemovePostComment(el,ev)">linkRemovePostComment(el,
ev)</h4>
<p>Action for the element data-linkRemovePostComment, responsible
for removing the comment from a post.</p>
<h4 id="Timeline-likeListSocial(el,ev)">likeListSocial(el, ev)</h4>
<p>
Action for the element data-<span
style="font-size: 10.0pt; line-height: 13.0pt;">like-list-social</span><span
style="font-size: 10.0pt; line-height: 13.0pt;">, responsible
for displaying a list of users who supported a post or social object.</span>
</p>
<h4 id="Timeline-timelineLinkRecommend(el,ev)">timelineLinkRecommend(el,
ev)</h4>
<p>Action for the element data-timeline-link-recommend, responsible
for sharing a post or social object.</p>
<h4 id="Timeline-showMore(el,ev)">showMore(el, ev)</h4>
<p>
Action of the element data-showMore.<br />When the timeline is
rendered, a maximum size of posts is displayed.<br />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.
</p>
<h4 id="Timeline-btnShowMoreComments(el,ev)">btnShowMoreComments(el,
ev)</h4>
<p>
Action of the element data-btn-show-more-comments.<br />When the
timeline is rendered, a maximum size of comments per post is
displayed.<br />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.
</p>
<h4 id="Timeline-timelineLinkSocial(el,ev)">timelineLinkSocial(el,
ev)</h4>
<p>
Action of the element timeline-link-community.<br />This function is
an enabler to redirect the page to a user's profile, community or
social object that has an alias.
</p>
<h4 id="Timeline-timelineLinkComment(el,ev)">timelineLinkComment(el,
ev)</h4>
<p>Action of the element data-timeline-link-comment, responsible
for displaying the comment text field.</p>
<h4 id="Timeline-showPostedPost(eventName,data)">showPostedPost(eventName,
data)</h4>
<p>
Action triggered by the event "newPostEvent".<br />This event is
triggered by the widget poster, when a new post is made by the user,
and is immediately rendered to them.  
</p>
<h4 id="Timeline-showRealtimePost(eventName,data)">showRealtimePost(eventName,
data)</h4>
<p>
Action triggered by the event "newpostalert".<br />This event happens
when a new post related to the logged in user is created.<br />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.<br />The Node server then notifies the user by using the
"newpostalert" event that renders the post on the screen.
</p>
<h4 id="Timeline-removeRealtimePost(eventName,data)">removeRealtimePost(eventName,
data)</h4>
<p>Action triggered by the event "removepostalert", which notifies
the timeline to remove the post.</p>
<h4 id="Timeline-validateTitleNotPublish()">validateTitleNotPublish()</h4>
<p>
This function checks whether the user's timeline has posts.<br />If
it is empty, it displays an internationalized message "No posts" in
the title.<br />Otherwise, it displays the message "Latest posts".
</p>
<h4 id="Timeline-renderPost(postId)">renderPost(postId)</h4>
<p>It performs a REST call and retrieves the data from a post, and
then renders it.</p>
<h4 id="Timeline-renderComment(commentId)">renderComment(commentId)</h4>
<p>It performs a REST call and retrieves the data (in HTML) from a
comment, and then returns it.</p>
<h4 id="Timeline-listPosts(event)">listPosts(event)</h4>
<p>This function is called only by the showMore function.</p>
<h4 id="Timeline-listComments(event,domElement)">listComments(event,
domElement)</h4>
<p>This function is used only by the btnShowMoreComments function.</p>
<h4 id="Timeline-countLength(el,ev)">countLength(el, ev)</h4>
<p>
Function to count the characters in the recommendation text field.<br />When
the character limit is exceeded, it disables the button and adds a red
border in the field.
</p>
<h4 id="Timeline-getYoutubeInfo()">getYoutubeInfo()</h4>
<p>
This function iterates over the timeline already rendered, in search
of posts that have videos from Youtube.<br />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.<br />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.
</p>
<h4 id="Timeline-linkRecommendedPost(el,ev)">linkRecommendedPost(el,
ev)</h4>
<p>
This event is triggered when the user tries to click on a link of a
post recommended by another user.<br />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.
</p>
<h4 id="Timeline-commentListSocial(domElement,typeAction)">
commentListSocial(<span style="font-size: 1.2em;">domElement</span><span
style="font-size: 1.2em;">, typeAction)</span>
</h4>
<p>This function is responsible for counting the comments and
changing the text in a post.</p>
<h4 id="Timeline-watch(el,ev)">watch(el, ev)</h4>
<p>
Action of the element data-<span
style="font-size: 10.0pt; line-height: 13.0pt;">timeline-link-watch</span><span
style="font-size: 10.0pt; line-height: 13.0pt;">. It is
responsible for the event to follow up posts and other social
objects.</span>
</p>
<h4 id="Timeline-getNumberWatchs(options,el)">getNumberWatchs(options,
el)</h4>
<p>This function is responsible for making a call on the server and
returning the number of users that follow up the post.</p>
<h4 id="Timeline-watchListSocial(el,ev)">watchListSocial(el, ev)</h4>
<p>
Action for the element data-<span
style="font-size: 10.0pt; line-height: 13.0pt;">watch-list-social</span><span
style="font-size: 10.0pt; line-height: 13.0pt;">, responsible
for displaying a list of users who follow up a post or social object.</span>
</p>
<h4 id="Timeline-toggleStatusClass(el,isAction,actionType)">toggleStatusClass(el,
isAction, actionType)</h4>
<p>This function is responsible for changing the status of the
buttons that change colors when they perform an action on it.</p>
<p> </p>
</div>
|