Responsively embed DocumentCloud notes.
HTML JavaScript CSS Ruby
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
config
dist
src
test
.bowerrc
.gitignore
Gemfile
Gemfile.lock
Guardfile
LICENSE
Rakefile
bower.json
index.html
package.json
readme.md

readme.md

DocumentCloud Notes

This project is a part of DocumentCloud.

DocumentCloud Notes are a minimalist and responsive way to display a highlighted region of an image.

Notes are represented as blob of JSON (and previously, wrapped in a dc.embed.noteCallback() function):

{
  "id": 176629,
  "page": 1,
  "title": "The UN Logo",
  "content": "The United Nations (UN) is an intergovernmental organization established on 24 October 1945 to promote international co-operation. A replacement for the ineffective League of Nations, the organization was created following the Second World War to prevent another such conflict. At its founding, the UN had 51 member states; there are now 193. (Excerpted from \u003ca href=\"http://en.wikipedia.org/wiki/United_Nations\"\u003eWikipedia\u003c/a\u003e)",
  "access": "public",
  "location": {"image":"892,482,942,55"},
  "image_url": "https://assets.documentcloud.org/documents/1282616/pages/undeclarationofhr-tl-p{page}-{size}.gif",
  "published_url": "https://www.documentcloud.org/documents/1282616-undeclarationofhr-tl.html",
  "canonical_url_":"https://www.documentcloud.org/documents/1282616-undeclarationofhr-tl/annotations/176629.html"
  "resource_url":"https://www.documentcloud.org/documents/1282616-undeclarationofhr-tl/annotations/176629.js"
}

Notes can then be embedded with three things: a target DIV, the note JavaScript code, and an invocation to load the note resource:

  <div id="DC-note-175279" class="DC-note-container"></div>
  <script src="//assets.documentcloud.org/notes/loader.js"></script>
  <script>
    dc.embed.loadNote('//www.documentcloud.org/documents/1282616-undeclarationofhr-tl/annotations/175279.js');
  </script>