Histórico da Página
Índice
Í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.
Nota | ||
---|---|---|
| ||
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. |
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
Bloco de código | |||||||
---|---|---|---|---|---|---|---|
| |||||||
<button data-salvar-dados>Salvar dados</button> |
Bloco de código | ||||||||
---|---|---|---|---|---|---|---|---|
| ||||||||
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
Bloco de código |
---|
...
| |||||||
| |||||||
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
postId: Number //id da publicação para ser buscada
isNew: Boolean //se uma nova publicação ou uma publicação já existenteisNew: 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ã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/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 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 // Arrayarray com os dados para listar os comentários
$post: Object/Selector jQuery / Selector jQuery/selector jQuery 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
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.
...
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 retornados
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.
$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.
...
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.
Métodos de ações:
$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.
Métodos de geração de conteúdo:
...
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.
...
Responsável por adicionar o html de quebra de linhas no conteúdo da publicação.
Métodos de integração com serviços
serviceComment(id, comment, cb)
...
Esse método é responsável por encapsular todas as configurações básicas de uma chamada ajax.