module ReactiveJQueryTest where
import Prelude ((+), (++), (<$>), (<*>), ($), (<<<), flip, return, show)
import Control.Monad
import Control.Monad.Eff
import Control.Monad.JQuery
import Control.Reactive
import Control.Reactive.JQuery
import Data.Array (map, head, length)
import Data.Foldable
import Data.Foreign
import Data.Maybe
import Data.Monoid
import Data.Traversable
import Debug.Trace
import Global (parseInt)
main = do
personDemo
todoListDemo
greet firstName lastName = "Hello, " ++ firstName ++ " " ++ lastName ++ "!"
personDemo = do
-- Create new reactive variables to hold the user's names
firstName <- newRVar "John"
lastName <- newRVar "Smith"
-- Get the document body
b <- body
-- Create a text box for the first name
firstNameDiv <- create "<div>"
firstNameInput <- create "<input>"
"First Name: " `appendText` firstNameDiv
firstNameInput `append` firstNameDiv
firstNameDiv `append` b
-- Create a text box for the last name
lastNameDiv <- create "<div>"
lastNameInput <- create "<input>"
"Last Name: " `appendText` lastNameDiv
lastNameInput `append` lastNameDiv
lastNameDiv `append` b
-- Bind the text box values to the name variables
bindValueTwoWay firstName firstNameInput
bindValueTwoWay lastName lastNameInput
-- Create a paragraph to display a greeting
greeting <- create "<p>"
{ color: "red" } `css` greeting
greeting `append` b
-- Bind the text property of the greeting paragraph to a computed property
let greetingC = greet <$> toComputed firstName <*> toComputed lastName
bindTextOneWay greetingC greeting
todoListDemo = do
-- Get the document body
b <- body
-- Create an array
arr <- newRArray
text1 <- newRVar "Learn PureScript"
comp1 <- newRVar false
insertRArray arr { text: text1, completed: comp1 } 0
ul <- create "<ul>"
-- Bind the ul to the array
bindArray arr ul $ \entry indexR -> do
li <- create "<li>"
completedInput <- create "<input>"
setAttr "type" "checkbox" completedInput
completedInput `append` li
sub1 <- bindCheckedTwoWay entry.completed completedInput
textInput <- create "<input>"
textInput `append` li
sub2 <- bindValueTwoWay entry.text textInput
btn <- create "<button>"
"Remove" `appendText` btn
flip (on "click") btn $ do
index <- readRVar indexR
removeRArray arr index
btn `append` li
return { el: li, subscription: sub1 <> sub2 }
ul `append` b
-- Add button
newEntryDiv <- create "<div>"
btn <- create "<button>"
"Add" `appendText` btn
btn `append` newEntryDiv
newEntryDiv `append` b
flip (on "click") btn $ do
text <- newRVar ""
completed <- newRVar false
arr' <- readRArray arr
insertRArray arr { text: text, completed: completed } (length arr')
-- Create a paragraph to display the next task
nextTaskLabel <- create "<p>"
nextTaskLabel `append` b
let nextTask = do
task <- head <$> toComputedArray arr
case task of
Nothing -> return "Done!"
Just { text = text } -> (++) "Next task: " <$> toComputed text
bindTextOneWay nextTask nextTaskLabel
-- Create a paragraph to display the task counter
counterLabel <- create "<p>"
counterLabel `append` b
let counter = (flip (++) " tasks remaining") <<< show <$> do
rs <- toComputedArray arr
cs <- map (\c -> if c then 0 else 1) <$> traverse (\entry -> toComputed entry.completed) rs
return $ foldl (+) 0 cs
bindTextOneWay counter counterLabel