Skip to content

nelsonmau/document-viewer

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

97 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

   ____            _    ___                       
   / __ \____  ____| |  / (_)__ _      _____  _____
  / / / / __ \/ ___/ | / / / _ \ | /| / / _ \/ ___/
 / /_/ / /_/ / /__ | |/ / /  __/ |/ |/ /  __/ /    
/_____/\____/\___/ |___/_/\___/|__/|__/\___/_/

Source

  • The frontend branch is home to all of the HTML, CSS, and Javascript you’ll need to get a static viewer up and running.

  • The rails branch (TK) contains a Rails-based admin you can use to create, manage, and serve viewers.

Browser Support

All core functionality is supported as far back as IE6. However, users with modern browsers(Firefox 3.5, Safari 4, Chrome) will notice a much improved view. The markup and css used to support IE6 is pretty atrocious. New templates to take more aggressive use of CSS3 treats like rounded corners and gradients are on the roadmap.

Usage

Take a peek at the plain.html template to see how to load in a Document. All you really need to do is point to a Document Viewer JSON file and specify the target element to embed the viewer:

DV.load(JSON_FILE, { container: element_selector });

JSON_FILE: Either an inline json object, or the path to a remote json object - documents.nytimes.com/goldman-sachs-internal-emails.json

  • container: The element to contain the Document Viewer - ‘#DV-container’

Data Formats: Documents

All data should be formatted as JSON. When provided a cross domain url, DV will attempt a JSONP request. Examples of this in use can be found here: documents.nytimes.com/goldman-sachs-internal-emails.json

{
  title       : DOCUMENT_TITLE,
  description : DOCUMENT_DESCRIPTION,
  id          : DOCUMENT_ID,
  pages       : TOTAL_PAGES,

  annotations : 
  [
    {
      title     : ANNOTATION_TITLE,
      page      : PAGE_INDEX,
      content   : ANNOTATION_DESCRIPTION
      location  : { image: "x1, y1, x2, y2" },
    } 
  ],

  sections    : 
  [
    { title     : CHAPTER_TITLE, pages: "1-10" },
    { title     : CHAPTER_TITLE, pages: "11-20" }
  ],

  resources   : 
  {
    page          : { text: TEXT_URL_FORMAT, image: IMAGE_URL_FORMAT },
    related_story : LINK_URL,
    pdf           : ORIGINAL_PDF_URL,
    search        : SEARCH_UTILITY_URL
  }
}

Data Formats: Search

All data should be formatted as JSON. When provided a cross domain url, DV will attempt a JSONP request.

{
  matches : NUMBER_OF_PAGES_WITH_MATCHES,
  results : [PAGE_NUMBER,PAGE_NUMBER,PAGE_NUMBER],
  query   : SEARCH_QUERY
}
  • matches : The number of pages with matches.

  • results : An array of page numbers with matches. NOT zero based.

  • query : Your search query.

Requirements

Jammit

We’re using the excellent Jammit asset compression library from the DocumentCloud project to compress assets and render JS templates. Anytime you make a change to a template, you’ll need to run jammit command to render out the views.

jammit -c ASSET_CONFIG_PATH

Details on installing and using the Jammit library can be found at documentcloud.github.com/jammit/

Styling the Viewer

The template provided comes in two forms:

plain.html

This is the production facing view that uses the latest compressed assets and views.

debug.html

Should only be used for development and debugging purposes. You’ll need to keep this up to date should add or remove new assets.

All view templates can be found in javascripts/DV/views To see your changes you’ll need to be sure to run the jammit command to re-render your views.

Copyright © 2010 The New York Times. See LICENSE for details.