toggle button

html.html

<div class="toggle-button respond-toggle" data-service="respond">
  <span class="toggle-button-switch"></span>
  <span class="toggle-button-label" data-off="no" data-on="yes"></span>
  <%= hidden_field_tag "respond", "false", :'data-service' => "respond" %>
</div>

toggle-button.coffee

# plugin to change input field when toggle button is changed

(($) ->
  defaultOptions =
    buttonParentSelector: false

  $.fn.toggleButton = (options) ->
    opts = $.extend({}, defaultOptions, options)

    @each ->
      $button = $(this)

      offLabel = 'off'
      onLabel = 'on'
      $buttonLabel = $button.find('.toggle-button-label')

      if $buttonLabel.data('off')
        offLabel = $buttonLabel.data('off')

      if $buttonLabel.data('on')
        onLabel = $buttonLabel.data('on')

      if $button.hasClass 'active'
        $button.find('.toggle-button-label').html onLabel
      else
        $button.find('.toggle-button-label').html offLabel

      # Toggle button click
      $button.on 'click', ->
        if opts.buttonParentSelector
          $parent = $(opts.buttonParentSelector)
        else
          $parent = $(this).parent()

        _toggleService($button, $parent)

      # Label click
      $button.parent().find('label[for="' + $(this).data('service') + '"]').on 'click', ->
        if opts.buttonParentSelector
          $parent = $(opts.buttonParentSelector)
        else
          $parent = $(this).parent()

        _toggleService($button, $parent)


  _toggleService = ($button, buttonParent) ->
    offLabel = 'off'
    onLabel = 'on'
    $buttonLabel = $button.find('.toggle-button-label')

    if $buttonLabel.data('off')
      offLabel = $buttonLabel.data('off')

    if $buttonLabel.data('on')
      onLabel = $buttonLabel.data('on')
      
    if $button.hasClass "active"
      $button.removeClass "active"
      buttonParent.find('input[data-service="' + $button.data("service") + '"]').val("false").trigger('change')
      $button.find('.toggle-button-label').html offLabel
    else
      $button.addClass "active"
      buttonParent.find('input[data-service="' + $button.data("service") + '"]').val("true").trigger('change')
      $button.find('.toggle-button-label').html onLabel
      $button.trigger('toggleOn')
)(jQuery)

toggle-button.scss

@import 'sass-toolbox';

$share_button_outer_width: 55px;
$share_button_width: 24px;
$share_button_height: 25px;

.toggle-button {
  @include antialias;
  @include border-radius($share_button_width);
  @include box-sizing(inherit);
  display: inline-block;
  border: none;
  cursor: pointer;
  vertical-align: middle;
  background-color: $light-grey;
  width: $share_button_outer_width;
  height: $share_button_height;
  margin-left: 10px;
  position: relative;
  line-height: 1;

  .toggle-button-label{
    position: absolute;
    color: #fff;
    font-family: $tisa;
    font-size: 11px;
    font-weight: normal;
    text-transform: uppercase;
    left: 29px;
    top: 7px;
  }

  .toggle-button-switch {
    @include border-radius(50px);
    @include box-shadow(2px 0px 0px $inactive-grey-shadow);
    @include transition(all 240ms ease);
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    display: block;
    width: $share_button_width;
    height: $share_button_height;
    background-color: $inactive-grey;
    background-repeat: no-repeat;
    background-position: center center;
  }

  &.pintrest {
    .toggle-button-switch {
      background-image: url(image-path('share/pintrest.svg'));
    }
  }
  &.tumblr {
    .toggle-button-switch {
      background-image: url(image-path('share/tumblr.svg'));
    }
  }
  &.twitter {
    .toggle-button-switch {
      background-image: url(image-path('share/twitter.svg'));
    }
  }
  &.facebook {
    .toggle-button-switch {
      background-image: url(image-path('share/facebook.svg'));
    }
  }

  &.active {
    .toggle-button-switch {
      background-color: $red;
      @include box-shadow(-2px 0px 0px $red-shadow);
      left: $share_button_outer_width - $share_button_width;
    }
    .toggle-button-label{
      left: 7px;
    }
  }
}