image-focus/dist/image-focus.cjs.production.min.js

A dependency free utility for cropping images based on a focal point ~2.13kB gzipped

"use strict";function t(t){for(var e=arguments.length,i=new Array(e>1?e-1:0),n=1;n<e;n++)i[n-1]=arguments[n];return i.forEach((function(e){return Object.keys(e).forEach((function(i){return t[i]=e[i]}))})),t}Object.defineProperty(exports,"__esModule",{value:!0});var e={position:"relative",overflow:"hidden"},i={position:"absolute",top:"0",right:"0",bottom:"0",left:"0"},n={display:"block",maxWidth:"100%",touchAction:"none"},s={position:"absolute",cursor:"move",transform:"translate(-50%, -50%)"},o={onChange:function(){},retina:"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3e %3cg fill='none' fill-rule='evenodd'%3e %3ccircle id='a' cx='10' cy='10' r='10' fill='black' fill-opacity='.3' /%3e %3ccircle cx='10' cy='10' r='9' stroke='white' stroke-opacity='.8' stroke-width='2'/%3e %3c/g%3e%3c/svg%3e"},a=function(){function i(i,s){var a=this;void 0===s&&(s={}),this._enabled=!1,this.startDragging=function(t){t.preventDefault(),a.isDragging=!0,t instanceof MouseEvent?a.updateCoordinates(t.clientX,t.clientY):a.updateCoordinates(t.touches[0].clientX,t.touches[0].clientY)},this.handleMove=function(t){if(t.preventDefault(),t instanceof MouseEvent)a.updateCoordinates(t.clientX,t.clientY);else{var e=t.touches[0],i=document.elementFromPoint(e.pageX,e.pageY);i!==a.retina&&i!==a.img?a.stopDragging():a.updateCoordinates(e.clientX,e.clientY)}},this.stopDragging=function(){a.isDragging=!1},this.updateRetinaPositionFromFocus=function(){a.updateRetinaPosition(a.calculateOffsetFromFocus())},this.updateRetinaPosition=function(t){a.retina.style.top=t.offsetY+"px",a.retina.style.left=t.offsetX+"px"},this.options=t({},o,s),this.img=i,this.container=i.parentElement,this.img.draggable=!1,t(this.img.style,n),t(this.container.style,e),this.focus=this.getFocus(),this.enable()}var a,r=i.prototype;return r.getFocus=function(){return this.options.focus?this.options.focus:{x:parseFloat(this.img.getAttribute("data-focus-x"))||0,y:parseFloat(this.img.getAttribute("data-focus-y"))||0}},r.enable=function(){this._enabled||(this.retina=document.createElement("img"),this.retina.src=this.options.retina,this.retina.draggable=!1,this.container.appendChild(this.retina),t(this.retina.style,s),this.startListening(),this.setFocus(this.focus),this._enabled=!0)},r.disable=function(){this._enabled&&this.retina&&(this.stopListening(),this.container.removeChild(this.retina),this._enabled=!1)},r.startListening=function(){this.container.addEventListener("mousedown",this.startDragging),this.container.addEventListener("mousemove",this.handleMove),this.container.addEventListener("mouseup",this.stopDragging),this.container.addEventListener("mouseleave",this.stopDragging),this.container.addEventListener("touchend",this.stopDragging),this.container.addEventListener("touchstart",this.startDragging,{passive:!0}),this.container.addEventListener("touchmove",this.handleMove,{passive:!0}),this.img.addEventListener("load",this.updateRetinaPositionFromFocus)},r.stopListening=function(){this.container.removeEventListener("mousedown",this.startDragging),this.container.removeEventListener("mousemove",this.handleMove),this.container.removeEventListener("mouseup",this.stopDragging),this.container.removeEventListener("mouseleave",this.stopDragging),this.container.removeEventListener("touchend",this.stopDragging),this.container.removeEventListener("touchstart",this.startDragging),this.container.removeEventListener("touchmove",this.handleMove),this.img.removeEventListener("load",this.updateRetinaPositionFromFocus)},r.setFocus=function(t){this.focus=t,this.img.setAttribute("data-focus-x",t.x.toString()),this.img.setAttribute("data-focus-y",t.y.toString()),this.updateRetinaPositionFromFocus(),this.options.onChange(t)},r.calculateOffsetFromFocus=function(){var t=this.img.getBoundingClientRect();return{offsetX:t.width*(this.focus.x/2+.5),offsetY:t.height*(this.focus.y/-2+.5)}},r.updateCoordinates=function(t,e){if(this.isDragging){var i=this.img.getBoundingClientRect();this.setFocus({x:2*((t-i.left)/i.width-.5),y:-2*((e-i.top)/i.height-.5)})}},(a=[{key:"enabled",get:function(){return this._enabled}}])&&function(t,e){for(var i=0;i<e.length;i++){var n=e[i];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(t,n.key,n)}}(i.prototype,a),i}(),r={minHeight:"100%",minWidth:"100%"},h={height:"100%",width:"100%",border:"none",opacity:0,zIndex:-1,pointerEvents:"none"},c={debounceTime:17,updateOnWindowResize:!0,updateOnContainerResize:!1,containerPosition:"relative"},u=function(){function n(n,s){var o,a,h,u=this;void 0===s&&(s={}),this.imageNode=n,this.listening=!1,this.setFocus=function(t){u.focus=t,u.img.setAttribute("data-focus-x",t.x.toString()),u.img.setAttribute("data-focus-y",t.y.toString()),u.applyShift()},this.applyShift=function(){var t=u.img,e=t.naturalWidth,i=t.naturalHeight,n=u.container.getBoundingClientRect(),s=n.width,o=n.height,a="0",r="0";if(!(s>0&&o>0&&e>0&&i>0))return!1;var h=e/s,c=i/o;u.img.style.maxHeight=null,u.img.style.maxWidth=null,e>s&&i>o&&(u.img.style[h>c?"maxHeight":"maxWidth"]="100%"),h>c?a=u.calcShift(c,s,e,u.focus.x)+"%":h<c&&(r=u.calcShift(h,o,i,u.focus.y,!0)+"%"),u.img.style.top=r,u.img.style.left=a},this.options=t(c,s),this.img=n,this.container=n.parentElement,this.img.__focused_image_instance__&&(this.img.__focused_image_instance__.stopListening(),this.img.removeEventListener("load",this.applyShift)),this.img.__focused_image_instance__=this,this.img.addEventListener("load",this.applyShift),t(this.container.style,e),this.container.style.position=this.options.containerPosition,t(this.img.style,r,i),this.debounceApplyShift=(o=this.applyShift,a=this.options.debounceTime,function(){for(var t=arguments.length,e=new Array(t),i=0;i<t;i++)e[i]=arguments[i];clearTimeout(h),h=setTimeout((function(){return o.apply(void 0,e)}),a)}),this.focus=this.options.focus?this.options.focus:{x:parseFloat(this.img.getAttribute("data-focus-x"))||0,y:parseFloat(this.img.getAttribute("data-focus-y"))||0},this.startListening(),this.setFocus(this.focus)}var s=n.prototype;return s.startListening=function(){var e=this;if(!this.listening&&(this.listening=!0,this.options.updateOnWindowResize&&window.addEventListener("resize",this.debounceApplyShift),this.options.updateOnContainerResize)){var n=document.createElement("object");t(n.style,h,i),n.addEventListener("load",(function(t){return n.contentDocument.defaultView.addEventListener("resize",(function(){return e.debounceApplyShift()}))})),n.type="text/html",n.setAttribute("aria-hidden","true"),n.tabIndex=-1,this.container.appendChild(n),n.data="about:blank",this.resizeListenerObject=n}},s.stopListening=function(){this.listening&&(this.listening=!1,window.removeEventListener("resize",this.debounceApplyShift),this.resizeListenerObject&&this.resizeListenerObject.contentDocument&&(this.resizeListenerObject.contentDocument.defaultView.removeEventListener("resize",this.debounceApplyShift),this.container.removeChild(this.resizeListenerObject),this.resizeListenerObject=null))},s.calcShift=function(t,e,i,n,s){var o=Math.floor(e/2),a=(n+1)/2,r=Math.floor(i/t),h=Math.floor(a*r);s&&(h=r-h);var c=h-o,u=r-h,g=e-o;return u<g&&(c-=g-u),c<0&&(c=0),-100*c/e},n}();exports.FocusPicker=a,exports.FocusedImage=u;
//# sourceMappingURL=image-focus.cjs.production.min.js.map