Code Monkey home page Code Monkey logo

purescript-simple-dom's Introduction

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

purescript-simple-dom's People

Contributors

aktowns avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.