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

# Índice

- 1 [Bind de elementos HTML a funções](#Timeline-BinddeelementosHTMLafunções)
  - 1.1 [Exemplo de um bind da função salvar em um botão](#Timeline-Exemplodeumbinddafunçãosalvaremumbotão)
- 2 [Internacionalização de literais](#Timeline-Internacionalizaçãodeliterais)
  - 2.1 [Exemplo de internacionalização de literais da widget](#Timeline-Exemplodeinternacionalizaçãodeliteraisdawidget)
- 3 [Métodos do componente](#Timeline-Métodosdocomponente)
  - 3.1 [showTimeline()](#Timeline-showTimeline())
  - 3.2 [listPosts()](#Timeline-listPosts())
  - 3.3 [findPost(postId, isNew)](#Timeline-findPost(postId,isNew))
  - 3.4 [showPosts(posts, isNew)](#Timeline-showPosts(posts,isNew))
  - 3.5 [showComments(data, $post, isNew)](#Timeline-showComments(data,$post,isNew))
  - 3.6 [showPostedPost(evName, data)](#Timeline-showPostedPost(evName,data))
  - 3.7 [showMorePosts(el, ev)](#Timeline-showMorePosts(el,ev))
  - 3.8 [showMoreComments(el, ev)](#Timeline-showMoreComments(el,ev))
  - 3.9 [showListPostsMessage(err)](#Timeline-showListPostsMessage(err))
  - 3.10 [showMessageError(err)](#Timeline-showMessageError(err))
  - 3.11 [showFeedbackMessage(message, type)](#Timeline-showFeedbackMessage(message,type))
  - 3.12 [showBtnShowMore()](#Timeline-showBtnShowMore())
  - 3.13 [showVideos()](#Timeline-showVideos())
  - 3.14 [showCardPopover()](#Timeline-showCardPopover())
  - 3.15 [instanceTimeInteraction()](#Timeline-instanceTimeInteraction())
  - 3.16 [controlBtnShowMore(postsLen)](#Timeline-controlBtnShowMore(postsLen))
  - 3.17 [changeStatusOrderButton($el)](#Timeline-changeStatusOrderButton($el))
  - 3.18 [toogleCommentArea($post)](#Timeline-toogleCommentArea($post))
  - 3.19 [instanceMentions()](#Timeline-instanceMentions())
  - 3.20 [resetMentions(parent)](#Timeline-resetMentions(parent))
  - 3.21 [validateFilesTypes(path, type)](#Timeline-validateFilesTypes(path,type))
  - 3.22 [textComplaintValidate(text)](#Timeline-textComplaintValidate(text))
  - 3.23 [controlInteractionActions($el, interactionType)](#Timeline-controlInteractionActions($el,interactionType))
  - 3.24 [timelineAction(el, ev)](#Timeline-timelineAction(el,ev))
  - 3.25 [openDocumentAction(el, ev)](#Timeline-openDocumentAction(el,ev))
  - 3.26 [orderAction(el, ev)](#Timeline-orderAction(el,ev))
  - 3.27 [searchAction(el, ev)](#Timeline-searchAction(el,ev))
  - 3.28 [denounceAction(el, ev, id)](#Timeline-denounceAction(el,ev,id))
  - 3.29 [supportAction(el, ev, id)](#Timeline-supportAction(el,ev,id))
  - 3.30 [watchAction(el, ev, id)](#Timeline-watchAction(el,ev,id))
  - 3.31 [listLikesAction(el, ev, id)](#Timeline-listLikesAction(el,ev,id))
  - 3.32 [listWatchersAction(el, ev, id)](#Timeline-listWatchersAction(el,ev,id))
  - 3.33 [commentAction(el, ev, id)](#Timeline-commentAction(el,ev,id))
  - 3.34 [timelineCommentAction(el, ev)](#Timeline-timelineCommentAction(el,ev))
  - 3.35 [removeAction(el, ev, id)](#Timeline-removeAction(el,ev,id))
  - 3.36 [shareAction(el, ev, id)](#Timeline-shareAction(el,ev,id))
  - 3.37 [denounce(el, ev)](#Timeline-denounce(el,ev))
  - 3.38 [generateOrderAction()](#Timeline-generateOrderAction())
  - 3.39 [generatePostHeader(data)](#Timeline-generatePostHeader(data))
  - 3.40 [generateListClass(numberActions)](#Timeline-generateListClass(numberActions))
  - 3.41 [generateTemplateVariableContent(data)](#Timeline-generateTemplateVariableContent(data))
  - 3.42 [generateContentTextFormatted(text, mentions)](#Timeline-generateContentTextFormatted(text,mentions))
  - 3.43 [formatMentions(text, mentions)](#Timeline-formatMentions(text,mentions))
  - 3.44 [formatTags(text)](#Timeline-formatTags(text))
  - 3.45 [formatLink(text)](#Timeline-formatLink(text))
  - 3.46 [formatLineBreak(text)](#Timeline-formatLineBreak(text))
  - 3.47 [serviceComment(id, comment, cb)](#Timeline-serviceComment(id,comment,cb))
  - 3.48 [serviceSupport(id, cb)](#Timeline-serviceSupport(id,cb))
  - 3.49 [serviceWatch(id, isWatched, cb)](#Timeline-serviceWatch(id,isWatched,cb))
  - 3.50 [serviceRemove(id, type, cb)](#Timeline-serviceRemove(id,type,cb))
  - 3.51 [serviceListPosts(cb)](#Timeline-serviceListPosts(cb))
  - 3.52 [serviceFindPost(postId, cb, limit)](#Timeline-serviceFindPost(postId,cb,limit))
  - 3.53 [serviceListComments(postId, offset, cb, limit)](#Timeline-serviceListComments(postId,offset,cb,limit))
  - 3.54 [baseAjax(options, cb)](#Timeline-baseAjax(options,cb))

A Timeline é um feed de posts realizados por usuários que o usuário segue ou comunidades que ele participa. Através dela é possível interagir com os posts, seja comentando-os, curtindo-os ou os compartilhando. Bem como todos os componentes da camada social do Fluig, a Timeline utiliza o facilitador SuperWidget na camada de Javascript. Para saber mais sobre o funcionamento da SuperWidget consulte o manual em <http://tdn.totvs.com/display/fluig/Super+Widget>.

Atenção

A técnica de extensão da timeline não é homologada para a nova timeline de social lançada em [15 de Dezembro de 2020](https://tdn.totvs.com/x/SGHoI).

### Bind de elementos HTML a funções

Para associar um evento a um elemento HTML, é preciso seguir o formato abaixo.  
O componente HTML deve possuir um atributo **data-** o qual receberá o bind de funções da widget.

#### Exemplo de um bind da função salvar em um botão

**No HTML**

```
<button data-salvar-dados>Salvar dados</button>
```

**No arquivo .js da widget**

```
bindings: {
    local: {
        'salvar-dados': ['click_salvarDados']
    }
 },

//implementação da função salvar
salvarDados: function(el, ev) {
    //escreva a ação do botão salvar-dados aqui
}, ...
```

A função atribuida a um elemento HTML possui 2 parâmetros:

- **el:** Representa o próprio botão. No caso do exemplo: <button data-salvar-dados>Salvar dados</button>
- **ev:** representa o objeto do evento disparado

Note que não é necessário adicionar o prefixo **data-**.  
O array atribuido é uma string no padrão EVENTO\_FUNÇÃO. Várias combinações de evento x função podem ser atribuidos a um único elemento.  
Os bindings feitos no objeto local são referentes a elementos HTML dentro do div da widget. E os binds feitos no objeto global são para elementos fora do div da widget, ou retirados do div da widget por outro script, como é o caso das modais do jQueryUI.

### Internacionalização de literais

Para ficar padronizado, é de boa prática que todas a literais que exigem internacionalização sejam adicionadas em um objeto global para que possam ser reutilizadas posteriormente.

#### Exemplo de internacionalização de literais da widget

**No arquivo .js da widget**

```
i18n: {
	'titles': {
		'denounce': '${i18n.getTranslation("denounce")}',
		'publication': '${i18n.getTranslation("publication")}',
		...
	},
	'labels': {
		'version': '${i18n.getTranslation("version")}',
		'revision': '${i18n.getTranslation("revision")}',
		...
	},
	...
},
```

### Métodos do componente

Segue abaixo o detalhamento dos métodos da Timeline.

#### showTimeline()

Este método é responsável por renderizar e exibir o container principal da timeline na página.

#### listPosts()

Este é um método de controle de listagem de publicação. Ela interage com um outro método "**serviceListPosts**" e com o resultado dos registros retornados (VO da publicações), delega o conteúdo retornado para outra função para ser renderizado e exibido na página (listagem de posts).

#### findPost(postId, isNew)

Responsável pelo controle de busca de uma publicação. Ele interage com outro método "**serviceListFind**" e com o resultado do registro retornado (VO da publicação), delega o conteúdo retornado para outra função para ser renderizado e exibido na página (listagem de posts).

```
postId: Number //id da publicação para ser buscada
```

```
isNew: Boolean //se uma nova publicação ou uma publicação já existente
```

#### showPosts(posts, isNew)

Responsável por formatar e exibir as publicações na página. Ele formata o objeto recebido (posts) e envia o mesmo para o Mustache renderizar as publicações e devolver o html pronto para ser exibido.

```
postId: Object/Array //array com os dados para listar os posts
```

```
isNew: Boolean //se uma nova publicação ou não
```

#### showComments(data, $post, isNew)

Responsável por formatar e exibir os comentários páginados. Ele formata o objeto recebido (data) e envia o mesmo para o Mustache renderizar os comentários e devolver o html pronto para ser exibido.

```
data: Object/Array //array com os dados para listar os comentários
```

```
$post: Object/Selector jQuery //selector jQuery do post em questão
```

```
isNew: Boolean //se é um novo comentário ou não
```

#### showPostedPost(evName, data)

Este método escuta (*listener*) a criação de uma nova publicação (feita pelo usuário logado) e encaminha a mesma para ser exibida na página.

```
evName: String //nome do evento disparado
```

```
data: Number //id do post criado
```

#### showMorePosts(el, ev)

Responsável por exibir novas publicações (paginação).

```
el: Object //elemento que disparou o evento
```

```
ev: Object //evento disparado
```

#### showMoreComments(el, ev)

Responsável por exibir novos comentários em uma publicação (paginação).

```
el: Object //elemento que disparou o evento
```

```
ev: Object //evento disparado
```

#### showListPostsMessage(err)

Responsável por exibir uma mensagem informativa ou de erro na timeline baseada no retorno do serviço de listagem de publicações.

```
err: Object //quando for erro, envia o objeto do erro
```

#### showMessageError(err)

Responsável por exibir uma mensagem (toast) com o erro ocorrido em qualquer serviço (interação com o server) disparado pela timeline.

```
err: Object //objeto do erro
```

#### showFeedbackMessage(message, type)

Responsável por exibir uma mensagem genérica (toast) na página.

```
message: String //mensagem para ser exibida
```

```
type: String //tipo de mensagem (success, danger, warning, etc)
```

#### showBtnShowMore()

Responsável por exibir o botão de exibir mais publicações (show more) na timeline.

#### showVideos()

Responsável por instanciar o plugin de vídeo (videojs) nas publicações com vídeo. Ele faz com que um vídeo seja renderizado e disponível para visualização.

#### showCardPopover()

Responsável por instanciar o plugin de popover de informações de usuários e comunidades.

#### instanceTimeInteraction()

Responsável por instanciar o componente de interação de datas nas publicações. Ex. *há 7 horas atrás*.

#### controlBtnShowMore(postsLen)

Responsável por controlar a exibição do botão de **exibir mais publicações** baseada no retorno do serviço de listagem.

```
postsLen: Number //Recebe a quantidade de registros retornados
```

#### changeStatusOrderButton($el)

Responsável por mudar o status do botão de ordenação/filtragem da timeline baseado na opção selecionada. Renderiza novamente via Mustache o botão de ordenação trocando o botão atual.

```
$el: Object/Selector jQuery //Recebe o selector jQuery do botão de ordenação (dropdown)
```

#### toogleCommentArea($post)

Responsável por fazer o toggle (exibir/ocultar) da área de comentário em uma publicação.

```
$post: Object/Selector jQuery //Recebe o selector jQuery do botão de ordenação
```

#### instanceMentions()

Responsável por instanciar o plugin de menção de usuários e comunidades e auto complete de tags na área de comentário de uma publicação.

#### resetMentions(parent)

Responsável por remover as menções e resetar o plugin no elemento instanciado.

```
parent: Object/Selector //Recebe o selector do post para resetar o plugin de menção
```

#### validateFilesTypes(path, type)

Responsável por validar se a extensão da imagem/vídeo será renderizada ou não em uma publicação.

```
path: String //Recebe a string para analisar e validar.
```

```
type: String //Tipo de media para analisar (image, video).
```

#### textComplaintValidate(text)

Esse método é utilizado na funcionalidade de denúncia. Ela verifica se a descrição da denúncia contém no mínimo 4 palavras com  3 caracteres cada uma.

```
text: String //String a ser analisada pela função.
```

#### controlInteractionActions($el, interactionType)

Esse método controla a exibição do número de interações (apoiadores, acompanhadores, etc) em um comentário / publicação.

```
$el: Object/Selector jQuery //Elemento para controlar a interação
```

```
interactionType: String //add ou remove
```

#### timelineAction(el, ev)

Principal método de ação da timeline. Praticamente todas as ações chamam esse método que encapsula todas as validações necessárias para realizar uma ação e capturar o id do comentário ou publicação. A partir do elemento que houve uma interação, ela delega para o método correto da ação. Ex. (supportAction, shareAction, denounceAction, etc).

```
el: Object //Elemento onde houve a interação
```

```
ev: Object //Evento da interação
```

#### openDocumentAction(el, ev)

Método de ação específico para visualizar documentos/imagens publicados na timeline. Responsável por abrir o referido documento em um modal, sem perder a referência à timeline (quando fechar o documento volta para onde estava).

```
el: Object //Elemento onde houve a interação
```

```
ev: Object //Evento da interação
```

#### orderAction(el, ev)

Este método altera a ordenação das publicações da timeline.

```
el: Object //Elemento onde houve a interação
```

```
ev: Object //Evento da interação
```

#### searchAction(el, ev)

Este método faz a busca de uma tag no sistema a partir do valor da mesma.

```
el: Object //Elemento onde houve a interação
```

```
ev: Object //Evento da interação
```

#### denounceAction(el, ev, id)

Este método chama o modal de denúncia de um comentário / publicação.

```
el: Object //Elemento onde houve a interação
```

```
ev: Object //Evento da interação
```

```
id: Number //id do comentário / publicação
```

#### supportAction(el, ev, id)

Este método executa a ação de apoiar um comentário / publicação.

```
el: Object //Elemento onde houve a interação
```

```
ev: Object //Evento da interação
```

```
id: Number //id do comentário / publicação
```

#### watchAction(el, ev, id)

Este método executa a ação de acompanhar uma publicação.

```
el: Object //Elemento onde houve a interação
```

```
ev: Object //Evento da interação
```

```
id: Number //id do comentário / publicação
```

#### listLikesAction(el, ev, id)

Este método chama o modal de listagem de apoiadores de um comentário / publicação.

```
el: Object //Elemento onde houve a interação
```

```
ev: Object //Evento da interação
```

```
id: Number //id do comentário / publicação
```

#### listWatchersAction(el, ev, id)

Este método chama o modal de listagem de apoiadores de uma publicação.

```
el: Object //Elemento onde houve a interação
```

```
ev: Object //Evento da interação
```

```
id: Number //id do comentário / publicação
```

#### commentAction(el, ev, id)

Este método executa a ação de exibir a área de comentário em uma publicação.

```
el: Object //Elemento onde houve a interação
```

```
ev: Object //Evento da interação
```

```
id: Number //id do comentário / publicação
```

#### timelineCommentAction(el, ev)

Este método executa a ação de comentar.

```
el: Object //Elemento onde houve a interação
```

```
ev: Object //Evento da interação
```

#### removeAction(el, ev, id)

Este método executa a ação de remover um comentário / publicação.

```
el: Object //Elemento onde houve a interação
```

```
ev: Object //Evento da interação
```

```
id: Number //id do comentário / publicação
```

#### shareAction(el, ev, id)

Este método executa a ação de abrir o modal de compartilhamento de uma publicação.

```
el: Object //Elemento onde houve a interação
```

```
ev: Object //Evento da interação
```

```
id: Number //id do comentário / publicação
```

#### denounce(el, ev)

Este método executa a ação de denunciar um comentário / publicação.

```
el: Object //Elemento onde houve a interação
```

```
ev: Object //Evento da interação
```

#### generateOrderAction()

Responsável por gerar o objeto para montar o botão de ordenação de publicações.

#### generatePostHeader(data)

Responsável por gerar o objeto para montar o header de uma publicação.

#### generateListClass(numberActions)

Responsável por validar se existe interação na publicação e gerar a classe que será adicionada no elemento de exibição de interações.

#### generateTemplateVariableContent(data)

Responsável por validar e gerar o nome do template do conteúdo variável de uma publicação. (publicação com imagem, vídeo, compartilhamento, etc).

#### generateContentTextFormatted(text, mentions)

Responsável por formatar o conteúdo de uma publicação.

#### formatMentions(text, mentions)

Responsável por adicionar o html de menção no conteúdo da publicação.

#### formatTags(text)

Responsável por adicionar o html de tags no conteúdo da publicação.

#### formatLink(text)

Responsável por adicionar o html de links no conteúdo da publicação.

#### formatLineBreak(text)

Responsável por adicionar o html de quebra de linhas no conteúdo da publicação.

#### serviceComment(id, comment, cb)

Este método é responsável por realizar a chamada no servidor para fazer a publicação de um comentário.

#### serviceSupport(id, cb)

Este método é responsável por realizar a chamada no servidor para adicionar ou remover apoio em um comentário ou publicação.

#### serviceWatch(id, isWatched, cb)

Este método é responsável por realizar a chamada no servidor para adicionar ou remover acompanhamento em um comentário ou publicação.

#### serviceRemove(id, type, cb)

Esse método é responsável por realizar a chamada no servidor para remover um comentário ou publicação.

#### serviceListPosts(cb)

Esse método é responsável por realizar a chamada no servidor para buscar várias publicações.

#### serviceFindPost(postId, cb, limit)

Esse método é responsável por realizar a chamada no servidor para buscar uma publicação.

#### serviceListComments(postId, offset, cb, limit)

Esse método é responsável por realizar a chamada no servidor para buscar comentários de uma publicação.

#### baseAjax(options, cb)

Esse método é responsável por encapsular todas as configurações básicas de uma chamada ajax.