Skip to content

Instantly share code, notes, and snippets.

@fabianmu
Last active August 29, 2015 14:10
Show Gist options
  • Save fabianmu/0d7445546d57d7a50292 to your computer and use it in GitHub Desktop.
Save fabianmu/0d7445546d57d7a50292 to your computer and use it in GitHub Desktop.
toggle button
<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>
# 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)
@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;
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment