purescript-simple-dom
About
A hopefully easy to use library for dealing with the DOM and general javascript APIs.
Minimal dependencies, and aiming to be as close to the javascript api as possible.
Very much a WIP, and learning as i go.
Module documentation is available here
Some Examples
Set the contents of an iframe to arbitary html content
setContents contents = do
-- doc = window.document
doc <- getDocument globalWindow
-- iframe = doc.querySelector("#siteFrame")
iframe <- querySelector "#siteFrame" doc
-- iframeDoc = iframe.contentWindow.document
iframeDoc <- (contentWindow iframe) >>= getDocument
-- iframeDoc.querySelector("html").innerHTML = contents
querySelector "html" iframeDoc >>= setInnerHTML contents
-- or a little shorter
setContents' contents = do
getDocument globalWindow >>= querySelector "#siteFrame" >>=
contentWindow >>= getDocument >>= querySelector "html" >>=
setInnerHTML contents
Change all a href's on a page and add the original link as a data attribute
modifyLinkTarget link = do
attr <- getAttribute "href" link -- attr = link.getAttribute("href")
setAttribute "href" "#" link -- link.setAttribute("href", "#")
setAttribute "data-target" attr link -- link.setAttribute("data-target", attr)
return link
modifyLinks page = do
links <- querySelectorAll "a" page -- links = [HTMLElement]
sequence $ A.map modifyLinkTarget links -- links.map(modifyLinkTarget)
Place some content from an API call into a div
-- Convert the evt content into text for the callback
handleRequest callback evt =
target <- eventTarget event
text <- responseText target
callback text
-- Construct and perform AJAX request for the specified url
makeGetRequest url callback = do
req <- makeXMLHttpRequest
addProgressEventListener ProgressLoadEvent (handleRequest callback) req
open "get" url req
setRequestHeader "Content-Type" "application/json" req
send req
-- retrieve the content and place it inside the div
requestContent = do
let url = "http://myendpoint.com/"
doc <- getDocument globalWindow
makeGetRequest url $ \resp -> do
querySelector "#myDiv" doc >>= setInnerHtml resp