AngularJS | Directive | Collapsable section

collapsable_section.coffee

'use strict'

# Usage:
#  <collapsable-section section="'Support pages settings *'" description="'Placeholders: {{c}} - Calendar name, {{n}} - Landing name, {{l}} - Landing title'" start-collapsed="true">
#    I am the content of this section!
#  </collapsable-section>

app = angular.module 'app'

app.directive 'collapsableSection', ->
  restrict   : 'E'
  replace    : true
  transclude : true
  scope      :
    startCollapsed : '='
    section        : '='
    description    : '='
  template   : [
    '<div>'
      '<h4 ng-click="collapse = !collapse">'
        '<i class="text-center fa" style="width: 25px" ng-class="{ \'fa-chevron-down\': !collapse, \'fa-chevron-right\': collapse }"></i>'
        '{{ section }}'
      '</h4>'
      '<div class="help-block">'
        '{{ description }}'
      '</div>'
      '<hr/>'
      '<div collapse="collapse">'
        '<ng-transclude></ng-transclude>'
      '</div>'
    '</div>'
  ].join('\n')

  link: ($scope, element, attrs) ->
    $scope.collapse = $scope.startCollapsed;