ng-slide-down.coffee

"use strict"
angular.module("ng-slide-down", []).directive "ngSlideDown", ($timeout )->
  getTemplate = (tElement, tAttrs)->
    if tAttrs.lazyRender != undefined
      "<div ng-if='lazyRender' ng-transclude></div>"
    else
      "<div ng-transclude></div>"

  link = (scope, element, attrs, ctrl, transclude) ->
    duration = attrs.duration || 1
    timingFunction = attrs.timingFunction || "ease-in-out"
    elementScope = element.scope()
    emitOnClose = attrs.emitOnClose
    onClose = attrs.onClose
    lazyRender = attrs.lazyRender != undefined
    closePromise = null
    openPromise = null

    getHeight = (passedScope)->
      height = 0
      children = element.children()
      for c in children
        height += c.clientHeight
      "#{height}px"

    show = ()->
      $timeout.cancel(closePromise) if closePromise
      scope.lazyRender = true if lazyRender
      $timeout ->
        $timeout.cancel(openPromise) if openPromise
        element.css {
          height: getHeight()
        }

        $timeout ->
          element.css {
            overflow: "hidden"
            transitionProperty: "height"
            transitionDuration: "#{duration}s"
            transitionTimingFunction: timingFunction
          }

          openPromise = $timeout ()->
            element.css {
              overflow: "visible"
              transition: "none",
              height: "auto"
            }
          , duration*1000, false
        , 0, false
      ,0, false


    hide = ()->
      $timeout.cancel(openPromise) if openPromise
      element.css {
        overflow: "hidden"
        transitionProperty: "height"
        transitionDuration: "#{duration}s"
        transitionTimingFunction: timingFunction
        height: '0px'
      }
      if emitOnClose || onClose || lazyRender
        closePromise = $timeout ()->
          scope.$emit emitOnClose, {} if emitOnClose
          elementScope.$eval(onClose) if onClose
          scope.lazyRender = false if lazyRender
        , duration*1000

    scope.$watch 'expanded', (value, oldValue)->
      if value
        $timeout show
      else
        if value?
          element.css {
            height: getHeight()
          }
          element[0].clientHeight # Force reflow so the animation triggers reliably
        $timeout hide, 0, false

  return {
    restrict: 'A'
    scope: {
      expanded: '=ngSlideDown'
    }
    transclude: true
    link: link
    template: (tElement, tAttrs)-> getTemplate(tElement, tAttrs)
  }