trilium/libraries/wheel-zoom.min.js
2021-11-15 22:28:56 +01:00

2 lines
14 KiB
JavaScript

(function(a,b){"object"==typeof exports&&"undefined"!=typeof module?module.exports=b():"function"==typeof define&&define.amd?define(b):(a="undefined"==typeof globalThis?a||self:globalThis,a.WZoom=b())})(this,function(){'use strict';var x=Math.min,y=Math.abs;function a(a,e){return b(a)||c(a,e)||d(a,e)||f()}function b(a){if(Array.isArray(a))return a}function c(a,b){var c=null==a?null:"undefined"!=typeof Symbol&&a[Symbol.iterator]||a["@@iterator"];if(null!=c){var d,e,f=[],g=!0,h=!1;try{for(c=c.call(a);!(g=(d=c.next()).done)&&(f.push(d.value),!(b&&f.length===b));g=!0);}catch(a){h=!0,e=a}finally{try{g||null==c["return"]||c["return"]()}finally{if(h)throw e}}return f}}function d(a,b){if(a){if("string"==typeof a)return e(a,b);var c=Object.prototype.toString.call(a).slice(8,-1);return"Object"===c&&a.constructor&&(c=a.constructor.name),"Map"===c||"Set"===c?Array.from(a):"Arguments"===c||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(c)?e(a,b):void 0}}function e(a,b){(null==b||b>a.length)&&(b=a.length);for(var c=0,d=Array(b);c<b;c++)d[c]=a[c];return d}function f(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}function g(a){var b=a.getBoundingClientRect(),c=document,d=c.body,e=c.documentElement,f=window.pageYOffset||e.scrollTop||d.scrollTop,g=window.pageXOffset||e.scrollLeft||d.scrollLeft,h=e.clientTop||d.clientTop||0,i=e.clientLeft||d.clientLeft||0,j=b.top+f-h,k=b.left+g-i;return{top:j,left:k}}function h(a,b){if(a&&b)for(var c in b)b.hasOwnProperty(c)&&(a[c]=b[c]);return a}function i(a,b,c){var d=!!(3<arguments.length&&void 0!==arguments[3])&&arguments[3];a.addEventListener(b,c,d)}function j(a,b,c){var d=!!(3<arguments.length&&void 0!==arguments[3])&&arguments[3];a.removeEventListener(b,c,d)}function k(){return"ontouchstart"in window||0<navigator.MaxTouchPoints||0<navigator.msMaxTouchPoints}function l(a){return"wheel"===a.type||"pointerup"===a.type||"pointerdown"===a.type||"pointermove"===a.type||"mousedown"===a.type||"mousemove"===a.type||"mouseup"===a.type?a.clientX:a.changedTouches[0].clientX}function m(a){return"wheel"===a.type||"pointerup"===a.type||"pointerdown"===a.type||"pointermove"===a.type||"mousedown"===a.type||"mousemove"===a.type||"mouseup"===a.type?a.clientY:a.changedTouches[0].clientY}function n(a,b){var c=2<arguments.length&&void 0!==arguments[2]?arguments[2]:{};this._dropHandler=this._dropHandler.bind(this),this._grabHandler=this._grabHandler.bind(this),this._moveHandler=this._moveHandler.bind(this),c.smoothExtinction=+c.smoothExtinction,isNaN(c.smoothExtinction)&&(c.smoothExtinction=.25),this.options=h({smoothExtinction:.25,onGrab:null,onMove:null,onDrop:null},c),this.isTouch=k(),this.events=this.isTouch?{grab:"touchstart",move:"touchmove",drop:"touchend"}:{grab:"mousedown",move:"mousemove",drop:"mouseup"},this.events.options=!!this.isTouch&&{passive:!1},this.window=a,this.content=b,i(this.content.$element,this.events.grab,this._grabHandler,this.events.options)}function o(a,b,c){var d=b.left,e=b.top,f=b.scale;c.smoothExtinction?a.style.transition="transform ".concat(c.smoothExtinction,"s"):a.style.removeProperty("transition"),a.style.transform="translate3d(".concat(d,"px, ").concat(e,"px, 0px) scale(").concat(f,")")}function p(a){var b=1<arguments.length&&void 0!==arguments[1]?arguments[1]:{};this._init=this._init.bind(this),this._prepare=this._prepare.bind(this),this._computeNewScale=this._computeNewScale.bind(this),this._computeNewPosition=this._computeNewPosition.bind(this),this._transform=this._transform.bind(this),this._wheelHandler=q.bind(this),this._downHandler=r.bind(this),this._upHandler=s.bind(this),this._zoomTwoFingers_TouchmoveHandler=t.bind(this),this._zoomTwoFingers_TouchendHandler=u.bind(this),this.content={},this.window={},this.isTouch=!1,this.events=null,this.direction=1,this.options=null,this.dragScrollable=null,this.coordsOnMouseDown=null;var c={type:"image",width:null,height:null,dragScrollable:!0,dragScrollableOptions:{},minScale:null,maxScale:1,speed:50,zoomOnClick:!0,watchImageChange:!0,smoothExtinction:.3,alignContent:"center",disableWheelZoom:!1};if("string"==typeof a)this.content.$element=document.querySelector(a);else if(a instanceof HTMLElement)this.content.$element=a;else throw"WZoom: `selectorOrHTMLElement` must be selector or HTMLElement, and not ".concat({}.toString.call(a));if(this.isTouch=k(),this.events=this.isTouch?{down:"touchstart",up:"touchend"}:{down:"mousedown",up:"mouseup"},this.events.options=!!this.isTouch&&{passive:!0},this.content.$element)if(b.smoothExtinction=+b.smoothExtinction,isNaN(b.smoothExtinction)&&(b.smoothExtinction=c.smoothExtinction),this.options=h(c,b),this.options.minScale&&this.options.minScale>=this.options.maxScale&&(this.options.minScale=null),this.window.$element=this.content.$element.parentNode,"image"===this.options.type){var d=!1;this.content.$element.complete&&(this._init(),d=!0),d&&!0!==this.options.watchImageChange||i(this.content.$element,"load",this._init,!this.options.watchImageChange&&{once:!0})}else this._init()}function q(a){this.options.disableWheelZoom||(a.preventDefault(),this._transform(this._computeNewPosition(this._computeNewScale(a.deltaY),{x:l(a),y:m(a)})))}function r(a){(this.isTouch&&1===a.touches.length||1===a.buttons)&&(this.coordsOnMouseDown={x:l(a),y:m(a)})}function s(a){this.coordsOnMouseDown&&this.coordsOnMouseDown.x===l(a)&&this.coordsOnMouseDown.y===m(a)&&(this._transform(this._computeNewPosition(1===this.direction?this.content.maxScale:this.content.minScale,{x:l(a),y:m(a)})),this.direction*=-1),this.coordsOnMouseDown=null}function t(a){var b=Math.round,c=Math.sqrt,d=Math.pow;if(2===a.targetTouches.length){var e=a.targetTouches[0].clientX,f=a.targetTouches[0].clientY,g=a.targetTouches[1].clientX,h=a.targetTouches[1].clientY,i=b(c(d(y(e-g),2)+d(y(f-h),2))),j=0;if(i>this.fingersHypot+5&&(j=-1),i<this.fingersHypot-5&&(j=1),0!==j){if(null!==this.fingersHypot||1===j){var k=new Event("wheel");k.deltaY=j,k.clientX=x(e,g)+y(e-g)/2,k.clientY=x(f,h)+y(f-h)/2,this._wheelHandler(k)}this.fingersHypot=i,this.zoomPinchWasDetected=!0}}}function u(){this.zoomPinchWasDetected&&(this.fingersHypot=null,this.zoomPinchWasDetected=!1)}function v(a,b,c){var d=0,e=0;switch(a.alignContent){case"left":d=(b.currentWidth-c.originalWidth)/2;break;case"top":e=(b.currentHeight-c.originalHeight)/2;break;case"right":d=-1*((b.currentWidth-c.originalWidth)/2);break;case"bottom":e=-1*((b.currentHeight-c.originalHeight)/2);}return[d,e]}function w(a,b,c){var d=Math.max,e=d(0,(c.originalWidth-b.currentWidth)/2),f=d(0,(c.originalHeight-b.currentHeight)/2);return"left"===a.alignContent?e*=2:"right"===a.alignContent&&(e=0),"bottom"===a.alignContent?f*=2:"top"===a.alignContent&&(f=0),[e,f]}return n.prototype={constructor:n,window:null,content:null,isTouch:!1,isGrab:!1,events:null,moveTimer:null,options:{},coordinates:null,speed:null,_grabHandler:function(a){(this.isTouch&&1===a.touches.length||1===a.buttons)&&(a.preventDefault(),this.isGrab=!0,this.coordinates={left:l(a),top:m(a)},this.speed={x:0,y:0},i(document,this.events.drop,this._dropHandler,this.events.options),i(document,this.events.move,this._moveHandler,this.events.options),"function"==typeof this.options.onGrab&&this.options.onGrab())},_dropHandler:function(a){a.preventDefault(),this.isGrab=!1,j(document,this.events.drop,this._dropHandler),j(document,this.events.move,this._moveHandler),"function"==typeof this.options.onDrop&&this.options.onDrop()},_moveHandler:function(a){if(this.isTouch&&1<a.touches.length)return!1;a.preventDefault();var b=this.window,c=this.content,d=this.speed,e=this.coordinates,f=this.options;d.x=l(a)-e.left,d.y=m(a)-e.top,clearTimeout(this.moveTimer),this.moveTimer=setTimeout(function(){d.x=0,d.y=0},50);var g=c.currentLeft+d.x,h=c.currentTop+d.y,i=(c.currentWidth-b.originalWidth)/2+c.correctX,j=(c.currentHeight-b.originalHeight)/2+c.correctY;y(g)<=i&&(c.currentLeft=g),y(h)<=j&&(c.currentTop=h),o(c.$element,{left:c.currentLeft,top:c.currentTop,scale:c.currentScale},this.options),e.left=l(a),e.top=m(a),"function"==typeof f.onMove&&f.onMove()},destroy:function(){for(var a in j(this.content.$element,this.events.grab,this._grabHandler,this.events.options),this)this.hasOwnProperty(a)&&(this[a]=null)}},p.prototype={constructor:p,_init:function(){this._prepare(),this.isTouch&&(this.fingersHypot=null,this.zoomPinchWasDetected=!1,i(this.content.$element,"touchmove",this._zoomTwoFingers_TouchmoveHandler),i(this.content.$element,"touchend",this._zoomTwoFingers_TouchendHandler)),!0===this.options.dragScrollable&&(this.dragScrollable&&this.dragScrollable.destroy(),this.setDragScrollable(new n(this.window,this.content,this.options.dragScrollableOptions))),i(this.content.$element,"wheel",this._wheelHandler),this.options.zoomOnClick&&(i(this.content.$element,this.events.down,this._downHandler,this.events.options),i(this.content.$element,this.events.up,this._upHandler,this.events.options))},_prepare:function(){var b=g(this.window.$element);this.window.originalWidth=this.window.$element.offsetWidth,this.window.originalHeight=this.window.$element.offsetHeight,this.window.positionLeft=b.left,this.window.positionTop=b.top,"image"===this.options.type?(this.content.originalWidth=this.options.width||this.content.$element.naturalWidth,this.content.originalHeight=this.options.height||this.content.$element.naturalHeight):(this.content.originalWidth=this.options.width||this.content.$element.offsetWidth,this.content.originalHeight=this.options.height||this.content.$element.offsetHeight),this.content.minScale=this.options.minScale||x(this.window.originalWidth/this.content.originalWidth,this.window.originalHeight/this.content.originalHeight),this.content.maxScale=this.options.maxScale,this.content.currentWidth=this.content.originalWidth*this.content.minScale,this.content.currentHeight=this.content.originalHeight*this.content.minScale;var c=v(this.options,this.content,this.window),d=a(c,2),e=d[0],f=d[1];this.content.alignPointX=e,this.content.alignPointY=f;var h=w(this.options,this.content,this.window),i=a(h,2),j=i[0],k=i[1];this.content.correctX=j,this.content.correctY=k,this.content.currentLeft=this.content.alignPointX,this.content.currentTop=this.content.alignPointY,this.content.currentScale=this.content.minScale,this.content.$element.style.transform="translate3d(".concat(this.content.alignPointX,"px, ").concat(this.content.alignPointY,"px, 0px) scale(").concat(this.content.minScale,")"),"function"==typeof this.options.prepare&&this.options.prepare()},_computeNewScale:function(a){this.direction=0>a?1:-1;var b=this.content,c=b.minScale,d=b.maxScale,e=b.currentScale,f=e+this.direction/this.options.speed;return f<c?this.direction=1:f>d&&(this.direction=-1),f<c?c:f>d?d:f},_computeNewPosition:function(a,b){var c=b.x,d=b.y,e=this.window,f=this.content,g=f.originalWidth*a,h=f.originalHeight*a,i=document,j=i.body,k=i.documentElement,l=e.pageXOffset||k.scrollLeft||j.scrollLeft,m=e.pageYOffset||k.scrollTop||j.scrollTop,n=c+l-e.positionLeft,o=e.originalWidth/2-n,p=o+f.currentLeft,q=p*(g/f.currentWidth)-p+f.currentLeft;if(-1===this.direction)switch(this.options.alignContent){case"left":g/2-q<e.originalWidth/2&&(q=(g-e.originalWidth)/2);break;case"right":g/2+q<e.originalWidth/2&&(q=-1*((g-e.originalWidth)/2));break;default:if((g-e.originalWidth)/2+f.correctX<y(q)){var r=0>q?-1:1;q=((g-e.originalWidth)/2+f.correctX)*r}}var s=d+m-e.positionTop,t=e.originalHeight/2-s,u=t+f.currentTop,v=u*(h/f.currentHeight)-u+f.currentTop;switch(this.options.alignContent){case"top":h/2-v<e.originalHeight/2&&(v=(h-e.originalHeight)/2);break;case"bottom":h/2+v<e.originalHeight/2&&(v=-1*((h-e.originalHeight)/2));break;default:if((h-e.originalHeight)/2+f.correctY<y(v)){var w=0>v?-1:1;v=((h-e.originalHeight)/2+f.correctY)*w}}a===this.content.minScale&&(q=this.content.alignPointX,v=this.content.alignPointY);var x={currentLeft:f.currentLeft,newLeft:q,currentTop:f.currentTop,newTop:v,currentScale:f.currentScale,newScale:a};return f.currentWidth=g,f.currentHeight=h,f.currentLeft=q,f.currentTop=v,f.currentScale=a,x},_transform:function(a){a.currentLeft;var b=a.newLeft;a.currentTop;var c=a.newTop;a.currentScale;var d=a.newScale;this.options.smoothExtinction?this.content.$element.style.transition="transform ".concat(this.options.smoothExtinction,"s"):this.content.$element.style.removeProperty("transition"),this.content.$element.style.transform="translate3d(".concat(b,"px, ").concat(c,"px, 0px) scale(").concat(d,")"),"function"==typeof this.options.rescale&&this.options.rescale()},_zoom:function(a){var b=g(this.window.$element),c=this.window,d=document,e=d.body,f=d.documentElement,h=c.pageXOffset||f.scrollLeft||e.scrollLeft,i=c.pageYOffset||f.scrollTop||e.scrollTop;this._transform(this._computeNewPosition(a,{x:b.left+this.window.originalWidth/2-h,y:b.top+this.window.originalHeight/2-i}))},prepare:function(){this._prepare()},zoomUp:function(){this._zoom(this._computeNewScale(-1))},zoomDown:function(){this._zoom(this._computeNewScale(1))},maxZoomUp:function(){this._zoom(this.content.maxScale)},maxZoomDown:function(){this._zoom(this.content.minScale)},setDragScrollable:function(a){this.dragScrollable=a},destroy:function(){for(var a in this.content.$element.style.transform="","image"===this.options.type&&j(this.content.$element,"load",this._init),this.isTouch&&(j(this.content.$element,"touchmove",this._zoomTwoFingers_TouchmoveHandler),j(this.content.$element,"touchend",this._zoomTwoFingers_TouchendHandler)),j(this.content.$element,"wheel",this._wheelHandler),this.options.zoomOnClick&&(j(this.content.$element,this.events.down,this._downHandler,this.events.options),j(this.content.$element,this.events.up,this._upHandler,this.events.options)),this.dragScrollable&&this.dragScrollable.destroy(),this)this.hasOwnProperty(a)&&(this[a]=null)}},p.create=function(a,b){return new p(a,b)},p});