Angular colorpicker service (LiveScript)

colorpicker.ls

angular.module \app.services .factory \Colorpicker, [
  \$templateCache
  \$rootScope
  \$appScope
  \$compile
  \$timeout
  \$log
  ($templateCache, $rootScope, $appScope, $compile, $timeout, $log)->
    ->

      log = $log.instance from: \Colorpicker

      constructorColor = \orange

      $scope = $rootScope.$$childHead.$new!

      element = ($ $templateCache.get \colorpicker-template).appendTo $ \body

      $scope |> ($compile element)

      [hue, sat, val] = [0, 0, 0]

      [elHue, elSatVal, elDragger, elSlider, elInput] =
        [ (element.find \.color-hue)
          (element.find \.color-sat-val)
          (element.find \.color-dragger)
          (element.find \.color-slider)
          (element.find \.color-css-value) ]

      [hueSize, satValSize, draggerSize, sliderSize ] =
        [ elHue.width!
          elSatVal.height!
          elDragger.width!
          elSlider.width! ]

      [sliderX, sliderStartX, draggerX, draggerY, dragStartX, dragStartY] =
        [null,null,null,null, null, null]

      keepInside = -> minimum [hueSize, maximum [0, it]]

      #
      # SCOPE
      #

      $scope <<<<
        palette: []
        shown: no
        element: element
        elStyle: {}
        animation: no
        sliderStyle: {}
        draggerStyle: {}
        opacity: 1
        set: !(color)->
          if not color
            [hue,sat,val] := [0.34, 0, 1]
            $scope.opacity = 1
            $scope.inputValue = \none
          else if color is \transparent
            [hue,sat,val] := [0,0,0]
            $scope.inputValue = \transparent
            $scope.opacity = 0
          else
            color = "#color"
            if (parsed = new Color.parse color)?
              if(hsv = parsed.hsvData?!)
                [hue,sat,val] := hsv
                $scope.opacity = if parsed.channels[3]? then that else 1

        show: !->
          $scope.shown = yes

        hide: !->
          $scope.shown = no

        toggle: !-> $scope.shown = not $scope.shown

        select: !(color)-> $scope.callback? color

        hueMousedown: !(event)->
          event = event |> normalizeEvent
          sliderX := sliderStartX := keepInside (event.offsetX - sliderSize)

        satValMousedown: !(event)->
          event = event |> normalizeEvent
          [draggerX, draggerY] := [dragStartX, dragStartY] :=
            [ event.offsetX - draggerSize
              event.offsetY - draggerSize ]

        satValDrag: (event,drag)-> [draggerX, draggerY] :=
          [ keepInside (dragStartX + drag.offsetX)
            keepInside (dragStartY + drag.offsetY) ]

        draggerDrag: (event,drag)-> [draggerX, draggerY] :=
            [ keepInside drag.offsetX
              keepInside drag.offsetY ]

        hueDrag: !(event,drag)-> sliderX := keepInside (sliderStartX + drag.offsetX)

        sliderDrag: !(event,drag)-> sliderX := keepInside drag.offsetX

        inputChange: !(event)->
          color = (new Color.parse $scope.inputColor)
          if color?.hsvData?! then
            [hue,sat,val] := color.hsvData!
            $scope.opacity = if color.channels[3]? then that else 1

        keyDown: !($event)->
            | $event.which is 13 => $scope.select $scope.inputColor
            | _ => on
      #
      # WATCHERS
      #

      $scope.$watch \shown, ->
        if $scope.shown
          #$timeout (-> elInput.focus!), 0 # [?] without $timeout cause error
          $appScope.lastClickedElement = element
      , on

      $scope.$watch (-> sliderX), ->
        hue := keepInside(sliderX) / hueSize
      , on

      $scope.$watch (-> draggerX + draggerY), ->
        [sat, val] := [
          (keepInside(draggerX) / satValSize)
          ((satValSize - keepInside(draggerY)) / satValSize)
        ]
      , on

      $scope.$watch (-> hue + sat + val + $scope.opacity), ->

        base = new Color.hsv hue, 1, 1
        color = new Color.hsv hue, sat, val
        color.channels[3] = $scope.opacity
        input =
              | $scope.inputColor => (new Color.parse $scope.inputColor)
              | _ => no

        $scope <<<<
          currentColor: _ =
                          | $scope.opacity == 0 => \transparent
                          | $scope.opacity < 1 => color.rgba!
                          | _ => color.hexTriplet!

          baseColor: base.hexTriplet!

        if not input or not input.channels?[3]? or ( 0 + input.channels[3] + sum input.hsvData?! ) != ( 0 + sum [hue,sat,val,$scope.opacity] )
          $scope.inputColor = $scope.currentColor

        $scope.sliderStyle <<<< left: hue * hueSize

        $scope.draggerStyle <<<<
          left: sat * satValSize
          top: satValSize - val * satValSize
      , on

      $scope.$watch (-> hue + sat + val), ->
        if +it > 0 and +$scope.opacity == 0
          $scope.opacity = 1
      , on

      $appScope.$on \popupHide ->
        $scope.hide!

      $appScope.$on \hideControls ->
        $scope.hide!

      $appScope.$watch \template.paletteColors, (pal)->
        @ |> log.watch
        if pal?.length>0
          $scope.palette = [ \transparent ] ++ (pal |> reject -> it is constructorColor)
      , on

      $appScope.$on \popupClicked (e, event)->
        target = $ event?.target

        if not (target .is \.select_color or target.parents \.select_color .length)
          $scope.hide!


      return $scope
]