jquery coffee tooltip

tooltip.jquery.coffee

# A class-based template for jQuery plugins in Coffeescript
#
#     requirements: uderscore, jquery, modernizer
#
#     $('.target').tooltip();
#     $('.target').tooltip({containerElem: '.wrapper'});
#
(($, window) ->
  DEBUG = window.DEBUG || false

  # Define the plugin class
  class Tooltip
    template: _.template '
              <div class="<%= tooltipClass %>">
                <div class="<%= tooltipClass %>__container">
                  <h3 class="<%= tooltipClass %>__title"><%= tooltipTitle %></h3>
                  <p class="<%= tooltipClass %>__text"><%= textContent %></p>
                </div>
              </div>
              '

    templateSimple: _.template '
              <div class="<%= tooltipClass %>">
                <div class="<%= tooltipClass %>__container">
                  <p class="<%= tooltipClass %>__text"><%= textContent %></p>
                </div>
              </div>
              '

    defaults:
      containerElem: '.page'
      tooltipClass: 'tooltip'
      tooltipVisibleClass: 'is-visible'
      simple: false
      simpleTooltipText: ''
      tooltipMaxWidth: 214
      topOffsetFromCursor: 30

    constructor: (el, options) ->
      @tooltipVisible = false
      @options = $.extend({}, @defaults, options)
      @$el = $(el)
      @$container = $(@options.containerElem)
      @windowWidth = $(window).width()
      @windowHeight = $(window).height()

      if @options.simple
        @compiled = @templateSimple
          tooltipClass: @options.tooltipClass
          textContent: @options.simpleTooltipText
      else
        @compiled = @template
          tooltipClass: @options.tooltipClass
          textContent: @$el.data('text')
          tooltipTitle: @$el.data('title')

      @$tooltip = $(@compiled)
      @tooltipHeight = @$tooltip.height()
      @_bindEvents()


    show: =>
      @$tooltip.appendTo(@$container)
      @$tooltip.addClass(@options.tooltipVisibleClass)
      @tooltipVisible = true

    hide: =>
      @$tooltip.removeClass(@options.tooltipVisibleClass)
      @$tooltip.detach()
      @tooltipVisible = false

    toggle: =>
      if @tooltipVisible then @hide() else @show()

    destroy: ->
      @hide()
      @$el.off '.tooltip'
      $(window).off '.tooltip'
      @$tooltip.remove()
      @$tooltip = null
      @$el.removeData 'tooltip'


    _bindEvents: ->
      @$el.on
        'mouseenter.tooltip': (event) =>
          @show()
          @$el.on 'mousemove.tooltip', @_updateTooltipPosition

        'mouseleave.tooltip': (event) =>
          @hide()
          @$el.off 'mousemove.tooltip', @_updateTooltipPosition

      $(window).on 'resize.tooltip', @_updateWindowWidth
      $(window).on 'layoutChange.tooltip', @hide

    _updateWindowWidth: => @windowWidth = $(window).width()

    _updateTooltipPosition: (event) =>
      offsetX = event.pageX
      offsetY = event.pageY
      tooltipCropSizeX = offsetX + @options.tooltipMaxWidth - @windowWidth
      tooltipCropSizeY = offsetY + @tooltipHeight - @windowHeight

      if tooltipCropSizeX > 0
        offsetX = offsetX - tooltipCropSizeX

      if tooltipCropSizeY > 0
        offsetY = offsetY - @tooltipHeight - @options.topOffsetFromCursor

      if Modernizr.csstransforms
        @$tooltip.css
          '-webkit-transform': "translate(#{offsetX}px, #{offsetY}px)"
          'transform': "translate(#{offsetX}px, #{offsetY}px)"
      else
        @$tooltip.css
          left: offsetX
          top: offsetY


  # Define the plugin
  $.fn.extend tooltip: (option, args...) ->
    @each ->
      $this = $(this)
      data = $this.data('tooltip')

      if !data
        $this.data 'tooltip', (data = new Tooltip(this, option))
      if typeof option == 'string'
        if not data[option]?
          console.log 'no such method or anything' if DEBUG
          return false

        else if typeof data[option] != 'function'
          console.log 'not a function, might be string, object or array etc' if DEBUG
          # return data[option]
          return false
        else
          console.log 'a function' if DEBUG
          data[option].apply(data, args)

) window.jQuery, window