(function ($){
var addCSSRule = (function(style){
var head = document.head || $("head")[0] || document.documentElement;
if ( JSINFO['nonce'] ) { style.setAttribute('nonce', JSINFO['nonce']); }
var sheet = head.appendChild(style).sheet;
return function(selector, css){
var propText = Object.keys(css).map(function(p){
return p+":"+css[p];
}).join(";");
sheet.insertRule(selector + "{" + propText + "}", sheet.cssRules.length);
return sheet;
};
})(document.createElement("style"));
/**
* normalizeEvent
*
* Firefox does not implement offsetX, OffsetY, so we have to detect for this an
* manually calculate it ourselves using the pageX, pageY less the event
* target's left offset and right offset
*
* If using a browser that supports offsetX, OffsetY, just return the event,
* don't need to do anything
*/
var normalizeEvent = function(event) {
if(!event.offsetX) {
event.offsetX = (event.pageX - $(event.target).offset().left);
event.offsetY = (event.pageY - $(event.target).offset().top);
}
return event.data;
};
// private
var magnifier = function(){
this.rootNode = null;
this.magnifierImage = null;
this.magnifierContent = null;
};
(function(_){
var magnifierRoot = null;
var currentAngleSheet = null;
_.init = function(magnifierNode) {
this.rootNode = magnifierNode;
this.magnifierImage = new Image();
this.magnifierImage.src = this.rootNode.attr('magnifierImage');
// register other handlers
this.rootNode.mousemove(this, _.mousemove);
this.rootNode.mouseout(this, _.mouseout);
this.rootNode.mouseover(this, _.mouseover);
};
_.mouseover = function(event)
{
var $$ = normalizeEvent(event);
if ( magnifierRoot == null ) {
magnifierRoot = $('').addClass('magnifierWrapper').attr('pointer-events', 'none');
$$.magnifierContent = $('').addClass('magnifierContent').css('backgroundImage', 'url(' + $$.rootNode.attr('magnifierImage') + ')');
magnifierRoot.append($$.magnifierContent);
// macht im Opera Problem ...
$("body").append(magnifierRoot);
}
_.mousemove(event);
};
_.mousemove = function(event)
{
var $$ = normalizeEvent(event);
_.setPosition(event.pageX,event.pageY, event.offsetX, event.offsetY, $$);
};
_.mouseout = function(event)
{
var $$ = normalizeEvent(event);
var rootOffset = $$.rootNode.offset();
// Check Position over Element before removing!
if ( rootOffset.left > event.offsetX ||
(rootOffset.left + $$.rootNode.width()) < event.offsetX ||
rootOffset.top < event.offsetY ||
(rootOffset.top + rootOffset.height) > event.offsetY )
{
if ( magnifierRoot ) {
magnifierRoot.remove();
magnifierRoot = null;
}
}
};
_.setPosition = function(x, y, contentX, contentY, $$)
{
if ( !$$ || !$$.magnifierImage || !contentX || !contentY || !$$.magnifierContent ) {
return;
}
// Background position
var posX = -(contentX / $$.rootNode.width() * $$.magnifierImage.width - $$.magnifierContent.width() / 2);
var posY = -(contentY / $$.rootNode.height() * $$.magnifierImage.height - $$.magnifierContent.height() / 2);
// Radial position
var position = (1 / $$.rootNode.width() * ($$.rootNode.width() - contentX));
var arc = -(110 * position + 35) * Math.PI / 180;
var left0 = 202;
var top0 = 0;
var left = left0 * Math.cos(arc) - top0 * Math.sin(arc) - 165;
var top = left0 * Math.sin(arc) + top0 * Math.cos(arc) + 113;
var angle = 'rotate(' + (position * -110) + 'deg)';
if ( currentAngleSheet != null ) {
$(currentAngleSheet).remove();
}
currentAngleSheet = addCSSRule("div.magnifierWrapper:after,svg.magnifierWrapper:after", {
'-webkit-transform': angle,
'-moz-transform': angle,
'-o-transform': angle,
'-ms-transform': angle,
'transform': angle,
});
$$.magnifierContent.css({
'background-position': posX + "px " + posY + "px",
'backgroundPositionX': posX,
'backgroundPositionY': posY,
'margin-left' : left,
'margin-top': top
});
if ( !magnifierRoot || !x || !y ) {
return;
}
// Magic values for offset of loupe inner circle
magnifierRoot.offset({ left:x - 18, top: y - magnifierRoot.height() + 20 });
};
})(magnifier.prototype);
// public
$.magnify = function(magnifierNode) {
return (new magnifier()).init(magnifierNode);
};
$(function(){
$('img.magnifierImage').each(function(index, item){
$.magnify($(item));
});
});
})(jQuery);