pandoc-pdf-view.js

'use babel'

import PandocPdfProcessor from './pandoc-pdf-processor.js'
import { CompositeDisposable } from 'atom'
import electron from 'electron'
import os from 'os'


export default class PandocPdfView {


  // get PandocPdfView from active editor, or create one for it
  static async get(create) {
    // is there an active editor?
    const editor = atom.workspace.getActiveTextEditor()
    if (!editor) {
      // if not, nothing to do
      return undefined
    }
    // otherwise, is there a Pandoc/PDF view in the editor?
    var ppvElement = editor.element.querySelector('.pandoc-pdf-view')
    if (ppvElement) {
      // if yes, return its PandocPdfView
      return ppvElement.model
    }
    // otherwise, should we create it?
    if (!create) {
      // if not, nothing to do
      return undefined
    }
    // otherwise, let's create it
    // but that only works if there is a pathname attached to the editor
    // is there?
    if (editor.getPath()) {
      // if yes, create the PandocPdfView
      return new PandocPdfView(editor)
    }
    // otherwise, ask the user to save the editor
    pathname = await PandocPdfView.askSave(editor)
    // have they?
    if (pathname) {
      // if yes, create the PandocPdfView
      return new PandocPdfView(editor)
    }
    // otherwise, nothing to do
    return undefined
  }


  // ask the user to save the editor
  static async askSave(editor) {
    // determine default directory to save to
    let defaultPath = atom.project.getPaths()
    if (defaultPath.length > 0) {
      defaultPath = defaultPath[0]
    } else {
      defaultPath = os.homedir
    }
    // ask to choose a pathname
    pathname = await electron.remote.dialog.showSaveDialog(
      electron.remote.BrowserWindow.getFocusedWindow(), {
        'title': 'Save file for Pandoc/PDF',
        'defaultPath': defaultPath,
        'buttonLabel': 'Save'
      })
    // did they choose a pathname?
    if (pathname) {
      // if yes, save
      await editor.saveAs(pathname)
    }
    return pathname
  }


  // create PandocPdfView
  constructor(editor) {
    // collect disposables
    this.subscriptions = new CompositeDisposable()

    // remember the associated editor
    this.editor = editor

    // create Pandoc processor
    this.processor = new PandocPdfProcessor(editor.getPath(), this)
    // make sure it gets recreated if the path changes
    this.subscriptions.add(
      editor.onDidChangePath(() => {
        this.processor.destroy()
        this.processor = new PandocPdfProcessor(this.editor.getPath(), this)
      }))

    // create HTML div for view
    this.element = document.createElement('div')
    this.element.classList.add('pandoc-pdf-view')
    this.element.innerHTML = `
      <span class="pandoc-pdf-close inline-block-tight icon icon-x"
        data-id="close-view"
        title="Close Pandoc/PDF Panel"></span>

      <span class="inline-block-tight btn icon icon-pandoc"
        data-id="process"
        title="Process with Pandoc into PDF"></span>
      <span class="inline-block-tight btn icon icon-log"
        data-id="toggle-log"
        title="Toggle Pandoc log messages"></span>
      <span class="inline-block-tight btn icon icon-file-pdf"
        data-id="save-pdf"
        title="Save generated PDF"></span>
      <span class="inline-block-tight btn icon icon-circuit-board"
        data-id="open-defaults"
        title="Open local defaults file in Atom"></span>
      <span class="inline-block-tight btn icon icon-file-directory"
        data-id="show-files"
        title="Show intermediate files generated by Pandoc"></span>
      <span class="inline-block-tight btn icon icon-tools"
        data-id="show-settings"
        title="Show Pandoc/PDF settings"></span>
      <span class="inline-block-tight btn icon icon-question"
        data-id="show-help"
        title="Show Pandoc User's Guide"></span>

      <span class="pandoc-pdf-heading">
        Pandoc/PDF
      </span>

      <div class="pandoc-pdf-dialog" style="display: none">
        <div>
          <span class="inline-block text-highlight">
            Pandoc log messages
          </span>
          <span class="pandoc-pdf-close inline-block icon-x"
            data-id="hide-log"
            title="Hide Pandoc log messages"></span>
        </div>
        <div class="pandoc-pdf-log">
        </div>
      </div>
    `
    // element references
    this.bSavePdf = this.element.querySelector('[data-id="save-pdf"]')
    this.bToggleLog = this.element.querySelector('[data-id="toggle-log"]')
    this.dialog = this.element.querySelector('.pandoc-pdf-dialog')
    this.logText = this.element.querySelector('.pandoc-pdf-log')

    // make this view object accessible from the HTML div
    this.element.model = this

    // add div as first child to editor
    this.editor.element.prepend(this.element)

    // fit the absolutely positioned div above the editor
    //   height of div
    const height = this.element.offsetHeight  // account for margin?
    //   make space for div through editor margin-top
    this.editor.element.style.marginTop = height + 'px'
    //   move div into the space
    this.element.style.top = '-' + height + 'px'

    // add function to buttons
    this.element.querySelector('[data-id="process"]').addEventListener(
      'click', (e) => this.process())
    this.bSavePdf.addEventListener('click', (e) => this.processor.savePDF())
    this.bToggleLog.addEventListener('click', (e) => this.showLog())
    this.element.querySelector('[data-id="open-defaults"]').addEventListener(
      'click', (e) => this.processor.openDefaults())
    this.element.querySelector('[data-id="show-files"]').addEventListener(
      'click', (e) => this.processor.showFiles())
    this.element.querySelector('[data-id="show-settings"]').addEventListener(
      'click', (e) => atom.workspace.open('atom://config/packages/pandoc-pdf'))
    this.element.querySelector('[data-id="show-help"]').addEventListener(
      'click', (e) => this.showHelp())
    this.element.querySelector('[data-id="close-view"]').addEventListener(
      'click', (e) => this.destroy())
    this.element.querySelector('[data-id="hide-log"]').addEventListener(
      'click', (e) => this.showLog(false))

    // handle clicks on log (links & copy)
    this.logText.addEventListener('click', (event) => this.handleClick(event))

    // prevent scrolling on dialog to also scroll editor beneath
    this.dialog.addEventListener('wheel', (e) => event.stopPropagation())

    // destroy this view if editor is destroyed
    this.subscriptions.add(
      this.editor.onDidDestroy(() => this.destroy())
    )
  }


  // destroy PandocPdfView
  destroy() {
    // remove event listeners?
    this.editor.element.style.marginTop = '0px'
    this.editor.element.removeChild(this.element)
    this.element.model = null
    this.element = null
    this.processor.destroy()
    this.editor = null
    this.subscriptions.dispose()
  }


  // **************************************************************************


  // process with Pandoc into PDF
  async process() {
    await this.editor.save()
    this.bSavePdf.classList.add('disabled')
    this.bToggleLog.classList.add('animated')
    this.clearLog()
    this.processor.start()
  }


  // show or hide Pandoc/PDF Log
  showLog(show) {
    // called without argument? → toggle
    if (show === undefined) {
      show = (this.dialog.style.display == 'none')
    }
    // set 'display' property of dialog according to show
    this.dialog.style.display = show ? 'block' : 'none'
    // add/remove 'selected' class to button according to show
    if (show) {
      this.bToggleLog.classList.add('selected')
    } else {
      this.bToggleLog.classList.remove('selected')
    }
  }


  // remove all messages from log
  clearLog() {
    while (this.logText.lastChild) {
      this.logText.removeChild(this.logText.lastChild)
    }
    this.bToggleLog.classList.remove('pandoc-warning')
    this.bToggleLog.classList.remove('pandoc-failure')
  }


  // write to Pandoc/PDF Log
  writeLog(output, type) {
    // split buffered lines
    const lines = output.split('\n')
    for (let line of lines) {
      // make Pandoc line/column specifications into links
      line = line.replace(/(line (\d+) column (\d+))/g,
        '<a href="#" data-ref="source" data-line="$2" data-column="$3">$1</a>')

      // make TeX line specification into link
      line = line.replace(/^(l\.(\d+))/,
        '<a href="#" data-ref="tex" data-line="$2">$1</a>')

      // add output line element
      const linediv = document.createElement('p')
      linediv.innerHTML = line
      linediv.classList.add(type)
      this.logText.appendChild(linediv)

      // mark PandocPdfProcessor error message
      if (line.startsWith('Could not run Pandoc')) {
          linediv.classList.add('error')
          this.bToggleLog.classList.add('pandoc-failure')
      }

      // mark Pandoc & pandoc-citeproc warnings
      if (line.startsWith('[WARNING]') || line.startsWith('pandoc-citeproc:')) {
          linediv.classList.add('warning')
          this.bToggleLog.classList.add('pandoc-warning')
      }

      // mark Latexmk warnings
      if (line.startsWith('  Latex ')) {
          linediv.classList.add('warning')
          this.bToggleLog.classList.add('pandoc-warning')
      }

      // mark LaTeX error messages
      if ((line.startsWith('! ')) || line.startsWith('l.')) {
          linediv.classList.add('error')
          this.bToggleLog.classList.add('pandoc-failure')
      }
    }
  }


  // handle click on line/column links
  async handleClick(event) {
    // link to source file
    if (event.target.getAttribute('data-ref') == 'source') {
      // determine line / column the link refers to
      const lineNo = event.target.getAttribute('data-line')
      const columnNo = event.target.getAttribute('data-column')
      // move cursor to that position
      this.editor.setCursorBufferPosition([lineNo - 1, columnNo - 1])
      // dismiss dialog
      this.showLog(false)
      return
    }
    // link to intermediate .tex file
    if (event.target.getAttribute('data-ref') == 'tex') {
      // determine line the link refers to
      const lineNo = parseInt(event.target.getAttribute('data-line'))
      // open intermediate .tex file at line
      atom.workspace.open(this.processor.getTexPathname(), {
        initialLine: lineNo - 1,
        searchAllPanes: true
      })
      return
    }
    // copy output line to clipboard
    const line = event.target.closest('.pandoc-pdf-log p')
    if (line) {
      atom.clipboard.write(line.textContent)
      // blink background as feedback
      line.classList.add('selected')
      window.setTimeout(() => line.classList.remove('selected'), 100)
    }
  }


  // show Pandoc/PDF reference in pane
  showHelp() {
    const url = 'https://pandoc.org/MANUAL.pdf'
    atom.workspace.open(url,
      {
        split: 'right',
        searchAllPanes: true,
        activatePane: false,
        activateItem: true
      })
  }


  // called from PandocPdfProcessor *******************************************


  // log Pandoc call
  logCall(args) {
    // in bash-compatible & readable form
    // bash-compatible: escape spaces (other characters?)
    // readable: don't break within an argument (<nobr>)
    args = args.map(arg => '<nobr>' + arg.replace(/ /g, '\\ ') + '</nobr>')
    this.writeLog(args.join(' '), 'command')
  }


  // log Pandoc output
  logStdout(output) {
    this.writeLog(output, 'stdout')
  }


  // log Pandoc error output
  logStderr(output) {
    this.writeLog(output, 'stderr')
  }


  // log Pandoc exit status
  logExit(code) {
    this.writeLog('Pandoc exit code: ' + code, code == 0 ? 'success' : 'failure')
    this.bToggleLog.classList.remove('animated')
    if (code == 0) {
      this.bSavePdf.classList.remove('disabled')
    } else {
      this.showLog(true)
      this.logText.scrollTop = this.logText.scrollHeight
      this.bToggleLog.classList.add('pandoc-failure')
    }
  }


}