Directives

directives.coffee

'use strict'

define [
  'jquery'
  'angular'

], ($, Angular) ->

  ###*
  # Registry of directives
  # @namespace App.directives
  # @memberof App
  ###
  Angular.module 'App.directives', []

  .directive 'imageThumb', [ () ->
    ###*
    # Change image thumbnail when category image path changes.
    # Using isolated scope of element attribute.
    # @name imageThumb
    # @memberof App.directives
    ###
    return {
      restrict: 'A'
      replace: true
      scope:
        imageThumb: '=imageThumb'
      link: (scope, elem) ->
        scope.$watch 'imageThumb', (value) ->
          if value
            elem.css(
              'background-image',
              'url("http://resources.zumtobel.com/PDB/resources/Photo/2011_products_208_L4_L5/' + value + '.jpg")')
            elem.find('span').css('visibility', 'hidden')
          else
            elem.css('background-image', 'none')
            elem.find('span').css('visibility', 'visible')
          return
        return
    }
  ]

  .directive 'overlay', [ () ->
    ###*
    # Calculate position of overlays and display
    # @name overlay
    # @memberof App.directives
    ###
    return {
      restrict: 'E'
      replace: true
      link: (scope, elem, attr) ->
        scope.$watch attr.ngShow, (value) ->
          $elem = $(elem)
          $prev = $('[overlay-toggle="' + attr.overlay + '"]')
          position = attr.position
          offset = Number attr.offset

          if value

            $elem.removeClass('ng-hide')

            if position is 'top'
              top = $prev.offset().top - $elem.outerHeight() - offset
              left = $prev.offset().left - ($elem.outerWidth() / 2) + ($prev.outerWidth() / 2)
            if position is 'right'
              top = $prev.offset().top - ($elem.outerHeight() / 2) + ($prev.outerHeight() / 2)
              left = $prev.offset().left + $prev.outerWidth() + offset
            if position is 'bottom'
              top = $prev.offset().top + $prev.outerHeight() + offset
              left = $prev.offset().left - ($elem.outerWidth() / 2) + ($prev.outerWidth() / 2)
            if position is 'left'
              top = $prev.offset().top - ($elem.outerHeight() / 2) + ($prev.outerHeight() / 2)
              left = $prev.offset().left - $elem.outerWidth() - offset

            $elem.css {
              top: top + 'px'
              left: left + 'px'
            }
          return
        ###
        # Hide all overlays when window object is being clicked
        ###
        scope.$on 'window::click::hideOverlays', () ->
          if scope.overlay is attr.overlay
            scope.overlay = false
            scope.$apply()
          return
        return
    }
  ]

  .directive 'selectOnClick', [ () ->
    ###*
    # Select content of input field
    # @name selectOnClick
    # @memberof App.directives
    ###
    return {
      restrict: 'A'
      link: (scope, elem) ->
        elem.on 'click', () ->
          this.select()
          return
        return
    }
  ]

  .directive 'invalidValue', [ () ->
    ###*
    # Quickcalc sends a HTTP 500 Internal Server Error response when an invalid value
    # was entered in the input fields. Therefore this directive listens to the emitted message
    # as part of the error handling to reset the value of the input field.
    # @name invalidValue
    # @memberof App.directives
    ###
    return {
      restrict: 'A'
      require: 'ngModel'
      link: (scope, elem, attr, ctrl) ->
        currentValue = undefined

        elem.on 'focus', () ->
          currentValue = elem.val()
          return

        scope.$on 'quickcalc::value::invalid', () ->
          # Update the model with new value and render
          ctrl.$setViewValue(currentValue) if currentValue
          ctrl.$render()
          scope.$apply()

          return

        return
    }
  ]