From a5b714809808c25e54631a02b41ace13195e763f Mon Sep 17 00:00:00 2001 From: "Chakib (spike) Benziane" Date: Fri, 11 May 2012 20:21:30 +0200 Subject: [PATCH] fix hover text in toggle mode --- example/css/bootstrap-magic-button.css | 5 ++-- example/index.html | 4 +-- example/js/bootstrap-magic-button.js | 39 +++++++++++++++++--------- js/bootstrap-magic-button.js | 39 +++++++++++++++++--------- 4 files changed, 57 insertions(+), 30 deletions(-) diff --git a/example/css/bootstrap-magic-button.css b/example/css/bootstrap-magic-button.css index c47a12e..b14d577 100644 --- a/example/css/bootstrap-magic-button.css +++ b/example/css/bootstrap-magic-button.css @@ -1,11 +1,12 @@ button[class^=magicBtn] { + font-weight: bold; display: none; position: absolute; border-style: none; background: none; background-repeat: no-repeat; width: 47px; - height: 32px; + height: 38px; opacity: 0.7; } @@ -16,7 +17,7 @@ button[class*="magicBtn-active"] { background: none; background-repeat: no-repeat; width: 47px; - height: 32px; + height: 38px; opacity: 1; } diff --git a/example/index.html b/example/index.html index 231e8cc..1f3e7a3 100644 --- a/example/index.html +++ b/example/index.html @@ -179,8 +179,8 @@

Just put the icons inside the button

- - + +
diff --git a/example/js/bootstrap-magic-button.js b/example/js/bootstrap-magic-button.js index 558ffe8..00d6cc2 100644 --- a/example/js/bootstrap-magic-button.js +++ b/example/js/bootstrap-magic-button.js @@ -50,7 +50,11 @@ function ($) { this.$width = this.$element.outerWidth() // current button image and toggle image if there is - this.$imgUrl = 'url("' + this.$element.data('image') + '")' + var imgUrl = this.$element.data('image') + if (typeof(imgUrl) !== 'undefined') + this.$imgUrl = 'url("' + this.$element.data('image') + '")' + else + this.$imgUrl = false var toggleimg if (toggleimg = this.$element.data('toggle-image')) this.$toggleImgUrl = 'url("' + toggleimg + '")' @@ -159,13 +163,21 @@ function ($) { toggle: function () { var $el = this.$element if (!this.$isToggled) { - $el.css('background-image', this.$toggleImgUrl) + if (this.$imgUrl) + $el.css('background-image', this.$toggleImgUrl) this.$isToggled = true $el.addClass('magicBtn-active') + $el.css('padding-left', function(index,value){ + return (parseInt(value) + 4) + 'px'; + }); } else { - $el.css('background-image', this.$imgUrl) + if (this.$imgUrl) + $el.css('background-image', this.$imgUrl) this.$isToggled = false $el.removeClass('magicBtn-active') + $el.css('padding-left', function(index,value){ + return (parseInt(value) - 4) + 'px'; + }); } } @@ -174,14 +186,18 @@ function ($) { _hoverInCallback: function () { var obj = $(this).data('magicBtn') var o = obj.options + var hoverText = $(this).attr('value') + var tmpHoverText; + if (obj.$isToggled){ + tmpHoverText = $(this).data('toggle-text') + if (typeof(tmpHoverText) !== 'undefined') + hoverText = tmpHoverText + } if (!obj.$isToggled) { - if (o.hoverText){ - //$(this).find('i').hide() - $('' + $(this).attr('value') + ''). - hide().appendTo($(this)).fadeIn() - } $(this).toggleClass('magicBtn-active') } + $('' + hoverText + ''). + hide().appendTo($(this)).fadeIn() } , @@ -190,12 +206,9 @@ function ($) { var o = obj.options var $el = $(this) if ((!obj.$isToggled) && (!$el.is(':hover')) && ($el.hasClass('magicBtn-active'))){ - if (o.hoverText){ - $(this).find('.value').fadeOut('slow').remove() - $(this).find('i').show(100) - } $(this).toggleClass('magicBtn-active', 100) } + $(this).find('.value').fadeOut('slow').remove() } , @@ -229,7 +242,7 @@ function ($) { if (option == 'fadeIn') data.fadeIn() if (option == 'fadeOut') data.fadeOut() if (option == 'hide') data.hide() - else if (option) data.setState(option) + //else if (option) data.setState(option) }) } diff --git a/js/bootstrap-magic-button.js b/js/bootstrap-magic-button.js index 558ffe8..00d6cc2 100644 --- a/js/bootstrap-magic-button.js +++ b/js/bootstrap-magic-button.js @@ -50,7 +50,11 @@ function ($) { this.$width = this.$element.outerWidth() // current button image and toggle image if there is - this.$imgUrl = 'url("' + this.$element.data('image') + '")' + var imgUrl = this.$element.data('image') + if (typeof(imgUrl) !== 'undefined') + this.$imgUrl = 'url("' + this.$element.data('image') + '")' + else + this.$imgUrl = false var toggleimg if (toggleimg = this.$element.data('toggle-image')) this.$toggleImgUrl = 'url("' + toggleimg + '")' @@ -159,13 +163,21 @@ function ($) { toggle: function () { var $el = this.$element if (!this.$isToggled) { - $el.css('background-image', this.$toggleImgUrl) + if (this.$imgUrl) + $el.css('background-image', this.$toggleImgUrl) this.$isToggled = true $el.addClass('magicBtn-active') + $el.css('padding-left', function(index,value){ + return (parseInt(value) + 4) + 'px'; + }); } else { - $el.css('background-image', this.$imgUrl) + if (this.$imgUrl) + $el.css('background-image', this.$imgUrl) this.$isToggled = false $el.removeClass('magicBtn-active') + $el.css('padding-left', function(index,value){ + return (parseInt(value) - 4) + 'px'; + }); } } @@ -174,14 +186,18 @@ function ($) { _hoverInCallback: function () { var obj = $(this).data('magicBtn') var o = obj.options + var hoverText = $(this).attr('value') + var tmpHoverText; + if (obj.$isToggled){ + tmpHoverText = $(this).data('toggle-text') + if (typeof(tmpHoverText) !== 'undefined') + hoverText = tmpHoverText + } if (!obj.$isToggled) { - if (o.hoverText){ - //$(this).find('i').hide() - $('' + $(this).attr('value') + ''). - hide().appendTo($(this)).fadeIn() - } $(this).toggleClass('magicBtn-active') } + $('' + hoverText + ''). + hide().appendTo($(this)).fadeIn() } , @@ -190,12 +206,9 @@ function ($) { var o = obj.options var $el = $(this) if ((!obj.$isToggled) && (!$el.is(':hover')) && ($el.hasClass('magicBtn-active'))){ - if (o.hoverText){ - $(this).find('.value').fadeOut('slow').remove() - $(this).find('i').show(100) - } $(this).toggleClass('magicBtn-active', 100) } + $(this).find('.value').fadeOut('slow').remove() } , @@ -229,7 +242,7 @@ function ($) { if (option == 'fadeIn') data.fadeIn() if (option == 'fadeOut') data.fadeOut() if (option == 'hide') data.hide() - else if (option) data.setState(option) + //else if (option) data.setState(option) }) }