---
title: Timeline personalizada 1.5.11 para 1.5.12
source: https://tdn.totvs.com/display/fluig/Timeline+personalizada+1.5.11+para+1.5.12
path: \Plataforma  Documentação técnica\Recurso de Comunidades (Social)\Timeline\Timeline personalizada 1.5.11 para 1.5.12.md
---

# Índice

- 1 [Objetivo](#Timelinepersonalizada1.5.11para1.5.12-Objetivo)
- 2 [application.info](#Timelinepersonalizada1.5.11para1.5.12-application.info)
- 3 [view.ftl](#Timelinepersonalizada1.5.11para1.5.12-view.ftl)
- 4 [socialtimeline.js](#Timelinepersonalizada1.5.11para1.5.12-socialtimeline.js)
- 5 [socialtimeline.properties](#Timelinepersonalizada1.5.11para1.5.12-socialtimeline.properties)

# Objetivo

Este guia é destinado aos desenvolvedores internos e externos do fluig. O objetivo é identificar e mapear todas as diferenças da *Timeline* personalizada entre as versões 1.5.11 e 1.5.12.

Dica

Sugerimos que ao seguir este guia seja utilizado um programa de comparação (diff), que permita visualizar as diferenças entre as versões.

# application.info

Na versão 1.5.12 não foi realizada nenhuma modificação nesse arquivo.

# view.ftl

Nas linhas,

42: SUBSTITUIR o conteúdo da linha 42 por:

```
<div class="panel-body fs-sm-space clearfix">
<div class="media">
```

80: ADICIONAR o conteúdo:

```
{{#editionDate}}
	<span class="timeline-header-no-link fs-no-bold"> - </span>										
	<span data-icon-edited-date-{{postId}} class="fluigicon fluigicon-user-edit fs-cursor-default" title="{{i18n.edited}} {{i18n.in}} {{editionDate}}"></span>											
{{/editionDate}}											
{{^editionDate}}
	<div data-edited-date-{{postId}}></div>
{{/editionDate}}
```

91: SUBSTITUIR o conteúdo da linha 91 por:

```
<p data-timeline-content-{{postId}} class="timeline-text-content">{{{text}}}</p>
```

100: ADICIONAR o conteúdo:

```
	{{#allowsEditActions}}
		<div class="timeline-edit-area" data-edit-area-{{postId}}>
		</div>
	{{/allowsEditActions}}
</div>
```

154: ADICIONAR o conteúdo:

```
{{#allowsEditActions}}
	<li class="timeline-list-actions-item">
		<span class="counter-group">
			<a href="#" class="fluigicon fluigicon-pencil fs-no-text-underline" title="{{i18n.edit}}" data-request-running="false" data-timeline-action="editPost"></a>
		</span>
	</li>
{{/allowsEditActions}}
```

191:SUBSTITUIR o conteúdo da linha 191 por

```
<div class="panel-body fs-sm-space clearfix">
<div class="media">
```

210: ADICIONAR o conteúdo:

```
{{#editionDate}}
	<span class="timeline-header-no-link fs-no-bold"> - </span>										
	<span data-icon-edited-date-{{id}} class="fluigicon fluigicon-user-edit fs-cursor-default" title="{{i18n.edited}} {{i18n.in}} {{editionDate}}"></span>
{{/editionDate}}
{{^editionDate}}
	<div data-edited-date-{{id}}></div>
{{/editionDate}}
```

219: SUBSTITUIR o conteúdo da linha 219 por:

```
<p data-timeline-content-{{id}} class="timeline-text-content">{{{comment}}}</p>
```

221: ADICIONAR o conteúdo:

```
</div>
{{#allowsEditActions}}
	<div class="timeline-edit-area" data-edit-area-{{id}}>
	</div>
{{/allowsEditActions}}
```

242: ADICIONAR o conteúdo:

```
{{#allowsEditActions}}
	<li class="timeline-list-actions-item">
		<span class="counter-group">
			<a href="#" class="fluigicon fluigicon-pencil fs-no-text-underline" title="{{i18n.edit}}" data-request-running="false" data-timeline-action="editComment"></a>
		</span>
	</li>
{{/allowsEditActions}}
```

672: ADICIONAR o conteúdo

```
<script type="text/template" class="social-timeline-edit-content-template">
	<div class="">
		<textarea name="content-text-edit-{{id}}" class="content-text-edit" id="content-text-edit" data-content-text-edit data-sociable-type="{{sociable}}">{{text}}</textarea>			
	</div>
	<div class="edit-buttons-area fr">
		<span class="post-text-limit-edit">{{count}}</span>
		<button class="btn btn-default" data-timeline-action="cancelEdit">Cancelar</button>
		<button class="btn btn-primary edit-content-button" data-timeline-action="saveEdit">Publicar</button>				
	</div>				
</script>
<script type="text/template" class="social-edited-date">
	<span class="timeline-header-no-link fs-no-bold"> - </span>
	<span class="fluigicon fluigicon-user-edit fs-cursor-default" title="{{editionDate}}"></span>				
</script>
```

# socialtimeline.js

Nas linhas:

35: ADICIONAR o seguinte conteúdo:

```
mentionsObj: null,
```

90: ADICIONAR o seguinte conteúdo:

```
'edit' :'${i18n.getTranslation("edit")}',
'edited' :'${i18n.getTranslation("edited")}',
'in' :'${i18n.getTranslation("in")}',
```

111: ADICIONAR o seguinte conteúdo:

```
'post.success.edited': '${i18n.getTranslation("post.success.edited")}',
'comment.success.edited': '${i18n.getTranslation("comment.success.edited")}'
```

116: ADICIONAR o seguinte conteúdo:

```
'content-text-edit': ['keyup_resetCountText', 'focus_resetCountText', 'blur_resetCountText', 'input_resetCountText']
```

276: ADICIONAR o seguinte conteúdo:

```
var that = this;
```

309: ADICIONAR o seguinte conteúdo:

```
posts[i].allowsEditActions = ((this.loggedUserAlias === posts[i].user.alias) && (this.hasPermission(posts[i].permissions,'EDIT')));
posts[i].editionDate =  posts[i].editionDate != null ? that.formatEditionDate(posts[i].editionDate) : false;
```

323: ADICIONAR o seguinte conteúdo:

```
posts[i].comments[j].editionDate =  posts[i].comments[j].editionDate != null ? that.formatEditionDate(posts[i].comments[j].editionDate) : false;
```

388: ADICIONAR o seguinte conteúdo:

```
data[i].allowsEditActions = (this.loggedUserAlias === data[i].user.alias && this.hasPermission(permissions,'EDIT'));
```

912: ADICIONAR o seguinte conteúdo:

```
/* --- EDIÇÃO DE POSTS E COMENTÁRIOS --- */
// ação para apendar um textarea e editar o post
editPostAction: function(el, ev, id) {
	var that = this;
	// clique no botão de editar do mesmo post, ação nula.
	if($('[name="content-text-edit-' + id +'"]').length > 0){
		return;
	}
	this.cancelEditAction();
	$(el).addClass('fs-transparent-25');
	that.mentionsObj = null;
	var postText = $('[data-timeline-content-' + id + ']', this.DOM);
	// recupera o conteúdo do post
	this.serviceFindPost(id, function(err, data) {
		if (err) {
			that.showListPostsMessage(err);
			return false;
		}
		if (data && data.content) {
			var count = 600 - data.content.text.length;
			postText.hide(0, function() {
				var html = Mustache.render(that.templates['social-timeline-edit-content-template'], {
					id: id,
					text: data.content.text,
					count: count,
					sociable: 'editPost'
				});
				$('[data-edit-area-' + id + ']', this.DOM).append(html);
				that.mentions();
				that.mentionsObj = data.content.mentions;
			});
		}
	});
},		
// ação para apendar um textarea e editar o comentário
editCommentAction: function(el, ev, id) {
	var that = this;
	// clique no botão de editar do mesmo comentário, ação nula.
	if($('[name="content-text-edit-' + id +'"]').length > 0){
		return;
	}
	this.cancelEditAction();
	$(el).addClass('fs-transparent-25');
	that.mentionsObj = null;
	// recupera o conteúdo do comentário
	var commentText = $('[data-timeline-content-' + id + ']', this.DOM);
	this.serviceFindComment(id, function(err, data) {
		if (err) {
			that.showListPostsMessage(err);
			return false;
		}
		if (data && data.content) {
			var count = 600 - data.content.commentWithoutMention.length;
			commentText.hide(0, function() {
				var html = Mustache.render(that.templates['social-timeline-edit-content-template'], {
					id: id,							
					text: data.content.comment,
					count: count,
					sociable: 'editComment'
				});
				$('[data-edit-area-' + id + ']', this.DOM).append(html);
				that.mentions();
				that.mentionsObj = data.content.mentions;
			});
		}
	});
},
// antes de abrir um textarea para edição, remove qualquer outra edição em aberto e volta a exibir o conteúdo atual
// ação padrão 
cancelEditAction: function(){
	$('a.fluigicon-pencil').removeClass('fs-transparent-25');
	$('.timeline-text-content').show();
	$('.timeline-edit-area').html("");
},
// publica a edição do posts/comentario
saveEditAction: function(el, ev, id){
	var that = this;
	var newText = "";
	var sociable = $('#content-text-edit').data('sociable-type');
	$('#content-text-edit').mentionsInput('val', function(text) {
		newText = text;
	});
	
	if (that.mentionsObj) {
		var listMentions = Object.keys(that.mentionsObj);
		listMentions.forEach(function(data, i) {
		    var regex = new RegExp(that.mentionsObj[data], 'g');
		    newText = newText.replace(regex, '@[' + data + ']');
		});
	}
	this.serviceEditPostOrComment(sociable, id, newText, function(err, data) {
		if (err) {
			that.showMessageError(err);
			return false;
		}
		var msg = 'post.success.edited';
		if(sociable == 'editComment'){
			msg = 'comment.success.edited';
		};
		FLUIGC.toast({
			message: that.i18n.messages[msg],
			type: 'success'
		});
		that.getNewContent(id, sociable);
	});
},
```

1617: ADICIONAR o seguinte conteúdo:

```
formatEditionDate: function(date){
	var d = new Date(date);
	return d.toLocaleDateString() + " " + d.toLocaleTimeString([], {hour: '2-digit', minute:'2-digit'});
},
```

1730: ADICIONAR o seguinte conteúdo:

```
serviceEditPostOrComment: function(sociable, postId, text, cb) {			
	var data = {
		sociableObjectId: postId,
		text: text
	};
	var options = {
		url: '/api/public/2.0/posts/' + sociable,
		contentType: 'application/json',
		dataType: 'json',
		type: 'POST',
		data: JSON.stringify(data)
	};
	this.baseAjax(options, cb);
},
```

# socialtimeline.properties

Na versão 1.5.12 foram adicionadas algumas chaves de tradução.

Não esquecer de replicar as alterações para os arquivos: socialtimeline\_en\_US.properties, socialtimeline\_es.properties, socialtimeline\_pt\_BR.properties.

Veja abaixo:

```
edit=Editar
edited=Editado
in=em
post.success.edited=Post editado
comment.success.edited=Comentário editado
```