Índice

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

Atalhos

Árvore de páginas

Índice

Objetivo

application.info

view.ftl

socialtimeline.js

socialtimeline.properties

Atalhos

Árvore de páginas

Timeline personalizada 1.5.11 para 1.5.12

Índice

Objetivo

application.info

view.ftl

socialtimeline.js

socialtimeline.properties