Angular directive example (LiveScript)

group-padma.ls

angular.module \app.directives .directive \groupPadma, [
  \$templateCache
  \Lang
  \$log
  ($templateCache, Lang,$log)->
    restrict: \EA
    replace: yes
    transclude: no
    templateUrl: \group-padma-template
    priority: 10
    scope: {
      model: \=ngModel
    }

    link: ( $scope, $element, $attrs, $ngModel)->
      (debug = off) and console.group \group-padma
      log = $log.instance from: \groupPadma
                        , watchStyle: 'background-color: #ddd; color: #000; font-weight: bold; border: 1px solid gray;'


      [isArray, isObject, isString] = [angular.isArray, angular.isObject, angular.isString]

      RULES =
        padding:
          combined: <[ padding ]>
          separated: <[ paddingLeft paddingRight paddingTop paddingBottom ]>
        margin:
          combined: <[ margin ]>
          separated: <[ marginLeft marginRight marginTop marginBottom ]>
        border:
          combined: <[ borderStyle borderColor borderWidth]>
          separated: <[ borderStyle borderColor borderLeftWidth borderRightWidth borderTopWidth borderBottomWidth ]>
        radius:
          combined: <[ borderRadius ]>
          separated: <[ borderTopLeftRadius borderTopRightRadius borderBottomRightRadius borderBottomLeftRadius ]>

      PROPS = RULES |> values |> map (-> it |> values) |> flatten |> unique
      COMBINED = RULES |> values |> map (-> it.combined) |> flatten |> unique
      SEPARATED = RULES |> values |> map (-> it.separated) |> flatten |> unique
      PARENTS = PROPS |> map (-> [ it, (RULES |> find-root it)]) |> pairs-to-obj

      combined = -> !!$scope.combine[it]

      activeProps = ->
        RULES |> keys |> map ( ->
                               | $scope.combine[it] => RULES[it].combined
                               | otherwise => RULES[it].separated ) |> flatten |> unique

      clearDisabled = (obj)->
        activeState = activeProps!
        { [key, (if key in activeState then obj[key] else '')] for key of obj }

      getBlockStyle = (style)->
        props = <[ borderStyle borderColor ]> ++ (_ =
                                                   | $scope.combine.radius => RULES.radius.combined
                                                   | _ => RULES.radius.separated)

        { [ prop, value ] for prop in props when (value = $scope.group[prop])? }

      updateCombine = (model)->
        #log.log \updateCombine, model
        model |> keys |> each (prop)->
          if model[prop]? and model[prop] and parent = PARENTS[prop]
            $scope.combine[parent] = (prop in COMBINED)

      draggedProp = void
      startValue = void

      $scope <<<<
        lang: Lang.current!
        combine: void
          #padding: off
          #margin: off
          #border: on
          #radius: off
        group: {}
        blockStyle: {}
        selectedProp: no
        preInputFocus: (name)-> $scope.selectedProp = name

        preInputKeyUp: (model, $event)->
          #console.log model, $event
          #
          # TODO

        radDrag: ( direction, { deltaX, deltaY } )->
          return if not draggedProp

          delta = Math.sqrt(deltaX ^ 2 + deltaY ^ 2) |> Math.ceil |> ->
                                                           | deltaX > 0 and deltaY > 0 => it
                                                           | _ => 0 - it
          if delta?
            radius = (startValue + delta) |> between 0, 500
            $scope.group[ draggedProp ] = "#{radius}px"

        radDragStart: ( direction )->
          $scope.selectedProp = \radius

          if (draggedProp :=
                           | $scope.combine.radius is on => "borderRadius"
                           | direction? => "border#{direction}Radius"
                           | _ => void)
          then
            startValue := parseInt $scope.group[that]

      $scope.$watch \model, ((model, old)->
        @ |> log.watch
        #console.log model, old
        used = { [key, val] for key,val of model when (key in PROPS) }
        if not $scope.combine
          $scope.combine = {}
          used |> updateCombine
        $scope.group <<<< used

      ), on

      $scope.$watch \group, ((group, old)->
        return if not old
        $scope.model <<<< group
        $scope.blockStyle = group |> getBlockStyle
      ), on

      $scope.$watch \combine, ((current, old)->
        @ |> log.watch
        return if not old? or not current?
        groupClear = ( $scope.group |> clearDisabled )
        $scope.model <<<< groupClear
      ), on

      debug and console.groupEnd!
  ]