(function ($, window, document, undefined){
var pluginName='sliphover',
defaults={
target: 'img',
caption: 'title',
duration: 'fast',
fontColor: '#fff',
textAlign: 'center',
verticalMiddle: true,
backgroundColor: 'rgba(0,0,0,.7)',
reverse: false,
height: '100%',
withLink: true,
};
function SlipHover(element, options){
this.element=element;
this.settings=$.extend({}, defaults, options);
this._defaults=defaults;
this._name=pluginName;
this.version='v2.0.3';
this.init();
}
SlipHover.prototype={
init: function (){
if(/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)){
return;
}
var that=this,
target=this.settings.target;
$(this.element)
.off('mouseenter.sliphover', target)
.on('mouseenter.sliphover', target, function (event){
var $element=$(this),
$overlayContainer=that.createContainer($element);
$overlayContainer.off('mouseenter.sliphover mouseleave.sliphover').on('mouseenter.sliphover mouseleave.sliphover', function (event){
var direction=that.getDirection($(this), event);
direction=that.settings.reverse ? (direction=(direction + 2) % 4):direction;
if(event.type==='mouseenter'){
var $overlay=$overlayContainer.find('.sliphover-overlay');
if(!$overlay.length){
$overlay=that.createOverlay(that, direction, $element);
$(this).html($overlay);
}
that.slideIn(that, $overlay);
}else{
that.removeOverlay(that, $(this), direction);
}});
});
},
createContainer: function ($element){
var top=$element.offset().top,
left=$element.offset().left,
width=$element.outerWidth(),
height=$element.outerHeight();
zIndex=$element.css('z-index');
var $overlayContainer=$('<div>', {
class: 'sliphover-container',
}).css({
width: width,
height: height,
position: 'absolute',
overflow: 'hidden',
top: top,
left: left,
borderRadius: $element.css('border-radius'),
zIndex: zIndex==+zIndex ? zIndex + 1:999,
});
$overlayContainer.data('relatedElement', $element);
$('body').append($overlayContainer);
return $overlayContainer;
},
createOverlay: function (instance, direction, $element){
var bottom, left, $overlay, content, $targetAParent;
switch (direction){
case 0:
left=0;
bottom='100%';
break;
case 1:
left='100%';
bottom=0;
break;
case 2:
left=0;
bottom='-100%';
break;
case 3:
left='-100%';
bottom=0;
break;
default:
window.console.error('error when get direction of the mouse');
}
if(instance.settings.verticalMiddle){
content=$('<div>')
.css({
display: 'table-cell',
verticalAlign: 'middle',
})
.html($element.attr(instance.settings.caption));
}else{
content=$element.attr(instance.settings.caption);
}
$targetAParent=$element.closest('a');
if($targetAParent.length&&instance.settings.withLink){
var url=$targetAParent.attr('href');
classes=$targetAParent.attr('class');
$overlay=$('<a>', {
class: 'sliphover-overlay ' + classes,
href: url||'#',
}).css({
textDecoration: 'none',
});
}else{
$overlay=$('<div>', {
class: 'sliphover-overlay',
});
}
$overlay
.css({
width: '100%',
height: instance.settings.height,
position: 'absolute',
left: left,
bottom: bottom,
display: instance.settings.verticalMiddle ? 'table':'inline',
textAlign: instance.settings.textAlign,
color: instance.settings.fontColor,
backgroundColor: instance.settings.backgroundColor,
})
.html(content);
return $overlay;
},
slideIn: function (instance, $overlay){
$overlay.stop().animate({
left: 0,
bottom: 0,
},
instance.settings.duration
);
},
removeOverlay: function (instance, $overlayContainer, direction){
var finalState,
$overlay=$overlayContainer.find('.sliphover-overlay');
switch (direction){
case 0:
finalState={
bottom: '100%',
left: 0,
};
break;
case 1:
finalState={
bottom: 0,
left: '100%',
};
break;
case 2:
finalState={
bottom: '-100%',
left: 0,
};
break;
case 3:
finalState={
bottom: 0,
left: '-100%',
};
break;
default:
window.console.error('error when get direction of the mouse');
}
$overlay.stop().animate(finalState, instance.settings.duration, function (){
$overlayContainer.remove();
});
},
getDirection: function ($target, event){
var w=$target.width(),
h=$target.height(),
x=(event.pageX - $target.offset().left - w / 2) * (w > h ? h / w:1),
y=(event.pageY - $target.offset().top - h / 2) * (h > w ? w / h:1),
direction=Math.round((Math.atan2(y, x) * (180 / Math.PI) + 180) / 90 + 3) % 4;
return direction;
},
};
$.fn[pluginName]=function (options){
this.each(function (){
if(!$.data(this, 'plugin_' + pluginName)){
$.data(this, 'plugin_' + pluginName, new SlipHover(this, options));
}});
return this;
};})(jQuery, window, document);