Árvore de páginas

Contents

Timeline basic files

As all Fluig components, the Timeline is developed based on the template framework FreeMarker (.ftl). FreeMarker is responsible for the viewing layer, where all HTML from the component is written. As well as the FreeMarker file(s), all components have their CSS (.css) and JavaScript (.js) files.

Posting Action

In order to generate content on the Timeline, Fluig uses the Content posting component Poster. Poster is responsible for absorbing all content typed by the user in the Post field and send it to be exhibited as a new Post on the Timeline.

Posting Action on User Timeline

Posting Action on User Timeline is the text field where the user types the content for Posting. This text field is available at your home page and all the content is posted on your own Timeline.

Action button disabled

Action button enabled

Comment on a Post

Posting Action on Community Timeline

Posting Action on Community Timeline is the text field where the user types the content for Posting. This text field is available in any Community page and all content is published on the Community page in question.

Initial Status

Waiting for Content

Viewing action

After generating a new Post, this content is shown on the Timeline in different types of view.

Basic structure of a Post

In HTML
<div class="timeline-post-wrapper post post-parent" id="${post.postId}">
	<div class="timeline-post clearfix">
		<!-- User picture area -->
		<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">
			<!-- Post information area. For instance, user name, post date, 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>
			<!-- Post content -->
			<p class="timeline-text-post">${post.text}</p>
		</div>
		<!-- List of actions available in the Post -->
		<ul class="sociable-action-bar list-inline">
			<li><a href="#" class="sociable-link sociable-icon sociable-comment timeline-link-comment" data-timeline-link-comment>Comment</a></li>
			<!-- More actions -->
		</ul>
	</div>
</div>

 

 

In CSS
/*
 *
 * Multiple definitions
 *
 */
.wcm-widget-timeline .timeline-post,
.wcm-widget-timeline .timeline-comments {
	padding: 8px 0 36px;
	position: relative;
}
...

 

Basically, the CSS file is divided in the following categories:

  • Multiple definitions: All formatting that are common in the Timeline component such as spacing, font size, font color, etc.
  • Unic definitions: All formatting that are unique in the Timeline component such as the component title, etc.
  • Sociable actions bar: Formatting in the action area of a Post. Example: Like, Comment, Share buttons, etc.
  • Container comments list: Formatting of a list of Post Comments.
  • Youtube video format: Formatting of a Post or Comment with a rendered Youtube video.
  • Content shared types: Basic formatting of a Post with shared content. Example: Image, Documents, Users, etc.

 

Response List of JSON (example):  Expand source
[{
	"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
}] 

 

Types of Posts

The types of posts available in the Timeline are listed below.

New article created

Post in community

Shared Post

Post with Image

Post with mention and hashtag

Modal for Sharing a Post

Basic structure of a Comment on a Post

In HTML
<div class="timeline-comments-container">
	<div class="commentList">
		<div class="timeline-comments clearfix postComment post-parent" id="${comment.id}">
			<!-- User picture area -->
			<div class="timeline-user-photo-container">
				<div class="timeline-user-photo-container-hidden" data-user-popover="${comment.user.alias}">
					<a href="#" class="timeline-link-user totvs-link-social timeline-link-user-photo" data-timeline-link-user="" data-social-alias="${comment.user.alias}">
						<img src="/social/api/rest/social/image/thumb/${comment.user.alias}" class="timeline-user-photo">
					</a>
				</div>
			</div>
			<div class="post-content-container">
				<!-- Comment information area. For instance, user name, post date, etc. -->
				<p class="timeline-post-header">
					<a href="#" class="timeline-link-user totvs-link-social" data-user-popover="${comment.user.alias}" data-timeline-link-user="" data-social-alias="${comment.user.alias}">Jerome McElroy</a>
					<span class="post-header-text"> - </span>
					<a href="#" class="timeline-link-date totvs-link-gray"> ${comment.data}</a>
				</p>
				<!-- Content comment -->
				<p class="timeline-text-post-comment">${comment.text}</p>
			</div>
			<!-- List of actions available in the comment -->
			<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>

 

Types of comments

The types of Comments on the Post available in the Timeline are listed below.

Comment on a Post

  • Sem rótulos