packages/marker.coffee

   1 class Marker
   2   constructor: (@element, @container) ->
   3     document = @element.ownerDocument
   4     window = document.defaultView
   5     @markerElement = document.createElement 'div'
   6     @markerElement.className = 'vimffReset vimffHintMarker'
   7
   8     @container.appendChild @markerElement
   9
  10   show: -> @markerElement.style.display = 'none'
  11   hide: -> delete @markerElement.style.display
  12
  13   setPosition: (rect) ->
  14     @markerElement.style.left = rect.left + 'px'
  15     @markerElement.style.top  = rect.top  + 'px'
  16
  17   setHint: (@hint) ->
  18     document = @element.ownerDocument
  19
  20     while @markerElement.hasChildNodes()
  21       @markerElement.removeChild @markedElement.firstChild
  22
  23     for char in @hint
  24       span = document.createElement 'span'
  25       span.className = 'vimffReset'
  26       span.textContent = char.toUpperCase()
  27
  28       @markerElement.appendChild span
  29
  30
  31 # The login in this method is copied from Vimium for Chrome
  32 getElementRect = (element) ->
  33   document = element.ownerDocument
  34   window   = document.defaultView
  35   docElem  = document.documentElement
  36   body     = document.body
  37
  38   clientTop  = docElem.clientTop  || body.clientTop  || 0;
  39   clientLeft = docElem.clientLeft || body.clientLeft || 0;
  40   scrollTop  = window.pageYOffset || docElem.scrollTop;
  41   scrollLeft = window.pageXOffset || docElem.scrollLeft;
  42
  43   rects = [rect for rect in element.getClientRects()]
  44   rects.push element.getBoundingClientRect()
  45
  46   for rect in rects
  47     if rect.width > 2 and rect.height > 2 and \
  48        rect.top > -2 and rect.left > -2 and \
  49        rect.top < window.innerHeight - 2 and \
  50        rect.left < window.innerWidth - 2
  51
  52       return {
  53         top:    rect.top  + scrollTop  - clientTop;
  54         left:   rect.left + scrollLeft - clientLeft;
  55         width:  rect.width
  56         height: rect.height
  57       }
  58
  59   # If the element has 0 dimentions then check what's inside.
  60   # Floated or absolutely positioned elements are of particular interest
  61   for rect in rects
  62     if rect.width == 0 or rect.height == 0
  63       for childElement in element.children
  64         computedStyle = window.getComputedStyle childElement, null
  65         if computedStyle.getPropertyValue 'float' != 'none' or \
  66            computedStyle.getPropertyValue 'position' == 'absolute'
  67
  68           return childRect if childRect = getElementRect childElement
  69
  70   return undefined
  71
  72 exports.Marker = Marker
  73 exports.getElementRect = getElementRect