'
constructor: (@bind,@options={})->
@options = $.extend({
content: @bind.data('content')
title: @bind.attr('title')
},options)
@el = $(@constructor.template).appendTo($('body')).hide()
render: ->
@el.find('.popover-title').html(@options.title)
@el.find('.popover-content').html(@options.content)
@position()
position: ->
visible = @el.is(':visible')
@el.show()
w = @el.width()
h = @el.innerHeight()
pos = $.extend {} , @bind.offset() ,{
width: @bind[0].offsetWidth
height: @bind[0].offsetHeight
}
padding = parseInt(@el.css('padding-left'))
margin = 5
$window = $(window)
$arrow = @el.find('.arrow')
view =
top: $window.scrollTop()
left: $window.scrollLeft()
width: $window.width()
height: $window.height()
@el.css({ top: 0, left: 0, display: 'block' })
@el.removeClass('top')
@el.removeClass('bottom')
tp = {}
if (pos.left + w ) <= view.left + view.width
tp.left = pos.left - padding
$arrow.css('left', pos.width/2 + padding)
else
tp.left = pos.left + pos.width - w - margin
$arrow.css('left', w - pos.width/2 - padding)
if (pos.top + pos.height + h) <= view.top + view.height
#bottom
cssClass = 'bottom'
tp.top = pos.top + pos.height - margin
else
cssClass = 'top'
tp.top = pos.top - h + margin
@el.css(tp)
@el.addClass(cssClass)
@el.hide() if !visible
@el
toggle: ->
if @el.is(':visible')
@el.fadeOut('fast')
else
@render()
@el.fadeIn('fast')
content: (content) ->
return options.content if !content
@options.content = content
@render()
title: (title) ->
return options.title if !title
@options.title = title
@render()
$.fn.popo = (options={})->
$el = $(@)
data = $el.data('app.popover')
return data if data
popover = new App.Popover($el,options)
$el.data('app.popover',popover)
return popover