Fan

 

Dom

Overview

WARNING: the dom API is still an early prototype, so will be going through many changes during development

The dom pod provides a framework for interoperating with the browser DOM and related browser APIs. For the most part, these map one-to-one:

Browser           Fan
--------------    ---------------
Window            Window
Document          Doc
Element           Elem
Event             Event
XmlHttpRequest    HttpReq/HttpRes

Window

Window.alert("Hello!")  // display a modal dialog
Window.uri              // the URI for this page
Window.hyperlink(uri)   // hyperlink to new page

Doc

Doc.elem("someId")      // return the Elem with id='someId'
Doc.createElem("div")   // create a new <div> element

Elem

// attributes
elem["alt"]               // get an attribute value
elem["alt"] = "Alt text"  // set an attribute value
elem.id                   // 'id' attribute
elem.name                 // 'name' attribute
elem.tagName              // tag name of this element

// CSS
elem.style                     // CSS style object for this element
elem.computedStyle             // computed style for this element
elem.className                 // return the current class name(s)
elem.hasClassName("alpha")     // does this element have the given class name?
elem.addClassName("beta")      // add a new class name to any current class names
elem.removeClassName("gamma")  // remove a class name, leaving any others remaining

// tree
elem.parent             // parent element
elem.next               // next sibling
elem.prev               // prev sibling
elem.children           // List of child elements
elem.first              // first child, or null if no children
elem.add(child)         // add a new child element
elem.remove(child)      // remove a child element

// form conveniences
elem.value              // the 'value' attribute
elem.checked            // true/false for checkboxes

// position and size
elem.x                  // x position within parent
elem.y                  // y position within parent
elem.w                  // width of elment
elem.h                  // height of element

// event handlers
elem.onEvent("click", false) |e| { Window.alert("$e.target clicked!") }

// find
elem.find |e| { e.tagName == "img" }     // find first <img> descendant
elem.findAll |e| { e.tagName == "img" }  // find all <img> descendants

XmlHttpRequest

The HttpReq object is used to make background HTTP requests from the browser. For both sync and async requests, the response is passed to you in the callback closure:

HttpReq(uri).send("some content") |res|
{
  Window.alert(res.content)
}

If you are submitting form values, you can use sendForm to automatically encode the values as a form submission, and set the Content-Type to application/form-url-encoded:

HttpReq(uri).sendForm(["name":"Barney Stinson"]) |res|
{
  Window.alert(res.content)
}

Effects

Modeled after jQuery, the Effect object allows an element to be animated, such as sliding it down, fading in, or transitioning between colors. Common effects can be applied directly using a built-in method:

// show/hide
elem.effect.show
elem.effect.show(100ms)
elem.effect.hide(200ms)

// sliding
elem.effect.slideDown(500ms)
elem.effect.slideUp(250ms)

// fading
elem.effect.fadeIn(100ms)
elem.effect.fadeOut(100ms)
elem.effect.fadeTo(0.75, 200ms)

Arbitrary animations can be applied using the animate method:

// move elem diagonally down 100px
elem.effect.animate(["left":"100px", "top":"100px"], 250ms)