UTILS

Esta será una sección dedicada a scripts reutilizables en el tema.

Open Accordions

Este feature nos permite, mostrar/ocultar contenido próximo/hermano al nodo en donde se activa un evento de tipo click. Es decir, tengo la siguiente estructura HTML:

<button class="accordion">
  Toggle accordion
</button>
<div class="panel">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>

Si el usuario realiza un click en el boton con la clase accordion, entonces el siguiente nodo al boton, panel se muestra en el viewport. Pero si el contenido, se encuentra activo o visibles, este por el contrario se ocultará.

Acepta:

• accordion: (String) Añada el identificador ó query selector del nodo con el evento click.
• panel: (String) Añada un identificador ó query selector del nodo para mostrar u ocultar

Uso:

useAccordion('.accordion', '.panel');

Archivos:

• scss: /src/scss/components/_blogcard.scss
• js: /snippets/card-blog.liquid

Dom Elements

Este feature nos permite reducir/seleccionar de manera sencilla nuestros nodos en el DOM: Se puede utilizar de dos maneras:

• $Qll: Si desea retornar un array de nodos repetidos
• $Q: Si desea retornar un solo nodo

Acepta:

$Q:

• node (String) - Obligatorio: Añade el identificador ó query selector del nodo para manipular
• parent: (String) - Opcional: Añade el identificador ó query selector padre del nodo que desea manipular

$Qll:

• node (String) - Obligatorio: Añade el identificador ó query selector del nodo para manipular
• parent: (String) - Opcional: Añade el identificador ó query selector padre del nodo que desea manipular

Uso:

// $Q
$Q('#node', '.parent') // si no pasa el padre por default sera Document

// $Qll
$Qll('.nodes', '.parent') // si no pasa el padre por default sera Document

Archivos:

• scss: /src/scss/components/_blogcard.scss
• js: /snippets/card-blog.liquid

Scroll Header Sticky

…

Toggle Data Active

Este feature nos permite manipular el dom por medio de un evento click. Cuando el usuario realiza click sobre un nodo, esté evento inmediatamente afecta a otro nodo, mostrándolo en viewport y añadiendo como hermano, un nodo con la clase overlay.

El overlay contiene un escuchador al evento click para cerrar el nodo manipulado.

Acepta:

• target (String) Obligatorio: Contiene class/id de nodo con el escuchador de evento click.
• nodeActive (String) Obligatorio: Contiene class/id del nodo que desea manipular
• config (object) Opcional: Contiene un objeto de configuración

Uso:

toggleDataActive(
  '#burger',
  '#menu-nav',
  {
    overlay: true
  }
);

Archivos:

• scss: /src/scss/components/_blogcard.scss
• js: /snippets/card-blog.liquid