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
master
Chakib (spike) Benziane 12 years ago
parent ef46499ab8
commit c014273dc3

@ -36,7 +36,8 @@ function ($) {
this.$parentPosition = this.$parentDiv.position(); this.$parentPosition = this.$parentDiv.position();
this.$parentMarginLeft = this.$parentDiv.css('margin-left') this.$parentMarginLeft = this.$parentDiv.css('margin-left')
this.options = $.extend({}, $.fn.magicBtn.defaults, options) this.options = $.extend({}, $.fn.magicBtn.defaults, options)
this.$shown = false
// Store number of buttons on parent div // Store number of buttons on parent div
if (!this.$parentDiv.data('nbMagicBtns')) this.$parentDiv.data('nbMagicBtns', 1) if (!this.$parentDiv.data('nbMagicBtns')) this.$parentDiv.data('nbMagicBtns', 1)
else this.$parentDiv.data().nbMagicBtns++; else this.$parentDiv.data().nbMagicBtns++;
@ -54,9 +55,13 @@ function ($) {
if (toggleimg = this.$element.data('toggle-image')) this.$toggleImgUrl = 'url("' + toggleimg + '")' if (toggleimg = this.$element.data('toggle-image')) this.$toggleImgUrl = 'url("' + toggleimg + '")'
else this.$toggleImgUrl = this.$imgUrl else this.$toggleImgUrl = this.$imgUrl
this.$isToggled = false // store toggle initial status if there is
var togglestatus
if (this.options.hover) this.addHover() 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) { 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 space = (this.$currentBtnNb === 1) ? 0 : this.options.betweenSpace
var left = this.$parentPosition.left + this.$parentWidth var left = this.$parentPosition.left + this.$parentWidth
switch (this.options.alignment) { switch (this.options.alignment) {
@ -110,26 +117,41 @@ function ($) {
this.$parentDiv.data('bottom-space', this.$parentDiv.data('bottom-space') - this.$height) this.$parentDiv.data('bottom-space', this.$parentDiv.data('bottom-space') - this.$height)
} }
break; break;
} }
this.$left = this.$parentPosition.left + this.$parentWidth + parseInt(this.$parentMarginLeft) this.$left = this.$parentPosition.left + this.$parentWidth + parseInt(this.$parentMarginLeft)
} }
, ,
show: function () { show: function () {
this.calculatePosition()
var $o = this.options var $o = this.options
this.$element.css({ this.$element.css({
top: this.$top, top: this.$top,
left: this.$left, left: this.$left,
'background-image': (this.$isToggled) ? this.$toggleImgUrl : this.$imgUrl 'background-image': (this.$isToggled) ? this.$toggleImgUrl : this.$imgUrl
}).show() }).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 () { hide: function () {
this.$element.hide() this.$element.hide()
this.$shown = false
} }
, ,
@ -144,6 +166,7 @@ function ($) {
this.$isToggled = false this.$isToggled = false
$el.removeClass('magicBtn-active') $el.removeClass('magicBtn-active')
} }
} }
, ,
@ -154,7 +177,8 @@ function ($) {
over: function () { over: function () {
if (!obj.$isToggled) $(this).toggleClass('magicBtn-active') if (!obj.$isToggled) $(this).toggleClass('magicBtn-active')
}, },
timeout: 1, timeout: 10,
interval: 10,
out: function () { out: function () {
if ((!obj.$isToggled) && (!$el.is(':hover')) && ($el.hasClass('magicBtn-active'))) $(this).toggleClass('magicBtn-active', 100) if ((!obj.$isToggled) && (!$el.is(':hover')) && ($el.hasClass('magicBtn-active'))) $(this).toggleClass('magicBtn-active', 100)
} }
@ -178,6 +202,8 @@ function ($) {
data.calculatePosition('right') data.calculatePosition('right')
if (option == 'toggle') data.toggle() if (option == 'toggle') data.toggle()
if (option == 'show') data.show() if (option == 'show') data.show()
if (option == 'fadeIn') data.fadeIn()
if (option == 'fadeOut') data.fadeOut()
if (option == 'hide') data.hide() if (option == 'hide') data.hide()
else if (option) data.setState(option) else if (option) data.setState(option)
@ -205,4 +231,4 @@ function ($) {
}) })
}) })
}(window.jQuery); }(window.jQuery);

@ -37,7 +37,7 @@ function ($) {
this.$parentMarginLeft = this.$parentDiv.css('margin-left') this.$parentMarginLeft = this.$parentDiv.css('margin-left')
this.options = $.extend({}, $.fn.magicBtn.defaults, options) this.options = $.extend({}, $.fn.magicBtn.defaults, options)
this.$shown = false this.$shown = false
// Store number of buttons on parent div // Store number of buttons on parent div
if (!this.$parentDiv.data('nbMagicBtns')) this.$parentDiv.data('nbMagicBtns', 1) if (!this.$parentDiv.data('nbMagicBtns')) this.$parentDiv.data('nbMagicBtns', 1)
else this.$parentDiv.data().nbMagicBtns++; else this.$parentDiv.data().nbMagicBtns++;
@ -55,9 +55,13 @@ function ($) {
if (toggleimg = this.$element.data('toggle-image')) this.$toggleImgUrl = 'url("' + toggleimg + '")' if (toggleimg = this.$element.data('toggle-image')) this.$toggleImgUrl = 'url("' + toggleimg + '")'
else this.$toggleImgUrl = this.$imgUrl else this.$toggleImgUrl = this.$imgUrl
this.$isToggled = false // store toggle initial status if there is
var togglestatus
if (this.options.hover) this.addHover() 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) this.$parentDiv.data('bottom-space', this.$parentDiv.data('bottom-space') - this.$height)
} }
break; break;
} }
this.$left = this.$parentPosition.left + this.$parentWidth + parseInt(this.$parentMarginLeft) this.$left = this.$parentPosition.left + this.$parentWidth + parseInt(this.$parentMarginLeft)
} }
@ -165,6 +166,7 @@ function ($) {
this.$isToggled = false this.$isToggled = false
$el.removeClass('magicBtn-active') $el.removeClass('magicBtn-active')
} }
} }
, ,
@ -175,7 +177,8 @@ function ($) {
over: function () { over: function () {
if (!obj.$isToggled) $(this).toggleClass('magicBtn-active') if (!obj.$isToggled) $(this).toggleClass('magicBtn-active')
}, },
timeout: 1, timeout: 10,
interval: 10,
out: function () { out: function () {
if ((!obj.$isToggled) && (!$el.is(':hover')) && ($el.hasClass('magicBtn-active'))) $(this).toggleClass('magicBtn-active', 100) if ((!obj.$isToggled) && (!$el.is(':hover')) && ($el.hasClass('magicBtn-active'))) $(this).toggleClass('magicBtn-active', 100)
} }
@ -228,4 +231,4 @@ function ($) {
}) })
}) })
}(window.jQuery); }(window.jQuery);

Loading…
Cancel
Save