Como todos os componentes do Fluig, a Timeline é desenvolvida baseada no framework de templates FreeMarker (.ftl). O FreeMarker é responsável pela camada de visualização, onde sobre ele é escrito todo HTML do componente. Bem como o(s) arquivo(s) de FreeMarker, todos os componentes possuem seus arquivos de CSS (.css) e JavaScript (.js).
Para gerar conteúdo na Timeline, o Fluig utiliza o componente de Publicação de conteúdo Poster. O Poster é responsável por absorver todo o conteúdo digitado pelo usuário no Campo de Publicação e enviar para exibição de uma nova Publicação na Timeline.
Ação de Publicação na Timeline de Usuário é o campo de texto onde o usuário digita o conteúdo para Publicação. Esse campo de texto está disponível em sua página inicial e todo o conteúdo é publicado em sua própria Timeline.
Ação de Publicação na Timeline de Comunidade é o campo de texto onde o usuário digita o conteúdo para Publicação. Esse campo de texto está disponível em qualquer página de Comunidade e todo o conteúdo é publicado na página da Comunidade em questão.
Após gerar uma nova Publicação, esse conteúdo é exibido na Timeline em diferentes tipos de visualização.
<div class="timeline-post-wrapper post post-parent" id="${post.postId}">
<div class="timeline-post clearfix">
<!-- Área da foto do usuário -->
<div class="timeline-user-photo-container">
<div class="timeline-user-photo-container-hidden" data-user-popover="${post.user.alias}">
<a href="#" class="timeline-link-user totvs-link-social timeline-link-user-photo" data-social-alias="${post.user.alias}" data-timeline-link-user>
<img src="/social/api/rest/social/image/thumb/${post.user.alias}" class="timeline-user-photo">
</a>
</div>
</div>
<div class="post-content-container">
<!-- Área das informações da Publicação. Ex. Nome do usuário, data da Publicação, etc. -->
<p class="timeline-post-header">
<a href="#" class="timeline-link-user totvs-link-social" data-social-alias="${post.user.alias}" data-timeline-link-user>${user.name}</a>
<span class="post-header-text"> - </span>
<a href="${tenantURL}/post/${post.user.alias}/${post.postId}" class="timeline-link-date totvs-link-gray"> ${post.data}</a>
</p>
<!-- Conteúdo do post -->
<p class="timeline-text-post">${post.text}</p>
</div>
<!-- Lista de ações disponíveis na Publicação -->
<ul class="sociable-action-bar list-inline">
<li><a href="#" class="sociable-link sociable-icon sociable-comment timeline-link-comment" data-timeline-link-comment>Comentar</a></li>
<!-- More actions -->
</ul>
</div>
</div> |
/*
*
* Multiple definitions
*
*/
.wcm-widget-timeline .timeline-post,
.wcm-widget-timeline .timeline-comments {
padding: 8px 0 36px;
position: relative;
}
... |
[{
"postId" : "10", //post id
"text" : "A Post!", //post text
"link" : "http://www.youtube.com/watch?v=E2LM3ZlcDnk", //link attached to the post
"formattedLink" : "www.youtube.com/v/10", //formatted youtube link
"youtubeVideoId" : "10", //youtube video id
"user" : { //User that has created the post
"id" : "1", //User's id
"name" : "User 01",//User's name
"description" : "User 01 description", //User's description
"alias" : "user01", //user's alias
"type" : "USER", //fixed
"tenantId" : "22", //tenant's id
"lastUpdate" : "10008520", //date of last time the user has been modified (in miliseconds)
"create" : "10008520", //date the user has been created (in miliseconds)
"numberModerations" : "1", //number of the communities the user is moderator
"state" : "ACTIVE" //Indicates the status of the user (it can be "UNCONFIRMED", "ACTIVE", "BLOCKED" or "REMOVED")
},
"social" : { //Where the post was created
"id" : "1", //Community's id
"name" : "Community 01",//community's name
"description" : "Community 01 description", //community's description
"alias" : "community01", //community's alias
"type" : "COMMUNITY", //it can be "USER" or "COMMUNITY"
"tenantId" : "22", //tenant's id
"lastUpdate" : "10008520", //date of last time the community has been modified (in miliseconds)
"create" : "10008520", //date the community has been created (in miliseconds)
"numberParticipations" : "10", //number of users that participate of the community
"numberModerations" : "1", //number of the community's moderators
"hidden" : "false", //indicates if it is a hidden community
"privateContent" : "false", //indicates if community's content is private
"approvalRequired" : "true", //indicates if it is necessary approval to join the community
"admin" : "true", //indicates if the current user is community's administrator
"state" : "ACTIVE" //Indicates the status of the community (it can be "UNCONFIRMED", "ACTIVE", "BLOCKED" or "REMOVED")
},
"creationDate" : "10008520", //timestamp the post has been created (in miliseconds)
"tenantId" : "22", //tenant's id
"linkedObject" : "null", //the object attached to the post (image, document, video, etc)
"type" : "DEFAULT", //post type. It can be "DEFAULT" or "RECOMMENDATION"
"visibility" : "PUBLIC", //It can be PUBLIC, PRIVATE or CUSTOM
"comments" : [{
"id" : "10", //comment's id
"comment" : "Comment", //comment's text
"user" : {}, //who commented (the same structure the "user" post's field)
"creationDate" : "10008520" //timestamp the commented has been created
}],
"numberLikes" : "1", //number of post's like
"numberShares" : "1", //number of times the post has been shared
"numberComments" : "1", //number of post's comments
"numberDenouncements" : "1", //number of times the post has been denounced
"tags" : "tag tag02", //tags in the post
"url" : "/post/user/10" //post's url
}] |
Segue abaixo os tipos de Publicação disponíveis na Timeline.
<div class="timeline-comments-container"> <div class="commentList"> <div class="timeline-comments clearfix postComment post-parent" id="17"> <!-- Área da foto do usuário --> <div class="timeline-user-photo-container"> <div class="timeline-user-photo-container-hidden" data-user-popover="chef"> <a href="#" class="timeline-link-user totvs-link-social timeline-link-user-photo" data-timeline-link-user="" data-social-alias="chef"> <img src="/social/api/rest/social/image/thumb/chef" class="timeline-user-photo"> </a> </div> </div> <div class="post-content-container"> <!-- Área de informações do comentário. Ex. Nome do usuário, data da Publicação, etc. --> <p class="timeline-post-header"> <a href="#" class="timeline-link-user totvs-link-social" data-user-popover="chef" data-timeline-link-user="" data-social-alias="chef">Jerome McElroy</a> <span class="post-header-text"> - </span> <a href="#" class="timeline-link-date totvs-link-gray"> 27/01/2014 17:29</a> </p> <!-- Conteúdo do comentário --> <p class="timeline-text-post-comment">Aenean lacinia bibendum nulla sed consectetur. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.</p> </div> <!-- Lista de ações disponíveis no comentário --> <ul class="sociable-action-bar list-inline clearfix"> <li><a href="#" class="sociable-link sociable-icon sociable-support linkLikePostComment support" data-linklikepostcomment="">Apoiar</a></li> <!-- More actions --> </ul> </div> </div> </div> |
Segue abaixo os tipos de Comentários de Publicação disponíveis na Timeline.
