Team:BIT/js/link-hover.js
(function ($, window, document, undefined) {
var pluginName = 'mateHover',
defaults = {
autoSize: 'off',
inhiritPadding: 'on',
position: 'y',
overlayStyle: 'classic',
rollingPosition: 'top',
doublePosition: 'vertical',
fourSpeedIn0: 200,
fourSpeedOut0: 200,
fourSpeedIn1: 800,
fourSpeedOut1: 800,
fourSpeedIn2: 300,
fourSpeedOut2: 300,
fourSpeedIn3: 800,
fourSpeedOut3: 800,
overlayBg: '#000',
overlaySpeedIn: 500,
overlaySpeedOut: 500,
overlayOpacity: 0.4,
overlayEasing: 'linear',
popupSpeedIn: 1000,
popupSpeedOut: 500,
popupEasing: 'swing',
between: 10,
popup2SpeedIn: 800,
popup2SpeedOut: 800,
popup2Easing: 'swing'
};
function Mate(element, options) {
this.element = $(element);
var ele = this;
this.options = $.extend({}, defaults, options);
this._defaults = defaults;
this._name = pluginName;
this.init(ele)
};
Mate.prototype.onResize = function () {
var ele = this;
this.img = this.element.children('img');
this.popup = this.element.find('[data-zl-popup]');
this.imgWidth = this.img.innerWidth();
this.imgHeight = this.img.innerHeight();
if (this.options.autoSize === 'on') {
this.element.css({
'width': this.imgWidth,
'height': this.imgHeight
})
};
if (this.options.inhiritPadding === 'on') {
this.divWidth = this.element.innerWidth();
this.divHeight = this.element.innerHeight()
} else {
this.divWidth = this.element.width();
this.divHeight = this.element.height()
};
this.calDivWidth = this.divWidth * 2;
this.calDivHeight = this.divHeight * 2;
this.divCalWidth = this.divWidth / 2;
this.divCalHeight = this.divHeight / 2;
this.divCalWidth2 = this.divWidth / 4;
this.divCalHeight2 = this.divHeight / 4;
this.popupWidth = this.popup.outerWidth();
this.popupHeight = this.popup.outerHeight();
this.calPopWidth = this.popupWidth * 2;
this.calPopHeight = this.popupHeight * 2;
this.coorW = this.divCalWidth - this.popupWidth / 2;
this.coorH = this.divCalHeight - this.popupHeight / 2;
this.count_pop = this.popup.length;
this.count_pop_label = 0;
if (this.count_pop > 1) {
this.count_pop_label = 1;
this.popup1 = this.popup.eq(0);
this.popup2 = this.popup.eq(1);
this.popup1Width = this.popup1.outerWidth();
this.popup2Width = this.popup2.outerWidth();
this.popup1Height = this.popup1.outerHeight();
this.popup2Height = this.popup2.outerHeight();
this.calPop1Width = this.popup1Width * 2;
this.calPop1Height = this.popup1Height * 2;
this.calPop2Width = this.popup2Width * 2;
this.calPop2Height = this.popup2Height * 2;
this.coor1W = this.divCalWidth - this.popup1Width / 2 - this.popup2Width / 2 - this.options.between;
this.coor1H = this.divCalHeight - this.popup1Height / 2;
this.coor2W = this.divCalWidth - this.popup2Width / 2 - this.popup1Width / 2 - this.options.between;
this.coor2H = this.divCalHeight - this.popup2Height / 2
};
this.over_pos = {
plus: {},
minus: {}
};
this.over_pos.plus[this.options.rollingPosition] = (this.options.rollingPosition === 'top' || this.options.rollingPosition === 'bottom') ? -this.divHeight - 10 : -this.divWidth - 10;
this.over_pos.minus[this.options.rollingPosition] = 0;
this.over_double_pos = {
position0: {},
position1: {},
minus: {},
fly_coor: {
top_left: {},
bottom_right: {}
}
};
this.over_fly_out = {
fly_coor: {
top_left: {},
bottom_right: {}
}
};
if (this.options.doublePosition === 'vertical') {
this.over_double_pos.position0['top'] = -this.divHeight;
this.over_double_pos.position1['bottom'] = -this.divHeight;
this.over_double_pos.minus['left'] = 0;
this.over_double_pos.position0['height'] = '50%';
this.over_double_pos.position0['width'] = '100%';
this.over_double_pos.position1['height'] = '50%';
this.over_double_pos.position1['width'] = '100%';
this.over_double_pos.fly_coor.top_left['top'] = 0;
this.over_double_pos.fly_coor.bottom_right['bottom'] = 0;
this.over_fly_out.fly_coor.top_left['top'] = -this.divHeight;
this.over_fly_out.fly_coor.bottom_right['bottom'] = -this.divHeight
} else {
this.over_double_pos.position0['left'] = -this.divWidth;
this.over_double_pos.position1['right'] = -this.divWidth;
this.over_double_pos.minus['top'] = 0;
this.over_double_pos.position0['height'] = '100%';
this.over_double_pos.position0['width'] = '50%';
this.over_double_pos.position1['height'] = '100%';
this.over_double_pos.position1['width'] = '50%';
this.over_double_pos.fly_coor.top_left['left'] = 0;
this.over_double_pos.fly_coor.bottom_right['right'] = 0;
this.over_fly_out.fly_coor.top_left['left'] = -this.divWidth;
this.over_fly_out.fly_coor.bottom_right['right'] = -this.divWidth
}; if (this.options.overlayStyle === 'four') {
this.over_four = {
inn: {},
out: {}
};
for (var speed_count_inout = 0; speed_count_inout <= 3; speed_count_inout++) {
this.over_four.inn['speed' + speed_count_inout] = this.options['fourSpeedIn' + speed_count_inout];
this.over_four.out['speed' + speed_count_inout] = this.options['fourSpeedOut' + speed_count_inout]
}
};
switch (this.options.position) {
case 'y':
this.startPosition('y', this.count_pop_label);
break;
case 'y-reverse':
this.startPosition('y-reverse', this.count_pop_label);
break;
case 'x':
this.startPosition('x', this.count_pop_label);
break;
case 'x-reverse':
this.startPosition('x-reverse', this.count_pop_label);
break;
case 'y+i':
this.startPosition('y+i', this.count_pop_label);
break;
case 'y+i-reverse':
this.startPosition('y+i-reverse', this.count_pop_label);
break;
case 'x+i':
this.startPosition('x+i', this.count_pop_label);
break;
case 'x+i-reverse':
this.startPosition('x+i-reverse', this.count_pop_label);
break;
default:
console.log('Wrong position properties(START POPUP POSITION)');
break
};
this.pos = {};
switch (this.options.position) {
case 'y':
this.flyPosition('y', this.count_pop_label);
break;
case 'y-reverse':
this.flyPosition('y-reverse', this.count_pop_label);
break;
case 'y+i':
this.flyPosition('y+i', this.count_pop_label);
break;
case 'y+i-reverse':
this.flyPosition('y+i-reverse', this.count_pop_label);
break;
case 'x':
this.flyPosition('x', this.count_pop_label);
break;
case 'x+i':
this.flyPosition('x+i', this.count_pop_label);
break;
case 'x-reverse':
this.flyPosition('x-reverse', this.count_pop_label);
break;
case 'x+i-reverse':
this.flyPosition('x+i-reverse', this.count_pop_label);
break;
default:
console.log('Wrong position properties(FLY POPUP POSITION)');
break
};
var general_overlay, left_or_top, left_or_top_double;
(this.options.rollingPosition === 'top' || this.options.rollingPosition === 'bottom') ? left_or_top = 'left' : left_or_top = 'top';
(this.options.doublePosition === 'vertical') ? left_or_top_double = 'left' : left_or_top_double = 'top';
this.element.find('[data-zl-overlay],[data-zl-ovrolling],[data-zl-ovdouble0],[data-zl-ovdouble1],[data-zl-ovzoom0],[data-zl-ovzoom1],[data-zl-ovzoom2],[data-zl-ovzoom3]').remove();
switch (this.options.overlayStyle) {
case 'classic':
general_overlay = $('').css('background', ele.options.overlayBg);
ele.element.prepend(general_overlay);
break;
case 'four':
for (var overlay_count = 0; overlay_count <= 3; overlay_count++) {
general_overlay = $('').css({
'background': ele.options.overlayBg,
'top': -this.divHeight,
'left': this.divCalWidth2 * overlay_count
}).fadeTo(100, this.options.overlayOpacity);
ele.element.prepend(general_overlay)
};
break;
case 'rolling':
general_overlay = $('').css(this.over_pos.plus).fadeTo(100, this.options.overlayOpacity);
ele.element.prepend(general_overlay);
break;
case 'double':
for (var overlay_count_d = 0; overlay_count_d <= 1; overlay_count_d++) {
general_overlay = $('').css(this.over_double_pos['position' + overlay_count_d]).fadeTo(100, this.options.overlayOpacity);
ele.element.prepend(general_overlay)
};
break
}
};
Mate.prototype.startPosition = function (x_or_y, count_pop_label) {
if (x_or_y === 'y' && count_pop_label === 0 || x_or_y === 'y+i' && count_pop_label === 0) {
this.popup.css({
'left': this.coorW,
'top': -this.calPopHeight
})
} else if (x_or_y === 'y-reverse' && count_pop_label === 0 || x_or_y === 'y+i-reverse' && count_pop_label === 0) {
this.popup.css({
'left': this.coorW,
'bottom': -this.calPopHeight
})
} else if (x_or_y === 'x-reverse' && count_pop_label === 0 || x_or_y === 'x+i-reverse' && count_pop_label === 0) {
this.popup.css({
'top': this.coorH,
'right': -this.calPopWidth
})
} else if (x_or_y === 'x' && count_pop_label === 0 || x_or_y === 'x+i' && count_pop_label === 0) {
this.popup.css({
'top': this.coorH,
'left': -this.calPopWidth
})
} else if (x_or_y === 'y' && count_pop_label === 1 || x_or_y === 'y+i' && count_pop_label === 1) {
this.popup1.css({
'left': this.coor1W,
'top': -this.calPop1Height
});
this.popup2.css({
'right': this.coor2W,
'top': -this.calPop2Height
})
} else if (x_or_y === 'y-reverse' && count_pop_label === 1 || x_or_y === 'y+i-reverse' && count_pop_label === 1) {
this.popup1.css({
'left': this.coor1W,
'bottom': -this.calPop1Height
});
this.popup2.css({
'right': this.coor2W,
'bottom': -this.calPop2Height
})
} else if (x_or_y === 'x-reverse' && count_pop_label === 1 || x_or_y === 'x+i-reverse' && count_pop_label === 1) {
this.popup1.css({
'top': this.coor1H,
'right': -this.calPop1Width
});
this.popup2.css({
'top': this.coor2H,
'left': -this.calPop2Width
})
} else if (x_or_y === 'x' && count_pop_label === 1 || x_or_y === 'x+i' && count_pop_label === 1) {
this.popup1.css({
'top': this.coor1H,
'left': -this.calPop1Width
});
this.popup2.css({
'top': this.coor2H,
'right': -this.calPop2Width
})
}
};
Mate.prototype.flyPosition = function (x_or_y, count_pop_label) {
if (x_or_y === 'y' && count_pop_label === 0) {
this.pos.anime_enter = {
top: this.coorH
}, this.pos.anime_leave = {
top: -this.calPopHeight
}, this.pos.back_css = {
'display': 'none',
'top': -this.calPopHeight
}
} else if (x_or_y === 'y-reverse' && count_pop_label === 0) {
this.pos.anime_enter = {
bottom: this.coorH
}, this.pos.anime_leave = {
bottom: -this.calPopHeight
}, this.pos.back_css = {
'display': 'none',
'bottom': -this.calPopHeight
}
} else if (x_or_y === 'y+i-reverse' && count_pop_label === 0) {
this.pos.anime_enter = {
bottom: this.coorH
}, this.pos.anime_leave = {
bottom: this.calDivHeight
}, this.pos.back_css = {
'display': 'none',
'bottom': -this.calPopHeight
}
} else if (x_or_y === 'y+i' && count_pop_label === 0) {
this.pos.anime_enter = {
top: this.coorH
}, this.pos.anime_leave = {
top: this.calDivHeight
}, this.pos.back_css = {
'display': 'none',
'top': -this.calPopHeight
}
} else if (x_or_y === 'x' && count_pop_label === 0) {
this.pos.anime_enter = {
left: this.coorW
}, this.pos.anime_leave = {
left: -this.calPopWidth
}, this.pos.back_css = {
'display': 'none',
'left': -this.calPopWidth
}
} else if (x_or_y === 'x+i' && count_pop_label === 0) {
this.pos.anime_enter = {
left: this.coorW
}, this.pos.anime_leave = {
left: this.calDivWidth
}, this.pos.back_css = {
'display': 'none',
'left': -this.calPopWidth
}
} else if (x_or_y === 'x-reverse' && count_pop_label === 0) {
this.pos.anime_enter = {
right: this.coorW
}, this.pos.anime_leave = {
right: -this.calPopWidth
}, this.pos.back_css = {
'display': 'none',
'right': -this.calPopWidth
}
} else if (x_or_y === 'x+i-reverse' && count_pop_label === 0) {
this.pos.anime_enter = {
right: this.coorW
}, this.pos.anime_leave = {
right: this.calDivWidth
}, this.pos.back_css = {
'display': 'none',
'right': -this.calPopWidth
}
} else if (x_or_y === 'y' && count_pop_label === 1) {
this.pos.anime_enter = {
top: this.coor1H
}, this.pos.anime_leave = {
top: -this.calPop1Height
}, this.pos.back_css = {
'display': 'none',
'top': -this.calPop1Height
};
this.pos.anime_enter2 = {
top: this.coor2H
}, this.pos.anime_leave2 = {
top: -this.calPop2Height
}, this.pos.back_css2 = {
'display': 'none',
'top': -this.calPop2Height
}
} else if (x_or_y === 'y-reverse' && count_pop_label === 1) {
this.pos.anime_enter = {
bottom: this.coor1H
}, this.pos.anime_leave = {
bottom: -this.calPop1Height
}, this.pos.back_css = {
'display': 'none',
'bottom': -this.calPop1Height
};
this.pos.anime_enter2 = {
bottom: this.coor2H
}, this.pos.anime_leave2 = {
bottom: -this.calPop2Height
}, this.pos.back_css2 = {
'display': 'none',
'bottom': -this.calPop2Height
}
} else if (x_or_y === 'y+i-reverse' && count_pop_label === 1) {
this.pos.anime_enter = {
bottom: this.coor1H
}, this.pos.anime_leave = {
bottom: this.calDivHeight
}, this.pos.back_css = {
'display': 'none',
'bottom': -this.calPop1Height
};
this.pos.anime_enter2 = {
bottom: this.coor2H
}, this.pos.anime_leave2 = {
bottom: this.calDivHeight
}, this.pos.back_css2 = {
'display': 'none',
'bottom': -this.calPop2Height
}
} else if (x_or_y === 'y+i' && count_pop_label === 1) {
this.pos.anime_enter = {
top: this.coor1H
}, this.pos.anime_leave = {
top: this.calDivHeight
}, this.pos.back_css = {
'display': 'none',
'top': -this.calPop1Height
};
this.pos.anime_enter2 = {
top: this.coor2H
}, this.pos.anime_leave2 = {
top: this.calDivHeight
}, this.pos.back_css2 = {
'display': 'none',
'top': -this.calPop2Height
}
} else if (x_or_y === 'x' && count_pop_label === 1) {
this.pos.anime_enter = {
left: this.coor1W
}, this.pos.anime_leave = {
left: -this.calPop1Width
}, this.pos.back_css = {
'display': 'none',
'left': -this.calPop1Width
};
this.pos.anime_enter2 = {
right: this.coor2W
}, this.pos.anime_leave2 = {
right: -this.calPop2Width
}, this.pos.back_css2 = {
'display': 'none',
'right': -this.calPop2Width
}
} else if (x_or_y === 'x-reverse' && count_pop_label === 1) {
this.pos.anime_enter = {
right: this.coor1W
}, this.pos.anime_leave = {
right: -this.calPop1Width
}, this.pos.back_css = {
'display': 'none',
'right': -this.calPop1Width
};
this.pos.anime_enter2 = {
left: this.coor2W
}, this.pos.anime_leave2 = {
left: -this.calPop2Width
}, this.pos.back_css2 = {
'display': 'none',
'left': -this.calPop2Width
}
} else if (x_or_y === 'x+i' && count_pop_label === 1) {
this.pos.anime_enter = {
left: this.coor1W
}, this.pos.anime_leave = {
left: this.calDivWidth
}, this.pos.back_css = {
'display': 'none',
'left': -this.calPop1Width
};
this.pos.anime_enter2 = {
right: this.coor2W
}, this.pos.anime_leave2 = {
right: this.calDivWidth
}, this.pos.back_css2 = {
'display': 'none',
'right': -this.calPop2Width
}
} else if (x_or_y === 'x+i-reverse' && count_pop_label === 1) {
this.pos.anime_enter = {
right: this.coor1W
}, this.pos.anime_leave = {
right: this.calDivWidth
}, this.pos.back_css = {
'display': 'none',
'right': -this.calPop1Width
};
this.pos.anime_enter2 = {
left: this.coor2W
}, this.pos.anime_leave2 = {
left: this.calDivWidth
}, this.pos.back_css2 = {
'display': 'none',
'left': -this.calPop2Width
}
}
};
Mate.prototype.overlayGet = function (ele, overlayStyle, speed, opacity, over_pos) {
switch (overlayStyle) {
case 'classic':
ele.element.children('[data-zl-overlay]').stop(true).fadeTo(speed, opacity, ele.options.overlayEasing);
break;
case 'four':
var obj_count = 0;
for (var obj_proper in speed) {
ele.element.children('[data-zl-ovzoom' + obj_count + ']').stop(true).animate({
top: over_pos
}, speed[obj_proper], ele.options.overlayEasing);
obj_count++
};
break;
case 'rolling':
ele.element.children('[data-zl-ovrolling]').css('display', 'block').stop(true).animate(over_pos, speed, ele.options.overlayEasing);
break;
case 'double':
ele.element.children('[data-zl-ovdouble0]').css('display', 'block').stop(true).animate(over_pos.top_left, speed, ele.options.overlayEasing);
ele.element.children('[data-zl-ovdouble1]').css('display', 'block').stop(true).animate(over_pos.bottom_right, speed, ele.options.overlayEasing);
break
}
};
Mate.prototype.hover = function (ele, count_pop_label) {
this.element.on({
mouseenter: function () {
switch (count_pop_label) {
case 0:
ele.popup.css(ele.pos.back_css).css('display', 'block').stop(true).animate(ele.pos.anime_enter, ele.options.popupSpeedIn, ele.options.popupEasing);
switch (ele.options.overlayStyle) {
case 'classic':
ele.overlayGet(ele, 'classic', ele.options.overlaySpeedIn, ele.options.overlayOpacity, 0);
break;
case 'four':
ele.overlayGet(ele, 'four', ele.over_four.inn, 0, ele.divHeight);
break;
case 'rolling':
ele.overlayGet(ele, 'rolling', ele.options.overlaySpeedIn, ele.options.overlayOpacity, ele.over_pos.minus);
break;
case 'double':
ele.overlayGet(ele, 'double', ele.options.overlaySpeedIn, ele.options.overlayOpacity, ele.over_double_pos.fly_coor);
break
};
break;
case 1:
ele.popup1.css(ele.pos.back_css).css('display', 'block').stop(true).animate(ele.pos.anime_enter, ele.options.popupSpeedIn, ele.options.popupEasing).siblings('[data-zl-popup]').css(ele.pos.back_css2).css('display', 'block').stop(true).animate(ele.pos.anime_enter2, ele.options.popup2SpeedIn, ele.options.popup2Easing);
switch (ele.options.overlayStyle) {
case 'classic':
ele.overlayGet(ele, 'classic', ele.options.overlaySpeedIn, ele.options.overlayOpacity, 0);
break;
case 'four':
ele.overlayGet(ele, 'four', ele.over_four.inn, 0, ele.divHeight);
break;
case 'rolling':
ele.overlayGet(ele, 'rolling', ele.options.overlaySpeedIn, ele.options.overlayOpacity, ele.over_pos.minus);
break;
case 'double':
ele.overlayGet(ele, 'double', ele.options.overlaySpeedIn, ele.options.overlayOpacity, ele.over_double_pos.fly_coor);
break
};
break
}
},
mouseleave: function () {
switch (count_pop_label) {
case 0:
ele.popup.stop(true).animate(ele.pos.anime_leave, ele.options.popupSpeedOut, ele.options.popupEasing).children('input').blur();
switch (ele.options.overlayStyle) {
case 'classic':
ele.overlayGet(ele, 'classic', ele.options.overlaySpeedOut, 0, 0);
break;
case 'four':
ele.overlayGet(ele, 'four', ele.over_four.out, 0, -ele.divHeight);
break;
case 'rolling':
ele.overlayGet(ele, 'rolling', ele.options.overlaySpeedOut, 0, ele.over_pos.plus);
break;
case 'double':
ele.overlayGet(ele, 'double', ele.options.overlaySpeedOut, 0, ele.over_fly_out.fly_coor);
break
};
break;
case 1:
ele.popup1.stop(true, true).animate(ele.pos.anime_leave, ele.options.popupSpeedOut, ele.options.popupEasing).children('input').blur().end().siblings('[data-zl-popup]').stop(true, true).animate(ele.pos.anime_leave2, ele.options.popup2SpeedOut, ele.options.popup2Easing).children('input').blur();
switch (ele.options.overlayStyle) {
case 'classic':
ele.overlayGet(ele, 'classic', ele.options.overlaySpeedOut, 0, 0);
break;
case 'four':
ele.overlayGet(ele, 'four', ele.over_four.out, 0, -ele.divHeight);
break;
case 'rolling':
ele.overlayGet(ele, 'rolling', ele.options.overlaySpeedOut, 0, ele.over_pos.plus);
break;
case 'double':
ele.overlayGet(ele, 'double', ele.options.overlaySpeedOut, 0, ele.over_fly_out.fly_coor);
break
};
break
}
}
})
};
Mate.prototype.init = function (ele) {
$(window).resize($.proxy(this, 'onResize'));
this.onResize();
this.hover(ele, this.count_pop_label)
};
$.fn[pluginName] = function (options) {
return this.each(function () {
if (!$.data(this, 'plugin_' + pluginName)) {
$.data(this, 'plugin_' + pluginName, new Mate(this, options))
}
})
}
})(jQuery, window, document);