Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/laserpants/util-dom
Fay DOM manipulation utility library
https://github.com/laserpants/util-dom
Last synced: about 1 month ago
JSON representation
Fay DOM manipulation utility library
- Host: GitHub
- URL: https://github.com/laserpants/util-dom
- Owner: laserpants
- Created: 2014-01-19T11:04:32.000Z (almost 11 years ago)
- Default Branch: master
- Last Pushed: 2014-01-19T23:08:58.000Z (almost 11 years ago)
- Last Synced: 2024-10-13T00:47:38.726Z (2 months ago)
- Size: 195 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
util-dom
========
**Note:** This library is pretty much redundant. Instead, see: [https://github.com/faylang/fay-dom](https://github.com/faylang/fay-dom)
Basic DOM manipulation API for Fay (the [Fay Programming Language](https://github.com/faylang/fay/wiki)).
This module provides a trivial `Element` data type and some basic FFI wrappers for a few of the standard JavaScript DOM functions (feel free to add more). It does not depend on jQuery or other third-party JavaScript libraries.
-- | Represents a DOM element.
data Element
## Functions
* [createElement](#createelement)
* [appendChild](#appendchild)
* [setAttribute](#setattribute)
* [onLoad](#onload)
* [documentBody](#documentbody)
* [addWindowEvent](#addwindowevent)
* [toString](#tostring)
* [innerHtml](#innerhtml)
* [outerHtml](#outerhtml)
* [parentNode](#parentnode)
* [getElementById](#getelementbyid)
* [getElementsByClassName](#getelementsbyclassname)
* [getElementsByTagName](#getelementsbytagname)
* [setElementHtml](#setelementhtml)
* [addEventListener](#addeventlistener)
* [addElementEventListener](#addelementeventlistener)
* [onClick](#onclick)
### createElement
createElement :: String -> Fay Element
Create an element with the specified name.
**Example:**
el <- createElement "button"
### appendChild
Add an element after the last child node of the specified element.
appendChild :: Element -- ^ Parent node
-> Element -- ^ The child element
-> Fay ()
### setAttribute
Add or set the attribute/value pair on the provided target element.
setAttribute :: Element -- ^ An element
-> String -- ^ Attribute name
-> String -- ^ Attribute value
-> Fay ()
### onLoad
Add an "on load" event listener to the window object.
onLoad :: Fay () -> Fay ()
**Example:**
stuff :: Fay ()
stuff = ...
main :: Fay ()
main = onLoad $ do stuff
### documentBody
Retrieve the document body element.
documentBody :: Fay Element
### addWindowEvent
Add an event listener to the window object.
addWindowEvent :: String -- ^ An event type
-> Fay () -- ^ The listener function
-> Fay ()
### toString
Stringify an element.
toString :: Element -> Fay String
### innerHtml
Retrieve the HTML between the start and end tags of the object.
innerHtml :: Element -> Fay String
### outerHtml
Return the object and its content.
outerHtml :: Element -> Fay String
### parentNode
Return the parent node of an element.
parentNode :: Element -> Fay (Maybe Element)
This function returns a `Maybe Element` in the `Fay` monad, since a parent element doesn't always exist.
### getElementById
Return the element with the id attribute matching the specified value, if one exists.
getElementById :: String -> Fay (Maybe Element)
This function returns a `Maybe Element` to properly handle cases where no element is found matching the provided id.
**Example:**
doStuff :: Fay ()
doStuff = do
el <- getElementById "my-element"
case el of
Nothing -> return ()
Just e -> doSomethingWith e
### getElementsByClassName
Return a list of elements which matches the provided class name(s).
getElementsByClassName :: String -> Fay [Element]
### getElementsByTagName
Return a list of elements with the specified tag name.
getElementsByTagName :: String -> Fay [Element]
### setElementHtml
Set the inner HTML of the document's body element.
setBodyHtml :: String -> Fay ()
### addEventListener
Register an event listener on an element.
setHtml :: Element -> String -> Fay ()
**Example:**
createButton = do
btn <- createButton "Hello"
addEventListener btn "click" doStuff
### addElementEventListener
Register an event listener on the element with the specified id. Does nothing if no element exists with the provided id.
addEventListener :: Element -> String -> Fay Bool -> Fay ()
### onClick
Register an "on click" event listener.
onClick :: String -- ^ The id of the event target
-> Fay Bool -- ^ A listener function
-> Fay ()
## More elaborate examples
module Examples where
import Prelude
import FFI
import Util.DOM
alert :: String -> Fay ()
alert = ffi "alert(%1)"
doStuff :: Fay Bool
doStuff = do
alert "Let the drama begin!"
return False
createButton :: String -> Fay Element
createButton title = do
el <- createElement "button"
setHtml el title -- Replace inner HTML with the title
return el
-- | Uses createElement, setAttribute, addEventListener and appendChild
example1 :: Fay ()
example1 = do
btn <- createButton "Hello"
setAttribute btn "style" "border:2px solid red"
addEventListener btn "click" doStuff
body <- documentBody
appendChild body btn
example2 :: Fay ()
example2 = do
el <- createElement "div"
setHtml el "hello"
setAttribute el "id" "hello-div"
p <- createElement "p"
setHtml p "world"
body <- documentBody
appendChild body el
div <- getElementById "hello-div"
case div of
Nothing -> return ()
Just dv -> appendChild dv p
setStyle :: Element -> String -> Fay ()
setStyle element = setAttribute element "style"
-- Uses getElementByClassName, setAttribute etc.
example3 :: Fay ()
example3 = do
el <- documentBody
run (f el) [createButton $ show x | x <- [1 .. 5]]
--
btns <- getElementsByClassName "button-class"
run (flip setStyle "border:2px solid yellow") btns
where f :: Element -> Fay Element -> Fay ()
f par element = do
c <- element
appendChild par c
setAttribute c "class" "button-class"
run :: (a -> Fay ()) -> [a] -> Fay ()
run a = sequence_ . map a
main :: Fay ()
main = do
onLoad $ do
example1
example2
example3
Compile the examples:
fay Examples.hs --html-wrapper