{View, $} = require 'atom'

module.exports =
class SideView extends View
  @content: (side) ->
    @div class: "side #{side.klass()} ui-site-#{side.site()}", =>
      @div class: 'controls', =>
        @label class: 'text-highlight', side.ref
        @span class: 'text-subtle', "// #{side.description()}"
        @button class: 'btn btn-xs pull-right', click: 'useMe', "Use Me"

  initialize: (@side) ->

  installIn: (editorView) ->
    console.log "== Initial installation // #{@side.description()}"
    @reposition(editorView, true)
    @appendTo editorView.overlayer

    @side.refBannerMarker.on "changed", =>
      console.log ">> Banner marker changed // #{@side.description()}"
      @reposition(editorView)

  reposition: (editorView, initial) ->
    # @side.lines().addClass("conflict-line #{@side.klass()}")
    anchor = editorView.renderedLines.offset()
    ref = @side.refBannerOffset()
    if initial
      top = ref.top
    else
      top = ref.top + anchor.top

    console.log "anchor: #{anchor.top} moving to: #{top}"
    console.log "matched lines: #{@side.lines().text()}"

    @offset top: top
    @height @side.refBannerLine().height()

  useMe: ->
    @side.resolve()

  getModel: -> null

{View, $} = require 'atom'

module.exports =
class SideView extends View
  @content: (side) ->
    @div class: "side #{side.klass()} ui-site-#{side.site()}", =>
      @div class: 'controls', =>
        @label class: 'text-highlight', side.ref
        @span class: 'text-subtle', "// #{side.description()}"
        @button class: 'btn btn-xs pull-right', click: 'useMe', "Use Me"

  initialize: (@side) ->

  installIn: (editorView) ->
    @appendTo editorView.overlayer
    @reposition(editorView)

    @side.refBannerMarker.on "changed", =>
      @reposition(editorView)

  reposition: (editorView, initial) ->
    # @side.lines().addClass("conflict-line #{@side.klass()}")
    anchor = editorView.renderedLines.offset()
    ref = @side.refBannerOffset()

    @offset top: ref.top + anchor.top
    @height @side.refBannerLine().height()

  useMe: ->
    @side.resolve()

  getModel: -> null

Reposition *after* you add to the DOM.
Reposition *after* you add to the DOM.

It doesn't seem to flicker, and you need the parent for positioning to work
properly.
