jquery.classToggler.coffee

by rayfranco

HTML

<a id="click" href="#" data-target="#target">Set target to active</a>
<hr>
<div id="target">I am the target, and I am inactive</div>

CSS

* {
    color: blue;
}

.active {
    color: red;
}

CoffeeScript

$ = jQuery

defaults =
    target: null
    preventDefault: true
    className: 'active'
    onClick: null
    onToggle: null

class Toggler
    constructor: (@el, settings) ->
        @settings = $.extend {}, defaults, settings
        target = @el.data('target')
        if target
            @target = $(target)
        else if @settings.target
            @target = $(@settings.target)
        else
            @target = @el
        @el.on 'click', (e) =>
           e.preventDefault() if @settings.preventDefault
           @settings.onClick?(e,@el)
           @toggle()
    toggle: (active) ->
        @target.toggleClass @settings.className, active
        @settings.onToggle?(@el, @target, @target.hasClass(@settings.className))

(($) ->
  $.fn.classToggler = (settings) ->
    new Toggler(@, settings)
)(jQuery)

# Implementation example

$('#click').classToggler
    onToggle: (el, target, active) ->
        if active 
            el.text 'Set target to inactive' 
            target.text 'I am the target, and I am active'
        else
            el.text 'Set target to active'
            target.text 'I am the target, and I am inactive'