diff options
| -rw-r--r-- | euscanwww/htdocs/css/toggle_buttons.css | 160 | ||||
| -rw-r--r-- | euscanwww/htdocs/js/jquery.toggle.buttons.js | 289 |
2 files changed, 292 insertions, 157 deletions
diff --git a/euscanwww/htdocs/css/toggle_buttons.css b/euscanwww/htdocs/css/toggle_buttons.css index 29a5289..c884ba4 100644 --- a/euscanwww/htdocs/css/toggle_buttons.css +++ b/euscanwww/htdocs/css/toggle_buttons.css @@ -1,25 +1,17 @@ -/* line 7, ../sass/screen.scss */ +/* line 11, ../sass/bootstrap-toggle-buttons.scss */ .toggle-button { display: inline-block; cursor: pointer; - background: #0088CC; - background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #0088cc), color-stop(100%, #0055cc)); - background-image: -webkit-linear-gradient(top, #0088cc, #0055cc); - background-image: -moz-linear-gradient(top, #0088cc, #0055cc); - background-image: -o-linear-gradient(top, #0088cc, #0055cc); - background-image: linear-gradient(top, #0088cc, #0055cc); - -webkit-border-radius: 4px; - -moz-border-radius: 4px; - -ms-border-radius: 4px; - -o-border-radius: 4px; - border-radius: 4px; + -webkit-border-radius: 5px; + -moz-border-radius: 5px; + -ms-border-radius: 5px; + -o-border-radius: 5px; + border-radius: 5px; border: 1px solid; border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); position: relative; - bottom: -2px; text-align: left; - min-height: 25px; - max-height: 25px; + overflow: hidden; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; @@ -27,50 +19,46 @@ -ms-user-select: none; user-select: none; } -/* line 29, ../sass/screen.scss */ -.toggle-button:before, .toggle-button:after { - line-height: 25px; - font-weight: bold; - letter-spacing: .4px; +/* line 29, ../sass/bootstrap-toggle-buttons.scss */ +.toggle-button.deactivate { + filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50); + opacity: 0.5; + cursor: default !important; } -/* line 35, ../sass/screen.scss */ -.toggle-button:before { - color: #fefefe; - padding-left: 0%; - margin-left: 10px; - text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3); - content: attr(data-enabled); +/* line 32, ../sass/bootstrap-toggle-buttons.scss */ +.toggle-button.deactivate label, .toggle-button.deactivate span { + cursor: default !important; } -/* line 43, ../sass/screen.scss */ -.toggle-button.disabled { - background: #fefefe; - background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #fefefe), color-stop(100%, #e6e6e6)); - background-image: -webkit-linear-gradient(top, #fefefe, #e6e6e6); - background-image: -moz-linear-gradient(top, #fefefe, #e6e6e6); - background-image: -o-linear-gradient(top, #fefefe, #e6e6e6); - background-image: linear-gradient(top, #fefefe, #e6e6e6); - border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); +/* line 36, ../sass/bootstrap-toggle-buttons.scss */ +.toggle-button > div { + display: inline-block; + width: 150px; + position: absolute; + top: 0; } -/* line 47, ../sass/screen.scss */ -.toggle-button.disabled:before { - color: #555555; - padding-left: 50%; - margin-left: 10px; - text-shadow: 0 1px 0 rgba(255, 255, 255, 0.3); - content: attr(data-disabled); +/* line 41, ../sass/bootstrap-toggle-buttons.scss */ +.toggle-button > div.disabled { + left: -50%; +} +/* line 45, ../sass/bootstrap-toggle-buttons.scss */ +.toggle-button input[type=checkbox] { + display: none; } -/* line 54, ../sass/screen.scss */ -.toggle-button.disabled label { - margin-left: -1px; - left: 0%; +/* line 53, ../sass/bootstrap-toggle-buttons.scss */ +.toggle-button span, .toggle-button label { + cursor: pointer; + position: relative; + float: left; + display: inline-block; } -/* line 60, ../sass/screen.scss */ +/* line 60, ../sass/bootstrap-toggle-buttons.scss */ .toggle-button label { - cursor: pointer; - position: absolute; - width: 50%; - height: 25px; background: #fefefe; + margin-left: -4px; + margin-right: -4px; + border: 1px solid #E6E6E6; + margin-top: -1px; + z-index: 100; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #fefefe), color-stop(100%, #e6e6e6)); background-image: -webkit-linear-gradient(top, #fefefe, #e6e6e6); background-image: -moz-linear-gradient(top, #fefefe, #e6e6e6); @@ -81,23 +69,43 @@ -ms-border-radius: 4px; -o-border-radius: 4px; border-radius: 4px; - border: 1px solid; - border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); - top: -1px; - margin-left: 0; - left: 50%; } -/* line 75, ../sass/screen.scss */ -.toggle-button input[type=checkbox] { - display: none; +/* line 72, ../sass/bootstrap-toggle-buttons.scss */ +.toggle-button span { + color: #fefefe; + text-align: center; + font-weight: bold; + z-index: 1; } -/* line 84, ../sass/screen.scss */ -.toggle-button.primary:before, .toggle-button.info:before, .toggle-button.success:before, .toggle-button.warning:before, .toggle-button.danger:before { - color: white; - text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3); +/* line 78, ../sass/bootstrap-toggle-buttons.scss */ +.toggle-button span.labelLeft { + -moz-border-radius-topleft: 4px; + -webkit-border-top-left-radius: 4px; + border-top-left-radius: 4px; + -moz-border-radius-bottomleft: 4px; + -webkit-border-bottom-left-radius: 4px; + border-bottom-left-radius: 4px; + padding-left: 3px; } -/* line 90, ../sass/screen.scss */ -.toggle-button.primary { +/* line 83, ../sass/bootstrap-toggle-buttons.scss */ +.toggle-button span.labelRight { + -moz-border-radius-topright: 4px; + -webkit-border-top-right-radius: 4px; + border-top-right-radius: 4px; + -moz-border-radius-bottomright: 4px; + -webkit-border-bottom-right-radius: 4px; + border-bottom-right-radius: 4px; + color: black; + background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #fefefe), color-stop(100%, #e6e6e6)); + background-image: -webkit-linear-gradient(top, #fefefe, #e6e6e6); + background-image: -moz-linear-gradient(top, #fefefe, #e6e6e6); + background-image: -o-linear-gradient(top, #fefefe, #e6e6e6); + background-image: linear-gradient(top, #fefefe, #e6e6e6); + padding-right: 3px; +} +/* line 91, ../sass/bootstrap-toggle-buttons.scss */ +.toggle-button span.primary, .toggle-button span.labelLeft { + color: #fefefe; background: #0088cc; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #0088cc), color-stop(100%, #0055cc)); background-image: -webkit-linear-gradient(top, #0088cc, #0055cc); @@ -105,8 +113,9 @@ background-image: -o-linear-gradient(top, #0088cc, #0055cc); background-image: linear-gradient(top, #0088cc, #0055cc); } -/* line 94, ../sass/screen.scss */ -.toggle-button.info { +/* line 96, ../sass/bootstrap-toggle-buttons.scss */ +.toggle-button span.info { + color: #fefefe; background: #5bc0de; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #5bc0de), color-stop(100%, #2f96b4)); background-image: -webkit-linear-gradient(top, #5bc0de, #2f96b4); @@ -114,8 +123,9 @@ background-image: -o-linear-gradient(top, #5bc0de, #2f96b4); background-image: linear-gradient(top, #5bc0de, #2f96b4); } -/* line 99, ../sass/screen.scss */ -.toggle-button.success { +/* line 102, ../sass/bootstrap-toggle-buttons.scss */ +.toggle-button span.success { + color: #fefefe; background: #62c462; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #62c462), color-stop(100%, #51a351)); background-image: -webkit-linear-gradient(top, #62c462, #51a351); @@ -123,8 +133,9 @@ background-image: -o-linear-gradient(top, #62c462, #51a351); background-image: linear-gradient(top, #62c462, #51a351); } -/* line 104, ../sass/screen.scss */ -.toggle-button.warning { +/* line 108, ../sass/bootstrap-toggle-buttons.scss */ +.toggle-button span.warning { + color: #fefefe; background: #dbb450; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #dbb450), color-stop(100%, #f89406)); background-image: -webkit-linear-gradient(top, #dbb450, #f89406); @@ -132,8 +143,9 @@ background-image: -o-linear-gradient(top, #dbb450, #f89406); background-image: linear-gradient(top, #dbb450, #f89406); } -/* line 109, ../sass/screen.scss */ -.toggle-button.danger { +/* line 114, ../sass/bootstrap-toggle-buttons.scss */ +.toggle-button span.danger { + color: #fefefe; background: #ee5f5b; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ee5f5b), color-stop(100%, #bd362f)); background-image: -webkit-linear-gradient(top, #ee5f5b, #bd362f); diff --git a/euscanwww/htdocs/js/jquery.toggle.buttons.js b/euscanwww/htdocs/js/jquery.toggle.buttons.js index bea6465..363850e 100644 --- a/euscanwww/htdocs/js/jquery.toggle.buttons.js +++ b/euscanwww/htdocs/js/jquery.toggle.buttons.js @@ -1,96 +1,211 @@ !function ($) { "use strict"; - // version: 1.3 + // version: 2.2 + // by Mattia Larentis - follow me on twitter! @SpiritualGuru - $.fn.toggleButtons = function (opt) { + $.fn.toggleButtons = function (method) { var $element - , $labelEnabled - , options - , active - , styleActive - , styleDisabled - , animationCss + , $div , 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); - }); - }); + , methods = { + init: function (opt) { + this.each(function () { + var $spanLeft + , $spanRight + , options + , moving; + + $element = $(this); + $element.addClass('toggle-button'); + + options = $.extend({}, $.fn.toggleButtons.defaults, opt); + $(this).data('options', options); + + $spanLeft = $('<span></span>').addClass("labelLeft").text(options.label.enabled === undefined ? "ON" : options.label.enabled); + $spanRight = $('<span></span>').addClass("labelRight").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 ($element.find('input').is(':checked')) + $element.find('>div').css('left', "0"); + else $element.find('>div').css('left', "-50%"); + + if (options.animated) { + if (options.transitionSpeed !== undefined) + if (/^(\d*%$)/.test(options.transitionSpeed)) // is a percent value? + transitionSpeed = 0.05 * parseInt(options.transitionSpeed) / 100; + else + transitionSpeed = options.transitionSpeed; + } + else transitionSpeed = 0; + + $(this).data('transitionSpeed', transitionSpeed * 1000); + + + options["width"] /= 2; + + // width 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); + + // height of the bootstrap-toggle-button + $element + .css('height', options.height) + .find('span, label') + .css('height', options.height) + .filter('span') + .css('line-height', options.height + "px"); + + if ($element.find('input').is(':disabled')) + $(this).addClass('deactivate'); + + $element.find('span').css(options.font); + + + // enabled custom color + if (options.style.enabled === undefined) { + if (options.style.custom !== undefined && options.style.custom.enabled !== undefined) { + $spanLeft.css('color', options.style.custom.enabledColor); + if (options.style.custom.enabledGradient === undefined) + $spanLeft.css('background', options.style.custom.enabled); + else $.each(["-webkit-", "-moz-", "-o-", ""], function (i, el) { + $spanLeft.css('background-image', el + 'linear-gradient(top, ' + options.style.custom.enabled + ',' + options.style.custom.enabledGradient + ')'); + }); + } + } + else $spanLeft.addClass(options.style.enabled); + + // disabled custom color + if (options.style.disabled === undefined) { + if (options.style.custom !== undefined && options.style.custom.disabled !== undefined) { + $spanRight.css('color', options.style.custom.disabledColor); + if (options.style.custom.disabledGradient === undefined) + $spanRight.css('background', options.style.custom.disabled); + else $.each(["-webkit-", "-moz-", "-o-", ""], function (i, el) { + $spanRight.css('background-image', el + 'linear-gradient(top, ' + options.style.custom.disabled + ',' + options.style.custom.disabledGradient + ')'); + }); + } + } + else $spanRight.addClass(options.style.disabled); + + + var changeStatus = function ($this) { + $this.siblings('label').trigger('mousedown').trigger('mouseup').trigger('click'); + }; + + $spanLeft.on('click', function (e) { + changeStatus($(this)); + }); + $spanRight.on('click', function (e) { + changeStatus($(this)); + }); + + $('.toggle-button').find('input').on('change', function (e) { + var $element = $(this).parent() + , active = $(this).is(':checked') + , $toggleButton = $(this).closest('.toggle-button'); + + e.preventDefault(); + e.stopImmediatePropagation(); + + $element.animate({'left': active ? '0' : '-50%'}, $toggleButton.data('transitionSpeed')); + + options = $toggleButton.data('options'); + options.onChange($element, active, e); + }); + + $('.toggle-button').find('label').on('mousedown', function (e) { + moving = false; + + e.preventDefault(); + e.stopImmediatePropagation(); + + if ($(this).closest('.toggle-button').is('.deactivate')) + $(this).unbind('click'); + else { + $(this).on('mousemove', function (e) { + var $element = $(this).closest('.toggle-button') + , relativeX = e.pageX - $element.offset().left + , percent = ((relativeX / (options.width * 2)) * 100); + moving = true; + + if (percent < 25) + percent = 25; + else if (percent > 75) + percent = 75; + + $element.find('>div').css('left', (percent - 75) + "%") + }); + + $(this).on('click', function (e) { + var $target = $(e.target) + , $myCheckBox = $target.siblings('input'); + + e.stopImmediatePropagation(); + e.preventDefault(); + $(this).unbind('mouseleave'); + + if (moving) + if (parseInt($(this).parent().css('left')) < -25) + $myCheckBox.attr('checked', false); + else $myCheckBox.attr('checked', true); + else $myCheckBox.attr("checked", !$myCheckBox.is(":checked")); + + $myCheckBox.trigger('change'); + }); + + $(this).on('mouseleave', function (e) { + var $myCheckBox = $(this).siblings('input'); + + e.preventDefault(); + e.stopImmediatePropagation(); + + $(this).unbind('mouseleave'); + $(this).trigger('mouseup'); + + if (parseInt($(this).parent().css('left')) < -25) + $myCheckBox.attr('checked', false); + else $myCheckBox.attr('checked', true); + + $myCheckBox.trigger('change'); + }); + + $(this).on('mouseup', function (e) { + e.stopImmediatePropagation(); + e.preventDefault(); + $(this).unbind('mousemove'); + }); + } + }); + } + ) + ; + }, + toggleActivation: function () { + $(this).toggleClass('deactivate'); + } + }; + + if (methods[method]) + return methods[method].apply(this, Array.prototype.slice.call(arguments, 1)); + else if (typeof method === 'object' || !method) + return methods.init.apply(this, arguments); + else + $.error('Method ' + method + ' does not exist on jQuery.tooltip'); }; $.fn.toggleButtons.defaults = { onChange: function () { }, width: 100, + height: 25, + font: {}, animated: true, transitionSpeed: undefined, label: { @@ -99,7 +214,15 @@ }, style: { enabled: undefined, - disabled: undefined + disabled: undefined, + custom: { + enabled: undefined, + enabledGradient: undefined, + enabledColor: "#FFFFFF", + disabled: undefined, + disabledGradient: undefined, + disabledColor: "#FFFFFF" + } } }; }($); |