Idea for bootstrap of a basic (default) Annotator application

basic.coffee

Util = require('../src/util')
$ = Util.$

Adder = require('../src/plugin/adder')
Viewer = require('../src/plugin/viewer')
Editor = require('../src/plugin/editor')
TextSelector = require('../src/plugin/textselector')
Highlighter = require('../src/plugin/highlighter')


# Determines if the provided element is part of Annotator. Useful for ignoring
# mouse actions on the annotator elements.
#
# element - An Element or TextNode to check.
#
# Returns true if the element is a child of an annotator element.
_isAnnotator = (range) ->
  $el = $(range.commonAncestor)
  if $el.hasClass('annotator-hl')
    $el = $el.parents('[class!=annotator-hl]').first()

  !!$el
    .parents()
    .addBack()
    .filter('[class^=annotator-]')
    .length


# Given an Array of ranges, return serialized ranges and a quotation.
#
# ranges - An Array of NormalizedRange instances
# context - The context element for the ranges
#
# Returns an Object with `ranges` and `quote` properties.
_normalizeAndExtract = (ranges, context) ->
  result = {quote: [], ranges: []}

  for r in ranges.slice()
    result.ranges.push(r.serialize(context, '.annotator-hl'))
    result.quote.push($.trim(r.text()))

  # Join all the quotes into one string.
  result.quote = result.quote.join(' / ')

  result


module.exports = (annotator) ->
  annotation = null
  annotations = annotator.annotations
  element = annotator.element[0]
  mouseDown = false
  point = null
  ranges = null
  selector = new TextSelector()

  adder = new Adder({
    onClick: (event) ->
      annotation = _normalizeAndExtract(ranges, element)
      annotator.trigger('beforeAnnotationCreated', annotation)
      editor.element.css(point)
      editor.editAnnotation(annotation)
        .then(annotations.create.bind(annotations, annotation))
  })

  viewer = new Viewer({
    showEditButton: not annotator.options.readOnly,
    showDeleteButton: not annotator.options.readOnly,
  })

  editor = new Editor()

  $(document.body).on('mousedown', (event) ->
    if event.which != 1
      return

    mouseDown = true

    viewer.hide()
  )

  $(document.body).on('mouseup', (event) ->
    if event.which != 1
      return

    if $.contains(adder.element[0], event.target)
      return

    mouseDown = false
    point = Util.mousePosition(event)
    ranges = selector
      .captureRanges(element)
      .filter((r) -> not _isAnnotator(r))

    if ranges.length
      adder.element.css(point)
      adder.show()
    else
      adder.hide()
  )

  highlighter = new Highlighter(element)

  highlighter
  .listenTo(annotator, 'annotationsLoaded', highlighter.drawAll)
  .listenTo(annotator, 'annotationCreated', highlighter.draw)
  .listenTo(annotator, 'annotationDeleted', highlighter.undraw)
  .listenTo(annotator, 'annotationUpdated', highlighter.redraw)

  adder.render()
  viewer.render()
  editor.render()