~singpolyma/post-part

17fbadd10d057197de5c9dcb7718c5a16f942a1b — Stephen Paul Weber 2 years ago f31b770
Click to activate wallpaper
2 files changed, 11 insertions(+), 9 deletions(-)

M Main.purs
M index.slim
M Main.purs => Main.purs +10 -8
@@ 31,7 31,7 @@ import Web.HTML.HTMLMediaElement as HTMLMediaElement
import Web.HTML (window, HTMLElement, HTMLMediaElement)
import Web.HTML.Event.EventTypes (load)
import Web.UIEvent.MouseEvent as MouseEvent
import Web.UIEvent.MouseEvent.EventTypes (mousemove, mouseout)
import Web.UIEvent.MouseEvent.EventTypes (mousemove, mouseout, click)
import Web.HTML.Window as Window
import Web.DOM.Element as Element
import Web.DOM.NodeList as NodeList


@@ 87,6 87,7 @@ main = unsafePartial $ do
  win <- window
  doc <- HTMLDocument.toParentNode <$> Window.document win
  addEventListener' load (Window.toEventTarget win) $ \_ -> do
    Just body <- querySelector (QuerySelector "body") doc
    Just wallpaper <- querySelector (QuerySelector "#wallpaper") doc

    Just img <- (HTMLElement.fromElement =<< _) <$>


@@ 99,10 100,11 @@ main = unsafePartial $ do
      clipCircle img "0" 0 0
      triggerSpot doc Nothing

    addEventListener' mousemove (Element.toEventTarget wallpaper) $ \e -> do
      height <- Element.clientHeight wallpaper
      width <- Element.clientWidth wallpaper
      let Just mouseEvent = MouseEvent.fromEvent e
      traceM (Tuple height (MouseEvent.offsetY mouseEvent))
      clipCircle img "10vw" (MouseEvent.offsetX mouseEvent) (MouseEvent.offsetY mouseEvent)
      triggerSpot doc (triggerN width height (MouseEvent.offsetX mouseEvent) (MouseEvent.offsetY mouseEvent))
    addEventListener' click (Element.toEventTarget body) $ \_ ->
      addEventListener' mousemove (Element.toEventTarget wallpaper) $ \e -> do
        height <- Element.clientHeight wallpaper
        width <- Element.clientWidth wallpaper
        let Just mouseEvent = MouseEvent.fromEvent e
        traceM (Tuple height (MouseEvent.offsetY mouseEvent))
        clipCircle img "10vw" (MouseEvent.offsetX mouseEvent) (MouseEvent.offsetY mouseEvent)
        triggerSpot doc (triggerN width height (MouseEvent.offsetX mouseEvent) (MouseEvent.offsetY mouseEvent))

M index.slim => index.slim +1 -1
@@ 38,7 38,7 @@ html
		p= paras[4]

		p= paras[5]
		small Explore the wallpaper with your cursor
		small Click to activate the wallpaper

		#wallpaper
			img src="assets/img/WALLPAPER-HIDDEN.png" alt="Wallpaper"