CARDIFY

• Track: Common Core
• Curso: JS Deep Dive: Crea tu propia librería usando JavaScript
• Unidad: Producto final

Implementar un plugin de jQuery que dado un contenedor debe buscar todas las imágenes que encuentre dentro del contenedor y reemplazarlas por un nuevo elemento <figure> que contenga la imagen (<img>) además de un <figcaption> con el texto del atributo alt de la imagen.

Herramientas

• HTML5.
• CSS 3
• Java Script ES6
• Node JS
• Babel
• NPM

Getting Started (Como lo va a usar)

Instalación - Global (navegador)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="path-to-cardify.js"></script>

Uso

// `container` es el selector del contenedor donde se buscarán todas las
// imágenes a ser procesadas.
$(container).cardify({});

Options

$('#offCanvas').offcanvas({    
    role: "dialog",
    modifiers: "left,overlay",
    baseClass: "c-offcanvas",
    modalClass: "c-offcanvas-bg",
    contentClass: "c-offcanvas-content-wrap",
    closeButtonClass: "js-offcanvas-close",
    bodyModifierClass: "has-offcanvas",
    supportNoTransitionsClass: "support-no-transitions",
    resize: true,
    triggerButton: '#triggerButton' ,
    modal: true,
    onOpen: function() {},
    onClose: function() {},
    onInit: function() {}
})
.on( "create.offcanvas", function( e ){ } )
.on( "open.offcanvas", function( e ){ } )
.on( "opening.offcanvas", function( e ){ } )
.on( "close.offcanvas", function( e ){ } )
.on( "closing.offcanvas", function( e ){ } )
.on( "resizing.offcanvas", function( e ){ } );

Options

Set instance options by passing a valid object at initialization, or to the public defaults method. Custom options for a specific instance can also be set by attaching a data-offcanvas-options attribute to the target elment. This attribute should contain the properly formatted JSON object representing the custom options.

 data-offcanvas-options='{ "modifiers": "left,overlay",... }'

| Name |Default |Type| | --- |---|---| | modifiers | "left,overlay" |string| | baseClass | "c-offcanvas" |string| | modalClass | "c-offcanvas-bg" |string| | contentClass | "c-offcanvas-content-wrap" |string| | closeButtonClass | "js-offcanvas-close" |string| | role | "dialog" |string| | bodyModifierClass | "has-offcanvas" |string| | supportNoTransitionsClass | "support-no-transitions" |string| | resize | false |boolean| | triggerButton | null |string| | onInit | null |function| | onOpen | null |function| | onClose | null |function|

Ejemplos

Aqui va la funcionalidad de la libreria View Demo

Dependencies

• jQuery

Cómo nos organizamos?

Semana 1

Jueves 25 de Enero

• Formar equipo.
• Decidir como grupo, cuál reto realizar

Viernes 26 de Enero

• establecer un menucanvas como reto.

Sabado 27 de Eenero y Domingo 28 de Enero

• Averiguar y buscar ejemplos de menu canvas.
• subiendo estructura básica y crenado package json con npm.

Semana 2

Lunes 29 de Enero

• Subiendo primera version del readme.
• Implementar funcionalidad esencial.

Martes 30 de Enero

• Cambio de reto escogido por el reto N°2.
• Implementar funcionalidad esencial.

Semana 3

Miércoles 31 de Enero

• subir segunda version del readme
• Completar implementación de librería y ejemplo principal (usando la librería).
• Preparar tu demo/presentación.
• Publicar el ejemplo principal (index.html) en GitHub pages.

Jueves 2 de Febrero

• Hacer code review con tus compañeras e instructorxs.
• Preparar tu demo/presentación.
• Publicar el ejemplo principal (index.html) en GitHub pages.

Desarrollado por:

• Brenda Mesias
• Elizabeth Alcala
• Ysabel Campos