Modernize design

[Justin Reese]

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

[Justin Reese]

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

[Justin Reese]

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