pursx+svg

Main.purs

module Main where

import Prelude

import Deku.DOM.Attributes as DA
import Deku.DOM as D
import Deku.DOM.SVG.Attributes as SA
import Deku.Toplevel (runInBody)
import Effect (Effect)
import Deku.Pursx ((~~), (~!~))
import Type.Proxy (Proxy(..))

closedString = 
    """<svg style="fill:#ffffff; " viewBox="0 0 136 136" xmlns="http://www.w3.org/2000/svg">
      <path d="M60,0 A60,60 0 0,1 112,30 5,5 0 0,1 103,35 50,50 0 0,0 60,10 5,5 0 0,1 60,0 " fill="currentFill" transform-origin="60 60"/>
          <animatemotion dur="2s" repeatCount="indefinite" rotate= "auto" path = "M1,0 A1,1 0 0,1 0,1 1,1 0 0,1 -1,0 1,1 0 0,1 0,-1 1,1 0 0,1 1,0"/>
    </svg>""" :: String

closedSymbol = Proxy :: Proxy
    """<svg style="fill:#ff0000; " viewBox="0 0 136 136" xmlns="http://www.w3.org/2000/svg">
    <path d="M60,0 A60,60 0 0,1 112,30 5,5 0 0,1 103,35 50,50 0 0,0 60,10 5,5 0 0,1 60,0 " fill="currentFill" transform-origin="60 60"/>
          <animatemotion dur="2s" repeatCount="indefinite" rotate= "auto-reverse" path = "M1,0 A1,1 0 0,1 0,1 1,1 0 0,1 -1,0 1,1 0 0,1 0,-1 1,1 0 0,1 1,0"/>
    </svg>"""

openedString =
    """<svg style="fill:#00ff00; " viewBox="0 0 136 136" xmlns="http://www.w3.org/2000/svg">
      <path d="M60,0 A60,60 0 0,1 112,30 5,5 0 0,1 103,35 50,50 0 0,0 60,10 5,5 0 0,1 60,0 " fill="currentFill" transform-origin="60 60"/>
          <animatemotion dur="2s" repeatCount="indefinite" ~rotateAttr~ path = "M1,0 A1,1 0 0,1 0,1 1,1 0 0,1 -1,0 1,1 0 0,1 0,-1 1,1 0 0,1 1,0"/>
    </svg>""" :: String

openedSymbol = Proxy :: Proxy
    """<svg style="fill:#1c64f2; " viewBox="0 0 136 136" xmlns="http://www.w3.org/2000/svg">
      <path d="M60,0 A60,60 0 0,1 112,30 5,5 0 0,1 103,35 50,50 0 0,0 60,10 5,5 0 0,1 60,0 " fill="currentFill" transform-origin="60 60"/>
          <animatemotion dur="2s" repeatCount="indefinite" ~rotateAttr~ path = "M1,0 A1,1 0 0,1 0,1 1,1 0 0,1 -1,0 1,1 0 0,1 0,-1 1,1 0 0,1 1,0"/>
    </svg>"""

main :: Effect Unit
main = runInBody
  ( D.div
      [ DA.style_ "background-color:grey; transform:scale(0.1); transform-origin: top left; "]
      [ closedString ~!~ {}
      , closedSymbol ~~  {}
      , openedString ~!~ { rotateAttr: SA.rotate_ "auto" }
      -- , openedSymbol ~~  { rotateAttr: SA.rotate_ "auto-reverse" } -- won't compile
      ]
  )