Less / More – Show / Hide: necesito que mi listado pueda verlo mejor el usuario de mi aplicación ¿ JTruncate JQuery? o ¿Javascript a mano?


jquery-javascript En esta ocasión me gustaría compartir una experiencia reciente en la toma de decisión técnica y cómo gestionar el ánimo en esos momentos cuando está fallando, sabes que lo has probado y te ha funcionado, pero en el momento de salir a escena salta el fallo. En la mayoría de los casos que trabajamos con plugins o gemas, no dan muchos fallos cuando lo incorporamos en proyectos, normalmente me refiero a que o va bien o va mal, pero en otras ocasiones podemos encontrarnos casos que va bien pero también falla. Esto es lo que quiero explicar para que tomes en consideración algunos parámetros más antes de decidir que ya lo tienes terminado y probada tu funcionalidad.

EL PROBLEMA

El problema con el que me he encontrado es el siguiente:

Tengo un listado en el que un usuario tiene asociado un listado de características que pueden ser en algunos casos ninguna o muchas. El caso es que cuando vemos en dicho listado muchas características asociadas y en otros usuarios, queda un poco complicado ver en el listado por tamaño de cada ficha listada en pantalla y pierde un poco la forma de presentación.

Un ejemplo del listado de fichas de usuarios:

Usuario1 Sánchez Pérez (link a su ficha con detalle)
Características asociadas: Característica 1. Característica 2. Característica 3. Característica 4. 
                                             Característica 5. Característica 6. Característica 7. 

                                             Característica 8…………                                                           NOTA: Características -> el problema a solucionar cuando son muchos pata Hide/Show

Leal Pelayo 123 1º J (15005) A coruña – A coruña – TLF: 981122345
De L a J de 09:00 a 19:00 horas V de 09:00 a 13:00 horas
Ver detalle
Usuario2 Sánchez Pérez (link a su ficha con detalle)

Características asociadas: Característica 1. Característica 2. Característica 3. 

Menéndez Pelayo 123 1º J (15005) Madrid – Madrid – TLF: 981122345
De L a J de 09:00 a 19:00 horas V de 09:00 a 13:00 horas

Ver detalle

Usuario3 Sánchez Pérez (link a su ficha con detalle)
Características asociadas: Característica 1. Característica 2. Característica 3. 
                                              Característica 4. Característica 5. 
                                              Característica 6. Característica 7. 

                                              Característica 8…………

Menéndez Pelayo 123 1º J (15005) Burgos – Burgos – TLF: 981122345
De L a J de 09:00 a 19:00 horas V de 09:00 a 13:00 horas
Ver detalle

…………………………………………… muchos más

Por tanto, sabiendo ya cual es el problema, ahora lo que necesito es hacer que en los casos que tenemos muchas “características asociadas” para un usuario, sería necesario el poder ocultar un cierto tamaño de las mismas para que podamos hacer click en “ver más” u “ocultar”. Lo primero es pensar en cómo puedo hacerlo y arranco preguntando siempre a compañeros de trabajo a ver sus experiencias en estos casos y que piensan al respecto. Siempre vas a encontrarte con distintas opiniones y en algunos casos coinciden. En este caso opté por poner el plugin de JQeury JTruncate que en los ejemplos vi que era la mejor opción y se ajustaba a mis necesidades, ¿Una decisión acertada?. Veamos si lo es realmente. Otro caso sólo para texto es este otro ejemplo por si lo necesitas.

EL FALLO SALE A ESCENA

Cuando lo puse en marcha dentro del proyecto, miré pero no vi que ya no es texto únicamente como en los ejemplos, es un listado de links que a través de un helper personalizado, creo una lista de links a visualizar en la ficha de usuario en el contexto del listado, devolviendo el helper el string de los links que he formado. Tomo nota del primer aspecto a considerar, links con un formato HTML. Este es el primer detalle que hay que considerar a la hora de truncar con JTruntate, cuando es texto puro pues todo va bien, pero el problema aparece y desaparece, es decir, lo hace bien y en otros listados de características deja de hacerlo y falla no ocultando lo que necesitas de la parte del texto. Tomo nota del segundo aspecto a considerar es que trunca por “número de caracteres” dentro de un div que se le proporciona a JTruncate, esto es un detalle importante al ser un string de links lo que conformo para tratar de hacer el truncate. Hago una prueba para asegurarme dejando sólo el texto sin poner los links y todo va correctamente, por tanto ya sé que no es lo más acertado haber aplicado JTruncate en mi caso.

Me pongo a ver y analizar el ejemplo de JTruncate y en la configuración veo que tiene un length a 200 o lo que quieras poner:

$().ready(function() {
        $(#example2).jTruncate({
        length: 200, cantidad a truncar
        minTrail: 0,
        moreText: [see all],
        lessText: [hide extra],
        ellipsisText: (truncated),
        moreAni: fast,
        lessAni: 2000
      });
});

 

Mirar pero no ver estas dos características, links que llevan un formato HTML y que cuando trunca es por el número de de caracteres y no por etiquetas completas…… te deja en una posición débil cuando crees que ya lo tienes, lo pruebas en local, haces deploy a integración lo vuelves a probar y aparentemente todo está bien (en este punto piensa “espera un momento”, haz algunas pruebas más aleatorias, vuelve y sigue haciendo algunas otras pruebas más) ya que antes de mostrarlo al cliente, otra persona lo prueba y falla, el peso de ese fallo y que por mucho que quieras explicar que lo has probado te deja en una posición que poca discusión entra en el debate. En mi caso prefiero ponerme a buscar una solución al problema lo antes posible, antes que ponerme a justificar que realmente lo he probado y que es un bug del plugin en los casos en los que tenemos que no sólo es texto sino que tenemos también etiquetas html y tenemos que considerarlas. Ahora es cuando veo los detalles que antes miré pero no vi.

LA SOLUCIÓN AL PROBLEMA

La solución al problema pasa primero por detenerse un momento en esos momentos de tensión y de bajón por la bronca (con razón), me puse a dar vueltas y comentarlos con otros compañeros de trabajo a ver cómo lo veían y que ideas podría encontrar a mi problema, con otro plugin que cumpla los requisitos o tener una solución a medida. En este caso la solución a medida es la mejor en mi opinión y lo ataqué en los siguientes pasos:

  •  En el helper tengo un string de links que luego los pongo en una vista bajo un div class,raw special_links(d, @filters) pero los tengo todos englobados el mismo div class,<div class=”special“> lo que necesito ahora es saber, no el número de caracteres a truncar, sino el conjunto de elementos que necesito truncar, ya que no es fijo el tamaño de los links. Por lo que en este caso pongo un nombre de clase para cada elemento de la lista de links link_to special(special), path, class: “term-item, aportándome la ventaja que sabiendo el número de div puedo decirle dónde tengo que truncar, no por número de caracteres, sino por el número de elementosterm-item que es mucho mejor.
  • Finalmente resolver en el JS de turno, los links de “Ver más” y “Ocultar” para hacer los cambios de literal y poner en marcha el ocultar los elementos que le digo.

Esto traducido en la Vista es:

<div class=”wrapper-special-c-valuation”>
        <div class=”wrapper-special-c”>
                <span><%= I18n.t(‘title.special’) %>:</span>
               <div class=”special“>
                      <%= raw special_links(d, @filters) %>    <<<<<——– Helper string de los links a devolver, en el helper tengo en el link_to un nombre de clase term-item”
               </div>
              <% Array(d.cs).each do |c| %>
                   <div class=”c”>
                        <%= link_to c.name, c_path(c), class:”” %>
                       <address><%= show_address(c) %><span> – TLF: <%= c_phone(c) %></span></address>
                  </div>
             <% end %>
      </div>
</div>

 

Y en el Javascript:

$(‘.special’).each(function() {
       var $list = $(this);
       $list.find(‘.term-item:gt(10)’).hide();

        if($list.find(‘.term-item:gt(10)’).length > 5) {
                $list.before(‘<a class=”more_less“>Ver más</div>’)
         }
});

$(‘.more_less’).click(function() {
        var $btn = $(this);
        $btn.next().find(‘.term-item:gt(10)’).slideToggle();
        $btn.text($btn.text() === ‘Ver más’ ? ‘Ocultar’ : ‘Ver más’);
});

Finalmente ya tenemos funcionando nuestra solución al problema del truncado con código HTML y el número de elementos variable en cada caso. Espero que te sea de utilidad tanto la solución como la forma de tratar el problema y me pregunto….. ¿Cómo resolverías o cómo has resulto este u otro problema parecido? ¿te animas a contármelo?

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s