Modernize design

[reefdog]

A step toward unification of the note embed code with components of the page embed code. Backwards-compatible with existing embed codes. This issue is mostly a stub for documenting existing API coverage and requirements.

Load paths

Application

Available at assets.documentcloud.org, s3.documentcloud.org, and s3.amazonaws.com/s3.documentcloud.org:

• /notes/loader.js: Writes the following two to DOM
• /note_embed/note_embed.js
• /note_embed/note_embed.css

  Data

• www.documentcloud.org/documents/282753-lefler-thesis/annotations/53674.js: JSONP that wraps JSON in dc.embed.noteCallback() function

  dc global structure

• dc
  • embed
  • notes: Array of note views, keyed by note ID
  • loadNote(url, {id, container, afterLoad()})
  • noteCallback()
  • pingRemoteUrl()
  • noteModel()
  • noteView()
    • displayModes
    • displayNames
    • $()
    • setElement()
    • render()
    • cacheDomReferences()
    • checkAndSetWidth()
    • resize()

      HTML structure:

• .DC-note
  • .DC-note-contents
  • .DC-note-title
    • a.DC-title-link
    • .DC-page-number
  • .DC-note-draft-label
  • .DC-icon
  • a
    • .DC-note-excerpt-wrap
    • .DC-note-excerpt
      • .DC-left-cover
      • .DC-right-cover
      • .DC-note-image
  • .DC-note-text

[reefdog]

New

Load paths

App

Keep the same.

Data

Support .js, but prefer .json.

dc global structure

Currently the same, with anything unused converted to a _.noop().

HTML structure:

• .DC-note
  • .DC-note-header
  • a.DC-note-embed-resource
    • .DC-note-title
    • .DC-note-page-number
  • .DC-note-image-max-bounds
  • .DC-note-image-aspect-ratio
    • a.DC-note-image-link.DC-note-image-space-filler
    • .DC-note-image
  • .DC-note-body
  • .DC-note-credit
  • a
    • .DC-note-logotype-link
  • .DC-note-background-fader

[reefdog]

More modernization and unification to be done, but would like to wait until we can use page embed stuff more directly to do so.