Simple State Manager: diseño web receptivo hecho fácil

Las consultas de medios le permiten reaccionar a los cambios de ancho y alto del área de visualización del navegador. Cuando se cambia la ventana del navegador en dispositivos de escritorio, o cuando se cambia un dispositivo móvil de modo vertical a horizontal, las hojas de estilo de ajuste se pueden aplicar inmediatamente con CSS y consultas de medios. Controle el comportamiento de las consultas de medios a través de JavaScript utilizando la herramienta JavaScript Simple State Manager. Eso es útil, ya que de vez en cuando es necesario reaccionar a los cambios de tamaño del área de visualización a través de JavaScript.

El JavaScript Administrador de estado simple por Jonathan Fielding de Londres se presentó por primera vez en junio de 2013 y ha experimentado un rápido desarrollo desde entonces. Simple State Manager (SSM) no tiene otras dependencias además de JavaScript y está diseñado para estar completamente disponible con una integración de enlace simple o mediante un navegador.

Administrador de estado simple: definición de estados

Suponiendo que haya implementado correctamente el SSM en su documento, así es como continuamos. En primer lugar, es necesario definir los denominados «Estados». Dentro de estos estados, se determina el ancho del área de visualización a la que debe reaccionar el SSM. Aquí, defina los valores mínimo y máximo. No se prevé una reacción a la altura del área de visualización. Sin embargo, la mayoría de las veces, el ancho es un factor más importante cuando se trata de diseños receptivos de todos modos. Además de eso, asignamos un ID, así como una función que se activa cuando se cumplen las condiciones del estado, a cada estado.

sssm.addState({
  id: "mobile",
  maxWidth: 320,
  onEnter: function() {
    document.getElementsByTagName("body")[0].style.backgroundColor = "red";
  }
}).ready();

En el ejemplo, se crea un estado con el ID «móvil». La función definida en él se activa una vez que el tamaño máximo de la ventana del navegador es superior a 320 píxeles. En este caso, se modifica el color de fondo. Lo único de esto es que el «Administrador de estado simple» no solo verifica una vez qué estados son apropiados para el área de visualización actual. En cambio, vuelve a comprobar cada vez que cambia la ventana gráfica. En el ejemplo, esto significa que la función se ejecuta una vez que el ancho de la ventana gráfica es menor o igual a 320 píxeles.

Aparte de la opción «onEnter» que siempre activa una función cuando se cumple la condición de estado, existe la alternativa «onResize». Aquí, la función solo se activa cuando cambia el tamaño del panel. Al cargar la página con «onResize», el estado no se consideraría.

Reacción a varios estados con el SSM

Por supuesto, es posible definir varios estados para cumplir con los requisitos de diferentes resoluciones y dispositivos móviles.

ssm.addStates([
  {
    id: "mobil",
    maxWidth: 320,
    onEnter: function() {
      document.getElementsByTagName("body")[0].style.backgroundColor = "red";
    }
  },
  {
    id: "desktop",
    minWidth: 321,
    onEnter: function() {
      document.getElementsByTagName("body")[0].style.backgroundColor = "green";
    }
  }
]).ready();

En el ejemplo, se definen dos estados diferentes. Uno que se asegura de que el fondo sea verde para un ancho de ventana de más de 320 píxeles y el otro para que el fondo sea rojo para un ancho menor.

SSM: depurador como marcador

El alcance de funciones de “Simple State Manager” incluye muchas otras opciones que permiten una reacción extensa a situaciones de diferentes tamaños. De esta forma, es posible eliminar estados o modificarlos en cualquier momento. Además, puede solicitar el estado actual.

Hay un depurador que se puede llamar como marcador de libros que le permite probar los estados. Le informa sobre la cantidad de estados definidos, así como todas las configuraciones y funciones asignadas. De esta manera, obtiene una descripción general rápida de si todo está etiquetado correctamente o no.

SSM: compatibilidad con navegadores y complementos

Simple State Manager se ejecuta en todos los navegadores estándar y no requiere ninguna otra biblioteca como jQuery y compañía. Sin embargo, Internet Explorer solo es compatible a partir de la versión 7.

Amplíe aún más el alcance de las funciones utilizando complementos. Por ejemplo, hay uno que funciona junto con el complemento de caja de luz de jQuery «Colorbox». Esto le permite controlar desde qué tamaño de ventana deben comenzar a cargarse las imágenes a través de “Colorbox”. Simple State Manager se distribuye bajo la licencia MIT y, por lo tanto, es de uso gratuito para fines privados y comerciales. Se desea y se organiza la participación en el proyecto a través de Github.

(dpe)