moustafasamir
3/12/2013 - 9:52 PM

backbone view, Dropdown on hover

backbone view, Dropdown on hover

new DropdownView({link_selector:"#hover_btn", menu_selector:"#hover_menu", el: "#pparent_element"})
class DropdownView extends BaseView

  # el: ".header"

  events:()=>
    events_hash = {}
    events_hash["mouseover #{@link_selector}"]  ="showMenu"
    events_hash["mouseleave #{@link_selector}"] ="btnLeave"
    events_hash["mouseleave #{@menu_selector}"] ="hideMenu"
    events_hash["mouseover #{@menu_selector}"]  ="insideMenu"
    return events_hash

  initialize: (options)->
    @link_selector = options.link_selector
    @menu_selector = options.menu_selector

  showMenu: =>
    @$('.dropdown').hide() #hide other menus
    @$(@menu_selector).show()
    @insideItemMenu = true

  hideMenu: =>
    @$(@menu_selector).hide()
    @insideItemMenu = false

  insideMenu: =>
    @$(@menu_selector).show()
    @insideItemMenu = true

  btnLeave: =>
    @insideItemMenu = false
    window.setTimeout =>
      unless @insideItemMenu == true
        @$(@menu_selector).hide()
        @insideItemMenu = false
    ,500