"use strict";
function ReplaceWithPolyfill(){
'use-strict';
var parent=this.parentNode,
i=arguments.length,
currentNode;
if(!parent) return;
if(!i)
parent.removeChild(this);
while (i--){
currentNode=arguments[i];
if(typeof currentNode!=='object'){
currentNode=this.ownerDocument.createTextNode(currentNode);
}else if(currentNode.parentNode){
currentNode.parentNode.removeChild(currentNode);
}
if(!i)
parent.replaceChild(currentNode, this);else
parent.insertBefore(currentNode, this.previousSibling);
}}
if(!Element.prototype.replaceWith){
Element.prototype.replaceWith=ReplaceWithPolyfill;
}
if(!CharacterData.prototype.replaceWith){
CharacterData.prototype.replaceWith=ReplaceWithPolyfill;
}
if(!DocumentType.prototype.replaceWith){
DocumentType.prototype.replaceWith=ReplaceWithPolyfill;
}
const imageObj={};
$.fn.imageZoom=function (options){
let settings=$.extend({
zoom: 150
}, options);
imageObj.template=`
<figure class="containerZoom" style="background-image:url('${$(this).attr("src")}'); background-size: 0%;">
<img id="imageZoom" src="${$(this).attr("src")}" alt="${$(this).attr("alt")}" />
</figure>
`;
function zoomIn(e){
let zoomer=e.currentTarget;
let x, y, offsetX, offsetY;
e.offsetX ? offsetX=e.offsetX:offsetX=e.touches[0].pageX;
e.offsetY ? offsetY=e.offsetY:offsetY=e.touches[0].pageX;
x=offsetX / zoomer.offsetWidth * 100;
y=offsetY / zoomer.offsetHeight * 100;
$(zoomer).css({
"background-position": `${x}% ${y}%`
});
}
function attachEvents(container){
container=$(container);
container.on('mousemove touchmove', function (e){
if("zoom" in imageObj==false){
imageObj.zoom=false;
}
container.css({"background-size": settings.zoom + "%"})
imageObj.zoom=true;
$(this).addClass('active');
imageObj.zoom ? zoomIn(e):null;
});
container.on('mouseleave', function (){
imageObj.zoom=false;
container.css({"background-size": 0})
$(this).removeClass('active');
});
}
let newElm;
console.log(this[0].nodeName);
if(this[0].nodeName==="IMG"){
newElm=$(this).replaceWith(String(imageObj.template));
attachEvents($('.containerZoom')[$('.containerZoom').length - 1]);
}else{
newElm=$(this);
}
return newElm;
};