smart-admin/rc-busness/static/royalcanin-cdn-assets-new/css_js/royal-canin.utilities.image-zoom.js
2022-01-11 11:57:54 +08:00

1 line
10 KiB
JavaScript

(window["RCDLjsonFunction"]=window["RCDLjsonFunction"]||[]).push([[36],{123:function(e,t,n){"use strict";n.r(t);var a=n(55);var o=n.n(a);var i=n(21);var r=n.n(i);var l=n(20);var m=n.n(l);var s=n(154);var g=n.n(s);var c=n(32);var u=n.n(c);var d=n(34);var f=n.n(d);var v=n(75);var p=n.n(v);var h=n(22);var C=n.n(h);var I=n(262);var L=n.n(I);function asyncGeneratorStep(e,t,n,a,o,i,r){try{var l=e[i](r);var m=l.value}catch(e){n(e);return}if(l.done){t(m)}else{Promise.resolve(m).then(a,o)}}function _asyncToGenerator(e){return function(){var t=this,n=arguments;return new Promise((function(a,o){var i=e.apply(t,n);function _next(e){asyncGeneratorStep(i,a,o,_next,_throw,"next",e)}function _throw(e){asyncGeneratorStep(i,a,o,_next,_throw,"throw",e)}_next(undefined)}))}}RCDL.utilities.imageZoom={elements:{targetImage:null,zoomedImageContainer:null,zoomedImage:null,lens:null},zoomFactor:null,imageDimensions:null,cursorPosition:{x:0,y:0},lensPosition:{x:null,y:null},touchPosition:{x:0,y:0},lastImagePosition:{x:0,y:0},isZoomed:false,start:function start(e){var t=e.element,n=e.selector,a=n===void 0?RCDL.utilities.imageZoom.defaultSelector:n;RCDL.utilities.imageZoom.init(a,t)},getTargetElement:function getTargetElement(e){return e.querySelector(".tns-slide-active img")},init:function init(e,t){RCDL.utilities.DOMcheckElements({elements:t,selectors:e,name:"imageZoom"}).forEach((function(e){document.addEventListener("image_gallery_loaded",(function(){RCDL.utilities.imageZoom.zoomFactor=e.getAttribute("data-zoom-factor")||3;if(document.documentElement.clientWidth<=RCDL.config.breakpoints.md||RCDL.hasTouch()){RCDL.utilities.imageZoom.handleTouch(e)}else{RCDL.utilities.imageZoom.handleHover(e);document.addEventListener("image_gallery_change",(function(){RCDL.utilities.imageZoom.handleHover(e)}))}}))}))},handleTouch:function handleTouch(e){var t=RCDL.utilities.imageZoom,a=t.elements,o=t.getTargetElement,i=t.zoomFactor,r=t.touchPosition,l=t.lastImagePosition,m=t.removeZoomContainer,s=t.createZoomContainer,g=t.addZoomedImage;function calculateTransformOrigin(e,t){return"".concat(e.x/t.offsetWidth*100,"% ").concat(e.y/t.offsetHeight*100,"%")}n.e(32).then(n.t.bind(null,335,7)).then((function(t){var n=new t.default(document.getElementsByClassName("rc-carousel__gallery-thumbnails")[0]);var c=new t.Manager(e.parentNode,{preventDefault:true});var u=new t.Tap({event:"doubleTap",taps:2});var d=new t.Pinch;c.add([u,d]);c.on("doubleTap pinch",(function(t){a.targetImage=o(e);if(t.type==="doubleTap"||t.additionalEvent==="pinchout"){if(!RCDL.utilities.imageZoom.isZoomed){var n=null;var m=null;var c=e.parentNode.getBoundingClientRect();r.x=t.srcEvent.offsetX||t.srcEvent.pageX-c.x;r.y=t.srcEvent.offsetY||t.srcEvent.pageY-(c.y+window.pageYOffset);RCDL.utilities.imageZoom.isZoomed=true;a.targetImage.style.transformOrigin=calculateTransformOrigin(r,a.targetImage);a.targetImage.style.transform="scale(".concat(i,")");s(null,true);g();n=r.x*(i-1);m=r.y*(i-1);a.zoomedImage.style.transform="translate3d(-".concat(n,"px , -").concat(m,"px, 0)");l.x="-".concat(n);l.y="-".concat(m)}}}));n.on("tap",(function(e){if(RCDL.utilities.imageZoom.isZoomed&&a.targetImage!==null&&e.target!==a.targetImage){RCDL.utilities.imageZoom.isZoomed=false;m(null,true);a.targetImage.style.transform="scale(1)"}}))}))},createZoomContainer:function createZoomContainer(e){var t=arguments.length>1&&arguments[1]!==undefined?arguments[1]:false;var n=RCDL.utilities.imageZoom.elements;var a=RCDL.utilities.createElement({tagName:"div",className:"rc-zoom__image-container"});var o=t?document.getElementsByClassName("tns-inner")[0].parentNode:document.getElementById(e);o.style.position="relative";o.appendChild(a);n.zoomedImageContainer=a},removeZoomContainer:function removeZoomContainer(e){var t=arguments.length>1&&arguments[1]!==undefined?arguments[1]:false;var n=RCDL.utilities.imageZoom.elements;var a=null;if(t&&n.zoomedImageContainer){a=n.zoomedImageContainer.parentNode}else{a=document.getElementById(e)}if(a){a.removeChild(n.zoomedImageContainer);n.zoomedImageContainer=null}},createLens:function createLens(e){var t=RCDL.utilities.createElement({tagName:"div",className:"rc-zoom__lens"});var n=RCDL.utilities.imageZoom,a=n.elements,o=n.zoomFactor;t.style.height="".concat(a.zoomedImageContainer.offsetHeight/o,"px");t.style.width="".concat(a.zoomedImageContainer.offsetWidth/o,"px");a.lens=t;RCDL.utilities.imageZoom.imageDimensions=e.getBoundingClientRect()},removeLens:function removeLens(){var e=RCDL.utilities.imageZoom.elements;e.targetImage.parentNode.removeChild(e.lens);e.lens=null},handleHover:function handleHover(e){var t=RCDL.utilities.imageZoom,n=t.createZoomContainer,a=t.removeZoomContainer,o=t.createLens,i=t.removeLens,r=t.addZoomedImage,l=t.moveLens,m=t.moveImage,s=t.elements,g=t.getLensPosition,c=t.getTargetElement;s.targetImage=c(e);var u=function handleMouseEnter(){n(e.getAttribute("data-zoom-container"));s.targetImage=RCDL.utilities.imageZoom.getTargetElement(e);if(s.targetImage!==null&&typeof s.targetImage!=="undefined"){o(s.targetImage);s.targetImage.parentNode.appendChild(RCDL.utilities.imageZoom.elements.lens);r()}};var d=function handleMouseMove(e){g(e,s.targetImage);l();m()};var f=function handleMouseOut(){if(s.targetImage!==null&&typeof s.targetImage!=="undefined"&&s.lens!==null&&typeof s.lens!=="undefined"){i();a(e.getAttribute("data-zoom-container"));s.targetImage=null}};if(!s.targetImage.hasAttribute("data-listeners-added")){s.targetImage.addEventListener("mouseenter",u);s.targetImage.addEventListener("mousemove",d);s.targetImage.addEventListener("mouseout",f);s.targetImage.setAttribute("data-listeners-added","true")}},moveImage:function moveImage(){var e=RCDL.utilities.imageZoom,t=e.elements,n=e.lensPosition;if(t.targetImage!==null&&t.lens!==null&&n!==null){var a=n.x/(t.targetImage.clientWidth-t.lens.offsetWidth);var o=n.y/(t.targetImage.clientHeight-t.lens.offsetHeight);var i=(t.zoomedImage.clientWidth-t.zoomedImage.parentElement.clientWidth)*a;var r=(t.zoomedImage.clientHeight-t.zoomedImage.parentElement.clientHeight)*o;t.zoomedImage.style.transform="translate3d(-".concat(i,"px, -").concat(r,"px, 0)")}},dragImage:function dragImage(e){event.stopPropagation();var t=RCDL.utilities.imageZoom,n=t.elements,a=t.lastImagePosition,o=t.checkForBoundry;var i=parseInt(a.x)+parseInt(e.deltaX);var r=parseInt(a.y)+parseInt(e.deltaY);var l=n.zoomedImage.offsetWidth-n.targetImage.offsetWidth;var m=n.zoomedImage.offsetHeight-n.targetImage.offsetHeight;i=o(i,l,true);r=o(r,m,true);n.zoomedImage.style.transform="translate3d(".concat(i,"px, ").concat(r,"px, 0)");if(e.isFinal){a.x=i;a.y=r}},moveLens:function moveLens(){var e=RCDL.utilities.imageZoom,t=e.elements,n=e.lensPosition;if(n.x!==null&&t.lens!==null){t.lens.style.left="".concat(n.x,"px");t.lens.style.top="".concat(n.y,"px")}},getLensPosition:function getLensPosition(e,t){var n=null;var a=null;var o=null;var i=null;var r=RCDL.utilities.imageZoom,l=r.getCursorPosition,m=r.cursorPosition,s=r.elements,g=r.lensPosition,c=r.imageDimensions,u=r.checkForBoundry;e.preventDefault();if(c!==null&&s.lens!==null){l(e,c);n=m.x-s.lens.offsetWidth/2;a=m.y-s.lens.offsetHeight/2;o=t.offsetWidth-s.lens.offsetWidth;i=t.offsetHeight-s.lens.offsetHeight;n=u(n,o);a=u(a,i);g.x=n;g.y=a}},getCursorPosition:function getCursorPosition(e,t){var n=RCDL.utilities.imageZoom.cursorPosition;e=e||window.event;var a=0;var o=0;a=e.pageX-t.left-window.pageXOffset;o=e.pageY-t.top-window.pageYOffset;n.x=a;n.y=o},addZoomedImage:function addZoomedImage(e){var t=RCDL.utilities.imageZoom,a=t.elements,o=t.zoomFactor,i=t.removeZoomContainer;var r=null;var l=RCDL.utilities.createElement({tagName:"img",className:"rc-zoom__image"});l.width=a.targetImage.offsetWidth*o;l.height=a.targetImage.offsetHeight*o;if(typeof a.targetImage.src==="undefined"){r=a.targetImage.getElementsByTagName("img")[0].src}else{r=a.targetImage.src}l.src=r.replace(/(w=)(\d{1,4})/g,"w=".concat(l.width));a.zoomedImageContainer.appendChild(l);a.zoomedImage=l;var m=RCDL.utilities.imageZoom.createSpinnerElement();a.zoomedImageContainer.appendChild(m);a.zoomedImage.addEventListener("load",(function(){if(a.zoomedImageContainer!==null){RCDL.utilities.modifyClass("add",a.zoomedImageContainer,"rc-zoom__image-container--loaded");var e=document.getElementById("zoom-spinner");a.zoomedImageContainer.removeChild(e);n.e(32).then(n.t.bind(null,335,7)).then((function(e){var t=new e.Manager(a.zoomedImage,{preventDefault:true});var n=new e.Pan({event:"panHorizontal",direction:e.DIRECTION_HORIZONTAL});var o=new e.Pan({event:"panVertical",direction:e.DIRECTION_VERTICAL});var r=new e.Tap({event:"doubleTap",taps:2});var l=new e.Pinch;t.add([n,o,r,l]);t.on("panVertical panHorizontal doubleTap pinch",(function(e){e.srcEvent.stopImmediatePropagation();RCDL.utilities.imageZoom.dragImage(e);if(e.type==="doubleTap"||e.additionalEvent==="pinchin"){i(null,true);a.targetImage.style.transform="scale(1)";RCDL.utilities.imageZoom.isZoomed=false}}))}))}}))},checkForBoundry:function checkForBoundry(e,t){var n=arguments.length>2&&arguments[2]!==undefined?arguments[2]:false;var a=e;switch(n){case true:if(Math.abs(a)>t){a=t*-1}if(a>0){a=0}break;default:if(a>t){a=t}if(a<0){a=0}}return a},createSpinnerElement:function createSpinnerElement(){var e=RCDL.utilities.createElement({tagName:"div",className:"rc-loader-infinite",attributes:{id:"zoom-spinner"}});var t=RCDL.utilities.createElement({tagName:"object",className:"rc-loader__logo logo-svg logo--crown",attributes:{data:"".concat(RCDL.config.assets,"logo--crown.svg?v=").concat(RCDL.config.version.release),typ:"image/svg+xml"}});var n=RCDL.utilities.createElement({tagName:"img",attributes:{src:"".concat(RCDL.config.assets,"1x1.gif?v=").concat(RCDL.config.version.release),style:"background-image: url('".concat(RCDL.config.assets,"logo--crown.png?v=").concat(RCDL.config.version.release,"')"),width:"150",height:"100",alt:"Royal Caninn logo loader"}});var a=RCDL.utilities.createElement({tagName:"div",className:"rc-loader__spinner"});var o=RCDL.utilities.createElement({tagName:"div",className:"rc-loader__background"});t.appendChild(n);e.appendChild(t);e.appendChild(a);e.appendChild(o);return e}};t["default"]={fn:function(){var e=_asyncToGenerator(regeneratorRuntime.mark((function _callee(e){return regeneratorRuntime.wrap((function _callee$(t){while(1){switch(t.prev=t.next){case 0:return t.abrupt("return",RCDL.utilities.imageZoom.init(".rc-carousel__gallery-image",e));case 1:case"end":return t.stop()}}}),_callee)})));function fn(t){return e.apply(this,arguments)}return fn}(),setup:function setup(e){RCDL.utilities.imageZoom.defaultSelector=e}}}}]);