From c014273dc330ad5ea60e99e758e0774ec5cd95fb Mon Sep 17 00:00:00 2001 From: "Chakib (spike) Benziane" Date: Fri, 11 May 2012 13:54:28 +0200 Subject: [PATCH] new features - Initial status of button for first page loading - 2 new methods, fadeIn, fadeOut - helper method calcultePostition, to force button recalculate position - hoverIntent timeout tweaks --- example/js/bootstrap-magic-button.js | 48 +++++++++++++++++++++------- js/bootstrap-magic-button.js | 21 ++++++------ 2 files changed, 49 insertions(+), 20 deletions(-) diff --git a/example/js/bootstrap-magic-button.js b/example/js/bootstrap-magic-button.js index ecf3286..59a8ac8 100644 --- a/example/js/bootstrap-magic-button.js +++ b/example/js/bootstrap-magic-button.js @@ -36,7 +36,8 @@ function ($) { this.$parentPosition = this.$parentDiv.position(); this.$parentMarginLeft = this.$parentDiv.css('margin-left') this.options = $.extend({}, $.fn.magicBtn.defaults, options) - + this.$shown = false + // Store number of buttons on parent div if (!this.$parentDiv.data('nbMagicBtns')) this.$parentDiv.data('nbMagicBtns', 1) else this.$parentDiv.data().nbMagicBtns++; @@ -54,9 +55,13 @@ function ($) { if (toggleimg = this.$element.data('toggle-image')) this.$toggleImgUrl = 'url("' + toggleimg + '")' else this.$toggleImgUrl = this.$imgUrl - this.$isToggled = false - - if (this.options.hover) this.addHover() + // store toggle initial status if there is + var togglestatus + if (togglestatus = this.$element.data('initial-toggle-status')){ + togglestatus == 'toggled' ? this.toggle() : this.$isToggled = false + } + else this.$isToggled = false + if (this.options.hover) this.addHover() } @@ -85,6 +90,8 @@ function ($) { , calculatePosition: function (direction) { + this.$parentPosition = this.$parentDiv.position(); + this.$parentMarginLeft = this.$parentDiv.css('margin-left') var space = (this.$currentBtnNb === 1) ? 0 : this.options.betweenSpace var left = this.$parentPosition.left + this.$parentWidth switch (this.options.alignment) { @@ -110,26 +117,41 @@ function ($) { this.$parentDiv.data('bottom-space', this.$parentDiv.data('bottom-space') - this.$height) } break; - - - } this.$left = this.$parentPosition.left + this.$parentWidth + parseInt(this.$parentMarginLeft) } , show: function () { + this.calculatePosition() var $o = this.options this.$element.css({ top: this.$top, left: this.$left, 'background-image': (this.$isToggled) ? this.$toggleImgUrl : this.$imgUrl }).show() - } + this.$shown = true + }, - , + fadeIn: function () { + this.calculatePosition() + var $o = this.options + this.$element.fadeIn('fast').css({ + top: this.$top, + left: this.$left, + 'background-image': (this.$isToggled) ? this.$toggleImgUrl : this.$imgUrl + }) + this.$shown = true + }, + + fadeOut: function () { + this.$element.fadeOut(10) + this.$shown = false + }, + hide: function () { this.$element.hide() + this.$shown = false } , @@ -144,6 +166,7 @@ function ($) { this.$isToggled = false $el.removeClass('magicBtn-active') } + } , @@ -154,7 +177,8 @@ function ($) { over: function () { if (!obj.$isToggled) $(this).toggleClass('magicBtn-active') }, - timeout: 1, + timeout: 10, + interval: 10, out: function () { if ((!obj.$isToggled) && (!$el.is(':hover')) && ($el.hasClass('magicBtn-active'))) $(this).toggleClass('magicBtn-active', 100) } @@ -178,6 +202,8 @@ function ($) { data.calculatePosition('right') if (option == 'toggle') data.toggle() if (option == 'show') data.show() + if (option == 'fadeIn') data.fadeIn() + if (option == 'fadeOut') data.fadeOut() if (option == 'hide') data.hide() else if (option) data.setState(option) @@ -205,4 +231,4 @@ function ($) { }) }) -}(window.jQuery); \ No newline at end of file +}(window.jQuery); diff --git a/js/bootstrap-magic-button.js b/js/bootstrap-magic-button.js index 9afee1c..59a8ac8 100644 --- a/js/bootstrap-magic-button.js +++ b/js/bootstrap-magic-button.js @@ -37,7 +37,7 @@ function ($) { this.$parentMarginLeft = this.$parentDiv.css('margin-left') this.options = $.extend({}, $.fn.magicBtn.defaults, options) this.$shown = false - + // Store number of buttons on parent div if (!this.$parentDiv.data('nbMagicBtns')) this.$parentDiv.data('nbMagicBtns', 1) else this.$parentDiv.data().nbMagicBtns++; @@ -55,9 +55,13 @@ function ($) { if (toggleimg = this.$element.data('toggle-image')) this.$toggleImgUrl = 'url("' + toggleimg + '")' else this.$toggleImgUrl = this.$imgUrl - this.$isToggled = false - - if (this.options.hover) this.addHover() + // store toggle initial status if there is + var togglestatus + if (togglestatus = this.$element.data('initial-toggle-status')){ + togglestatus == 'toggled' ? this.toggle() : this.$isToggled = false + } + else this.$isToggled = false + if (this.options.hover) this.addHover() } @@ -113,9 +117,6 @@ function ($) { this.$parentDiv.data('bottom-space', this.$parentDiv.data('bottom-space') - this.$height) } break; - - - } this.$left = this.$parentPosition.left + this.$parentWidth + parseInt(this.$parentMarginLeft) } @@ -165,6 +166,7 @@ function ($) { this.$isToggled = false $el.removeClass('magicBtn-active') } + } , @@ -175,7 +177,8 @@ function ($) { over: function () { if (!obj.$isToggled) $(this).toggleClass('magicBtn-active') }, - timeout: 1, + timeout: 10, + interval: 10, out: function () { if ((!obj.$isToggled) && (!$el.is(':hover')) && ($el.hasClass('magicBtn-active'))) $(this).toggleClass('magicBtn-active', 100) } @@ -228,4 +231,4 @@ function ($) { }) }) -}(window.jQuery); \ No newline at end of file +}(window.jQuery);