Copyright	(c) Athur S. Fayzrakhmanov 2015 Alberto G. Corona 2015
License	MIT
Maintainer	heraldhoi@gmail.com
Stability	experimental
Portability	Any
Safe Haskell	None
Language	Haskell2010

GHCJS.Perch

Contents

Perch DOM Builder
DOM Tree Building
DOM Tree Navigation & Manipulation
Types
Internal API

Description

Monad and Monoid instances for a builder that hang DOM elements from the current parent element.

Synopsis

Perch DOM Builder

pack :: a #

newtype PerchM a #

Constructors

Perch
Fields build :: Elem -> IO Elem

Instances

Monad PerchM #
Methods (>>=) :: PerchM a -> (a -> PerchM b) -> PerchM b # (>>) :: PerchM a -> PerchM b -> PerchM b # return :: a -> PerchM a # fail :: String -> PerchM a #
Functor PerchM #
Methods fmap :: (a -> b) -> PerchM a -> PerchM b # (<$) :: a -> PerchM b -> PerchM a #
IsString Perch #
Methods fromString :: String -> Perch #
Applicative PerchM #
Methods pure :: a -> PerchM a # (<>) :: PerchM (a -> b) -> PerchM a -> PerchM b # (>) :: PerchM a -> PerchM b -> PerchM b # (<*) :: PerchM a -> PerchM b -> PerchM a #
MonadIO PerchM #
Methods liftIO :: IO a -> PerchM a #
Attributable Perch #
Methods (!) :: Perch -> Attribute -> Perch #
Monoid (PerchM a) #
Methods mempty :: PerchM a # mappend :: PerchM a -> PerchM a -> PerchM a # mconcat :: [PerchM a] -> PerchM a #
ToElem (PerchM a) #
Methods toElem :: PerchM a -> Perch #
ToElem a => Attributable (a -> Perch) #
Methods (!) :: (a -> Perch) -> Attribute -> a -> Perch #

type Perch = PerchM () #

class ToElem a where #

Minimal complete definition

toElem

Methods

toElem :: a -> Perch #

Instances

Show a => ToElem a #
Methods toElem :: a -> Perch #
ToElem (PerchM a) #
Methods toElem :: PerchM a -> Perch #

class Attributable h where #

Minimal complete definition

(!)

Methods

(!) :: h -> Attribute -> h #

Instances

Attributable Perch #
Methods (!) :: Perch -> Attribute -> Perch #
ToElem a => Attributable (a -> Perch) #
Methods (!) :: (a -> Perch) -> Attribute -> a -> Perch #

DOM Tree Building

attr :: forall a. PerchM a -> (PropId, JSString) -> PerchM a #

nelem :: JSString -> Perch #

child #

Arguments

:: ToElem a
=> Perch	parent
-> a	child
-> Perch

Build an element as child of another one. Child element becomes new continuation for monadic expression.

setHtml :: Perch -> JSString -> Perch #

addEvent :: NamedEvent e => Perch -> e -> Callback (JSVal -> IO ()) -> Perch #

Build perch and attach an event handler to its element.

Event handler should be an IO action wrapped by GHCJS' Callback taking one argument, that is an actual JavaScript event object baked in JSVal.

addEvent' :: NamedEvent e => Perch -> e -> (JSVal -> IO ()) -> Perch #

Build perch and attach an event handler to its element. Use this function only when you are sure that you won't detach handler during application run.

remEvent :: NamedEvent e => Perch -> e -> Callback (JSVal -> IO ()) -> Perch #

Build perch and remove an event handler from it.

Note, you still have to release callback manually.

Leaf DOM Nodes

area :: Perch #

base :: Perch #

br :: Perch #

col :: Perch #

embed :: Perch #

hr :: Perch #

img :: Perch #

input :: Perch #

keygen :: Perch #

link :: Perch #

menuitem :: Perch #

meta :: Perch #

param :: Perch #

source :: Perch #

track :: Perch #

wbr :: Perch #

Parent DOM Nodes

a :: ToElem a => a -> Perch #

abbr :: ToElem a => a -> Perch #

address :: ToElem a => a -> Perch #

article :: ToElem a => a -> Perch #

aside :: ToElem a => a -> Perch #

audio :: ToElem a => a -> Perch #

b :: ToElem a => a -> Perch #

bdo :: ToElem a => a -> Perch #

blockquote :: ToElem a => a -> Perch #

body :: ToElem a => a -> Perch #

button :: ToElem a => a -> Perch #

canvas :: ToElem a => a -> Perch #

caption :: ToElem a => a -> Perch #

center :: ToElem a => a -> Perch #

cite :: ToElem a => a -> Perch #

code :: ToElem a => a -> Perch #

colgroup :: ToElem a => a -> Perch #

command :: ToElem a => a -> Perch #

datalist :: ToElem a => a -> Perch #

dd :: ToElem a => a -> Perch #

del :: ToElem a => a -> Perch #

details :: ToElem a => a -> Perch #

dfn :: ToElem a => a -> Perch #

div :: ToElem a => a -> Perch #

dl :: ToElem a => a -> Perch #

dt :: ToElem a => a -> Perch #

em :: ToElem a => a -> Perch #

fieldset :: ToElem a => a -> Perch #

figcaption :: ToElem a => a -> Perch #

figure :: ToElem a => a -> Perch #

footer :: ToElem a => a -> Perch #

form :: ToElem a => a -> Perch #

h1 :: ToElem a => a -> Perch #

h2 :: ToElem a => a -> Perch #

h3 :: ToElem a => a -> Perch #

h4 :: ToElem a => a -> Perch #

h5 :: ToElem a => a -> Perch #

h6 :: ToElem a => a -> Perch #

head :: ToElem a => a -> Perch #

header :: ToElem a => a -> Perch #

hgroup :: ToElem a => a -> Perch #

html :: ToElem a => a -> Perch #

i :: ToElem a => a -> Perch #

iframe :: ToElem a => a -> Perch #

ins :: ToElem a => a -> Perch #

kbd :: ToElem a => a -> Perch #

label :: ToElem a => a -> Perch #

legend :: ToElem a => a -> Perch #

li :: ToElem a => a -> Perch #

map :: ToElem a => a -> Perch #

mark :: ToElem a => a -> Perch #

menu :: ToElem a => a -> Perch #

meter :: ToElem a => a -> Perch #

nav :: ToElem a => a -> Perch #

noscript :: ToElem a => a -> Perch #

object :: ToElem a => a -> Perch #

ol :: ToElem a => a -> Perch #

optgroup :: ToElem a => a -> Perch #

option :: ToElem a => a -> Perch #

output :: ToElem a => a -> Perch #

p :: ToElem a => a -> Perch #

pre :: ToElem a => a -> Perch #

progress :: ToElem a => a -> Perch #

q :: ToElem a => a -> Perch #

rp :: ToElem a => a -> Perch #

rt :: ToElem a => a -> Perch #

ruby :: ToElem a => a -> Perch #

samp :: ToElem a => a -> Perch #

script :: ToElem a => a -> Perch #

section :: ToElem a => a -> Perch #

select :: ToElem a => a -> Perch #

small :: ToElem a => a -> Perch #

span :: ToElem a => a -> Perch #

strong :: ToElem a => a -> Perch #

sub :: ToElem a => a -> Perch #

summary :: ToElem a => a -> Perch #

sup :: ToElem a => a -> Perch #

table :: ToElem a => a -> Perch #

tbody :: ToElem a => a -> Perch #

td :: ToElem a => a -> Perch #

textarea :: ToElem a => a -> Perch #

tfoot :: ToElem a => a -> Perch #

th :: ToElem a => a -> Perch #

thead :: ToElem a => a -> Perch #

time :: ToElem a => a -> Perch #

title :: ToElem a => a -> Perch #

tr :: ToElem a => a -> Perch #

ul :: ToElem a => a -> Perch #

var :: ToElem a => a -> Perch #

video :: ToElem a => a -> Perch #

ctag :: ToElem b => JSString -> b -> Perch #

HTML4 Support

noHtml :: Perch #

DOM Tree Navigation & Manipulation

Attributes

atr :: String -> JSString -> Attribute #

id :: JSString -> Attribute #

height :: JSString -> Attribute #

href :: JSString -> Attribute #

src :: JSString -> Attribute #

style :: JSString -> Attribute #

width :: JSString -> Attribute #

Traversal

this :: Perch #

Return the current node.

goParent :: Perch -> Perch -> Perch #

Goes to the parent node of the first and execute the second.

Manipulation

delete :: Perch #

Delete the current node and return the parent.

clear :: Perch #

Delete all children of the current node.

outer :: Perch -> Perch -> Perch #

Replace the current node with a new one

forElems :: JSString -> Perch -> Perch #

JQuery-like DOM manipulation. It applies the Perch DOM manipulation for each found element using querySelectorAll function.

forElems_ :: JSString -> Perch -> IO () #

Like forElems, but works in IO monad. Example:

import GHCJS.Foreign.Callback (asyncCallback1)

main = do
  body <- getBody
  makeRed <- asyncCallback1 (\ _ -> do
    forElems_ ".changeable" $
      this ! style "color:red")
  (flip build) body . div $ do
     div ! atr "class" "changeable" $ "Changeable"
     div "Static"
     div ! atr "class" "changeable" $ "Changeable"
     addEvent this Click makeRed

withElems :: Perch -> JSString -> Perch #

Decalarative synonym for flip forElems.

Examples:

doAction `withElems` ".item"
forElems ".item" doAction

withElems_ :: Perch -> JSString -> IO () #

A declarative synonym of flip forElements.

forElemId :: JSString -> Perch -> Perch #

Apply action to perch with given identifier.

forElemId_ :: JSString -> Perch -> IO () #

IO version of forElemId_.

withElemId :: Perch -> JSString -> Perch #

A synonym to flip forElemId.

withElemId_ :: Perch -> JSString -> IO () #

A synonym to flip forElemId_.

withPerch :: (Elem -> IO a) -> Elem -> IO Elem #

withPerchBuild :: PerchM a -> (Elem -> IO b) -> Elem -> IO Elem #

Types

data Elem #

type PropId = JSString #

type Attribute = (JSString, JSString) #

class NamedEvent a where #

Minimal complete definition

eventName

Methods

eventName :: a -> String #

Instances

Show a => NamedEvent a #
Methods eventName :: a -> String #

data JsEvent #

Constructors

Blur
Change
Click
DblClick
Focus
KeyPress
KeyUp
KeyDown
Load
MouseDown
MouseMove
MouseOut
MouseOver
MouseUp
Submit
Unload
Wheel

Instances

Show JsEvent #
Methods showsPrec :: Int -> JsEvent -> ShowS # show :: JsEvent -> String # showList :: [JsEvent] -> ShowS #

Internal API

data Callback a #

Constructors

Callback a

notImplemented :: a #

getDocument :: IO Elem #

getBody :: IO Elem #

newElem :: JSString -> IO Elem #

newTextElem :: JSString -> IO Elem #

parent :: Elem -> IO Elem #

addChild #

Arguments

:: Elem	child element to append
-> Elem	parent element
-> IO ()

Appends one element to another.

removeChild #

Arguments

:: Elem	child to remove
-> Elem	parent node
-> IO ()

Remove child from parent.

clearChildren :: Elem -> IO () #

replace :: Elem -> Elem -> IO Elem #

setAttr :: Elem -> PropId -> JSString -> IO () #

setInnerHTML :: Elem -> JSString -> IO () #

getElemById :: JSString -> IO Elem #

queryAll :: JSString -> IO [Elem] #

onEvent :: NamedEvent e => Elem -> e -> Callback (JSVal -> IO ()) -> IO (IO ()) #

Attach an event listener to element.

Returns an action removing listener, though you still have to release callback manually.

If you are sure that you do not want to remove handler consider using onEvent'.

onEvent' :: NamedEvent e => Elem -> e -> (JSVal -> IO ()) -> IO () #

Attach endless event listener to element.

Use this function to attach event handlers which supposed not to be removed during application run.

removeEvent :: NamedEvent e => Elem -> e -> Callback (JSVal -> IO ()) -> IO () #

Remove attached event listener.

Normally you can use action returned by onEvent to detach event listener, however you can also use this function directly.