Índice

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.

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

...

Eclipse

Bloco de código
theme
language html/xml titletheme Eclipse title No HTML
<button data-salvar-dados>Salvar dados</button>

Bloco de código
language javascript theme Eclipse language javascript title 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 }, ...

...

Exemplo de internacionalização de literais da widget

...

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

...

Segue abaixo o detalhamento dos métodos da Timeline.

Métodos de exibição de conteúdo:

showTimeline()

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

...

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 da mesma retornados (publicaçõesVO 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 por pelo controle de busca de uma publicação. Ele interage com outro método "serviceListFind" e com o resultado do registro retornado (VO da mesma ( publicação), delega o conteúdo retornado para outra função para ser renderizado e exibido na página (listagem de posts). Ele recebe o id da publicação e um segundo argumento que identifica se é uma nova publicação ou uma publicação existente.

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

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

showPosts(posts, isNew)

Responsável por formatar e exibir as publicações na página. Ele recebe um array de registros (publicações) e se é uma nova publicação ou nãoformata 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

...

Responsável por formatar e exibir os comentários páginados. Ele recebe um array de registros (comentários), o selector em jQuery da publicação em questão e se é um novo comentário ou não 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 jqueryjQuery do post em questão

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

showPostedPost(evName, data)

Esta função Este método escuta (listener) a criação de uma nova publicação do usuário, e delega a renderização dele informando o id da mesma. Recebe o nome evento disparado (fireEvent) e o id da publicação(feita pelo usuário logado) e encaminha a mesma para ser exibida na página.

evName: String //nome do evento disparado

...

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

el: Object //elemento que disparou o evento

...

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

el: Object //elemento que disparou o evento

...

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

...

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

...

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

message: String //mensagem para ser exibida

...

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 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 postsretornados

changeStatusOrderButton($el)

Responsável por mudar o status do botão de ordenação/filtragem na da timeline baseado na opção selecionada. Renderiza novamente via mustache 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.

...

interactionType: String //add ou remove

...

Métodos de ações:
 
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. 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
 
Métodos de geração de conteúdo:
...
generateOrderAction()
Responsável por gerar o objeto para montar o botão de ordenação de publicações.
...
Responsável por adicionar o html de quebra de linhas no conteúdo da publicação.
 
...
 
serviceComment(id, comment, cb)
...
Esse método é responsável por encapsular todas as configurações básicas de uma chamada ajax.