I have tried to integrate Material UI with reflex frp - while normal (css only elements) look nice and slick - it seems that dropdowns/select-form elements need some jQuery to initialize - which does not work:
I have tried to reorder the <script> statements in index.html and put the document-ready-jQuery string before the runmain.js-line into the body.
I also checked that the script tags are executed, by inserting an alert.
Main.hs
{-# LANGUAGE OverloadedStrings #-}
{-# LANGUAGE RecursiveDo #-}
import Reflex
import Reflex.Dom
import Data.Monoid ((<>))
import qualified Data.Map as Map
import Safe (readMay)
import Data.Text (pack, unpack, Text)
import Control.Applicative ((<*>), (<$>))
main = mainWidget $ do
el "script" $ text "$(document).ready(function(){$('select').material_select(); });"
nx <- divClass "row" $ numberInput
d <- divClass "input-field col s12" $ do
d <- dropdown "*" (constDyn ops) def
el "label" $ text "Operation"
return d
ny <- divClass "row" $ numberInput
let values = zipDynWith (,) nx ny
result = zipDynWith (\o (x,y) -> textToOp o <$> x <*> y)
(_dropdown_value d)
values
resultText = fmap (pack . show) result
text " = "
dynText resultText
numberInput :: (MonadWidget t m) => m (Dynamic t (Maybe Double))
numberInput = do
let errorState = "style" =: "border-color: red"
validState = "style" =: "border-color: green"
rec n <- textInput $ def & textInputConfig_inputType .~ "number"
& textInputConfig_initialValue .~ "0"
& textInputConfig_attributes .~ attrs
let result = fmap (readMay . unpack) $ _textInput_value n
attrs = fmap (maybe errorState (const validState)) result
return result
ops = Map.fromList [("+", "+"), ("-", "-"), ("*", "*"), ("/", "/")]
textToOp :: (Fractional a) => Text -> a -> a -> a
textToOp s = case s of
"-" -> (-)
"*" -> (*)
"/" -> (/)
_ -> (+)
index.html
<!DOCTYPE html>
<html>
<head>
<link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.8/css/materialize.min.css">
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js "></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.8/js/materialize.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script language="javascript" src="https://rawgit.com/epsilonhalbe/4472d2462c3df7019beb881cec322b0d/raw/3c741f3dc676a8b9a9833bfbc89af4eca44be35f/rts.js"></script>
<script language="javascript" src="https://rawgit.com/epsilonhalbe/4472d2462c3df7019beb881cec322b0d/raw/3c741f3dc676a8b9a9833bfbc89af4eca44be35f/lib.js"></script>
<script language="javascript" src="https://rawgit.com/epsilonhalbe/4472d2462c3df7019beb881cec322b0d/raw/3c741f3dc676a8b9a9833bfbc89af4eca44be35f/out.js"></script>
</head>
<body>
<script language="javascript" src="https://rawgit.com/epsilonhalbe/4472d2462c3df7019beb881cec322b0d/raw/3c741f3dc676a8b9a9833bfbc89af4eca44be35f/runmain.js" defer></script>
</body>
</html>