Annotatable Elements

[datapimp]

I would like to use the following API for a Javascript component:

# browserify
annotations = require("annotations")

# enable annotations on the specified element
obj = annotations.enable(el: "#my-iframe", style: "points", maskClass: "dark-translucent")

Once enabled, a shim should be placed on top of the element, which captures any click events. Based on the style passed in as an option, elements should be placed and positioned wherever the click occurred.

Other things I'd like to be able to do:

# This should give me a structure representing all of the annotations
persisted  = obj.annotations()

# This should redraw all of the annotations on the given iframe
obj.restore(persisted)

# this should allow me to bind to annotation events
obj.on("annotation:received", (element, details) -> ...)

# disable the annotations behavior
obj.disable()

Annotation Styles

• points puts numbered points ontop of the element
• boxes boxes allows me to drag boxes for annotations

Annotation Objects

annotations = obj.annotations()
annotation = annotations.first()

annotation = 
  index: 0
  style: "points"
  meta: {}
  position:
    top: 25
    left: 25