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 httpshttp://gisttdn.githubtotvs.com/chambs/e0799862508c3ba3c1cc 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 |
...
}, ... |
A função atribuida a um elemento HTML possui 2 parâmetros:
...
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.Funções
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
Bloco de código | ||||||
---|---|---|---|---|---|---|
| ||||||
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 detlhamento das funções detalhamento dos métodos da Timeline.
linkLikePost(el, ev)
Ação do elemento data-linkLikePost. É responsável pelo evento de curtir posts e outros objetos sociais.
sendComment(el, ev)
Evento do elemento data-send-comment, resopnsável por criar o comentário de um post ou outro objeto social.
linkRemovePost(el, ev)
Ação para o elemento data-linkRemovePost, responsável por remover o post.
linkRemovePostComment(el, ev)
Ação para o elemento data-linkRemovePostComment, responsável por remover o comentário de um post.
linkLikePostComment(el, ev)
Ação para o elemento data-linkLikePostComment, responsável pela ação de curtir um comentário de um post.
timelineLinkSupported(el, ev)
Ação para o elemento data-timeline-link-supported, responsável por exibir uma lista com os usuarios que apoiaram um post ou objeto social.
...
/*
Ação para o elemento data-timeline-link-recommend, responsável por
compartilhar um post ou objeto social
*/
timelineLinkRecommend: function(el, ev) {
/*
Ação para o elemento data-support-list-btn-follow que aparece no modal da lista
de pessoas que apoiaram um post ou objeto social.
É responsável por solicitar relacionamento com o usuário
*/
supportListBtnFollow: function(el, ev) {
/*
Ação do elemento data-showMore.
Quando a timeline é renderizada, é exibido um tamanho máximo de posts.
Se houverem posts mais antigos do que o limite apresentado, este link é
exibido ao usuário, para exibir os próximo N posts
*/
showMore: function(el, ev) {
/*
Ação do elemento data-btn-show-more-comments.
Quando a timeline é renderizada, é exibido um limite máximo de comentários por post.
Se houverem comentários mais antigos do que o limite apresentado, este link é
exibido ao usuário, para exibir os próximo N comentários
*/
btnShowMoreComments: function(el, ev) {
/*
Ação do elemento timeline-link-community.
Esta função é um facilitador para redirecionar a página para o perfil de um usuário, comunidade
ou objeto social que possua alias.
*/
timelineLinkSocial: function(el, ev) {
/*
Ação do elemento data-timeline-link-comment, responsável por exibir o campo de texto
de comentários
*/
timelineLinkComment: function(el, ev) {
/*
Ação disparada pelo evento "newPostEvent".
Este evento é disparado pela widget poster, quando um novo post é realizado pelo usuário,
e é imediatamente renderizado para ele.
*/
showPostedPost: function(eventName, data) {
/*
Ação disparada pelo evento "newpostalert".
Este evento acontece quando um novo post relacionado ao usuário logado é criado.
Um serviço Java então identifica quem são os usuários que precisam ser notificados e dispara
um evento para o Node Server com os ids do usuário receptor e o id do post.
O Node Server então avisa o usuário através do evento "newpostalert" que renderiza o post na tela.
*/
showRealtimePost: function(eventName, data) {
/*
Ação disparada pelo evento "removepostalert", que notifica a timeline
para remover o post
*/
removeRealtimePost: function(eventName, data) {
/*
Esta função verifica se a timeline do usuário possui posts.
Se estiver vazia, exibe no título uma mensagem internacionalizada "Não há posts".
Caso contrário, exibe a mensagem "Últimas publicações"
*/
validateTitleNotPublish: function() {
/*
Realiza uma chamada REST e recupera os dados de um post.
Então, o renderiza.
*/
renderPost: function(postId) {
/*
Realiza uma chamada REST e recupera os dados (em HTML) de um comentário e o retorna
*/
renderComment: function(commentId) {
/*
Esta função é chamada somente pela função showMore.
TODO: revisar para avaliar refactoring
*/
listPosts: function(event) {
/*
Esta função é usada apenas pela função btnShowMoreComments
*/
listComments: function(event, domElement) {
/*
*
* Funcao para fazer a contagem de caracteres no campo de texto de recomendacao...
* Quando o limite de caracteres for ultrapassado ele desabilida o botao e coloca uma borda vermelha no campo...
* A ideia eh colocar essa funcao global para ser consumida em varios lugares...
*
*/
countLength: function(el, ev) {
/*
Esta função itera sobre a timeline já renderizada, em busca de posts que possuem videos do Youtube.
Para cada post encontrado, através do atributo "data-post-youtube-id" é feita uma requisição JSONP
a um serviço do Youtube para recuperar o título do video.
Essa função pode ser executada diversas vezes, pois cada vez que um post com video do Youtube é
encontrado, o atributo "data-post-youtube-id" é consumido, evitando a operação de se repetir.
*/
getYoutubeInfo: function() {
/*
Este evento é disparado quando o usuário tenta clicar em um link de um post recomendado
por outro usuário.
Embora o sistema valide se o usuário tem permissão de visualizar o post, é feita uma
validação no lado do client, acessando um serviço REST que retorna o permissionamento
*/
linkRecommendedPost: function(el, ev) {
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.