aw_effects

Funcionalidades prácticas para Polymer

Stats

stars 🌟issues ⚠️updated 🛠created 🐣size 🏋️‍♀️
aw_effects
Minified + gzip package size for aw_effects in KB

Readme

AW-EFFECTS

Los aw-effects son propiedades desarrolladas en javascript pensadas para hacer ciertas funcionalidades que necesitamos programar en las webs de forma continua.

Su principal función es evitar por completo el uso de jQuery si sólo utilizamos de éste para realizar animaciones simples como el "fadein", "fadeout", "slideup", "slidedown" y ese tipo de operaciones sencillas. De este modo tenemos un código mucho más liviano que utilizando la librería de jQuery la cual es muy pesada.

Los efectos disponibles son:

Estos efectos se pueden añadir de forma independiente, pero puedene incluirse todos importando el archivo:

<link rel="import" src="/aw_components/aw-effects/aw-effects.html">

aw-animate

Esta función aplica animaciones simples en javascript utilizando Polymer, es similar a jQuery.animate().

Su uso es muy simple:

Polymer.Animate( el, props, settings, callback );

Donde los parámetros son:

  • el (Obligatorio): El elemento html sobre el que queremos aplicar la animación.
  • props (Obligatorio): Las propiedades CSS que queremos aplicar a la animación.
  • settings (Opcional): Un objeto con los parámetros que configuran la animación:
    • speed [integer]: Tiempo de ejecución de la animación.
    • effect [string]: Efecto de la animación (ej.: ease, ease-out, cubic-bezier(.08,.84,.78,.2)...).
    • delay [integer]: Tiempo de retraso de la animación.
  • callback (Opcional): Función de callback que se ejecutará tras la animación.

Ejemplos:

Animamos un elemento en sus propiedades "left" y "width".

var div = document.getElementById( "myDiv" );

Polymer.Animate( div, {
    left: "100px",
    width: "300px"
});

Animamos un elemento en sus propiedades "left" y "width" durante dos segundos.

var div = document.getElementById( "myDiv" );

Polymer.Animate( div, {
    left: "100px",
    width: "300px"
}, {
    speed: 2000
});

Animamos un elemento en sus propiedades "left" y "width" con un callback.

var div = document.getElementById( "myDiv" );

Polymer.Animate( div, {
    left: "100px",
    width: "300px"
}, () => {
    console.log( "La animación a terminado" );
});

Animamos un elemento en sus propiedades "left" y "width" durante dos segundos con un cubix-bezier y un callback.

var div = document.getElementById( "myDiv" );

Polymer.Animate( div, {
    left: "100px",
    width: "300px"
}, {
    speed: 2000,
    effect: "cubic-bezier(.08,.84,.78,.2)"     
}, () => {
    console.log( "La animación a terminado" );
});

aw-colors

Esta función permite trabajar con los diferentes tipos de colores de CSS en javascript. Es decir, permite transformar colores Hexadecimales a RGB, etc...

Colors.type():

Devuelve el tipo de color que estamos pasándo o false si no es un tipo de color válido. Posibles valores devueltos:

  • HEX
  • RGB
  • RGBA
  • HSL
  • HSLA
  • false
var color = "#FF0000";
var type = Polymer.Colors.type( color );

HEX

Colors.toRGB()

Convierte un valor a RGB y lo devuelve, false si no es un color válido.

var color = "#FF0000";
var rgbColor = Polymer.Colors.toRGB( color );

rgb(255, 0, 0)

Colors.toRGBA()

Convierte un valor a RGBA con una transparencia dada y lo devuelve, false si no es un color válido.

var color = "#FF0000";
var trans = 0.5;                         // (Opcional)
var rgbaColor = Polymer.Colors.toRGBA( color, trans );

rgba(255, 0, 0, .5)

Colors.toHSL()

Convierte un valor a HSL y lo devuelve, false si no es un color válido.

var color = "#FF0000";
var hslColor = Polymer.Colors.toHSL( color );

hsl(0, 100%, 50%)

Colors.toHSLA()

Convierte un valor a HSLA con una transparencia dada y lo devuelve, false si no es un color válido.

var color = "#FF0000";
var trans = 0.5;                         // (Opcional)
var hslaColor = Polymer.Colors.toHSLA( color, trans );

rgba(0, 100%, 50%, .5)

Colors.toHEX()

Convierte un valor a RGB y lo devuelve, false si no es un color válido.

var color = "rgb(255, 0, 0)";
var hexColor = Polymer.Colors.toHEX( color );

#FF0000

Colors.contrast()

Devuelve el constraste de un color dado, false si no es un color válido. Posibles valores devueltos:

  • light
  • dark
  • false
var color1 = "#FFFFFF";
var color2 = "#000000";
var constrast1 = Polymer.Colors.contrast( color1 );
var constrast2 = Polymer.Colors.contrast( color2 );

light
dark


aw-fade

Realiza un efecto de desaparición o aparición de un elemento. Similar a jQuery.fadeIn, jQuery.fadeOut.

Polymer.Fade dispone de tres funciones para realizar el efecto.

Polymer.Fade.in( el, settings, callback );
Polymer.Fade.out( el, settings, callback );
Polymer.Fade.toggle( el, settings, callback );

Donde los parámetros son:

  • el (Obligatorio): El elemento html sobre el que queremos aplicar la animación.
  • settings (Opcional): Un objeto con los parámetros que configuran la animación:
    • speed [integer]: Tiempo de ejecución de la animación.
    • effect [string]: Efecto de la animación (ej.: ease, ease-out, cubic-bezier(.08,.84,.78,.2)...).
  • callback (Opcional): Función de callback que se ejecutará tras la animación.

Ejemplos:

Hacemos desaparecer un elemento sin parámetros:

var div = document.getElementById( "myDiv" );
Polymer.Fade.out( div );

Hacemos aparecer un elemento en dos segundos y un efecto ease-out:

var div = document.getElementById( "myDiv" );
Polymer.Fade.in( div, { speed: 2000, effect: "ease-out" } );

Hacemos desaparecer un elemento con una función de callback:

var div = document.getElementById( "myDiv" );
Polymer.Fade.out( div, () => {
    console.log( "Animación completada" );
});

Hacemos aparecer y desaparecer un elemento en dos segundos, con efectos y una función de callback

var div = document.getElementById( "myDiv" );
Polymer.Fade.toggle( div, { speed: 2000, effect: "cubic-bezier(.08,.84,.78,.2)" }, () => {
    console.log( "Animación completada" );
});

aw-liste-dom

Pone a la escucha eventos para los elementos del DOM del mismo modo que lo hace el jQuery.on, de este modo nos permite escuchar eventos en elementos que no se declaran en el DOM desde la carga de la página o cuando trabajamos en aplicaciones con AJAX.

El funcionamiento es similar al de jQuery:

Polymer.ListenDom.on( event, element.selctor, callback );

Un ejemplo simple de escuchar un evento click sobre un elemento es este:

Polymer.ListenDom.on( "click", ".myElement > div", ()=> {
    console.log( "Se ha hecho click sobre la división hija de .myElement" );
});

Del mismo modo también podemos dejar de escuchar los eventos que están a la escucha usando la función .off()

Esta función acepta tres parámetros pero solo son obligatorios dos de ellos. Si solo pasamos el evento y el selector, se quitarán todos los eventos asociados a ese o esos elementos.

// Deja de escuchar todods los eventos de click que se le hayan asignado

Polymer.ListenDom.off( "click", ".myElement > div" ); 

Pero también podemos eliminar solo una función para el evento de las que le hayamos asignado:

function myFunc() {
    console.log("Entra el ratón con función myFunc");
}

Polymer.ListenDom.on( "mouseenter", "#myDiv", myFunc);

Polymer.ListenDom.on( "mouseenter", "#myDiv", function() {
    console.log("Entra el ratón");
});

Como observamos en el ejemplo superior, el elemento #myDiv, tiene dos funciones asociadas al evento mouseenter. Una una función asignada directamente y otra la función myFunc.

Si queremos dejar de escuchar solamente myFunc, tan solo hay que hacer esto:

Polymer.ListenDom.off( "mouseenter", "#myDiv"m nyFunc );

aw-parallax

Con esta función conseguimos el famoso efecto Parallax en algún elemento de nuestra página.

var div = document.getElementById( "myDiv" );
Polymer.Parallax.init( element,  settings );

Donde los parámetros son:

  • element (Obligatorio): El elemento html sobre el que queremos aplicar la animación.
  • settings (Opcional): Un objeto con los parámetros que configuran la animación:
    • cssProperty [string]: El estilo css sobre el que queremos hacer el efecto. Valores permitidos ( top, margin-top, background-position ).
    • parallaxDir [string]: La dirección del efecto Parallax. Valores permitidos ( "up", "down" ).
    • speed [integer]: La velocidad del efecto. Valores permitidos ( Números positivos ). A más alto el valor menor velocidad.
    • topStart [integer]: El alto en píxeles donde empezará el efecto. Valores permitidos ( Números enteros positivos ).
    • topLimit [integer]: El alto donde el efecto dejará de animar. Valores permitidos ( Números enteros positivos ).

Ejemplo:

var div = document.getElementById( "myDiv" );
Polymer.Parallax.init( div, {
    cssProperty: "background-position",
    speed: 2.5,
    topLimit: 500
} );

aw-scroll

Este componente nos permite deslizar el scroll de la página hacia un punto concreto creando una animación.

Polymer.scroll.method();

Método to()

Dirige el scroll a un alto específico.

Polymer.scroll.to( to, duration, element );
  • to [integer] (Obligatorio): La altura en píxeles a la que queremos dirigir el scroll.
  • duration [integer] (Opcional): El tiempo que queremos que dure la animación.
  • element [integer] (Opcional): Elemento sobre el que queremos que se produzca la animación del scroll, por defecto será la ventana.

Método toElement()

Dirige el scroll a un elementoo específico de la página o un elemento.

Polymer.scroll.toElement( el, margin, duration, element );
  • el [HTMLObject] (Obligatorio): El elemento HTML al que queremos llevar el scroll.
  • margin [integer] (Opcional): El margen que queremos dejar por arriba sobre el elemento.
  • duration [integer] (Opcional): El tiempo que queremos que dure la animación.
  • element [integer] (Opcional): Elemento sobre el que queremos que se produzca la animación del scroll, por defecto será la ventana.

Método top()

Dirige el scroll a la parte superior de la página o un elemento.

Polymer.scroll.top( duration, element );
  • duration [integer] (Opcional): El tiempo que queremos que dure la animación.
  • element [integer] (Opcional): Elemento sobre el que queremos que se produzca la animación del scroll, por defecto será la ventana.

Método bottom()

Dirige el scroll a la parte inferior de la página o un elemento.

Polymer.scroll.bottom( duration, element );
  • duration [integer] (Opcional): El tiempo que queremos que dure la animación.
  • element [integer] (Opcional): Elemento sobre el que queremos que se produzca la animación del scroll, por defecto será la ventana.

aw-slide

Este componente nos permite crear un efecto persiana sobre algún elemento de la página para hacerlo desaparecer o aparecer.

El funcionamiento de este elemento es similar al de Polymer.Fade

Polymer.Slide.in( el, settings, callback );
Polymer.Slide.out( el, settings, callback );
Polymer.Slide.toggle( el, settings, callback );

Donde los parámetros son:

  • el (Obligatorio): El elemento html sobre el que queremos aplicar la animación.
  • settings (Opcional): Un objeto con los parámetros que configuran la animación:
    • speed [integer]: Tiempo de ejecución de la animación.
    • effect [string]: Efecto de la animación (ej.: ease, ease-out, cubic-bezier(.08,.84,.78,.2)...).
  • callback (Opcional): Función de callback que se ejecutará tras la animación.

aw-slider-element

Con esta componente creamos un elemento deslizante dentro de un contenedor. Debemos asegurarnos que el elemento que queremos que deslice dentro de otro elemento contenedor sea hijo directo del mismo y no haya más elementos dentro.

Para aplicar este efecto tan solo debemos instanciar el init() del componente Polymer pasándole el elemento que queremos sea deslizante y la configuración deseada:

var element = document.getElementById( "myElement" );

var settings = {
    headFixHeight: 80,
    marginStart: 50
}

Polymer.SliderElement.init( element, settings );

La configuración de settings puede ser la siguiente:

  • headFixHeight [integer] (Opcional): En el caso que tenga una cabecera fija, damos la altura de esta.
  • footerFixHeight [integer] (Opcional): En el caso que tenga un pie fijo, damos la altura de éste.
  • minWidth [integer] (Opcional): Un ancho mínimo que queremos que se cumpla para que el elemento se deslice.
  • marginStart [integer] (Opcional): Un margen superior que queremos que tenga el elemento.

aw-sortable

Hace que los elementos de un contendor sean ordenables manualmente.

Hacer funcionar el componente es muy simple, tan solo hay que identificar el elemento que queremos que sea ordenable.

<ul>
    <li>Primero</li>
    <li>Segundo</li>
    <li>Tercero</li>
    <li>Cuarto</li>
    <li>Quinto</li>
</ul>
var li = document.querySelector( "ul" );
Polymer.Sortable.init( li );

Adidionalmente le podemos pasar opciones y una función de callback. Las porpiedades que podemos pasar son las siguientes:

Polymer.Sortable.init( elSortable, options, callback );
  • elSort [HTMLObject] (Obligatorio): Elemento HTML que queremos que sea ordenable.
  • options [object] (Opcional): Objeto con las opciones específicas. [TODO]
  • callback [function] (Opcional): Una función que será llamada al finalizar el ordenamiento.

A continuación mostramos un ejemplo de un sortable con la función de callback:

Polymer.Sortable.init( li, ( elDragged, childrens, elSort ) => {
    console.log( elDragged, childrens, elSort );
})

Como podemos observar, la función de callback devuelve tres parámetros:

  • elDragged [HTMLObject]: Elemento HTML que ha sido reordenado.
  • childrens [object]: Un array con todos los hijos del elemento ordenable en el nuevo orden.
  • elSort [function]: El elemento ordenable.

aw-textarea-adjust

Este componente nos convierte un elemento textarea en ajustable en altura. Para crear este efecto tan solo hay que llamar a la funcion:

Polymer.TextareaAdjust.init( textarea, settings );

Los parámetros que se le pueden pasar a esta función son:

  • textarea [HTMLObject] (Obligatorio): El textarea que queremos que sea autoajustable en altura.
  • settings [Object] (Opcional): Un objeto con las opciones que configuran el comportamiento:
    • maxHeight [integer]: Altura máxima que queremos que alcance el textarea.
var textarea = document.getElementById( "myTextarea" );
var settings = {
    maxHeight: 300
}

Polymer.TextareaAdjust.init( textarea, settings );

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.