Í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

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

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

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

Funções do componente

Segue abaixo o detlhamento das funções da Timeline.

Funções de exibição de conteúdo:

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 da mesma (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 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

isNew: Boolean

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ão.

postId: Object / Array

isNew: Boolean

showComments(data, $post, isNew)

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.

data: Object / Array

$post: Object / Selector jQuery

isNew: Boolean

showPostedPost(evName, data)

Esta função 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.

evName: String

data: Number

showMorePosts(el, ev)

Responsável por exibir novas publicações.

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.

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.

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

showMessageError(err)

Responsável por exibir uma mensagem (toast) com o erro ocorrido.

err: Object //objeto do erro...

showFeedbackMessage(message, type)

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

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.

showCardPopover()

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

Funções de controle de interação:

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.

changeStatusOrderButton($el)

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

toogleCommentArea($post)

Responsável por fazer o toggle (exibir/ocultar) da área de comentário em uma publicaçã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.

validateFilesTypes(path, type)

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

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.

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.

Funções 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).

orderAction(el, ev)

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

searchAction(el, ev)

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

denounceAction(el, ev, id)

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

supportAction(el, ev, id)

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

watchAction(el, ev, id)

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

listLikesAction(el, ev, id)

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

listWatchersAction(el, ev, id)

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

commentAction(el, ev, id)

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

timelineCommentAction(el, ev)

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

removeAction(el, ev, id)

Este método executa a ação de remover um 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.

denounce(el, ev)

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

Funções de formação de conteúdo:

generateOrderAction()

generatePostHeader(data)

generateDateFormat(timestamp)

generateTimeFormat(i)

generateListClass(numberActions)

generateTemplateVariableContent(data)

generateContentTextFormatted(text, mentions)

formatMentions(text, mentions)

formatTags(text)

formatLink(text)

formatLineBreak(text)

Funções de integração com serviços

serviceComment(id, comment, cb)

serviceSupport(id, cb)

serviceWatch(id, isWatched, cb)

serviceRemove(id, type, cb)

serviceListPosts(cb)

serviceFindPost(postId, cb, limit)

serviceListComments(postId, offset, cb, limit)

baseAjax(options, cb)