HTML + javascript + Haskell = ELM, parte 8

Seguimos con el post anterior.

Uno de los problemas más comunes de la interfaz de usuario es encontrar dónde hace clic un usuario.

Usemos la función sampleOn. Esa función nos permite muestrear una señal cuando se actualiza otra, como esta:

import Graphics.Element exposing (show)
import Mouse
clickPosition = Signal.sampleOn Mouse.clicks Mouse.position
main = Signal.map show clickPosition

Construimos dos señales, clickPosition y main. Primero, creamos una señal con sampleOn. Cuando la señal Mouse.Clicks se actualice, probaremos la posición más reciente con Mouse.position. El resultado es una nueva señal que devuelve la posición del mouse y cambia cada vez que el usuario hace clic en el mouse. Luego, simplemente construimos nuestra señal principal. Mapeamos show en nuestra señal clickPosition. Sencillo. Podemos muestrear los controles de entrada de la misma manera.

O, supongamos que está implementando el desplazamiento con una barra de desplazamiento. Necesita saber qué tan lejos está el mouse en una página, así:

import Graphics.Element exposing (show)

import Mouse

import Window

div x y = show ((toFloat x) / (toFloat y))

main = Signal.map2 (div) Mouse.y Window.height

Ejecútelo y desplácese en el lado derecho para obtener algo como esto:

0.42973977695167286

Este ejemplo usa map2. Al igual que map, esta función asigna funciones a señales, pero usa dos señales y funciones de dos argumentos. Primero, para simplificar las conversiones de tipos, creamos una versión de división que toma enteros y devuelve texto. A continuación, usamos map2 para mapear div en dos señales, Mouse.y y Window.height. Piense en cómo se vería un programa JavaScript similar. 

Monitorear las entradas del usuario es un trabajo funcional.