ldx-widgets/src/components/pdf_viewer.coffee

widgets

React = require 'react'
ReactDOM = require 'react-dom'


{div, canvas} = React.DOM

###
Important: This component asummes the PDFJS lib has been loaded (it is not loaded by default), so it should not be rendered unless window.PDFJS?
###


PDFViewer = React.createClass

  displayName: 'PDFViewer'

  getDefaultProps: ->
    showPageDividers: yes
    intent: 'display'

  getInitialState: ->
    totalPages: 1

  render: ->
    {totalPages} = @state
    {showPageDividers, intent} = @props
    pages = []
    for page in [0...totalPages]
      pages.push canvas {
        ref: "pdfCanvas#{page}"
        className: 'pdf-canvas'
        key: "page#{page}"
      }
      if page isnt totalPages - 1 and showPageDividers and intent isnt 'print'
        pages.push div {
          className: 'pdf-page-divide'
          key: "divide#{page}"
        }
    
    div {
      className: 'pdf-container'
    }, pages

  componentWillMount: ->
    @loadedPageCount = 0
  
  componentDidMount: ->
    @renderPDF()

  renderPDF: ->
    {url, headers} = @props

    params =
      url: url

    params.httpHeaders = headers if headers?

    # Get the PDF
    window.PDFJS.getDocument params 
    .then (pdf) =>
      # Set the number of pages to draw the right number of canvas elements
      @setState 
        totalPages: pdf.numPages
      , =>
        # After a delay, draw the pages
        setTimeout =>
          @pageCounter(pdf)
        , 500

  renderPage: (pdf, pageNum, cb) ->
    {intent} = @props
    scale = (Math.ceil((window.innerWidth/100)))/10
    scale = if intent is 'print' then 3 else scale

    pdf.getPage pageNum
    .then (page) =>
      # Get the canvas DOM Node for this page
      pdfCanvas = ReactDOM.findDOMNode @refs["pdfCanvas#{page.pageIndex}"]
      viewport = page.getViewport scale
      context = pdfCanvas.getContext '2d'
      
      if intent is 'print'
        if page.rotate isnt 0
          pdfCanvas.style.height = "5.8in"
          pdfCanvas.style.width = "7.5in"
        else
          pdfCanvas.style.height = "9.3in"
          pdfCanvas.style.width = "7.19in"
      
      pdfCanvas.height = viewport.height
      pdfCanvas.width = viewport.width

      renderContext = 
        canvasContext: context
        viewport: viewport
        intent: intent
      
      # Render the page
      page.render renderContext
      .then =>
        cb?(pdf)

  pageCounter: (pdf) ->
    {totalPages} = @state
    @loadedPageCount += 1
    @props.pageCounter?(totalPages)

    if @loadedPageCount < totalPages
      @renderPage(pdf, @loadedPageCount, @pageCounter)
    else
      @renderPage(pdf, @loadedPageCount)


  shouldComponentUpdate: (nextProps, nextState) -> nextState.totalPages isnt @state.totalPages


module.exports = PDFViewer