Skip to content

Commit

Permalink
fix animation... maybe...
Browse files Browse the repository at this point in the history
  • Loading branch information
@nostalgiaz
nostalgiaz committed Sep 13, 2012
1 parent bfcf3e0 commit 0069f18
Show file tree
Hide file tree
Showing 4 changed files with 227 additions and 209 deletions.
2 changes: 1 addition & 1 deletion examples/index.html
View file
Expand Up @@ -55,7 +55,7 @@ <h3>Basic</h3>
<div class="span4">
<div style="display: inline-block; width: 100px; overflow: hidden; height: 20px; position: relative;">
<div style="display: inline-block; width: 150px; position: absolute; top: 0; left: 0;">
<span style="display: inline-block; width: 50px; background: #8a2be2; float: left;">ON</span>
<span style="">ON</span>
<label style="display: inline-block; width: 50px; height: 20px; margin:0; background: red; float: left;"></label>
<span style="display: inline-block; width: 50px; background: green; float: left;">OFF</span>
<input type="checkbox" value="value1" checked="checked" style="display: none">
Expand Down
82 changes: 56 additions & 26 deletions static/js/jquery.toggle.buttons.js
View file
Expand Up @@ -5,7 +5,7 @@

$.fn.toggleButtons = function (method) {
var $element
, $labelEnabled
, $div
, options
, active
, styleActive
Expand All @@ -16,21 +16,26 @@
, methods = {
init: function (opt) {
this.each(function () {
var $spanLeft
, $spanRight;

$element = $(this);

options = $.extend({}, $.fn.toggleButtons.defaults, opt);

$element.attr("data-enabled", options.label.enabled === undefined ? "ON" : options.label.enabled);
$element.attr("data-disabled", options.label.disabled === undefined ? "OFF " : options.label.disabled);

$element.addClass('toggle-button');

$labelEnabled = $('<label></label>').attr('for', $element.find('input').attr('id'));
$element.append($labelEnabled);
$spanLeft = $('<span></span>').text(options.label.enabled === undefined ? "ON" : options.label.enabled);
$spanRight = $('<span></span>').text(options.label.disabled === undefined ? "OFF " : options.label.disabled);
// html layout
$div = $element.find('input').wrap($('<div></div>')).parent();
$div.append($spanLeft);
$div.append($('<label></label>').attr('for', $element.find('input').attr('id')));
$div.append($spanRight);

if (options.animated) {
$element.addClass('toggle-button-animated');

// $element.addClass('toggle-button-animated');
//
if (options.transitionSpeed !== undefined)
if (/^(\d*%$)/.test(options.transitionSpeed)) // is a percent value?
transitionSpeed = defaultSpeed * parseInt(options.transitionSpeed) / 100;
Expand All @@ -39,11 +44,15 @@

animationCss = ["-webkit-", "-moz-", "-o-", ""];
$(animationCss).each(function () {
$element.find('label').css(this + 'transition', 'all ' + transitionSpeed + 's');
$element.find('>div').css(this + 'transition', 'all ' + transitionSpeed + 's');
});
}

$element.css('width', options.width);
// size of the bootstrap-toggle-button
$element
.css('width', options.width * 2)
.find('>div').css('width', options.width * 3)
.find('>span, >label').css('width', options.width);

active = $element.find('input').is(':checked');

Expand All @@ -53,13 +62,8 @@
if ($element.find('input').is(':disabled'))
$element.addClass('deactivate');

styleActive = options.style.enabled === undefined ? "" : options.style.enabled;
styleDisabled = options.style.disabled === undefined ? "" : options.style.disabled;

if (active && styleActive !== undefined)
$element.addClass(styleActive);
if (!active && styleDisabled !== undefined)
$element.addClass(styleDisabled);
$spanLeft.addClass(options.style.enabled === undefined ? "" : options.style.enabled)
$spanRight.addClass(options.style.disabled === undefined ? "" : options.style.disabled)

$element.on('click', function (e) {
if ($(e.target).is('input'))
Expand All @@ -75,18 +79,20 @@
e.preventDefault();
console.log('click2')

$element = $(this).parent();
$element = $(this).closest('.toggle-button');

if ($element.is('.deactivate'))
return true;

$element
.delay(transitionSpeed * 500).queue(function () {
$(this).toggleClass('disabled')
.toggleClass(styleActive)
.toggleClass(styleDisabled)
.dequeue();
});

$element.find('>div').toggleClass('disabled')

// $element
// .queue(function () {
// .toggleClass(styleActive)
// .toggleClass(styleDisabled)
// .dequeue();
// });

active = !($element.find('input').is(':checked'));

Expand All @@ -104,8 +110,32 @@
$element.find('label').on('mousedown', function (e) {
e.stopPropagation();
e.preventDefault();
console.log('mouse down');
$(this).unbind('click');
//
$(this).on('mousemove', function (e) {
var relativeX = e.pageX - $(this).closest('.toggle-button').offset().left;
// console.log(relativeX)
var percent = (relativeX / (options.width * 2)) * 100;
// console.log(percent)
if (percent < 16)
percent = 16;
else if (percent > 67)
percent = 67;
//
// console.log(percent)
$element.find('>div').css('left', percent-(200/3) + "%")
});

$(this).on('mouseleave', function() {
var $div = $element.find('>div');
$(this).unbind('mousemove');

if (parseInt($div.css('left')) < -25)
$div.css('left', "-50%");
else $div.css('left', "0");

});
//
$(this).bind('click', function () {
console.log('click');
$(this).unbind('click');
Expand Down
231 changes: 128 additions & 103 deletions static/sass/bootstrap-toggle-buttons.scss
View file
Expand Up @@ -3,120 +3,145 @@
$border: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
$white: #FEFEFE;
$blue: #0088CC;
$height: 25px;

.toggle-button {
display: inline-block;
cursor: pointer;
background: #0088CC;
@include background-image(linear-gradient(top, $blue, #0055CC));
@include border-radius(4px);
border: 1px solid;
border-color: $border;
position: relative;
bottom: -2px;
text-align: left;
min-height: 25px;
max-height: 25px;
display: inline-block;
cursor: pointer;
//background: #0088CC;
//@include background-image(linear-gradient(top, $blue, #0055CC));
@include border-radius(4px);
border: 1px solid;
border-color: $border;
position: relative;
//bottom: -2px;
text-align: left;
min-height: $height;
max-height: $height;
overflow: hidden;

// disable text selection highlighting
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
// disable text selection highlighting
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;

&:before, &:after {
line-height: 25px;
font-weight: bold;
letter-spacing: .4px;
}
//&:before, &:after {
// line-height: 25px;
// font-weight: bold;
// letter-spacing: .4px;
//}

&:before {
color: $white;
padding-left: 0%;
margin-left: 10px;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3);
content: attr(data-enabled);
}
//&:before {
// color: $white;
// padding-left: 0%;
// margin-left: 10px;
// text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3);
// content: attr(data-enabled);
//}

&.disabled {
background: $white;
@include background-image(linear-gradient(top, $white, #E6E6E6));
border-color: $border;
&:before {
color: #555555;
padding-left: 50%;
margin-left: 10px;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.3);
content: attr(data-disabled);
// @include background-image(linear-gradient(top, $white, #E6E6E6));
// border-color: $border;
// &:before {
// color: #555555;
// padding-left: 50%;
// margin-left: 10px;
// text-shadow: 0 1px 0 rgba(255, 255, 255, 0.3);
// content: attr(data-disabled);
// }
// label {
// margin-left: -1px;
// left: 0%;
// }
//}

&.deactivate {
@include opacity(0.5);
cursor: default !important;
label {
cursor: default !important;
}
}
label {
margin-left: -1px;
left: 0%;
> div {
display: inline-block;
width: 150px;
position: absolute;
top: 0;
left: 0;
&.disabled {
left: -50%;
}
}
}
input[type=checkbox] {
display: none;

&.deactivate {
@include opacity(0.5);
cursor: default !important;
label {
cursor: default !important;
}
}

label {
cursor: pointer;
position: absolute;
width: 50%;
height: 25px;
background: $white;
@include background-image(linear-gradient(top, $white, #E6E6E6));
@include border-radius(4px);
border: 1px solid;
border-color: $border;
top: -1px;
margin-left: 0;
left: 50%;
}
//debug
//position:absolute;
//top: 0;
//right: -20px;
}

input[type=checkbox] {
display: none;
//debug
//position:absolute;
//top: 0;
//right: -20px;
}
span, label {
display: inline-block;
background: #8a2be2;
float: left;
height: $height;
}

&.primary, &.info, &.success, &.warning, &.danger {
&:before {
color: white;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3);
label {
cursor: pointer;
background: $white;
@include background-image(linear-gradient(top, $white, #E6E6E6));
//position: absolute;
//width: 50%;
//height: 25px;
//background: $white;
//@include background-image(linear-gradient(top, $white, #E6E6E6));
//@include border-radius(4px);
//border: 1px solid;
//border-color: $border;
//top: -1px;
//margin-left: 0;
//left: 50%;
}
}

&.primary {
background: $blue;
@include background-image(linear-gradient(top, $blue, #0055CC));
}
&.info {
$startColor: #5BC0DE;
background: $startColor;
@include background-image(linear-gradient(top, $startColor, #2F96B4));
}
&.success {
$startColor: #62C462;
background: $startColor;
@include background-image(linear-gradient(top, $startColor, #51A351));
}
&.warning {
$startColor: #DBB450;
background: $startColor;
@include background-image(linear-gradient(top, $startColor, #F89406));
}
&.danger {
$startColor: #EE5f5B;
background: $startColor;
@include background-image(linear-gradient(top, $startColor, #BD362F));
}
//&.primary, &.info, &.success, &.warning, &.danger {
// &:before {
// color: white;
// text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3);
// }
//}
span {
color: $white;
text-align: center;
font-weight: bold;
line-height: $height;

&.primary {
background: $blue;
@include background-image(linear-gradient(top, $blue, #0055CC));
}
&.info {
$startColor: #5BC0DE;
background: $startColor;
@include background-image(linear-gradient(top, $startColor, #2F96B4));
}
&.success {
$startColor: #62C462;
background: $startColor;
@include background-image(linear-gradient(top, $startColor, #51A351));
}
&.warning {
$startColor: #DBB450;
background: $startColor;
@include background-image(linear-gradient(top, $startColor, #F89406));
}
&.danger {
$startColor: #EE5f5B;
background: $startColor;
@include background-image(linear-gradient(top, $startColor, #BD362F));
}
}
}

0 comments on commit 0069f18

Please sign in to comment.