euscan-ng/euscanwww/htdocs/js/jquery.toggle.buttons.js

106 lines
2.9 KiB
JavaScript
Raw Normal View History

!function ($) {
"use strict";
// version: 1.3
$.fn.toggleButtons = function (opt) {
var $element
, $labelEnabled
, options
, active
, styleActive
, styleDisabled
, animationCss
, transitionSpeed = 0.05
, defaultSpeed = 0.05;
this.each(function () {
$element = $(this);
options = $.extend({}, $.fn.toggleButtons.defaults, opt);
$element.addClass('toggle-button');
$labelEnabled = $('<label></label>').attr('for', $element.find('input').attr('id'));
$element.append($labelEnabled);
if (options.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;
else
transitionSpeed = options.transitionSpeed;
animationCss = ["-webkit-", "-moz-", "-o-", ""];
$(animationCss).each(function () {
$element.find('label').css(this + 'transition', 'all ' + transitionSpeed + 's');
});
}
$element.css('width', options.width);
$element.attr("data-enabled", options.label.enabled === undefined ? "ON" : options.label.enabled);
$element.attr("data-disabled", options.label.disabled === undefined ? "OFF " : options.label.disabled);
active = $element.find('input').is(':checked');
if (!active)
$element.addClass('disabled');
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);
$element.on('click', function (e) {
if ($(e.target).is('input'))
return true;
e.stopPropagation();
$(this).find('label').click();
});
$element.find('label').on('click', function (e) {
e.stopPropagation();
e.preventDefault();
$element = $(this).parent();
$element
.delay(transitionSpeed * 500).queue(function () {
$(this).toggleClass('disabled')
.toggleClass(styleActive)
.toggleClass(styleDisabled)
.dequeue();
});
active = !($element.find('input').is(':checked'));
$element.find('input').attr('checked', active);
options.onChange($element, active, e);
});
});
};
$.fn.toggleButtons.defaults = {
onChange: function () {
},
width: 100,
animated: true,
transitionSpeed: undefined,
label: {
enabled: undefined,
disabled: undefined
},
style: {
enabled: undefined,
disabled: undefined
}
};
}($);