Timeline

Índice

Timeline es un feed de posts realizados por usuarios que el usuario sigue o comunidades en que él participa.
A través de ella es posible interactuar con los posts, ya sea comentándolos, haciendo clic en me gusta o compartiéndolos.

Así como todos los componentes de la capa social de Fluig, Timeline utiliza el facilitador SuperWidget en la capa de Javascript.
Para saber más sobre el funcionamiento de SuperWidget consulte el manual en http://tdn.totvs.com/display/fluig/Super+Widget.

Bind de elementos HTML a funciones

Para asociar un evento a un elemento HTML, es necesario seguir el formato a continuación.
El componente HTML debe poseer un atributo fecha- el cual recibirá el bind de funciones de widget.

Ejemplo de un bind de la función guardar en un botón

<button data-salvar-dados>Guardar datos</button>

bindings: {
    local: {
        'salvar-dados': ['click_salvarDados']
    }
 },
//implementacion de la función guardar
guardarDatos: function(el, ev) {
    //escriba la acción del botón guardar-datos aquí
}, ...

La función atribuida a un elemento HTML posee 2 parámetros:

• el: Representa el propio botón. En el caso del ejemplo: <button data-salvar-dados>Guardar datos</button>
• ev: representa el objeto del evento disparado

Observe que no es necesario agregar el prefijo data-.
El array atribuido es una string en el estándar EVENTO_FUNÇÃO. Varias combinaciones de evento x función se pueden atribuir a un único elemento.
Los bindings hechos en el objeto local se refieren a elementos HTML dentro del div del widget. Y los binds hechos en el objeto global son para elementos fuera del div de la widget, o retirados del div de la widget por otro script, como es el caso de las modales del jQueryUI.

Funciones del componente

A continuación se presentan a detalle las funciones de Timeline.

likeSocial(el, ev)

Acción del elemento data-timeline-link-like. Es responsable por el evento de dar un me gusta a posts y otros objetos sociales.

sendComment(el, ev)

Evento del elemento data-send-comment, responsable por crear el comentario de un post u otro objeto social.

linkRemovePost(el, ev)

Acción para el elemento fecha-linkRemovePost, responsable por eliminar el post.

linkRemovePostComment(el, ev)

Acción para el elemento data-linkRemovePostComment, responsable por eliminar el comentario de un post.

likeListSocial(el, ev)

Acción para el elemento data-like-list-social, responsable por exhibir una lista con los usuarios que apoyaron un post u objeto social.

timelineLinkRecommend(el, ev)

Acción para el elemento data-timeline-link-recommend, responsable por compartir un post u objeto social.

showMore(el, ev)

Acción del elemento data-showMore.
Cuando timeline es renderizado, se exhibe un tamaño máximo de posts.
Si hay posts más antiguos que el límite presentado, este link se exhibe al usuario, para exhibir los próximos N posts

btnShowMoreComments(el, ev)

Acción del elemento data-btn-show-more-comments.
Cuando timeline es renderizado, se exhibe un límite máximo de comentarios por post.
Si hay comentarios más antiguos que el límite presentado, este link se exhibe al usuario, para exhibir los próximos N comentarios.

timelineLinkSocial(el, ev)

Acción del elemento timeline-link-community.
Esta función es un facilitador para redireccionar la página al perfil de un usuario, comunidad u objeto social que posea alias.

timelineLinkComment(el, ev)

Acción del elemento fecha-timeline-link-comment, responsable por exhibir el campo de texto de comentarios.

showPostedPost(eventName, fecha)

Acción disparada por el evento "newPostEvent".
Este evento se dispara por widget poster, cuando un nuevo post es realizado por el usuario, y es inmediatamente renderizado para él.  

showRealtimePost(eventName, data)

Acción disparada por el evento "newpostalert".
Este evento ocurre cuando se crea un nuevo post relacionado con el usuario conectado.
Un servicio Java entonces identifica quiénes son los usuarios que necesitan ser notificados y dispara un evento para Node Server con los ids del usuario receptor y el id del post.
Node Server entonces avisa al usuario a través del evento "newpostalert" que renderiza el post en la pantalla.

removeRealtimePost(eventName, data)

Acción disparada por el evento "removepostalert", que notifica a timeline eliminar el post.

validateTitleNotPublish()

Esta función verifica si el timeline del usuario posee posts.
Si está vacía, exhibe en el título un mensaje internacionalizado "No hay posts".
De lo contrario, exhibe el mensaje "Últimas publicaciones"

renderPost(postId)

Realiza una llamada REST y recupera los datos de un post, y entonces lo renderiza.

renderComment(commentId)

Realiza una llamada REST y recupera los datos (en HTML) de un comentario y lo devuelve.

listPosts(event)

Esta función es llamada solamente por la función showMore.

listComments(event, domElement)

Esta función es usada solamente por la función btnShowMoreComments.

countLength(el, ev)

Función para hacer el conteo de caracteres en el campo de texto de recomendación.
Cuando el límite de caracteres se excede, este deshabilita el botón y coloca un borde rojo en el campo.

getYoutubeInfo()

Esta función itera sobre el timeline ya renderizado, en búsqueda de posts que poseen videos de Youtube.
Para cada post encontrado, a través del atributo "data-post-youtube-id" se realiza una requisición JSONP a un servicio del Youtube para recuperar el título del video.
Esa función se puede ejecutar diversas veces, pues cada vez que se encuentra un post con video de Youtube, el atributo "data-post-youtube-id" se consume, evitando que se repita la operación.

linkRecommendedPost(el, ev)

Este evento es disparado cuando el usuario intenta hacer clic en un link de un post recomendado por otro usuario.
Aunque el sistema valida si el usuario tiene permiso de visualizar el post, se realiza una validación en el lado del cliente, accediendo a un servicio REST que devuelve el acceso autorizado.

commentListSocial(domElement, typeAction)

Esta función es responsable por hacer el conteo de comentarios y modificar el texto en una publicación.

watch(el, ev)

Acción del elemento data-timeline-link-watch. Es responsable por el evento de seguir posts y otros objetos sociales.

getNumberWatchs(options, el)

Esta función es responsable por hacer una llamada en el servidor y devolver el número de usuarios que siguen la publicación.

watchListSocial(el, ev)

Acción para el elemento data-watch-list-social, responsable por exhibir una lista con los usuarios que siguen un post u objeto social.

toggleStatusClass(el, isAction, actionType)

Esta función es responsable por modificar el estatus de los botones que cambian re colores al ejecutar una acción sobre el mismo.