daniel daniel - 2 months ago 33
CoffeeScript Question

How do I write a better coffeescript class for a ngAnimation hook

I'm writing a bit of code to encapsulate an angular animation into a coffeescript class. I think it's ugly. any suggestion to make it shine?

I don't like the fact that I have to create the object first and return an object with addClass and removeClass pointing it indirectly to my instance methods.

html used

<div ng-hide="..." class="message">...</div>

the ugly code

class MessageAnimation
constructor: () ->
console.log 'MessageAnimation:init'

animation_up: (element, cl, done) ->
element.removeClass cl
element.velocity 'slideUp',
duration: 500
complete: () ->
element.addClass cl

animation_down: (element, cl, done) ->
element.velocity 'slideDown',
duration: 500
complete: () ->

angular.module('some_nice_app').animation '.message', () ->
@messageAnimation = new MessageAnimation()
return {
addClass: @messageAnimation.animation_up
removeClass: @messageAnimation.animation_down

....but maybe I don't need a class after all, because it's only instantiated ones. what do you think?

Answer Source

you probably do not need to create a class unless you need to create state you need to reference from other methods. AKA, In the example you've given there is no, this. reference in your methods. You can use classes as a convenient way to namespace methods, but in that case they are no different than a normal JS object. example:

class MessageAnimation
  # the prefix of @ places this method on the prototype as a 'static' method
  @animation_up: ->

angular.module('some_nice_app').animation '.message', () ->
  addClass: MessageAnimation.animation_up # note: CS will automatically return the object, your use of return is redundant but some people prefer to be explicit.
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download